Halit Aksoy
a3fe708746
The rematch spec is implemented; AGENTS.md lists it with notes on the offers, the keyed game route and stale dev builds, TODO.md takes the items left out.
43 lines
2.0 KiB
Markdown
43 lines
2.0 KiB
Markdown
# 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: added later with rematches and series (`docs/specs/rematch`).
|
|
- The mobile app.
|