test(e2e): aggiungi flusso end-to-end del time out

Copre il percorso completo controller -> display: apertura modal,
vincolo squadra su Avvia, avvio con "nessun video" (deterministico,
non dipende dal contenuto di spot/), overlay e banner con countdown,
chiusura anticipata e annullamento della modal.

.claude/settings.json

@@ -0,0 +1,7 @@
+{
+  "enabledPlugins": {
+    "claude-md-management@claude-plugins-official": true,
+    "code-simplifier@claude-plugins-official": true,
+    "frontend-design@claude-plugins-official": true
+  }
+}

.gitignore

@@ -15,6 +15,7 @@ dist
 dist-ssr
 dev-dist
 .segnapunti
+spot
 *.local
 
 # Editor directories and files

CLAUDE.md

@@ -2,26 +2,28 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Project Purpose
+## Scopo del progetto
 
-**Segnapunti Anto** is a real-time volleyball scoreboard PWA. An Express/WebSocket server hosts the game state; two separate web interfaces — a **display** (public scoreboard) and a **controller** (operator panel) — stay in sync via WebSocket.
+**Segnapunti Anto** è una PWA per il segnapunti pallavolo in tempo reale. Un server Express/WebSocket gestisce lo stato di gioco; due interfacce Vue separate — **display** (tabellone pubblico) e **controller** (pannello operatore) — si sincronizzano via WebSocket.
 
-## Commands
+## Comandi
 
 ```bash
 npm run dev          # Vite dev server — display: :5173/display, controller: :5173/controller
-npm run serve        # Build + run production — display: :3000/display, controller: :3000/controller
+npm run serve        # Build + avvio produzione — display: :3000/display, controller: :3000/controller
 
-npm run test         # Vitest watch mode
+npm run test         # Vitest in modalità watch
-npm run test:all     # All Vitest suites once (unit, integration, component, stress)
+npm run test:all     # Tutte le suite Vitest in una sola esecuzione
-npm run test:unit    # Unit + integration only
+npm run test:unit    # Solo unit + integration
-npm run test:component  # Vue component tests
+npm run test:component  # Test componenti Vue (happy-dom)
-npm run test:stress  # Load tests (50+ concurrent clients)
+npm run test:stress  # Load test (50+ client concorrenti)
-npm run test:e2e     # Playwright E2E (requires servers to be running via npm run serve)
+npm run test:e2e     # Playwright E2E (richiede npm run serve attivo)
-npm run test:e2e:ui  # Playwright with interactive UI
+npm run test:e2e:ui  # Playwright con UI interattiva
 ```
 
-## Architecture
+Per eseguire un singolo file di test: `npx vitest run tests/unit/gameState.test.js`
+
+## Architettura
 
 ```
 Controller (Vue)  ──WebSocket──┐
@@ -30,33 +32,63 @@ Display (Vue)     ──WebSocket──┤── websocket-handler.js ── gam
                                │         └── persist.js ── .segnapunti/state.json
 ```
 
-All game logic lives in `src/gameState.js` as three pure functions:
+**Tutta la logica di gioco** è in `src/gameState.js` come funzioni pure esportate:
-- `createInitialState()` — returns the initial state
+- `createInitialState()` — restituisce lo stato iniziale
-- `applyAction(state, action)` — immutable reducer (deep-clones via `structuredClone`)
+- `applyAction(state, action)` — reducer immutabile (deep-clone via `structuredClone`)
-- `checkVittoria(state)` — volleyball win conditions (25-point sets with 2-point margin, 15-point final set)
+- `checkVittoria(state)` — condizioni di vittoria set (25 punti, vantaggio di 2; 15 punti nel set decisivo)
+- `punteggio` / `setVinti` / `servizio` — derivano punteggio corrente, set vinti e chi serve dalla `striscia` (lo stato NON memorizza questi valori direttamente)
 
-`src/websocket-handler.js` receives actions, validates that the sender is a registered controller (not just a display), calls `applyAction`, broadcasts the new state to all clients, then calls `onStateChange` to persist state to disk.
+Punteggio, set e servizio si ricavano sempre dalla `striscia`: al primo punto di ogni set `applyAction('incPunt')` salva in `formInizio` uno snapshot della formazione di partenza (usato dal referto); `decPunt` lo rimuove se il set torna a 0-0.
 
-`server.js` (Express) serves both interfaces on port 3000: `/display` → `dist/index.html`, `/controller` → `dist/controller.html`. Single WebSocket endpoint at `/ws`.
+`src/websocket-handler.js` riceve i messaggi WebSocket, valida che il mittente sia un `controller` (non un `display`), chiama `applyAction`, fa il broadcast del nuovo stato a tutti i client, poi invoca `onStateChange` per persistere su disco.
 
-In development, `vite-plugin-websocket.js` embeds the WebSocket server inside the Vite dev server with URL rewrite middleware for `/display` and `/controller`.
+`src/wsMixin.js` è il mixin Vue lato client: gestisce connessione/riconnessione WebSocket (backoff esponenziale) ed espone i computed `punt`/`servHome`/`set`.
 
-## Key Design Constraints
+`src/referto.js` genera il referto di gara: `buildRefertoHtml(state, now)` è una funzione pura che restituisce l'HTML (testabile), mentre `generaReferto(state)` è il wrapper che apre la finestra con `window.open` e avvia la stampa.
 
-- **All game rules on the server** — clients are pure UI; the server is the source of truth.
+`src/persist.js` carica/salva lo stato su `.segnapunti/state.json`. `src/server-utils.js` ricava gli IP di rete (`getNetworkIPs`, con sorgente iniettabile) e stampa gli URL all'avvio. `src/spot-utils.js` espone `listSpotVideos(spotDir)`, che elenca i `.mp4` (ordinati) della cartella `spot/`; ritorna `[]` se la cartella manca.
-- **Role-based WebSocket** — clients register as `display` or `controller`; only controllers may send actions.
-- **Immutable state** — `applyAction` never mutates; always returns a new state object.
-- **Single-controller intent** — the design targets one active controller and one display; no conflict resolution exists for simultaneous controllers.
-- **Persistent state** — `src/persist.js` saves state to `.segnapunti/state.json` after every action and loads it on server startup.
 
-## Test Layout
+**Time out / spot video** — le action `startTimeout` (richiede `team`, `video` opzionale) e `stopTimeout` impostano/azzerano `state.timeout`, `timeoutTeam`, `timeoutVideo` e `timeoutStartedAt`. Il timestamp `startedAt` lo aggiunge `websocket-handler.js` (non il client), così `gameState.js` resta puro e deterministico; lo stesso handler arma un timer server-side di 30 secondi che invia automaticamente `stopTimeout` (sopravvive a refresh o disconnessione del controller). Sul controller il pulsante Time Out apre una modal per scegliere la squadra e uno dei video `.mp4` della cartella `spot/` nella root (non versionata), oppure nessun video; durante il time out il pulsante mostra il countdown e ripremerlo chiude in anticipo. Il display copre il tabellone con un overlay a tutto schermo con countdown: riproduce il video scelto (riallineandosi al punto giusto in caso di riconnessione a metà time out) e ripiega sulla scritta "TIME OUT <squadra>" se non c'è video o se il video finisce prima dei 30 secondi, con dissolvenza nell'ultimo secondo. La lista è esposta dall'endpoint HTTP `/spot/list` (JSON) e i file sono serviti staticamente da `/spot/<file>.mp4`, sia in produzione (`server.js`) sia in sviluppo (`vite-plugin-websocket.js`). I video partono con audio; se il browser blocca l'autoplay con suono si ripiega automaticamente su muto — per avere l'audio reale il browser del display (schermo senza input) va avviato in kiosk con autoplay consentito (es. Chrome `--autoplay-policy=no-user-gesture-required`).
 
-| Suite | Path | Runner |
+`server.js` (Express) espone `createApp(distDir)` (solo routing, testabile) e `startServer(port)` (HTTP + WebSocket); serve entrambe le interfacce sulla porta 3000: `/display` → `dist/index.html`, `/controller` → `dist/controller.html`. Singolo endpoint WebSocket su `/ws`. L'avvio automatico parte solo se il file è eseguito come entrypoint.
-|-------|------|--------|
+
+In sviluppo, `vite-plugin-websocket.js` incorpora il server WebSocket dentro il dev server Vite con middleware di URL rewrite per `/display` e `/controller`.
+
+## Vincoli di design
+
+- **Tutta la logica sul server** — i client sono pura UI; il server è l'unica source of truth.
+- **WebSocket role-based** — i client si registrano come `display` o `controller`; solo i controller possono inviare azioni.
+- **Stato immutabile** — `applyAction` non muta mai lo stato, restituisce sempre un nuovo oggetto.
+- **Un solo controller** — il design prevede un controller e un display attivi; non esiste conflict resolution per controller simultanei.
+- **Stato persistente** — `src/persist.js` salva lo stato in `.segnapunti/state.json` dopo ogni azione e lo carica all'avvio del server.
+
+## Layout dei test
+
+| Suite | Percorso | Runner |
+|-------|----------|--------|
 | Unit | `tests/unit/` | Vitest + Node |
 | Integration | `tests/integration/` | Vitest + Node |
 | Component | `tests/component/` | Vitest + Happy-DOM |
 | Stress | `tests/stress/` | Vitest + Node |
 | E2E | `tests/e2e/` | Playwright (Chromium, Firefox, Mobile Chrome) |
 
-E2E tests run serially (`workers: 1`) to avoid WebSocket state races. Run `npm run serve` before `npm run test:e2e`.
+I test E2E girano in serie (`workers: 1`) per evitare race condition sullo stato WebSocket. Eseguire `npm run serve` prima di `npm run test:e2e`.
+
+## Deploy
+
+Il progetto si distribuisce tramite Docker. L'immagine è pubblicata sul registry Gitea self-hosted (`santantonio.sytes.net`):
+
+```bash
+docker compose up -d   # Avvia con immagine dal registry privato (porta 3000)
+```
+
+Il volume `./.segnapunti` persiste lo stato tra i riavvii del container.
+
+## Istruzioni operative
+
+- Per ogni nuova funzionalità: analizza come si inserisce nel flusso `action → applyAction → broadcast`, poi decidi se aggiungere un nuovo tipo di action o estendere uno esistente.
+- Qualsiasi modifica alle regole di gioco va fatta esclusivamente in `src/gameState.js`.
+- Qualsiasi modifica al protocollo WebSocket va fatta in `src/websocket-handler.js`.
+- Aggiungere test unit in `tests/unit/gameState.test.js` per ogni nuovo action type o regola di gioco.
+- Il codice deve essere scritto in italiano per commenti e nomi di variabili di dominio (es. `servHome`, `striscia`, `nomi`), ma in inglese per nomi tecnici standard (`state`, `action`, `handler`).
+- Non inserire emoji in codice, UI (label, testi dei bottoni, banner) o commenti, a meno che l'utente non le richieda esplicitamente.

Dockerfile

@@ -15,7 +15,7 @@ COPY package*.json ./
 RUN npm ci --omit=dev
 
 COPY server.js ./
-COPY src/gameState.js src/websocket-handler.js src/server-utils.js src/persist.js ./src/
+COPY src/gameState.js src/websocket-handler.js src/server-utils.js src/persist.js src/spot-utils.js ./src/
 COPY --from=builder /app/dist ./dist
 
 EXPOSE 3000

README.md

@@ -14,7 +14,6 @@ Segnapunti digitale in tempo reale per partite di pallavolo. Un server centrale
 - [Architettura](#architettura)
 - [Guida utente](#guida-utente)
 - [Funzionalità](#funzionalità)
-- [Shortcuts tastiera](#shortcuts-tastiera)
 - [Deploy con Docker](#deploy-con-docker)
 - [Sviluppo](#sviluppo)
 - [Test](#test)
@@ -82,55 +81,91 @@ http://<IP-del-server>:3000/controller
 
 ## Funzionalità
 
-### Display
+Il sistema è composto da due interfacce complementari: il **display** è in sola lettura e mostra al pubblico lo stato della partita; il **controller** è il pannello operatore da cui parte ogni azione. Tutto ciò che l'operatore tocca sul controller si riflette istantaneamente sul display via WebSocket.
 
-- Nomi squadre con indicatore di servizio
+### Display (tabellone pubblico)
-- Punteggio del set corrente (grande, leggibile da lontano)
-- Contatore set vinti
-- Striscia storica punti del set in corso, scorrevole verso destra
-- Modalità formazioni: posizioni dei 6 giocatori in campo
-- Indicatore connessione WebSocket (scompare quando connesso, rosso lampeggiante se disconnesso)
 
-### Controller
+Pagina di sola visualizzazione, pensata per uno schermo grande o un proiettore. Mostra:
 
-- **Punti** — `+1` per casa e ospite, con annullamento dell'ultimo punto
+- **Nomi squadre** con **indicatore di servizio** (l'icona della palla compare accanto alla squadra che sta servendo).
-- **Dialog set vinto** — appare automaticamente al raggiungimento dei 25 punti (o 15 nel tie-break); permette di confermare il set o annullare l'ultimo punto
+- **Punteggio del set corrente** in caratteri molto grandi, leggibili da lontano.
-- **Formazioni** — configura i numeri di maglia; la rotazione avviene automaticamente al cambio palla
+- **Contatore dei set vinti** per ciascuna squadra.
-- **Cambi** — dialog `IN → OUT` con validazione
+- **Striscia storica dei punti** del set in corso: una sequenza scorrevole che ricostruisce l'andamento punto su punto.
-- **Servizio** — cambio manuale (disponibile solo a 0-0)
+- **Modalità formazioni**: in alternativa al punteggio, mostra le posizioni dei 6 giocatori in campo (numeri di maglia disposti come a referto).
-- **Visualizzazione** — alterna tra punteggio grande e formazioni in campo
+- **Ordine di visualizzazione invertibile**: le due squadre possono essere scambiate di lato per rispecchiare l'orientamento reale del campo.
-- **Striscia** — mostra/nasconde lo storico punti sul display
+- **Overlay time out / spot**: durante un time out copre il tabellone con un countdown e il video scelto dall'operatore, o con la scritta *TIME OUT* (vedi sotto).
-- **Reset** — azzera la partita (richiede conferma)
+- **Annuncio vocale del punteggio** (sintesi vocale del browser), comandato dal controller.
+- **Indicatore di connessione**: scompare quando tutto è connesso, diventa un punto rosso lampeggiante con scritta *Disconnesso* in caso di problemi.
+- **Fullscreen automatico** all'apertura sui dispositivi mobili.
+
+### Controller (pannello operatore)
+
+Il controller adatta automaticamente il proprio layout all'orientamento del dispositivo:
+
+- **Verticale (smartphone)** — layout compatto: anteprima punteggio toccabile in alto e griglia di pulsanti sotto.
+- **Orizzontale (tablet)** — layout esteso "da regia": due grandi pannelli squadra affiancati con punteggio, campo e tasto set, più una barra di azioni in basso.
+
+#### Gestione del punteggio
+
+- **Punto** — tocca il punteggio/la card di una squadra per assegnarle `+1`. Il sistema gestisce automaticamente il **cambio palla** e la **rotazione** della squadra che riconquista il servizio.
+- **Annulla punto** — rimuove l'ultimo punto assegnato, ripristinando anche eventuale rotazione e servizio.
+- **Tasti SET** — incrementano manualmente il contatore dei set vinti di una squadra (utile per correzioni); il contatore cicla da 0.
+- **Dialog automatico SET VINTO / PARTITA FINITA** — compare da solo al raggiungimento delle condizioni di vittoria (25 punti, o 15 nel set decisivo, con 2 di scarto). Da qui puoi:
+  - **VAI AL SET SUCCESSIVO** — chiude il set, lo registra come vinto e prepara il set successivo aprendo la configurazione delle formazioni;
+  - **INDIETRO** — annulla l'ultimo punto se il dialog è comparso per errore;
+  - a partita conclusa, **REFERTO** per generare il referto e **CHIUDI** per tornare al tabellone.
+
+#### Configurazione partita
+
+Dal pulsante **Config** si apre una finestra che permette di impostare:
+
+- **Nomi delle squadre** (Home e Guest);
+- **Modalità partita**: `2/3` (al meglio dei 3 set), `3/5` (al meglio dei 5 set) o `Amichevole` (senza vittoria automatica della partita);
+- **Formazioni iniziali**: i numeri di maglia dei 6 giocatori in campo per ciascuna squadra, disposti per zona.
+
+#### Cambi giocatore
+
+Il pulsante **Cambi** apre, dopo aver scelto la squadra, un dialog con righe `IN → OUT`. Le sostituzioni vengono **validate** prima di essere applicate: i numeri devono essere cifre, il giocatore entrante non può essere già in campo, quello uscente deve essere effettivamente in formazione, e nessuno può sostituire sé stesso. Eventuali errori sono segnalati in chiaro.
+
+#### Servizio e visualizzazione
+
+- **Cambio Palla** — assegna manualmente il servizio; disponibile **solo a 0-0** (a inizio set).
+- **Inverti** — scambia il lato delle due squadre sul display.
+- **Formazioni / Punteggio** — alterna sul display la vista formazioni in campo e la vista punteggio.
+- **Striscia ON/OFF** — mostra o nasconde lo storico punti del set sul display.
+- **Voce** — fa annunciare al display il punteggio corrente con la sintesi vocale (es. *"15 a 12"*, *"15 pari"*, *"zero a zero"*).
+
+#### Time Out e spot pubblicitari
+
+Il pulsante **Time Out** apre una finestra in cui l'operatore sceglie **quale squadra** ha chiamato il time out (obbligatorio) e **quale video** proiettare sul display, scegliendo tra i file della cartella `spot/` oppure *nessun video* (overlay con la scritta *TIME OUT*). Alla conferma:
+
+- il **display** copre il tabellone con un overlay a tutto schermo: countdown in sovraimpressione e video scelto; se non c'è video, o se il video finisce prima del tempo, compare la scritta *TIME OUT* con il nome della squadra. Nell'ultimo secondo il video sfuma in dissolvenza.
+- il **controller** resta pienamente operativo: compare un banner *TIME OUT <squadra>* con il conto alla rovescia e il pulsante Time Out mostra i secondi rimanenti. Ripremendolo si chiude il time out in anticipo.
+- il **server** chiude automaticamente il time out dopo **30 secondi**, anche se il controller si disconnette o va in standby.
+
+I video da proiettare vanno messi in una cartella **`spot/`** nella root del progetto (non versionata): vengono elencati nella finestra di scelta in ordine alfabetico (solo file `.mp4`). Se un display si riconnette a metà time out, il video riparte dal punto corretto.
+
+> **Audio:** i video partono con audio, ma il display è in genere uno schermo senza tastiera/mouse e i browser bloccano l'autoplay con suono senza un'interazione dell'utente. In assenza di configurazione il video parte automaticamente **muto** (il video si vede comunque). Per avere l'audio, avvia il browser del display in modalità kiosk consentendo l'autoplay con suono (es. Chrome con `--autoplay-policy=no-user-gesture-required`, oppure impostando un'eccezione del sito per audio/video).
+
+#### Reset e referto
+
+- **Reset** — azzera la partita (punteggi, set e formazioni) previa conferma, e riapre subito la configurazione per impostare la partita successiva.
+- **Referto** — a fine partita, dal dialog *PARTITA FINITA*, genera un referto di gara stampabile/PDF con i punteggi per set, le formazioni di partenza e l'andamento punto-punto. *Funzione prototipale.*
 
 ### Regole pallavolo integrate
 
+Le condizioni di vittoria del set sono applicate automaticamente dal server (è quello che fa comparire il dialog *SET VINTO*):
+
 | Set | Condizione di vittoria |
 |---|---|
 | Set 1–4 (modalità 3/5) o 1–2 (modalità 2/3) | Primo a **25** con almeno 2 punti di scarto |
 | Set decisivo (tie-break) | Primo a **15** con almeno 2 punti di scarto |
 
----
+La **partita** è vinta da chi raggiunge 3 set su 5 (modalità `3/5`) o 2 set su 3 (modalità `2/3`). In modalità **Amichevole** non c'è vittoria automatica della partita: si continua a giocare set senza che compaia *PARTITA FINITA*.
-
-## Shortcuts tastiera
-
-> Valide sul controller da browser desktop.
-
-| Tasto | Azione |
-|---|---|
-| `Ctrl + ↑` | Punto casa |
-| `Ctrl + ↓` | Annulla ultimo punto |
-| `Shift + ↑` | Punto ospite |
-| `Ctrl + ←` | Cambia servizio (solo a 0-0) |
-| `Ctrl + M` | Apri configurazione |
-| `Ctrl + C` | Cambi squadra casa |
-| `Shift + C` | Cambi squadra ospite |
-| `Ctrl + Z` | Toggle punteggio / formazioni |
-| `Ctrl + S` | Annuncio vocale punteggio |
-| `Ctrl + B` | Mostra/nascondi barra pulsanti |
-| `Ctrl + F` | Fullscreen |
 
 ---
 
+
 ## Deploy con Docker
 
 ### Prima installazione
@@ -139,7 +174,9 @@ http://<IP-del-server>:3000/controller
 docker compose up -d
 ```
 
-Lo stato viene salvato nel volume Docker `segnapunti-state` e sopravvive ai riavvii del container.
+Lo stato viene salvato nella cartella `./.segnapunti` montata come volume nel container e sopravvive ai riavvii.
+
+> **Video spot in Docker:** la cartella `spot/` non è inclusa nell'immagine. Per usare i video del time out aggiungi un volume in `docker-compose.yml`: `./spot:/app/spot`.
 
 ### Aggiornamento a nuova versione
 
@@ -201,8 +238,13 @@ Lo stato viene salvato in `.segnapunti/state.json` anche in modalità dev.
 | `npm run test:component` | Componenti Vue (Happy-DOM) |
 | `npm run test:stress` | Load test WebSocket (50+ client) |
 | `npm run test:all` | Tutti i test tranne E2E |
+| `npm run test:ui` | Vitest con interfaccia grafica |
 | `npm run test:e2e` | Playwright — Chromium, Firefox, Mobile Chrome |
 
+Le suite Vitest coprono la logica di gioco (`gameState`, inclusa `formInizio`),
+il protocollo e il routing del server, la persistenza, il client WebSocket
+(`wsMixin`), i componenti Vue e la generazione del referto.
+
 > I test E2E richiedono il server in esecuzione (`npm run serve`) e i browser Playwright installati:
 > ```bash
 > npx playwright install chromium firefox

dev-dist/registerSW.js

@@ -1 +0,0 @@
-if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })

dev-dist/sw.js

@@ -1,92 +0,0 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  let registry = {};
-
-  // Used for `eval` and `importScripts` where we can't get script URL by other means.
-  // In both cases, it's safe to use a global var because those functions are synchronous.
-  let nextDefineUri;
-
-  const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
-        let promise = registry[uri];
-        if (!promise) {
-          throw new Error(`Module ${uri} didn’t register its module`);
-        }
-        return promise;
-      })
-    );
-  };
-
-  self.define = (depsNames, factory) => {
-    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
-    if (registry[uri]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
-    const specialDeps = {
-      module: { uri },
-      exports,
-      require
-    };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
-      factory(...deps);
-      return exports;
-    });
-  };
-}
-define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
-
-  self.skipWaiting();
-  workbox.clientsClaim();
-
-  /**
-   * The precacheAndRoute() method efficiently caches and responds to
-   * requests for URLs in the manifest.
-   * See https://goo.gl/S9QRab
-   */
-  workbox.precacheAndRoute([{
-    "url": "registerSW.js",
-    "revision": "3ca0b8505b4bec776b69afdba2768812"
-  }, {
-    "revision": null,
-    "url": "index.html"
-  }], {});
-  workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
-    allowlist: [/^\/$/]
-  }));
-
-}));

