From acc437a33c4597cb116af4dfc315566e8762ce42 Mon Sep 17 00:00:00 2001 From: Andrea Manzi Date: Sun, 25 Oct 2026 10:44:46 +0100 Subject: [PATCH] =?UTF-8?q?Cartello=20=E2=86=92=20titolo:=20la=20dissolven?= =?UTF-8?q?za=20parte=20insieme=20al=20titolo=20(prima=20il=20CSS=20sfumav?= =?UTF-8?q?a=20il=20cartello=20prima=20che=20il=20codice=20arrivasse,=20e?= =?UTF-8?q?=20si=20vedeva=20la=20piazza);=20titolo=20e=20introduzione=20co?= =?UTF-8?q?n=20fondo=20pieno?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_018ks2K99uqCZjAxvy7Rdj1R --- src/main.js | 6 +++--- style.css | 10 ++++++---- tests/browser.mjs | 10 ++++++++++ 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/main.js b/src/main.js index 756478f..a7d8559 100644 --- a/src/main.js +++ b/src/main.js @@ -582,12 +582,12 @@ $('restart').addEventListener('click', () => { // Dietro il titolo si vede già la piazza. // --- Cartello d'apertura «Manzolo (Poca) Art Presents»: 5 secondi (un clic o un tasto lo salta), poi il titolo. -// Il titolo compare sotto il cartello quando questo comincia a sfumare (style.css, 4,3 s): dissolvenza incrociata, -// senza intravedere la piazza nel mezzo. +// Il titolo compare sotto il cartello quando questo comincia a sfumare (#splash.out in style.css): dissolvenza +// incrociata, senza intravedere la piazza nel mezzo. I tempi partono da qui, non dal primo disegno della pagina. const SPLASH_FADE = 4300, SPLASH_END = 5000; function showSplash() { let done = false, revealed = false; - const reveal = () => { if (!revealed) { revealed = true; showTitle(); } }; + const reveal = () => { if (!revealed) { revealed = true; showTitle(); $('splash').classList.add('out'); } }; const end = () => { if (done) return; done = true; diff --git a/style.css b/style.css index 6653296..f8c1692 100644 --- a/style.css +++ b/style.css @@ -68,12 +68,12 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h .overlay[hidden] { display: none; } /* Titolo e introduzione: le illustrazioni a pixel netti, con una velatura per leggere il testo. */ #title { justify-content: flex-start; padding-top: 6%; image-rendering: pixelated; - background: none; } + background: #0d0910; } /* fondo pieno: finché l'illustrazione non arriva, sotto non si vede il gioco */ #title .buttons { margin-top: auto; } #title .dedication { margin-bottom: 2%; text-shadow: 2px 2px 0 #000; } #title .subtitle { color: var(--ink); text-shadow: 2px 2px 0 #000; } #intro { justify-content: flex-start; padding-top: 7%; cursor: pointer; image-rendering: pixelated; - background: none; } + background: #0d0910; } /* fondo pieno: finché l'illustrazione non arriva, sotto non si vede il gioco */ #intro-text { min-height: 4.2em; max-width: 30em; font-size: clamp(11.52px, 1.87vw, 21.6px); font-weight: bold; line-height: 1.3; color: var(--ink); text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000; animation: appear .8s ease-out; } #intro .hint { margin-top: auto; margin-bottom: 40px; color: var(--dim); font-size: clamp(8.64px, 1.08vw, 11.52px); text-shadow: 1px 1px 0 #000; } @@ -110,8 +110,10 @@ body.full #sound { position: fixed; z-index: 13; top: max(8px, env(safe-area-ins #title .dedication { font-size: max(9px, calc(var(--u) * 1.5)); } #intro-text { font-size: max(11px, calc(var(--u) * 2)); } #title .buttons button { font-size: max(11px, calc(var(--u) * 1.9)); } -#splash { z-index: 11; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%); - animation: splash-out .7s ease-in 4.3s forwards; } +#splash { z-index: 11; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%); } +/* La dissolvenza la avvia main.js insieme al titolo: il CSS arriva prima del codice, e con un orologio suo il cartello + sparirebbe prima che il titolo ci sia. */ +#splash.out { animation: splash-out .7s ease-in forwards; } #splash p { margin: 0; max-width: none; font-weight: bold; text-shadow: 3px 3px 0 #000; opacity: 0; } #splash .splash-name { font-size: clamp(24.48px, 5.76vw, 63.36px); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); animation: splash-in .9s ease-out .2s forwards; } diff --git a/tests/browser.mjs b/tests/browser.mjs index 1220679..6d21444 100644 --- a/tests/browser.mjs +++ b/tests/browser.mjs @@ -62,6 +62,16 @@ try { await page.screenshot({ path: `${OUT}/00b-dissolvenza.png` }); await page.waitForSelector('#splash', { state: 'hidden', timeout: 3000 }); await page.screenshot({ path: `${OUT}/01-titolo.png` }); + // Col codice lento ad arrivare (rete vera) il cartello aspetta il titolo: non sfuma prima per conto suo. + { + const slow = await browser.newPage({ viewport: { width: 1280, height: 860 } }); + await slow.route('**/src/main.js', async route => { await new Promise(r => setTimeout(r, 2000)); await route.continue(); }); + await slow.goto(`http://127.0.0.1:${PORT}/`); + await slow.waitForSelector('#title:not([hidden])', { timeout: 12000 }); + const opacity = await slow.evaluate(() => Number(getComputedStyle(document.getElementById('splash')).opacity)); + assert.ok(opacity > 0.9, `il cartello era già sfumato (${opacity}) quando è comparso il titolo`); + await slow.close(); + } // I crediti dal titolo: si aprono, mostrano i nomi, Esc li chiude. await page.click('#title .open-credits'); assert.match(await page.textContent('#credits'), /Ringraziamenti\s*Al Lele/, 'la dedica al Lele viene per prima');