feat(ui): landscape iteration — reorder left panel, enable board zoom
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 1m13s

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).
This commit is contained in:
Ilia Denisov
2026-06-14 19:39:06 +02:00
parent 9ec72c8377
commit 02ef31c464
4 changed files with 90 additions and 33 deletions
+8 -5
View File
@@ -26,10 +26,10 @@ test('landscape lays the game in two columns with the history docked open', asyn
await expect(page.locator('.leftpane .tabbar')).toBeVisible();
});
test('landscape disables board zoom (a double-tap does not enlarge the board)', async ({ page }) => {
test('landscape zooms the board on a double-tap and the zoomed board overflows the pane', 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.
// Double-tap an empty cell zooms in, same as portrait. The board is height-driven here, so the
// zoomed square grows past the wide pane and becomes pannable (scrollWidth exceeds the viewport).
await page
.locator('[data-cell]:not(.filled)')
.nth(20)
@@ -37,8 +37,11 @@ test('landscape disables board zoom (a double-tap does not enlarge the board)',
el.click();
el.click();
});
await page.waitForTimeout(300);
await expect(page.locator('.viewport.zoomed')).toHaveCount(0);
const viewport = page.locator('.viewport.zoomed');
await expect(viewport).toBeVisible();
await page.waitForTimeout(350); // let the width/height magnify settle
const overflows = await viewport.evaluate((el) => el.scrollWidth > el.clientWidth + 5);
expect(overflows).toBe(true);
});
test('landscape still places a tile and commits via the make button', async ({ page }) => {