Il viale alberato della Provinciale e la Carza verso La Luna; la mappa si cerca scrivendo

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

src/main.js

@@ -1,6 +1,6 @@
 // Avvio nel browser: collega motore, disegno e interfaccia HTML (verbi, inventario, dialoghi, fumetti).
 import { story } from './story/story.js';
-import { Game, VERBS, VERB_LABELS, checkSave, introText, shuffledCredits } from './engine/game.js';
+import { Game, VERBS, VERB_LABELS, checkSave, introText, shuffledCredits, matchPlace } from './engine/game.js';
 import { Command } from './engine/command.js';
 import { render, loadAssets, hasBackground, WIDTH, HEIGHT } from './engine/render.js';
 import { readSave, writeSave, clearSave, readAudio, writeAudio, saveFile, saveFileName, readSaveFile } from './engine/storage.js';
@@ -143,16 +143,41 @@ function openMap() {
         }));
         return row;
     }));
+    $('map-search').value = '';
+    filterMap();
     $('map').hidden = false;
     drawRoads();
+    // Col mouse si può scrivere subito; sul telefono la tastiera si apre solo toccando la casella.
+    if (matchMedia('(pointer: fine)').matches) $('map-search').focus({ preventScroll: true });
     // Sul telefono la mappa scorre: si parte col posto dove si è, al centro.
     board.querySelector('.here')?.scrollIntoView({ block: 'center', inline: 'center' });
 }
+// La ricerca: mentre si scrive restano solo i posti che corrispondono; Invio porta al primo.
+function filterMap() {
+    const query = $('map-search').value;
+    let shown = 0;
+    for (const row of $('map-board').querySelectorAll('.map-band')) {
+        let inRow = 0;
+        for (const b of row.children) inRow += (b.hidden = !matchPlace(b.title, query)) ? 0 : 1;
+        row.hidden = !inRow;
+        shown += inRow;
+    }
+    $('map-none').hidden = shown > 0;
+    $('map-none').textContent = `Nessun posto con «${query.trim()}»`;
+    drawRoads();
+}
+$('map-search').addEventListener('input', filterMap);
+$('map-search').addEventListener('keydown', e => {
+    if (e.key !== 'Enter') return;
+    const first = [...$('map-board').querySelectorAll('button')].find(b => !b.hidden && !b.classList.contains('here'));
+    if (first) first.click();
+});
 // Le strade fra le schede, misurate dopo l'impaginazione (e di nuovo se la finestra cambia misura).
 function drawRoads() {
     const board = $('map-board'), svg = $('map-roads'), origin = board.getBoundingClientRect();
     const center = id => {
-        const r = board.querySelector(`[data-scene="${id}"] img`)?.getBoundingClientRect();
+        const card = board.querySelector(`[data-scene="${id}"]`);
+        const r = card && !card.hidden && !card.parentElement.hidden && card.querySelector('img').getBoundingClientRect();
         return r && [r.left + r.width / 2 - origin.left, r.top + r.height / 2 - origin.top];
     };
     svg.setAttribute('viewBox', `0 0 ${board.scrollWidth} ${board.scrollHeight}`);
@@ -383,6 +408,11 @@ function updateChoices() {
 
 window.addEventListener('keydown', e => {
     if (e.target === $('volume') || e.target === $('voice-volume')) return;
+    // Nella ricerca della mappa le lettere si scrivono; Esc prima svuota la casella, poi chiude.
+    if (e.target === $('map-search')) {
+        if (e.key === 'Escape') { if (e.target.value) { e.target.value = ''; filterMap(); } else $('map').hidden = true; }
+        return;
+    }
     if (debugKey(e)) return;
     if (!$('credits').hidden) { if (e.key === 'Escape') $('credits').hidden = true; return; }
     if (!$('pause').hidden) { if (e.key === 'Escape') closePause(); return; }