# Web redesign: design

## Themes

The design's themes are CSS custom properties (`--bg`, `--surface`, `--ink`, `--accent`, board and pit shadows, …)
under a class per theme (`t-ceviz`, `t-gece`, `t-yesim`), set on `<html>` so that menus and dialogs outside the React
root get them too.

The web app still uses core's `ThemeManager`, because `PitAnimator` listens to it. `ThemeManager` takes the list of
themes (the default stays the three themes the mobile app uses); the web app passes its own three, which are core
`Theme` objects with colours taken from the design, and maps the theme id to the CSS class.

Reason: one source of truth for the chosen theme, no change for the mobile app.

## Board highlights

`PitAnimator` marks animated pits by changing `pitColor`, which the new board does not use. `PitViewModel` gets an
optional `highlight` (`"sow" | "capture" | "store" | "selected"`) that `PitAnimator` sets next to the colour; the web
board turns it into rings. The mobile app ignores it.

## Move preview

`getSowingPath(stones, pitIndex)` in core returns the pits a move drops stones into, in order, following
`Board.move` (one stone goes to the next pit; more stones start with the played pit; every pit and store is passed,
including the opponent's store). The board counts the stones per pit for the "+n" chips; the last index is where the
last stone lands.

## Styles

The design's styles are plain CSS files next to the components (`*.css`, imported from the component), not
styled-jsx: they use container queries (`@container`) and `cqw` units, which Parcel's CSS transformer supports and
styled-jsx 5.0 does not. Class names follow the design.

## Popular games

`GET /games/popular?kind=finished` always returns finished games, so the home page can show live and popular games
at once. Without the parameter the endpoint behaves as before, which the mobile app relies on.

## Not done

- The design's "Rematch" button: there is no rematch; the game-over card offers "New Game".
- The mobile app.