feat(striscia): registra cambi e time out per set (#18)

La striscia salva ora storico cambi formazione e time out per ogni
set, con riferimento al punteggio al momento dell'evento anziché a
un timestamp: startTimeout accumula in set.timeouts, confermaCambi
in set.cambi. Il referto elenca entrambi ordinati per punteggio.

src/gameState.js

@@ -171,6 +171,13 @@ export function applyAction(state, action) {
         case "startTimeout": {
             const team = action.team
             if (team !== 'home' && team !== 'guest') break
+            if (!s.timeout) {
+                const setCorrente = s.sp.striscia.at(-1)
+                ;(setCorrente.timeouts ??= []).push({
+                    team,
+                    punteggio: punteggio(s.sp.striscia),
+                })
+            }
             s.timeout = true
             s.timeoutTeam = team
             s.timeoutVideo = action.video ?? null
@@ -209,6 +216,7 @@ export function applyAction(state, action) {
             const cambi = action.cambi || []
             const form = s.sp.form[team].map((val) => String(val).trim())
             const formAggiornata = [...form]
+            const cambiApplicati = []
 
             let valid = true
             for (const cambio of cambi) {
@@ -223,11 +231,19 @@ export function applyAction(state, action) {
                 const idx = formAggiornata.findIndex((val) => String(val).trim() === cout)
                 if (idx !== -1) {
                     formAggiornata.splice(idx, 1, cin)
+                    cambiApplicati.push({ in: cin, out: cout })
                 }
             }
 
             if (valid) {
                 s.sp.form[team] = formAggiornata
+                if (cambiApplicati.length > 0) {
+                    const setCorrente = s.sp.striscia.at(-1)
+                    const puntAttuale = punteggio(s.sp.striscia)
+                    ;(setCorrente.cambi ??= []).push(
+                        ...cambiApplicati.map(c => ({ team, ...c, punteggio: { ...puntAttuale } }))
+                    )
+                }
             }
             break
         }

src/referto.js

@@ -44,6 +44,31 @@ export function buildRefertoHtml(state, now = new Date()) {
           </div>`
     }
 
+    const nomeTeam = (team) => team === 'home' ? nomi.home : nomi.guest
+
+    const eventiHtml = (s) => {
+        const eventi = [
+            ...(s.timeouts ?? []).map(t => ({ tipo: 'timeout', ...t })),
+            ...(s.cambi ?? []).map(c => ({ tipo: 'cambio', ...c })),
+        ].sort((a, b) => (a.punteggio.home + a.punteggio.guest) - (b.punteggio.home + b.punteggio.guest))
+
+        if (eventi.length === 0) return ''
+
+        const righe = eventi.map(e => {
+            const sul = `sul ${e.punteggio.home}-${e.punteggio.guest}`
+            const testo = e.tipo === 'timeout'
+                ? `Time out <strong>${nomeTeam(e.team)}</strong> ${sul}`
+                : `Cambio <strong>${nomeTeam(e.team)}</strong>: entra ${e.in} per ${e.out} ${sul}`
+            return `<li class="evento evento-${e.tipo}">${testo}</li>`
+        }).join('')
+
+        return `
+          <div class="eventi-set">
+            <div class="eventi-label">Cambi e time out</div>
+            <ul class="eventi-lista">${righe}</ul>
+          </div>`
+    }
+
     const setsHtml = setReali.map((s, i) => {
         let h = 0, g = 0
         const punti = []
@@ -68,7 +93,7 @@ export function buildRefertoHtml(state, now = new Date()) {
           <div class="form-inizio">
             <div class="form-inizio-label">Formazione di partenza</div>
             ${formazioneHtml(s.formInizio)}
-          </div>
+          </div>${eventiHtml(s)}
           <div class="punti-grid">${puntiHtml || '<em style="color:#999;font-size:11px">Nessun punto registrato</em>'}</div>
         </div>`
     }).join('')
@@ -100,6 +125,11 @@ export function buildRefertoHtml(state, now = new Date()) {
     .punto-h { background: #d0e8ff; color: #003a6e; }
     .punto-g { background: #ffddc0; color: #6e2700; }
 
+    .eventi-set { padding: 8px 10px; border-bottom: 1px solid #eee; }
+    .eventi-label { font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 5px; }
+    .eventi-lista { list-style: none; }
+    .evento { font-size: 12px; padding: 2px 0; }
+
     .form-inizio { padding: 8px 10px; border-bottom: 1px solid #eee; background: #fafafa; }
     .form-inizio-label { font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 7px; }
     .form-row { display: flex; gap: 40px; }