feat(ui): tile-crossword loading splash for cold lobby open
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m17s
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m17s
On a cold app open the lobby's game list arrives over the network; on a slow link the empty "no games yet" line flashed before the games loaded. Add a full-screen tile splash that lays a Scrabble crossword of ЭРУДИТ / ЗАГРУЗКА / ОЖИДАНИЕ (Эрудит point values, hardcoded since the alphabet table is not cached at boot) until the lobby's first load settles, then removes itself to reveal the populated list. - lib/splash.ts: pure layout + reveal schedule (unit-tested). - components/Splash.svelte: App-level overlay; per-tile drop-in; loops ЗАГРУЗКА → ОЖИДАНИЕ until ready, dismisses on a word boundary. Static ЭРУДИТ under reduced motion / the mock build. - app state: lobbyReady (set by Lobby on first settle) + splashDone, reset on logout. - App.svelte: overlay while routeIsLobby && !splashDone; the plain text splash now only covers non-lobby deep-links during bootstrap. - docs: UI_DESIGN + FUNCTIONAL (+ _ru).
This commit is contained in:
@@ -65,6 +65,10 @@ account is kept and the guest's games move into it. A merge is blocked only whil
|
||||
two accounts share a game still in progress.
|
||||
|
||||
### Lobby & matchmaking
|
||||
On a cold open the lobby greets the player with a brief **loading splash** — Scrabble tiles
|
||||
spelling **ЭРУДИТ / ЗАГРУЗКА / ОЖИДАНИЕ** as a small crossword — that clears the moment the
|
||||
games list is ready, so the list never flashes an "empty" state on a slow connection.
|
||||
|
||||
The lobby lists **my games** and offers a bottom tab bar — new game, statistics, and a
|
||||
**⚙️ settings** tab opening the settings hub (settings, profile, friends, about). The
|
||||
**my games** list groups games into three
|
||||
|
||||
@@ -66,6 +66,10 @@ Mini App** авторизует по подписанным `initData` плат
|
||||
запрещено, только пока у аккаунтов есть общая незавершённая игра.
|
||||
|
||||
### Лобби и подбор
|
||||
При холодном запуске лобби встречает игрока короткой **заставкой загрузки** — фишки Scrabble
|
||||
складывают небольшой кроссворд из слов **ЭРУДИТ / ЗАГРУЗКА / ОЖИДАНИЕ** — и она исчезает, как
|
||||
только список игр готов, поэтому на медленном соединении список не мигает «пустым» состоянием.
|
||||
|
||||
В лобби — список **мои игры** и нижний tab-bar (новая игра, статистика и вкладка
|
||||
**⚙️ настройки**, открывающая хаб настроек — настройки, профиль, друзья, о программе).
|
||||
Список **мои игры** разбит на три секции —
|
||||
|
||||
@@ -20,6 +20,28 @@ the game** (`growNav`) does the nav bar grow to absorb spare height, so the stri
|
||||
the title while the board and controls pin to the **bottom** for thumb reach. Every screen
|
||||
except Login uses `Screen`.
|
||||
|
||||
## Loading splash (`components/Splash.svelte`)
|
||||
|
||||
On a **cold app open** the lobby is the landing screen, but its game list arrives over the
|
||||
network — on a slow link the empty "no games yet" line would flash before the games load. A
|
||||
full-screen **tile splash** covers that gap: it lays a small Scrabble crossword out of the
|
||||
words **ЭРУДИТ** / **ЗАГРУЗКА** / **ОЖИДАНИЕ**, tile by tile, until the lobby's first load
|
||||
settles, then removes itself to reveal the populated list. The tiles carry their **Эрудит
|
||||
point values** (hardcoded in `lib/splash.ts`, since the alphabet table the board's
|
||||
`valueForLetter` reads is not cached yet at boot) and mirror a placed board tile's look
|
||||
(cream stock, bottom edge, drop shadow). The words form a 6×8 crossword: ЭРУДИТ horizontal,
|
||||
ЗАГРУЗКА and ОЖИДАНИЕ vertical, crossing it through the shared **Р** and **Д** (laid once).
|
||||
|
||||
It is an **App-level overlay** shown while `routeIsLobby && !app.splashDone` (so it also
|
||||
covers the session bootstrap; a deep-link to another screen is not covered). The lobby sets
|
||||
`app.lobbyReady` when its first load settles (success **or** error), and the splash dismisses
|
||||
on the next **word boundary**. ЭРУДИТ lays over ~1 s, then the splash loops
|
||||
ЗАГРУЗКА → ОЖИДАНИЕ (clearing back to ЭРУДИТ between rounds) until ready, so even a fast load
|
||||
shows it for ~1 s. Each tile **drops in** with a brief scale + fade. Under **reduced motion**
|
||||
(or the mock build, to keep the Playwright smoke unblocked) it shows a static ЭРУДИТ and
|
||||
dismisses as soon as the lobby is ready. The pure layout and timing live in `lib/splash.ts`
|
||||
(unit-tested); `Splash.svelte` is the renderer.
|
||||
|
||||
## Navigation
|
||||
|
||||
- **Back**: a thin, compact `<` drawn from two rotated CSS borders (`Header.svelte`
|
||||
|
||||
Reference in New Issue
Block a user