Stage 7 polish: UI/UX refinements (shell, board zoom, hint-on-board, history, ...) #8

Merged
developer merged 11 commits from feature/stage-7-ui-polish into master 2026-06-03 15:39:41 +00:00

11 Commits

Author SHA1 Message Date
Ilia Denisov f8f7d39364 Stage 7: regression tests for the polished UI (logic + behaviour)
Tests · UI / test (push) Successful in 14s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 14s
Lock the polish branch's behaviour so a future UI edit surfaces as a failing
assertion to re-agree or fix.

Unit (vitest, node env):
- placement: recallIndex, cellOccupied/isBlankSlot, non-linear direction, the
  single-tile submit default, and placementFromHint blank-fallback / rack-exhausted.
- banner: the marquee scroll-cycle repeat-then-advance, stop(), root-relative and
  multiple links.
- client.GatewayError. Extract the check-word constraints out of Game.svelte into a
  pure lib/checkword.ts (sanitize + canCheck) and cover them.

E2E (playwright mock, Chromium + WebKit):
- commit via the 🏁 control, history slide-down + close, the exchange dialog,
  check-word input sanitising + verdict, resign-to-finished, and the Settings
  board-label mode changing the on-board labels.
2026-06-03 17:33:47 +02:00
Ilia Denisov 4c475f2b0e Stage 7: run the e2e suite in WebKit too (Safari-engine coverage)
Tests · UI / test (push) Successful in 32s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 12s
Tests · UI / test (pull_request) Successful in 11s
Add a webkit project to the Playwright config so the hermetic mock-mode specs run
in both Chromium and WebKit, and install both browsers in CI. WebKit's Debian build
runs headless without extra host system libraries (verified locally: smoke + zoom
pass in webkit); the workflow comment records the one-time host install-deps fallback
if a runner ever lacks a library. Desktop WebKit does not reproduce iOS Safari's text
auto-inflation, so the app.css text-size-adjust guard stays outside e2e coverage.
2026-06-03 17:13:19 +02:00
Ilia Denisov 1b7b767576 chore: gitignore Playwright MCP scratch output (.playwright-mcp/)
Tests · Go / test (pull_request) Successful in 7s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 11s
The Playwright MCP writes page snapshots/screenshots into a .playwright-mcp/
directory while inspecting the UI; keep that scratch output out of the tree.
2026-06-03 16:50:36 +02:00
Ilia Denisov 8ec71a6816 Stage 7 UI polish: zoom-in magnifies into the focus cell (no top-left jump)
Tests · UI / test (push) Successful in 12s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 11s
Drive the focus-centring with requestAnimationFrame across the ~0.25s width
transition instead of a single scrollTo after transitionend. The board now stays
locked on the placed cell as it grows, removing the visible 'centre top-left, then
correct' double motion.
2026-06-03 16:35:39 +02:00
Ilia Denisov 1e7da5925a Stage 7 UI polish: fix ad-marquee end, drop-time zoom, focus centring, sticky rack selection
Tests · UI / test (push) Successful in 11s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 12s
Tests · UI / test (pull_request) Successful in 11s
- AdBanner: move the side inset onto the scrolling track so the long message
  scrolls to its very end; pin body text-size-adjust:100% so iOS/Safari stops
  inflating the long marquee text.
- Game: do not zoom on drag start (the player may change their mind) — zoom and
  centre happen on drop, in attemptPlace; a stray tap on an occupied cell no
  longer cancels the rack selection (wait for an empty cell).
- Board: centre the focus cell after the zoom width transition finishes (was
  clamping to top-left mid-transition); compute the cell from the rendered
  scrollWidth.
