manzolo/leggenda-del-regolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Telefono in orizzontale: verbi e pausa dentro lo schermo, con un controllo nella prova nel browser

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017egeN2amL84ErjfgQFtEDn
This commit is contained in:
manzolo
2026-10-23 22:19:44 +02:00
co-authored by Claude Opus 5.5
parent c0d643d05d
commit 616a84313d
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+12 -1
View File
@@ -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; }
}
tests/browser.mjs
+13
View File
@@ -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');