From 22ddfba57ae3d9a4dc9395a54b6df434748d6d40 Mon Sep 17 00:00:00 2001 From: miteruzo Date: Sun, 3 Aug 2025 21:18:45 +0900 Subject: [PATCH] =?UTF-8?q?#3=20=E3=81=BC=E3=81=A1=E3=81=BC=E3=81=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/index.html | 1 + frontend/src/App.tsx | 89 +++++++++++++++++++++++++-------------- frontend/src/index.css | 92 +++++++++++++++++++++++++++++++++++++++++ frontend/vite.config.ts | 1 + 4 files changed, 152 insertions(+), 31 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index d792404..270056d 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,7 @@ + キケッツチャンネル お絵描き掲示板 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5dad343..12a25c0 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -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,44 +26,58 @@ export default () => { bgm.loop = true 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 ('touchstart', playBGM) - }, []) + const changeColour = () => { + setColourIndex (idx => Math.floor (Math.random () * colours.length)) + } + changeColour () + const colouringInterval = setInterval (changeColour, 3000) + + return () => { + clearInterval (bgmInterval) + clearInterval (colouringInterval) + } + }, []) return ( -

- - クソ掲示板 - -

- - } /> - } /> - {/* } /> */} - +
+

+ + クソ掲示板 + +

+ + } /> + } /> + {/* } /> */} + +
) } diff --git a/frontend/src/index.css b/frontend/src/index.css index b5c61c9..adc5b01 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -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; + } +} diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 83a2ada..4a72a9b 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -6,4 +6,5 @@ import path from 'path' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve (__dirname, './src') } }, + server: { host: true }, })