La Ghiacciomobile schiantata nel muro giallo di Via Liguri Magelli, coi mattoni rotti e senza targa (ritocco di Codex), fino al tramonto; poi il muro rifatto con la targa. Non è più al circolino. Il motore ha le varianti di sfondo per scena (backdrops) (Andrea)

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

src/engine/game.js

@@ -162,6 +162,9 @@ export class Game {
     }
 
     get scene() { return this.story.scenes[this.state.scene]; }
+    // Lo sfondo di adesso: la prima variante della scena (`backdrops`, ognuna con la sua condizione `when`) che vale,
+    // sennò il suo `background`. Così un posto cambia con la storia (la Ghiacciomobile nel muro, poi la targa).
+    backdrop(scene = this.scene) { return scene.backdrops?.find(b => check(b.when, this.state))?.src ?? scene.background; }
     // Occupato: c'è qualcosa in corso che il giocatore non può interrompere. La camminata verso un punto
     // o verso un oggetto si può sempre cambiare con un altro clic: la coda che la seguiva viene scartata.
     get busy() { return !!this.speech || !!this.closeup || this.reach > 0 || (this.task ? !this.task.interruptible : this.queue.length > 0); }

src/engine/render.js

@@ -131,7 +131,7 @@ export function backgroundOrder(story, first) {
         for (const h of story.scenes[queue[i]]?.hotspots ?? [])
             if (h.exit && story.scenes[h.exit.scene] && !seen.has(h.exit.scene)) { seen.add(h.exit.scene); queue.push(h.exit.scene); }
     for (const id of Object.keys(story.scenes)) if (!seen.has(id)) queue.push(id);
-    return [...new Set(queue.map(id => story.scenes[id].background).filter(Boolean))];
+    return [...new Set(queue.flatMap(id => [story.scenes[id].background, ...(story.scenes[id].backdrops ?? []).map(b => b.src)]).filter(Boolean))];
 }
 
 // Il personaggio alto PERSON pixel a grandezza 1 (per `size` 1), con i piedi in (x, y); rivolto a sinistra si specchia.
@@ -153,8 +153,8 @@ function drawSprite(ctx, { atlas, img }, frame, x, y, scale, facing, size = 1) {
 }
 
 export function render(ctx, game, { hover, spots, debug, time = performance.now() } = {}) {
-    const scene = game.scene, s = game.state, bg = backgrounds.get(scene.background);
-    if (!bg && scene.background) loadBackground(scene.background);
+    const scene = game.scene, s = game.state, backdrop = game.backdrop(), bg = backgrounds.get(backdrop);
+    if (!bg && backdrop) loadBackground(backdrop);
     ctx.imageSmoothingEnabled = false;
     ctx.clearRect(0, 0, WIDTH, HEIGHT);
     if (bg) ctx.drawImage(bg, 0, 0, WIDTH, HEIGHT);
@@ -395,7 +395,7 @@ export const EFFECTS = {
     // Alberi al vento (i cipressi): il pezzo di sfondo si piega tutto insieme dalla base, di frazioni di pixel e con
     // due onde lente sovrapposte, così il movimento è morbido e non a scatti.
     sway(ctx, e, time, game) {
-        const bg = backgrounds.get(game.scene.background);
+        const bg = backgrounds.get(game.backdrop());
         if (!bg) return;
         const k = bg.width / WIDTH, amount = e.amount ?? 3.2;
         for (const [i, [x, y, w, h]] of e.rects.entries()) {
@@ -412,7 +412,7 @@ export const EFFECTS = {
     // ognuna a una sua altezza e velocità, uscita da un lato rientra dall'altro. Si vedono solo dove lo sfondo è
     // cielo (skyMask): passano dietro alberi, torri e tetti. Le due grandi solo coi cieli larghi (`big`).
     clouds(ctx, e, time, game) {
-        const bg = backgrounds.get(game.scene.background), mask = bg && skyMask(bg);
+        const bg = backgrounds.get(game.backdrop()), mask = bg && skyMask(bg);
         if (!mask) return;
         const layer = scratch(), lc = layer.getContext('2d'), [ax, ay, aw, ah] = e.area;
         const pool = e.big ? CLOUDS : CLOUDS.slice(2);
@@ -452,7 +452,7 @@ export const EFFECTS = {
     // Una bandiera dipinta nello sfondo che sventola: a strisce verticali che salgono e scendono, ferme dalla parte
     // dell'asta (`pole`: 'left' o 'right') e sempre più mosse verso il lembo libero.
     cloth(ctx, e, time, game) {
-        const bg = backgrounds.get(game.scene.background);
+        const bg = backgrounds.get(game.backdrop());
         if (!bg) return;
         const k = bg.width / WIDTH;
         for (const [i, [x, y, w, h]] of e.rects.entries()) {