Beat Bistro
A playful “cook to the rhythm” mini-game where users tap on timed prompts to assemble simple dishes across short levels (e.g., sandwich, sushi roll, smoothie). The app includes a level selector, adjustable difficulty (BPM/timing window), and a results screen with accuracy stats and unlockable ingredient themes, all saved in localStorage. Clear component boundaries: audio/metronome controller, prompt lane, dish builder preview, scoring HUD, level data loader, and settings/unlocks panels.
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 -d
by system
Configure Tailwind in src/index.css with base/components/utilities and set a simple app background.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Implement src/App.tsx with a header shell and an Outlet-like manual view switch placeholder.
by system
Add a tiny client-side router in src/router.ts to switch between Home, Level, and Results views.
by system
Create src/components/PageShell.tsx for consistent padding, max-width, and title layout.
by system
Create src/pages/HomePage.tsx with entry CTA and links to Level Select and Settings.
by system
Create src/pages/LevelSelectPage.tsx showing available levels as cards.
by system
Create src/components/LevelCard.tsx to render level name, dish, difficulty, and locked/unlocked state.
by system
Create src/pages/SettingsPage.tsx with BPM and timing-window controls plus reset buttons.
by system
Create src/state/settingsStore.ts to load/save BPM and timing window from localStorage.
by system
Create src/components/SettingsForm.tsx with sliders/inputs bound to settingsStore.
by system
Create src/game/types.ts with Level, Prompt, HitResult, and Theme type definitions.
by system
Create src/game/levels.ts exporting a small set of levels (sandwich, sushi, smoothie) with prompt timings.
by system
Create src/game/useLevel.ts hook to fetch a level by id and validate shape.
by system
Create src/audio/useMetronome.ts to schedule ticks by BPM using WebAudio without external assets.
by system
Create src/components/AudioToggle.tsx to enable/disable metronome sound via settingsStore.
by system
Create src/game/PromptLane.tsx to render upcoming prompts moving toward a hit line over time.
by system
Create src/game/HitLine.tsx to display the timing target line and timing window hint.
by system
Create src/game/useTapInput.ts to capture keyboard/touch/click taps and expose timestamps.
by system
Create src/game/scoring.ts with hit detection (perfect/good/miss) based on timing window.
by system
Create src/game/useGameplay.ts to advance time, consume taps, score prompts, and end level.
by system
Create src/game/ScoreHUD.tsx showing combo, accuracy, remaining prompts, and elapsed time.
by system
Create src/game/DishPreview.tsx to stack ingredient icons as prompts are hit.
by system
Create src/game/themes.ts defining ingredient sets and color palettes per theme.
by system
Create src/state/unlocksStore.ts to track unlocked themes/levels in localStorage.
by system
Create src/components/UnlocksPanel.tsx to display themes, requirements, and selection UI.
by system
Create src/pages/GameplayPage.tsx composing PromptLane, HitLine, DishPreview, HUD, and tap area.
by system
Create src/pages/ResultsPage.tsx showing accuracy breakdown, hit timing stats, and unlock notifications.
by system
Create src/state/historyStore.ts to save last run results per level in localStorage for display.
by system