docker-compose.yml

@@ -1,12 +1,9 @@
 services:
   segnapunti:
-    image: santantonio.sytes.net/attilio/segnapunti:1.0.0
+    image: santantonio.sytes.net/attilio/segnapunti:2.0.0
     container_name: segnapunti
     ports:
       - "3000:3000"
     volumes:
-      - segnapunti-state:/app/.segnapunti
+      - ./.segnapunti:/app/.segnapunti
     restart: unless-stopped
-
-volumes:
-  segnapunti-state:

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "segnapuntianto",
-  "version": "0.0.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "segnapuntianto",
-      "version": "0.0.0",
+      "version": "2.0.0",
       "dependencies": {
         "express": "^5.2.1",
         "vue": "^3.2.47",

package.json

@@ -4,7 +4,7 @@
   "version": "2.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "serve": "vite build && node server.js",
     "test": "vitest",

server.js

@@ -1,45 +1,69 @@
 import { createServer } from 'http'
 import express from 'express'
 import { WebSocketServer } from 'ws'
-import { fileURLToPath } from 'url'
+import { fileURLToPath, pathToFileURL } from 'url'
 import { dirname, join } from 'path'
 import { setupWebSocketHandler } from './src/websocket-handler.js'
 import { printServerInfo } from './src/server-utils.js'
 import { loadState, saveState } from './src/persist.js'
+import { listSpotVideos } from './src/spot-utils.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-const PORT = process.env.PORT || 3000
+const DIST_DIR = join(__dirname, 'dist')
-const distDir = join(__dirname, 'dist')
+const SPOT_DIR = join(__dirname, 'spot')
 
-const app = express()
+// Crea l'app Express (asset statici + route display/controller) senza avviare il
+// listen né il WebSocket: così il routing è testabile in isolamento.
+export function createApp(distDir = DIST_DIR, spotDir = SPOT_DIR) {
+    const app = express()
 
-app.use(express.static(distDir, { index: false }))
+    app.use(express.static(distDir, { index: false }))
 
-app.get(['/', '/display', '/display/*splat'], (_req, res) => {
+    // Video spot del time out: elenco JSON + file statici (range requests gestiti
-    res.sendFile(join(distDir, 'index.html'))
+    // da express.static, così il seeking dei video funziona). La route /spot/list
-})
+    // va prima dello static per non collidere con un eventuale file "list".
+    app.get('/spot/list', (_req, res) => res.json(listSpotVideos(spotDir)))
+    app.use('/spot', express.static(spotDir))
 
-app.get(['/controller', '/controller/*splat'], (_req, res) => {
+    app.get(['/', '/display', '/display/*splat'], (_req, res) => {
-    res.sendFile(join(distDir, 'controller.html'))
+        res.sendFile(join(distDir, 'index.html'))
-})
+    })
 
-const server = createServer(app)
+    app.get(['/controller', '/controller/*splat'], (_req, res) => {
-const wss = new WebSocketServer({ noServer: true })
+        res.sendFile(join(distDir, 'controller.html'))
-setupWebSocketHandler(wss, { initialState: loadState(), onStateChange: saveState })
+    })
 
-server.on('upgrade', (request, socket, head) => {
+    return app
-    const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
+}
-    if (pathname === '/ws') {
-        wss.handleUpgrade(request, socket, head, (ws) => {
-            wss.emit('connection', ws, request)
-        })
-    } else {
-        socket.destroy()
-    }
-})
 
-server.listen(PORT, '0.0.0.0', () => {
+// Avvia HTTP + WebSocket. Lo stato viene caricato da disco e ripersistito ad ogni azione.
-    printServerInfo(PORT)
+export function startServer(port = process.env.PORT || 3000) {
-})
+    const app = createApp()
+    const server = createServer(app)
+    const wss = new WebSocketServer({ noServer: true })
+    setupWebSocketHandler(wss, { initialState: loadState(), onStateChange: saveState })
+
+    server.on('upgrade', (request, socket, head) => {
+        const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
+        if (pathname === '/ws') {
+            wss.handleUpgrade(request, socket, head, (ws) => {
+                wss.emit('connection', ws, request)
+            })
+        } else {
+            socket.destroy()
+        }
+    })
+
+    server.listen(port, '0.0.0.0', () => {
+        printServerInfo(port)
+    })
+
+    return server
+}
+
+// Avvia solo se eseguito direttamente (`node server.js`), non quando importato nei test.
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+    startServer()
+}

src/components/DisplayPage.vue

@@ -7,22 +7,22 @@
           <span :style="{ 'float': 'left' }">
             {{ state.sp.nomi.home }}
             <span class="serv-slot">
-              <img v-show="state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
             </span>
-            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.home }}</span>
+            <span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
           </span>
-          <span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.set.home }}</span>
+          <span class="mr3" :style="{ 'float': 'right' }">set {{ set.home }}</span>
         </div>
 
         <div class="hea guest">
           <span :style="{ 'float': 'right' }">
-            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.guest }}</span>
+            <span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
             <span class="serv-slot">
-              <img v-show="!state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
             </span>
             {{ state.sp.nomi.guest }}
           </span>
-          <span class="ml3" :style="{ 'float': 'left' }">set {{ state.sp.set.guest }}</span>
+          <span class="ml3" :style="{ 'float': 'left' }">set {{ set.guest }}</span>
         </div>
 
         <span v-if="state.visuForm">
@@ -39,8 +39,8 @@
         </span>
         <span v-else>
           <div class="punteggio-container">
-            <div class="col punt home">{{ state.sp.punt.home }}</div>
+            <div class="col punt home">{{ punt.home }}</div>
-            <div class="col punt guest">{{ state.sp.punt.guest }}</div>
+            <div class="col punt guest">{{ punt.guest }}</div>
           </div>
         </span>
       </span>
@@ -51,22 +51,22 @@
           <span :style="{ 'float': 'left' }">
             {{ state.sp.nomi.guest }}
             <span class="serv-slot">
-              <img v-show="!state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
             </span>
-            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.guest }}</span>
+            <span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
           </span>
-          <span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.set.guest }}</span>
+          <span class="mr3" :style="{ 'float': 'right' }">set {{ set.guest }}</span>
         </div>
 
         <div class="hea home">
           <span :style="{ 'float': 'right' }">
-            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.home }}</span>
+            <span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
             <span class="serv-slot">
-              <img v-show="state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
             </span>
             {{ state.sp.nomi.home }}
           </span>
-          <span class="ml3" :style="{ 'float': 'left' }">set {{ state.sp.set.home }}</span>
+          <span class="ml3" :style="{ 'float': 'left' }">set {{ set.home }}</span>
         </div>
 
         <span v-if="state.visuForm">
@@ -83,8 +83,8 @@
         </span>
         <span v-else>
           <div class="punteggio-container">
-            <div class="col punt guest">{{ state.sp.punt.guest }}</div>
+            <div class="col punt guest">{{ punt.guest }}</div>
-            <div class="col punt home">{{ state.sp.punt.home }}</div>
+            <div class="col punt home">{{ punt.home }}</div>
           </div>
         </span>
       </span>
@@ -112,93 +112,66 @@
         {{ wsConnected ? '' : 'Disconnesso' }}
       </div>
     </div>
+
+    <!-- Overlay time out: proietta il video spot a tutto schermo -->
+    <div v-if="state.timeout" class="timeout-overlay">
+      <div class="timeout-countdown">{{ timeoutCountdown }}</div>
+      <video v-if="state.timeoutVideo && !mostraPlaceholder" ref="spotVideo" class="timeout-video"
+        :class="{ 'timeout-video--fading': timeoutFading }" playsinline></video>
+      <div v-else class="timeout-placeholder">
+        TIME OUT<br />{{ state.sp.nomi[state.timeoutTeam] }}
+      </div>
+    </div>
   </section>
 </template>
 
 <script>
