Glitch Arcade
A mini “broken arcade cabinet” SPA where users play 3 tiny score-attack microgames (e.g., Reflex Tap, Falling Blocks, and Maze Dash) that periodically trigger harmless “glitch events” like inverted controls, color shifts, mirrored UI, or time-warp rounds. Each microgame is a self-contained component with its own rules, timer, and scoring, while a shared Arcade Shell manages game selection, global modifiers, sound toggles, and a localStorage leaderboard. The app includes a daily challenge seed (deterministic random glitches) so players can compete on the same conditions and share results.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure Tailwind content paths and add @tailwind directives + basic CSS vars in src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Add react-router setup in src/main.tsx with routes for Home, Game, Leaderboard, and Settings.
by system
Implement src/App.tsx as the top-level shell with a centered arcade frame and Outlet.
by system
Create src/components/TopNav.tsx with game title, nav links, and sound toggle button.
by system
Add src/contexts/SoundContext.tsx to manage muted state persisted to localStorage.
by system
Generate shadcn/ui components (Button, Card, Tabs, Switch, Dialog) into src/components/ui.
by system
Create src/lib/dailySeed.ts to compute a deterministic YYYY-MM-DD seed and parse override from URL.
by system
Create src/lib/rng.ts exposing a small seeded PRNG and helpers like pick() and range().
by system
Create src/glitch/glitchTypes.ts defining glitch event types, durations, and display labels.
by system
Implement src/glitch/useGlitchEngine.ts to schedule deterministic glitch events from seed + timers.
by system
Create src/glitch/GlitchOverlay.tsx that applies CSS effects (invert, hue shift, mirror, scanlines) based on active glitch.
by system
Add src/contexts/GlitchContext.tsx to expose active glitch, modifiers, and a “daily mode” seed.
by system
Create src/games/registry.ts exporting metadata and component loaders for the three microgames.
by system
Implement src/pages/Home.tsx with Cards for each microgame and a “Daily Challenge” entry point.
by system
Create src/pages/Game.tsx to host the selected microgame, HUD, and end-of-run summary.
by system
Build src/components/GameHUD.tsx to show timer, score, active glitch label, and pause/restart.
by system
Implement src/lib/leaderboard.ts to read/write top scores per game + daily seed in localStorage.
by system
Create src/pages/Leaderboard.tsx showing tabs per game and daily challenge results with clear button.
by system
Create src/pages/Settings.tsx for sound toggle, reduce-motion toggle, and daily seed override display.
by system
Implement src/games/ReflexTap.tsx as a score-attack tap-on-signal game with its own timer and scoring.
by system
Add glitch handling inside src/games/ReflexTap.tsx for inverted controls and time-warp rounds.
by system
Implement src/games/FallingBlocks.tsx as a lane-dodge/collect microgame with falling items and collisions.
by system
Add glitch handling inside src/games/FallingBlocks.tsx for mirrored UI and speed/time-warp effects.
by system
Implement src/games/MazeDash.tsx as a tiny grid maze with keyboard controls, goal, and score by checkpoints.
by system
Add glitch handling inside src/games/MazeDash.tsx for inverted controls and color shift readability changes.
by system
Create src/components/RunSummaryDialog.tsx to show score breakdown and “Save to Leaderboard” action.
by system
Add src/lib/share.ts to generate a shareable text + URL containing seed and best score for clipboard copy.
by system
Add src/styles/arcade.css and wire it in App to provide CRT frame, pixel-ish typography, and glitch animations.
by system