mancala/docs/specs/web-redesign/tasks.md

# Web redesign: tasks

Work through the tasks in order; each ends with its checks passing and a commit. Tick a task when it is committed.

- [x] 1. **Core**: `ThemeManager` takes its themes; `PitViewModel.highlight` set by `PitAnimator`; `getSowingPath`
      with unit tests; new texts (en, tr).
- [x] 2. **Backend**: `GET /games/popular?kind=finished`; test.
- [x] 3. **Web app shell**: the three themes, font, base styles, `AppHeader` (logo, theme swatches, account menu,
      action) on every page; restyle the lobby, privacy page, loading and connection panels.
- [x] 4. **Web app board**: `BoardView`, `PitView`, `StoreView`, stones, upright layout, highlights and move preview.
- [x] 5. **Web app game page**: players, turn, clocks, game-over card, move list and review banner.
- [x] 6. **Web app replay page**: summary card, controls card, move list.
- [x] 7. **Web app home page**: game-in-progress hero, mini boards, live / popular / recent game cards.
- [x] 8. **Checks and docs**: build, Chrome check of every page at desktop and phone width in all three themes;
      `AGENTS.md` and `TODO.md`.
docs(web-redesign): add the spec Requirements, design and tasks for implementing the new web design (themes, board, game, replay and home pages). 2026-10-16 09:30:28 +03:00			`# Web redesign: tasks`

			`Work through the tasks in order; each ends with its checks passing and a commit. Tick a task when it is committed.`

feat(core): add what the web redesign needs ThemeManager takes its list of themes, PitAnimator marks animated pits with PitViewModel.highlight, getSowingPath lists the pits a move sows into, and new texts in English and Turkish. 2026-10-16 09:31:28 +03:00			- [x] 1. Core: `ThemeManager` takes its themes; `PitViewModel.highlight` set by `PitAnimator`; `getSowingPath`
docs(web-redesign): add the spec Requirements, design and tasks for implementing the new web design (themes, board, game, replay and home pages). 2026-10-16 09:30:28 +03:00			`with unit tests; new texts (en, tr).`
feat(backend): list popular finished games while games are live GET /games/popular?kind=finished returns the most watched finished games even when games are being played, so the web app can show live and popular games together. 2026-10-16 09:31:44 +03:00			- [x] 2. Backend: `GET /games/popular?kind=finished`; test.
feat(frontend): add the new themes and header Ceviz, Gece and Yeşim themes as CSS variables on <html>, Bricolage Grotesque, shared styles, and one header for every page with theme swatches, the account menu and the page's main action. The lobby, privacy page and status panels use the new look. 2026-10-16 09:35:39 +03:00			- [x] 3. Web app shell: the three themes, font, base styles, `AppHeader` (logo, theme swatches, account menu,
docs(web-redesign): add the spec Requirements, design and tasks for implementing the new web design (themes, board, game, replay and home pages). 2026-10-16 09:30:28 +03:00			`action) on every page; restyle the lobby, privacy page, loading and connection panels.`
feat(frontend): draw the new board Pits and stores are wells with scattered stones and count badges, the viewer's store on the right. Below 600 px the board stands upright. Playable pits preview their move on hover, animated pits are ringed and the pit of the last move has a dashed ring. 2026-10-16 09:37:50 +03:00			- [x] 4. Web app board: `BoardView`, `PitView`, `StoreView`, stones, upright layout, highlights and move preview.
feat(frontend): lay out the game page in the new design Players beside the board with avatar, online status, store count and clock, the turn between them, a game-over card over the board, and a move list with the newest move first and tags for extra turns, captures and store gains. On phones the bottom player is shown below the board. 2026-10-16 09:41:47 +03:00			`- [x] 5. Web app game page: players, turn, clocks, game-over card, move list and review banner.`
feat(frontend): lay out the replay page in the new design A summary card with the result, date, duration, move count, players and score; players and the move number beside the board; a controls card with the transport buttons, speed, timeline and the shown move with its tags; the landing pit of the shown move is ringed. 2026-10-16 10:19:57 +03:00			`- [x] 6. Web app replay page: summary card, controls card, move list.`
feat(frontend): lay out the home page in the new design The game in progress comes first with a large mini board; live, popular and recent games are grids of cards with the score, a mini board and a status pill. Live and popular games are shown together; live games are hidden while nothing is being played. 2026-10-16 10:21:46 +03:00			`- [x] 7. Web app home page: game-in-progress hero, mini boards, live / popular / recent game cards.`
docs: document the web redesign AGENTS.md notes on the themes, plain CSS for container queries and driving the app in Chrome; TODO.md gets the mobile app and rematch as open work; the spec is marked implemented. 2026-10-16 10:26:59 +03:00			`- [x] 8. Checks and docs: build, Chrome check of every page at desktop and phone width in all three themes;`
docs(web-redesign): add the spec Requirements, design and tasks for implementing the new web design (themes, board, game, replay and home pages). 2026-10-16 09:30:28 +03:00			`AGENTS.md` and `TODO.md`.