Mappa: filtrando, i posti trovati si vedono (la mappa non resta lunga e scorsa in fondo); il Barone e le sue due donne e due jack; prove nel browser su una porta libera (con la 8080 giravano sul container)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018ks2K99uqCZjAxvy7Rdj1R

tests/browser.mjs

@@ -2,14 +2,14 @@
 // fino alla fine, salvataggio e impaginazione su telefono. Schermate in $OUT (predefinito: /tmp/regolo-shots).
 // npm run browser
 import { chromium } from 'playwright';
-import { spawn } from 'node:child_process';
+import { staticServer } from './helpers.mjs';
 import { mkdirSync, readFileSync } from 'node:fs';
 import assert from 'node:assert/strict';
 import { solution, route } from '../src/story/solution.js';
 
-const OUT = process.env.OUT ?? '/tmp/regolo-shots', PORT = 8000 + Math.floor(Math.random() * 900);
+const OUT = process.env.OUT ?? '/tmp/regolo-shots';
 mkdirSync(OUT, { recursive: true });
-const server = spawn('python3', ['-m', 'http.server', String(PORT), '--bind', '127.0.0.1'], { stdio: 'ignore' });
+const server = await staticServer(), PORT = server.port;
 const browser = await chromium.launch({ args: ['--use-gl=angle', '--use-angle=swiftshader', '--enable-unsafe-swiftshader'] });
 const errors = [];
 
@@ -276,6 +276,22 @@ try {
     await page.keyboard.press('Enter');
     assert.ok(await page.isHidden('#map'));
     assert.equal(await page.evaluate(() => game.state.scene), 'piazza');
+    // Con tutti i posti visti e la finestra piccola la mappa si scorre: filtrando da in fondo, i posti trovati si vedono
+    // (prima la mappa restava lunga quanto quella intera, scorsa su un fondo vuoto).
+    await page.setViewportSize({ width: 560, height: 340 });
+    await page.evaluate(() => { for (const id of Object.keys(game.story.scenes)) game.state.flags['visto:' + id] = true; });
+    await page.click('#map-button');
+    assert.ok(await page.evaluate(() => { const s = document.getElementById('map-scroll'); s.scrollTop = s.scrollHeight; return s.scrollTop > 0; }), 'la mappa piena si scorre');
+    await page.fill('#map-search', 'campo');
+    const found = await page.evaluate(() => {
+        const s = document.getElementById('map-scroll'), r = s.getBoundingClientRect();
+        const c = [...document.querySelectorAll('#map-board button')].find(b => !b.hidden && !b.parentElement.hidden).getBoundingClientRect();
+        return { inside: c.top >= r.top && c.bottom <= r.bottom, scrollTop: s.scrollTop, h: s.scrollHeight, ch: s.clientHeight, top: c.top - r.top, q: document.getElementById('map-search').value };
+    });
+    assert.ok(found.inside, `filtrando, il primo posto trovato non si vede: ${JSON.stringify(found)}`);
+    await page.screenshot({ path: `${OUT}/07d-mappa-ricerca-piccola.png` });
+    await page.click('#close-map');
+    await page.setViewportSize({ width: 1280, height: 860 });
 
     const phone = await open({ width: 390, height: 844 });
     await phone.click('#splash'); // un clic salta il cartello