UI: move history as a per-seat column grid + swipe-down to open #43

Merged

developer merged 3 commits from feature/ui-history-grid into development 2026-06-11 19:10:59 +00:00

Conversation 1 Commits 3 Files Changed 15

+457 -67

developer commented 2026-06-11 18:18:41 +00:00

Owner

Copy Link

Copy Source

A round of UI gesture & history polish (history grid → swipe-to-open → the fixes that make those gestures comfortable, esp. on iOS Telegram).

Move history as a per-seat column grid

The flat list becomes a ruled matrix aligned under the score plaque: one column per seat, each seat's moves filling its column top to bottom. A cell is WORD, WORD (score), centred; no player names, no running total (the plaque carries the live total). Non-play moves keep their dim (pass); the awaited opponent's next cell shows a dim thinking… (never your own turn). Thin 1px rules. Layout logic in ui/src/lib/history.ts (unit-tested); game.thinking added to EN/RU.

Gestures & overscroll

• Swipe-down on the zoom-out board opens the history (gated to the board scrolled to its top).
• No iOS page rubber-band: the SPA document is pinned (position:fixed+overflow:hidden, scoped via an app-shell class in main.ts); the landing page still scrolls. Telegram's swipe-to-minimise was already disabled at launch.
• No rubber-band inside the history drawer (overscroll-behavior:none).
• Pinch-out no longer also opens the history: the board wrapper arms its open/close pull only for a single pointer (a 2nd finger is a pinch).
• Edge-swipe-back widened to the left half of the viewport (was 20%).
• Chat nudge aligns by sender like a bubble: your own right, the opponent's left.

Verified locally: check 0/0, 155 unit, build + bundle gates, 100 e2e on Chromium + WebKit. Native iOS overscroll/pinch feel isn't reproducible in Playwright — to be confirmed live in iOS Telegram on the test contour.

A round of UI gesture & history polish (history grid → swipe-to-open → the fixes that make those gestures comfortable, esp. on iOS Telegram). ### Move history as a per-seat column grid The flat list becomes a ruled matrix aligned under the score plaque: one column per seat, each seat's moves filling its column top to bottom. A cell is `WORD, WORD (score)`, centred; no player names, no running total (the plaque carries the live total). Non-play moves keep their dim `(pass)`; the awaited opponent's next cell shows a dim `thinking…` (never your own turn). Thin 1px rules. Layout logic in `ui/src/lib/history.ts` (unit-tested); `game.thinking` added to EN/RU. ### Gestures & overscroll - **Swipe-down on the zoom-out board opens the history** (gated to the board scrolled to its top). - **No iOS page rubber-band**: the SPA document is pinned (`position:fixed`+`overflow:hidden`, scoped via an `app-shell` class in `main.ts`); the landing page still scrolls. Telegram's swipe-to-minimise was already disabled at launch. - **No rubber-band inside the history drawer** (`overscroll-behavior:none`). - **Pinch-out no longer also opens the history**: the board wrapper arms its open/close pull only for a single pointer (a 2nd finger is a pinch). - **Edge-swipe-back widened** to the left half of the viewport (was 20%). - **Chat nudge aligns by sender** like a bubble: your own right, the opponent's left. Verified locally: check 0/0, 155 unit, build + bundle gates, **100 e2e on Chromium + WebKit**. Native iOS overscroll/pinch feel isn't reproducible in Playwright — to be confirmed live in iOS Telegram on the test contour.

developer added 1 commit 2026-06-11 18:18:41 +00:00

UI: render move history as a per-seat column grid + swipe-down to open ... e68fe61e39

Replace the flat chronological move list with a ruled matrix aligned under the
score plaque: one column per seat, each seat's moves filling its column top to
bottom. A cell is the move's word(s) and its score, "WORD (12)", centred; the
player names and the running total are dropped (the plaque heads the column and
shows the live total). Non-play moves keep their dim parenthesised tag; the
awaited opponent's next cell shows a dim "thinking..." (never the viewer's own
turn). Thin 1px rules between columns and rows match the panel's separator.

Re-introduce a swipe-down-on-the-board gesture to open the history, gated to the
zoom-out board scrolled to its top so it never fights the zoomed board's pan or
the stage's own vertical scroll (the conflict that retired this gesture before).

Grid layout extracted to lib/history.ts (unit-tested); add game.thinking to the
EN/RU catalogs; e2e covers the gesture and the grid on Chromium and WebKit.

developer added 1 commit 2026-06-11 18:43:13 +00:00

UI: pin the SPA document so iOS/WKWebView cannot rubber-band the page ... 6268b9d2a2

On iOS (notably the Telegram Mini App) the document elastic-overscrolls on a
vertical drag even with overscroll-behavior:none — the whole page stretches and
bounces, and it fought the board's swipe-to-open-history. Telegram's own
swipe-to-minimise is already disabled at launch; this removes the remaining
WebKit document bounce by pinning the document (position:fixed + overflow:hidden)
for the game SPA only. Every screen already fits the visual viewport (--vvh) and
scrolls its own inner areas, so the document never needed to scroll.

Scoped to the app via an `app-shell` class set in main.ts; the standalone
landing page (landing.ts) keeps its normal scrolling document. e2e locks the
contract on both entries.

developer added 1 commit 2026-06-11 19:01:45 +00:00

UI: gesture & history polish — pinch/swipe fix, wider back-swipe, nudge align, history overscroll ... a41c35d5f9

- Stop a two-finger pinch-out from also opening the history: the board wrapper arms its
  open/close pull only while a single pointer is down (a 2nd finger is a pinch, owned by Board).
- Widen the edge-swipe-back activation band to the left half of the viewport (was 20%).
- Align a chat nudge by sender like a bubble — your own to the right, the opponent's to the
  left (only the alignment changes).
- Kill the iOS rubber-band inside the history drawer (overscroll-behavior: none).

e2e: a two-finger pinch does not open the history; a back-swipe from the left half navigates back.

owner approved these changes 2026-06-11 19:09:18 +00:00

developer merged commit feee3d6511 into development 2026-06-11 19:10:59 +00:00

developer deleted branch feature/ui-history-grid 2026-06-11 19:10:59 +00:00

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#43