developer/scrabble-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

UI: interactive back-swipe (left-band, snapshot backdrop) #40

Closed
developer wants to merge 2 commits from feature/ui-interactive-back-swipe into development
pull from: feature/ui-interactive-back-swipe
merge into: developer:development
Conversation 1 Commits 2 Files Changed 7
+652 -34
developer commented 2026-06-11 14:42:00 +00:00
Owner
Copy Link
Copy Source

Interactive "swipe right to go back" gesture replacing the old 24px edge-swipe.

Behaviour (settled in interview):

  • A rightward drag begun in the left ~38% band (touch/pen) tracks the finger; the current pane slides right while a cheap themed backdrop parallaxes in under a lightening scrim.
  • On release the screen the swipe ends toward wins: commit past ~40% of the width or a rightward flick, else snap back. The live parent mounts only on commit, which suppresses that one route slide for a seamless hand-off.
  • Wide left band, not full width (fewer accidental triggers).
  • Disabled inside Telegram (its native BackButton owns back); targets Capacitor + Telegram.
  • Yields to native vertical scroll; skips the rack, draggable pending tiles, text inputs, and the board while zoomed-in (so it never fights the board pan).

Shape: pure decision logic + per-gesture controller in lib/backswipe.ts (unit-tested); DOM wiring, hit-test and settle animation in lib/backswipe.svelte.ts; App.svelte renders the backdrop and binds the transforms. parentPath is now the single source for both the Telegram button and the swipe. Old per-screen edge-swipe removed from Screen.svelte.

Tests: backswipe unit (13) + e2e (3 — Chromium+WebKit: commit returns to lobby, zoomed-in board skips, vertical drag scrolls). Docs: UI_DESIGN.md Back bullet. Full UI gate green locally (check, unit 157, build, bundle-size 75.9/100 KB gzip, e2e 86).

Interactive "swipe right to go back" gesture replacing the old 24px edge-swipe. **Behaviour (settled in interview):** - A rightward drag begun in the **left ~38% band** (touch/pen) tracks the finger; the current pane slides right while a cheap themed **backdrop** parallaxes in under a lightening scrim. - On release the screen the swipe ends toward wins: **commit** past ~40% of the width or a rightward flick, else **snap back**. The live parent mounts only on commit, which suppresses that one route slide for a seamless hand-off. - **Wide left band**, not full width (fewer accidental triggers). - **Disabled inside Telegram** (its native BackButton owns back); targets Capacitor + Telegram. - Yields to native **vertical scroll**; skips the rack, draggable pending tiles, text inputs, and the board **while zoomed-in** (so it never fights the board pan). **Shape:** pure decision logic + per-gesture controller in `lib/backswipe.ts` (unit-tested); DOM wiring, hit-test and settle animation in `lib/backswipe.svelte.ts`; `App.svelte` renders the backdrop and binds the transforms. `parentPath` is now the single source for both the Telegram button and the swipe. Old per-screen edge-swipe removed from `Screen.svelte`. **Tests:** `backswipe` unit (13) + e2e (3 — Chromium+WebKit: commit returns to lobby, zoomed-in board skips, vertical drag scrolls). Docs: `UI_DESIGN.md` Back bullet. Full UI gate green locally (check, unit 157, build, bundle-size 75.9/100 KB gzip, e2e 86).
developer added 1 commit 2026-06-11 14:42:00 +00:00
UI: interactive back-swipe (left-band, snapshot backdrop)
CI / changes (pull_request) Successful in 2s
Details
CI / unit (pull_request) Has been skipped
Details
CI / integration (pull_request) Has been skipped
Details
CI / ui (pull_request) Successful in 41s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 57s
Details
6d263ff7c6 
Replace the 24px edge-swipe with a router-level interactive back gesture: a
rightward drag in the left ~38% band tracks the finger while a cheap themed
backdrop parallaxes in, and on release commits the back-navigation (past ~40%
of the width or a rightward flick) or snaps back. The live parent mounts only
on commit, which suppresses that one route slide for a seamless hand-off.

Pure decision logic (shouldArm/lockAxis/decideCommit + the per-gesture
controller) lives in lib/backswipe.ts with unit tests; the DOM wiring, hit-test
and settle animation in lib/backswipe.svelte.ts. The gesture yields to native
vertical scroll, skips the rack / draggable pending tiles / text inputs / the
board while zoomed-in, and is disabled inside Telegram (native BackButton owns
it). parentPath in App.svelte is now the single source for both the Telegram
button and the swipe.

Tests: backswipe unit (13) + e2e (3; Chromium+WebKit: commit, zoomed-in skip,
vertical scroll). Docs: UI_DESIGN.md Back bullet.
developer added 1 commit 2026-06-11 14:57:38 +00:00
UI: enable the back-swipe inside Telegram (fix lost swipe-back)
CI / changes (pull_request) Successful in 2s
Details
CI / unit (pull_request) Has been skipped
Details
CI / integration (pull_request) Has been skipped
Details
CI / ui (pull_request) Successful in 41s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 57s
Details
de11ae46a2 
The gesture was disabled inside Telegram on the mistaken assumption it would
fight a Telegram horizontal close gesture — but Telegram's only close/minimise
gesture is vertical (disableVerticalSwipes, Bot API 7.7+). Disabling it there,
together with dropping the old left-edge swipe, removed every swipe-back in
Telegram (which that edge-swipe — deliberately enabled in TG, commit 7e34897 —
had provided).

Make shouldArm Telegram-agnostic (drop the insideTelegram guard + its now-unused
import); the gesture works in Telegram too, alongside the native BackButton.
Drop the redundant overscroll-behavior-x on .router (body already sets
overscroll-behavior: none). Regression: an e2e drives the swipe under an
injected Telegram WebApp stub and asserts it navigates back.
developer commented 2026-06-11 15:09:17 +00:00
Author
Owner
Copy Link
Copy Source

Abandoning the interactive back-swipe: too unstable (flickering from two live panes under manual transform + async route swap). Rolling back in favour of a simple widened edge-swipe on a fresh branch.

Abandoning the interactive back-swipe: too unstable (flickering from two live panes under manual transform + async route swap). Rolling back in favour of a simple widened edge-swipe on a fresh branch.
developer closed this pull request 2026-06-11 15:09:17 +00:00
Some checks are pending
CI / changes (pull_request) Successful in 2s
Details
CI / unit (pull_request) Has been skipped
Details
CI / integration (pull_request) Has been skipped
Details
CI / ui (pull_request) Successful in 41s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 57s
Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
owner (Ilia) developer
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: developer/scrabble-game#40
Delete Branch "feature/ui-interactive-back-swipe"

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?