Riddle Relay
A playful daily riddle-and-logic mini game where users solve short puzzles in a 5-round “relay,” earning a final quirky story blurb assembled from their answers. The app includes a riddle deck (bundled JSON), hints with a small score penalty, a clean step-by-step solver UI, and a results screen with shareable summary text. Progress, streaks, and unlocked riddle packs are stored in localStorage, with clear component boundaries for Deck Browser, Relay Runner, Hint/Timer controls, and Stats/Rewards.
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 and add Tailwind directives to src/index.css.
by system
Add src/lib/utils.ts with cn() helper and any required imports.
by system
Implement src/components/AppShell.tsx with header, main container, and footer slots.
by system
Implement src/components/TopNav.tsx with links for Play, Decks, Stats, and About.
by system
Wire react-router routes in src/main.tsx for the core pages.
by system
Implement src/pages/HomePage.tsx with a primary CTA to start today’s relay.
by system
Implement src/pages/DecksPage.tsx as a container for the deck browser.
by system
Implement src/pages/PlayPage.tsx as a container for the relay runner.
by system
Implement src/pages/ResultsPage.tsx to show final story blurb and share text.
by system
Implement src/pages/StatsPage.tsx to display streaks, totals, and unlocked packs.
by system
Implement src/components/AboutDialog.tsx using shadcn Dialog for rules/explanation.
by system
Add src/data/decks.json defining packs, rounds, answers, hints, and story tokens.
by system
Add src/types/deck.ts with TypeScript types for packs, riddles, and relay rounds.
by system
Add src/lib/deckLoader.ts to load and validate decks.json into typed structures.
by system
Add src/lib/storage.ts with get/set helpers and schema versioning.
by system
Add src/types/state.ts defining relay progress, scoring, streak, and unlock state.
by system
Implement src/store/useGameStore.ts using React hooks to manage and persist state.
by system
Add src/lib/daily.ts to pick today’s pack/relay deterministically from the deck.
by system
Add src/lib/unlocks.ts to compute newly unlocked packs based on completions/streak.
by system
Implement src/components/DeckBrowser.tsx to list packs, lock state, and progress.
by system
Implement src/components/DeckPackCard.tsx showing title, difficulty, and lock badge.
by system
Implement src/components/RelayRunner.tsx to orchestrate rounds, score, and navigation.
by system
Implement src/components/RoundPrompt.tsx to render the riddle text and metadata.
by system
Implement src/components/AnswerForm.tsx with input, submit, and basic normalization.
by system
Implement src/components/HintPanel.tsx with reveal hint actions and score penalty UI.
by system
Implement src/components/TimerBar.tsx to track per-round time and expose pause/reset.
by system
Implement src/components/RoundStepper.tsx showing 5-round progress and current step.
by system
Add src/lib/story.ts to assemble the quirky story blurb from round answers/tokens.
by system
Add src/lib/share.ts to generate copyable share text with score, time, and streak.
by system