Ilia Denisov
77a690fcf6
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Failing after 13s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Failing after 0s
CI / deploy (pull_request) Has been skipped
Remove the under-board status strip and relocate its signals: - bag count -> a badge on the exchange/pass control + the foot of the move table - whose-turn / win-lose -> a thin strip above the score plaques - the tentative-move caption -> the board itself: staged tiles tint green (legal) or pink (illegal), the board tiles a formed word runs through go a shade darker, and an orange score badge sits on the main word (digit sized like a tile value, clamped on-board) The word geometry (covered cells + badge anchor) is a new pure client-side helper (ui/src/lib/formed.ts), independent of the move evaluator, so it works on the local or network preview path alike; the badge's number still comes from the preview score. Rack: a seven-column grid filling the tray width in both layouts — square, full-width tiles — with the confirm control in the fixed 7th slot. Settings: a touch-only "Zoom the board" toggle (default on, device-local) gates the tile-placement auto-zoom; taking a hint while zoomed in now zooms out so the highlighted hint word is never left off-screen. Docs (FUNCTIONAL +_ru, UI_DESIGN, ARCHITECTURE) and e2e/unit tests updated.
42 lines
2.5 KiB
TypeScript
42 lines
2.5 KiB
TypeScript
import { expect, test } from './fixtures';
|
|
|
|
// The in-game composition UX after the under-board status strip was removed:
|
|
// - whose turn (or the final result) shows in a thin strip above the score plaques;
|
|
// - the tiles left in the bag ride the exchange control as a badge and repeat at the foot of the
|
|
// move table;
|
|
// - staging a play tints its tiles on the board and shows the orange move-score badge, and the
|
|
// confirm control sits in the rack's fixed 7th slot.
|
|
// Mock transport only: the mock has no dictionary (Game.svelte skips the local evaluator under the
|
|
// mock mode) and its network evaluator accepts any placement, so a staged tile always reads as legal.
|
|
|
|
test('in-game UX: turn strip, bag badge + table footer, staged-play highlight and score badge', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.getByRole('button', { name: /guest/i }).click();
|
|
await page.getByRole('button', { name: /🎲/ }).click();
|
|
await page.getByRole('button', { name: 'Random player' }).click();
|
|
await page.locator('.variant').first().click();
|
|
await page.getByRole('button', { name: /Start game/i }).click();
|
|
// Attach the opponent deterministically, then it is the player's turn.
|
|
await page.evaluate(() => (window as unknown as { __mock: { joinOpponent(): void } }).__mock.joinOpponent());
|
|
await expect(page.getByText('Robo')).toBeVisible();
|
|
|
|
// The old under-board status line is gone; a thin turn strip sits above the plaques instead.
|
|
await expect(page.locator('.turnstrip')).toBeVisible();
|
|
await expect(page.locator('.status')).toHaveCount(0);
|
|
|
|
// The bag count rides the exchange control (the first tab) as a badge, and repeats at the foot of
|
|
// the move table, out of the scrolling grid.
|
|
await expect(page.locator('.tab').first().locator('.badge')).toBeVisible();
|
|
await page.locator('.scoreboard').click(); // open the history drawer
|
|
await expect(page.locator('.hbagfoot')).toContainText(/bag/i);
|
|
await page.locator('.scoreboard').click(); // close it again
|
|
|
|
// Stage a play: the pending tile reads as legal (green), the orange move-score badge shows on the
|
|
// board, and the confirm control takes the rack's 7th slot.
|
|
await page.locator('.rack .tile').first().click();
|
|
await page.locator('[data-cell]:not(.filled)').nth(112).click(); // centre (row 7, col 7)
|
|
await expect(page.locator('[data-cell].pending.legal')).toHaveCount(1);
|
|
await expect(page.locator('.scorebadge')).toBeVisible();
|
|
await expect(page.locator('.make')).toBeVisible();
|
|
});
|