Mappa del paese per spostarsi veloci; Codex nei crediti

Il pulsante «Mappa» (o il tasto P) apre la pianta del paese a gradini: ci sono i posti già visti,
le strade sono le uscite fra loro, un clic porta lì (game.travel, mai durante un dialogo o una
battuta). Ogni scena ha la sua posizione in `map`; un posto nuovo entra con una riga. Test: posti
solo visti, strade, viaggio rifiutato in un dialogo; nel browser dal Trebbio alla Piazza.

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

docs/STATO.md

@@ -25,6 +25,10 @@ Ultimo aggiornamento: 23 ottobre 2026. Da leggere insieme a `PROGETTO.md` all'in
 - **Voci** (`make voci`, XTTS-v2 sulla GeForce): 112 battute, cinque voci (Andrea, vecchietta, vecchietto, castello,
   leone); il fumetto dura quanto la voce, la musica si abbassa mentre si parla, il muto spegne anche le voci.
   Controllate tutte con Whisper il 2026-10-23. Il leone ora parla (battute provvisorie).
+- **Mappa** (pulsante in alto a sinistra o tasto P): i posti già visti, con le strade fra loro; un clic ci porta.
+  Un posto nuovo entra con `map: [x, y]` nella sua scena (percentuali della pianta, disposta come «il paese a gradini»).
+- **Crediti** dal titolo e dalla fine (`story.credits`), dedica al Lele in testa; musichetta a 8 bit del cartello
+  (`tools/jingle.py`).
 - **Il libro della storia infinita** sulle tavolate dell'oratorio; le idee in attesa in `docs/IDEE.md`.
 - **Test**: `make test` (29 test, compresa la soluzione completa da `src/story/solution.js`) e `make browser`
   (partita completa con clic veri in Chromium, ripresa del salvataggio, telefono).

index.html

@@ -11,6 +11,7 @@
   <div id="stage">
     <canvas id="scene" width="640" height="360" aria-label="La scena dell'avventura"></canvas>
     <div id="speech" aria-live="polite"></div>
+    <button id="map-button" hidden title="Mappa (P)">Mappa</button>
     <div id="sound">
       <button id="mute" aria-label="Musica: togli l'audio" title="Musica (M)">♪</button>
       <input id="volume" type="range" min="0" max="100" step="5" aria-label="Volume della musica">
@@ -37,6 +38,11 @@
       <p class="dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>
       <div class="buttons"><button id="restart">Ricomincia</button><button class="open-credits secondary">Crediti</button></div>
     </section>
+    <section id="map" class="overlay" hidden aria-label="Mappa del paese">
+      <h2>San Piero a Sieve</h2>
+      <div id="map-board"><svg id="map-roads" viewBox="0 0 100 100" preserveAspectRatio="none"></svg></div>
+      <div class="buttons"><button id="close-map">Chiudi</button></div>
+    </section>
     <section id="credits" class="overlay" hidden aria-label="Crediti">
       <h2>Crediti</h2>
       <p class="dedication credits-dedication">Al Lele, che mi ha fatto conoscere Monkey Island.</p>

src/engine/game.js

@@ -255,6 +255,28 @@ export class Game {
         else throw new Error('Effetto sconosciuto: ' + JSON.stringify(e));
     }
 
