In-game UX: board highlight + score badge, full-width rack, bag badge, zoom setting #240
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: developer/scrabble-game#240
Reference in New Issue
Block a user
Delete Branch "feature/ingame-ux-board-highlight"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Improves the in-game UX by removing the under-board status strip and moving its signals to
the board and the surrounding chrome. One PR, per the agreed plan.
What changed
badge) plus a non-scrolling "N in the bag" footer at the foot of the move table.
plaques (turn text during play; the viewer's result once the game ends). Medals stay
hotseat-only, unchanged.
gone. Staged tiles now tint light green when they form a word (a shade darker on the
committed board tiles the word runs through) or a calm pink when they form none.
zoom), anchored to a tile corner by the owner's edge rules and clamped to stay on-board.
the tiles are square and as large as the row allows; the ✅ confirm control takes the fixed 7th
slot while a play is staged.
auto-zoom. Additionally, taking a hint while zoomed in now zooms out so the highlighted
hint word is never left off-screen.
Design note
The board highlight + badge geometry (which cells a formed word covers, where the badge
anchors) is a new pure client-side helper
ui/src/lib/formed.ts, independent of the moveevaluator — so it works whether the preview came from the local dictionary or the network
fallback. Legality and score stay with the eval; geometry with the board.
New per-theme tokens in
app.css:--tile-pending-legal/-illegal,--tile-formed,--score-badge. Colours are starting values — please eyeball them on the contour.Tests & docs
lib/formed.test.ts(15 cases — word geometry H/V/cross/lone-tile + badge corner atevery edge and the 15-letter clamp).
ingame-ux.spec.ts(turn strip, bag badge + table footer, staged-play green highlight +score badge, ✅ in the rack); updated
game/quickmatch/smoke/zoomspecs for the removed.statuscaption and the new hint-zooms-out behaviour.FUNCTIONAL.md(+_ru),UI_DESIGN.md,ARCHITECTURE.md.Verified locally green:
pnpm check,pnpm test:unit(583),pnpm build,pnpm test:e2e(chromium + webkit), plus a portrait/landscape visual pass on the mock.
No schema or wire change — the contour does not need a wipe.
Board-highlight bug (reported on the contour): formedGeometry walked cross words unconditionally, so in a single-word (one-word-per-turn) game a staged tile sitting next to a committed tile lit up a green "cross word" the engine ignores — and which need not even be a real word (the reported "БО lights up green in a one-word ПОПА play"). Gate the cross-word walk on the game's multipleWordsPerTurn flag. The score (8) was already correct — a premium square under the main word. Also, from review: - the turn strip reads the staged play's "WORD+WORD = N" while composing a legal move, reverting to the turn / result text otherwise; - the Exchange/Pass dialog shows the bag count ("In the bag: N" / "Bag is empty") right-aligned in the title row, via a new optional Modal `titleAside`; - cosmetics: half the turn strip's bottom padding (the plaques below carry their own top pad); a top gap above the landscape rack (it sat flush under the docked history); more horizontal padding on tab count badges so a 2-3 digit bag count clears the pill ends; - admin console: the game Summary now shows the single-word / multiple-words rule. Tests: formed single-word case added; full unit (584) + e2e (chromium + webkit, 113 each) green; backend build + adminconsole templates parse. Docs (FUNCTIONAL +_ru, UI_DESIGN) updated.