feat(ui): горизонтальная раскладка игрового экрана — доска по высоте + левая панель #59

Merged

developer merged 2 commits from feature/landscape-game-layout into development 2026-06-14 17:44:49 +00:00

Conversation 1 Commits 2 Files Changed 6

+389 -133

developer commented 2026-06-14 17:07:04 +00:00

Owner

Copy Link

Copy Source

Что

Горизонтальная (десктоп) раскладка только для игрового экрана. Когда экран
вытянут по горизонтали (matchMedia('(orientation: landscape)')), экран партии
переключается с вертикального стека на две колонки:

• Справа — доска, вписанная по высоте как наибольший квадрат (min(100cqw,100cqh)
  в контейнере container-type: size); ужимается по ширине, если колонка узкая —
  у доски минимальный приоритет, левую панель не сдавливает.
• Слева (сверху вниз) — рейка (+ ✅ ход), строка статуса (мешок · чей ход ·
  предпросмотр очков), счёт игроков, постоянно открытая история (докнута,
  скроллится, шапка липкая — без выезжающей шторки и без тапа по счёту) и внизу
  панель кнопок (🔄 / 🛟 / 🔀).

В горизонтальном режиме отключены: зум доски, жесты открытия/закрытия истории и
рост шапки (growNav). Мобильная вёрстка не изменена — обе раскладки рендерятся
из одних и тех же сниппетов, поведение единое.

Развилки (согласованы заранее)

• Кнопки управления → снизу левой панели.
• Строка статуса → под рейкой.
• Триггер → всегда при orientation: landscape.

Файлы

• ui/src/game/Game.svelte — флаг landscape, две ветки шаблона + сниппеты, гейтинг
  зума/жестов, стили колонок.
• ui/src/game/Rack.svelte — размер плиток от ширины панели в landscape.
• ui/playwright.config.ts — e2e по умолчанию теперь портретный вьюпорт (мобильное
  приложение, под которое написаны тесты жестов/зума/шторки).
• ui/e2e/landscape.spec.ts — покрытие новой раскладки (две колонки, докнутая история,
  зум отключён, установка фишки) в своём landscape-вьюпорте.
• docs/UI_DESIGN.md — описание раскладки.

Board.svelte трогать не пришлось — доска вписывается через обёртку.

Проверки (локально)

• pnpm check — 0 ошибок; pnpm test:unit — 195; pnpm build — ок.
• pnpm test:e2e — 124 (Chromium + WebKit), включая новый landscape-набор.
• Глазами (Chromium): landscape 1100×640 и тесный 720×400 (доска ужимается, панель нет),
  портрет 390×800 без изменений; установка фишки в landscape — без зума, ✅ появляется.

Готово к живому просмотру на тест-контуре.

## Что Горизонтальная (десктоп) раскладка **только для игрового экрана**. Когда экран вытянут по горизонтали (`matchMedia('(orientation: landscape)')`), экран партии переключается с вертикального стека на **две колонки**: - **Справа** — доска, вписанная по высоте как наибольший квадрат (`min(100cqw,100cqh)` в контейнере `container-type: size`); ужимается по ширине, если колонка узкая — у доски минимальный приоритет, левую панель не сдавливает. - **Слева** (сверху вниз) — рейка (+ ✅ ход), строка статуса (мешок · чей ход · предпросмотр очков), счёт игроков, **постоянно открытая** история (докнута, скроллится, шапка липкая — без выезжающей шторки и без тапа по счёту) и внизу панель кнопок (🔄 / 🛟 / 🔀). В горизонтальном режиме отключены: зум доски, жесты открытия/закрытия истории и рост шапки (`growNav`). **Мобильная вёрстка не изменена** — обе раскладки рендерятся из одних и тех же сниппетов, поведение единое. ## Развилки (согласованы заранее) - Кнопки управления → снизу левой панели. - Строка статуса → под рейкой. - Триггер → всегда при `orientation: landscape`. ## Файлы - `ui/src/game/Game.svelte` — флаг `landscape`, две ветки шаблона + сниппеты, гейтинг зума/жестов, стили колонок. - `ui/src/game/Rack.svelte` — размер плиток от ширины панели в landscape. - `ui/playwright.config.ts` — e2e по умолчанию теперь портретный вьюпорт (мобильное приложение, под которое написаны тесты жестов/зума/шторки). - `ui/e2e/landscape.spec.ts` — покрытие новой раскладки (две колонки, докнутая история, зум отключён, установка фишки) в своём landscape-вьюпорте. - `docs/UI_DESIGN.md` — описание раскладки. `Board.svelte` трогать не пришлось — доска вписывается через обёртку. ## Проверки (локально) - `pnpm check` — 0 ошибок; `pnpm test:unit` — 195; `pnpm build` — ок. - `pnpm test:e2e` — **124** (Chromium + WebKit), включая новый landscape-набор. - Глазами (Chromium): landscape 1100×640 и тесный 720×400 (доска ужимается, панель нет), портрет 390×800 без изменений; установка фишки в landscape — без зума, ✅ появляется. Готово к живому просмотру на тест-контуре.

developer added 1 commit 2026-06-14 17:07:04 +00:00

feat(ui): landscape two-column game layout, board fitted by height ... 9ec72c8377

When the viewport is wider than tall (matchMedia orientation: landscape) the
game screen switches from the portrait stack to a two-column layout: the board
fills the right column as the largest square that fits the height (no zoom,
shrinking by width when cramped — lowest priority), while the left panel stacks
the rack (+ make), the status line, the score plaques, the always-open docked
history and the controls. Board zoom, the history slide-drawer gestures and the
growing nav bar are gated off in landscape; the portrait layout is unchanged and
both render from the same snippets so behaviour stays single-sourced.

The mock e2e now defaults to a portrait viewport (the mobile-first app the
gesture/zoom/history specs are written for); landscape.spec.ts covers the wide
layout in its own viewport.

developer added 1 commit 2026-06-14 17:39:08 +00:00

feat(ui): landscape iteration — reorder left panel, enable board zoom ... 02ef31c464

Left panel order is now score / history / status / rack / controls (the history
fills the middle and scrolls). Board zoom is re-enabled in landscape with the
same gestures as portrait, but height-driven: the viewport is the full right
pane, the board fits by height as a centred square when zoomed out, and on
zoom-in it magnifies past the pane and pans within it (focus-centred scroll that
rides the magnify transition), occupying the full width up to the left panel.
Board.svelte gains a landscape prop; portrait stays width-driven and unchanged.
landscape.spec.ts now asserts zoom works (the zoomed board overflows the pane).

owner approved these changes 2026-06-14 17:44:05 +00:00

developer merged commit fc28e43e43 into development 2026-06-14 17:44:49 +00:00

developer deleted branch feature/landscape-game-layout 2026-06-14 17:44:49 +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#59