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 },
})