manzoloandClaude Opus 5.5
b0586e3061
- video/collaudo.mjs: tutta la soluzione in tre misure di schermo, una schermata a ogni passo e a ogni battuta, e i difetti trovati da soli (bersagli piccoli o coperti, fumetti fuori scena o sotto i pulsanti, testi tagliati) - video/COLLAUDO.md: le tre scalette e i difetti trovati - fumetto a larghezza naturale (vicino al bordo destro si stringeva a colonna), posizionato in pixel sotto i pulsanti in alto; sul telefono più largo e più piccolo - la fessura più grande, con Andrea alla sua sinistra Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ApqNBvNbNCwXqR2RLo8QJh
5.0 KiB
5.0 KiB
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.