Il risveglio di nuovo come prima sul computer, con la sfocatura vera, e leggero sul telefono, senza filtri; tutte e due su una tela a parte che c'è solo finché il risveglio dura, così la scena non ne risente (Andrea)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GiECd9RWGMKV7n3K1mdy8T
2026-10-31 11:57:26 +01:00
parent f7ca286066
commit f57a91ca74
5 changed files with 56 additions and 25 deletions
@@ -182,6 +182,7 @@ export function render(ctx, game, { hover, spots, debug, time = performance.now(
        : drawAndrea(ctx, s.x, s.y, game.scaleAt(s.y), s.facing, game.walking ? game.stride / 6 : null);
    // Durante il risveglio si guarda dagli occhi di Andrea: lui non si vede.
    const pov = game.closeup && game.story.closeups?.[game.closeup.id]?.type === 'risveglio';
+    if (!pov) risveglioLayer(ctx, false);
    const queue = pov ? [] : [{ y: s.y, draw: drawAndreaNow }];
    for (const p of game.people()) {
        const sheet = sprites.get(p.who);
@@ -886,6 +887,18 @@ function drawDebug(ctx, game, { mouse, points = [], help }) {
    ctx.restore();
 }

+// La tela del risveglio (risveglio.js): una tela a parte sopra la scena, che c'è solo finché il risveglio dura.
+function risveglioLayer(ctx, on = true) {
+    if (typeof document === 'undefined' || !ctx.canvas?.after) return null;
+    let layer = document.getElementById('risveglio');
+    if (!on) { layer?.remove(); return null; }
+    if (!layer) {
+        layer = Object.assign(document.createElement('canvas'), { id: 'risveglio', width: WIDTH, height: HEIGHT });
+        ctx.canvas.after(layer);
+    }
+    return layer.getContext('2d');
+}
+
 // --- Il primo piano di un libro (story.closeups, game.closeup): la scena si oscura, le mani alzano il libro dal basso.
 // Le immagini hanno etichetta e pagine vuote: i testi si scrivono qui, nitidi. Una pagina sola gira, a fisarmonica
 // sulla piega; sotto c'è già l'ultima pagina.
@@ -924,7 +937,12 @@ function drawCloseup(ctx, game, time) {
    // L'incantesimo va sopra la scena (con Andrea dentro), già disegnata.
    if (def.type === 'incanto') { drawIncanto(ctx, c); return; }
    // Il risveglio, visto da dentro gli occhi: anche lui sopra la scena già disegnata.
-    if (def.type === 'risveglio') { drawRisveglio(ctx, c, backgrounds.get(game.backdrop())); return; }
+    // Sul telefono (schermo touch) la versione leggera, senza filtri; sul computer quella con la sfocatura vera.
+    if (def.type === 'risveglio') {
+        const layer = risveglioLayer(ctx), light = matchMedia('(pointer: coarse)').matches;
+        if (layer) drawRisveglio(layer, c, backgrounds.get(game.backdrop()), { light });
+        return;
+    }
    // Il telefonino del Barone: sale come il libro, e il sito nello schermo si allarga a tutta la scena.
    if (def.type === 'telefono') {
        const pic = src => { if (!backgrounds.has(src)) loadBackground(src); return backgrounds.get(src); };
@@ -30,8 +30,10 @@ export function updateRisveglio(c, def, dt) {
    return { due, end: c.t >= END && c.fired >= lines.length };
 }

-// La nebbia è lo sfondo rimpicciolito e riallargato morbido, sopra la scena: niente filtri. Sfocare con ctx.filter
-// (rileggendo la tela) o col filter CSS sulla tela rallentava tutto il gioco anche a risveglio finito.
+// Il risveglio si disegna su una tela sua, appoggiata sopra la scena solo finché dura (render.js, `#risveglio`).
+// Due versioni (Andrea, 31 ottobre): sul computer quella bella, con la sfocatura vera (ctx.filter); sul telefono
+// (`light`) una leggera senza filtri, perché senza una scheda video la sfocatura a ogni fotogramma pesa: la nebbia è
+// lo sfondo rimpicciolito e riallargato morbido, il bordo delle palpebre tante passate trasparenti.
 const SMALL = [80, 45];
 let small = null, smallOf = null;
 function blurred(bg) {
@@ -45,22 +47,24 @@ function blurred(bg) {
    return small;
 }

-export function drawRisveglio(ctx, c, bg) {
+export function drawRisveglio(ctx, c, bg, { light = false } = {}) {
    const t = c.t, h = haze(t), open = openness(t), W = 640, H = 360;
    ctx.save();
-    // La scena annebbiata (lo sfondo sfocato sopra) e la vista doppia (una seconda copia, spostata, che ondeggia).
-    if (h > 0.01 && bg && typeof document !== 'undefined') {
-        const fog = blurred(bg), sway = 14 * h, dx = Math.sin(c.age * 1.3) * sway, dy = Math.sin(c.age * 0.9 + 1) * sway * 0.35;
+    ctx.clearRect(0, 0, W, H);
+    // La scena annebbiata: lo sfondo sfocato sopra a quello nitido, più una seconda copia spostata che ondeggia (la
+    // vista doppia); tutto si dirada col passare del tempo.
+    if (h > 0.01 && bg) {
+        const sway = 14 * h, dx = Math.sin(c.age * 1.3) * sway, dy = Math.sin(c.age * 0.9 + 1) * sway * 0.35;
+        const fog = light ? blurred(bg) : bg;
        ctx.imageSmoothingEnabled = true;
-        ctx.globalAlpha = 0.85 * h;
+        if (!light) ctx.filter = `blur(${(5 * h).toFixed(2)}px)`;
+        ctx.globalAlpha = h;
        ctx.drawImage(fog, 0, 0, W, H);
-        ctx.globalAlpha = 0.4 * h;
+        ctx.globalAlpha = 0.45 * h;
        ctx.drawImage(fog, dx, dy, W, H);
        ctx.globalAlpha = 1;
-        ctx.imageSmoothingEnabled = false;
-    }
-    // La luce del mattino che abbaglia.
-    if (h > 0.01) {
+        ctx.filter = 'none';
+        // La luce del mattino che abbaglia.
        ctx.fillStyle = `rgba(255,244,214,${0.22 * h})`;
        ctx.fillRect(0, 0, W, H);
    }
@@ -70,22 +74,23 @@ export function drawRisveglio(ctx, c, bg) {
    v.addColorStop(1, `rgba(10,2,4,${0.85 * (1 - open * 0.75) * Math.max(h, 0.3)})`);
    ctx.fillStyle = v;
    ctx.fillRect(0, 0, W, H);
-    // Le palpebre: sopra e sotto, col bordo curvo. Il bordo morbido (prima era una sfocatura, che rallentava tutto)
-    // sono tante passate trasparenti che sporgono verso l'occhio aperto, un pixel di più l'una: sovrapponendosi
-    // scuriscono piano verso la palpebra piena. Chiuse, si vede il rosso scuro della luce che passa.
+    // Le palpebre: sopra e sotto, col bordo curvo e sfumato; chiuse, si vede il rosso scuro della luce che passa.
    if (open < 0.999) {
-        const mid = H / 2, lid = (gap, bulge, sign) => {
+        const mid = H / 2, bulge = 70 + 60 * open, lid = (gap, sign) => {
            const edge = mid + sign * gap, side = edge - sign * bulge, far = sign < 0 ? -20 : H + 20;
            ctx.beginPath();
            ctx.moveTo(-20, far); ctx.lineTo(W + 20, far); ctx.lineTo(W + 20, side);
            ctx.quadraticCurveTo(W / 2, edge * 2 - side, -20, side);
            ctx.closePath(); ctx.fill();
        };
-        const SOFT = 16, bulge = 70 + 60 * open;
-        ctx.fillStyle = 'rgba(22,4,6,0.11)';
-        for (let i = SOFT; i > 0; i--) { lid(200 * open - i, bulge, -1); lid(200 * open - i, bulge, 1); }
+        if (light) {
+            // Il bordo morbido: passate trasparenti che sporgono verso l'occhio aperto, un pixel di più l'una.
+            ctx.fillStyle = 'rgba(22,4,6,0.11)';
+            for (let i = 16; i > 0; i--) { lid(200 * open - i, -1); lid(200 * open - i, 1); }
+        } else ctx.filter = 'blur(6px)';
        ctx.fillStyle = 'rgb(22,4,6)';
-        lid(200 * open, bulge, -1); lid(200 * open, bulge, 1);
+        lid(200 * open, -1); lid(200 * open, 1);
+        ctx.filter = 'none';
    }
    ctx.restore();
 }