Add game selection screen and new run wizard

Build a 3-step wizard at /runs/new: select game (themed gradient cards
grouped by generation with filter tabs), configure rules (reuses existing
RulesConfiguration), and name/create run. Remove standalone Games and Rules
pages since they're now integrated into the wizard flow.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-05 15:09:25 +01:00
parent 7c65775c8b
commit 982154b348
11 changed files with 465 additions and 81 deletions

View File

@@ -1,24 +1,30 @@
---
# nuzlocke-tracker-uw2j
title: Game Selection Screen
status: todo
status: completed
type: task
priority: normal
created_at: 2026-02-04T15:44:16Z
updated_at: 2026-02-04T15:44:16Z
updated_at: 2026-02-05T14:02:43Z
parent: nuzlocke-tracker-f5ob
---
Build the initial screen where users select which Pokémon game they want to track.
## Checklist
- [ ] Create game selection component
- [ ] Display games grouped by generation
- [ ] Show game artwork/logo for each option
- [ ] Add search/filter functionality for games
- [ ] Navigate to rule settings after selection
- [ ] Allow returning to change game selection
- [x] Create game selection component
- [x] Display games grouped by generation
- [x] Show game artwork/logo for each option
- [x] Add search/filter functionality for games
- [x] Navigate to rule settings after selection
- [x] Allow returning to change game selection
## UX Considerations
- Games should be visually recognizable
- Consider showing regional variants (e.g., Kanto games together)
- Mobile-friendly grid/list layout
## Implementation Notes
- Game selection is step 1 of a 3-step new run wizard at `/runs/new`
- `GameCard` component: slug-based gradient backgrounds as fallback for missing box art
- `GameGrid` component: responsive grid with generation filter tabs
- `StepIndicator` component: clickable progress bar for navigating wizard steps
- `NewRun` page: wizard flow — select game → configure rules → name & create run
- Reuses existing `RulesConfiguration` component for step 2
- `GameSelect` page at `/games` shows a browseable game grid with "Start New Run" CTA
- "New Run" link added to nav bar