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: there is no rematch; the game-over card offers "New Game".
|
||
|
|
- The mobile app.
|