Stage 17 (contour round 3): Telegram Mini Apps polish, board scroll, keyboard overlay
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 10s
CI / ui (pull_request) Successful in 27s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 54s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 8s
CI / integration (pull_request) Successful in 10s
CI / ui (pull_request) Successful in 27s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 54s
- Telegram (lib/telegram.ts): chrome colours (setHeaderColor/setBackgroundColor/setBottomBarColor) match Telegram's header/bg/bottom bar to the app; native BackButton on sub-screens (app chevron hidden in TG); HapticFeedback on tile place/commit/error; enableClosingConfirmation while a game is open; disableVerticalSwipes so swipe-to-minimise doesn't fight tile drag / board scroll - #9 board-only vertical scroll: Screen 'column' mode lets the board area scroll while score/status/rack/tab bar stay fixed (zoom keeps its own scroll) - #10 check-word dialog opens in Modal keyboard-overlay mode (top-anchored, keyboard overlays the empty area) — no resize/relayout jank; other modals stay keyboard-aware - docs: UI_DESIGN Telegram integration + vertical fit/keyboard; PLAN round 2-3 follow-ups
This commit is contained in:
+22
-9
@@ -36,15 +36,22 @@ Login uses `Screen`.
|
||||
- **Screen transitions** (Stage 17, `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
|
||||
collapse to nothing under reduce-motion. A per-game in-memory cache (`lib/gamecache.ts`)
|
||||
renders a re-opened game instantly and refreshes it in the background, removing the
|
||||
blank-loading flash on lobby ↔ game navigation.
|
||||
- **Telegram theme** (Stage 17): inside the Mini App the colour scheme is forced from
|
||||
`Telegram.WebApp.colorScheme` (over the OS `prefers-color-scheme`, which leaks into the
|
||||
Telegram Desktop webview and otherwise fights it), the Settings theme switcher is hidden,
|
||||
the nav bar takes Telegram's background (`header_bg_color`), and a live stream dropped by
|
||||
a background suspend silently reconnects on return to the foreground (the connection
|
||||
banner is suppressed while hidden).
|
||||
collapse to nothing under reduce-motion. Per-game and lobby in-memory caches
|
||||
(`lib/gamecache.ts`, `lib/lobbycache.ts`) render a re-opened game or the lobby instantly
|
||||
and refresh in the background, removing the blank-loading flash and the lobby's "draw-in"
|
||||
on lobby ↔ game navigation.
|
||||
- **Telegram integration** (Stage 17, `lib/telegram.ts`): inside the Mini App the colour
|
||||
scheme is forced from `Telegram.WebApp.colorScheme` (over the OS `prefers-color-scheme`,
|
||||
which leaks into the Telegram Desktop webview and otherwise fights it) and the Settings
|
||||
theme switcher is hidden; the nav bar takes Telegram's background and `setHeaderColor` /
|
||||
`setBackgroundColor` / `setBottomBarColor` paint Telegram's own chrome to match; the
|
||||
native header **BackButton** drives back-navigation (the app's chevron is hidden in
|
||||
Telegram); **HapticFeedback** fires on tile placement / commit / error; **closing
|
||||
confirmation** is enabled while a game is open; **vertical swipes** (swipe-to-minimise)
|
||||
are disabled so they don't fight tile drag or the board scroll; and a live stream dropped
|
||||
by a background suspend reconnects silently on return — the connection banner is
|
||||
suppressed while hidden and for a short grace after resume (visibilitychange +
|
||||
pageshow/pagehide + Telegram `activated`/`deactivated`).
|
||||
|
||||
## Tiles & board
|
||||
|
||||
@@ -66,6 +73,12 @@ Login uses `Screen`.
|
||||
shadow) pins to the board as the board slides down, instead of tracking the table as
|
||||
moves accumulate; its scrollbar gutter is reserved so the centred word column does not
|
||||
jitter. A move's row lists every word it formed (the main word first).
|
||||
- **Vertical fit & keyboard** (Stage 17): when the game does not fit the viewport, only the
|
||||
board area scrolls vertically (`Screen` `column` mode; the score bar, status, rack and tab
|
||||
bar stay fixed), while zoom keeps its own scroll. The check-word dialog opens in
|
||||
`Modal` keyboard-overlay mode — the small sheet is top-anchored and the soft keyboard
|
||||
overlays the empty area below, so the layout doesn't resize/jank; other modals stay
|
||||
keyboard-aware (they size to the area above the keyboard).
|
||||
- **Highlights**: pending tiles use a slightly darker tile background (no outline). The
|
||||
last completed word gets a dark tile background — static while it is the opponent's
|
||||
turn (our word), and a 1 s flash when it is our turn (their word). While placing, only
|
||||
|
||||
Reference in New Issue
Block a user