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

Conversation 1 Commits 11 Files Changed 44

+1978 -607

developer commented 2026-06-03 11:44:11 +00:00

Owner

Copy Link

Copy Source

UI/UX refinement batch on top of the Stage 7 slice (PR #7).

• Layout: mobile app-shell (nav bar grows, content pinned to the bottom) + a one-line announcement banner (mock rotator, md links).
• Nav: CSS chevron back, larger CSS hamburger, mobile-OS tab bar, no text selection.
• Lobby: hidden empty sections; tab order New/Tournaments/Stats; place-based result emoji.
• Game: fixed-viewport transform zoom with counter-scaled labels, corner-letter tiles, contrasting grid lines; Settings bonus-label style (beginner/classic/none); MakeMove 🏁 + compact popup; game tab-bar (Draw/Skip/Hint/Shuffle) with hold-confirm; hint lays tiles on the board (no spend when no move — new no_hint_available code); Scores:N replaces Hints; history slide-down (not a modal); word-check alphabet/length limit + cache + throttle.
• Docs: new docs/UI_DESIGN.md; ARCHITECTURE/FUNCTIONAL(+ru); Stage 7 marked done.

Tests: 29 Vitest + Playwright smoke + the no_hint_available Go test. Prod bundle ~74 KB gzip.

UI/UX refinement batch on top of the Stage 7 slice (PR #7). - **Layout**: mobile app-shell (nav bar grows, content pinned to the bottom) + a one-line announcement banner (mock rotator, md links). - **Nav**: CSS chevron back, larger CSS hamburger, mobile-OS tab bar, no text selection. - **Lobby**: hidden empty sections; tab order New/Tournaments/Stats; place-based result emoji. - **Game**: fixed-viewport transform zoom with counter-scaled labels, corner-letter tiles, contrasting grid lines; Settings bonus-label style (beginner/classic/none); MakeMove 🏁 + compact popup; game tab-bar (Draw/Skip/Hint/Shuffle) with hold-confirm; hint lays tiles on the board (no spend when no move — new `no_hint_available` code); Scores:N replaces Hints; history slide-down (not a modal); word-check alphabet/length limit + cache + throttle. - **Docs**: new docs/UI_DESIGN.md; ARCHITECTURE/FUNCTIONAL(+ru); Stage 7 marked done. Tests: 29 Vitest + Playwright smoke + the no_hint_available Go test. Prod bundle ~74 KB gzip.

developer added 3 commits 2026-06-03 11:44:11 +00:00

Stage 7 polish: app shell + nav + lobby + settings (Parts A/B/C) ... 38be7fea96

- 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

Stage 7 polish: game rework + board zoom + tests (Parts D/E/F/I) ... 2c96c19aac

- 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

Stage 7 polish: docs + mark Stage 7 done (Part H) ... 92a4de3bf4

- 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

developer added 1 commit 2026-06-03 12:54:43 +00:00

Stage 7 polish (round 2): layout/zoom/tab-bar/hint/check fixes ... 52a0e3160d

- 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

developer added 1 commit 2026-06-03 12:56:21 +00:00

Stage 7 polish (round 2b): tab-bar spacing + hint badge on icon corner (items 2,3) 3312130483

developer added 1 commit 2026-06-03 13:52:29 +00:00

Stage 7 polish (round 3): zoom magnifies labels, popover edge-anchor, flash x2 ... 10d48884ac

- 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)

developer added 1 commit 2026-06-03 14:22:04 +00:00

Stage 7 UI polish: fix ad-marquee end, drop-time zoom, focus centring, sticky rack selection ... 1e7da5925a

- 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.

developer added 1 commit 2026-06-03 14:36:28 +00:00

Stage 7 UI polish: zoom-in magnifies into the focus cell (no top-left jump) ... 8ec71a6816

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.

developer added 1 commit 2026-06-03 14:50:37 +00:00

chore: gitignore Playwright MCP scratch output (.playwright-mcp/) ... 1b7b767576

The Playwright MCP writes page snapshots/screenshots into a .playwright-mcp/
directory while inspecting the UI; keep that scratch output out of the tree.

developer added 1 commit 2026-06-03 15:13:21 +00:00

Stage 7: run the e2e suite in WebKit too (Safari-engine coverage) ... 4c475f2b0e

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.

developer added 1 commit 2026-06-03 15:33:48 +00:00

Stage 7: regression tests for the polished UI (logic + behaviour) ... f8f7d39364

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.

owner approved these changes 2026-06-03 15:38:27 +00:00

developer merged commit 539e24fba1 into master 2026-06-03 15:39:41 +00:00

developer deleted branch feature/stage-7-ui-polish 2026-06-03 15:39:41 +00:00

developer referenced this pull request 2026-06-06 08:31:50 +00:00

Stage 17: test-contour verification & defect fixes #19

developer referenced this issue from a commit 2026-06-06 12:08:43 +00:00

Stage 17 (contour round 4a): quick fixes

Sign in to join this conversation.

Reviewers

No Reviewers

owner

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

owner (Ilia) developer

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: developer/scrabble-game#8