2026-06-03 16:22:01 +02:00
Ilia Denisov 10d48884ac Stage 7 polish (round 3): zoom magnifies labels, popover edge-anchor, flash x2
Tests · UI / test (push) Successful in 12s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 11s
- item 5: move container-type to the zoom-scaled .scaler so cqw labels grow WITH the board (magnifying-glass zoom); new e2e measures the font grows ~1.85x
- item 8: confirm popovers anchor to the trigger's right edge (no longer run off-screen)
- item 9: last-word flash runs 2 cycles then settles to normal (was infinite)
2026-06-03 15:52:28 +02:00
Ilia Denisov 3312130483 Stage 7 polish (round 2b): tab-bar spacing + hint badge on icon corner (items 2,3)
Tests · UI / test (push) Successful in 11s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 11s
2026-06-03 14:56:19 +02:00
Ilia Denisov 52a0e3160d Stage 7 polish (round 2): layout/zoom/tab-bar/hint/check fixes
Tests · UI / test (push) Successful in 12s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 11s
- nav bar grows ONLY in game (other screens: minimal nav, content fills); tab bar always bottom
- tab bar: tighter icon/label spacing, bigger icons, hint badge on the icon corner
- board zoom reworked to width-based (real native scroll, fixes Safari/Chrome) + constant cqw labels; pinch & swipe-to-history dropped (conflict), double-tap kept, history via menu
- beginner bonus labels shrunk to fit cells
- Draw opens exchange directly (no confirm); confirm popovers restyled like the hamburger dropdown (vertical); removed the floating direction toggle
- pending tiles darker bg (no outline); last-word dark-tile highlight (static / 1s flash)
- check button disabled for <2/>15 chars, already-checked, or 5s cooldown
- global user-select:none (inputs exempt); docs updated; TODO-4 alphabet-on-wire
2026-06-03 14:54:41 +02:00
Ilia Denisov 92a4de3bf4 Stage 7 polish: docs + mark Stage 7 done (Part H)
Tests · Go / test (pull_request) Successful in 7s
Tests · Integration / integration (pull_request) Successful in 10s
Tests · UI / test (pull_request) Successful in 12s
- new docs/UI_DESIGN.md (design system: shell, nav, tab-bar, tiles, board zoom/labels, HoldConfirm, banner rotator, result iconography)
- ARCHITECTURE: app-shell + announcement channel (mock->server) + hint place-on-board / no_hint_available contract + board-style setting
- FUNCTIONAL(+ru): hint-on-board, word-check constraints/throttle, board style
- PLAN: Stage 7 -> done + polish refinement note; CLAUDE sources list
2026-06-03 13:38:17 +02:00
Ilia Denisov 2c96c19aac Stage 7 polish: game rework + board zoom + tests (Parts D/E/F/I)
- Board: fixed-viewport transform-scale zoom (animated) with counter-scaled cqw labels, corner letters, bonus-label modes (boardlabels), contrasting grid lines
- Game: Screen shell + game tab-bar (Draw/Skip/Hint/Shuffle) via HoldConfirm popovers; MakeMove 🏁 + compact popup; rack collapses used slots; hint places tiles on board (placementFromHint) + no_hint_available toast; Scores:N replaces Hints; history slide-down (swipe/click, scroll-locked); check-word alphabet/length limit + in-memory cache + 5s throttle
- backend: no_hint_available result code split + test
- vitest: banner rotator + linkify, resultBadge, boardlabels, placementFromHint (29 tests); Playwright smoke updated; prod bundle ~74 KB gzip
2026-06-03 13:33:03 +02:00
Ilia Denisov 38be7fea96 Stage 7 polish: app shell + nav + lobby + settings (Parts A/B/C)
- Screen.svelte shell: nav bar grows, ad+content+tabbar pinned bottom (mobile feel)
- AdBanner.svelte + banner.ts rotator (params, mock long/short, linkify); Header CSS chevron + grow; Menu (bigger CSS hamburger); TabBar + HoldConfirm shared components; user-select:none
- Lobby: hide-empty sections, tab order New/Tournaments/Stats, place-based result badges (result.ts)
- Settings: Board style > Labels (beginner/classic/none) + prefs plumbing (boardlabels.ts); i18n keys + ru mirror
2026-06-03 13:20:56 +02:00