UI: tab-bar navigation — drop the hamburger
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 39s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 59s
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 39s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 59s
Replace Menu.svelte (hamburger) everywhere with tab-bar navigation: - Settings hub (SettingsHub) from the lobby ⚙️ tab: Settings/Profile/ Friends/About as in-place tabs, back → lobby; the lobby ⚙️ badge counts incoming friend requests (invitations keep their own lobby section). - Comms hub (CommsHub) from the move-history 💬: Chat/Dictionary tabs, back → game; Dictionary only while the game is active. - Game menu items relocate into the open history: 🏁 leave / 📤 export in the header, 🤝 add-friend per opponent card, 💬 comms; unread chat is badged on the score bar + the 💬. - TapConfirm (tap → fading ✅ → tap) replaces the Skip/Hint press-and-hold popovers and drives the add-friend confirm. - Fix the move-history "jump": the slid board is inert and the stage can't scroll, so a swipe up genuinely closes the history. Remove Menu.svelte + HoldConfirm.svelte. Docs: UI_DESIGN, FUNCTIONAL(+ru), PRERELEASE. UI check/unit/build/bundle/e2e (Chromium+WebKit) all green.
This commit is contained in:
+53
-24
@@ -10,9 +10,8 @@ async function openGame(page: Page): Promise<void> {
|
||||
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();
|
||||
// Wait for the screen-slide transition to settle so only the game pane remains;
|
||||
// until it does, the leaving lobby pane's header (its menu button) is also in the
|
||||
// DOM, which would make shared locators like .burger ambiguous.
|
||||
// Wait for the screen-slide transition to settle so only the game pane remains; until it
|
||||
// does, the leaving lobby pane is also in the DOM, which would make shared locators ambiguous.
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
}
|
||||
|
||||
@@ -115,17 +114,38 @@ test('shuffle reorders the rack but keeps the same tiles', async ({ page }) => {
|
||||
expect([...after].sort()).toEqual([...before].sort());
|
||||
});
|
||||
|
||||
test('history slides the board down and closes on a board tap', async ({ page }) => {
|
||||
test('history slides the board down on a score tap and closes on a board tap', async ({ page }) => {
|
||||
await openGame(page);
|
||||
await page.locator('.burger').click();
|
||||
await page.locator('.dropdown button').nth(0).click(); // History
|
||||
await page.locator('.scoreboard').click(); // tapping the score bar opens the history
|
||||
await expect(page.locator('.history')).toBeVisible();
|
||||
await expect(page.locator('.boardwrap.slid')).toBeVisible();
|
||||
|
||||
await page.locator('.boardwrap').click(); // tapping the board closes it
|
||||
// Tap the (now inert) board's visible top strip below the history to close it.
|
||||
await page.locator('.boardwrap').click({ position: { x: 30, y: 12 } });
|
||||
await expect(page.locator('.history')).toBeHidden();
|
||||
});
|
||||
|
||||
test('history: a swipe-up close does not make a follow-up score tap jump', async ({ page }) => {
|
||||
await openGame(page);
|
||||
await page.locator('.scoreboard').click();
|
||||
await expect(page.locator('.boardwrap.slid')).toBeVisible();
|
||||
|
||||
// Swipe up on the inert board to close it. Dispatched on the board so the gesture is
|
||||
// engine-deterministic — a mouse swipe over a pointer-events:none child is simulated
|
||||
// inconsistently across engines, whereas a real touch swipe lands the same way this does.
|
||||
const bw = page.locator('.boardwrap');
|
||||
const box = (await bw.boundingBox())!;
|
||||
const cx = box.x + box.width / 2;
|
||||
await bw.dispatchEvent('pointerdown', { clientX: cx, clientY: 500, bubbles: true });
|
||||
await bw.dispatchEvent('pointermove', { clientX: cx, clientY: 450, bubbles: true });
|
||||
await expect(page.locator('.history')).toBeHidden();
|
||||
|
||||
// A score tap now cleanly reopens the history — the stale-open "jump" no longer happens.
|
||||
await page.locator('.scoreboard').click();
|
||||
await expect(page.locator('.history')).toBeVisible();
|
||||
await expect(page.locator('.boardwrap.slid')).toBeVisible();
|
||||
});
|
||||
|
||||
test('Draw opens the exchange dialog and confirms a selection', async ({ page }) => {
|
||||
await openGame(page);
|
||||
await page.locator('button:has-text("🔄")').click(); // Draw tab
|
||||
@@ -137,10 +157,22 @@ test('Draw opens the exchange dialog and confirms a selection', async ({ page })
|
||||
await expect(page.locator('.exch')).toBeHidden();
|
||||
});
|
||||
|
||||
test('pass confirms with a tap on the fading ✅ instead of a popup', async ({ page }) => {
|
||||
await openGame(page);
|
||||
const pass = page.getByRole('button', { name: 'Skip' }); // the 🥺 tab (aria-label)
|
||||
await expect(pass).toBeEnabled();
|
||||
await pass.click(); // arm: 🥺 -> a fading ✅
|
||||
await pass.click(); // tap the ✅ to confirm within the window
|
||||
// The pass hands the turn over, so the control goes inert.
|
||||
await expect(pass).toBeDisabled();
|
||||
});
|
||||
|
||||
test('check-word sanitises input and shows a verdict', async ({ page }) => {
|
||||
await openGame(page);
|
||||
await page.locator('.burger').click();
|
||||
await page.locator('.dropdown button').nth(2).click(); // Check word
|
||||
await page.locator('.scoreboard').click(); // open the history
|
||||
await page.getByRole('button', { name: 'Chat' }).click(); // 💬 -> comms hub
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
await page.getByRole('button', { name: 'Check word' }).click(); // 🔎 -> dictionary tab
|
||||
|
||||
const input = page.locator('.check input');
|
||||
await input.fill('qz9!a'); // digits/punctuation dropped, letters upper-cased
|
||||
@@ -152,8 +184,8 @@ test('check-word sanitises input and shows a verdict', async ({ page }) => {
|
||||
|
||||
test('dropping the game ends it and shows the result', async ({ page }) => {
|
||||
await openGame(page);
|
||||
await page.locator('.burger').click();
|
||||
await page.getByRole('button', { name: 'Drop game' }).click(); // robust against menu growth
|
||||
await page.locator('.scoreboard').click(); // open the history
|
||||
await page.getByRole('button', { name: 'Drop game' }).click(); // 🏁 in the history header
|
||||
await page.locator('button.danger').click(); // confirm in the modal
|
||||
await expect(page.locator('.status .over')).toBeVisible();
|
||||
});
|
||||
@@ -181,26 +213,23 @@ test('a placed tile drags from one board cell to another (relocation)', async ({
|
||||
expect(to).not.toBe(from);
|
||||
});
|
||||
|
||||
test('chat and word-check open as their own screens and back to the game', async ({ page }) => {
|
||||
test('comms hub: chat and dictionary share a screen, back returns to the game', async ({ page }) => {
|
||||
await openGame(page);
|
||||
|
||||
await page.locator('.burger').click();
|
||||
await page.getByRole('button', { name: /^Chat$/ }).click();
|
||||
await page.locator('.scoreboard').click(); // open the history
|
||||
await page.getByRole('button', { name: 'Chat' }).click(); // 💬 in the history header
|
||||
await expect(page).toHaveURL(/\/game\/g1\/chat$/);
|
||||
await expect(page.locator('.pane')).toHaveCount(1); // let the slide transition settle
|
||||
await expect(page.locator('.chat')).toBeVisible();
|
||||
// The outgoing game header and the incoming chat header both carry a .back mid-slide; wait
|
||||
// for the game's to unmount so the click targets a single, settled button.
|
||||
|
||||
// The Dictionary tab switches in place (same screen, no navigation).
|
||||
await page.getByRole('button', { name: 'Check word' }).click();
|
||||
await expect(page.locator('.check input')).toBeVisible();
|
||||
|
||||
// The header back chevron returns to the game.
|
||||
await expect(page.locator('.back')).toHaveCount(1);
|
||||
await page.locator('.back').click(); // header back chevron returns to the game
|
||||
await page.locator('.back').click();
|
||||
await expect(page).toHaveURL(/\/game\/g1$/);
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
|
||||
await page.locator('.burger').click();
|
||||
await page.getByRole('button', { name: /Check word/ }).click();
|
||||
await expect(page).toHaveURL(/\/game\/g1\/check$/);
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
await expect(page.locator('.check input')).toBeVisible();
|
||||
});
|
||||
|
||||
test('the board-label mode in Settings changes the on-board labels', async ({ page }) => {
|
||||
|
||||
Reference in New Issue
Block a user