sandvich
/
hackathon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

home screen lagging fix

main
Ethan 2026-04-12 01:16:09 -07:00
parent de1268c3c5
commit cf93c2d10f
4 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/AppRoutes.tsx
View File

@ -1,27 +1,31 @@
import { lazy, Suspense } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import { AppLayout } from './AppLayout'
import { ROUTE_PATHS } from './route-paths'
import { CreditsPage } from '../pages/CreditsPage'
import { EndOfGamePage } from '../pages/EndOfGamePage'
import { GamePage } from '../pages/GamePage'
import { HomePage } from '../pages/HomePage'
import { IntroPage } from '../pages/IntroPage'
import { LeaderboardPage } from '../pages/LeaderboardPage'
import { SongSelectionPage } from '../pages/SongSelectionPage'
const GamePage = lazy(() => import('../pages/GamePage').then(m => ({ default: m.GamePage })))
const SongSelectionPage = lazy(() => import('../pages/SongSelectionPage').then(m => ({ default: m.SongSelectionPage })))
const EndOfGamePage = lazy(() => import('../pages/EndOfGamePage').then(m => ({ default: m.EndOfGamePage })))
const LeaderboardPage = lazy(() => import('../pages/LeaderboardPage').then(m => ({ default: m.LeaderboardPage })))
const CreditsPage = lazy(() => import('../pages/CreditsPage').then(m => ({ default: m.CreditsPage })))
export function AppRoutes() {
return (
<Routes>
<Route element={<AppLayout />}>
<Route path={ROUTE_PATHS.intro} element={<IntroPage />} />
<Route path={ROUTE_PATHS.home} element={<HomePage />} />
<Route path={ROUTE_PATHS.songSelection} element={<SongSelectionPage />} />
<Route path={ROUTE_PATHS.game} element={<GamePage />} />
<Route path={ROUTE_PATHS.endOfGame} element={<EndOfGamePage />} />
<Route path={ROUTE_PATHS.leaderboard} element={<LeaderboardPage />} />
<Route path={ROUTE_PATHS.credits} element={<CreditsPage />} />
<Route path="*" element={<Navigate to={ROUTE_PATHS.intro} replace />} />
</Route>
</Routes>
<Suspense fallback={null}>
<Routes>
<Route element={<AppLayout />}>
<Route path={ROUTE_PATHS.intro} element={<IntroPage />} />
<Route path={ROUTE_PATHS.home} element={<HomePage />} />
<Route path={ROUTE_PATHS.songSelection} element={<SongSelectionPage />} />
<Route path={ROUTE_PATHS.game} element={<GamePage />} />
<Route path={ROUTE_PATHS.endOfGame} element={<EndOfGamePage />} />
<Route path={ROUTE_PATHS.leaderboard} element={<LeaderboardPage />} />
<Route path={ROUTE_PATHS.credits} element={<CreditsPage />} />
<Route path="*" element={<Navigate to={ROUTE_PATHS.intro} replace />} />
</Route>
</Routes>
</Suspense>
)
}

15
src/main.tsx
View File

@ -1,18 +1,21 @@
import { StrictMode } from 'react'
import { lazy, StrictMode, Suspense } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import './lib/sounds'
import './index.css'
import App from './App.tsx'
import { DebugApp } from './DebugApp.tsx'
const DebugApp = lazy(() => import('./DebugApp.tsx').then(m => ({ default: m.DebugApp })))
createRoot(document.getElementById('root')!).render(
<StrictMode>
<BrowserRouter>
<Routes>
<Route path="/debug/*" element={<DebugApp />} />
<Route path="*" element={<App />} />
</Routes>
<Suspense fallback={null}>
<Routes>
<Route path="/debug/*" element={<DebugApp />} />
<Route path="*" element={<App />} />
</Routes>
</Suspense>
</BrowserRouter>
</StrictMode>,
)

24
src/pages/HomePage.module.css
View File

@ -118,8 +118,7 @@
margin-bottom: 10px;
padding: 20px 25px 20px 18px;
border: 2px solid rgb(255 78 203 / 0.15);
background: rgb(0 0 0 / 0.45);
backdrop-filter: blur(12px);
background: rgb(0 0 0 / 0.65);
text-align: left;
color: #fff;
cursor: pointer;
@ -300,8 +299,7 @@
padding: 5px 14px;
border: 2px solid rgb(0 200 255 / 0.22);
border-radius: 5px;
background: rgb(0 0 0 / 0.45);
backdrop-filter: blur(12px);
background: rgb(0 0 0 / 0.65);
}
.poseDot {
@ -343,8 +341,7 @@
padding: 22px 25px;
border-radius: 7px;
border: 2px solid rgb(0 200 255 / 0.22);
background: rgb(0 0 0 / 0.45);
backdrop-filter: blur(12px);
background: rgb(0 0 0 / 0.65);
text-align: right;
overflow: hidden;
}
@ -534,21 +531,14 @@
box-shadow:
0 0 10px rgb(34 211 238 / 0.1),
inset 0 1px 0 rgb(255 255 255 / 0.06);
position: relative;
will-change: opacity;
animation: homeTileGlow 1.8s ease-in-out infinite;
}
@keyframes homeTileGlow {
0%,
100% {
background: rgb(40 20 70 / 0.7);
box-shadow: 0 0 8px rgb(34 211 238 / 0.1);
border-color: rgb(34 211 238 / 0.2);
}
50% {
background: rgb(80 30 90 / 0.55);
box-shadow: 0 0 16px rgb(240 171 252 / 0.2);
border-color: rgb(240 171 252 / 0.35);
}
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes eqBounce {

16
src/pages/HomePage.tsx
View File

@ -147,14 +147,14 @@ function drawSkeleton(ctx: CanvasRenderingContext2D, skeleton: Skeleton, width:
ctx.clearRect(0, 0, width, height)
ctx.save()
ctx.globalAlpha = 0.22
ctx.filter = 'blur(9px)'
line(p('lSh'), p('lEl'), '#ff4ecb', 18)
line(p('lEl'), p('lWr'), '#ff4ecb', 18)
line(p('rSh'), p('rEl'), '#00c8ff', 18)
line(p('rEl'), p('rWr'), '#00c8ff', 18)
ctx.restore()
line(p('lSh'), p('lEl'), 'rgba(255,78,203,0.12)', 24)
line(p('lEl'), p('lWr'), 'rgba(255,78,203,0.12)', 24)
line(p('rSh'), p('rEl'), 'rgba(0,200,255,0.12)', 24)
line(p('rEl'), p('rWr'), 'rgba(0,200,255,0.12)', 24)
line(p('lSh'), p('lEl'), 'rgba(255,78,203,0.08)', 36)
line(p('lEl'), p('lWr'), 'rgba(255,78,203,0.08)', 36)
line(p('rSh'), p('rEl'), 'rgba(0,200,255,0.08)', 36)
line(p('rEl'), p('rWr'), 'rgba(0,200,255,0.08)', 36)
line(p('lSh'), p('lEl'), '#ff4ecb', 4.5)
line(p('lEl'), p('lWr'), '#ff4ecb', 3.6)