# Collaudo dell'interfaccia: tre scalette, tre modalità

Lo scopo è trovare i difetti che si vedono solo giocando: clic che non arrivano, testi sovrapposti o tagliati, fumetti
fuori posto. Le tre scalette percorrono la stessa partita, cioè la soluzione completa del primo capitolo
(`src/story/solution.js`), ognuna con la sua misura di schermo e i suoi punti da guardare.

Il giro automatico si lancia con `node video/collaudo.mjs` (oppure `node video/collaudo.mjs telefono` per una modalità
sola). Fa una schermata a ogni passo e a ogni battuta in `video/out/collaudo/<modo>/` e scrive l'elenco dei difetti
trovati da solo in `video/out/collaudo/DIFETTI.md`. Cartella esclusa da git. Le stesse scalette servono per i video
sulla VM delle riprese (`video/SCALETTA.md`, «Come si rigira»).

Controlli automatici, a ogni schermata:

- la pagina scorre di lato;
- il fumetto esce dalla scena, finisce sotto i pulsanti in alto (Pausa, Mappa, «?», volume) o diventa una colonna
  (più alto che largo);
- testo tagliato in verbi, inventario, scelte dei dialoghi e riga della frase; scelte fuori dallo schermo;
- prima di ogni clic sulla scena: il bersaglio è abbastanza grande (12 px col mouse; 28 px col dito, contando la
  tolleranza di 22 px) e il suo centro non è coperto da un pulsante;
- dopo ogni clic: il gioco ha fatto qualcosa;
- errori JavaScript.

## 1. Desktop pieno (1600×900, mouse)

È lo schermo della VM delle riprese: il gioco come lo vede chi lo apre sul computer.

| # | Momento | Cosa guardare |
| --- | --- | --- |
| 1 | Titolo e introduzione | Titolo, pulsanti (Nuova partita, Carica, Crediti) e volume senza sovrapposizioni; le righe dell'introduzione leggibili |
| 2 | Piazza: colonna, vecchietti, squama | Fumetti sopra chi parla; scelte del dialogo leggibili; la squama si prende al primo clic |
| 3 | Salita fino alla Fortezza | Uscite al primo clic; la riga della frase non resta vecchia |
| 4 | Impronte e fessura | Fumetti lunghi interi e dentro la scena; la fessura si vede e non la copre Andrea |
| 5 | Pieve: statua, indovinello, oratorio | Fumetto della statua sopra di lei; cinque risposte tutte visibili |
| 6 | Tennis: la Tosca, cedrata e ghiacciolo | Inventario con più oggetti; «usa… con» fra due oggetti dell'inventario |
| 7 | Ponticino, area feste, casetta | Uscite lunghe in fondo allo schermo; la torcia compare nell'inventario |
| 8 | Fortezza: la torcia nella fessura | Luce, angolo del palio e occhi visibili; i fumetti non coprono la fessura |
| 9 | Fine del capitolo | Testo, dedica e pulsanti interi; Crediti sopra a tutto |

## 2. Metà schermo (800×900, mouse)

È la finestra del browser affiancata a un'altra: la scena è stretta e in alto resta spazio vuoto.

| # | Momento | Cosa guardare |
| --- | --- | --- |
| 1 | Titolo | Titolo su più righe senza sovrapporsi ai pulsanti |
| 2 | Piazza | Verbi e inventario sotto la scena: niente parole tagliate («Parla con») |
| 3 | Dialoghi (vecchietti, statua, Tosca) | Le scelte sostituiscono verbi e inventario: tutte visibili, numerate, senza scorrere |
| 4 | Fumetti lunghi (manifesto, fessura) | Su più righe ma larghi, dentro la scena, mai sotto il volume |
| 5 | Inventario con 3-4 oggetti | Nomi lunghi («chiave dell'oratorio», «stecco e gomma») su due righe senza uscire dal pulsante |
| 6 | Fine e crediti | Tutto dentro la finestra; i crediti scorrono se non ci stanno |

## 3. Smartphone in orizzontale (844×390, dito)

Un telefono vero girato in orizzontale: scena a sinistra, verbi e inventario a destra, si tocca invece di cliccare.

| # | Momento | Cosa guardare |
| --- | --- | --- |
| 1 | Titolo e introduzione | Tutto a schermo intero; «Salta» raggiungibile; il volume non copre il titolo |
| 2 | Piazza: la squama | La squama si prende col dito anche toccando la panchina intorno |
| 3 | Fumetti lunghi | Mai sotto Pausa/Mappa/volume, mai fuori dalla scena, mai a colonna |
| 4 | Verbi in due colonne | Leggibili e grandi abbastanza per il dito |
| 5 | Dialoghi | Le scelte si toccano una per una; nessuna fuori dallo schermo |
| 6 | Uscite in fondo alla scena | Basse ma larghe: il tocco arriva anche un po' sopra |
| 7 | Inventario pieno | Si scorre; l'ultimo oggetto preso si vede |
| 8 | Pausa, Salva su file, mappa | Pulsanti dentro la scena; la mappa scorre e parte dal posto dove si è |
| 9 | Fine | Testo e pulsanti interi; Ricomincia e Crediti toccabili |

## Difetti trovati e corretti (24 ottobre 2026)

- Smartphone: le battute lunghe («Laggiù, appoggiato al muro…», «Ai piedi c'è una strana scia…») diventavano una
  colonna alta quanto la scena, che saliva sotto i cursori del volume e usciva dalla scena. Ora il fumetto è più largo e
  ha il carattere più piccolo; la posizione si calcola in pixel, sotto i pulsanti in alto e dentro i lati.
- In tutte le modalità: vicino al bordo destro il fumetto si stringeva a colonna (per esempio «La colonna, il centro
  del paese…»). Corretto con `width: max-content`.
- La fessura nel bastione stava dietro Andrea: ora è più grande e lui si ferma alla sua sinistra.