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
76 lines
5.0 KiB
Markdown
76 lines
5.0 KiB
Markdown
# 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.
|