From 616a84313d7d17b235587b3c5e80665137495fc9 Mon Sep 17 00:00:00 2001 From: Andrea Manzi Date: Fri, 23 Oct 2026 22:19:44 +0200 Subject: [PATCH] Telefono in orizzontale: verbi e pausa dentro lo schermo, con un controllo nella prova nel browser Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_017egeN2amL84ErjfgQFtEDn --- style.css | 13 ++++++++++++- tests/browser.mjs | 13 +++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 43a1ebb..e8f671d 100644 --- a/style.css +++ b/style.css @@ -41,7 +41,7 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h #panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--panel); } /* Otto verbi su due righe piene, quattro per riga. */ -#verbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; } +#verbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; align-content: start; } #verbs button, #inventory button { font: inherit; color: var(--dim); background: #3a2d42; border: 2px solid #4b3a55; border-radius: 4px; padding: .35em .2em; font-size: clamp(9.36px, 1.22vw, 13.68px); font-weight: bold; cursor: pointer; } #verbs button:hover, #inventory button:hover { color: var(--ink); } @@ -151,6 +151,17 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h #panel { grid-template-columns: 1fr; gap: 6px; padding: 6px; } #inventory { grid-template-columns: repeat(2, 1fr); min-height: 0; } #verbs button, #inventory button, #choices li { font-size: 10.08px; } + /* La colonna di lato è stretta: verbi piccoli che vanno a capo, mai più larghi della colonna (sennò il telefono + allarga la pagina e taglia tutto a destra). */ + #verbs button { font-size: clamp(6px, 1vw, 8px); padding: .7em 0; letter-spacing: -.04em; } + #inventory button { font-size: 8px; } + /* Pausa, mappa, crediti e titolo: tutto dentro l'altezza della scena. */ + .overlay { gap: .3em; padding: 6px; overflow-y: auto; } + .overlay h2 { font-size: 16px; } + .buttons { gap: 6px; margin-top: .2em; } + .buttons button { font-size: 10px; padding: .45em 1em; } + .pause-buttons { min-width: 12em; } + #pause .hint { font-size: 8px; } #choices { min-height: 0; padding: 6px 8px 6px 2em; } } diff --git a/tests/browser.mjs b/tests/browser.mjs index 88d07e2..d4b3064 100644 --- a/tests/browser.mjs +++ b/tests/browser.mjs @@ -179,6 +179,19 @@ try { assert.ok(await phone.evaluate(() => [...document.querySelectorAll('#verbs button')].every(b => b.scrollWidth <= b.clientWidth + 1 && b.getBoundingClientRect().right <= innerWidth)), 'verbi tagliati sul telefono'); assert.equal(overflow, false, 'scorrimento orizzontale su telefono'); await phone.screenshot({ path: `${OUT}/08-telefono.png` }); + // Telefono stretto in orizzontale: niente deve allargare la pagina oltre lo schermo (il browser la rimpicciolirebbe + // e taglierebbe verbi e inventario a destra), e la pausa sta tutta dentro la scena. + const small = await browser.newPage({ viewport: { width: 740, height: 330 }, deviceScaleFactor: 2.4, hasTouch: true, isMobile: true }); + small.on('pageerror', e => errors.push(e.message)); + await small.goto(`http://127.0.0.1:${PORT}/`); + await small.waitForSelector('#splash', { state: 'hidden', timeout: 15000 }); + await small.click('#new-game'); + await small.click('#skip-intro'); + await settle(small); + assert.equal(await small.evaluate(() => innerWidth), 740, 'la pagina è più larga dello schermo del telefono'); + await small.click('#pause-button'); + assert.ok(await small.evaluate(() => document.getElementById('to-title').getBoundingClientRect().bottom <= document.getElementById('stage').getBoundingClientRect().bottom), 'la pausa esce dalla scena'); + await small.screenshot({ path: `${OUT}/08b-telefono-stretto-pausa.png` }); const landscape = await open({ width: 844, height: 390 }); await landscape.click('#new-game'); await landscape.click('#skip-intro');