+    // La mappa: i posti già visti, con la posizione sulla pianta, e le strade che li collegano (uscite fra due posti visti).
+    mapPlaces() {
+        return Object.entries(this.story.scenes)
+            .filter(([id, sc]) => sc.map && this.state.flags['visto:' + id])
+            .map(([id, sc]) => ({ id, name: sc.name, at: sc.map, here: id === this.state.scene }));
+    }
+    mapRoads() {
+        const seen = new Set(this.mapPlaces().map(p => p.id)), roads = new Map();
+        for (const id of seen)
+            for (const h of this.story.scenes[id].hotspots ?? [])
+                if (h.exit && seen.has(h.exit.scene) && h.exit.scene !== id) roads.set([id, h.exit.scene].sort().join('|'), [id, h.exit.scene].sort());
+        return [...roads.values()];
+    }
+    // Viaggio dalla mappa: solo verso un posto già visto, e non mentre si parla, si cammina o si sceglie in un dialogo.
+    travel(scene) {
+        const sc = this.story.scenes[scene];
+        if (!sc?.map || !this.state.flags['visto:' + scene] || scene === this.state.scene) return false;
+        if (this.busy || this.walking || this.dialogue || this.state.ended) return false;
+        this.go(scene, sc.entry);
+        return true;
+    }
+
     go(scene, at, face) {
         if (!this.story.scenes[scene]) throw new Error('Scena sconosciuta: ' + scene);
         this.state.scene = scene;
@@ -263,6 +285,7 @@ export class Game {
         this.path = [];
         this.walking = false;
         this.back = false;
+        this.state.flags['visto:' + scene] = true; // per la mappa
         this.queue.unshift(...(this.scene.enter ?? []));
         this.onSave(this.snapshot());
     }

src/main.js

@@ -78,6 +78,31 @@ $('credits-list').replaceChildren(...(story.credits ?? []).flatMap(({ role, name
 for (const b of document.querySelectorAll('.open-credits')) b.addEventListener('click', () => { $('credits').hidden = false; });
 $('close-credits').addEventListener('click', () => { $('credits').hidden = true; });
 
+// --- Mappa: i posti visti e le strade fra loro; un clic su un posto ci porta (game.travel).
+function openMap() {
+    if (!running || game.dialogue) return;
+    const board = $('map-board'), svg = $('map-roads'), places = game.mapPlaces(), at = Object.fromEntries(places.map(p => [p.id, p.at]));
+    svg.replaceChildren(...game.mapRoads().map(([a, b]) => {
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        [['x1', at[a][0]], ['y1', at[a][1]], ['x2', at[b][0]], ['y2', at[b][1]]].forEach(([k, v]) => line.setAttribute(k, v));
+        return line;
+    }));
+    board.replaceChildren(svg, ...places.map(p => {
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.dataset.scene = p.id;
+        b.textContent = p.name;
+        b.classList.toggle('here', p.here);
+        b.style.left = p.at[0] + '%';
+        b.style.top = p.at[1] + '%';
+        b.addEventListener('click', () => { if (game.travel(p.id)) $('map').hidden = true; });
+        return b;
+    }));
+    $('map').hidden = false;
+}
+$('map-button').addEventListener('click', openMap);
+$('close-map').addEventListener('click', () => { $('map').hidden = true; });
+
 function showTitle() {
     running = false;
     const saved = storage && readSave(storage);
@@ -170,6 +195,8 @@ function updateChoices() {
 window.addEventListener('keydown', e => {
     if (e.target === $('volume')) return;
     if (!$('credits').hidden) { if (e.key === 'Escape') $('credits').hidden = true; return; }
+    if (!$('map').hidden) { if (e.key === 'Escape' || e.key === 'p' || e.key === 'P') $('map').hidden = true; return; }
+    if ((e.key === 'p' || e.key === 'P') && running) { openMap(); return; }
     if (!$('intro').hidden && [' ', 'Enter'].includes(e.key)) { e.preventDefault(); nextIntro(); return; }
     if (e.key === 'm' || e.key === 'M') { music.toggle(); saveAudio(); showSound(); return; }
     if (!running) return;
@@ -204,6 +231,8 @@ function updateUi() {
     updateInventory();
     updateChoices();
     updateSpeech();
+    // Il pulsante della mappa c'è solo in partita, fuori dai dialoghi, e quando c'è almeno un altro posto dove andare.
+    $('map-button').hidden = !running || !!game.dialogue || game.mapPlaces().length < 2;
     if (game.state.ended && !game.speech && !game.queue.length) {
         running = false;
         $('ending').hidden = false;

src/story/story.js

@@ -4,6 +4,8 @@
 
 export const story = {
     title: 'La Leggenda del Regolo',
+    // La mappa (pulsante «Mappa»): ogni scena con `map: [x, y]` (percentuali della pianta) ci compare quando è
+    // stata visitata; le strade sono le uscite fra scene. Un posto nuovo entra con la sua riga `map`.
     start: { scene: 'piazza', at: [250, 320] },
     // Le righe dell'introduzione, sopra il panorama del paese, prima della prima scena.
     intro: [
@@ -23,7 +25,7 @@ export const story = {
         { role: 'Musica', names: ['Andrea Manzi, con Suno'] },
         { role: 'Sfondi', names: ['dalle fotografie di San Piero di Andrea'] },
         { role: 'Voci', names: ['XTTS-v2 di Coqui'] },
-        { role: 'Programmazione', names: ['Andrea Manzi, con Claude'] },
+        { role: 'Programmazione', names: ['Andrea Manzi, con Claude e Codex'] },
     ],
     characters: {
         andrea: { name: 'Andrea', color: '#ffffff', sprite: 'assets/characters/andrea.json' },
@@ -59,6 +61,7 @@ export const story = {
     scenes: {
         piazza: {
             name: 'Piazza Colonna',
+            map: [16, 70],
             background: 'assets/scenes/piazza-colonna.png',
             walk: [[84, 244], [330, 238], [345, 230], [362, 238], [462, 246], [466, 276], [544, 276], [548, 248], [588, 250], [600, 290], [640, 300], [640, 360], [0, 360], [0, 330], [84, 318]],
             depth: [[236, 0.5], [360, 1.35]],
@@ -140,6 +143,7 @@ export const story = {
         },
         fortezza: {
             name: 'Sotto le mura della Fortezza',
+            map: [30, 15],
             background: 'assets/scenes/fortezza-esterno.png',
             walk: [[110, 284], [300, 280], [330, 272], [348, 274], [400, 292], [442, 294], [640, 352], [640, 360], [0, 360], [0, 315], [60, 310], [105, 295]],
             depth: [[272, 0.55], [360, 1.15]],
@@ -190,6 +194,7 @@ export const story = {
         // Livello 0: la Pieve vista dalla salita, con la salita per Villa Adami alle spalle.
         pieve: {
             name: 'La Pieve',
+            map: [46, 70],
             background: 'assets/scenes/pieve-dalla-salita.png',
             // La rampa in primo piano e, dietro il muretto, il sagrato (ci si arriva da sinistra).
             walk: [[0, 270], [80, 266], [86, 252], [100, 222], [270, 215], [300, 224], [480, 234], [560, 242], [600, 252], [610, 268], [276, 240], [276, 270], [292, 278], [640, 352], [640, 360], [0, 360]],
@@ -230,6 +235,7 @@ export const story = {
         // Il cortile dell'oratorio, dietro la porta della canonica: palco, tettoia, tavolate della festa.
         oratorio: {
             name: 'Oratorio della Pieve',
+            map: [74, 70],
             background: 'assets/scenes/oratorio.png',
             walk: [[0, 236], [300, 226], [480, 222], [500, 232], [640, 254], [640, 360], [0, 360]],
             depth: [[222, 0.5], [360, 1.15]],
@@ -279,6 +285,7 @@ export const story = {
         // Via de' Medici: dalla Piazza sale verso Villa Adami (la Piazza è alle spalle, in fondo si va su).
         via_de_medici: {
             name: 'Via de\' Medici',
+            map: [14, 52],
             background: 'assets/scenes/via-de-medici.png',
             walk: [[0, 360], [0, 336], [160, 290], [262, 240], [288, 212], [312, 208], [340, 222], [470, 300], [545, 360]],
             depth: [[208, 0.32], [360, 1.25]],
@@ -302,6 +309,7 @@ export const story = {
         // L'ingresso del campeggio: dalla Piazza a diritto; poco dopo, a destra, si sale al Bosco ai Frati.
         campeggio: {
             name: 'Ingresso del campeggio',
+            map: [16, 88],
             background: 'assets/scenes/campeggio.png',
             walk: [[150, 360], [165, 262], [420, 266], [640, 286], [640, 360]],
             depth: [[262, 0.6], [360, 1.15]],
@@ -332,6 +340,7 @@ export const story = {
         // Il convento del Bosco ai Frati, nel bosco sopra il campeggio.
         bosco_ai_frati: {
             name: 'Bosco ai Frati',
+            map: [42, 88],
             background: 'assets/scenes/bosco-ai-frati.png',
             walk: [[0, 304], [100, 298], [480, 292], [640, 300], [640, 360], [0, 360]],
             depth: [[292, 0.78], [360, 1.1]],
@@ -366,6 +375,7 @@ export const story = {
         // Livello 1: Villa Adami, vista dalla salita della Fortezza guardando in discesa.
         villa_adami: {
             name: 'Villa Adami',
+            map: [34, 48],
             background: 'assets/scenes/villa-adami.png',
             walk: [[0, 272], [30, 246], [60, 244], [110, 256], [190, 268], [360, 296], [440, 288], [520, 276], [560, 268], [612, 262], [614, 272], [520, 288], [500, 292], [500, 360], [0, 360]],
             depth: [[244, 0.5], [360, 1.2]],
@@ -392,6 +402,7 @@ export const story = {
         // Tra il livello 1 e il 2: la salita di Villa Adami, con la casa del leone. Si sale alla Fortezza.
         salita_villa_adami: {
             name: 'Salita di Villa Adami',
+            map: [30, 32],
             background: 'assets/scenes/salita-villa-adami.png',
             walk: [[0, 318], [100, 312], [282, 318], [300, 300], [318, 262], [336, 252], [420, 266], [640, 296], [640, 360], [0, 360]],
             depth: [[252, 0.5], [360, 1.1]],
@@ -424,6 +435,7 @@ export const story = {
         // Il viale dei cipressi, la strada bianca tra la Fortezza e il Trebbio: in fondo c'è il castello.
         viale_cipressi: {
             name: 'Viale dei cipressi',
+            map: [55, 15],
             background: 'assets/scenes/viale-cipressi.png',
             walk: [[30, 360], [200, 300], [288, 252], [312, 250], [420, 300], [600, 360]],
             depth: [[250, 0.16], [360, 1.2]],
@@ -446,6 +458,7 @@ export const story = {
         },
         trebbio: {
             name: 'Castello del Trebbio',
+            map: [80, 15],
             background: 'assets/scenes/trebbio.png',
             music: 'assets/audio/ricordi.mp3',
             walk: [[86, 308], [300, 306], [356, 308], [470, 312], [500, 324], [486, 360], [88, 360], [80, 330]],

style.css

@@ -95,6 +95,20 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
 #continue { background: #7fe08a; }
 .buttons button.secondary { color: var(--ink); background: rgba(42, 32, 48, .85); box-shadow: inset 0 0 0 2px var(--dim); }
 /* Crediti: sopra titolo e fine (z-index), una voce per ruolo; scorrono se non ci stanno. */
+/* Mappa: la pianta del paese a gradini, i posti visti come cartellini, le strade come linee. */
+#map-button { position: absolute; top: 6px; left: 6px; z-index: 2; font: bold clamp(12px, 1.6vw, 16px) var(--font); padding: .35em .8em;
+  color: var(--accent); background: rgba(27, 20, 32, .62); border: 0; border-radius: 18px; cursor: pointer; }
+#map { z-index: 3; justify-content: flex-start; padding-top: 2.5%; background: rgba(15, 10, 20, .94); }
+#map h2 { font-size: clamp(18px, 3vw, 32px); }
+#map-board { position: relative; width: 92%; flex: 1; min-height: 0; margin: .3em 0;
+  background: repeating-linear-gradient(transparent 0 calc(25% - 1px), rgba(185, 169, 194, .12) calc(25% - 1px) 25%), radial-gradient(circle at 50% 60%, #3a2d42, #231a29); border-radius: 8px; }
+#map-roads { position: absolute; inset: 0; width: 100%; height: 100%; }
+#map-roads line { stroke: #b9a9c2; stroke-width: 2.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .7; }
+#map-board button { position: absolute; transform: translate(-50%, -50%); font: bold clamp(10px, 1.5vw, 15px) var(--font); padding: .3em .6em;
+  color: var(--bg); background: var(--ink); border: 2px solid #000; border-radius: 6px; cursor: pointer; white-space: nowrap; }
+#map-board button:hover { background: var(--accent); }
+#map-board button.here { color: var(--ink); background: #2f5fb3; cursor: default; }
+#map-board button.here::after { content: ' · sei qui'; font-weight: normal; }
 #credits { z-index: 3; justify-content: flex-start; overflow-y: auto; padding-top: 4%; background: rgba(15, 10, 20, .96); }
 #credits .credits-dedication { margin: .2em 0 .5em !important; font-size: clamp(16px, 2.6vw, 28px); }
 /* Due colonne: il ruolo a destra della sua colonna, il nome a sinistra della sua, allineati sulla riga. */

tests/browser.mjs

@@ -136,6 +136,15 @@ try {
     await page.waitForSelector('#continue:not([hidden])');
     await page.click('#continue');
     assert.equal(await page.evaluate(() => game.state.scene), 'trebbio');
+    // La mappa: dal Trebbio alla Piazza con due clic; i posti mai visti (la Pieve) non ci sono.
+    await settle(page);
+    await page.click('#map-button');
+    assert.equal(await page.locator('#map-board button[data-scene="pieve"]').count(), 0, 'la Pieve non è ancora vista');
+    assert.ok(await page.isVisible('#map-board button.here[data-scene="trebbio"]'));
+    await page.screenshot({ path: `${OUT}/07b-mappa.png` });
+    await page.click('#map-board button[data-scene="piazza"]');
+    assert.ok(await page.isHidden('#map'));
+    assert.equal(await page.evaluate(() => game.state.scene), 'piazza');
 
     const phone = await open({ width: 390, height: 844 });
     await phone.click('#splash'); // un clic salta il cartello

tests/story.test.mjs

@@ -145,3 +145,27 @@ test('il libro dell\'oratorio: «La storia infinita» ha una pagina sola', () =>
     const said = settle(g).map(s => s.text);
     assert.ok(said.some(t => t.includes('FINE')), 'aperto, dice FINE');
 });
+
+test('la mappa: ogni scena ci sta, i posti compaiono solo visti, il viaggio rispetta i dialoghi', () => {
+    for (const [id, sc] of Object.entries(story.scenes)) {
+        assert.ok(Array.isArray(sc.map), `${id} non è sulla mappa`);
+        assert.ok(sc.map.every(v => v >= 0 && v <= 100), `${id} fuori dalla pianta`);
+    }
+    const g = new Game(story);
+    g.go('piazza', story.start.at);
+    settle(g);
+    assert.deepEqual(g.mapPlaces().map(p => p.id), ['piazza']);
+    assert.equal(g.travel('trebbio'), false, 'non si va dove non si è mai stati');
+    g.go('pieve', story.scenes.pieve.entry);
+    settle(g);
+    assert.deepEqual(g.mapRoads(), [['piazza', 'pieve']], 'la strada fra due posti visti');
+    assert.ok(g.mapPlaces().find(p => p.id === 'pieve').here);
+    assert.ok(g.travel('piazza'));
+    settle(g);
+    assert.equal(g.state.scene, 'piazza');
+    assert.equal(g.travel('piazza'), false, 'già qui');
+    g.act('talk', 'vecchietti');
+    settle(g);
+    assert.ok(g.dialogue);
+    assert.equal(g.travel('pieve'), false, 'non si scappa da un dialogo');
+});