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:
+67
-42
@@ -10,9 +10,18 @@ async function loginLobby(page: Page): Promise<void> {
|
||||
await expect(page.getByText('Your turn')).toBeVisible();
|
||||
}
|
||||
|
||||
async function openFriends(page: Page): Promise<void> {
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: /Friends/ }).click();
|
||||
// The Settings hub (the lobby ⚙️ tab) hosts Settings / Profile / Friends / About as in-place
|
||||
// tabs; the back control always returns to the lobby. Tabs are icon-only with an aria-label.
|
||||
async function openSettingsTab(page: Page, tab: 'Profile' | 'Friends' | 'About'): Promise<void> {
|
||||
await page.getByRole('button', { name: /Settings/ }).click(); // lobby ⚙️ tab
|
||||
await expect(page.locator('.pane')).toHaveCount(1); // let the slide settle
|
||||
await page.getByRole('button', { name: tab, exact: true }).click();
|
||||
}
|
||||
function openFriends(page: Page): Promise<void> {
|
||||
return openSettingsTab(page, 'Friends');
|
||||
}
|
||||
function openProfile(page: Page): Promise<void> {
|
||||
return openSettingsTab(page, 'Profile');
|
||||
}
|
||||
|
||||
test('friends: issue a code, accept an incoming request, redeem a code', async ({ page }) => {
|
||||
@@ -50,10 +59,28 @@ test('stats screen shows the metrics', async ({ page }) => {
|
||||
await expect(page.getByText('Best move')).toBeVisible();
|
||||
});
|
||||
|
||||
test('settings hub: tabs switch in place and back returns to the lobby', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.getByRole('button', { name: /Settings/ }).click(); // lobby ⚙️ tab
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
await expect(page.locator('.seg').first()).toBeVisible(); // default Settings tab
|
||||
|
||||
// Switching tabs is in place (no navigation): the Friends body appears, still one pane.
|
||||
await page.getByRole('button', { name: 'Friends', exact: true }).click();
|
||||
await expect(page.getByText('Friend requests')).toBeVisible();
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
|
||||
await page.getByRole('button', { name: 'About', exact: true }).click();
|
||||
await expect(page.getByText(/Version/)).toBeVisible();
|
||||
|
||||
// Back returns to the lobby from any tab.
|
||||
await page.locator('.back').click();
|
||||
await expect(page.getByText('Your turn')).toBeVisible();
|
||||
});
|
||||
|
||||
test('profile edit saves a new display name', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: /Profile/ }).click();
|
||||
await openProfile(page);
|
||||
await page.locator('.edit input').first().fill('Kaya Test');
|
||||
await page.getByRole('button', { name: /^Save$/ }).click();
|
||||
await expect(page.locator('.name')).toHaveText('Kaya Test');
|
||||
@@ -61,29 +88,33 @@ test('profile edit saves a new display name', async ({ page }) => {
|
||||
|
||||
test('GCG export appears only for a finished game', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
// The finished game vs Kaya exposes the export; the menu carries the item.
|
||||
// The finished game vs Kaya exposes export 📤 in the history header.
|
||||
await page.getByRole('button', { name: /Kaya/ }).click();
|
||||
await page.locator('.burger').first().click();
|
||||
await expect(page.getByRole('button', { name: /Export GCG/ })).toBeVisible();
|
||||
await page.locator('.scoreboard').click(); // open the history
|
||||
await expect(page.getByRole('button', { name: 'Export GCG' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('GCG export is hidden for an active game', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.getByRole('button', { name: /Ann/ }).click();
|
||||
await page.locator('.burger').first().click();
|
||||
await expect(page.getByRole('button', { name: /Export GCG/ })).toHaveCount(0);
|
||||
await page.locator('.scoreboard').click(); // open the history (shows 🏁 leave, not 📤 export)
|
||||
await expect(page.getByRole('button', { name: 'Export GCG' })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('finished game draws an inert footer and trims the live-only menu', async ({ page }) => {
|
||||
test('finished game draws an inert footer and trims live-only controls', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.getByRole('button', { name: /Kaya/ }).click(); // finished game vs Kaya
|
||||
await expect(page.locator('[data-cell]').first()).toBeVisible();
|
||||
// The footer (tab bar) is drawn but its controls are disabled in a finished game.
|
||||
await expect(page.locator('.tab').first()).toBeDisabled();
|
||||
// The menu drops Check word and Drop game once the game is over.
|
||||
await page.locator('.burger').first().click();
|
||||
await expect(page.getByRole('button', { name: 'Check word' })).toHaveCount(0);
|
||||
// The history header offers Export GCG, not Drop game, once the game is over.
|
||||
await page.locator('.scoreboard').click();
|
||||
await expect(page.getByRole('button', { name: 'Export GCG' })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: 'Drop game' })).toHaveCount(0);
|
||||
// The comms hub offers Chat only — the Dictionary tab is hidden for a finished game.
|
||||
await page.getByRole('button', { name: 'Chat' }).click(); // 💬
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
await expect(page.getByRole('button', { name: 'Check word' })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('lobby: hiding a finished game removes it (kebab → ❌), keeping the others', async ({ page }) => {
|
||||
@@ -114,10 +145,11 @@ test('lobby: the active-row chevron opens the game (not a no-op)', async ({ page
|
||||
await expect(page.locator('[data-cell]').first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('lobby hamburger shows the pending notification count', async ({ page }) => {
|
||||
test('lobby ⚙️ tab shows the pending friend-request count', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
// One incoming friend request (Rick) + one invitation (Kaya) = 2.
|
||||
await expect(page.getByTestId('menu-badge')).toHaveText('2');
|
||||
// The ⚙️ badge counts incoming friend requests only (Rick = 1); invitations have their
|
||||
// own lobby section, so they are not summed into it.
|
||||
await expect(page.getByRole('button', { name: /Settings/ }).locator('.badge')).toHaveText('1');
|
||||
});
|
||||
|
||||
test('play with friends: a game type is required to send an invitation', async ({ page }) => {
|
||||
@@ -138,34 +170,28 @@ test('play with friends: a game type is required to send an invitation', async (
|
||||
await expect(page.getByText('Your turn')).toBeVisible();
|
||||
});
|
||||
|
||||
test('game: add-to-friends flips to a disabled "request sent"', async ({ page }) => {
|
||||
test('game: the add-friend 🤝 confirms with a tap and then reads as sent', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.getByRole('button', { name: /Ann/ }).click(); // active game vs Ann
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: /Add to friends: Ann/ }).click();
|
||||
// Reopening the menu shows the item as a disabled "request sent".
|
||||
await page.locator('.burger').first().click();
|
||||
const sent = page.getByRole('button', { name: 'Request sent' });
|
||||
await expect(sent).toBeVisible();
|
||||
await expect(sent).toBeDisabled();
|
||||
await page.locator('.scoreboard').click(); // open the history -> 🤝 appears on Ann's card
|
||||
const add = page.getByRole('button', { name: 'Add to friends' });
|
||||
await add.click(); // arm: 🤝 -> a fading ✅
|
||||
await add.click(); // tap the ✅ to confirm within the window
|
||||
// The request is sent, so the control is now disabled.
|
||||
await expect(add).toBeDisabled();
|
||||
});
|
||||
|
||||
test('game: an opponent who is already a friend shows a disabled "in friends"', async ({ page }) => {
|
||||
test('game: an opponent who is already a friend shows no add-friend 🤝', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.getByRole('button', { name: /Kaya/ }).click(); // the finished game vs Kaya, a seeded friend
|
||||
await page.locator('.burger').first().click();
|
||||
// The in-game friend item is derived from the server's friend list: a friend reads
|
||||
// a disabled "✓ in friends", not the addable "Add to friends".
|
||||
const inFriends = page.getByRole('button', { name: /in friends/i });
|
||||
await expect(inFriends).toBeVisible();
|
||||
await expect(inFriends).toBeDisabled();
|
||||
await expect(page.getByRole('button', { name: /Add to friends: Kaya/ })).toHaveCount(0);
|
||||
await page.getByRole('button', { name: /Kaya/ }).click(); // finished game vs Kaya, a seeded friend
|
||||
await page.locator('.scoreboard').click(); // open the history
|
||||
// Kaya is already a friend, so no add-friend control is offered on her card.
|
||||
await expect(page.getByRole('button', { name: 'Add to friends' })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('profile edit disables Save and flags an invalid display name', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: /Profile/ }).click();
|
||||
await openProfile(page);
|
||||
|
||||
const name = page.locator('.edit input').first();
|
||||
const save = page.getByRole('button', { name: /^Save$/ });
|
||||
@@ -179,8 +205,7 @@ test('profile edit disables Save and flags an invalid display name', async ({ pa
|
||||
|
||||
test('link account: a taken email opens the irreversible merge confirmation', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: /Profile/ }).click();
|
||||
await openProfile(page);
|
||||
|
||||
// The linking section is shown to everyone (guests upgrade by linking).
|
||||
await expect(page.getByRole('heading', { name: 'Link an account' })).toBeVisible();
|
||||
@@ -200,16 +225,16 @@ test('link account: a taken email opens the irreversible merge confirmation', as
|
||||
|
||||
test('link account: the Telegram web sign-in control is offered in a browser', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: /Profile/ }).click();
|
||||
await openProfile(page);
|
||||
await expect(page.getByRole('button', { name: 'Link Telegram' })).toBeVisible();
|
||||
});
|
||||
|
||||
test('chat: the message field shows on your turn, the nudge replaces it otherwise', async ({ page }) => {
|
||||
await loginLobby(page);
|
||||
await page.getByRole('button', { name: /Ann/ }).click(); // g1: your turn
|
||||
await page.locator('.burger').first().click();
|
||||
await page.getByRole('button', { name: 'Chat' }).click();
|
||||
await page.locator('.scoreboard').click(); // open the history
|
||||
await page.getByRole('button', { name: 'Chat' }).click(); // 💬 -> comms hub
|
||||
await expect(page.locator('.pane')).toHaveCount(1);
|
||||
// On your turn the message field + Send are shown and the nudge is hidden;
|
||||
// chat and nudge are mutually exclusive by turn. Icon-only controls expose their action
|
||||
// through the aria-label.
|
||||
|
||||
Reference in New Issue
Block a user