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

#3 ぼちぼち

main
みてるぞ 1 week ago
parent
4b4046b18b
commit
22ddfba57a
4 changed files with 152 additions and 31 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      frontend/index.html
  2. +58
    -31
      frontend/src/App.tsx
  3. +92
    -0
      frontend/src/index.css
  4. +1
    -0
      frontend/vite.config.ts

+ 1
- 0
frontend/index.html 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>


+ 58
- 31
frontend/src/App.tsx 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,44 +26,58 @@ export default () => {
bgm.loop = true bgm.loop = true


const playBGM = async () => { const playBGM = async () => {
if (!(playing))
{
try
{
await bgm.play ()
bgm.loop = true
setPlaying (true)
}
catch
{
setPlaying (false)
}
}
if (playing)
return
try
{
await bgm.play ()
bgm.loop = true
setPlaying (true)
}
catch
{
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">
<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">
クソ掲示板
</Link>
</h1>
<Routes>
<Route path="/" element={<Navigate to="/threads" replace />} />
<Route path="/threads" element={<ThreadListPage />} />
{/* <Route path="/threads/:id" element={<ThreadDetailPage />} /> */}
</Routes>
<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 hover:text-transparent dark:hover:text-transparent">
クソ掲示板
</Link>
</h1>
<Routes>
<Route path="/" element={<Navigate to="/threads" replace />} />
<Route path="/threads" element={<ThreadListPage />} />
{/* <Route path="/threads/:id" element={<ThreadDetailPage />} /> */}
</Routes>
</div>
</BrowserRouter>) </BrowserRouter>)
} }

+ 92
- 0
frontend/src/index.css 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;
}
}

+ 1
- 0
frontend/vite.config.ts 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 },
}) })

Write Preview
Loading…
Cancel
Save