miteruzo/kekec_bbs_v2
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

#3 ぼちぼち

Browse Source
This commit is contained in:
みてるぞ
2025-08-03 21:18:45 +09:00
parent 4b4046b18b
commit 22ddfba57a
4 changed files with 151 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<title>キケッツチャンネル お絵描き掲示板</title> <title>キケッツチャンネル お絵描き掲示板</title>
</head> </head>
<body> <body>
frontend/src/App.tsx
+34 -7
View File
@@ -1,3 +1,4 @@
import cn from 'classnames'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { BrowserRouter, Link, Routes, Route, Navigate } from 'react-router-dom' 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 ThreadListPage from '@/pages/threads/ThreadListPage'
// import ThreadDetailPage from '@/pages/threads/ThreadDetailPage' // 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 () => { export default () => {
const [colourIndex, setColourIndex] = useState (0)
const [playing, setPlaying] = useState (false) const [playing, setPlaying] = useState (false)
useEffect (() => { useEffect (() => {
@@ -13,8 +26,9 @@ export default () => {
bgm.loop = true bgm.loop = true
const playBGM = async () => { const playBGM = async () => {
if (!(playing)) if (playing)
{ return
try try
{ {
await bgm.play () await bgm.play ()
@@ -27,23 +41,35 @@ export default () => {
setPlaying (false) setPlaying (false)
} }
} }
}
setInterval (playBGM, 1000) const bgmInterval = setInterval (playBGM, 1000)
document.addEventListener ('click', playBGM) document.addEventListener ('click', playBGM)
document.addEventListener ('touchstart', 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 ( return (
<BrowserRouter> <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="/" <Link to="/"
className="text-7xl text-transparent whitespace-nowrap className="text-7xl text-transparent whitespace-nowrap
bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)] bg-[linear-gradient(90deg,#ff0000,#ff8800,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)]
bg-clip-text [transform:skewX(-13.5deg)] bg-clip-text [transform:skewX(-13.5deg)]
inline-block bg-[length:200%_100%] animate-rainbow-scroll drop-shadow-[0_0_6px_black] 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> </Link>
</h1> </h1>
@@ -52,5 +78,6 @@ export default () => {
<Route path="/threads" element={<ThreadListPage />} /> <Route path="/threads" element={<ThreadListPage />} />
{/* <Route path="/threads/:id" element={<ThreadDetailPage />} /> */} {/* <Route path="/threads/:id" element={<ThreadDetailPage />} /> */}
</Routes> </Routes>
</div>
</BrowserRouter>) </BrowserRouter>)
} }
frontend/src/index.css
+92
View File
@@ -1,3 +1,95 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @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;
}
}
frontend/vite.config.ts
+1
View File
@@ -6,4 +6,5 @@ import path from 'path'
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
resolve: { alias: { '@': path.resolve (__dirname, './src') } }, resolve: { alias: { '@': path.resolve (__dirname, './src') } },
server: { host: true },
}) })