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

fix(ui): mobile in-app WebView polish (tap-flash, VK haptics, 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 57s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 1m13s
Details

Browse Source 
- Tap-highlight: add -webkit-tap-highlight-color: transparent on #app.
  Android in-app WebViews (Telegram, VK) flashed a momentary selection-like
  box on tappable nodes on tap — seen on the header title and the back
  chevron; user-select (already none) does not govern it. Inherited, so
  this clears it app-wide.

- VK haptics: mirror the Telegram haptic set on VK via VK Bridge taptic
  (impact / notification / selection), routed through a new shared
  lib/haptics.ts dispatcher. VK users previously got no haptics; the game
  and error call sites now fire haptic() instead of telegramHaptic().

- VK swipe-back: disable VK's horizontal swipe-back at launch
  (VKWebAppSetSwipeSettings history:false) so it does not fight the app's
  own edge-swipe-back and on-board tile drag — parity with Telegram's
  disabled vertical swipes; the app owns navigation via its back chevron.

Docs: UI_DESIGN (no-select / tap-highlight, VK integration).
This commit is contained in:
Ilia Denisov
2026-06-30 23:00:19 +02:00
parent adf7c55695
commit 71c3411276
6 changed files with 80 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/UI_DESIGN.md
+9 -1
View File
@@ -100,7 +100,10 @@ e2e and the screenshots.
square with an accent underline). A red count **badge** rides the icon's corner — on the
lobby ⚙️ tab and the hub's 🤝 Friends tab for pending incoming friend requests (invitations
keep their own lobby section), and on the Hint tab for the remaining count. No text
selection on nav / tab-bar / buttons (`user-select: none`).
selection on nav / tab-bar / buttons (`user-select: none`), and no tap-highlight flash on any
tappable element (`-webkit-tap-highlight-color: transparent` on `#app`) — Android in-app WebViews
otherwise draw a momentary selection-like box on a clickable node on tap (seen on the header title
and the back chevron).
- **Screen transitions** (`App.svelte`): navigation slides directionally — a
screen entered from the lobby flies in from the right; returning to the lobby reveals it
from the left (back). Transitions are local (so they do not play on first load) and
@@ -146,6 +149,11 @@ e2e and the screenshots.
insets (`VKWebAppUpdateInsets`, needed on Android, where the VK webview exposes no `env()` inset),
so the layout clears the VK home bar. Share and copy route through the bridge (`VKWebAppShare` /
`VKWebAppCopyText`) because `navigator.share` / `clipboard` are absent in the desktop VK iframe.
Haptics fire the same set as Telegram via VK Bridge taptic (`VKWebAppTapticImpactOccurred` /
`…NotificationOccurred` / `…SelectionChanged`), through the shared `lib/haptics.ts` dispatcher; and
VK's **horizontal swipe-back** is disabled at launch (`VKWebAppSetSwipeSettings`) so it does not
fight the app's own edge-swipe-back and tile drag — parity with Telegram's disabled vertical
swipes, the app owning navigation through its back chevron.
## Tiles & board