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

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.