feat: tablet-first UX overhaul with wizard improvements

- Tablet-first responsive scoreboard: whole player card is tap target - Per-step wizard backgrounds and live summary panel - Larger touch targets, safe-area handling, reduced-motion support - German UI error strings in App.tsx - Updated SOUL.md and README.md for current architecture - Cleanup: removed legacy components, .cursor/, UI_IMPROVEMENTS.md - Renamed package to bscscore, fixed TOTAL_WIZARD_STEPS
2026-09-21 17:59:31 +02:00
parent 3327f6e19e
commit 678977ab23
92 changed files with 3359 additions and 3063 deletions
@@ -0,0 +1,99 @@
+/**
+ * Capture wow-brief verification screenshots across 4 viewports.
+ * Usage: PW_EXECUTABLE=... node tests/helpers/wow-screenshots.mjs
+ */
+import { chromium } from 'playwright';
+
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:3000';
+const executablePath = process.env.PW_EXECUTABLE;
+
+const viewports = [
+  { name: '1280x800', width: 1280, height: 800 },
+  { name: '1024x768', width: 1024, height: 768 },
+  { name: '844x390', width: 844, height: 390 },
+  { name: '390x844', width: 390, height: 844 },
+];
+
+async function dismissDevToolbar(page) {
+  await page.evaluate(() => {
+    document.querySelector('astro-dev-toolbar')?.remove();
+  });
+}
+
+async function clickButton(page, name) {
+  await dismissDevToolbar(page);
+  await page.getByRole('button', { name }).click({ force: true });
+}
+
+async function capture(page, path) {
+  await dismissDevToolbar(page);
+  await page.screenshot({ path, fullPage: false });
+  console.log(`saved ${path}`);
+}
+
+async function enterPlayerName(page, label, name, inputId) {
+  await clickButton(page, `Name für ${label} eingeben`);
+  const dialog = page.getByRole('dialog');
+  const input = dialog.locator(`#${inputId}`);
+  await input.waitFor({ state: 'visible' });
+  await input.click();
+  await input.pressSequentially(name, { delay: 15 });
+  await dialog.getByRole('button', { name: 'Übernehmen' }).click({ force: true });
+  await dialog.waitFor({ state: 'hidden', timeout: 10000 });
+}
+
+async function freshPage(page, vp) {
+  await page.setViewportSize({ width: vp.width, height: vp.height });
+  await page.goto(`${BASE_URL}/?t=${Date.now()}`, { waitUntil: 'domcontentloaded' });
+  await dismissDevToolbar(page);
+  await page.waitForTimeout(400);
+}
+
+async function runWizardToScoreboard(page) {
+  await clickButton(page, 'Neues Spiel starten');
+  await enterPlayerName(page, 'Spieler 1', 'Alice', 'player1-input');
+  await enterPlayerName(page, 'Spieler 2', 'Bob', 'player2-input');
+  await clickButton(page, 'Überspringen');
+  await clickButton(page, '9-Ball');
+  await clickButton(page, '3');
+  await clickButton(page, 'Break-Regel wählen: Winnerbreak');
+  await clickButton(page, 'Zuerst: Alice');
+}
+
+async function main() {
+  const browser = await chromium.launch({
+    headless: true,
+    ...(executablePath ? { executablePath } : {}),
+  });
+
+  const page = await browser.newPage();
+
+  for (const vp of viewports) {
+    await freshPage(page, vp);
+    await capture(page, `/tmp/wow-list-${vp.name}.png`);
+
+    await clickButton(page, 'Neues Spiel starten');
+    await page.waitForTimeout(400);
+    await capture(page, `/tmp/wow-wizard-${vp.name}.png`);
+
+    await freshPage(page, vp);
+    await runWizardToScoreboard(page);
+    await page.waitForTimeout(400);
+    await capture(page, `/tmp/wow-scoreboard-${vp.name}.png`);
+
+    for (let score = 0; score < 3; score++) {
+      await clickButton(page, `Punkt für Alice. Aktueller Stand: ${score}`);
+      await page.waitForTimeout(150);
+    }
+    await page.waitForTimeout(600);
+    await capture(page, `/tmp/wow-victory-${vp.name}.png`);
+  }
+
+  await browser.close();
+  console.log('Done — screenshots in /tmp/wow-*.png');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});