#3 ぼちぼち
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<title>キケッツチャンネル お絵描き掲示板</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
+34
-7
@@ -1,3 +1,4 @@
|
||||
import cn from 'classnames'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { BrowserRouter, Link, Routes, Route, Navigate } from 'react-router-dom'
|
||||
|
||||
@@ -5,7 +6,19 @@ import bgmSrc from '@/assets/music.mp3'
|
||||
import ThreadListPage from '@/pages/threads/ThreadListPage'
|
||||
// import ThreadDetailPage from '@/pages/threads/ThreadDetailPage'
|
||||
|
||||
const colours = ['bg-fuchsia-500 dark:bg-fuchsia-900',
|
||||
'bg-lime-500 dark:bg-lime-900',
|
||||
'bg-cyan-500 dark:bg-cyan-900',
|
||||
'bg-orange-500 dark:bg-orange-900',
|
||||
'bg-pink-500 dark:bg-pink-900',
|
||||
'bg-red-500 dark:bg-red-900',
|
||||
'bg-blue-500 dark:bg-blue-900',
|
||||
'bg-green-500 dark:bg-green-900',
|
||||
'bg-yellow-500 dark:bg-yellow-900'] as const
|
||||
|
||||
|
||||
export default () => {
|
||||
const [colourIndex, setColourIndex] = useState (0)
|
||||
const [playing, setPlaying] = useState (false)
|
||||
|
||||
useEffect (() => {
|
||||
@@ -13,8 +26,9 @@ export default () => {
|
||||
bgm.loop = true
|
||||
|
||||
const playBGM = async () => {
|
||||
if (!(playing))
|
||||
{
|
||||
if (playing)
|
||||
return
|
||||
|
||||
try
|
||||
{
|
||||
await bgm.play ()
|
||||
@@ -27,23 +41,35 @@ export default () => {
|
||||
setPlaying (false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setInterval (playBGM, 1000)
|
||||
const bgmInterval = setInterval (playBGM, 1000)
|
||||
document.addEventListener ('click', playBGM)
|
||||
document.addEventListener ('touchstart', playBGM)
|
||||
}, [])
|
||||
|
||||
const changeColour = () => {
|
||||
setColourIndex (idx => Math.floor (Math.random () * colours.length))
|
||||
}
|
||||
changeColour ()
|
||||
const colouringInterval = setInterval (changeColour, 3000)
|
||||
|
||||
return () => {
|
||||
clearInterval (bgmInterval)
|
||||
clearInterval (colouringInterval)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<h1 className="text-center my-7">
|
||||
<div className={cn ('w-screen h-screen',
|
||||
colours[colourIndex],
|
||||
'transition-colors duration-[3s] ease-linear')}>
|
||||
<h1 className="text-center py-7">
|
||||
<Link to="/"
|
||||
className="text-7xl text-transparent whitespace-nowrap
|
||||
bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
|
||||
bg-clip-text [transform:skewX(-13.5deg)]
|
||||
inline-block bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black]
|
||||
font-serif">
|
||||
font-serif hover:text-transparent dark:hover:text-transparent">
|
||||
クソ掲示板
|
||||
</Link>
|
||||
</h1>
|
||||
@@ -52,5 +78,6 @@ export default () => {
|
||||
<Route path="/threads" element={<ThreadListPage />} />
|
||||
{/* <Route path="/threads/:id" element={<ThreadDetailPage />} /> */}
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>)
|
||||
}
|
||||
|
||||
@@ -1,3 +1,95 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base
|
||||
{
|
||||
body
|
||||
{
|
||||
@apply overflow-x-clip;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
@apply text-blue-700 dark:text-blue-300;
|
||||
}
|
||||
a:hover
|
||||
{
|
||||
@apply text-blue-500 dark:text-blue-100;
|
||||
}
|
||||
}
|
||||
|
||||
:root
|
||||
{
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
font-weight: 500;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button
|
||||
{
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover
|
||||
{
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible
|
||||
{
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
{
|
||||
:root
|
||||
{
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover
|
||||
{
|
||||
color: #747bff;
|
||||
}
|
||||
button
|
||||
{
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,4 +6,5 @@ import path from 'path'
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
resolve: { alias: { '@': path.resolve (__dirname, './src') } },
|
||||
server: { host: true },
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user