feat(ui): pinned modifier inspection panel

- Create ModifierPinnedPanel.tsx: fixed-position side panel with piece
  header, modifier list (label + describe() value), and close button
- Board.tsx: add onPieceClick prop, fire on piece click (distinct from drag)
- GameView.tsx: add pinnedPieceId state; clicking a piece toggles pin;
  clicking same piece again or × closes panel; panel renders fixed right-4
- 2 new e2e tests: click b1 pins panel with 'knight' text; × dismisses it
This commit is contained in:
Joey Yakimowich-Payne 2026-04-18 23:28:33 -06:00
commit 278370a630
No known key found for this signature in database
4 changed files with 170 additions and 1 deletions

View file

@ -191,6 +191,58 @@ test.describe('Modifier Profiles — hover tooltip (T24)', () => {
});
});
// ── T25: Pinned modifier inspection panel ────────────────────────────────
test.describe('Modifier Profiles — pinned panel (T25)', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/');
// Clear any stale autosave so Play Solo starts a fresh game.
await page.evaluate(() => {
for (let i = localStorage.length - 1; i >= 0; i--) {
const key = localStorage.key(i);
if (key !== null && key.startsWith('paratype-chess:v2:autosave:')) {
localStorage.removeItem(key);
}
}
localStorage.removeItem('paratype-chess:v1:autosave');
});
// Navigate into the game WITHOUT opening the rules drawer —
// the board must remain fully interactive.
await page.locator('[data-action="play-solo"]').click();
await page.waitForURL('**/game');
});
test('click piece pins side panel', async ({ page }) => {
// Click the b1 square — white knight in the classic starting position.
await page.click('[data-square="b1"]');
// The pinned panel must appear and identify the piece.
await expect(
page.locator('[data-testid="modifier-pinned-panel"]'),
).toBeVisible({ timeout: 2000 });
await expect(
page.locator('[data-testid="modifier-pinned-panel"]'),
).toContainText(/knight/i);
});
test('closing pinned panel removes it', async ({ page }) => {
// Pin the panel.
await page.click('[data-square="b1"]');
await expect(
page.locator('[data-testid="modifier-pinned-panel"]'),
).toBeVisible({ timeout: 2000 });
// Dismiss via the close button.
await page.click('[data-testid="close-pinned-panel"]');
await expect(
page.locator('[data-testid="modifier-pinned-panel"]'),
).not.toBeVisible({ timeout: 1000 });
});
});
// ── T26: Lobby profile picker + GameView badge ─────────────────────────
test.describe('Modifier Profiles — Lobby integration (T26)', () => {