Ilia Denisov
9ec72c8377
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 45s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 58s
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.
53 lines
2.5 KiB
TypeScript
53 lines
2.5 KiB
TypeScript
import { expect, test, type Page } from './fixtures';
|
|
|
|
// The landscape (wide) layout: when the viewport is wider than tall, the game switches to a
|
|
// two-column layout — the board fills the right side fitted to the height (no zoom), while the
|
|
// rack, status, scores, the always-open history and the controls stack in a left panel. These
|
|
// lock the key differences from the portrait layout so a future edit surfaces as a failing
|
|
// assertion. The rest of the suite runs portrait (see playwright.config.ts); this spec overrides
|
|
// the viewport to a wide, short one.
|
|
test.use({ viewport: { width: 1100, height: 640 } });
|
|
|
|
async function openGame(page: Page): Promise<void> {
|
|
await page.goto('/');
|
|
await page.getByRole('button', { name: /guest/i }).click();
|
|
await page.getByRole('button', { name: /Ann/ }).click(); // the seeded active game vs Ann
|
|
await expect(page.locator('[data-cell]').first()).toBeVisible();
|
|
}
|
|
|
|
test('landscape lays the game in two columns with the history docked open', async ({ page }) => {
|
|
await openGame(page);
|
|
// The two-column landscape wrapper is mounted instead of the portrait stacking.
|
|
await expect(page.locator('.game-land')).toBeVisible();
|
|
// The history is shown without tapping the score bar — it is docked open in the left panel,
|
|
// not a slide-down drawer.
|
|
await expect(page.locator('.history')).toBeVisible();
|
|
// The controls live in the left panel (no bottom tab bar in landscape).
|
|
await expect(page.locator('.leftpane .tabbar')).toBeVisible();
|
|
});
|
|
|
|
test('landscape disables board zoom (a double-tap does not enlarge the board)', async ({ page }) => {
|
|
await openGame(page);
|
|
// Double-tap an empty cell: in portrait this zooms the board; in landscape it must not, because
|
|
// the whole board already fits by height.
|
|
await page
|
|
.locator('[data-cell]:not(.filled)')
|
|
.nth(20)
|
|
.evaluate((el: HTMLElement) => {
|
|
el.click();
|
|
el.click();
|
|
});
|
|
await page.waitForTimeout(300);
|
|
await expect(page.locator('.viewport.zoomed')).toHaveCount(0);
|
|
});
|
|
|
|
test('landscape still places a tile and commits via the make button', async ({ page }) => {
|
|
await openGame(page);
|
|
// Placement works the same in landscape: tap a rack tile, tap an empty cell adjacent to the
|
|
// seeded word, and the make (✅) control appears next to the rack.
|
|
await page.locator('.rack .tile').first().click();
|
|
await page.locator('[data-cell][data-row="9"][data-col="6"]').click();
|
|
await expect(page.locator('.cell.pending')).toHaveCount(1);
|
|
await expect(page.locator('.make')).toBeVisible();
|
|
});
|