+import { createWsMixin } from '../wsMixin.js'
+
 export default {
   name: "DisplayPage",
+  mixins: [createWsMixin('display')],
   data() {
     return {
-      ws: null,
+      mostraPlaceholder: false, // video terminato prima dei 30s: mostra l'immagine "TIME OUT"
-      wsConnected: false,
+      spotVideoDuration: null,  // durata reale del video in riproduzione, nota dopo il loadedmetadata
-      isConnecting: false,
+      nowTick: Date.now(),
-      reconnectTimeout: null,
+      timeoutTicker: null,
-      reconnectAttempts: 0,
-      maxReconnectDelay: 30000, // Ritardo massimo di riconnessione: 30 secondi
-      state: {
-        order: true,
-        visuForm: false,
-        visuStriscia: true,
-        modalitaPartita: "3/5",
-        sp: {
-          striscia: [{ serv: 'home', r: [] }],
-          servHome: true,
-          punt: { home: 0, guest: 0 },
-          set: { home: 0, guest: 0 },
-          nomi: { home: "Antoniana", guest: "Guest" },
-          form: {
-            home: ["1", "2", "3", "4", "5", "6"],
-            guest: ["1", "2", "3", "4", "5", "6"],
-          },
-        },
-      },
     }
   },
   mounted() {
-    this.connectWebSocket()
-    // Attiva la modalita fullscreen su dispositivi mobili.
     if (this.isMobile()) {
       try { document.documentElement.requestFullscreen() } catch (e) {}
     }
-
+    if (this.state.timeout) this.avviaTimeout()
-    // Gestisce l'HMR di Vite evitando riconnessioni durante la ricarica a caldo.
-    if (import.meta.hot) {
-      import.meta.hot.on('vite:beforeUpdate', () => {
-        // Annulla eventuali tentativi di riconnessione pianificati.
-        if (this.reconnectTimeout) {
-          clearTimeout(this.reconnectTimeout)
-          this.reconnectTimeout = null
-        }
-      })
-    }
   },
   beforeUnmount() {
-    // Pulisce il timeout di riconnessione.
+    this.fermaTimeoutTicker()
-    if (this.reconnectTimeout) {
-      clearTimeout(this.reconnectTimeout)
-      this.reconnectTimeout = null
-    }
-
-    // Chiude il WebSocket con il codice di chiusura appropriato.
-    if (this.ws) {
-      this.ws.onclose = null // Rimuove il listener per evitare nuove riconnessioni pianificate.
-      this.ws.onerror = null
-      this.ws.onmessage = null
-      this.ws.onopen = null
-
-      // Usa il codice 1000 (chiusura normale) se la connessione e aperta.
-      try {
-        if (this.ws.readyState === WebSocket.OPEN) {
-          this.ws.close(1000, 'Component unmounting')
-        } else if (this.ws.readyState === WebSocket.CONNECTING) {
-          // Se la connessione e ancora in fase di apertura, chiude direttamente.
-          this.ws.close()
-        }
-      } catch (err) {
-        console.error('[Display] Error closing WebSocket:', err)
-      }
-      this.ws = null
-    }
   },
   computed: {
+    timeoutRemaining() {
+      if (!this.state.timeout || !this.state.timeoutStartedAt) return 30
+      const trascorsi = (this.nowTick - this.state.timeoutStartedAt) / 1000
+      return Math.max(0, Math.ceil(30 - trascorsi))
+    },
+    timeoutCountdown() {
+      const r = this.timeoutRemaining
+      const m = String(Math.floor(r / 60)).padStart(2, '0')
+      const s = String(r % 60).padStart(2, '0')
+      return `${m}:${s}`
+    },
+    timeoutFading() {
+      // Video più lungo di 30s: dissolvenza negli ultimi istanti prima dello stop del server.
+      if (!this.spotVideoDuration || this.spotVideoDuration <= 30) return false
+      return this.timeoutRemaining <= 1
+    },
     stricciaStrip() {
       const currentSet = this.state.sp.striscia.at(-1)
       if (!currentSet) return { home: [], guest: [] }
       let h = 0, g = 0
       const home = [], guest = []
-      for (const scorer of currentSet.r) {
+      for (const scorer of currentSet.ris) {
-        if (scorer === 'home') { h++; home.push(h); guest.push(' ') }
+        if (scorer === 'h') { h++; home.push(h); guest.push(' ') }
         else               { g++; guest.push(g); home.push(' ') }
       }
       return { home, guest }
@@ -214,156 +187,79 @@ export default {
         })
       }
     },
+    'state.timeout': {
+      handler(attivo) {
+        attivo ? this.avviaTimeout() : this.fermaTimeout()
+      },
+    },
   },
   methods: {
+    avviaTimeoutTicker() {
+      this.fermaTimeoutTicker()
+      this.nowTick = Date.now()
+      this.timeoutTicker = setInterval(() => { this.nowTick = Date.now() }, 200)
+    },
+    fermaTimeoutTicker() {
+      if (this.timeoutTicker) { clearInterval(this.timeoutTicker); this.timeoutTicker = null }
+    },
+    async avviaTimeout() {
+      this.mostraPlaceholder = !this.state.timeoutVideo
+      this.spotVideoDuration = null
+      this.avviaTimeoutTicker()
+      if (!this.state.timeoutVideo) return
+      await this.$nextTick()
+      this.caricaSpotCorrente()
+    },
+    fermaTimeout() {
+      this.fermaTimeoutTicker()
+      const video = this.$refs.spotVideo
+      if (video) { video.pause(); video.removeAttribute('src'); video.load() }
+      this.mostraPlaceholder = false
+      this.spotVideoDuration = null
+    },
+    caricaSpotCorrente() {
+      const video = this.$refs.spotVideo
+      if (!video || !this.state.timeoutVideo) return
+      video.src = '/spot/' + encodeURIComponent(this.state.timeoutVideo)
+      video.onloadedmetadata = () => {
+        this.spotVideoDuration = video.duration
+        // Riconnessione a metà time out: riallinea il video al punto corretto.
+        const trascorsi = this.state.timeoutStartedAt ? (Date.now() - this.state.timeoutStartedAt) / 1000 : 0
+        if (trascorsi > 0.5 && trascorsi < video.duration) video.currentTime = trascorsi
+      }
+      // Video più corto dei 30s: a fine riproduzione mostra l'immagine "TIME OUT" fino allo stop del server.
+      video.onended = () => { this.mostraPlaceholder = true }
+      this.playSpot()
+    },
+    playSpot() {
+      const video = this.$refs.spotVideo
+      if (!video) return
+      // Prova con audio; se il browser blocca l'autoplay con suono, ripiega su muto.
+      video.muted = false
+      const p = video.play()
+      if (p && typeof p.catch === 'function') {
+        p.catch(() => { video.muted = true; video.play().catch(() => {}) })
+      }
+    },
+    onWsMessage(msg) {
+      if (msg.type === 'speak') this.speakOnDisplay(msg.text)
+      else if (msg.type === 'error') console.error('[Display] Server error:', msg.message)
+    },
     isMobile() {
       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
     },
-    connectWebSocket() {
-      // Evita connessioni simultanee multiple.
-      if (this.isConnecting) {
-        console.log('[Display] Already connecting, skipping...')
-        return
-      }
-
-      // Chiude la connessione precedente, se presente.
-      if (this.ws) {
-        this.ws.onclose = null
-        this.ws.onerror = null
-        this.ws.onmessage = null
-        this.ws.onopen = null
-        try {
-          if (this.ws.readyState === WebSocket.OPEN) {
-            this.ws.close(1000, 'Reconnecting')
-          } else if (this.ws.readyState === WebSocket.CONNECTING) {
-            this.ws.close()
-          }
-        } catch (err) {
-          console.error('[Display] Error closing previous WebSocket:', err)
-        }
-        this.ws = null
-      }
-
-      this.isConnecting = true
-      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
-
-      // Permette di specificare un host WebSocket alternativo via query parameter
-      // Utile per scenari WSL2 o development remoto: ?wsHost=192.168.1.100:5173
-      const params = new URLSearchParams(location.search)
-      const defaultHost = (
-        location.hostname === 'localhost' || location.hostname === '::1'
-      )
-        ? `127.0.0.1${location.port ? `:${location.port}` : ''}`
-        : location.host
-      const wsHost = params.get('wsHost') || defaultHost
-      const wsUrl = `${protocol}//${wsHost}/ws`
-
-      console.log('[Display] Connecting to WebSocket:', wsUrl)
-
-      try {
-        this.ws = new WebSocket(wsUrl)
-      } catch (err) {
-        console.error('[Display] Failed to create WebSocket:', err)
-        this.isConnecting = false
-        this.scheduleReconnect()
-        return
-      }
-
-      this.ws.onopen = () => {
-        this.isConnecting = false
-        this.wsConnected = true
-        this.reconnectAttempts = 0
-        console.log('[Display] Connected to server')
-
-        // Registra il client come display solo con connessione effettivamente aperta.
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-          try {
-            this.ws.send(JSON.stringify({ type: 'register', role: 'display' }))
-          } catch (err) {
-            console.error('[Display] Failed to register:', err)
-          }
-        }
-      }
-
-      this.ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data)
-
-          if (msg.type === 'state') {
-            this.state = msg.state
-          } else if (msg.type === 'speak') {
-            this.speakOnDisplay(msg.text)
-          } else if (msg.type === 'error') {
-            console.error('[Display] Server error:', msg.message)
-          }
-        } catch (e) {
-          console.error('[Display] Error parsing message:', e)
-        }
-      }
-
-      this.ws.onclose = (event) => {
-        this.isConnecting = false
-        this.wsConnected = false
-        console.log('[Display] Disconnected from server', event.code, event.reason)
-
-        // Non riconnette durante HMR (codice 1001, "going away")
-        // ne in caso di chiusura pulita (codice 1000).
-        if (event.code === 1000 || event.code === 1001) {
-          console.log('[Display] Clean close, not reconnecting')
-          return
-        }
-
-        this.scheduleReconnect()
-      }
-
-      this.ws.onerror = (err) => {
-        console.error('[Display] WebSocket error:', err)
-        this.isConnecting = false
-        this.wsConnected = false
-      }
-    },
-    scheduleReconnect() {
-      // Evita pianificazioni multiple della riconnessione.
-      if (this.reconnectTimeout) {
-        return
-      }
-
-      // Applica backoff esponenziale: 1s, 2s, 4s, 8s, 16s, fino a 30s.
-      const delay = Math.min(
-        1000 * Math.pow(2, this.reconnectAttempts),
-        this.maxReconnectDelay
-      )
-      this.reconnectAttempts++
-
-      console.log(`[Display] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
-
-      this.reconnectTimeout = setTimeout(() => {
-        this.reconnectTimeout = null
-        this.connectWebSocket()
-      }, delay)
-    },
     speakOnDisplay(text) {
-      if (typeof text !== 'string' || !text.trim()) {
+      if (typeof text !== 'string' || !text.trim() || !('speechSynthesis' in window)) return
-        return
-      }
-      if (!('speechSynthesis' in window)) {
-        console.warn('[Display] speechSynthesis not supported')
-        return
-      }
-
       const utterance = new SpeechSynthesisUtterance(text.trim())
       const voices = window.speechSynthesis.getVoices()
-      const preferredVoice = voices.find((v) => v.name === 'Google italiano')
+      utterance.voice = voices.find(v => v.name === 'Google italiano')
-        || voices.find((v) => v.lang && v.lang.toLowerCase().startsWith('it'))
+        || voices.find(v => v.lang?.toLowerCase().startsWith('it'))
-      if (preferredVoice) {
+        || null
-        utterance.voice = preferredVoice
-      }
       utterance.lang = 'it-IT'
-
       window.speechSynthesis.cancel()
       window.speechSynthesis.speak(utterance)
-    }
+    },
-  }
+  },
 }
 </script>
 
@@ -371,7 +267,8 @@ export default {
 .display-page {
   width: 100%;
   height: 100vh;
-  background: #000;
+  background: #111;
+  font-family: 'Inter', system-ui, sans-serif;
   overflow: hidden;
 }
 
@@ -394,7 +291,7 @@ export default {
 }
 
 .connection-status.disconnected {
-  background: rgba(255, 50, 50, 0.8);
+  background: #c62828;
   color: white;
   opacity: 1;
 }
@@ -407,11 +304,11 @@ export default {
 }
 
 .connected .dot {
-  background: #4caf50;
+  background: #2e7d32;
 }
 
 .disconnected .dot {
-  background: #f44336;
+  background: #ff6b6b;
   animation: blink 1s infinite;
 }
 
@@ -431,6 +328,8 @@ export default {
 
 .punt {
   font-size: 60vh;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
   flex: 1;
   display: flex;
   justify-content: center;
@@ -441,4 +340,57 @@ export default {
   overflow: hidden;
   box-sizing: border-box;
 }
+
+.timeout-overlay {
+  position: fixed;
+  inset: 0;
+  background: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
+}
+
+.timeout-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: opacity 0.8s ease-out;
+}
+
+.timeout-video--fading {
+  opacity: 0;
+}
+
+.timeout-countdown {
+  position: absolute;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  font-size: 4vh;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.05em;
+  padding: 6px 18px;
+  border-radius: 12px;
+  z-index: 501;
+}
+
+.timeout-placeholder {
+  color: #ff9800;
+  font-size: 14vh;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  text-align: center;
+  line-height: 1.3;
+  animation: timeout-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes timeout-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
 </style>

src/gameState.js

@@ -1,14 +1,33 @@
+export function punteggio(striscia) {
+    let home = 0, guest = 0
+    for (const c of striscia.at(-1).ris) c === 'h' ? home++ : guest++
+    return { home, guest }
+}
+
+export function servizio(striscia) {
+    const set = striscia.at(-1)
+    return set.ris.length === 0 ? set.serv === 'h' : set.ris.at(-1) === 'h'
+}
+
+export function setVinti(striscia) {
+    return {
+        home:  striscia.filter(s => s.vinc === 'h').length,
+        guest: striscia.filter(s => s.vinc === 'g').length,
+    }
+}
+
 export function createInitialState() {
     return {
         order: true,
         visuForm: false,
         visuStriscia: true,
+        timeout: false,
+        timeoutTeam: null,
+        timeoutVideo: null,
+        timeoutStartedAt: null,
         modalitaPartita: "3/5",
         sp: {
-            striscia: [{ serv: 'home', r: [] }],
+            striscia: [{ serv: 'h', ris: '', vinc: null }],
-            servHome: true,
-            punt: { home: 0, guest: 0 },
-            set: { home: 0, guest: 0 },
             nomi: { home: "Antoniana", guest: "Guest" },
             form: {
                 home: ["1", "2", "3", "4", "5", "6"],
@@ -19,12 +38,9 @@ export function createInitialState() {
 }
 
 export function checkVittoria(state) {
-    const puntHome = state.sp.punt.home
+    const { home: puntHome, guest: puntGuest } = punteggio(state.sp.striscia)
-    const puntGuest = state.sp.punt.guest
+    const sv = setVinti(state.sp.striscia)
-    const setHome = state.sp.set.home
+    const totSet = sv.home + sv.guest
-    const setGuest = state.sp.set.guest
-    const totSet = setHome + setGuest
-
     const isSetDecisivo = state.modalitaPartita === "2/3" ? totSet >= 2 : totSet >= 4
     const punteggioVittoria = isSetDecisivo ? 15 : 25
 
@@ -33,6 +49,13 @@ export function checkVittoria(state) {
     return false
 }
 
+export function checkVittoriaPartita(state) {
+    if (state.modalitaPartita === 'amichevole') return false
+    const setsToWin = state.modalitaPartita === "2/3" ? 2 : 3
+    const sv = setVinti(state.sp.striscia)
+    return sv.home >= setsToWin || sv.guest >= setsToWin
+}
+
 export function applyAction(state, action) {
     const s = structuredClone(state)
 
@@ -41,32 +64,38 @@ export function applyAction(state, action) {
             const team = action.team
             if (checkVittoria(s)) break
 
-            const cambioPalla = (team === "home") !== s.sp.servHome
+            const servHome = servizio(s.sp.striscia)
-            s.sp.punt[team]++
+            const cambioPalla = (team === "home") !== servHome
-            s.sp.striscia.at(-1).r.push(team)
+            const setCorrente = s.sp.striscia.at(-1)
+            if (setCorrente.ris === '') {
+                setCorrente.formInizio = {
+                    home: [...s.sp.form.home],
+                    guest: [...s.sp.form.guest],
+                }
+            }
+            s.sp.striscia.at(-1).ris += team === 'home' ? 'h' : 'g'
 
             if (cambioPalla) {
                 s.sp.form[team].push(s.sp.form[team].shift())
             }
-
-            s.sp.servHome = team === "home"
             break
         }
 
         case "decPunt": {
             const currentSet = s.sp.striscia.at(-1)
-            if (currentSet.r.length === 0) break
+            if (currentSet.ris.length === 0) break
 
-            const lastScorer = currentSet.r[currentSet.r.length - 1]
+            const lastScorerShort = currentSet.ris.at(-1)
-            const prevServer = currentSet.r.length >= 2
+            const prevServerShort = currentSet.ris.length >= 2
-                ? currentSet.r[currentSet.r.length - 2]
+                ? currentSet.ris.at(-2)
                 : currentSet.serv
 
-            const wasCambioPalla = lastScorer !== prevServer
+            const wasCambioPalla = lastScorerShort !== prevServerShort
 
-            currentSet.r.pop()
+            currentSet.ris = currentSet.ris.slice(0, -1)
-            s.sp.punt[lastScorer]--
+            if (currentSet.ris === '') delete currentSet.formInizio
-            s.sp.servHome = prevServer === 'home'
+
+            const lastScorer = lastScorerShort === 'h' ? 'home' : 'guest'
 
             if (wasCambioPalla) {
                 s.sp.form[lastScorer].unshift(s.sp.form[lastScorer].pop())
@@ -76,10 +105,17 @@ export function applyAction(state, action) {
 
         case "incSet": {
             const team = action.team
-            if (s.sp.set[team] === 2) {
+            const sv = setVinti(s.sp.striscia)
-                s.sp.set[team] = 0
+            const count = sv[team]
+            const teamShort = team === 'home' ? 'h' : 'g'
+            if (count >= 2) {
+                // cicla a 0: rimuove le voci fantasma per questo team
+                s.sp.striscia = s.sp.striscia.filter(
+                    entry => !(entry._phantom && entry.vinc === teamShort)
+                )
             } else {
-                s.sp.set[team]++
+                // inserisce una voce fantasma prima dell'ultimo set (quello in corso)
+                s.sp.striscia.splice(-1, 0, { serv: teamShort, ris: '', vinc: teamShort, _phantom: true })
             }
             break
         }
@@ -87,11 +123,10 @@ export function applyAction(state, action) {
         case "nuovoSet": {
             const team = action.team
             if (team !== 'home' && team !== 'guest') break
-            s.sp.set[team]++
+            if (checkVittoriaPartita(s)) break
-            s.sp.punt.home = 0
+            s.sp.striscia.at(-1).vinc = team === 'home' ? 'h' : 'g'
-            s.sp.punt.guest = 0
+            if (checkVittoriaPartita(s)) break
-            s.sp.servHome = team === 'home'
+            s.sp.striscia.push({ serv: team === 'home' ? 'h' : 'g', ris: '', vinc: null })
-            s.sp.striscia.push({ serv: team, r: [] })
             s.sp.form = {
                 home: ["1", "2", "3", "4", "5", "6"],
                 guest: ["1", "2", "3", "4", "5", "6"],
@@ -100,24 +135,21 @@ export function applyAction(state, action) {
         }
 
         case "cambiaPalla": {
-            if (s.sp.punt.home === 0 && s.sp.punt.guest === 0) {
+            const currentSet = s.sp.striscia.at(-1)
-                s.sp.servHome = !s.sp.servHome
+            if (currentSet.ris.length === 0) {
-                s.sp.striscia.at(-1).serv = s.sp.servHome ? 'home' : 'guest'
+                currentSet.serv = currentSet.serv === 'h' ? 'g' : 'h'
             }
             break
         }
 
         case "resetta": {
             s.visuForm = false
-            s.sp.punt.home = 0
+            const servIniziale = s.sp.striscia[0]?.serv ?? 'h'
-            s.sp.punt.guest = 0
+            s.sp.striscia = [{ serv: servIniziale, ris: '', vinc: null }]
-            s.sp.set.home = 0
-            s.sp.set.guest = 0
             s.sp.form = {
                 home: ["1", "2", "3", "4", "5", "6"],
                 guest: ["1", "2", "3", "4", "5", "6"],
             }
-            s.sp.striscia = [{ serv: s.sp.servHome ? 'home' : 'guest', r: [] }]
             break
         }
 
@@ -136,6 +168,24 @@ export function applyAction(state, action) {
             break
         }
 
+        case "startTimeout": {
+            const team = action.team
+            if (team !== 'home' && team !== 'guest') break
+            s.timeout = true
+            s.timeoutTeam = team
+            s.timeoutVideo = action.video ?? null
+            s.timeoutStartedAt = action.startedAt ?? null
+            break
+        }
+
+        case "stopTimeout": {
+            s.timeout = false
+            s.timeoutTeam = null
+            s.timeoutVideo = null
+            s.timeoutStartedAt = null
+            break
+        }
+
         case "setNomi": {
             if (action.home !== undefined) s.sp.nomi.home = action.home
             if (action.guest !== undefined) s.sp.nomi.guest = action.guest

src/referto.js

@@ -0,0 +1,141 @@
+function vincitoreSet(s) {
+    if (s.vinc === 'h' || s.vinc === 'g') return s.vinc
+    let h = 0, g = 0
+    for (const c of s.ris) c === 'h' ? h++ : g++
+    if (h > g) return 'h'
+    if (g > h) return 'g'
+    return null
+}
+
+// Costruisce l'HTML del referto (funzione pura, testabile).
+// `now` è iniettabile per rendere deterministica la data nei test.
+export function buildRefertoHtml(state, now = new Date()) {
+    const { sp, modalitaPartita } = state
+    const { nomi, striscia } = sp
+
+    const setReali = striscia.filter(s => !s._phantom)
+
+    const setVinti = { home: 0, guest: 0 }
+    for (const s of setReali) {
+        const v = vincitoreSet(s)
+        if (v === 'h') setVinti.home++
+        else if (v === 'g') setVinti.guest++
+    }
+
+    const dataOra = now.toLocaleString('it-IT', {
+        day: '2-digit', month: '2-digit', year: 'numeric',
+        hour: '2-digit', minute: '2-digit',
+    })
+
+    const giocatoreHtml = (n) => `<div class="giocatore">${n}</div>`
+
+    const formazioneHtml = (formazioneSet) => {
+        if (!formazioneSet) return '<em style="color:#999;font-size:11px">non disponibile</em>'
+        return `
+          <div class="form-row">
+            <div class="form-team">
+              <div class="form-team-name">${nomi.home}</div>
+              <div class="giocatori">${formazioneSet.home.map(giocatoreHtml).join('')}</div>
+            </div>
+            <div class="form-team">
+              <div class="form-team-name">${nomi.guest}</div>
+              <div class="giocatori">${formazioneSet.guest.map(giocatoreHtml).join('')}</div>
+            </div>
+          </div>`
+    }
+
+    const setsHtml = setReali.map((s, i) => {
+        let h = 0, g = 0
+        const punti = []
+        for (const c of s.ris) {
+            c === 'h' ? h++ : g++
+            punti.push({ chi: c, h, g })
+        }
+
+        const vinc = vincitoreSet(s)
+        const nomeVinc = vinc === 'h' ? nomi.home : vinc === 'g' ? nomi.guest : ''
+        const etichettaVinc = nomeVinc ? ` &nbsp;·&nbsp; vinto da <strong>${nomeVinc}</strong>` : ''
+
+        const puntiHtml = punti.map(p =>
+            `<span class="punto punto-${p.chi}">${p.h}-${p.g}</span>`
+        ).join('')
+
+        return `
+        <div class="set-section">
+          <div class="set-header">
+            Set ${i + 1} &nbsp;—&nbsp; ${nomi.home} <strong>${h}</strong> · <strong>${g}</strong> ${nomi.guest}${etichettaVinc}
+          </div>
+          <div class="form-inizio">
+            <div class="form-inizio-label">Formazione di partenza</div>
+            ${formazioneHtml(s.formInizio)}
+          </div>
+          <div class="punti-grid">${puntiHtml || '<em style="color:#999;font-size:11px">Nessun punto registrato</em>'}</div>
+        </div>`
+    }).join('')
+
+    const html = `<!DOCTYPE html>
+<html lang="it">
+<head>
+  <meta charset="UTF-8">
+  <title>Referto — ${nomi.home} vs ${nomi.guest}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: Arial, Helvetica, sans-serif; color: #111; background: #fff; padding: 28px; font-size: 14px; }
+    @media print { body { padding: 12px; } }
+
+    .header { text-align: center; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 20px; }
+    .titolo { font-size: 18px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }
+    .meta { font-size: 12px; color: #666; margin-top: 5px; }
+
+    .squadre-row { display: flex; justify-content: space-around; align-items: center; margin: 18px 0 6px; }
+    .nome-sq { font-size: 22px; font-weight: bold; text-align: center; max-width: 40%; }
+    .vs { font-size: 16px; color: #999; }
+    .risultato { text-align: center; font-size: 36px; font-weight: bold; letter-spacing: 6px; margin-bottom: 4px; }
+    .modalita-label { text-align: center; font-size: 12px; color: #888; margin-bottom: 22px; }
+
+    .set-section { margin-bottom: 12px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
+    .set-header { background: #f5f5f5; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid #ddd; }
+    .punti-grid { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 10px; }
+    .punto { display: inline-block; padding: 2px 5px; border-radius: 3px; font-size: 11px; font-family: 'Courier New', monospace; white-space: nowrap; }
+    .punto-h { background: #d0e8ff; color: #003a6e; }
+    .punto-g { background: #ffddc0; color: #6e2700; }
+
+    .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; }
+    .form-team { flex: 1; }
+    .form-team-name { font-weight: bold; font-size: 13px; margin-bottom: 6px; }
+    .giocatori { display: flex; gap: 5px; flex-wrap: wrap; }
+    .giocatore { background: #f0f0f0; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 1px solid #ccc; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="titolo">Referto di Gara</div>
+    <div class="meta">${dataOra} &nbsp;·&nbsp; Modalità: ${modalitaPartita}</div>
+  </div>
+
+  <div class="squadre-row">
+    <div class="nome-sq">${nomi.home}</div>
+    <div class="vs">vs</div>
+    <div class="nome-sq">${nomi.guest}</div>
+  </div>
+  <div class="risultato">${setVinti.home} – ${setVinti.guest}</div>
+  <div class="modalita-label">set vinti</div>
+
+  ${setsHtml}
+</body>
+</html>`
+
+    return html
+}
+
+// Apre il referto in una nuova scheda e avvia la stampa (effetto collaterale,
+// solo browser). La generazione dell'HTML è delegata a buildRefertoHtml.
+export function generaReferto(state) {
+    const html = buildRefertoHtml(state)
+    const w = window.open('', '_blank')
+    w.document.write(html)
+    w.document.close()
+    w.print()
+}

src/server-utils.js

@@ -1,34 +1,68 @@
 import { networkInterfaces } from 'os'
+import { readFileSync, existsSync } from 'fs'
+import { execSync } from 'child_process'
 
-export function getNetworkIPs() {
+function isWSL() {
-  const nets = networkInterfaces()
+  try {
-  const networkIPs = []
+    return existsSync('/proc/sys/kernel/osrelease') &&
+      readFileSync('/proc/sys/kernel/osrelease', 'utf8').toLowerCase().includes('microsoft')
+  } catch { return false }
+}
 
-  for (const name of Object.keys(nets)) {
+// Un IPv4 è "pubblicabile" in LAN se non è loopback, link-local o bridge Docker.
+function isLanIPv4(address) {
+  return !!address
+    && !address.startsWith('127.')
+    && !address.startsWith('169.254.')
+    && !address.startsWith('172.')
+}
+
+// Estrae gli IP LAN da un oggetto in stile os.networkInterfaces().
+// Esportata per poter essere testata in isolamento, senza dipendere dalla piattaforma.
+export function collectIPs(nets) {
+  const out = []
+  for (const name of Object.keys(nets || {})) {
     for (const net of nets[name]) {
-      if (net.family === 'IPv4' &&
+      if (net.family === 'IPv4' && !net.internal && isLanIPv4(net.address)) {
-        !net.internal &&
+        out.push(net.address)
-        !net.address.startsWith('172.17.') &&
-        !net.address.startsWith('172.18.')) {
-        networkIPs.push(net.address)
       }
     }
   }
-
+  return out
-  return networkIPs
 }
 
-export function printServerInfo(port = 3000) {
+// Restituisce gli IP di rete della macchina.
-  const networkIPs = getNetworkIPs()
+// Passando `nets` (oggetto in stile os.networkInterfaces) si forza il percorso
+// deterministico, scavalcando il rilevamento WSL/PowerShell: utile nei test.
+export function getNetworkIPs(nets) {
+  if (nets) return collectIPs(nets)
 
+  if (isWSL()) {
+    try {
+      const out = execSync(
+        'powershell.exe -NoProfile -Command "Get-NetIPAddress -AddressFamily IPv4 | Select-Object -ExpandProperty IPAddress"',
+        { timeout: 3000 }
+      )
+      return out.toString().trim().split('\n')
+        .map(s => s.trim())
+        .filter(isLanIPv4)
+    } catch { return [] }
+  }
+
+  return collectIPs(networkInterfaces())
+}
+
+// `networkIPs` è iniettabile per rendere la stampa testabile in modo deterministico.
+export function printServerInfo(port = 3000, networkIPs = getNetworkIPs()) {
   console.log(`\nSegnapunti Server`)
   console.log(`   Display:    http://127.0.0.1:${port}/display`)
   console.log(`   Controller: http://127.0.0.1:${port}/controller`)
 
   if (networkIPs.length > 0) {
-    console.log(`\n   Controller da dispositivi remoti:`)
+    console.log(`\n   Da dispositivi remoti:`)
     networkIPs.forEach(ip => {
-      console.log(`   http://${ip}:${port}/controller`)
+      console.log(`   Display:    http://${ip}:${port}/display`)
+      console.log(`   Controller: http://${ip}:${port}/controller`)
     })
   }
 

src/spot-utils.js

@@ -0,0 +1,16 @@
+import { readdirSync } from 'fs'
+
+/**
+ * Elenca i video .mp4 presenti nella cartella spot.
+ * Ritorna i filename ordinati alfabeticamente (sequenza prevedibile),
+ * oppure un array vuoto se la cartella non esiste o non è leggibile.
+ */
+export function listSpotVideos(spotDir) {
+    try {
+        return readdirSync(spotDir)
+            .filter(name => name.toLowerCase().endsWith('.mp4'))
+            .sort((a, b) => a.localeCompare(b))
+    } catch {
+        return []
+    }
+}

src/style.css

@@ -46,11 +46,31 @@ button:focus-visible {
   width: 100%;
   display: table;
   color: #fff;
+  position: relative;
+}
+/* Linea centrale che separa i due campi, come un tabellone reale */
+.campo::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  background: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+  z-index: 1;
 }
 .hea {
   float: left;
   width: 50%;
   font-size: xx-large;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 18px 4px 12px;
+  box-sizing: border-box;
+  border-bottom: 3px solid currentColor;
+  opacity: 0.96;
 }
 .hea span {
 /* Bordo di debug: border: 1px solid #f3fb00; */
@@ -70,6 +90,27 @@ button:focus-visible {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.07);
+}
+.mr3, .ml3 {
+  display: inline-flex;
+  align-items: center;
+  font-size: 3vh;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 4px 16px;
+  margin-top: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.mr3 {
+  margin-right: 14px;
+}
+.ml3 {
+  margin-left: 14px;
 }
 .tal {
   text-align: left;
@@ -110,10 +151,11 @@ button:focus-visible {
   max-width: 50vw;
   overflow: hidden;
   box-sizing: border-box;
+  text-shadow: 0 0 40px currentColor;
 }
 .form {
   font-size: 5vh;
-  border-top: #fff dashed 25px;
+  border-top: 2px solid rgba(255, 255, 255, 0.18);
   padding-top: 50px;
 }
 .formtit {
@@ -125,14 +167,23 @@ button:focus-visible {
   font-size: 20vh;
   float: left;
   width: 32%;
+  box-sizing: border-box;
+  margin: 3px 0;
+  color: #ddd;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.07);
+  border-radius: 10px;
+}
+.text-bold {
+  font-weight: 800;
 }
 .home {
-  background-color: black;
+  background-color: transparent;
-  color: yellow;
+  color: #f5c518;
 }
 .guest {
-  background-color: blue;
+  background-color: transparent;
-  color: white
+  color: #2196f3;
 }
 .striscia {
   position: fixed;
@@ -141,17 +192,28 @@ button:focus-visible {
   right: 10px;
   display: grid;
   grid-template-columns: max-content 1fr;
-  row-gap: 2px;
+  row-gap: 6px;
   align-items: center;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  backdrop-filter: blur(6px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  z-index: 2;
 }
 .striscia-nome {
   white-space: nowrap;
-  padding-right: 6px;
+  padding-right: 10px;
+  font-size: 2.2vh;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .striscia-items {
   display: flex;
   flex-wrap: nowrap;
   overflow: hidden;
+  gap: 2px;
 }
 .striscia .item {
   width: 25px;
@@ -159,11 +221,17 @@ button:focus-visible {
   text-align: center;
   font-weight: bold;
   flex-shrink: 0;
-  border-radius: 5px;
+  border-radius: 6px;
 }
 .striscia .item:not(.item-vuoto) {
-  background-color: rgb(206, 247, 3);
+  background-color: #f5c518;
-  color: blue;
+  color: #111;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+.striscia-items.guest-striscia .item:not(.item-vuoto) {
+  background-color: #2196f3;
+  color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
 }
 
 .campo-config {

src/websocket-handler.js

@@ -5,6 +5,8 @@ import { createInitialState, applyAction } from './gameState.js'
  * @param {WebSocketServer} wss - Istanza del server WebSocket.
  * @returns {Object} Oggetto con metodi di gestione dello stato.
  */
+const DURATA_TIMEOUT_MS = 30000
+
 export function setupWebSocketHandler(wss, options = {}) {
   // Stato globale della partita.
   let gameState = options.initialState ?? createInitialState()
@@ -12,6 +14,17 @@ export function setupWebSocketHandler(wss, options = {}) {
   // Mappa dei ruoli associati ai client connessi.
   const clients = new Map() // ws -> { role: 'display' | 'controller' }
 
+  // Timer che chiude automaticamente il time out dopo 30s, indipendentemente
+  // dal controller (sopravvive a refresh/disconnessione/standby del tablet).
+  let timeoutTimer = null
+
+  function annullaTimerTimeout() {
+    if (timeoutTimer) {
+      clearTimeout(timeoutTimer)
+      timeoutTimer = null
+    }
+  }
+
   /**
    * Gestisce i messaggi in arrivo dal client
    */
@@ -87,10 +100,16 @@ export function setupWebSocketHandler(wss, options = {}) {
       return
     }
 
+    // Il momento di inizio del time out lo decide il server (non il client),
+    // cosi' gameState.js resta puro/deterministico e testabile.
+    const action = msg.action.type === 'startTimeout'
+      ? { ...msg.action, startedAt: Date.now() }
+      : msg.action
+
     // Applica l'azione allo stato della partita.
     const previousState = gameState
     try {
-      gameState = applyAction(gameState, msg.action)
+      gameState = applyAction(gameState, action)
     } catch (err) {
       console.error('Error applying action:', err)
       sendError(ws, 'Failed to apply action')
@@ -98,6 +117,20 @@ export function setupWebSocketHandler(wss, options = {}) {
       return
     }
 
+    // Qualsiasi azione che tocca il time out invalida il timer di auto-chiusura
+    // pendente; se il time out e' (ri)partito, ne arma uno nuovo.
+    if (action.type === 'startTimeout' || action.type === 'stopTimeout') {
+      annullaTimerTimeout()
+    }
+    if (action.type === 'startTimeout' && gameState.timeout) {
+      timeoutTimer = setTimeout(() => {
+        timeoutTimer = null
+        gameState = applyAction(gameState, { type: 'stopTimeout' })
+        broadcastState()
+        options.onStateChange?.(gameState)
+      }, DURATA_TIMEOUT_MS)
+    }
+
     // Propaga il nuovo stato a tutti i client connessi.
     broadcastState()
     options.onStateChange?.(gameState)

src/wsMixin.js

@@ -0,0 +1,146 @@
+import { createInitialState, punteggio, servizio, setVinti } from './gameState.js'
+
+export function createWsMixin(role) {
+    return {
+        data() {
+            return {
+                ws: null,
+                wsConnected: false,
+                isConnecting: false,
+                reconnectTimeout: null,
+                reconnectAttempts: 0,
+                maxReconnectDelay: 30000,
+                state: createInitialState(),
+            }
+        },
+        computed: {
+            punt()     { return punteggio(this.state.sp.striscia) },
+            servHome() { return servizio(this.state.sp.striscia) },
+            set()      { return setVinti(this.state.sp.striscia) },
+        },
+        mounted() {
+            this.connectWebSocket()
+            if (import.meta.hot) {
+                import.meta.hot.on('vite:beforeUpdate', () => {
+                    if (this.reconnectTimeout) {
+                        clearTimeout(this.reconnectTimeout)
+                        this.reconnectTimeout = null
+                    }
+                })
+            }
+        },
+        beforeUnmount() {
+            if (this.reconnectTimeout) {
+                clearTimeout(this.reconnectTimeout)
+                this.reconnectTimeout = null
+            }
+            if (this.ws) {
+                this.ws.onclose = null
+                this.ws.onerror = null
+                this.ws.onmessage = null
+                this.ws.onopen = null
+                try {
+                    if (this.ws.readyState === WebSocket.OPEN) {
+                        this.ws.close(1000, 'Component unmounting')
+                    } else if (this.ws.readyState === WebSocket.CONNECTING) {
+                        this.ws.close()
+                    }
+                } catch (err) {
+                    console.error(`[${role}] Error closing WebSocket:`, err)
+                }
+                this.ws = null
+            }
+        },
+        methods: {
+            connectWebSocket() {
+                if (this.isConnecting) return
+                if (this.ws) {
+                    this.ws.onclose = null
+                    this.ws.onerror = null
+                    this.ws.onmessage = null
+                    this.ws.onopen = null
+                    try {
+                        if (this.ws.readyState === WebSocket.OPEN) {
+                            this.ws.close(1000, 'Reconnecting')
+                        } else if (this.ws.readyState === WebSocket.CONNECTING) {
+                            this.ws.close()
+                        }
+                    } catch (err) {
+                        console.error(`[${role}] Error closing previous WebSocket:`, err)
+                    }
+                    this.ws = null
+                }
+
+                this.isConnecting = true
+                const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+                const params = new URLSearchParams(location.search)
+                const defaultHost = (location.hostname === 'localhost' || location.hostname === '::1')
+                    ? `127.0.0.1${location.port ? `:${location.port}` : ''}`
+                    : location.host
+                const wsUrl = `${protocol}//${params.get('wsHost') || defaultHost}/ws`
+
+                try {
+                    this.ws = new WebSocket(wsUrl)
+                } catch (err) {
+                    console.error(`[${role}] Failed to create WebSocket:`, err)
+                    this.isConnecting = false
+                    this.scheduleReconnect()
+                    return
+                }
+
+                this.ws.onopen = () => {
+                    this.isConnecting = false
+                    this.wsConnected = true
+                    this.reconnectAttempts = 0
+                    try {
+                        this.ws?.send(JSON.stringify({ type: 'register', role }))
+                    } catch (err) {
+                        console.error(`[${role}] Failed to register:`, err)
+                    }
+                }
+
+                this.ws.onmessage = (event) => {
+                    try {
+                        const msg = JSON.parse(event.data)
+                        if (msg.type === 'state') this.state = msg.state
+                        else this.onWsMessage?.(msg)
+                    } catch (e) {
+                        console.error(`[${role}] Error parsing message:`, e)
+                    }
+                }
+
+                this.ws.onclose = (event) => {
+                    this.isConnecting = false
+                    this.wsConnected = false
+                    if (event.code !== 1000 && event.code !== 1001) this.scheduleReconnect()
+                }
+
+                this.ws.onerror = () => {
+                    this.isConnecting = false
+                    this.wsConnected = false
+                }
+            },
+
+            scheduleReconnect() {
+                if (this.reconnectTimeout) return
+                const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), this.maxReconnectDelay)
+                this.reconnectAttempts++
+                this.reconnectTimeout = setTimeout(() => {
+                    this.reconnectTimeout = null
+                    this.connectWebSocket()
+                }, delay)
+            },
+
+            sendWs(msg) {
+                if (!this.wsConnected || this.ws?.readyState !== WebSocket.OPEN) return false
+                try {
+                    this.ws.send(JSON.stringify(msg))
+                    return true
+                } catch (err) {
+                    console.error(`[${role}] Failed to send:`, err)
+                    return false
+                }
+            },
+        },
+    }
+}

tests/README.md

@@ -90,10 +90,20 @@ Esempi reali nel progetto:
 - cambio palla
 - vittoria set con regola dei 2 punti di scarto
 - reset stato
+- `formInizio` (snapshot formazione di partenza del set)
+- time out (`startTimeout`/`stopTimeout`: squadra, video, timestamp)
+- generazione del referto (`buildRefertoHtml`)
+- persistenza stato su disco (`persist.js`, con `fs` mockato)
+- utility di rete (`server-utils.js`)
+- elenco video spot (`spot-utils.js`, su cartella temporanea reale)
 
 Quando falliscono:
 - quasi sempre c'e un problema nella logica core
 
+> Nota: punteggio, set e servizio NON sono campi dello stato: si ricavano dalla
+> `striscia` con `punteggio` / `setVinti` / `servizio`. Nei test si impostano gli
+> scenari costruendo la `striscia`, non scrivendo `sp.punt`/`sp.set`.
+
 ### 5.2 Integration (`tests/integration`)
 
 Cosa sono:
@@ -107,6 +117,8 @@ Esempi reali nel progetto:
 - broadcast stato ai client
 - validazione input malformati
 - autorizzazioni (solo controller puo inviare certe azioni)
+- timer server-side del time out (auto-`stopTimeout` dopo 30s, `startedAt` impostato dal server)
+- routing del server Express (`createApp`: rotte display/controller/asset, `/spot/list` e file statici `/spot/`)
 
 Quando falliscono:
 - spesso c'e problema nel protocollo messaggi o nei controlli di ruolo
@@ -124,6 +136,10 @@ Esempi reali nel progetto:
 - stato connessione
 - click bottoni controller
 - dialog reset/config/cambi
+- modal time out del controller (scelta squadra/video, banner, countdown)
+- overlay time out del display (video, placeholder, countdown, dissolvenza)
+- bottone REFERTO nel dialog PARTITA FINITA
+- client WebSocket (`wsMixin`: connessione, riconnessione, `sendWs`, errori)
 
 Quando falliscono:
 - spesso hai rotto template, computed, metodi o binding
@@ -152,15 +168,20 @@ A cosa servono:
 - verificano che Controller e Display funzionino davvero insieme
 
 File principali:
+- `helpers.cjs`: helper condivisi (`openController`/`openDisplay`/`resetGame`/`addPoints`)
 - `basic-flow.spec.cjs`: flusso base Controller <-> Display
 - `game-operations.spec.cjs`: reset, config, toggle, cambi
 - `game-simulation.spec.cjs`: simulazione partita
 - `full-match.spec.cjs`: scenari partita completi
+- `timeout.spec.cjs`: time out end-to-end (modal, overlay sul display, chiusura anticipata)
+- `referto.spec.cjs`: generazione referto a PARTITA FINITA
 - `accessibility.spec.cjs`: controlli accessibilita con axe
 - `visual-regression.spec.cjs`: confronto screenshot con baseline
 
-Nota importante:
+Note importanti:
 - gli E2E sono configurati in seriale (`workers: 1`) per evitare interferenze sullo stato partita condiviso.
+- il controller viene aperto in viewport portrait (layout "mobile") tramite `openController`: in landscape userebbe la dashboard estesa con selettori diversi.
+- lo stato è UNICO e persistente sul server: ogni test inizia con `resetGame`, che azzera e reimposta i nomi di default per garantire determinismo.
 
 ## 6) Come leggere i risultati
 
@@ -169,8 +190,8 @@ Nota importante:
 Caso OK (verde):
 
 ```text
-Test Files  6 passed (6)
+Test Files  10 passed (10)
-Tests      159 passed (159)
+Tests      212 passed (212)
 ```
 
 Significa:
@@ -187,7 +208,7 @@ Caso KO (rosso):
 Caso OK:
 
 ```text
-72 passed
+75 passed
 ```
 
 Caso KO:

tests/component/ControllerPage.test.js

@@ -1,7 +1,11 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import ControllerPage from '../../src/components/ControllerPage.vue'
+import { generaReferto } from '../../src/referto.js'
+
+// Il referto apre una finestra/print: lo mockiamo per testarne solo l'invocazione.
+vi.mock('../../src/referto.js', () => ({ generaReferto: vi.fn() }))
 
 // Mock globale WebSocket per jsdom
 class MockWebSocket {
@@ -25,6 +29,25 @@ class MockWebSocket {
 
 vi.stubGlobal('WebSocket', MockWebSocket)
 
+// Mock di fetch per /spot/list (usato dalla modal time out).
+const fetchMock = vi.fn().mockResolvedValue({ json: async () => [] })
+vi.stubGlobal('fetch', fetchMock)
+
+// Forza l'orientamento portrait → il controller usa il layout "mobile"
+// (con .team-pts, .btn-ctrl, ecc.) su cui questi test fanno asserzioni.
+Object.defineProperty(window, 'innerWidth', { value: 400, writable: true, configurable: true })
+Object.defineProperty(window, 'innerHeight', { value: 800, writable: true, configurable: true })
+
+// Imposta il punteggio del set in corso costruendo una ris coerente.
+// `serv` ('h'|'g') controlla l'ultimo punto, quindi chi risulta al servizio.
+function setScore(wrapper, home, guest, serv = 'h') {
+    const altro = serv === 'h' ? 'g' : 'h'
+    const nAltro = serv === 'h' ? guest : home
+    const nServ = serv === 'h' ? home : guest
+    // mette per ultimo il carattere del battitore desiderato
+    wrapper.vm.state.sp.striscia.at(-1).ris = altro.repeat(nAltro) + serv.repeat(nServ)
+}
+
 // Helper per creare il componente con stato personalizzato
 function mountController(stateOverrides = {}) {
     const wrapper = mount(ControllerPage, {
@@ -105,7 +128,7 @@ describe('ControllerPage.vue', () => {
 
         it('dovrebbe essere disabilitato se il punteggio non è 0-0', async () => {
             const wrapper = mountController()
-            wrapper.vm.state.sp.punt.home = 5
+            setScore(wrapper, 5, 0)
             await wrapper.vm.$nextTick()
             const btn = wrapper.findAll('.btn-ctrl').find(b => b.text().includes('Cambio Palla'))
             expect(btn.attributes('disabled')).toBeDefined()
@@ -194,8 +217,7 @@ describe('ControllerPage.vue', () => {
 
         it('dovrebbe generare "N pari" a punteggio uguale', () => {
             const wrapper = mountController()
-            wrapper.vm.state.sp.punt.home = 5
+            setScore(wrapper, 5, 5)
-            wrapper.vm.state.sp.punt.guest = 5
             wrapper.vm.wsConnected = true
             wrapper.vm.ws = { readyState: 1, send: vi.fn() }
             wrapper.vm.speak()
@@ -205,9 +227,7 @@ describe('ControllerPage.vue', () => {
 
         it('dovrebbe annunciare prima il punteggio di chi batte (home serve)', () => {
             const wrapper = mountController()
-            wrapper.vm.state.sp.punt.home = 15
+            setScore(wrapper, 15, 10, 'h')
-            wrapper.vm.state.sp.punt.guest = 10
-            wrapper.vm.state.sp.servHome = true
             wrapper.vm.wsConnected = true
             wrapper.vm.ws = { readyState: 1, send: vi.fn() }
             wrapper.vm.speak()
@@ -217,9 +237,7 @@ describe('ControllerPage.vue', () => {
 
         it('dovrebbe annunciare prima il punteggio di chi batte (guest serve)', () => {
             const wrapper = mountController()
-            wrapper.vm.state.sp.punt.home = 10
+            setScore(wrapper, 10, 15, 'g')
-            wrapper.vm.state.sp.punt.guest = 15
-            wrapper.vm.state.sp.servHome = false
             wrapper.vm.wsConnected = true
             wrapper.vm.ws = { readyState: 1, send: vi.fn() }
             wrapper.vm.speak()
@@ -228,6 +246,125 @@ describe('ControllerPage.vue', () => {
         })
     })
 
+    // =============================================
+    // REFERTO (modal PARTITA FINITA)
+    // =============================================
+    describe('Referto', () => {
+        // Porta il componente allo stato "partita finita" per home in 2/3
+        function setPartitaFinita(wrapper) {
+            wrapper.vm.state.modalitaPartita = '2/3'
+            wrapper.vm.state.sp.striscia = [
+                { serv: 'h', ris: '', vinc: 'h' },
+                { serv: 'h', ris: '', vinc: null },
+            ]
+            wrapper.vm.setVintoTeam = 'home'
+            wrapper.vm.showSetVinto = true
+        }
+
+        it('mostra il bottone REFERTO quando la partita è finita', async () => {
+            const wrapper = mountController()
+            setPartitaFinita(wrapper)
+            await wrapper.vm.$nextTick()
+            expect(wrapper.vm.isPartitaFinita).toBe(true)
+            const btn = wrapper.findAll('.btn-secondary').find(b => b.text().includes('REFERTO'))
+            expect(btn).toBeDefined()
+        })
+
+        it('il click su REFERTO invoca generaReferto con lo stato', async () => {
+            const wrapper = mountController()
+            setPartitaFinita(wrapper)
+            await wrapper.vm.$nextTick()
+            const btn = wrapper.findAll('.btn-secondary').find(b => b.text().includes('REFERTO'))
+            await btn.trigger('click')
+            expect(generaReferto).toHaveBeenCalledWith(wrapper.vm.state)
+        })
+
+        it('NON mostra il bottone REFERTO a set vinto (partita non finita)', async () => {
+            const wrapper = mountController()
+            wrapper.vm.state.modalitaPartita = '3/5'
+            wrapper.vm.setVintoTeam = 'home'
+            wrapper.vm.showSetVinto = true
+            await wrapper.vm.$nextTick()
+            expect(wrapper.vm.isPartitaFinita).toBe(false)
+            const btn = wrapper.findAll('.btn-secondary').find(b => b.text().includes('REFERTO'))
+            expect(btn).toBeUndefined()
+        })
+    })
+
+    // =============================================
+    // TIME OUT
+    // =============================================
+    describe('Time Out', () => {
+        it('il click su Time Out apre la modal con l\'elenco dei video', async () => {
+            fetchMock.mockResolvedValueOnce({ json: async () => ['a.mp4', 'b.mp4'] })
+            const wrapper = mountController()
+            await wrapper.find('.btn-timeout').trigger('click')
+            await flushPromises()
+            expect(wrapper.vm.showTimeoutModal).toBe(true)
+            expect(wrapper.find('.dialog-timeout').exists()).toBe(true)
+            expect(wrapper.vm.spotList).toEqual(['a.mp4', 'b.mp4'])
+            // le opzioni sono i video più "Nessun video"
+            expect(wrapper.findAll('.timeout-video-option')).toHaveLength(3)
+        })
+
+        it('se /spot/list fallisce la modal si apre comunque senza video', async () => {
+            fetchMock.mockRejectedValueOnce(new Error('rete assente'))
+            const wrapper = mountController()
+            await wrapper.find('.btn-timeout').trigger('click')
+            await flushPromises()
+            expect(wrapper.vm.showTimeoutModal).toBe(true)
+            expect(wrapper.vm.spotList).toEqual([])
+        })
+
+        it('Avvia è disabilitato finché non si sceglie la squadra', async () => {
+            const wrapper = mountController()
+            await wrapper.find('.btn-timeout').trigger('click')
+            await flushPromises()
+            const avvia = wrapper.find('.dialog-timeout .btn-confirm')
+            expect(avvia.attributes('disabled')).toBeDefined()
+            await wrapper.find('.dialog-timeout .btn-set.home-bg').trigger('click')
+            expect(avvia.attributes('disabled')).toBeUndefined()
+        })
+
+        it('Avvia invia startTimeout con squadra e video e chiude la modal', async () => {
+            fetchMock.mockResolvedValueOnce({ json: async () => ['a.mp4'] })
+            const wrapper = mountController()
+            const spy = vi.spyOn(wrapper.vm, 'sendAction')
+            await wrapper.find('.btn-timeout').trigger('click')
+            await flushPromises()
+            await wrapper.find('.dialog-timeout .btn-set.guest-bg').trigger('click')
+            wrapper.vm.timeoutVideoSel = 'a.mp4'
+            await wrapper.find('.dialog-timeout .btn-confirm').trigger('click')
+            expect(spy).toHaveBeenCalledWith({ type: 'startTimeout', team: 'guest', video: 'a.mp4' })
+            expect(wrapper.vm.showTimeoutModal).toBe(false)
+        })
+
+        it('durante il time out il bottone invia stopTimeout', async () => {
+            const wrapper = mountController()
+            const spy = vi.spyOn(wrapper.vm, 'sendAction')
+            wrapper.vm.state.timeout = true
+            wrapper.vm.state.timeoutTeam = 'home'
+            await wrapper.vm.$nextTick()
+            await wrapper.find('.btn-timeout').trigger('click')
+            expect(spy).toHaveBeenCalledWith({ type: 'stopTimeout' })
+        })
+
+        it('durante il time out mostra banner con squadra e countdown', async () => {
+            const wrapper = mountController()
+            wrapper.vm.state.timeoutTeam = 'home'
+            wrapper.vm.state.timeoutStartedAt = Date.now() - 10000
+            wrapper.vm.state.timeout = true
+            await wrapper.vm.$nextTick()
+            const banner = wrapper.find('.timeout-banner')
+            expect(banner.exists()).toBe(true)
+            expect(banner.text()).toContain('TIME OUT')
+            expect(banner.text()).toContain('Antoniana')
+            expect(banner.text()).toContain('00:20')
+            // anche il bottone mostra il countdown
+            expect(wrapper.find('.btn-timeout').text()).toBe('00:20')
+        })
+    })
+
     // =============================================
     // BARRA CONNESSIONE
     // =============================================

tests/component/DisplayPage.test.js

@@ -31,6 +31,12 @@ vi.stubGlobal('speechSynthesis', {
     getVoices: () => []
 })
 
+// happy-dom non implementa la riproduzione media: stub di play/pause/load
+// così l'overlay time out può montare il <video> senza errori.
+Object.defineProperty(HTMLMediaElement.prototype, 'play', { value: vi.fn().mockResolvedValue(undefined), writable: true })
+Object.defineProperty(HTMLMediaElement.prototype, 'pause', { value: vi.fn(), writable: true })
+Object.defineProperty(HTMLMediaElement.prototype, 'load', { value: vi.fn(), writable: true })
+
 function mountDisplay() {
     return mount(DisplayPage, {
         global: {
@@ -75,8 +81,8 @@ describe('DisplayPage.vue', () => {
 
         it('dovrebbe aggiornare il punteggio quando lo stato cambia', async () => {
             const wrapper = mountDisplay()
-            wrapper.vm.state.sp.punt.home = 15
+            // il punteggio si ricava dalla striscia: 15 punti home + 12 guest
-            wrapper.vm.state.sp.punt.guest = 12
+            wrapper.vm.state.sp.striscia.at(-1).ris = 'h'.repeat(15) + 'g'.repeat(12)
             await wrapper.vm.$nextTick()
             const punti = wrapper.findAll('.punt')
             expect(punti[0].text()).toBe('15')
@@ -175,6 +181,82 @@ describe('DisplayPage.vue', () => {
         })
     })
 
+    // =============================================
+    // OVERLAY TIME OUT
+    // =============================================
+    describe('Overlay time out', () => {
+        // Attiva il time out impostando lo stato come farebbe il server.
+        async function attivaTimeout(wrapper, { team = 'home', video = null, startedAt = Date.now() } = {}) {
+            wrapper.vm.state.timeoutTeam = team
+            wrapper.vm.state.timeoutVideo = video
+            wrapper.vm.state.timeoutStartedAt = startedAt
+            wrapper.vm.state.timeout = true
+            await wrapper.vm.$nextTick()
+            await wrapper.vm.$nextTick()
+        }
+
+        it('non mostra l\'overlay quando il time out non è attivo', () => {
+            const wrapper = mountDisplay()
+            expect(wrapper.find('.timeout-overlay').exists()).toBe(false)
+        })
+
+        it('senza video mostra il placeholder con il nome della squadra', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { team: 'home', video: null })
+            expect(wrapper.find('.timeout-overlay').exists()).toBe(true)
+            const placeholder = wrapper.find('.timeout-placeholder')
+            expect(placeholder.text()).toContain('TIME OUT')
+            expect(placeholder.text()).toContain('Antoniana')
+            expect(wrapper.find('.timeout-video').exists()).toBe(false)
+        })
+
+        it('con un video lo riproduce nell\'overlay', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { team: 'guest', video: 'a.mp4' })
+            const video = wrapper.find('.timeout-video')
+            expect(video.exists()).toBe(true)
+            expect(video.element.src).toContain('/spot/a.mp4')
+            expect(wrapper.find('.timeout-placeholder').exists()).toBe(false)
+        })
+
+        it('a fine video mostra il placeholder fino allo stop del server', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { video: 'a.mp4' })
+            const video = wrapper.find('.timeout-video')
+            video.element.onended()
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.timeout-video').exists()).toBe(false)
+            expect(wrapper.find('.timeout-placeholder').exists()).toBe(true)
+        })
+
+        it('il countdown parte da timeoutStartedAt', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { startedAt: Date.now() - 5000 })
+            expect(wrapper.vm.timeoutRemaining).toBe(25)
+            expect(wrapper.find('.timeout-countdown').text()).toBe('00:25')
+        })
+
+        it('timeoutFading è true solo con video oltre i 30s negli ultimi istanti', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper, { video: 'a.mp4', startedAt: Date.now() - 29500 })
+            // video corto: mai dissolvenza
+            wrapper.vm.spotVideoDuration = 20
+            expect(wrapper.vm.timeoutFading).toBe(false)
+            // video più lungo dei 30s: dissolvenza nell'ultimo secondo
+            wrapper.vm.spotVideoDuration = 45
+            expect(wrapper.vm.timeoutRemaining).toBe(1)
+            expect(wrapper.vm.timeoutFading).toBe(true)
+        })
+
+        it('alla fine del time out l\'overlay scompare', async () => {
+            const wrapper = mountDisplay()
+            await attivaTimeout(wrapper)
+            wrapper.vm.state.timeout = false
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.timeout-overlay').exists()).toBe(false)
+        })
+    })
+
     // =============================================
     // ICONA SERVIZIO
     // =============================================

tests/component/wsMixin.test.js

@@ -0,0 +1,228 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createWsMixin } from '../../src/wsMixin.js'
+import { createInitialState } from '../../src/gameState.js'
+
+// WebSocket mock controllabile: i gestori (onopen/onmessage/onclose) vengono
+// assegnati dal mixin e li invochiamo manualmente nei test.
+class MockWebSocket {
+    static CONNECTING = 0
+    static OPEN = 1
+    static CLOSING = 2
+    static CLOSED = 3
+    constructor(url) {
+        this.url = url
+        this.readyState = MockWebSocket.CONNECTING
+        this.send = vi.fn()
+        this.close = vi.fn()
+        MockWebSocket.instances.push(this)
+    }
+}
+MockWebSocket.instances = []
+
+vi.stubGlobal('WebSocket', MockWebSocket)
+
+// Monta un componente che usa il mixin. `extra` permette di aggiungere hook.
+function mountWith(role = 'controller', extra = {}) {
+    const Comp = {
+        mixins: [createWsMixin(role)],
+        template: '<div></div>',
+        ...extra,
+    }
+    return mount(Comp)
+}
+
+function ultimaWs() {
+    return MockWebSocket.instances.at(-1)
+}
+
+describe('createWsMixin (wsMixin.js)', () => {
+    beforeEach(() => {
+        MockWebSocket.instances = []
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    describe('computed derivati', () => {
+        it('punt/servHome/set delegano alle funzioni pure sulla striscia', async () => {
+            const wrapper = mountWith()
+            wrapper.vm.state.sp.striscia = [
+                { serv: 'h', ris: 'h', vinc: 'h' },
+                { serv: 'h', ris: 'h'.repeat(10) + 'g'.repeat(8), vinc: null },
+            ]
+            await wrapper.vm.$nextTick()
+            expect(wrapper.vm.punt).toEqual({ home: 10, guest: 8 })
+            expect(wrapper.vm.set).toEqual({ home: 1, guest: 0 })
+            // ultimo punto 'g' → serve guest
+            expect(wrapper.vm.servHome).toBe(false)
+        })
+    })
+
+    describe('connessione', () => {
+        it('apre una WebSocket verso /ws al mount', () => {
+            mountWith()
+            const ws = ultimaWs()
+            expect(ws).toBeDefined()
+            expect(ws.url).toMatch(/^ws:\/\/.+\/ws$/)
+        })
+
+        it('invia il messaggio register all\'apertura', () => {
+            const wrapper = mountWith('controller')
+            const ws = ultimaWs()
+            ws.readyState = MockWebSocket.OPEN
+            ws.onopen()
+            expect(ws.send).toHaveBeenCalledTimes(1)
+            const msg = JSON.parse(ws.send.mock.calls[0][0])
+            expect(msg).toEqual({ type: 'register', role: 'controller' })
+            expect(wrapper.vm.wsConnected).toBe(true)
+        })
+
+        it('un messaggio "state" aggiorna lo stato locale', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            const nuovo = createInitialState()
+            nuovo.sp.nomi.home = 'Nuova Squadra'
+            ws.onmessage({ data: JSON.stringify({ type: 'state', state: nuovo }) })
+            expect(wrapper.vm.state.sp.nomi.home).toBe('Nuova Squadra')
+        })
+
+        it('un messaggio non-state invoca l\'hook onWsMessage', () => {
+            const onWsMessage = vi.fn()
+            const wrapper = mountWith('display', { methods: { onWsMessage } })
+            const ws = ultimaWs()
+            ws.onmessage({ data: JSON.stringify({ type: 'speak', text: 'ciao' }) })
+            expect(onWsMessage).toHaveBeenCalledWith({ type: 'speak', text: 'ciao' })
+        })
+    })
+
+    describe('riconnessione', () => {
+        it('scheduleReconnect usa backoff esponenziale con cap a 30s', () => {
+            const wrapper = mountWith()
+            const delays = []
+            const spy = vi.spyOn(globalThis, 'setTimeout').mockImplementation(() => 123)
+            // intercetta i delay leggendoli dalle chiamate
+            spy.mockImplementation((_fn, d) => { delays.push(d); return 123 })
+
+            wrapper.vm.reconnectAttempts = 0
+            wrapper.vm.reconnectTimeout = null
+            wrapper.vm.scheduleReconnect() // 1000
+            wrapper.vm.reconnectTimeout = null
+            wrapper.vm.scheduleReconnect() // 2000
+            wrapper.vm.reconnectTimeout = null
+            wrapper.vm.scheduleReconnect() // 4000
+            expect(delays).toEqual([1000, 2000, 4000])
+
+            // attempts alto → cap a 30000
+            delays.length = 0
+            wrapper.vm.reconnectAttempts = 20
+            wrapper.vm.reconnectTimeout = null
+            wrapper.vm.scheduleReconnect()
+            expect(delays[0]).toBe(30000)
+
+            spy.mockRestore()
+        })
+
+        it('non riconnette su chiusura pulita (1000/1001)', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            const spy = vi.spyOn(wrapper.vm, 'scheduleReconnect')
+            ws.onclose({ code: 1000 })
+            ws.onclose({ code: 1001 })
+            expect(spy).not.toHaveBeenCalled()
+            expect(wrapper.vm.wsConnected).toBe(false)
+        })
+
+        it('riconnette su chiusura anomala (es. 1006)', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            const spy = vi.spyOn(wrapper.vm, 'scheduleReconnect')
+            ws.onclose({ code: 1006 })
+            expect(spy).toHaveBeenCalled()
+        })
+
+        it('allo scadere del timer riapre davvero la connessione', () => {
+            vi.useFakeTimers()
+            try {
+                const wrapper = mountWith()
+                // il mock non fa mai scattare onopen: sblocca la guardia isConnecting
+                wrapper.vm.isConnecting = false
+                const prima = MockWebSocket.instances.length
+                wrapper.vm.scheduleReconnect()
+                vi.advanceTimersByTime(1000)
+                expect(MockWebSocket.instances.length).toBe(prima + 1)
+                expect(wrapper.vm.reconnectTimeout).toBe(null)
+            } finally {
+                vi.useRealTimers()
+            }
+        })
+
+        it('se il costruttore WebSocket lancia, programma la riconnessione', () => {
+            const wrapper = mountWith()
+            wrapper.vm.isConnecting = false
+            const spy = vi.spyOn(wrapper.vm, 'scheduleReconnect').mockImplementation(() => {})
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+            vi.stubGlobal('WebSocket', class { constructor() { throw new Error('boom') } })
+            try {
+                wrapper.vm.connectWebSocket()
+                expect(spy).toHaveBeenCalled()
+                expect(wrapper.vm.isConnecting).toBe(false)
+                expect(wrapper.vm.ws).toBe(null)
+            } finally {
+                vi.stubGlobal('WebSocket', MockWebSocket)
+                consoleSpy.mockRestore()
+            }
+        })
+
+        it('onerror azzera lo stato di connessione', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            wrapper.vm.wsConnected = true
+            wrapper.vm.isConnecting = true
+            ws.onerror()
+            expect(wrapper.vm.wsConnected).toBe(false)
+            expect(wrapper.vm.isConnecting).toBe(false)
+        })
+    })
+
+    describe('sendWs', () => {
+        it('ritorna false se non connesso', () => {
+            const wrapper = mountWith()
+            wrapper.vm.wsConnected = false
+            expect(wrapper.vm.sendWs({ type: 'action' })).toBe(false)
+        })
+
+        it('serializza e invia se connesso e aperto', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            ws.readyState = MockWebSocket.OPEN
+            wrapper.vm.wsConnected = true
+            const ok = wrapper.vm.sendWs({ type: 'action', action: { type: 'incPunt' } })
+            expect(ok).toBe(true)
+            const inviato = JSON.parse(ws.send.mock.calls.at(-1)[0])
+            expect(inviato.type).toBe('action')
+        })
+
+        it('ritorna false se send lancia', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            ws.readyState = MockWebSocket.OPEN
+            wrapper.vm.wsConnected = true
+            ws.send.mockImplementation(() => { throw new Error('boom') })
+            const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+            expect(wrapper.vm.sendWs({ type: 'action' })).toBe(false)
+            consoleSpy.mockRestore()
+        })
+    })
+
+    describe('cleanup', () => {
+        it('beforeUnmount chiude la WebSocket', () => {
+            const wrapper = mountWith()
+            const ws = ultimaWs()
+            wrapper.unmount()
+            expect(ws.close).toHaveBeenCalled()
+        })
+    })
+})

tests/e2e/accessibility.spec.cjs

@@ -1,11 +1,12 @@
 const { test, expect } = require('@playwright/test');
 const AxeBuilderImport = require('@axe-core/playwright');
 const AxeBuilder = AxeBuilderImport.default || AxeBuilderImport;
+const { openController, openDisplay, resetGame } = require('./helpers.cjs');
 
 test.describe('Accessibility (a11y)', () => {
 
-    test('Display: non dovrebbe avere violazioni critiche a11y', async ({ page }) => {
+    test('Display: non dovrebbe avere violazioni critiche a11y', async ({ context }) => {
-        await page.goto('http://localhost:3000');
+        const page = await openDisplay(context);
         await page.waitForTimeout(500);
 
         const results = await new AxeBuilder({ page })
@@ -16,12 +17,15 @@ test.describe('Accessibility (a11y)', () => {
         expect(results.violations).toEqual([]);
     });
 
-    test('Controller: non dovrebbe avere violazioni critiche a11y', async ({ page }) => {
+    test('Controller: non dovrebbe avere violazioni critiche a11y', async ({ context }) => {
-        await page.goto('http://localhost:3001');
+        const page = await openController(context);
-        await page.waitForTimeout(500);
+        await resetGame(page);
 
         const results = await new AxeBuilder({ page })
             .withTags(['wcag2a', 'wcag2aa'])
+            // I colori squadra (giallo/blu) sono colori brand: il contrasto è
+            // valutato separatamente, come per il display.
+            .disableRules(['color-contrast'])
             .analyze();
 
         // Mostra i dettagli delle violazioni se ci sono
@@ -41,9 +45,9 @@ test.describe('Accessibility (a11y)', () => {
         expect(serious).toEqual([]);
     });
 
-    test('Controller: i touch target dovrebbero avere dimensione minima', async ({ page }) => {
+    test('Controller: i touch target dovrebbero avere dimensione minima', async ({ context }) => {
-        await page.goto('http://localhost:3001');
+        const page = await openController(context);
-        await page.waitForSelector('.conn-bar.connected');
+        await resetGame(page);
 
         // Controlla che i bottoni principali abbiano dimensione minima 44x44px
         const buttons = page.locator('.btn-ctrl');
@@ -56,9 +60,9 @@ test.describe('Accessibility (a11y)', () => {
         }
     });
 
-    test('Controller: i bottoni punteggio dovrebbero avere dimensione adeguata', async ({ page }) => {
+    test('Controller: i bottoni punteggio dovrebbero avere dimensione adeguata', async ({ context }) => {
-        await page.goto('http://localhost:3001');
+        const page = await openController(context);
-        await page.waitForSelector('.conn-bar.connected');
+        await resetGame(page);
 
         const scoreButtons = page.locator('.team-score');
         const count = await scoreButtons.count();

tests/e2e/basic-flow.spec.cjs

@@ -1,24 +1,19 @@
 const { test, expect } = require('@playwright/test');
+const { openController, openDisplay, resetGame } = require('./helpers.cjs');
 
 test.describe('Basic Flow: Controller ↔ Display', () => {
 
     test('dovrebbe caricare Display e Controller con i titoli corretti', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.goto('http://localhost:3001');
 
         await expect(displayPage).toHaveTitle(/Segnapunti/);
         await expect(controllerPage).toHaveTitle(/Controller/);
     });
 
     test('il punteggio iniziale dovrebbe essere 0-0', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
+        await resetGame(controllerPage);
-
-        // Attende la connessione WebSocket
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         const homeScore = controllerPage.locator('.team-score.home-bg .team-pts');
         const guestScore = controllerPage.locator('.team-score.guest-bg .team-pts');
@@ -27,22 +22,10 @@ test.describe('Basic Flow: Controller ↔ Display', () => {
     });
 
     test('click +1 Home sul Controller dovrebbe aggiornare il Display', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
 
-        await displayPage.goto('http://localhost:3000');
+        await resetGame(controllerPage);
-        await controllerPage.goto('http://localhost:3001');
-
-        // Attende la connessione WebSocket del controller
-        await controllerPage.waitForSelector('.conn-bar.connected');
-
-        // Reset per stato pulito
-        await controllerPage.getByText(/Reset/i).first().click();
-        const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
-        if (await btnConfirm.isVisible()) {
-            await btnConfirm.click();
-        }
-        await controllerPage.waitForTimeout(200);
 
         // Click +1 Home
         await controllerPage.locator('.team-score.home-bg').click();
@@ -56,21 +39,10 @@ test.describe('Basic Flow: Controller ↔ Display', () => {
     });
 
     test('click +1 Guest sul Controller dovrebbe aggiornare il Display', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
 
-        await displayPage.goto('http://localhost:3000');
+        await resetGame(controllerPage);
-        await controllerPage.goto('http://localhost:3001');
-
-        await controllerPage.waitForSelector('.conn-bar.connected');
-
-        // Reset
-        await controllerPage.getByText(/Reset/i).first().click();
-        const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
-        if (await btnConfirm.isVisible()) {
-            await btnConfirm.click();
-        }
-        await controllerPage.waitForTimeout(200);
 
         // Click +1 Guest
         await controllerPage.locator('.team-score.guest-bg').click();
@@ -84,21 +56,10 @@ test.describe('Basic Flow: Controller ↔ Display', () => {
     });
 
     test('la sincronizzazione dovrebbe funzionare con punti alternati', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
 
-        await displayPage.goto('http://localhost:3000');
+        await resetGame(controllerPage);
-        await controllerPage.goto('http://localhost:3001');
-
-        await controllerPage.waitForSelector('.conn-bar.connected');
-
-        // Reset
-        await controllerPage.getByText(/Reset/i).first().click();
-        const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
-        if (await btnConfirm.isVisible()) {
-            await btnConfirm.click();
-        }
-        await controllerPage.waitForTimeout(200);
 
         // Home +1, Guest +1, Home +1
         await controllerPage.locator('.team-score.home-bg').click();

tests/e2e/full-match.spec.cjs

@@ -1,43 +1,10 @@
 const { test, expect } = require('@playwright/test');
-
+const { openController, resetGame, addPoints } = require('./helpers.cjs');
-// Helper: reset dal controller
-async function resetGame(controllerPage) {
-    await controllerPage.getByText(/Reset/i).first().click();
-    const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
-    if (await btnConfirm.isVisible()) {
-        await btnConfirm.click();
-    }
-    await controllerPage.waitForTimeout(300);
-}
-
-// Helper: incrementa punti per una squadra N volte
-async function addPoints(controllerPage, team, count) {
-    const selector = team === 'home' ? '.team-score.home-bg' : '.team-score.guest-bg';
-    for (let i = 0; i < count; i++) {
-        await controllerPage.locator(selector).click();
-        await controllerPage.waitForTimeout(30);
-    }
-    await controllerPage.waitForTimeout(100);
-}
-
-// Helper: assegna un set a una squadra (25 punti + click SET)
-async function winSet(controllerPage, team) {
-    await addPoints(controllerPage, team, 25);
-    // Clicca bottone SET
-    const setSelector = team === 'home' ? '.btn-set.home-bg' : '.btn-set.guest-bg';
-    await controllerPage.locator(setSelector).click();
-    await controllerPage.waitForTimeout(100);
-    // Reset punti per il prossimo set
-    // (in questo gioco i punti non si resettano automaticamente, serve reset manuale
-    //  o il controller gestisce il prossimo set manualmente)
-}
 
 test.describe('Full Match Simulation', () => {
 
-    test('Partita 2/3: Home vince 2 set a 0', async ({ context }) => {
+    test('Partita 2/3: Home vince il primo set', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         await resetGame(controllerPage);
 
@@ -54,18 +21,19 @@ test.describe('Full Match Simulation', () => {
         // Verifica punteggio 25
         await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('25');
 
-        // Incrementa set Home
+        // A 25-0 compare automaticamente il dialog "SET VINTO": vai al set successivo
-        await controllerPage.locator('.btn-set.home-bg').click();
+        await controllerPage.waitForSelector('.dialog-winner');
-        await controllerPage.waitForTimeout(100);
+        await controllerPage.getByText('VAI AL SET SUCCESSIVO').click();
+        // doNuovoSet riapre il dialog di configurazione: chiudilo
+        await controllerPage.locator('.dialog-config .btn-cancel').click();
+        await controllerPage.waitForTimeout(200);
 
         // Verifica set 1 per Home
         await expect(controllerPage.locator('.team-score.home-bg .team-set')).toContainText('SET 1');
     });
 
     test('Set decisivo 2/3: vittoria a 15 punti', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         await resetGame(controllerPage);
 
@@ -92,17 +60,12 @@ test.describe('Full Match Simulation', () => {
         // Verifica punteggio 15 (e il set è decisivo: dopo 15 punti il gioco è vinto)
         await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('15');
 
-        // Verifica che non si possono aggiungere altri punti (vittoria)
+        // A 15 nel set decisivo scatta la vittoria: compare il dialog (PARTITA FINITA)
-        await controllerPage.locator('.team-score.home-bg').click();
+        await expect(controllerPage.locator('.dialog-winner')).toBeVisible();
-        await controllerPage.waitForTimeout(100);
-        // Dovrebbe restare 15 (checkVittoria blocca incPunt)
-        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('15');
     });
 
     test('Set normale: punti oltre 25 fino ai vantaggi', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         await resetGame(controllerPage);
 
@@ -123,9 +86,7 @@ test.describe('Full Match Simulation', () => {
         await controllerPage.waitForTimeout(100);
         await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('26');
 
-        // 26-24 è vittoria → non si possono più aggiungere punti
+        // 26-24 è vittoria → compare automaticamente il dialog SET VINTO
-        await controllerPage.locator('.team-score.home-bg').click();
+        await expect(controllerPage.locator('.dialog-winner')).toBeVisible();
-        await controllerPage.waitForTimeout(100);
-        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('26');
     });
 });

tests/e2e/game-operations.spec.cjs

@@ -1,22 +1,10 @@
 const { test, expect } = require('@playwright/test');
-
+const { openController, openDisplay, resetGame } = require('./helpers.cjs');
-// Helper: reset dal controller
-async function resetGame(controllerPage) {
-    await controllerPage.getByText(/Reset/i).first().click();
-    const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
-    if (await btnConfirm.isVisible()) {
-        await btnConfirm.click();
-    }
-    await controllerPage.waitForTimeout(300);
-}
 
 test.describe('Game Operations', () => {
 
     test('Undo: dovrebbe annullare l\'ultimo punto', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
-
         await resetGame(controllerPage);
 
         // Incrementa Home a 1
@@ -31,9 +19,8 @@ test.describe('Game Operations', () => {
     });
 
     test('Reset: dovrebbe azzerare tutto dopo conferma', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
+        await resetGame(controllerPage);
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         // Imposta qualche punto
         for (let i = 0; i < 5; i++) {
@@ -50,12 +37,9 @@ test.describe('Game Operations', () => {
     });
 
     test('Config: dovrebbe cambiare i nomi dei team', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-
+        await resetGame(controllerPage);
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         // Apri config
         await controllerPage.getByText('Config').click();
@@ -80,12 +64,9 @@ test.describe('Game Operations', () => {
     });
 
     test('Toggle Formazione: dovrebbe mostrare la formazione sul display', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-
+        await resetGame(controllerPage);
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         // Inizialmente mostra punteggio, non formazione
         await expect(displayPage.locator('.punteggio-container')).toBeVisible();
@@ -99,12 +80,9 @@ test.describe('Game Operations', () => {
     });
 
     test('Toggle Striscia: dovrebbe nascondere/mostrare la striscia', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-
+        await resetGame(controllerPage);
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         // Inizialmente la striscia è visibile
         await expect(displayPage.locator('.striscia')).toBeVisible();
@@ -121,12 +99,8 @@ test.describe('Game Operations', () => {
     });
 
     test('Cambi: dovrebbe effettuare una sostituzione giocatore', async ({ context }) => {
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         await resetGame(controllerPage);
 
@@ -156,9 +130,7 @@ test.describe('Game Operations', () => {
     });
 
     test('Cambi: dovrebbe mostrare errore per giocatore non in formazione', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         await resetGame(controllerPage);
 

tests/e2e/game-simulation.spec.cjs

@@ -1,69 +1,28 @@
 const { test, expect } = require('@playwright/test');
+const { openController, openDisplay, resetGame, addPoints } = require('./helpers.cjs');
 
 test.describe('Game Simulation', () => {
     test('Simulazione Partita: Controller aggiunge punti finché non cambia il set', async ({ context }) => {
-        // 1. Setup Pagine
+        const displayPage = await openDisplay(context);
-        const displayPage = await context.newPage();
+        const controllerPage = await openController(context);
-        const controllerPage = await context.newPage();
 
-        await displayPage.goto('http://localhost:3000');
+        await resetGame(controllerPage);
-        await controllerPage.goto('http://localhost:3001');
 
-        // Selettori (basati su ID ipotetici o classi, adattali al tuo HTML reale)
+        // Porta Home a 25: in ControllerPage il click su .team-score.home-bg
-        // Assumo che nel DOM ci siano elementi con ID o classi riconoscibili
+        // incrementa i punti home. A 25-0 scatta la vittoria del set.
-        // E che i punteggi siano visibili.
+        await addPoints(controllerPage, 'home', 25);
 
-        // Pulisco lo stato iniziale (reset)
+        // A 25-0 compare automaticamente il dialog "SET VINTO"
-        const btnReset = controllerPage.getByText(/Reset/i).first();
-        if (await btnReset.isVisible()) {
-            await btnReset.click();
-            // La modale di conferma ha un bottone "SI" con classe .btn-confirm
-            const btnConfirmReset = controllerPage.locator('.dialog .btn-confirm').getByText('SI');
-            if (await btnConfirmReset.isVisible()) {
-                await btnConfirmReset.click();
-            }
-        }
-
-        // 2. Loop per vincere il primo set (25 punti)
-        // In ControllerPage.vue, il click su .team-score.home-bg incrementa i punti home
-        const btnHomeScore = controllerPage.locator('.team-score.home-bg');
-
-        for (let i = 0; i < 25; i++) {
-            await btnHomeScore.click();
-            // Piccola pausa per lasciare tempo al server di processare e broadcastare
-            //await displayPage.waitForTimeout(10); 
-        }
-
-        // 3. Verifica Vittoria Set
-        // I punti dovrebbero essere tornati a 0 (o mostrare 25 prima del reset manuale?)
-        // Il codice gameState dice: checkVittoria -> resetta solo se qualcuno chiama resetta?
-        // No, checkVittoria è boolean. applyAction('incPunt') incrementa.
-        // Se vince, il set incrementa? 'incPunt' non incrementa i set in automatico nel codice gameState checkato prima!
-        // Controllo applyAction:
-        // "s.sp.punt[team]++" ... POI "checkVittoria(s)" all'inizio del prossimo incPunt?
-        // NO: "if (checkVittoria(s)) break" all'inizio di incPunt impedisce di andare oltre 25 se già vinto.
-        // MA 'incSet' è un'azione separata!
-
-        // Aspetta, la logica standard è: arrivo a 25 -> vinco set?
-        // In questo codice `gameState.js` NON c'è automatismo "arrivo a 25 -> set++ e palla al centro".
-        // L'utente deve cliccare "SET Antoniana" manualmente?
-        // Guardiamo ControllerPage.vue:
-        // C'è un bottone "SET {{ state.sp.nomi.home }}" che manda { type: 'incSet', team: 'home' }
-
-        // QUINDI: Il test deve:
-        // 1. Arrivare a 25 pt.
-        // 2. Cliccare "SET HOME".
-        // 3. Verificare che Set Home = 1.
-
-        // Verifica che siamo a 25
         await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('25');
+        await controllerPage.waitForSelector('.dialog-winner');
 
-        // Clicca bottone SET
+        // Procedi al set successivo: registra il set vinto da Home
-        const btnSetHome = controllerPage.locator('.btn-set.home-bg');
+        await controllerPage.getByText('VAI AL SET SUCCESSIVO').click();
-        await btnSetHome.click();
+        // doNuovoSet riapre il dialog di configurazione: chiudilo
+        await controllerPage.locator('.dialog-config .btn-cancel').click();
+        await controllerPage.waitForTimeout(300);
 
-        // Verifica che il set sia incrementato
+        // Verifica che il set Home sia incrementato a 1
-        // Nota: display potrebbe chiamarsi diversamente, controlliamo Controller per coerenza
         await expect(controllerPage.locator('.team-score.home-bg .team-set')).toContainText('SET 1');
     });
 });

tests/e2e/helpers.cjs

@@ -0,0 +1,81 @@
+// Helper condivisi per gli E2E.
+// Nota: lo stato di gioco è UNICO e persistente sul server, quindi ogni test
+// deve riportarlo a zero (resetGame) e gestire eventuali dialog rimasti aperti
+// dal test precedente.
+
+const CONTROLLER_URL = 'http://localhost:3000/controller';
+const DISPLAY_URL = 'http://localhost:3000';
+
+// Apre il controller in viewport portrait (layout "mobile", su cui si basano i
+// selettori dei test) e attende la connessione WebSocket.
+async function openController(context) {
+    const page = await context.newPage();
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.goto(CONTROLLER_URL);
+    await page.waitForSelector('.conn-bar.connected');
+    return page;
+}
+
+// Apre il display.
+async function openDisplay(context) {
+    const page = await context.newPage();
+    await page.goto(DISPLAY_URL);
+    return page;
+}
+
+// Chiude l'eventuale dialog di fine set / fine partita (può essersi aperto in
+// automatico al caricamento se lo stato persistito era già "vinto").
+async function chiudiDialogVittoria(page) {
+    if (await page.locator('.dialog-winner').isVisible().catch(() => false)) {
+        const chiudi = page.getByRole('button', { name: 'CHIUDI' });
+        if (await chiudi.isVisible().catch(() => false)) {
+            await chiudi.click();
+        } else {
+            await page.getByText('INDIETRO').click();
+        }
+        await page.waitForTimeout(150);
+    }
+}
+
+// Reset completo dello stato dal controller:
+// 1) chiude un eventuale dialog di vittoria, 2) azzera, 3) nel dialog di
+// configurazione che doReset riapre, reimposta nomi di default e conferma.
+// Reimpostare i nomi rende lo stato deterministico (lo stato è condiviso e
+// persistente: senza questo i nomi di un test precedente "sporcano" gli altri,
+// in particolare gli screenshot di visual-regression).
+async function resetGame(page) {
+    await chiudiDialogVittoria(page);
+    await page.getByText(/Reset/i).first().click();
+    const btnConfirm = page.locator('.dialog .btn-confirm');
+    if (await btnConfirm.isVisible().catch(() => false)) {
+        await btnConfirm.click();
+    }
+    const cfg = page.locator('.dialog-config');
+    if (await cfg.isVisible().catch(() => false)) {
+        const inputs = page.locator('.dialog-config .input-field');
+        await inputs.first().fill('Antoniana');
+        await inputs.nth(1).fill('Guest');
+        await page.locator('.dialog-config .btn-confirm').click();
+    }
+    await page.waitForTimeout(300);
+}
+
+// Incrementa N punti per una squadra cliccando il punteggio.
+async function addPoints(page, team, count) {
+    const selector = team === 'home' ? '.team-score.home-bg' : '.team-score.guest-bg';
+    for (let i = 0; i < count; i++) {
+        await page.locator(selector).click();
+        await page.waitForTimeout(30);
+    }
+    await page.waitForTimeout(100);
+}
+
+module.exports = {
+    CONTROLLER_URL,
+    DISPLAY_URL,
+    openController,
+    openDisplay,
+    chiudiDialogVittoria,
+    resetGame,
+    addPoints,
+};

tests/e2e/referto.spec.cjs

@@ -0,0 +1,48 @@
+const { test, expect } = require('@playwright/test');
+const { openController, resetGame, addPoints } = require('./helpers.cjs');
+
+test.describe('Referto di fine partita', () => {
+
+    test('a PARTITA FINITA il bottone REFERTO apre il referto stampabile', async ({ context }) => {
+        // window.print() bloccherebbe il test: lo neutralizziamo (anche nel popup).
+        await context.addInitScript(() => { window.print = () => {}; });
+
+        const controllerPage = await openController(context);
+        await resetGame(controllerPage);
+
+        // Modalità 2/3 (bastano 2 set per chiudere la partita)
+        await controllerPage.getByText('Config').click();
+        await controllerPage.waitForSelector('.dialog-config');
+        await controllerPage.locator('.btn-mode').getByText('2/3').click();
+        await controllerPage.locator('.dialog-config .btn-confirm').click();
+        await controllerPage.waitForTimeout(200);
+
+        // SET 1: Home a 25 → dialog SET VINTO → vai al set successivo
+        await addPoints(controllerPage, 'home', 25);
+        await controllerPage.waitForSelector('.dialog-winner');
+        await controllerPage.getByText('VAI AL SET SUCCESSIVO').click();
+        await controllerPage.locator('.dialog-config .btn-cancel').click();
+        await controllerPage.waitForTimeout(200);
+
+        // SET 2: Home a 25 → PARTITA FINITA
+        await addPoints(controllerPage, 'home', 25);
+        await controllerPage.waitForSelector('.dialog-winner');
+
+        const referto = controllerPage.getByRole('button', { name: 'REFERTO' });
+        await expect(referto).toBeVisible();
+
+        // Il click apre il referto in un nuovo popup
+        const [popup] = await Promise.all([
+            context.waitForEvent('page'),
+            referto.click(),
+        ]);
+
+        // Verifica il contenuto del referto
+        const body = popup.locator('body');
+        await expect(body).toContainText('Referto di Gara');
+        await expect(body).toContainText('Set 1');
+        await expect(body).toContainText('Set 2');
+        // Home ha vinto 2 set a 0
+        await expect(body).toContainText('2 – 0');
+    });
+});

tests/e2e/timeout.spec.cjs

@@ -0,0 +1,56 @@
+const { test, expect } = require('@playwright/test');
+const { openController, openDisplay, resetGame } = require('./helpers.cjs');
+
+// Il flusso usa sempre l'opzione "Nessun video": non dipende dal contenuto
+// della cartella spot/ e resta deterministico su qualsiasi macchina.
+test.describe('Time Out', () => {
+
+    test('flusso completo: avvio, overlay sul display, chiusura anticipata', async ({ context }) => {
+        const displayPage = await openDisplay(context);
+        const controllerPage = await openController(context);
+        await resetGame(controllerPage);
+
+        // Apri la modal time out
+        await controllerPage.locator('.btn-timeout').click();
+        await expect(controllerPage.locator('.dialog-timeout')).toBeVisible();
+
+        // Avvia è disabilitato finché non si sceglie la squadra
+        const avvia = controllerPage.locator('.dialog-timeout .btn-confirm');
+        await expect(avvia).toBeDisabled();
+
+        // Scegli squadra Home e nessun video
+        await controllerPage.locator('.dialog-timeout .btn-set.home-bg').click();
+        await controllerPage.locator('.timeout-video-option').last().locator('input').check();
+        await expect(avvia).toBeEnabled();
+        await avvia.click();
+
+        // Display: overlay a tutto schermo con countdown e squadra
+        await expect(displayPage.locator('.timeout-overlay')).toBeVisible();
+        await expect(displayPage.locator('.timeout-placeholder')).toContainText('TIME OUT');
+        await expect(displayPage.locator('.timeout-placeholder')).toContainText('Antoniana');
+        await expect(displayPage.locator('.timeout-countdown')).toBeVisible();
+
+        // Controller: banner attivo con nome squadra
+        await expect(controllerPage.locator('.timeout-banner')).toContainText('TIME OUT');
+        await expect(controllerPage.locator('.timeout-banner')).toContainText('Antoniana');
+
+        // Chiusura anticipata: il bottone (che mostra il countdown) invia stopTimeout
+        await controllerPage.locator('.btn-timeout').click();
+        await expect(displayPage.locator('.timeout-overlay')).not.toBeVisible();
+        await expect(controllerPage.locator('.timeout-banner')).not.toBeVisible();
+    });
+
+    test('Annulla chiude la modal senza avviare il time out', async ({ context }) => {
+        const displayPage = await openDisplay(context);
+        const controllerPage = await openController(context);
+        await resetGame(controllerPage);
+
+        await controllerPage.locator('.btn-timeout').click();
+        await expect(controllerPage.locator('.dialog-timeout')).toBeVisible();
+
+        await controllerPage.locator('.dialog-timeout .btn-cancel').click();
+        await expect(controllerPage.locator('.dialog-timeout')).not.toBeVisible();
+        await expect(controllerPage.locator('.timeout-banner')).not.toBeVisible();
+        await expect(displayPage.locator('.timeout-overlay')).not.toBeVisible();
+    });
+});

tests/e2e/visual-regression.spec.cjs

@@ -1,26 +1,12 @@
 const { test, expect } = require('@playwright/test');
-
+const { openController, openDisplay, resetGame, addPoints } = require('./helpers.cjs');
-// Helper: reset dal controller
-async function resetGame(controllerPage) {
-    await controllerPage.getByText(/Reset/i).first().click();
-    const btnConfirm = controllerPage.locator('.dialog .btn-confirm');
-    if (await btnConfirm.isVisible()) {
-        await btnConfirm.click();
-    }
-    await controllerPage.waitForTimeout(300);
-}
 
 test.describe('Visual Regression', () => {
 
     test('Display: screenshot a 0-0', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
 
-        await controllerPage.goto('http://localhost:3001');
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.waitForSelector('.conn-bar.connected');
-
-        // Reset per stato pulito
         await resetGame(controllerPage);
 
         // Attende che il display riceva lo stato
@@ -28,40 +14,31 @@ test.describe('Visual Regression', () => {
 
         await expect(displayPage).toHaveScreenshot('display-0-0.png', {
             maxDiffPixelRatio: 0.05,
+            animations: 'disabled',
+            mask: [displayPage.locator('.connection-status')],
         });
     });
 
     test('Display: screenshot durante partita (15-12)', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        const displayPage = await context.newPage();
+        const displayPage = await openDisplay(context);
-
-        await controllerPage.goto('http://localhost:3001');
-        await displayPage.goto('http://localhost:3000');
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         await resetGame(controllerPage);
 
         // Porta il punteggio a 15-12
-        for (let i = 0; i < 15; i++) {
+        await addPoints(controllerPage, 'home', 15);
-            await controllerPage.locator('.team-score.home-bg').click();
+        await addPoints(controllerPage, 'guest', 12);
-            await controllerPage.waitForTimeout(20);
-        }
-        for (let i = 0; i < 12; i++) {
-            await controllerPage.locator('.team-score.guest-bg').click();
-            await controllerPage.waitForTimeout(20);
-        }
         await displayPage.waitForTimeout(500);
 
         await expect(displayPage).toHaveScreenshot('display-15-12.png', {
             maxDiffPixelRatio: 0.05,
+            animations: 'disabled',
+            mask: [displayPage.locator('.connection-status')],
         });
     });
 
     test('Controller: screenshot stato iniziale', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
-        await controllerPage.waitForSelector('.conn-bar.connected');
-
         await resetGame(controllerPage);
 
         await expect(controllerPage).toHaveScreenshot('controller-initial.png', {
@@ -70,9 +47,8 @@ test.describe('Visual Regression', () => {
     });
 
     test('Controller: screenshot con modal config aperta', async ({ context }) => {
-        const controllerPage = await context.newPage();
+        const controllerPage = await openController(context);
-        await controllerPage.goto('http://localhost:3001');
+        await resetGame(controllerPage);
-        await controllerPage.waitForSelector('.conn-bar.connected');
 
         // Apri config
         await controllerPage.getByText('Config').click();

tests/integration/server.test.js

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest'
+import { mkdtempSync, writeFileSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { createApp } from '../../server.js'
+
+// Usiamo una dist e una cartella spot temporanee con file marcatori, così il
+// test non dipende da una build reale ed è deterministico.
+let server
+let baseUrl
+let distDir
+let spotDir
+
+beforeAll(async () => {
+    distDir = mkdtempSync(join(tmpdir(), 'segnapunti-dist-'))
+    writeFileSync(join(distDir, 'index.html'), 'DISPLAY_MARKER')
+    writeFileSync(join(distDir, 'controller.html'), 'CONTROLLER_MARKER')
+    writeFileSync(join(distDir, 'app.js'), 'ASSET_MARKER')
+
+    spotDir = mkdtempSync(join(tmpdir(), 'segnapunti-spot-'))
+    writeFileSync(join(spotDir, 'b.mp4'), 'VIDEO_B')
+    writeFileSync(join(spotDir, 'a.mp4'), 'VIDEO_A')
+    writeFileSync(join(spotDir, 'note.txt'), 'NON_VIDEO')
+
+    const app = createApp(distDir, spotDir)
+    await new Promise((resolve) => {
+        server = app.listen(0, () => {
+            baseUrl = `http://127.0.0.1:${server.address().port}`
+            resolve()
+        })
+    })
+})
+
+afterAll(async () => {
+    await new Promise((resolve) => server.close(resolve))
+    rmSync(distDir, { recursive: true, force: true })
+    rmSync(spotDir, { recursive: true, force: true })
+})
+
+async function get(path) {
+    const res = await fetch(baseUrl + path)
+    return { status: res.status, body: await res.text() }
+}
+
+describe('Routing server (server.js)', () => {
+    it('GET / serve la pagina display', async () => {
+        const { status, body } = await get('/')
+        expect(status).toBe(200)
+        expect(body).toBe('DISPLAY_MARKER')
+    })
+
+    it('GET /display serve la pagina display', async () => {
+        expect((await get('/display')).body).toBe('DISPLAY_MARKER')
+    })
+
+    it('GET /display/qualsiasi serve comunque la pagina display (SPA)', async () => {
+        expect((await get('/display/foo/bar')).body).toBe('DISPLAY_MARKER')
+    })
+
+    it('GET /controller serve la pagina controller', async () => {
+        expect((await get('/controller')).body).toBe('CONTROLLER_MARKER')
+    })
+
+    it('GET /controller/qualsiasi serve comunque la pagina controller', async () => {
+        expect((await get('/controller/foo')).body).toBe('CONTROLLER_MARKER')
+    })
+
+    it('serve gli asset statici dalla dist', async () => {
+        const { status, body } = await get('/app.js')
+        expect(status).toBe(200)
+        expect(body).toBe('ASSET_MARKER')
+    })
+
+    it('GET /spot/list elenca i soli .mp4 in ordine alfabetico', async () => {
+        const res = await fetch(baseUrl + '/spot/list')
+        expect(res.status).toBe(200)
+        expect(await res.json()).toEqual(['a.mp4', 'b.mp4'])
+    })
+
+    it('serve i video staticamente da /spot/<file>', async () => {
+        const { status, body } = await get('/spot/a.mp4')
+        expect(status).toBe(200)
+        expect(body).toBe('VIDEO_A')
+    })
+
+    it('GET /spot/list ritorna [] se la cartella spot non esiste', async () => {
+        const app = createApp(distDir, join(spotDir, 'inesistente'))
+        const srv = await new Promise((resolve) => {
+            const s = app.listen(0, () => resolve(s))
+        })
+        try {
+            const res = await fetch(`http://127.0.0.1:${srv.address().port}/spot/list`)
+            expect(res.status).toBe(200)
+            expect(await res.json()).toEqual([])
+        } finally {
+            await new Promise((resolve) => srv.close(resolve))
+        }
+    })
+})

tests/integration/websocket.test.js

@@ -1,7 +1,11 @@
 import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
 import { setupWebSocketHandler } from '../../src/websocket-handler.js'
+import { punteggio } from '../../src/gameState.js'
 import { EventEmitter } from 'events'
 
+// Il punteggio non è memorizzato nello stato: si ricava dalla striscia.
+const puntHome = (state) => punteggio(state.sp.striscia).home
+
 // Mock parziale di una WebSocket e del Server
 class MockWebSocket extends EventEmitter {
     constructor() {
@@ -103,7 +107,7 @@ describe('WebSocket Integration (websocket-handler.js)', () => {
             expect(controller.send).toHaveBeenCalled()
             const sentMsg = lastSent(controller)
             expect(sentMsg.type).toBe('state')
-            expect(sentMsg.state.sp.punt.home).toBe(1)
+            expect(puntHome(sentMsg.state)).toBe(1)
         })
 
         it('dovrebbe impedire al display di inviare azioni', () => {
@@ -160,6 +164,117 @@ describe('WebSocket Integration (websocket-handler.js)', () => {
         })
     })
 
+    // =============================================
+    // TIME OUT (timer server-side)
+    // =============================================
+    describe('Time out', () => {
+        beforeEach(() => {
+            vi.useFakeTimers()
+        })
+
+        afterEach(() => {
+            vi.useRealTimers()
+        })
+
+        function inviaStartTimeout(controller, overrides = {}) {
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'startTimeout', team: 'home', video: 'spot.mp4', ...overrides }
+            }))
+        }
+
+        it('dovrebbe iniettare startedAt lato server (ignorando quello del client)', () => {
+            vi.setSystemTime(50000)
+            const controller = connectAndRegister(wss, 'controller')
+
+            inviaStartTimeout(controller, { startedAt: 12345 })
+
+            const state = handler.getState()
+            expect(state.timeout).toBe(true)
+            expect(state.timeoutStartedAt).toBe(50000)
+        })
+
+        it('dovrebbe chiudere automaticamente il time out dopo 30 secondi', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            const display = connectAndRegister(wss, 'display')
+
+            inviaStartTimeout(controller)
+            expect(handler.getState().timeout).toBe(true)
+
+            vi.advanceTimersByTime(29999)
+            expect(handler.getState().timeout).toBe(true)
+
+            vi.advanceTimersByTime(1)
+            const state = handler.getState()
+            expect(state.timeout).toBe(false)
+            expect(state.timeoutTeam).toBe(null)
+            expect(state.timeoutVideo).toBe(null)
+            expect(state.timeoutStartedAt).toBe(null)
+
+            // La chiusura automatica viene broadcastata ai client
+            const msg = lastSent(display)
+            expect(msg.type).toBe('state')
+            expect(msg.state.timeout).toBe(false)
+        })
+
+        it('la chiusura automatica dovrebbe persistere lo stato (onStateChange)', () => {
+            const onStateChange = vi.fn()
+            wss = new MockWebSocketServer()
+            handler = setupWebSocketHandler(wss, { onStateChange })
+            const controller = connectAndRegister(wss, 'controller')
+
+            inviaStartTimeout(controller)
+            onStateChange.mockClear()
+
+            vi.advanceTimersByTime(30000)
+            expect(onStateChange).toHaveBeenCalledTimes(1)
+            expect(onStateChange.mock.calls[0][0].timeout).toBe(false)
+        })
+
+        it('stopTimeout manuale dovrebbe annullare il timer pendente', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            inviaStartTimeout(controller)
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'stopTimeout' }
+            }))
+            expect(handler.getState().timeout).toBe(false)
+            controller.send.mockClear()
+
+            // Allo scadere dei 30s non deve partire nessun broadcast fantasma
+            vi.advanceTimersByTime(30000)
+            expect(controller.send).not.toHaveBeenCalled()
+        })
+
+        it('un nuovo startTimeout dovrebbe riarmare il timer da capo', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            inviaStartTimeout(controller)
+            vi.advanceTimersByTime(20000)
+
+            // Riavvio: il timer riparte da zero
+            inviaStartTimeout(controller, { team: 'guest' })
+            vi.advanceTimersByTime(20000)
+            expect(handler.getState().timeout).toBe(true)
+            expect(handler.getState().timeoutTeam).toBe('guest')
+
+            vi.advanceTimersByTime(10000)
+            expect(handler.getState().timeout).toBe(false)
+        })
+
+        it('startTimeout con squadra non valida non dovrebbe armare il timer', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            inviaStartTimeout(controller, { team: 'arbitro' })
+            expect(handler.getState().timeout).toBe(false)
+            controller.send.mockClear()
+
+            vi.advanceTimersByTime(30000)
+            expect(controller.send).not.toHaveBeenCalled()
+        })
+    })
+
     // =============================================
     // BROADCAST MULTI-CLIENT
     // =============================================
@@ -182,8 +297,8 @@ describe('WebSocket Integration (websocket-handler.js)', () => {
             const msg1 = lastSent(display1)
             const msg2 = lastSent(display2)
             expect(msg1.type).toBe('state')
-            expect(msg1.state.sp.punt.home).toBe(1)
+            expect(puntHome(msg1.state)).toBe(1)
-            expect(msg2.state.sp.punt.home).toBe(1)
+            expect(puntHome(msg2.state)).toBe(1)
         })
 
         it('non dovrebbe inviare a client con readyState != OPEN', () => {
@@ -302,7 +417,7 @@ describe('WebSocket Integration (websocket-handler.js)', () => {
 
             const msg = lastSent(controller)
             expect(msg.type).toBe('state')
-            expect(msg.state.sp.punt.home).toBe(1)
+            expect(puntHome(msg.state)).toBe(1)
         })
     })
 
@@ -374,15 +489,15 @@ describe('WebSocket Integration (websocket-handler.js)', () => {
     describe('API pubblica', () => {
         it('getState dovrebbe restituire lo stato corrente', () => {
             const state = handler.getState()
-            expect(state.sp.punt.home).toBe(0)
+            expect(puntHome(state)).toBe(0)
-            expect(state.sp.punt.guest).toBe(0)
+            expect(punteggio(state.sp.striscia).guest).toBe(0)
         })
 
         it('setState dovrebbe sovrascrivere lo stato', () => {
             const newState = handler.getState()
-            newState.sp.punt.home = 99
+            newState.sp.striscia.at(-1).ris = 'hh'
             handler.setState(newState)
-            expect(handler.getState().sp.punt.home).toBe(99)
+            expect(puntHome(handler.getState())).toBe(2)
         })
 
         it('broadcastState dovrebbe inviare a tutti i client', () => {

tests/stress/websocket-load.test.js

@@ -1,7 +1,11 @@
 import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
 import { setupWebSocketHandler } from '../../src/websocket-handler.js'
+import { punteggio } from '../../src/gameState.js'
 import { EventEmitter } from 'events'
 
+// Il punteggio si ricava dalla striscia, non è memorizzato nello stato.
+const punt = (state) => punteggio(state.sp.striscia)
+
 class MockWebSocket extends EventEmitter {
     constructor() {
         super()
@@ -57,7 +61,7 @@ describe('Stress Test WebSocket', () => {
             expect(display.send).toHaveBeenCalled()
             const msg = JSON.parse(display.send.mock.calls[display.send.mock.calls.length - 1][0])
             expect(msg.type).toBe('state')
-            expect(msg.state.sp.punt.home).toBe(1)
+            expect(punt(msg.state).home).toBe(1)
         }
     })
 
@@ -81,11 +85,11 @@ describe('Stress Test WebSocket', () => {
         // Lo stato finale dipende da checkVittoria che blocca a 25+2
         // Home arriva a 25-0 → vittoria → blocca. Quindi punti home = 25
         const state = handler.getState()
-        expect(state.sp.punt.home).toBe(25)
+        expect(punt(state).home).toBe(25)
         // Guest: non può segnare dopo vittoria? No, checkVittoria blocca solo il team che ha vinto?
         // Controlliamo: checkVittoria controlla ENTRAMBI i team.
         // A 25-0 → vittoria=true → incPunt per guest è anche bloccato
-        expect(state.sp.punt.guest).toBe(0)
+        expect(punt(state).guest).toBe(0)
     })
 
     it('dovrebbe garantire che tutti i display ricevano ogni update sotto carico', () => {
@@ -112,7 +116,7 @@ describe('Stress Test WebSocket', () => {
         // Verifica stato finale su tutti i display
         for (const display of displays) {
             const lastMsg = JSON.parse(display.send.mock.calls[4][0])
-            expect(lastMsg.state.sp.punt.home).toBe(5)
+            expect(punt(lastMsg.state).home).toBe(5)
         }
     })
 })

tests/unit/gameState.test.js

@@ -1,5 +1,39 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { createInitialState, applyAction, checkVittoria } from '../../src/gameState.js'
+import {
+    createInitialState, applyAction, checkVittoria, checkVittoriaPartita,
+    punteggio, setVinti, servizio,
+} from '../../src/gameState.js'
+
+// =============================================
+// HELPER
+// Lo stato non memorizza più punteggio/set/servizio direttamente:
+// si ricavano dalla striscia tramite le funzioni pure esportate.
+// =============================================
+
+// Punteggio del set in corso
+const puntDi = (s) => punteggio(s.sp.striscia)
+// Set vinti nel match
+const setDi = (s) => setVinti(s.sp.striscia)
+// true se serve Home
+const servDi = (s) => servizio(s.sp.striscia)
+
+// Imposta chi serve a inizio set (set in corso a 0-0)
+function setServizioIniziale(state, team) {
+    state.sp.striscia.at(-1).serv = team === 'home' ? 'h' : 'g'
+}
+
+// Imposta il punteggio del set in corso costruendo una ris coerente
+function setPunteggio(state, home, guest) {
+    state.sp.striscia.at(-1).ris = 'h'.repeat(home) + 'g'.repeat(guest)
+}
+
+// Aggiunge set già conclusi (vinti) PRIMA del set in corso
+function setSetVinti(state, home, guest) {
+    const conclusi = []
+    for (let i = 0; i < home; i++) conclusi.push({ serv: 'h', ris: '', vinc: 'h' })
+    for (let i = 0; i < guest; i++) conclusi.push({ serv: 'g', ris: '', vinc: 'g' })
+    state.sp.striscia = [...conclusi, state.sp.striscia.at(-1)]
+}
 
 describe('Game Logic (gameState.js)', () => {
     let state
@@ -13,17 +47,17 @@ describe('Game Logic (gameState.js)', () => {
     // =============================================
     describe('Stato iniziale', () => {
         it('dovrebbe iniziare con 0-0', () => {
-            expect(state.sp.punt.home).toBe(0)
+            expect(puntDi(state).home).toBe(0)
-            expect(state.sp.punt.guest).toBe(0)
+            expect(puntDi(state).guest).toBe(0)
         })
 
         it('dovrebbe avere i set a 0', () => {
-            expect(state.sp.set.home).toBe(0)
+            expect(setDi(state).home).toBe(0)
-            expect(state.sp.set.guest).toBe(0)
+            expect(setDi(state).guest).toBe(0)
         })
 
         it('dovrebbe avere servizio Home', () => {
-            expect(state.sp.servHome).toBe(true)
+            expect(servDi(state)).toBe(true)
         })
 
         it('dovrebbe avere formazione di default [1-6]', () => {
@@ -33,8 +67,8 @@ describe('Game Logic (gameState.js)', () => {
 
         it('dovrebbe avere la striscia iniziale con un set vuoto', () => {
             expect(state.sp.striscia).toHaveLength(1)
-            expect(state.sp.striscia[0].serv).toBe('home')
+            expect(state.sp.striscia[0].serv).toBe('h')
-            expect(state.sp.striscia[0].r).toEqual([])
+            expect(state.sp.striscia[0].ris).toBe('')
         })
 
         it('dovrebbe avere modalità 3/5 di default', () => {
@@ -45,6 +79,13 @@ describe('Game Logic (gameState.js)', () => {
             expect(state.visuForm).toBe(false)
             expect(state.visuStriscia).toBe(true)
         })
+
+        it('dovrebbe avere timeout false e campi timeout nulli', () => {
+            expect(state.timeout).toBe(false)
+            expect(state.timeoutTeam).toBe(null)
+            expect(state.timeoutVideo).toBe(null)
+            expect(state.timeoutStartedAt).toBe(null)
+        })
     })
 
     // =============================================
@@ -69,43 +110,43 @@ describe('Game Logic (gameState.js)', () => {
     describe('incPunt', () => {
         it('dovrebbe incrementare i punti Home', () => {
             const newState = applyAction(state, { type: 'incPunt', team: 'home' })
-            expect(newState.sp.punt.home).toBe(1)
+            expect(puntDi(newState).home).toBe(1)
-            expect(newState.sp.punt.guest).toBe(0)
+            expect(puntDi(newState).guest).toBe(0)
         })
 
         it('dovrebbe incrementare i punti Guest', () => {
             const newState = applyAction(state, { type: 'incPunt', team: 'guest' })
-            expect(newState.sp.punt.guest).toBe(1)
+            expect(puntDi(newState).guest).toBe(1)
-            expect(newState.sp.punt.home).toBe(0)
+            expect(puntDi(newState).home).toBe(0)
         })
 
         it('dovrebbe gestire il cambio palla (Guest segna, batteva Home)', () => {
-            state.sp.servHome = true
+            setServizioIniziale(state, 'home')
             const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
-            expect(s1.sp.servHome).toBe(false)
+            expect(servDi(s1)).toBe(false)
         })
 
         it('dovrebbe gestire il cambio palla (Home segna, batteva Guest)', () => {
-            state.sp.servHome = false
+            setServizioIniziale(state, 'guest')
             const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
-            expect(s1.sp.servHome).toBe(true)
+            expect(servDi(s1)).toBe(true)
         })
 
         it('non dovrebbe cambiare palla se segna chi batte', () => {
-            state.sp.servHome = true
+            setServizioIniziale(state, 'home')
             const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
-            expect(s1.sp.servHome).toBe(true)
+            expect(servDi(s1)).toBe(true)
         })
 
         it('dovrebbe ruotare la formazione al cambio palla', () => {
-            state.sp.servHome = true
+            setServizioIniziale(state, 'home')
             state.sp.form.guest = ["1", "2", "3", "4", "5", "6"]
             const newState = applyAction(state, { type: 'incPunt', team: 'guest' })
             expect(newState.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
         })
 
         it('non dovrebbe ruotare la formazione se non c\'è cambio palla', () => {
-            state.sp.servHome = true
+            setServizioIniziale(state, 'home')
             state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
             const newState = applyAction(state, { type: 'incPunt', team: 'home' })
             expect(newState.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
@@ -113,26 +154,25 @@ describe('Game Logic (gameState.js)', () => {
 
         it('dovrebbe aggiornare la striscia per punto Home', () => {
             const s = applyAction(state, { type: 'incPunt', team: 'home' })
-            expect(s.sp.striscia.at(-1).r).toEqual(['home'])
+            expect(s.sp.striscia.at(-1).ris).toBe('h')
         })
 
         it('dovrebbe aggiornare la striscia per punto Guest', () => {
             const s = applyAction(state, { type: 'incPunt', team: 'guest' })
-            expect(s.sp.striscia.at(-1).r).toEqual(['guest'])
+            expect(s.sp.striscia.at(-1).ris).toBe('g')
         })
 
         it('dovrebbe registrare scorer nella striscia', () => {
             let s = applyAction(state, { type: 'incPunt', team: 'home' })
             s = applyAction(s, { type: 'incPunt', team: 'guest' })
             s = applyAction(s, { type: 'incPunt', team: 'home' })
-            expect(s.sp.striscia.at(-1).r).toEqual(['home', 'guest', 'home'])
+            expect(s.sp.striscia.at(-1).ris).toBe('hgh')
         })
 
         it('non dovrebbe incrementare i punti dopo vittoria', () => {
-            state.sp.punt.home = 25
+            setPunteggio(state, 25, 23)
-            state.sp.punt.guest = 23
             const s = applyAction(state, { type: 'incPunt', team: 'home' })
-            expect(s.sp.punt.home).toBe(25)
+            expect(puntDi(s).home).toBe(25)
         })
     })
 
@@ -143,33 +183,33 @@ describe('Game Logic (gameState.js)', () => {
         it('dovrebbe annullare l\'ultimo punto Home', () => {
             const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
             const s2 = applyAction(s1, { type: 'decPunt' })
-            expect(s2.sp.punt.home).toBe(0)
+            expect(puntDi(s2).home).toBe(0)
-            expect(s2.sp.punt.guest).toBe(0)
+            expect(puntDi(s2).guest).toBe(0)
         })
 
         it('dovrebbe annullare l\'ultimo punto Guest', () => {
             const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
             const s2 = applyAction(s1, { type: 'decPunt' })
-            expect(s2.sp.punt.home).toBe(0)
+            expect(puntDi(s2).home).toBe(0)
-            expect(s2.sp.punt.guest).toBe(0)
+            expect(puntDi(s2).guest).toBe(0)
         })
 
         it('non dovrebbe fare nulla sullo stato iniziale', () => {
             const s = applyAction(state, { type: 'decPunt' })
-            expect(s.sp.punt.home).toBe(0)
+            expect(puntDi(s).home).toBe(0)
-            expect(s.sp.punt.guest).toBe(0)
+            expect(puntDi(s).guest).toBe(0)
         })
 
         it('dovrebbe ripristinare il servizio dopo undo con cambio palla', () => {
-            state.sp.servHome = true
+            setServizioIniziale(state, 'home')
             const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
-            expect(s1.sp.servHome).toBe(false)
+            expect(servDi(s1)).toBe(false)
             const s2 = applyAction(s1, { type: 'decPunt' })
-            expect(s2.sp.servHome).toBe(true)
+            expect(servDi(s2)).toBe(true)
         })
 
         it('dovrebbe invertire la rotazione dopo undo con cambio palla', () => {
-            state.sp.servHome = true
+            setServizioIniziale(state, 'home')
             state.sp.form.guest = ["1", "2", "3", "4", "5", "6"]
             const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
             expect(s1.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
@@ -180,7 +220,7 @@ describe('Game Logic (gameState.js)', () => {
         it('dovrebbe ripristinare la striscia', () => {
             const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
             const s2 = applyAction(s1, { type: 'decPunt' })
-            expect(s2.sp.striscia.at(-1).r).toEqual([])
+            expect(s2.sp.striscia.at(-1).ris).toBe('')
         })
 
         it('dovrebbe gestire undo multipli in sequenza', () => {
@@ -188,14 +228,66 @@ describe('Game Logic (gameState.js)', () => {
             s = applyAction(s, { type: 'incPunt', team: 'home' })
             s = applyAction(s, { type: 'incPunt', team: 'guest' })
             s = applyAction(s, { type: 'incPunt', team: 'home' })
-            expect(s.sp.punt.home).toBe(2)
+            expect(puntDi(s).home).toBe(2)
-            expect(s.sp.punt.guest).toBe(1)
+            expect(puntDi(s).guest).toBe(1)
             s = applyAction(s, { type: 'decPunt' })
-            expect(s.sp.punt.home).toBe(1)
+            expect(puntDi(s).home).toBe(1)
             s = applyAction(s, { type: 'decPunt' })
-            expect(s.sp.punt.guest).toBe(0)
+            expect(puntDi(s).guest).toBe(0)
             s = applyAction(s, { type: 'decPunt' })
-            expect(s.sp.punt.home).toBe(0)
+            expect(puntDi(s).home).toBe(0)
+        })
+    })
+
+    // =============================================
+    // FORMAZIONE DI PARTENZA (formInizio)
+    // =============================================
+    describe('formInizio', () => {
+        it('dovrebbe salvare la formazione corrente al primo punto del set', () => {
+            const s = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s.sp.striscia.at(-1).formInizio).toEqual({
+                home: ["1", "2", "3", "4", "5", "6"],
+                guest: ["1", "2", "3", "4", "5", "6"],
+            })
+        })
+
+        it('formInizio è uno snapshot: la rotazione successiva non lo modifica', () => {
+            setServizioIniziale(state, 'home')
+            // 1° punto Home: nessun cambio palla, salva formInizio
+            let s = applyAction(state, { type: 'incPunt', team: 'home' })
+            // 2° punto Guest: cambio palla → ruota la formazione guest
+            s = applyAction(s, { type: 'incPunt', team: 'guest' })
+            expect(s.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
+            // lo snapshot resta quello iniziale
+            expect(s.sp.striscia.at(-1).formInizio.guest).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('decPunt che riporta il set a 0-0 cancella formInizio', () => {
+            const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s1.sp.striscia.at(-1).formInizio).toBeDefined()
+            const s2 = applyAction(s1, { type: 'decPunt' })
+            expect(s2.sp.striscia.at(-1).formInizio).toBeUndefined()
+        })
+
+        it('decPunt con punti ancora presenti NON cancella formInizio', () => {
+            let s = applyAction(state, { type: 'incPunt', team: 'home' })
+            s = applyAction(s, { type: 'incPunt', team: 'home' })
+            s = applyAction(s, { type: 'decPunt' })
+            expect(s.sp.striscia.at(-1).ris).toBe('h')
+            expect(s.sp.striscia.at(-1).formInizio).toBeDefined()
+        })
+
+        it('ogni set mantiene la propria formInizio', () => {
+            const custom = ['7', '8', '9', '10', '11', '12']
+            let s = applyAction(state, { type: 'setFormazione', team: 'home', form: custom })
+            // primo punto del set 1: salva formInizio custom
+            s = applyAction(s, { type: 'incPunt', team: 'home' })
+            // chiude il set 1 e ne apre uno nuovo (formazioni resettate a default)
+            s = applyAction(s, { type: 'nuovoSet', team: 'home' })
+            // primo punto del set 2: salva formInizio default
+            s = applyAction(s, { type: 'incPunt', team: 'home' })
+            expect(s.sp.striscia[0].formInizio.home).toEqual(custom)
+            expect(s.sp.striscia.at(-1).formInizio.home).toEqual(['1', '2', '3', '4', '5', '6'])
         })
     })
 
@@ -205,24 +297,27 @@ describe('Game Logic (gameState.js)', () => {
     describe('incSet', () => {
         it('dovrebbe incrementare il set Home', () => {
             const s = applyAction(state, { type: 'incSet', team: 'home' })
-            expect(s.sp.set.home).toBe(1)
+            expect(setDi(s).home).toBe(1)
         })
 
         it('dovrebbe incrementare il set Guest', () => {
             const s = applyAction(state, { type: 'incSet', team: 'guest' })
-            expect(s.sp.set.guest).toBe(1)
+            expect(setDi(s).guest).toBe(1)
         })
 
         it('dovrebbe fare wrap da 2 a 0', () => {
-            state.sp.set.home = 2
+            let s = applyAction(state, { type: 'incSet', team: 'home' })
-            const s = applyAction(state, { type: 'incSet', team: 'home' })
+            s = applyAction(s, { type: 'incSet', team: 'home' })
-            expect(s.sp.set.home).toBe(0)
+            expect(setDi(s).home).toBe(2)
+            s = applyAction(s, { type: 'incSet', team: 'home' })
+            expect(setDi(s).home).toBe(0)
         })
 
         it('dovrebbe incrementare da 1 a 2', () => {
-            state.sp.set.home = 1
+            let s = applyAction(state, { type: 'incSet', team: 'home' })
-            const s = applyAction(state, { type: 'incSet', team: 'home' })
+            expect(setDi(s).home).toBe(1)
-            expect(s.sp.set.home).toBe(2)
+            s = applyAction(s, { type: 'incSet', team: 'home' })
+            expect(setDi(s).home).toBe(2)
         })
     })
 
@@ -231,31 +326,29 @@ describe('Game Logic (gameState.js)', () => {
     // =============================================
     describe('nuovoSet', () => {
         it('dovrebbe incrementare il set della squadra vincente', () => {
-            state.sp.punt.home = 25
             const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
-            expect(s.sp.set.home).toBe(1)
+            expect(setDi(s).home).toBe(1)
-            expect(s.sp.set.guest).toBe(0)
+            expect(setDi(s).guest).toBe(0)
         })
 
-        it('dovrebbe azzerare i punti', () => {
+        it('dovrebbe azzerare i punti nel nuovo set', () => {
-            state.sp.punt.home = 25
+            setPunteggio(state, 25, 10)
-            state.sp.punt.guest = 10
             const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
-            expect(s.sp.punt.home).toBe(0)
+            expect(puntDi(s).home).toBe(0)
-            expect(s.sp.punt.guest).toBe(0)
+            expect(puntDi(s).guest).toBe(0)
         })
 
         it('dovrebbe aggiungere un nuovo set vuoto alla striscia', () => {
             const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
             expect(s.sp.striscia).toHaveLength(2)
-            expect(s.sp.striscia.at(-1).r).toEqual([])
+            expect(s.sp.striscia.at(-1).ris).toBe('')
-            expect(s.sp.striscia.at(-1).serv).toBe('home')
+            expect(s.sp.striscia.at(-1).serv).toBe('h')
         })
 
         it('dovrebbe conservare il set precedente nella striscia', () => {
-            state.sp.striscia[0].r = ['home', 'guest', 'home']
+            state.sp.striscia[0].ris = 'hgh'
             const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
-            expect(s.sp.striscia[0].r).toEqual(['home', 'guest', 'home'])
+            expect(s.sp.striscia[0].ris).toBe('hgh')
         })
 
         it('dovrebbe resettare le formazioni', () => {
@@ -268,8 +361,70 @@ describe('Game Logic (gameState.js)', () => {
 
         it('dovrebbe ignorare team non valido', () => {
             const s = applyAction(state, { type: 'nuovoSet', team: 'invalid' })
-            expect(s.sp.set.home).toBe(0)
+            expect(setDi(s).home).toBe(0)
-            expect(s.sp.set.guest).toBe(0)
+            expect(setDi(s).guest).toBe(0)
+        })
+
+        it('in 2/3 alla palla match registra il set vincente senza aprirne uno nuovo', () => {
+            state.modalitaPartita = '2/3'
+            setSetVinti(state, 1, 0)
+            setPunteggio(state, 25, 18)
+            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
+            expect(setDi(s).home).toBe(2)
+            expect(puntDi(s).home).toBe(25)
+            expect(puntDi(s).guest).toBe(18)
+        })
+
+        it('in 3/5 alla palla match registra il set vincente senza aprirne uno nuovo', () => {
+            state.modalitaPartita = '3/5'
+            setSetVinti(state, 2, 0)
+            setPunteggio(state, 25, 20)
+            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
+            expect(setDi(s).home).toBe(3)
+            expect(puntDi(s).home).toBe(25)
+            expect(puntDi(s).guest).toBe(20)
+        })
+
+        it('dovrebbe ignorare nuovoSet se la partita è già finita', () => {
+            state.modalitaPartita = '2/3'
+            setSetVinti(state, 2, 0)
+            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
+            expect(setDi(s).home).toBe(2)
+        })
+    })
+
+    // =============================================
+    // VITTORIA PARTITA (checkVittoriaPartita)
+    // =============================================
+    describe('checkVittoriaPartita', () => {
+        it('in 2/3 restituisce false se nessuno ha 2 set', () => {
+            state.modalitaPartita = '2/3'
+            setSetVinti(state, 1, 0)
+            expect(checkVittoriaPartita(state)).toBe(false)
+        })
+
+        it('in 2/3 restituisce true se home ha 2 set', () => {
+            state.modalitaPartita = '2/3'
+            setSetVinti(state, 2, 0)
+            expect(checkVittoriaPartita(state)).toBe(true)
+        })
+
+        it('in 3/5 restituisce false se nessuno ha 3 set', () => {
+            state.modalitaPartita = '3/5'
+            setSetVinti(state, 2, 2)
+            expect(checkVittoriaPartita(state)).toBe(false)
+        })
+
+        it('in 3/5 restituisce true se guest ha 3 set', () => {
+            state.modalitaPartita = '3/5'
+            setSetVinti(state, 0, 3)
+            expect(checkVittoriaPartita(state)).toBe(true)
+        })
+
+        it('in amichevole restituisce sempre false', () => {
+            state.modalitaPartita = 'amichevole'
+            setSetVinti(state, 5, 0)
+            expect(checkVittoriaPartita(state)).toBe(false)
         })
     })
 
@@ -278,27 +433,29 @@ describe('Game Logic (gameState.js)', () => {
     // =============================================
     describe('cambiaPalla', () => {
         it('dovrebbe invertire il servizio a 0-0', () => {
-            expect(state.sp.servHome).toBe(true)
+            expect(servDi(state)).toBe(true)
             const s = applyAction(state, { type: 'cambiaPalla' })
-            expect(s.sp.servHome).toBe(false)
+            expect(servDi(s)).toBe(false)
         })
 
         it('dovrebbe tornare a Home con doppio toggle', () => {
             let s = applyAction(state, { type: 'cambiaPalla' })
             s = applyAction(s, { type: 'cambiaPalla' })
-            expect(s.sp.servHome).toBe(true)
+            expect(servDi(s)).toBe(true)
         })
 
         it('non dovrebbe cambiare palla se il punteggio non è 0-0', () => {
-            state.sp.punt.home = 1
+            setPunteggio(state, 1, 0)
+            const prima = servDi(state)
             const s = applyAction(state, { type: 'cambiaPalla' })
-            expect(s.sp.servHome).toBe(true)
+            expect(servDi(s)).toBe(prima)
         })
 
         it('non dovrebbe cambiare palla se Guest ha punti', () => {
-            state.sp.punt.guest = 3
+            setPunteggio(state, 0, 3)
+            const prima = servDi(state)
             const s = applyAction(state, { type: 'cambiaPalla' })
-            expect(s.sp.servHome).toBe(true)
+            expect(servDi(s)).toBe(prima)
         })
     })
 
@@ -329,6 +486,52 @@ describe('Game Logic (gameState.js)', () => {
             const s = applyAction(state, { type: 'toggleOrder' })
             expect(s.order).toBe(false)
         })
+
+    })
+
+    // =============================================
+    // TIME OUT (startTimeout, stopTimeout)
+    // =============================================
+    describe('Time out', () => {
+        it('startTimeout dovrebbe attivare il time out con squadra, video e inizio', () => {
+            const s = applyAction(state, { type: 'startTimeout', team: 'home', video: 'spot.mp4', startedAt: 1000 })
+            expect(s.timeout).toBe(true)
+            expect(s.timeoutTeam).toBe('home')
+            expect(s.timeoutVideo).toBe('spot.mp4')
+            expect(s.timeoutStartedAt).toBe(1000)
+        })
+
+        it('startTimeout senza video dovrebbe lasciare timeoutVideo null', () => {
+            const s = applyAction(state, { type: 'startTimeout', team: 'guest', startedAt: 1000 })
+            expect(s.timeout).toBe(true)
+            expect(s.timeoutTeam).toBe('guest')
+            expect(s.timeoutVideo).toBe(null)
+        })
+
+        it('startTimeout senza squadra valida dovrebbe essere ignorato', () => {
+            for (const team of [undefined, null, 'arbitro', '']) {
+                const s = applyAction(state, { type: 'startTimeout', team, video: 'spot.mp4', startedAt: 1000 })
+                expect(s.timeout).toBe(false)
+                expect(s.timeoutTeam).toBe(null)
+                expect(s.timeoutVideo).toBe(null)
+                expect(s.timeoutStartedAt).toBe(null)
+            }
+        })
+
+        it('stopTimeout dovrebbe azzerare tutti i campi del time out', () => {
+            const attivo = applyAction(state, { type: 'startTimeout', team: 'home', video: 'spot.mp4', startedAt: 1000 })
+            const s = applyAction(attivo, { type: 'stopTimeout' })
+            expect(s.timeout).toBe(false)
+            expect(s.timeoutTeam).toBe(null)
+            expect(s.timeoutVideo).toBe(null)
+            expect(s.timeoutStartedAt).toBe(null)
+        })
+
+        it('stopTimeout su time out già inattivo non dovrebbe avere effetti', () => {
+            const s = applyAction(state, { type: 'stopTimeout' })
+            expect(s.timeout).toBe(false)
+            expect(s.timeoutTeam).toBe(null)
+        })
     })
 
     // =============================================
@@ -509,44 +712,37 @@ describe('Game Logic (gameState.js)', () => {
     // =============================================
     describe('checkVittoria', () => {
         it('non dovrebbe dare vittoria a 24-24', () => {
-            state.sp.punt.home = 24
+            setPunteggio(state, 24, 24)
-            state.sp.punt.guest = 24
             expect(checkVittoria(state)).toBe(false)
         })
 
         it('dovrebbe dare vittoria a 25-23', () => {
-            state.sp.punt.home = 25
+            setPunteggio(state, 25, 23)
-            state.sp.punt.guest = 23
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('non dovrebbe dare vittoria a 25-24 (serve 2 punti di scarto)', () => {
-            state.sp.punt.home = 25
+            setPunteggio(state, 25, 24)
-            state.sp.punt.guest = 24
             expect(checkVittoria(state)).toBe(false)
         })
 
         it('dovrebbe dare vittoria a 26-24', () => {
-            state.sp.punt.home = 26
+            setPunteggio(state, 26, 24)
-            state.sp.punt.guest = 24
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('dovrebbe dare vittoria Guest a 25-20', () => {
-            state.sp.punt.home = 20
+            setPunteggio(state, 20, 25)
-            state.sp.punt.guest = 25
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('dovrebbe dare vittoria ai vantaggi (30-28)', () => {
-            state.sp.punt.home = 30
+            setPunteggio(state, 30, 28)
-            state.sp.punt.guest = 28
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('non dovrebbe dare vittoria ai vantaggi senza scarto (28-27)', () => {
-            state.sp.punt.home = 28
+            setPunteggio(state, 28, 27)
-            state.sp.punt.guest = 27
             expect(checkVittoria(state)).toBe(false)
         })
     })
@@ -557,82 +753,64 @@ describe('Game Logic (gameState.js)', () => {
     describe('Set decisivo', () => {
         it('modalità 3/5: set decisivo dopo 4 set totali → vittoria a 15', () => {
             state.modalitaPartita = "3/5"
-            state.sp.set.home = 2
+            setSetVinti(state, 2, 2)
-            state.sp.set.guest = 2
+            setPunteggio(state, 15, 10)
-            state.sp.punt.home = 15
-            state.sp.punt.guest = 10
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('modalità 3/5: non vittoria a 14-10 nel set decisivo', () => {
             state.modalitaPartita = "3/5"
-            state.sp.set.home = 2
+            setSetVinti(state, 2, 2)
-            state.sp.set.guest = 2
+            setPunteggio(state, 14, 10)
-            state.sp.punt.home = 14
-            state.sp.punt.guest = 10
             expect(checkVittoria(state)).toBe(false)
         })
 
         it('modalità 3/5: vittoria a 15-13 nel set decisivo', () => {
             state.modalitaPartita = "3/5"
-            state.sp.set.home = 2
+            setSetVinti(state, 2, 2)
-            state.sp.set.guest = 2
+            setPunteggio(state, 15, 13)
-            state.sp.punt.home = 15
-            state.sp.punt.guest = 13
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('modalità 3/5: non vittoria a 15-14 nel set decisivo (serve scarto)', () => {
             state.modalitaPartita = "3/5"
-            state.sp.set.home = 2
+            setSetVinti(state, 2, 2)
-            state.sp.set.guest = 2
+            setPunteggio(state, 15, 14)
-            state.sp.punt.home = 15
-            state.sp.punt.guest = 14
             expect(checkVittoria(state)).toBe(false)
         })
 
         it('modalità 3/5: vittoria a 16-14 nel set decisivo', () => {
             state.modalitaPartita = "3/5"
-            state.sp.set.home = 2
+            setSetVinti(state, 2, 2)
-            state.sp.set.guest = 2
+            setPunteggio(state, 16, 14)
-            state.sp.punt.home = 16
-            state.sp.punt.guest = 14
             expect(checkVittoria(state)).toBe(true)
         })
 
         it('modalità 2/3: set decisivo dopo 2 set totali → vittoria a 15', () => {
             state.modalitaPartita = "2/3"
-            state.sp.set.home = 1
+            setSetVinti(state, 1, 1)
-            state.sp.set.guest = 1
+            setPunteggio(state, 15, 10)
-            state.sp.punt.home = 15
-            state.sp.punt.guest = 10
             expect(checkVittoria(state)).toBe(true)
         })
 
-        it('modalità 2/3: non vittoria a 24-20 nel set decisivo (soglia 15)', () => {
+        it('modalità 2/3: non vittoria a 14-10 nel set decisivo (soglia 15)', () => {
             state.modalitaPartita = "2/3"
-            state.sp.set.home = 1
+            setSetVinti(state, 1, 1)
-            state.sp.set.guest = 1
+            setPunteggio(state, 14, 10)
-            state.sp.punt.home = 14
-            state.sp.punt.guest = 10
             expect(checkVittoria(state)).toBe(false)
         })
 
         it('modalità 2/3: set non decisivo (1-0) → soglia 25', () => {
             state.modalitaPartita = "2/3"
-            state.sp.set.home = 1
+            setSetVinti(state, 1, 0)
-            state.sp.set.guest = 0
+            setPunteggio(state, 15, 10)
-            state.sp.punt.home = 15
-            state.sp.punt.guest = 10
             expect(checkVittoria(state)).toBe(false)
         })
 
         it('modalità 3/5: set non decisivo (2-1) → soglia 25', () => {
             state.modalitaPartita = "3/5"
-            state.sp.set.home = 2
+            setSetVinti(state, 2, 1)
-            state.sp.set.guest = 1
+            setPunteggio(state, 15, 10)
-            state.sp.punt.home = 15
-            state.sp.punt.guest = 10
             expect(checkVittoria(state)).toBe(false)
         })
     })
@@ -642,15 +820,13 @@ describe('Game Logic (gameState.js)', () => {
     // =============================================
     describe('Reset', () => {
         it('dovrebbe resettare punti e set a zero', () => {
-            state.sp.punt.home = 10
+            setSetVinti(state, 1, 1)
-            state.sp.punt.guest = 8
+            setPunteggio(state, 10, 8)
-            state.sp.set.home = 1
-            state.sp.set.guest = 1
             const s = applyAction(state, { type: 'resetta' })
-            expect(s.sp.punt.home).toBe(0)
+            expect(puntDi(s).home).toBe(0)
-            expect(s.sp.punt.guest).toBe(0)
+            expect(puntDi(s).guest).toBe(0)
-            expect(s.sp.set.home).toBe(0)
+            expect(setDi(s).home).toBe(0)
-            expect(s.sp.set.guest).toBe(0)
+            expect(setDi(s).guest).toBe(0)
         })
 
         it('dovrebbe resettare formazioni a default', () => {
@@ -661,10 +837,10 @@ describe('Game Logic (gameState.js)', () => {
         })
 
         it('dovrebbe resettare la striscia a un set vuoto', () => {
-            state.sp.striscia = [{ serv: 'home', r: ['home', 'guest', 'home'] }, { serv: 'home', r: ['guest'] }]
+            state.sp.striscia = [{ serv: 'h', ris: 'hgh', vinc: 'h' }, { serv: 'h', ris: 'g', vinc: null }]
             const s = applyAction(state, { type: 'resetta' })
             expect(s.sp.striscia).toHaveLength(1)
-            expect(s.sp.striscia[0].r).toEqual([])
+            expect(s.sp.striscia[0].ris).toBe('')
         })
 
         it('dovrebbe impostare visuForm a false', () => {
@@ -688,8 +864,8 @@ describe('Game Logic (gameState.js)', () => {
     describe('Azione sconosciuta', () => {
         it('dovrebbe restituire lo stato invariato con azione non riconosciuta', () => {
             const s = applyAction(state, { type: 'azioneInesistente' })
-            expect(s.sp.punt.home).toBe(0)
+            expect(puntDi(s).home).toBe(0)
-            expect(s.sp.punt.guest).toBe(0)
+            expect(puntDi(s).guest).toBe(0)
         })
     })
 })

tests/unit/persist.test.js

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+// Mock dell'I/O su disco: i test non toccano il filesystem reale né dipendono
+// dal path relativo a src/.
+vi.mock('fs', () => ({
+    readFileSync: vi.fn(),
+    writeFileSync: vi.fn(),
+    mkdirSync: vi.fn(),
+    existsSync: vi.fn(),
+}))
+
+import * as fs from 'fs'
+import { loadState, saveState } from '../../src/persist.js'
+import { createInitialState } from '../../src/gameState.js'
+
+describe('Persistenza stato (persist.js)', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    describe('saveState', () => {
+        it('crea la directory e scrive lo stato serializzato', () => {
+            const state = createInitialState()
+            saveState(state)
+
+            expect(fs.mkdirSync).toHaveBeenCalledWith(expect.any(String), { recursive: true })
+            expect(fs.writeFileSync).toHaveBeenCalled()
+
+            const [, contenuto, encoding] = fs.writeFileSync.mock.calls[0]
+            expect(JSON.parse(contenuto)).toEqual(state)
+            expect(encoding).toBe('utf8')
+        })
+
+        it('non lancia eccezioni se la scrittura fallisce', () => {
+            fs.mkdirSync.mockImplementation(() => { throw new Error('EACCES') })
+            const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+            expect(() => saveState(createInitialState())).not.toThrow()
+            expect(errSpy).toHaveBeenCalled()
+        })
+    })
+
+    describe('loadState', () => {
+        it('legge e fa il parse di un file valido', () => {
+            const salvato = createInitialState()
+            salvato.sp.nomi.home = 'Squadra X'
+            fs.existsSync.mockReturnValue(true)
+            fs.readFileSync.mockReturnValue(JSON.stringify(salvato))
+
+            expect(loadState()).toEqual(salvato)
+        })
+
+        it('ritorna lo stato iniziale se il file non esiste', () => {
+            fs.existsSync.mockReturnValue(false)
+            expect(loadState()).toEqual(createInitialState())
+        })
+
+        it('ritorna lo stato iniziale se il JSON è corrotto', () => {
+            fs.existsSync.mockReturnValue(true)
+            fs.readFileSync.mockReturnValue('{ questo non è json')
+            const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+            expect(loadState()).toEqual(createInitialState())
+            expect(warnSpy).toHaveBeenCalled()
+        })
+    })
+})

tests/unit/referto.test.js

@@ -0,0 +1,110 @@
+import { describe, it, expect } from 'vitest'
+import { buildRefertoHtml } from '../../src/referto.js'
+import { createInitialState } from '../../src/gameState.js'
+
+// Data fissa per asserzioni deterministiche
+const NOW = new Date('2026-03-14T20:30:00')
+
+// Costruisce uno stato con una striscia di set arbitraria
+function statoConSet(striscia, extra = {}) {
+    const state = createInitialState()
+    state.sp.striscia = striscia
+    state.sp.nomi = { home: 'Antoniana', guest: 'Rivali' }
+    return { ...state, ...extra }
+}
+
+describe('buildRefertoHtml (referto.js)', () => {
+    it('esclude i set _phantom dal referto', () => {
+        const striscia = [
+            { serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(20), vinc: 'h' },
+            { serv: 'g', ris: '', vinc: 'g', _phantom: true },
+            { serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(18), vinc: 'h' },
+        ]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        // due set reali → "Set 1" e "Set 2", mai "Set 3"
+        expect(html).toContain('Set 1')
+        expect(html).toContain('Set 2')
+        expect(html).not.toContain('Set 3')
+    })
+
+    it('calcola il punteggio finale di ogni set dalla ris', () => {
+        const striscia = [
+            { serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(20), vinc: 'h' },
+            { serv: 'h', ris: '', vinc: null },
+        ]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        // header del set: "Antoniana 25 · 20 Rivali"
+        expect(html).toContain('<strong>25</strong>')
+        expect(html).toContain('<strong>20</strong>')
+    })
+
+    it('conta i set vinti usando vinc', () => {
+        const striscia = [
+            { serv: 'h', ris: '', vinc: 'h' },
+            { serv: 'g', ris: '', vinc: 'g' },
+            { serv: 'h', ris: '', vinc: 'h' },
+            { serv: 'h', ris: '', vinc: null },
+        ]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        // risultato 2 – 1
+        expect(html).toContain('2 – 1')
+    })
+
+    it('ricava il vincitore dal conteggio punti se vinc è nullo', () => {
+        const striscia = [
+            { serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(23), vinc: null },
+            { serv: 'h', ris: '', vinc: null },
+        ]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        // il primo set, pur con vinc null, conta come vinto da home → 1 – 0
+        expect(html).toContain('1 – 0')
+    })
+
+    it('include la progressione punto-punto con classi per squadra', () => {
+        const striscia = [
+            { serv: 'h', ris: 'hhg', vinc: null },
+        ]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        expect(html).toContain('punto-h')
+        expect(html).toContain('punto-g')
+        expect(html).toContain('1-0')
+        expect(html).toContain('2-0')
+        expect(html).toContain('2-1')
+    })
+
+    it('rende la formazione di partenza quando presente', () => {
+        const striscia = [
+            {
+                serv: 'h', ris: 'h', vinc: null,
+                formInizio: { home: ['4', '8', '15'], guest: ['16', '23', '42'] },
+            },
+        ]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        expect(html).toContain('Formazione di partenza')
+        expect(html).toContain('>4<')
+        expect(html).toContain('>42<')
+    })
+
+    it('mostra "non disponibile" se manca formInizio', () => {
+        const striscia = [{ serv: 'h', ris: 'h', vinc: null }]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        expect(html).toContain('non disponibile')
+    })
+
+    it('mostra "Nessun punto registrato" per un set senza punti', () => {
+        const striscia = [{ serv: 'h', ris: '', vinc: null }]
+        const html = buildRefertoHtml(statoConSet(striscia), NOW)
+        expect(html).toContain('Nessun punto registrato')
+    })
+
+    it('header contiene nomi squadre, modalità e data iniettata', () => {
+        const striscia = [{ serv: 'h', ris: '', vinc: null }]
+        const state = statoConSet(striscia)
+        state.modalitaPartita = '2/3'
+        const html = buildRefertoHtml(state, NOW)
+        expect(html).toContain('Antoniana')
+        expect(html).toContain('Rivali')
+        expect(html).toContain('Modalità: 2/3')
+        expect(html).toContain('14/03/2026')
+    })
+})

tests/unit/server-utils.test.js

@@ -1,14 +1,9 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import * as os from 'os'
+import { getNetworkIPs, collectIPs, printServerInfo } from '../../src/server-utils.js'
 
-vi.mock('os', async (importOriginal) => {
+// Nota: gli IP vengono iniettati nei test (oggetto stile os.networkInterfaces o
-    return {
+// array di IP), così i risultati sono deterministici su qualsiasi piattaforma —
-        ...await importOriginal(),
+// incluso WSL, dove getNetworkIPs() userebbe altrimenti PowerShell.
-        networkInterfaces: vi.fn(() => ({}))
-    }
-})
-
-import { getNetworkIPs, printServerInfo } from '../../src/server-utils.js'
 
 describe('Server Utils', () => {
 
@@ -17,85 +12,73 @@ describe('Server Utils', () => {
     })
 
     // =============================================
-    // getNetworkIPs
+    // getNetworkIPs / collectIPs
     // =============================================
     describe('getNetworkIPs', () => {
         it('dovrebbe restituire indirizzi IPv4 non-loopback', () => {
-            os.networkInterfaces.mockReturnValue({
+            expect(getNetworkIPs({
-                eth0: [
+                eth0: [{ family: 'IPv4', internal: false, address: '192.168.1.100' }]
-                    { family: 'IPv4', internal: false, address: '192.168.1.100' }
+            })).toEqual(['192.168.1.100'])
-                ]
-            })
-            expect(getNetworkIPs()).toEqual(['192.168.1.100'])
         })
 
         it('dovrebbe escludere indirizzi loopback (internal)', () => {
-            os.networkInterfaces.mockReturnValue({
+            const ips = getNetworkIPs({
-                lo: [
+                lo: [{ family: 'IPv4', internal: true, address: '127.0.0.1' }],
-                    { family: 'IPv4', internal: true, address: '127.0.0.1' }
+                eth0: [{ family: 'IPv4', internal: false, address: '192.168.1.100' }]
-                ],
-                eth0: [
-                    { family: 'IPv4', internal: false, address: '192.168.1.100' }
-                ]
             })
-            const ips = getNetworkIPs()
             expect(ips).not.toContain('127.0.0.1')
             expect(ips).toContain('192.168.1.100')
         })
 
         it('dovrebbe escludere indirizzi IPv6', () => {
-            os.networkInterfaces.mockReturnValue({
+            const ips = getNetworkIPs({
                 eth0: [
                     { family: 'IPv6', internal: false, address: 'fe80::1' },
                     { family: 'IPv4', internal: false, address: '192.168.1.100' }
                 ]
             })
-            const ips = getNetworkIPs()
             expect(ips).toEqual(['192.168.1.100'])
         })
 
         it('dovrebbe escludere bridge Docker 172.17.x.x', () => {
-            os.networkInterfaces.mockReturnValue({
+            const ips = getNetworkIPs({
-                docker0: [
+                docker0: [{ family: 'IPv4', internal: false, address: '172.17.0.1' }],
-                    { family: 'IPv4', internal: false, address: '172.17.0.1' }
+                eth0: [{ family: 'IPv4', internal: false, address: '10.0.0.5' }]
-                ],
-                eth0: [
-                    { family: 'IPv4', internal: false, address: '10.0.0.5' }
-                ]
             })
-            const ips = getNetworkIPs()
             expect(ips).not.toContain('172.17.0.1')
             expect(ips).toContain('10.0.0.5')
         })
 
         it('dovrebbe escludere bridge Docker 172.18.x.x', () => {
-            os.networkInterfaces.mockReturnValue({
+            expect(getNetworkIPs({
-                br0: [
+                br0: [{ family: 'IPv4', internal: false, address: '172.18.0.1' }]
-                    { family: 'IPv4', internal: false, address: '172.18.0.1' }
+            })).toEqual([])
-                ]
+        })
-            })
+
-            expect(getNetworkIPs()).toEqual([])
+        it('dovrebbe escludere indirizzi link-local 169.254.x.x', () => {
+            expect(getNetworkIPs({
+                eth0: [{ family: 'IPv4', internal: false, address: '169.254.1.1' }]
+            })).toEqual([])
         })
 
         it('dovrebbe restituire array vuoto se nessuna interfaccia disponibile', () => {
-            os.networkInterfaces.mockReturnValue({})
+            expect(getNetworkIPs({})).toEqual([])
-            expect(getNetworkIPs()).toEqual([])
         })
 
         it('dovrebbe restituire più indirizzi da interfacce diverse', () => {
-            os.networkInterfaces.mockReturnValue({
+            const ips = getNetworkIPs({
-                eth0: [
+                eth0: [{ family: 'IPv4', internal: false, address: '192.168.1.100' }],
-                    { family: 'IPv4', internal: false, address: '192.168.1.100' }
+                wlan0: [{ family: 'IPv4', internal: false, address: '192.168.1.101' }]
-                ],
-                wlan0: [
-                    { family: 'IPv4', internal: false, address: '192.168.1.101' }
-                ]
             })
-            const ips = getNetworkIPs()
             expect(ips).toHaveLength(2)
             expect(ips).toContain('192.168.1.100')
             expect(ips).toContain('192.168.1.101')
         })
+
+        it('collectIPs gestisce input vuoto/undefined senza errori', () => {
+            expect(collectIPs()).toEqual([])
+            expect(collectIPs({})).toEqual([])
+        })
     })
 
     // =============================================
@@ -103,9 +86,8 @@ describe('Server Utils', () => {
     // =============================================
     describe('printServerInfo', () => {
         it('dovrebbe stampare la porta di default (3000)', () => {
-            os.networkInterfaces.mockReturnValue({})
             const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-            printServerInfo()
+            printServerInfo(3000, [])
             const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
             expect(allLogs).toContain('3000')
             expect(allLogs).toContain('/display')
@@ -114,22 +96,16 @@ describe('Server Utils', () => {
         })
 
         it('dovrebbe stampare la porta personalizzata', () => {
-            os.networkInterfaces.mockReturnValue({})
             const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-            printServerInfo(8080)
+            printServerInfo(8080, [])
             const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
             expect(allLogs).toContain('8080')
             consoleSpy.mockRestore()
         })
 
         it('dovrebbe mostrare gli URL remoti se ci sono IP di rete', () => {
-            os.networkInterfaces.mockReturnValue({
-                eth0: [
-                    { family: 'IPv4', internal: false, address: '192.168.1.50' }
-                ]
-            })
             const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-            printServerInfo(3000)
+            printServerInfo(3000, ['192.168.1.50'])
             const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
             expect(allLogs).toContain('192.168.1.50')
             expect(allLogs).toContain('remoti')
@@ -137,9 +113,8 @@ describe('Server Utils', () => {
         })
 
         it('non dovrebbe mostrare sezione remoti se nessun IP di rete', () => {
-            os.networkInterfaces.mockReturnValue({})
             const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-            printServerInfo(3000)
+            printServerInfo(3000, [])
             const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
             expect(allLogs).not.toContain('remoti')
             consoleSpy.mockRestore()

tests/unit/spotUtils.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mkdtempSync, writeFileSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { listSpotVideos } from '../../src/spot-utils.js'
+
+describe('listSpotVideos (spot-utils.js)', () => {
+    let dir
+
+    beforeEach(() => {
+        dir = mkdtempSync(join(tmpdir(), 'spot-test-'))
+    })
+
+    afterEach(() => {
+        rmSync(dir, { recursive: true, force: true })
+    })
+
+    it('ritorna [] se la cartella non esiste', () => {
+        expect(listSpotVideos(join(dir, 'inesistente'))).toEqual([])
+    })
+
+    it('ritorna [] se la cartella è vuota', () => {
+        expect(listSpotVideos(dir)).toEqual([])
+    })
+
+    it('elenca solo i file .mp4, ordinati alfabeticamente', () => {
+        writeFileSync(join(dir, 'b.mp4'), '')
+        writeFileSync(join(dir, 'a.mp4'), '')
+        writeFileSync(join(dir, 'note.txt'), '')
+        writeFileSync(join(dir, 'foto.png'), '')
+        expect(listSpotVideos(dir)).toEqual(['a.mp4', 'b.mp4'])
+    })
+
+    it('riconosce l\'estensione .mp4 senza distinzione di maiuscole', () => {
+        writeFileSync(join(dir, 'SPOT.MP4'), '')
+        expect(listSpotVideos(dir)).toEqual(['SPOT.MP4'])
+    })
+})

vite-plugin-websocket.js

@@ -1,7 +1,13 @@
 import { WebSocketServer } from 'ws'
+import express from 'express'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
 import { setupWebSocketHandler } from './src/websocket-handler.js'
 import { printServerInfo } from './src/server-utils.js'
 import { loadState, saveState } from './src/persist.js'
+import { listSpotVideos } from './src/spot-utils.js'
+
+const SPOT_DIR = join(dirname(fileURLToPath(import.meta.url)), 'spot')
 
 export default function websocketPlugin() {
   return {
@@ -10,6 +16,16 @@ export default function websocketPlugin() {
       const wss = new WebSocketServer({ noServer: true })
       setupWebSocketHandler(wss, { initialState: loadState(), onStateChange: saveState })
 
+      // Video spot del time out: stesso comportamento di server.js (elenco + statici)
+      server.middlewares.use('/spot', (req, res, next) => {
+        if (req.url === '/list' || req.url === '/list/') {
+          res.setHeader('Content-Type', 'application/json')
+          return res.end(JSON.stringify(listSpotVideos(SPOT_DIR)))
+        }
+        next()
+      })
+      server.middlewares.use('/spot', express.static(SPOT_DIR))
+
       // Rewrite /display → / (index.html) e /controller → /controller.html
       server.middlewares.use((req, _res, next) => {
         if (req.url === '/display' || req.url === '/display/') req.url = '/'