feat(striscia): nomi fissi a sinistra, punti scorrono verso destra

- Layout ora usa CSS Grid (max-content 1fr) per allineare le colonne
  dei nomi indipendentemente dalla loro lunghezza
- I punti crescono da sinistra verso destra; un watcher Vue imposta
  scrollLeft al massimo ad ogni aggiornamento, mantenendo visibili
  gli ultimi punti a destra quando la striscia va oltre lo schermo
- Le celle vuote (spazio al posto del punto) non mostrano più
  lo sfondo giallo-verde (classe item-vuoto)

.gitignore

@@ -25,3 +25,13 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
+
+# Vitest
+coverage/

CHANGELOG.md

@@ -0,0 +1,282 @@
+# Changelog
+
+Tutte le modifiche significative a questo progetto sono documentate in questo file.
+
+Il formato si basa su [Keep a Changelog](https://keepachangelog.com/it/1.0.0/),
+e questo progetto aderisce al [Versionamento Semantico](https://semver.org/lang/it/).
+
+---
+
+## [1.0.0] - 2026-02-10
+
+Rilascio iniziale di **Segnapunti Anto**, un'applicazione web Progressive Web App (PWA) professionale per il tracciamento in tempo reale dei punteggi durante partite di pallavolo.
+
+### Funzionalità Principali
+
+#### Gestione Partite e Punteggi
+- **Tracciamento punti in tempo reale** per entrambe le squadre (casa e ospite)
+- **Conteggio automatico dei set** con supporto per modalità al meglio di 3 o al meglio di 5
+- **Logica regolamentare completa**:
+  - Set regolari: primo a 25 punti con almeno 2 di vantaggio
+  - Set decisivo (tie-break): primo a 15 punti con almeno 2 di vantaggio
+  - Blocco automatico assegnazione punti al raggiungimento della vittoria
+- **Indicatore visivo del servizio** per identificare quale squadra è al servizio
+- **Cronologia punti** con striscia visiva per seguire l'andamento della partita
+- Possibilità di **incrementare e decrementare punti** e **set**
+- **Annullamento punti** con ripristino automatico del servizio precedente
+
+#### Formazioni e Rotazioni
+- **Visualizzazione interattiva** della formazione in campo con 6 giocatori per squadra
+- **Rotazione automatica regolamentare** quando la squadra conquista il servizio (cambio palla)
+- **Configurazione manuale dei numeri di maglia** per ogni giocatore
+- **Sistema di cambi giocatori**:
+  - Dialog dedicato per effettuare i cambi
+  - Supporto per cambi singoli o multipli
+  - Tabella IN/OUT con validazione degli input
+  - Verifica che i numeri di maglia siano numerici
+  - Scorciatoie da tastiera dedicate per squadra casa e ospite
+- **Limitazione cambio palla manuale** solo a inizio set (0-0) per prevenire errori nella rotazione
+
+#### Interfaccia Utente e Personalizzazione
+- **Interfaccia fullscreen touch-friendly** ottimizzata per tablet e smartphone
+- **Layout responsive** con media queries per schermi piccoli (<768px)
+- **Modalità di visualizzazione**:
+  - Punteggio semplice
+  - Formazioni complete con posizioni giocatori
+  - Toggle tra le due modalità con scorciatoia da tastiera
+- **Personalizzazione squadre**:
+  - Configurazione dinamica dei nomi squadre
+  - Inversione layout orizzontale (scambio posizione casa/ospite)
+  - Configurazione numeri di maglia giocatori
+- **Controlli nascondibili**: possibilità di nascondere/mostrare barra pulsanti e cronologia
+- **Stabilizzazione UI**: dimensioni fisse per riquadri punteggio per evitare spostamenti durante gli aggiornamenti
+
+#### Controlli e Accessibilità
+- **Controlli da tastiera completi** con scorciatoie dedicate:
+  - **Squadra Casa**: `Ctrl + ↑/↓` (punti), `Ctrl + →` (set), `Ctrl + C` (cambi)
+  - **Squadra Ospite**: `Shift + ↑/↓` (punti), `Shift + →` (set), `Shift + C` (cambi)
+  - **Comandi globali**:
+    - `Ctrl + ←` (cambio palla, solo a 0-0)
+    - `Ctrl + M` (configurazione)
+    - `Ctrl + B` (toggle barra pulsanti)
+    - `Ctrl + F` (fullscreen)
+    - `Ctrl + S` (annuncio vocale)
+    - `Ctrl + Z` (switch visualizzazione)
+- **Sintesi vocale** per annunci punteggio in italiano usando Web Speech API
+- **Sistema di alert professionale** usando Wave UI per notifiche e conferme
+
+#### Progressive Web App (PWA)
+- **Installabile** come app nativa su smartphone, tablet e desktop
+- **Funzionamento offline completo** grazie ai Service Worker
+- **Auto-update automatico** per ricevere nuovi aggiornamenti senza reinstallazione
+- **Display fullscreen** per massimizzare lo spazio visivo
+- **Orientamento landscape ottimizzato** per utilizzo su tablet
+- **Orientamento sensor landscape** con supporto rotazione 180°
+- **Icone PWA personalizzate** (192x192 e 512x512)
+- **Prevenzione scroll indesiderato** su mobile (overscroll-behavior)
+- **Supporto 100dvh** e position:fixed per layout mobile stabile
+- **Blocco scroll** per evitare ricariche accidentali con swipe-down
+
+#### Build e Deployment
+- **Build APK Android** tramite Capacitor per distribuzione nativa
+- **Setup automatico icone Android** con script dedicato per multi-densità (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
+- **Configurazione Capacitor** ottimizzata per landscape senza splash screen
+- **Output unificato** in `/dist/android` per build Android
+- **Base path configurabile** (`/segnap`) per deployment su sottocartelle
+
+### Tecnologie e Dipendenze
+
+#### Stack Tecnologico
+- **Vue 3.4.38** - Framework JavaScript reattivo
+- **Vite 5.4.10** - Build tool e dev server veloce
+- **Wave UI 3.17.0** - Libreria UI components per alert e dialogs
+- **NoSleep.js 0.12.0** - Prevenzione standby durante le partite
+- **vite-plugin-pwa 0.20.5** - Plugin per generazione PWA
+- **Capacitor 6.2.0** - Framework per build app native Android/iOS
+
+#### Ambiente di Sviluppo
+- **Node.js 20.x LTS** (consigliato v20.2.0)
+- **npm 9.0.0+** per gestione dipendenze
+- **NVM support** per gestione versioni Node.js
+- **Hot Module Replacement (HMR)** in modalità sviluppo
+- **Source maps** per debugging
+- **Vue DevTools** supportato
+
+#### Browser Supportati
+- **Chrome/Chromium 90+** - Supporto completo (consigliato)
+- **Firefox 88+** - Supporto completo
+
+### Build e Comandi
+
+#### Comandi Disponibili
+- `npm run dev` - Server di sviluppo con hot-reload su http://localhost:5173
+- `npm run build` - Build di produzione ottimizzata in `/dist`
+- `npm run preview` - Anteprima locale della build di produzione
+
+#### Output Build
+- File statici ottimizzati e minificati
+- Service Worker generato automaticamente
+- PWA manifest configurato
+- Assets con hash per cache busting
+- Permessi automatici per cartella dist in ambiente Docker
+
+### Documentazione
+- **README.md completo** con:
+  - Panoramica funzionalità
+  - Requisiti di sistema dettagliati
+  - Istruzioni di installazione e setup con NVM
+  - Guida ai comandi per sviluppo e build
+  - Tabella completa shortcuts tastiera
+  - Configurazione PWA documentata
+  - Spiegazione logica regolamentare pallavolo
+  - Browser testati e supportati
+- **Encoding corretto** per caratteri accentati italiani
+
+### Miglioramenti Architetturali
+- **Separazione componenti**: HomePage estratta in componente dedicato
+- **Rimozione codice legacy**: eliminati file non utilizzati (HelloWorld.vue)
+- **Refactoring CSS**: file style.css organizzato e ottimizzato
+- **Gestione servizio migliorata**: variabile booleana `servHome` per gestione cambio servizio
+- **Validazione input**: controlli su numeri di maglia e cambi giocatori
+- **Gestione errori**: prevenzione incrementi a set concluso senza notifiche spam
+
+### Note di Sviluppo
+- **Orientamento sensor landscape**: permette rotazione 180° del dispositivo
+- **Fix tentati audio mobile**: implementati ma richiedono ancora debug (WIP)
+  - Aggiunto supporto @capacitor-community/text-to-speech per audio nativo
+  - Implementato fallback Web API su desktop, plugin nativo su mobile
+  - Correzione lingua da 'it_IT' a 'it-IT'
+- **Java 17 → 21**: aggiornamento per compatibilità plugin TTS
+- **ImageMagick in Dockerfile**: per generazione automatica icone Android
+
+### Configurazione
+- **Base path**: `/segnap` (configurabile in vite.config.js)
+- **Tema PWA**: background `#eee`, theme color `#ffffff`
+- **Display**: fullscreen landscape
+- **Manifest name**: app_segnap
+- **Short name**: segnap
+
+---
+
+## Architettura e Funzionamento Interno
+
+### Come Funziona l'Applicazione Web
+
+L'applicazione è una **Single Page Application (SPA)** completamente **client-side**:
+
+- **Server**: Serve solo file statici (nessun backend, nessun database)
+- **Esecuzione**: Tutto gira nel browser dell'utente
+- **Stato**: Memorizzato solo nella RAM del browser (si perde al refresh)
+- **Offline**: Funziona completamente offline dopo la prima visita (Service Worker)
+
+#### Build e Deployment
+
+```bash
+npm run build
+```
+
+1. Vite compila il codice Vue/JavaScript
+2. Ottimizza e minifica JavaScript e CSS
+3. Genera Service Worker e manifest PWA
+4. Output in `/dist` con file statici pronti
+
+**Deploy**: Copia `/dist` su web server statico (nginx, Apache, Vercel, Netlify). Non serve Node.js, PHP o database sul server.
+
+#### Funzionamento Runtime
+
+**Prima visita:**
+1. Browser scarica index.html dal server
+2. Carica bundle JavaScript e CSS
+3. Vue.js inizializza l'applicazione
+4. Service Worker cachea tutti gli asset
+5. App pronta (nessuna ulteriore chiamata al server)
+
+**Visite successive:**
+1. Service Worker serve i file dalla cache locale
+2. App si avvia istantaneamente anche senza internet
+3. In background verifica se esistono aggiornamenti
+4. Aggiornamenti applicati al prossimo refresh
+
+#### Gestione Stato
+
+Tutto lo stato della partita vive nella memoria del browser:
+
+```javascript
+data() {
+  return {
+    sp: {
+      punt: { home: 0, guest: 0 },
+      set: { home: 0, guest: 0 },
+      servHome: true,
+      form: { home: ["1","2","3","4","5","6"], guest: ["1","2","3","4","5","6"] }
+    }
+  }
+}
+```
+
+**Limitazioni:**
+- Refresh della pagina azzera tutto lo stato
+- Nessuna sincronizzazione tra dispositivi
+- Nessuno storico partite
+
+**Vantaggi:**
+- Privacy totale (nessun dato esce dal dispositivo)
+- Velocità massima (nessuna latenza di rete)
+- Funzionamento offline completo
+
+**Possibili evoluzioni:**
+- Persistenza con localStorage
+- Backend con database per multi-dispositivo
+- WebSocket per sincronizzazione real-time
+
+### Note Tecniche
+
+**Problemi noti:**
+- Audio mobile: sintesi vocale non funziona su alcuni dispositivi Android
+- Persistenza: lo stato si perde al refresh della pagina
+- Codice legacy: presenza di file HomePage duplicati
+
+**Architettura futura:**
+- Stato centralizzato con Pinia/Vuex
+- Architettura client-server con WebSocket per display remoto
+- Persistenza con localStorage o database
+- Testing con Vitest e Cypress
+
+---
+
+## Informazioni sul Progetto
+
+**Nome progetto**: Segnapunti Anto
+**Descrizione**: Applicazione web PWA per tracciare i punteggi di partite di pallavolo in tempo reale
+**Sviluppato per**: Team Antoniana
+**Licenza**: Privata
+**Repository**: https://github.com/[username]/segnapunti
+
+---
+
+### Come Leggere Questo Changelog
+
+- **Funzionalità Principali**: nuove caratteristiche aggiunte all'applicazione
+- **Tecnologie e Dipendenze**: stack tecnologico e versioni utilizzate
+- **Build e Comandi**: istruzioni per compilare ed eseguire il progetto
+- **Documentazione**: miglioramenti alla documentazione utente e sviluppatore
+- **Miglioramenti Architetturali**: refactoring e ottimizzazioni del codice
+- **Note di Sviluppo**: work in progress e problemi noti
+
+---
+
+### Supporto e Contributi
+
+Per segnalare bug o richiedere funzionalità, aprire una issue nel repository del progetto.
+
+Per contribuire al progetto:
+1. Fork del repository
+2. Creare un branch per la feature (`git checkout -b feature/nome-feature`)
+3. Commit delle modifiche (`git commit -m 'Aggiunge nome-feature'`)
+4. Push al branch (`git push origin feature/nome-feature`)
+5. Aprire una Pull Request
+
+---
+
+**Data primo commit**: 2024
+**Data rilascio 1.0.0**: 2026-02-10

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /usr/src/app
+# Copia tutto
+COPY . .
+
+# Aggiunge GIT ma serve solo se si vuole evidenziare un hash del commit 
+RUN apk add git
+
+# aggiunge l'ultima versione di node
+RUN npm install -g npm@latest
+# Installa tutte le dipendenze del progetto
+RUN npm install
+
+# Qui fa partire il comando...
+# Per adesso è dev perchè non ho capito bene il tutto... (Attilio)
+CMD ["npm", "run", "serve"]
+

README.md

@@ -1,8 +1,208 @@
-# Vue 3 + Vite
+# Segnapunti Anto
-# nvm use v20.2.0
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Applicazione web **Progressive Web App (PWA)** per tracciare i punteggi di partite di pallavolo in tempo reale.
 
-## Recommended IDE Setup
+---
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+## Panoramica
+
+**Segnapunti Anto** e un'applicazione digitale per il tracciamento del punteggio durante partite di pallavolo, ottimizzata per tablet e smartphone.
+
+L'app e composta da due interfacce:
+- **Display** (tabellone pubblico)
+- **Controller** (pannello operatore)
+
+Le due interfacce condividono lo stato in tempo reale tramite WebSocket.
+
+### Funzionalita Principali
+
+- **Gestione partita in tempo reale**
+  - Tracciamento punti home/guest
+  - Gestione set
+  - Indicatore servizio
+  - Storico punti (striscia)
+  - Blocchi logici quando il set e gia vinto
+
+- **Regole pallavolo integrate**
+  - Set normali: vittoria a 25 con almeno 2 punti di scarto
+  - Set decisivo: vittoria a 15 con almeno 2 punti di scarto
+  - Modalita partita `2/3` o `3/5`
+
+- **Formazioni e cambi**
+  - Gestione formazione a 6 giocatori
+  - Rotazione automatica al cambio palla
+  - Dialog cambi con validazioni (`IN -> OUT`)
+
+- **Controlli e personalizzazione**
+  - Configurazione nomi squadre
+  - Toggle ordine squadre (inverti)
+  - Toggle visualizzazione punteggio/formazioni
+  - Toggle striscia storico
+  - Sintesi vocale punteggio (Web Speech API)
+
+---
+
+## Requisiti
+
+### Requisiti di Sistema
+
+#### Per Sviluppo
+- **Sistema Operativo**: Linux, macOS, Windows
+- **Node.js**: `>= 18.19.0` (consigliato `20 LTS`)
+- **npm**: `>= 9`
+- **RAM**: minimo 2GB (consigliato 4GB)
+
+#### Per Esecuzione Test E2E
+- Browser Playwright installati (`chromium`, `firefox`)
+- Su Linux, eventuali dipendenze sistema per browser headless
+
+Comandi utili:
+
+```bash
+node -v
+npm -v
+npx playwright install chromium firefox
+# Linux, se necessario:
+# npx playwright install --with-deps chromium firefox
+```
+
+### Requisiti Browser (Utente Finale)
+
+| Requisito | Dettaglio | Necessita |
+|-----------|-----------|-----------|
+| JavaScript ES6+ | Moduli, async/await | Obbligatorio |
+| WebSocket | Sincronizzazione stato live | Obbligatorio |
+| Service Worker API | Supporto PWA offline | Consigliato |
+| Web Speech API | Annunci vocali | Opzionale |
+
+### Browser Testati e Supportati
+
+| Browser | Supporto | Note |
+|---------|----------|------|
+| Chrome/Chromium | ✅ | Completo |
+| Firefox | ✅ | Completo |
+| Mobile Chrome (Playwright Pixel 5) | ✅ | Copertura E2E mobile |
+
+---
+
+## Installazione e Setup
+
+### Prerequisiti
+
+- Node.js `>= 18.19.0`
+- npm `>= 9`
+
+### Installazione
+
+```bash
+git clone https://santantonio.sytes.net/attilio/segnapunti.git
+cd segnapunti
+npm install
+```
+
+---
+
+## Comandi per Sviluppo
+
+### Dev Server
+
+Avvia il server di sviluppo Vite:
+
+```bash
+npm run dev
+```
+
+Accesso tipico in sviluppo:
+- `http://localhost:5173/` -> Display
+- `http://localhost:5173/controller.html` -> Controller
+
+### Modalita Sviluppo
+- Hot reload attivo
+- Build veloce lato Vite
+- Buona per sviluppo UI/UX
+
+---
+
+## Comandi per Build
+
+### Build Produzione
+
+```bash
+npm run build
+```
+
+Output:
+- cartella `dist/`
+- asset ottimizzati
+- file PWA (manifest + service worker)
+
+### Avvio Server Applicativo Locale (Display + Controller)
+
+```bash
+npm run serve
+```
+
+Espone:
+- `http://localhost:3000` -> Display
+- `http://localhost:3001` -> Controller
+
+### Altri comandi utili
+
+```bash
+npm run preview
+npm run start
+```
+
+---
+
+## Configurazione PWA
+
+L'app usa `vite-plugin-pwa` (vedi `vite.config.js`) con:
+- `registerType: 'autoUpdate'`
+- manifest installabile
+- orientamento landscape
+- modalita fullscreen
+
+Caratteristiche principali:
+- installabile su dispositivi supportati
+- aggiornamento automatico del service worker
+- supporto utilizzo offline (in base alle risorse cache)
+
+---
+
+## Logica Regolamentare Pallavolo
+
+### Vittoria Set
+
+- Set normali: vittoria a 25 con almeno 2 punti di scarto
+- Set decisivo: vittoria a 15 con almeno 2 punti di scarto
+- Modalita partita supportate: `2/3` e `3/5`
+
+### Rotazione Formazione
+
+La rotazione avviene durante i cambi palla secondo la logica implementata in `src/gameState.js`.
+
+### Formazione in Campo
+
+Il sistema gestisce 6 posizioni per squadra e permette cambi validati da Controller.
+
+---
+
+## Test (stato attuale)
+
+Suite presenti:
+- Unit
+- Integration
+- Component
+- Stress
+- E2E (Playwright)
+
+Comandi principali:
+
+```bash
+npm run test:all
+npm run test:e2e
+```
+
+Guida completa test:
+- `tests/README.md`

controller.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Segnapunti - Controller</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/controller-main.js"></script>
+  </body>
+</html>

docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  segnapunti:
+    build: .
+    ports:
+      - 3000:3000
+      - 3001:3001
+    container_name: segnapunti-container
+

package.json

@@ -6,16 +6,38 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "node server.js",
+    "start": "node server.js",
+    "serve": "vite build && node server.js",
+    "test": "vitest",
+    "test:unit": "vitest run tests/unit tests/integration",
+    "test:component": "vitest run tests/component",
+    "test:stress": "vitest run tests/stress",
+    "test:all": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:e2e": "playwright test --config=playwright.config.cjs",
+    "test:e2e:ui": "playwright test --config=playwright.config.cjs --ui",
+    "test:e2e:codegen": "playwright codegen --config=playwright.config.cjs"
   },
   "dependencies": {
-    "nosleep.js": "^0.12.0",
+    "express": "^5.2.1",
     "vue": "^3.2.47",
-    "wave-ui": "^3.3.0"
+    "vue-router": "^4.6.4",
+    "wave-ui": "^3.3.0",
+    "ws": "^8.19.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.1",
+    "@playwright/test": "^1.58.2",
+    "@types/node": "^25.2.3",
     "@vitejs/plugin-vue": "^4.1.0",
+    "@vitest/ui": "^4.0.18",
+    "@vue/test-utils": "^2.4.6",
+    "concurrently": "^9.2.1",
+    "happy-dom": "^20.6.1",
+    "jsdom": "^28.0.0",
     "vite": "^4.3.9",
-    "vite-plugin-pwa": "^0.16.0"
+    "vite-plugin-pwa": "^0.16.0",
+    "vitest": "^4.0.18"
   }
 }

playwright.config.cjs

@@ -0,0 +1,38 @@
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+module.exports = defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run serve',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

playwright.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run serve',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

server.js

@@ -0,0 +1,83 @@
+import { createServer } from 'http'
+import express from 'express'
+import { WebSocketServer } from 'ws'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { setupWebSocketHandler } from './src/websocket-handler.js'
+import { printServerInfo } from './src/server-utils.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// --- Configurazione del server ---
+
+const DISPLAY_PORT = process.env.PORT || 3000
+const CONTROLLER_PORT = process.env.CONTROLLER_PORT || 3001
+
+// ========================================
+// Server Display (porta principale)
+// ========================================
+
+const displayApp = express()
+
+// Espone i file generati dalla build di Vite.
+displayApp.use(express.static(join(__dirname, 'dist')))
+
+// Fallback per SPA: restituisce `index.html` per tutte le route.
+displayApp.get(/.*/, (_req, res) => {
+    res.sendFile(join(__dirname, 'dist', 'index.html'))
+})
+
+const displayServer = createServer(displayApp)
+
+// Inizializza il server WebSocket condiviso.
+const wss = new WebSocketServer({ noServer: true })
+setupWebSocketHandler(wss)
+
+displayServer.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()
+    }
+})
+
+displayServer.listen(DISPLAY_PORT, '0.0.0.0', () => {
+    console.log(`[Display] Server running on port ${DISPLAY_PORT}`)
+})
+
+// ========================================
+// Server Controller (porta separata)
+// ========================================
+
+const controllerApp = express()
+
+// Espone gli stessi file statici della build.
+// IMPORTANTE: { index: false } impedisce di servire index.html (il display) sulla root.
+controllerApp.use(express.static(join(__dirname, 'dist'), { index: false }))
+
+// Fallback: restituisce `controller.html` per tutte le route.
+controllerApp.get(/.*/, (_req, res) => {
+    res.sendFile(join(__dirname, 'dist', 'controller.html'))
+})
+
+const controllerServer = createServer(controllerApp)
+
+// Gestisce l'upgrade WebSocket anche sulla porta del controller.
+controllerServer.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()
+    }
+})
+
+controllerServer.listen(CONTROLLER_PORT, '0.0.0.0', () => {
+    printServerInfo(DISPLAY_PORT, CONTROLLER_PORT)
+})

src/App.vue

@@ -1,7 +1,3 @@
-<script setup>
-import HomePage from './components/HomePage/index.vue'
-</script>
-
 <template>
-  <HomePage />
+  <router-view />
 </template>

src/components/ControllerPage.vue

@@ -0,0 +1,908 @@
+<template>
+  <section class="controller-page">
+    <!-- Barra di stato connessione -->
+    <div class="conn-bar" :class="{ connected: wsConnected }">
+      <span class="dot"></span>
+      {{ wsConnected ? 'Connesso' : 'Connessione...' }}
+    </div>
+
+    <!-- Anteprima punteggio -->
+    <div class="score-preview">
+      <div class="team-score home-bg" @click="sendAction({ type: 'incPunt', team: 'home' })">
+        <div class="team-name">{{ state.sp.nomi.home }}</div>
+        <div class="team-pts">{{ state.sp.punt.home }}</div>
+        <div class="team-set">SET {{ state.sp.set.home }}</div>
+        <img v-show="state.sp.servHome" src="/serv.png" class="serv-icon" alt="Servizio" />
+      </div>
+      <div class="team-score guest-bg" @click="sendAction({ type: 'incPunt', team: 'guest' })">
+        <div class="team-name">{{ state.sp.nomi.guest }}</div>
+        <div class="team-pts">{{ state.sp.punt.guest }}</div>
+        <div class="team-set">SET {{ state.sp.set.guest }}</div>
+        <img v-show="!state.sp.servHome" src="/serv.png" class="serv-icon" alt="Servizio" />
+      </div>
+    </div>
+
+    <!-- Riga annulla punto -->
+    <div class="undo-row">
+      <button class="btn btn-undo" @click="sendAction({ type: 'decPunt' })">
+        ANNULLA PUNTO
+      </button>
+    </div>
+
+    <!-- Pulsanti set -->
+    <div class="action-row">
+      <button class="btn btn-set home-bg" @click="sendAction({ type: 'incSet', team: 'home' })">
+        SET {{ state.sp.nomi.home }}
+      </button>
+      <button class="btn btn-set guest-bg" @click="sendAction({ type: 'incSet', team: 'guest' })">
+        SET {{ state.sp.nomi.guest }}
+      </button>
+    </div>
+
+    <!-- Controlli principali -->
+    <div class="controls">
+      <button class="btn btn-ctrl" @click="sendAction({ type: 'cambiaPalla' })" :disabled="!isPunteggioZeroZero">
+        Cambio Palla
+      </button>
+      <button class="btn btn-ctrl" @click="sendAction({ type: 'toggleFormazione' })">
+        {{ state.visuForm ? 'Punteggio' : 'Formazioni' }}
+      </button>
+      <button class="btn btn-ctrl" @click="sendAction({ type: 'toggleStriscia' })">
+        Striscia
+      </button>
+      <button class="btn btn-ctrl" @click="sendAction({ type: 'toggleOrder' })">
+        Inverti
+      </button>
+      <button class="btn btn-ctrl" @click="speak()">
+        Voce
+      </button>
+      <button class="btn btn-ctrl" @click="openConfig()">
+        Config
+      </button>
+      <button class="btn btn-ctrl" @click="openCambiTeam()">
+        Cambi
+      </button>
+      <button class="btn btn-danger" @click="confirmReset = true">
+        Reset
+      </button>
+    </div>
+
+    <!-- Finestra conferma reset -->
+    <div class="overlay" v-if="confirmReset" @click.self="confirmReset = false">
+      <div class="dialog">
+        <div class="dialog-title">Azzero punteggio?</div>
+        <div class="dialog-buttons">
+          <button class="btn btn-cancel" @click="confirmReset = false">NO</button>
+          <button class="btn btn-confirm" @click="doReset()">SI</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Finestra configurazione -->
+    <div class="overlay" v-if="showConfig" @click.self="showConfig = false">
+      <div class="dialog dialog-config">
+        <div class="dialog-title">Configurazione</div>
+
+        <div class="form-group">
+          <label>Nome Home</label>
+          <input type="text" v-model="configData.nomeHome" class="input-field" />
+        </div>
+        <div class="form-group">
+          <label>Nome Guest</label>
+          <input type="text" v-model="configData.nomeGuest" class="input-field" />
+        </div>
+
+        <div class="form-group">
+          <label>Modalità partita</label>
+          <div class="mode-buttons">
+            <button :class="['btn', 'btn-mode', configData.modalita === '2/3' ? 'active' : '']"
+              @click="configData.modalita = '2/3'">2/3</button>
+            <button :class="['btn', 'btn-mode', configData.modalita === '3/5' ? 'active' : '']"
+              @click="configData.modalita = '3/5'">3/5</button>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>Formazione Home</label>
+          <div class="form-grid">
+            <div class="form-row">
+              <input type="text" v-model="configData.formHome[3]" class="input-num" />
+              <input type="text" v-model="configData.formHome[2]" class="input-num" />
+              <input type="text" v-model="configData.formHome[1]" class="input-num" />
+            </div>
+            <div class="form-line"></div>
+            <div class="form-row">
+              <input type="text" v-model="configData.formHome[4]" class="input-num" />
+              <input type="text" v-model="configData.formHome[5]" class="input-num" />
+              <input type="text" v-model="configData.formHome[0]" class="input-num" />
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label>Formazione Guest</label>
+          <div class="form-grid">
+            <div class="form-row">
+              <input type="text" v-model="configData.formGuest[3]" class="input-num" />
+              <input type="text" v-model="configData.formGuest[2]" class="input-num" />
+              <input type="text" v-model="configData.formGuest[1]" class="input-num" />
+            </div>
+            <div class="form-line"></div>
+            <div class="form-row">
+              <input type="text" v-model="configData.formGuest[4]" class="input-num" />
+              <input type="text" v-model="configData.formGuest[5]" class="input-num" />
+              <input type="text" v-model="configData.formGuest[0]" class="input-num" />
+            </div>
+          </div>
+        </div>
+
+        <div class="dialog-buttons">
+          <button class="btn btn-cancel" @click="showConfig = false">Annulla</button>
+          <button class="btn btn-confirm" @click="saveConfig()">OK</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Selezione squadra per cambi -->
+    <div class="overlay" v-if="showCambiTeam" @click.self="showCambiTeam = false">
+      <div class="dialog">
+        <div class="dialog-title">Scegli squadra</div>
+        <div class="dialog-buttons">
+          <button class="btn btn-set home-bg" @click="openCambi('home')">{{ state.sp.nomi.home }}</button>
+          <button class="btn btn-set guest-bg" @click="openCambi('guest')">{{ state.sp.nomi.guest }}</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Finestra gestione cambi -->
+    <div class="overlay" v-if="showCambi" @click.self="closeCambi()">
+      <div class="dialog">
+        <div class="dialog-title">{{ state.sp.nomi[cambiTeam] }}: CAMBIO</div>
+        <div class="cambi-container">
+          <div class="cambio-row" v-for="(c, i) in cambiData" :key="i">
+            <input type="text" v-model="c.in" placeholder="IN" class="input-num cambi-in-field" />
+            <span class="cambio-arrow">→</span>
+            <input type="text" v-model="c.out" placeholder="OUT" class="input-num cambi-out-field" />
+          </div>
+        </div>
+        <div v-if="cambiError" class="cambi-error">{{ cambiError }}</div>
+        <div class="dialog-buttons">
+          <button class="btn btn-cancel" @click="closeCambi()">Annulla</button>
+          <button class="btn btn-confirm" :disabled="!cambiValid" @click="confermaCambi()">CONFERMA</button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "ControllerPage",
+  data() {
+    return {
+      ws: null,
+      wsConnected: false,
+      isConnecting: false,
+      reconnectTimeout: null,
+      reconnectAttempts: 0,
+      maxReconnectDelay: 30000,
+      confirmReset: false,
+      showConfig: false,
+      showCambiTeam: false,
+      showCambi: false,
+      cambiTeam: "home",
+      cambiData: [
+        { in: "", out: "" },
+        { in: "", out: "" },
+      ],
+      cambiError: "",
+      configData: {
+        nomeHome: "",
+        nomeGuest: "",
+        modalita: "3/5",
+        formHome: ["1", "2", "3", "4", "5", "6"],
+        formGuest: ["1", "2", "3", "4", "5", "6"],
+      },
+      state: {
+        order: true,
+        visuForm: false,
+        visuStriscia: true,
+        modalitaPartita: "3/5",
+        sp: {
+          striscia: { home: [0], guest: [0] },
+          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"],
+          },
+          storicoServizio: [],
+        },
+      },
+    }
+  },
+  computed: {
+    isPunteggioZeroZero() {
+      return this.state.sp.punt.home === 0 && this.state.sp.punt.guest === 0
+    },
+    cambiValid() {
+      let hasComplete = false
+      let allValid = true
+      this.cambiData.forEach((c) => {
+        const cin = (c.in || "").trim()
+        const cout = (c.out || "").trim()
+        if (!cin && !cout) return
+        if (!cin || !cout) { allValid = false; return }
+        hasComplete = true
+      })
+      return allValid && hasComplete
+    }
+  },
+  mounted() {
+    this.connectWebSocket()
+
+    // 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.
+    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('[Controller] Error closing WebSocket:', err)
+      }
+      this.ws = null
+    }
+  },
+  methods: {
+    connectWebSocket() {
+      // Evita connessioni simultanee multiple.
+      if (this.isConnecting) {
+        console.log('[Controller] 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('[Controller] 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:3001
+      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('[Controller] Connecting to WebSocket:', wsUrl)
+
+      try {
+        this.ws = new WebSocket(wsUrl)
+      } catch (err) {
+        console.error('[Controller] 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('[Controller] Connected to server')
+
+        // Invia la registrazione solo se la connessione e realmente aperta.
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          try {
+            this.ws.send(JSON.stringify({ type: 'register', role: 'controller' }))
+          } catch (err) {
+            console.error('[Controller] 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 === 'error') {
+            console.error('[Controller] Server error:', msg.message)
+            // Fornisce feedback di errore all'utente.
+            this.showErrorFeedback(msg.message)
+          }
+        } catch (e) {
+          console.error('[Controller] Parse error:', e)
+        }
+      }
+
+      this.ws.onclose = (event) => {
+        this.isConnecting = false
+        this.wsConnected = false
+        console.log('[Controller] 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('[Controller] Clean close, not reconnecting')
+          return
+        }
+
+        this.scheduleReconnect()
+      }
+
+      this.ws.onerror = (err) => {
+        console.error('[Controller] 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(`[Controller] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
+
+      this.reconnectTimeout = setTimeout(() => {
+        this.reconnectTimeout = null
+        this.connectWebSocket()
+      }, delay)
+    },
+
+    sendAction(action) {
+      if (!this.wsConnected || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
+        console.warn('[Controller] Cannot send action: not connected')
+        this.showErrorFeedback('Non connesso al server')
+        return
+      }
+
+      // Valida l'azione prima dell'invio.
+      if (!action || !action.type) {
+        console.error('[Controller] Invalid action format:', action)
+        return
+      }
+
+      try {
+        this.ws.send(JSON.stringify({ type: 'action', action }))
+      } catch (err) {
+        console.error('[Controller] Failed to send action:', err)
+        this.showErrorFeedback('Errore invio comando')
+      }
+    },
+
+    showErrorFeedback(message) {
+      // Feedback visivo degli errori: attualmente solo log su console.
+      // In futuro puo essere esteso con notifiche a comparsa (toast).
+      console.error('[Controller] Error:', message)
+    },
+
+    doReset() {
+      this.sendAction({ type: 'resetta' })
+      this.confirmReset = false
+    },
+
+    openConfig() {
+      this.configData.nomeHome = this.state.sp.nomi.home
+      this.configData.nomeGuest = this.state.sp.nomi.guest
+      this.configData.modalita = this.state.modalitaPartita
+      this.configData.formHome = [...this.state.sp.form.home]
+      this.configData.formGuest = [...this.state.sp.form.guest]
+      this.showConfig = true
+    },
+
+    saveConfig() {
+      this.sendAction({ type: 'setNomi', home: this.configData.nomeHome, guest: this.configData.nomeGuest })
+      this.sendAction({ type: 'setModalita', modalita: this.configData.modalita })
+      this.sendAction({ type: 'setFormazione', team: 'home', form: this.configData.formHome })
+      this.sendAction({ type: 'setFormazione', team: 'guest', form: this.configData.formGuest })
+      this.showConfig = false
+    },
+
+    openCambiTeam() {
+      this.showCambiTeam = true
+    },
+
+    openCambi(team) {
+      this.showCambiTeam = false
+      this.cambiTeam = team
+      this.cambiData = [{ in: "", out: "" }, { in: "", out: "" }]
+      this.cambiError = ""
+      this.showCambi = true
+    },
+
+    closeCambi() {
+      this.showCambi = false
+      this.cambiData = [{ in: "", out: "" }, { in: "", out: "" }]
+      this.cambiError = ""
+    },
+
+    confermaCambi() {
+      if (!this.cambiValid) return
+      this.cambiError = ""
+
+      const cambi = this.cambiData
+        .filter(c => (c.in || "").trim() && (c.out || "").trim())
+        .map(c => ({ in: c.in.trim(), out: c.out.trim() }))
+
+      // Simula i cambi in sequenza per validare
+      const formCorrente = this.state.sp.form[this.cambiTeam].map(v => String(v).trim())
+      const formSimulata = [...formCorrente]
+
+      for (const cambio of cambi) {
+        if (!/^\d+$/.test(cambio.in) || !/^\d+$/.test(cambio.out)) {
+          this.cambiError = "I numeri dei giocatori devono essere cifre"
+          return
+        }
+        if (cambio.in === cambio.out) {
+          this.cambiError = `Il giocatore ${cambio.in} non può sostituire sé stesso`
+          return
+        }
+        if (formSimulata.includes(cambio.in)) {
+          this.cambiError = `Il giocatore ${cambio.in} è già in formazione`
+          return
+        }
+        if (!formSimulata.includes(cambio.out)) {
+          this.cambiError = `Il giocatore ${cambio.out} non è in formazione`
+          return
+        }
+        const idx = formSimulata.indexOf(cambio.out)
+        formSimulata.splice(idx, 1, cambio.in)
+      }
+
+      this.sendAction({ type: 'confermaCambi', team: this.cambiTeam, cambi })
+      this.closeCambi()
+    },
+
+    speak() {
+      let text = ''
+      if (this.state.sp.punt.home + this.state.sp.punt.guest === 0) {
+        text = "zero a zero"
+      } else if (this.state.sp.punt.home === this.state.sp.punt.guest) {
+        text = this.state.sp.punt.home + " pari"
+      } else {
+        if (this.state.sp.servHome) {
+          text = this.state.sp.punt.home + " a " + this.state.sp.punt.guest
+        } else {
+          text = this.state.sp.punt.guest + " a " + this.state.sp.punt.home
+        }
+      }
+      if (!this.wsConnected || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
+        this.showErrorFeedback('Non connesso al server')
+        return
+      }
+
+      try {
+        this.ws.send(JSON.stringify({ type: 'speak', text }))
+      } catch (err) {
+        console.error('[Controller] Failed to send speak command:', err)
+        this.showErrorFeedback('Errore invio comando voce')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.controller-page {
+  min-height: 100vh;
+  background: #111;
+  color: #fff;
+  padding: 8px;
+  padding-top: 36px;
+  font-family: 'Inter', system-ui, sans-serif;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Barra stato connessione */
+.conn-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  background: #c62828;
+  color: white;
+  z-index: 200;
+  transition: background 0.3s;
+}
+.conn-bar.connected {
+  background: #2e7d32;
+}
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: white;
+}
+
+/* Anteprima punteggio */
+.score-preview {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.team-score {
+  flex: 1;
+  border-radius: 16px;
+  padding: 16px 12px;
+  text-align: center;
+  cursor: pointer;
+  position: relative;
+  transition: transform 0.1s;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.team-score:active {
+  transform: scale(0.97);
+}
+.home-bg {
+  background: linear-gradient(145deg, #1a1a1a, #333);
+  border: 2px solid #fdd835;
+  color: #fdd835;
+}
+.guest-bg {
+  background: linear-gradient(145deg, #0d47a1, #1565c0);
+  border: 2px solid #64b5f6;
+  color: #fff;
+}
+.team-name {
+  font-size: 14px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 4px;
+}
+.team-pts {
+  font-size: 56px;
+  font-weight: 900;
+  line-height: 1;
+}
+.team-set {
+  font-size: 13px;
+  font-weight: 600;
+  opacity: 0.75;
+  margin-top: 4px;
+}
+.serv-icon {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+/* Riga annulla punto */
+.undo-row {
+  margin-bottom: 8px;
+}
+.btn-undo {
+  width: 100%;
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.2);
+  color: #ffab91;
+  padding: 10px;
+  font-size: 14px;
+  font-weight: 700;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.btn-undo:active {
+  background: rgba(255,100,50,0.2);
+}
+
+/* Pulsanti set */
+.action-row {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.btn-set {
+  flex: 1;
+  padding: 12px;
+  font-size: 13px;
+  font-weight: 700;
+  border-radius: 12px;
+  cursor: pointer;
+  border: none;
+  text-transform: uppercase;
+}
+.btn-set:active {
+  transform: scale(0.97);
+}
+
+/* Griglia controlli */
+.controls {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.btn {
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.btn-ctrl {
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.15);
+  color: #e0e0e0;
+  padding: 14px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 12px;
+  transition: background 0.15s;
+}
+.btn-ctrl:active {
+  background: rgba(255,255,255,0.18);
+}
+.btn-ctrl:disabled {
+  opacity: 0.35;
+}
+
+.btn-danger {
+  background: rgba(198, 40, 40, 0.25);
+  border: 1px solid rgba(239, 83, 80, 0.4);
+  color: #ff8a80;
+  padding: 14px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 12px;
+}
+.btn-danger:active {
+  background: rgba(198, 40, 40, 0.45);
+}
+
+/* Overlay e finestre modali */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 300;
+  padding: 16px;
+}
+
+.dialog {
+  background: #1e1e1e;
+  border-radius: 20px;
+  padding: 24px;
+  width: 100%;
+  max-width: 400px;
+  border: 1px solid rgba(255,255,255,0.12);
+}
+
+.dialog-config {
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 800;
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255,255,255,0.12);
+}
+
+.dialog-buttons {
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.btn-cancel {
+  flex: 1;
+  background: rgba(255,255,255,0.08);
+  color: #aaa;
+  padding: 12px;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.btn-confirm {
+  flex: 1;
+  background: #2e7d32;
+  color: white;
+  padding: 12px;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 700;
+}
+.btn-confirm:disabled {
+  opacity: 0.4;
+}
+
+/* Gruppi form */
+.form-group {
+  margin-bottom: 16px;
+}
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #aaa;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.input-field {
+  width: 100%;
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.2);
+  color: white;
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-size: 16px;
+  box-sizing: border-box;
+}
+.input-field:focus {
+  outline: none;
+  border-color: #64b5f6;
+}
+
+.input-num {
+  width: 52px;
+  background: rgba(255,255,255,0.08);
+  border: 1px solid rgba(255,255,255,0.2);
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  font-size: 18px;
+  text-align: center;
+  box-sizing: border-box;
+}
+.input-num:focus {
+  outline: none;
+  border-color: #64b5f6;
+}
+
+/* Griglia formazione */
+.form-grid {
+  background: rgba(205, 133, 63, 0.15);
+  border: 2px solid rgba(255,255,255,0.15);
+  border-radius: 12px;
+  padding: 12px;
+}
+.form-row {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  padding: 8px 0;
+}
+.form-line {
+  border-top: 1px dashed rgba(255,255,255,0.3);
+  margin: 4px 0;
+}
+
+/* Pulsanti modalita */
+.mode-buttons {
+  display: flex;
+  gap: 8px;
+}
+.btn-mode {
+  flex: 1;
+  padding: 10px;
+  background: rgba(255,255,255,0.08);
+  color: #aaa;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  transition: all 0.15s;
+}
+.btn-mode.active {
+  background: #2e7d32;
+  color: white;
+}
+
+/* Sezione cambi */
+.cambi-container {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 8px 0;
+}
+.cambio-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+.cambio-arrow {
+  font-size: 20px;
+  font-weight: 700;
+  color: #aaa;
+}
+.cambi-in-field {
+  background: rgba(120, 200, 120, 0.2) !important;
+  border-color: rgba(120, 200, 120, 0.4) !important;
+}
+.cambi-out-field {
+  background: rgba(200, 120, 120, 0.2) !important;
+  border-color: rgba(200, 120, 120, 0.4) !important;
+}
+.cambi-error {
+  color: #ff6b6b;
+  font-size: 14px;
+  text-align: center;
+  padding: 8px 0;
+  font-weight: 600;
+}
+</style>

src/components/DisplayPage.vue

@@ -0,0 +1,439 @@
+<template>
+  <section class="display-page">
+    <div class="campo">
+      <span v-if="state.order">
+        <!-- Ordine visualizzazione: home / guest -->
+        <div class="hea home">
+          <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" />
+            </span>
+            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.home }}</span>
+          </span>
+          <span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.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 class="serv-slot">
+              <img v-show="!state.sp.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>
+        </div>
+
+        <span v-if="state.visuForm">
+          <div class="col form home">
+            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'hf'+x">
+              {{ state.sp.form.home[x] }}
+            </div>
+          </div>
+          <div class="col form guest">
+            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'gf'+x">
+              {{ state.sp.form.guest[x] }}
+            </div>
+          </div>
+        </span>
+        <span v-else>
+          <div class="punteggio-container">
+            <div class="col punt home">{{ state.sp.punt.home }}</div>
+            <div class="col punt guest">{{ state.sp.punt.guest }}</div>
+          </div>
+        </span>
+      </span>
+
+      <span v-else>
+        <!-- Ordine visualizzazione: guest / home -->
+        <div class="hea guest">
+          <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" />
+            </span>
+            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.guest }}</span>
+          </span>
+          <span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.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 class="serv-slot">
+              <img v-show="state.sp.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>
+        </div>
+
+        <span v-if="state.visuForm">
+          <div class="col form guest">
+            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'gf2'+x">
+              {{ state.sp.form.guest[x] }}
+            </div>
+          </div>
+          <div class="col form home">
+            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'hf2'+x">
+              {{ state.sp.form.home[x] }}
+            </div>
+          </div>
+        </span>
+        <span v-else>
+          <div class="punteggio-container">
+            <div class="col punt guest">{{ state.sp.punt.guest }}</div>
+            <div class="col punt home">{{ state.sp.punt.home }}</div>
+          </div>
+        </span>
+      </span>
+
+      <div class="striscia" v-if="state.visuStriscia">
+        <span class="striscia-nome text-bold">{{ state.sp.nomi.home }}</span>
+        <div class="striscia-items" ref="homeItems">
+          <div v-for="(h, i) in state.sp.striscia.home" :key="'sh'+i"
+               class="item" :class="{ 'item-vuoto': String(h).trim() === '' }">
+            {{ String(h) }}
+          </div>
+        </div>
+        <span class="striscia-nome text-bold guest-striscia">{{ state.sp.nomi.guest }}</span>
+        <div class="striscia-items guest-striscia" ref="guestItems">
+          <div v-for="(h, i) in state.sp.striscia.guest" :key="'sg'+i"
+               class="item" :class="{ 'item-vuoto': String(h).trim() === '' }">
+            {{ String(h) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Indicatore stato connessione -->
+      <div class="connection-status" :class="{ connected: wsConnected, disconnected: !wsConnected }">
+        <span class="dot"></span>
+        {{ wsConnected ? '' : 'Disconnesso' }}
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "DisplayPage",
+  data() {
+    return {
+      ws: null,
+      wsConnected: false,
+      isConnecting: false,
+      reconnectTimeout: null,
+      reconnectAttempts: 0,
+      maxReconnectDelay: 30000, // Ritardo massimo di riconnessione: 30 secondi
+      state: {
+        order: true,
+        visuForm: false,
+        visuStriscia: true,
+        modalitaPartita: "3/5",
+        sp: {
+          striscia: { home: [0], guest: [0] },
+          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"],
+          },
+          storicoServizio: [],
+        },
+      },
+    }
+  },
+  mounted() {
+    this.connectWebSocket()
+    // Attiva la modalita fullscreen su dispositivi mobili.
+    if (this.isMobile()) {
+      try { document.documentElement.requestFullscreen() } catch (e) {}
+    }
+
+    // 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.
+    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
+    }
+  },
+  watch: {
+    'state.sp.striscia.home': {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.$refs.homeItems) this.$refs.homeItems.scrollLeft = this.$refs.homeItems.scrollWidth
+        })
+      }
+    },
+    'state.sp.striscia.guest': {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.$refs.guestItems) this.$refs.guestItems.scrollLeft = this.$refs.guestItems.scrollWidth
+        })
+      }
+    }
+  },
+  methods: {
+    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()) {
+        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')
+        || voices.find((v) => v.lang && v.lang.toLowerCase().startsWith('it'))
+      if (preferredVoice) {
+        utterance.voice = preferredVoice
+      }
+      utterance.lang = 'it-IT'
+
+      window.speechSynthesis.cancel()
+      window.speechSynthesis.speak(utterance)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.display-page {
+  width: 100%;
+  height: 100vh;
+  background: #000;
+  overflow: hidden;
+}
+
+.connection-status {
+  position: fixed;
+  top: 8px;
+  right: 8px;
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  z-index: 100;
+  transition: opacity 0.5s;
+}
+
+.connection-status.connected {
+  opacity: 0;
+}
+
+.connection-status.disconnected {
+  background: rgba(255, 50, 50, 0.8);
+  color: white;
+  opacity: 1;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.connected .dot {
+  background: #4caf50;
+}
+
+.disconnected .dot {
+  background: #f44336;
+  animation: blink 1s infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.guest-striscia {
+  color: white;
+}
+
+.punteggio-container {
+  width: 100%;
+  display: flex;
+}
+
+.punt {
+  font-size: 60vh;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 50vh;
+  min-width: 50vw;
+  max-width: 50vw;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+</style>

src/components/HomePage.vue

@@ -1,220 +0,0 @@
-<script>
-import NoSleep from "nosleep.js";
-export default {
-  name: "HomePage",
-  components: {},
-  data() {
-    return {
-      voices: null,
-      diaNomi: {
-        show: false,
-        home: "",
-        guest: "",
-      },
-      visuForm: false,
-      visuButt: true,
-      sp: {
-        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.voices = window.speechSynthesis.getVoices();
-    if (this.isMobile()) {
-      this.speak();
-      var noSleep = new NoSleep();
-      noSleep.enable();
-      document.documentElement.requestFullscreen();
-    }
-    this.abilitaTastiSpeciali();
-  },
-  methods: {
-    closeApp() {
-      var win = window.open("", "_self");
-      win.close();
-    },
-    fullScreen() {
-      document.documentElement.requestFullscreen();
-    },
-    isMobile() {
-      if (
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent
-        )
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    resetta() {
-      this.$waveui.notify("Punteggio<br />RESETTATO", "success");
-      this.visuForm = false;
-      this.sp.punt.home = 0;
-      this.sp.punt.guest = 0;
-      this.sp.form = {
-        home: ["1", "2", "3", "4", "5", "6"],
-        guest: ["1", "2", "3", "4", "5", "6"],
-      }
-    },
-    incSet(team) {
-      if (this.sp.set[team] == 2) {
-        this.sp.set[team] = 0;
-      } else {
-        this.sp.set[team]++;
-      }
-    },
-    incPunt(team) {
-      this.sp.punt[team]++;
-      this.sp.servHome = (team == "home");
-      this.sp.form[team].push(this.sp.form[team].shift());
-    },
-    decPunt(team) {
-      // decrementa il punteggio se è > 0.
-      if (this.sp.punt[team] > 0) {
-        this.sp.punt[team]--;
-        this.sp.form[team].unshift(this.sp.form[team].pop());
-      }
-    },
-    speak() {
-      const msg = new SpeechSynthesisUtterance();
-      if (this.sp.punt.home + this.sp.punt.guest == 0) {
-        msg.text = "zero a zero";
-      } else if (this.sp.punt.home == this.sp.punt.guest) {
-        msg.text = this.sp.punt.home + " pari";
-      } else {
-        if (this.sp.servHome) {
-          msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
-        } else {
-          msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
-        }
-      }
-      // msg.volume = 1.0; // speech volume (default: 1.0)
-      // msg.pitch = 1.0; // speech pitch (default: 1.0)
-      // msg.rate = 1.0; // speech rate (default: 1.0)
-      msg.lang = 'it_IT'; // speech language (default: 'en-US')
-      const voices = window.speechSynthesis.getVoices();
-      msg.voice = voices.find(voice => voice.name === 'Google italiano'); // voice URI (default: platform-dependent)
-      // msg.onboundary = function (event) {
-      //   console.log('Speech reached a boundary:', event.name);
-      // };
-      // msg.onpause = function (event) {
-      //   console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
-      // };
-      window.speechSynthesis.speak(msg);
-    },
-    apriDialogConfig() {
-      this.disabilitaTastiSpeciali();
-      this.diaNomi.show = true;
-    },
-    disabilitaTastiSpeciali() {
-      window.removeEventListener("keydown", this.funzioneTastiSpeciali);
-    },
-    abilitaTastiSpeciali() {
-      window.addEventListener("keydown", this.funzioneTastiSpeciali);
-    },
-    funzioneTastiSpeciali(e) {
-      e.preventDefault();
-      if (e.ctrlKey && e.key == "m") {
-        this.diaNomi.show = true
-      } else if (e.ctrlKey && e.key == "b") {
-        this.visuButt = !this.visuButt
-      } else if (e.ctrlKey && e.key == "f") {
-        document.documentElement.requestFullscreen();
-      } else if (e.ctrlKey && e.key == "s") {
-        this.speak();
-      } else if (e.ctrlKey && e.key == "z") {
-        this.visuForm = !this.visuForm
-      } else if (e.ctrlKey && e.key == "ArrowUp") {
-        this.incPunt("home")
-      } else if (e.ctrlKey && e.key == "ArrowDown") {
-        this.decPunt("home")
-      } else if (e.ctrlKey && e.key == "ArrowRight") {
-        this.incSet("home")
-      } else if (e.shiftKey && e.key == "ArrowUp") {
-        this.incPunt("guest")
-      } else if (e.shiftKey && e.key == "ArrowDown") {
-        this.decPunt("guest")
-      } else if (e.shiftKey && e.key == "ArrowRight") {
-        this.incSet("guest")
-      } else if (e.ctrlKey && e.key == "ArrowLeft") {
-        this.sp.servHome = !this.sp.servHome
-      } else { return false }
-    }
-  }
-};
-</script>
-
-<template>
-  <w-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
-    <w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
-    <w-input v-model="sp.nomi.guest" type="text" class="pa3">Guest</w-input>
-    <w-button bg-color="success" @click="diaNomi.show = false">
-      Ok
-    </w-button>
-  </w-dialog>
-  <div class="campo">
-    <div class="hea home">
-      <span @click="decPunt('home')" :style="{ 'float': 'left' }">
-        {{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
-        <span v-if="visuForm">{{ sp.punt.home }}</span>
-      </span>
-      <span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
-    </div>
-    <div class="hea guest">
-      <span @click="decPunt('guest')" :style="{ 'float': 'right' }">
-        <img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
-        <span v-if="visuForm">{{ sp.punt.guest }}</span>
-      </span>
-      <span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
-
-    </div>
-    <span v-if="visuForm">
-      <div class="col form home" @click="incPunt('home')">
-        <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
-          {{ sp.form.home[x] }}
-        </div>
-      </div>
-      <div class="col form guest" @click="incPunt('guest')">
-        <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
-          {{ sp.form.guest[x] }}
-        </div>
-      </div>
-    </span>
-    <span v-else>
-      <div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
-      <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
-    </span>
-
-    <div class="bot" v-if="visuButt">
-      <w-flex justify-space-between class="pa2">
-        <w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
-          <img src="/exit.png" width="25" />
-        </w-confirm>
-        <w-button @click="apriDialogConfig()">
-          <img src="/gear.png" width="25" />
-        </w-button>
-        <w-button @click="sp.servHome = !sp.servHome">
-          <img src="/serv.png" width="25" />
-        </w-button>
-        <w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
-          RESET
-        </w-confirm>
-        <w-button @click="visuForm = !visuForm">
-          <span v-if="visuForm">PUNTEGGIO</span>
-          <span v-if="!visuForm">FORMAZIONI</span>
-        </w-button>
-        <w-button @click="speak">
-          <img src="/speaker.png" width="25" />
-        </w-button>
-      </w-flex>
-    </div>
-  </div>
-</template>

src/components/HomePage/HomePage.html

@@ -1,129 +0,0 @@
-<section class="homepage">
-    <w-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
-      <w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
-      <w-input v-model="sp.nomi.guest" type="text" class="pa3">Guest</w-input>
-      <w-button @click="order = !order">Inverti ordine</w-button>
-      <w-button bg-color="success" @click="diaNomi.show = false">
-        Ok
-      </w-button>
-    </w-dialog>
-    <div class="campo">
-
-      <span v-if="order">
-<!-- home guest -->
-      <div class="hea home">
-        <span @click="decPunt('home')" :style="{ 'float': 'left' }">
-          {{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
-          <span v-if="visuForm">{{ sp.punt.home }}</span>
-        </span>
-        <span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
-      </div>
-
-      <div class="hea guest">
-        <span @click="decPunt('guest')" :style="{ 'float': 'right' }">
-          <img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
-          <span v-if="visuForm">{{ sp.punt.guest }}</span>
-        </span>
-        <span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
-      </div>
-
-      <span v-if="visuForm">
-        <div class="col form home" @click="incPunt('home')">
-          <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
-            {{ sp.form.home[x] }}
-          </div>
-        </div>
-        <div class="col form guest" @click="incPunt('guest')">
-          <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
-            {{ sp.form.guest[x] }}
-          </div>
-        </div>
-      </span>
-      <span v-else>
-        <div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
-        <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
-      </span>
-  
-      </span>
-      <span v-else>
-<!-- guest home -->        
-
-      <div class="hea guest">
-        <span @click="decPunt('guest')" :style="{ 'float': 'left' }">
-          {{ sp.nomi.guest }} <img v-if="!sp.servHome" src="/serv.png" width="25" />
-          <span v-if="visuForm">{{ sp.punt.guest }}</span>
-        </span>
-        <span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span>
-      </div>
-
-      <div class="hea home">
-        <span @click="decPunt('home')" :style="{ 'float': 'right' }">
-          <img v-if="sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.home }}
-          <span v-if="visuForm">{{ sp.punt.home }}</span>
-        </span>
-        <span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
-      </div>
-
-      <span v-if="visuForm">
-        <div class="col form guest" @click="incPunt('guest')">
-          <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
-            {{ sp.form.guest[x] }}
-          </div>
-        </div>
-        <div class="col form home" @click="incPunt('home')">
-          <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
-            {{ sp.form.home[x] }}
-          </div>
-        </div>
-      </span>
-      <span v-else>
-        <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
-        <div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>        
-      </span>
-
-      </span>
-      
-      <div class="striscia" v-if="visuStriscia">
-      <div>
-        <span class="text-bold mr1">{{ sp.nomi.home }}</span>
-        <div v-for="h in sp.striscia.home" class="item">
-          {{String(h)}}
-        </div>
-      </div>
-      <div class="guest">
-        <span class="text-bold mr1">{{ sp.nomi.guest }}</span>
-        <div v-for="h in sp.striscia.guest" class="item">
-          {{String(h)}}
-        </div>
-      </div>
-      </div>
-
-      <div class="bot" v-if="visuButt">
-        <w-flex justify-space-between class="pa2">
-          <w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
-            <img src="/exit.png" width="25" />
-          </w-confirm>
-          <w-button @click="apriDialogConfig()">
-            <img src="/gear.png" width="25" />
-          </w-button>
-          <w-button @click="sp.servHome = !sp.servHome">
-            <img src="/serv.png" width="25" />
-          </w-button>
-          <w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
-            RESET
-          </w-confirm>
-          <w-button @click="visuForm = !visuForm">
-            <span v-if="visuForm">PUNTEGGIO</span>
-            <span v-if="!visuForm">FORMAZIONI</span>
-          </w-button>
-          <w-button @click="visuStriscia = !visuStriscia">
-            STRISCIA
-          </w-button>
-          <w-button @click="speak">
-            <img src="/speaker.png" width="25" />
-          </w-button>
-        </w-flex>
-      </div>
-    </div>
-</section>
-  

src/components/HomePage/HomePage.js

@@ -1,178 +0,0 @@
-import NoSleep from "nosleep.js";
-export default {
-  name: "HomePage",
-  components: {},
-  data() {
-    return {
-      order: true,
-      voices: null,
-      diaNomi: {
-        show: false,
-        home: "",
-        guest: "",
-      },
-      visuForm: false,
-      visuButt: true,
-      visuStriscia: true,
-      sp: {
-        striscia: { home: [0], guest: [0] },
-        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.voices = window.speechSynthesis.getVoices();
-    if (this.isMobile()) {
-      this.speak();
-      var noSleep = new NoSleep();
-      noSleep.enable();
-      document.documentElement.requestFullscreen();
-    }
-    this.abilitaTastiSpeciali();
-  },
-  methods: {
-    closeApp() {
-      var win = window.open("", "_self");
-      win.close();
-    },
-    fullScreen() {
-      document.documentElement.requestFullscreen();
-    },
-    isMobile() {
-      if (
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-          navigator.userAgent
-        )
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    resetta() {
-      this.$waveui.notify("Punteggio<br />RESETTATO", "success");
-      this.visuForm = false;
-      this.sp.punt.home = 0;
-      this.sp.punt.guest = 0;
-      this.sp.form = {
-        home: ["1", "2", "3", "4", "5", "6"],
-        guest: ["1", "2", "3", "4", "5", "6"],
-      }
-      this.sp.striscia = { home: [0], guest: [0] }
-    },
-    incSet(team) {
-      if (this.sp.set[team] == 2) {
-        this.sp.set[team] = 0;
-      } else {
-        this.sp.set[team]++;
-      }
-    },
-    incPunt(team) {
-      this.sp.punt[team]++;
-      if (team == 'home') {
-        this.sp.striscia.home.push(this.sp.punt.home)
-        this.sp.striscia.guest.push(' ')
-      } else {
-        this.sp.striscia.guest.push(this.sp.punt.guest)
-        this.sp.striscia.home.push(' ')
-      }      
-      this.sp.servHome = (team == "home");
-      this.sp.form[team].push(this.sp.form[team].shift());
-    },
-    decPunt() {
-      if (this.sp.striscia.home.length > 1) {
-        var tmpHome = this.sp.striscia.home.pop()
-        var tmpGuest = this.sp.striscia.guest.pop()
-        if (tmpHome == ' ') {
-          this.sp.punt.guest--
-          this.sp.form.guest.unshift(this.sp.form.guest.pop());
-        } else {
-          this.sp.punt.home--
-          this.sp.form.home.unshift(this.sp.form.home.pop());
-        }
-      }
-    },
-    // decPunt(team) {
-    //   // decrementa il punteggio se è > 0.
-    //   if (this.sp.punt[team] > 0) {
-    //     this.sp.punt[team]--;
-    //     this.sp.striscia.home.pop()
-    //     this.sp.striscia.guest.pop()
-    //     this.sp.form[team].unshift(this.sp.form[team].pop());
-    //   }
-    // },
-    speak() {
-      const msg = new SpeechSynthesisUtterance();
-      if (this.sp.punt.home + this.sp.punt.guest == 0) {
-        msg.text = "zero a zero";
-      } else if (this.sp.punt.home == this.sp.punt.guest) {
-        msg.text = this.sp.punt.home + " pari";
-      } else {
-        if (this.sp.servHome) {
-          msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
-        } else {
-          msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
-        }
-      }
-      // msg.volume = 1.0; // speech volume (default: 1.0)
-      // msg.pitch = 1.0; // speech pitch (default: 1.0)
-      // msg.rate = 1.0; // speech rate (default: 1.0)
-      // msg.lang = 'it_IT'; // speech language (default: 'en-US')
-      const voices = window.speechSynthesis.getVoices();
-      msg.voice = voices.find(voice => voice.name === 'Google italiano');
-      // voice URI (default: platform-dependent)
-      // msg.onboundary = function (event) {
-      //   console.log('Speech reached a boundary:', event.name);
-      // };
-      // msg.onpause = function (event) {
-      //   console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
-      // };
-      window.speechSynthesis.speak(msg);
-    },
-    apriDialogConfig() {
-      this.disabilitaTastiSpeciali();
-      this.diaNomi.show = true;
-    },
-    disabilitaTastiSpeciali() {
-      window.removeEventListener("keydown", this.funzioneTastiSpeciali);
-    },
-    abilitaTastiSpeciali() {
-      window.addEventListener("keydown", this.funzioneTastiSpeciali);
-    },
-    funzioneTastiSpeciali(e) {
-      e.preventDefault();
-      if (e.ctrlKey && e.key == "m") {
-        this.diaNomi.show = true
-      } else if (e.ctrlKey && e.key == "b") {
-        this.visuButt = !this.visuButt
-      } else if (e.ctrlKey && e.key == "f") {
-        document.documentElement.requestFullscreen();
-      } else if (e.ctrlKey && e.key == "s") {
-        this.speak();
-      } else if (e.ctrlKey && e.key == "z") {
-        this.visuForm = !this.visuForm
-      } else if (e.ctrlKey && e.key == "ArrowUp") {
-        this.incPunt("home")
-      } else if (e.ctrlKey && e.key == "ArrowDown") {
-        this.decPunt("home")
-      } else if (e.ctrlKey && e.key == "ArrowRight") {
-        this.incSet("home")
-      } else if (e.shiftKey && e.key == "ArrowUp") {
-        this.incPunt("guest")
-      } else if (e.shiftKey && e.key == "ArrowDown") {
-        this.decPunt("guest")
-      } else if (e.shiftKey && e.key == "ArrowRight") {
-        this.incSet("guest")
-      } else if (e.ctrlKey && e.key == "ArrowLeft") {
-        this.sp.servHome = !this.sp.servHome
-      } else { return false }
-    }
-  }
-}

src/components/HomePage/HomePage.scss

@@ -1,112 +0,0 @@
-.homepage {
-    :root {
-        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-        touch-action: pan-x pan-y;
-        height: 100% 
-    }
-
-    body {
-        overscroll-behavior-y: contain;
-        margin: 0;
-        place-items: center;
-        min-width: 320px;
-        width: 100%;
-        min-height: 100vh;
-        background-color: #000;
-    }
-
-    button {
-        margin-left: 10px;
-        margin-right: 10px;
-        border-radius: 8px;
-        border: 1px solid #fff;
-        padding: 0.6em 1.2em;
-        font-size: 0.8em;
-        font-weight: 500;
-        font-family: inherit;
-        color: #fff;
-        background-color: #000;
-        cursor: pointer;
-        transition: border-color 0.25s;
-    }
-    button:hover {
-        border-color: #646cff;
-        background-color: #333;
-    }
-    button:focus, button:focus-visible {
-        outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    #app {
-        margin: 0 auto;
-        text-align: center;
-    }
-    .campo {
-        user-select: none;
-        width: 100%;
-        display: table;
-        color: #fff;
-    }
-    .hea {
-        float: left;
-        width: 50%;
-        font-size: xx-large;
-    }
-    .hea span {
-        /* border: 1px solid #f3fb00; */
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 5px;
-    }
-    .tal {
-        text-align: left;
-    }
-    .tar {
-        text-align: right;
-    }
-    .bot {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        margin-top: 10px;
-        margin-bottom: 1px;
-        background-color: #111;
-    }
-    .col {
-        margin-left: auto;
-        margin-right: auto;
-        text-align: center;
-        float: left;
-        width: 50%;
-    }
-    .punt {
-        font-size: 60vh;
-    }
-    .form {
-        font-size: 5vh;
-        border-top: #fff dashed 25px;
-        padding-top: 50px;
-    }
-    .formtit {
-        font-size: 5vh;
-        margin-top: 30px;
-        margin-bottom: 20px;
-    }
-    .formdiv {
-        font-size: 20vh;
-        float: left;
-        width: 32%;
-    }
-    .home {
-        background-color: black;
-        color: yellow;
-    }
-    .guest {
-        background-color: blue;
-        color: white
-    }
-    .item-stri {
-        background-color: #fff;
-    }
-}

src/components/HomePage/index.vue

@@ -1,3 +0,0 @@
-<template src="./HomePage.html"></template>
-<script src="./HomePage.js"></script>
-

src/controller-main.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import './style.css'
+import WaveUI from 'wave-ui'
+import 'wave-ui/dist/wave-ui.css'
+import ControllerPage from './components/ControllerPage.vue'
+
+const app = createApp(ControllerPage)
+app.use(WaveUI)
+app.mount('#app')

src/gameState.js

@@ -0,0 +1,211 @@
+/**
+ * Logica di gioco condivisa per il segnapunti.
+ * Utilizzata sia dal server WebSocket sia dal client per l'anteprima locale.
+ */
+
+export function createInitialState() {
+    return {
+        order: true,
+        visuForm: false,
+        visuStriscia: true,
+        modalitaPartita: "3/5",
+        sp: {
+            striscia: { home: [0], guest: [" "] },
+            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"],
+            },
+            storicoServizio: [],
+        },
+    }
+}
+
+export function checkVittoria(state) {
+    const puntHome = state.sp.punt.home
+    const puntGuest = state.sp.punt.guest
+    const setHome = state.sp.set.home
+    const setGuest = state.sp.set.guest
+    const totSet = setHome + setGuest
+
+    let isSetDecisivo = false
+    if (state.modalitaPartita === "2/3") {
+        isSetDecisivo = totSet >= 2
+    } else {
+        isSetDecisivo = totSet >= 4
+    }
+
+    const punteggioVittoria = isSetDecisivo ? 15 : 25
+
+    if (puntHome >= punteggioVittoria && puntHome - puntGuest >= 2) {
+        return true
+    }
+    if (puntGuest >= punteggioVittoria && puntGuest - puntHome >= 2) {
+        return true
+    }
+
+    return false
+}
+
+export function applyAction(state, action) {
+    // Esegue un deep clone per evitare mutazioni indesiderate dello stato lato server.
+    // Restituisce sempre un nuovo oggetto di stato.
+    const s = JSON.parse(JSON.stringify(state))
+
+    switch (action.type) {
+        case "incPunt": {
+            const team = action.team
+            if (checkVittoria(s)) break
+
+            s.sp.storicoServizio.push({
+                servHome: s.sp.servHome,
+                cambioPalla: (team === "home" && !s.sp.servHome) || (team === "guest" && s.sp.servHome),
+            })
+
+            s.sp.punt[team]++
+            if (team === "home") {
+                s.sp.striscia.home.push(s.sp.punt.home)
+                s.sp.striscia.guest.push(" ")
+            } else {
+                s.sp.striscia.guest.push(s.sp.punt.guest)
+                s.sp.striscia.home.push(" ")
+            }
+
+            const cambioPalla = (team === "home" && !s.sp.servHome) || (team === "guest" && s.sp.servHome)
+            if (cambioPalla) {
+                s.sp.form[team].push(s.sp.form[team].shift())
+            }
+
+            s.sp.servHome = team === "home"
+            break
+        }
+
+        case "decPunt": {
+            if (s.sp.storicoServizio.length > 0) {
+                const tmpHome = s.sp.striscia.home.pop()
+                s.sp.striscia.guest.pop()
+                const statoServizio = s.sp.storicoServizio.pop()
+
+                if (tmpHome === " ") {
+                    s.sp.punt.guest--
+                    if (statoServizio.cambioPalla) {
+                        s.sp.form.guest.unshift(s.sp.form.guest.pop())
+                    }
+                } else {
+                    s.sp.punt.home--
+                    if (statoServizio.cambioPalla) {
+                        s.sp.form.home.unshift(s.sp.form.home.pop())
+                    }
+                }
+                s.sp.servHome = statoServizio.servHome
+            }
+            break
+        }
+
+        case "incSet": {
+            const team = action.team
+            if (s.sp.set[team] === 2) {
+                s.sp.set[team] = 0
+            } else {
+                s.sp.set[team]++
+            }
+            break
+        }
+
+        case "cambiaPalla": {
+            if (s.sp.punt.home === 0 && s.sp.punt.guest === 0) {
+                s.sp.servHome = !s.sp.servHome
+                s.sp.striscia = s.sp.servHome
+                    ? { home: [0], guest: [" "] }
+                    : { home: [" "], guest: [0] }
+            }
+            break
+        }
+
+        case "resetta": {
+            s.visuForm = false
+            s.sp.punt.home = 0
+            s.sp.punt.guest = 0
+            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 = s.sp.servHome
+                ? { home: [0], guest: [" "] }
+                : { home: [" "], guest: [0] }
+            s.sp.storicoServizio = []
+            break
+        }
+
+        case "toggleFormazione": {
+            s.visuForm = !s.visuForm
+            break
+        }
+
+        case "toggleStriscia": {
+            s.visuStriscia = !s.visuStriscia
+            break
+        }
+
+        case "toggleOrder": {
+            s.order = !s.order
+            break
+        }
+
+        case "setNomi": {
+            if (action.home !== undefined) s.sp.nomi.home = action.home
+            if (action.guest !== undefined) s.sp.nomi.guest = action.guest
+            break
+        }
+
+        case "setModalita": {
+            s.modalitaPartita = action.modalita
+            break
+        }
+
+        case "setFormazione": {
+            if (action.team && action.form) {
+                s.sp.form[action.team] = [...action.form]
+            }
+            break
+        }
+
+        case "confermaCambi": {
+            const team = action.team
+            const cambi = action.cambi || []
+            const form = s.sp.form[team].map((val) => String(val).trim())
+            const formAggiornata = [...form]
+
+            let valid = true
+            for (const cambio of cambi) {
+                const cin = (cambio.in || "").trim()
+                const cout = (cambio.out || "").trim()
+                if (!cin || !cout) continue
+                if (!/^\d+$/.test(cin) || !/^\d+$/.test(cout)) { valid = false; break }
+                if (cin === cout) { valid = false; break }
+                if (formAggiornata.includes(cin)) { valid = false; break }
+                if (!formAggiornata.includes(cout)) { valid = false; break }
+
+                const idx = formAggiornata.findIndex((val) => String(val).trim() === cout)
+                if (idx !== -1) {
+                    formAggiornata.splice(idx, 1, cin)
+                }
+            }
+
+            if (valid) {
+                s.sp.form[team] = formAggiornata
+            }
+            break
+        }
+
+        default:
+            break
+    }
+
+    return s
+}

src/main.js

@@ -3,8 +3,10 @@ import './style.css'
 import App from './App.vue'
 import WaveUI from 'wave-ui'
 import 'wave-ui/dist/wave-ui.css'
+import DisplayPage from './components/DisplayPage.vue'
 
-const app = createApp(App)
+// In modalità display-only, non serve il router.
-
+// Il display viene montato direttamente.
+const app = createApp(DisplayPage)
 app.use(WaveUI)
 app.mount('#app')

src/server-utils.js

@@ -0,0 +1,46 @@
+import { networkInterfaces } from 'os'
+
+/**
+ * Restituisce gli indirizzi IP di rete del sistema, escludendo loopback e bridge Docker.
+ * @returns {string[]} Elenco degli indirizzi IP disponibili.
+ */
+export function getNetworkIPs() {
+  const nets = networkInterfaces()
+  const networkIPs = []
+
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name]) {
+      // Esclude loopback (127.0.0.1), indirizzi non IPv4 e bridge Docker (172.17.x.x, 172.18.x.x).
+      if (net.family === 'IPv4' &&
+        !net.internal &&
+        !net.address.startsWith('172.17.') &&
+        !net.address.startsWith('172.18.')) {
+        networkIPs.push(net.address)
+      }
+    }
+  }
+
+  return networkIPs
+}
+
+/**
+ * Stampa il riepilogo di avvio del server con gli URL di accesso.
+ * @param {number} displayPort - Porta del display.
+ * @param {number} controllerPort - Porta del controller.
+ */
+export function printServerInfo(displayPort = 5173, controllerPort = 3001) {
+  const networkIPs = getNetworkIPs()
+
+  console.log(`\nSegnapunti Server`)
+  console.log(`   Display:      http://127.0.0.1:${displayPort}/`)
+  console.log(`   Controller:   http://127.0.0.1:${controllerPort}/`)
+
+  if (networkIPs.length > 0) {
+    console.log(`\n   Controller da dispositivi remoti:`)
+    networkIPs.forEach(ip => {
+      console.log(`   http://${ip}:${controllerPort}/`)
+    })
+  }
+
+  console.log()
+}

src/style.css

@@ -53,11 +53,24 @@ button:focus-visible {
   font-size: xx-large;
 }
 .hea span {
-/* border: 1px solid #f3fb00; */
+/* Bordo di debug: border: 1px solid #f3fb00; */
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 5px;
 }
+.score-inline {
+  display: inline-block;
+  min-width: 3ch;
+  text-align: center;
+}
+.serv-slot {
+  display: inline-flex;
+  width: 25px;
+  height: 25px;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
 .tal {
   text-align: left;
 }
@@ -80,8 +93,23 @@ button:focus-visible {
   float: left;
   width: 50%;
 }
+.punteggio-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
 .punt {
   font-size: 60vh;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  min-height: 50vh;
+  min-width: 50vw;
+  max-width: 50vw;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 .form {
   font-size: 5vh;
@@ -107,18 +135,145 @@ button:focus-visible {
   color: white
 }
 .striscia {
-  position:fixed;
+  position: fixed;
-  text-align: right;
   bottom: 50px;
+  left: 10px;
   right: 10px;
-  margin-left: -10000px;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  row-gap: 2px;
+  align-items: center;
+}
+.striscia-nome {
+  white-space: nowrap;
+  padding-right: 6px;
+}
+.striscia-items {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 .striscia .item {
   width: 25px;
+  min-width: 25px;
   text-align: center;
   font-weight: bold;
-  display: inline-block;
+  flex-shrink: 0;
+  border-radius: 5px;
+}
+.striscia .item:not(.item-vuoto) {
   background-color: rgb(206, 247, 3);
   color: blue;
-  border-radius: 5px;
+}
-}
+
+.campo-config {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.campo-pallavolo {
+  border: 3px solid #999;
+  background-color: rgba(205, 133, 63, 0.25);
+  position: relative;
+  width: 220px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.fila-anteriore {
+  height: 33.33%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.fila-posteriore {
+  height: 66.67%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.linea-tre-metri {
+  border-top: 2px solid #666;
+  width: 100%;
+  height: 0;
+  margin: 0;
+}
+
+.cambi-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px 0;
+}
+
+.cambi-dialog {
+  padding: 8px 6px 2px;
+}
+
+.cambi-title {
+  text-align: center;
+  font-weight: 800;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.cambi-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.cambi-arrow {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 1;
+  padding: 6px 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  white-space: nowrap;
+}
+
+.cambi-input {
+  min-width: 48px;
+  max-width: 64px;
+}
+
+.cambi-input input,
+.cambi-input .w-input__input,
+.cambi-input .w-input__field {
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-radius: 8px;
+  padding: 6px 10px;
+  color: #000;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.cambi-in input,
+.cambi-in .w-input__input,
+.cambi-in .w-input__field {
+  background: rgba(120, 200, 120, 0.4);
+}
+
+.cambi-out input,
+.cambi-out .w-input__input,
+.cambi-out .w-input__field {
+  background: rgba(200, 120, 120, 0.4);
+}
+
+.cambi-input input:focus,
+.cambi-input .w-input__input:focus,
+.cambi-input .w-input__field:focus {
+  border-color: rgba(255, 255, 255, 0.7);
+  outline: none;
+}

src/websocket-handler.js

@@ -0,0 +1,199 @@
+import { createInitialState, applyAction } from './gameState.js'
+
+/**
+ * Crea e configura il server WebSocket per la gestione dello stato di gioco.
+ * @param {WebSocketServer} wss - Istanza del server WebSocket.
+ * @returns {Object} Oggetto con metodi di gestione dello stato.
+ */
+export function setupWebSocketHandler(wss) {
+  // Stato globale della partita.
+  let gameState = createInitialState()
+
+  // Mappa dei ruoli associati ai client connessi.
+  const clients = new Map() // ws -> { role: 'display' | 'controller' }
+
+  /**
+   * Gestisce i messaggi in arrivo dal client
+   */
+  function handleMessage(ws, data) {
+    try {
+      // Converte il payload in stringa in modo sicuro, anche se arriva come Buffer.
+      const dataStr = typeof data === 'string' ? data : data.toString('utf8')
+      const msg = JSON.parse(dataStr)
+
+      if (msg.type === 'register') {
+        return handleRegister(ws, msg)
+      }
+
+      if (msg.type === 'action') {
+        return handleAction(ws, msg)
+      }
+
+      if (msg.type === 'speak') {
+        return handleSpeak(ws, msg)
+      }
+    } catch (err) {
+      console.error('Error processing message:', err, 'data:', data)
+      // Invia l'errore solo se la connessione e ancora aperta.
+      if (ws.readyState === 1) { // Stato WebSocket.OPEN
+        try {
+          sendError(ws, 'Invalid message format')
+        } catch (sendErr) {
+          console.error('Error sending error message:', sendErr)
+        }
+      }
+    }
+  }
+
+  /**
+   * Gestisce la registrazione di un client (display o controller)
+   */
+  function handleRegister(ws, msg) {
+    const role = msg.role || 'display'
+
+    // Valida il ruolo dichiarato dal client.
+    if (!['display', 'controller'].includes(role)) {
+      sendError(ws, 'Invalid role')
+      return
+    }
+
+    clients.set(ws, { role })
+    console.log(`[WebSocket] Client registered as: ${role} (total clients: ${clients.size})`)
+
+    // Invia subito lo stato corrente, se la connessione e aperta.
+    if (ws.readyState === 1) { // Stato WebSocket.OPEN
+      try {
+        ws.send(JSON.stringify({ type: 'state', state: gameState }))
+      } catch (err) {
+        console.error('Error sending initial state:', err)
+      }
+    }
+  }
+
+  /**
+   * Gestisce un'azione di gioco dal controller
+   */
+  function handleAction(ws, msg) {
+    // Solo i client controller possono inviare azioni.
+    const client = clients.get(ws)
+    if (!client || client.role !== 'controller') {
+      sendError(ws, 'Only controllers can send actions')
+      return
+    }
+
+    // Verifica il formato dell'azione ricevuta.
+    if (!msg.action || !msg.action.type) {
+      sendError(ws, 'Invalid action format')
+      return
+    }
+
+    // Applica l'azione allo stato della partita.
+    const previousState = gameState
+    try {
+      gameState = applyAction(gameState, msg.action)
+    } catch (err) {
+      console.error('Error applying action:', err)
+      sendError(ws, 'Failed to apply action')
+      gameState = previousState
+      return
+    }
+
+    // Propaga il nuovo stato a tutti i client connessi.
+    broadcastState()
+  }
+
+  /**
+   * Gestisce una richiesta di sintesi vocale proveniente dal controller.
+   * Il messaggio viene inoltrato solo ai client registrati come display.
+   */
+  function handleSpeak(ws, msg) {
+    const client = clients.get(ws)
+    if (!client || client.role !== 'controller') {
+      sendError(ws, 'Only controllers can request speech')
+      return
+    }
+
+    if (typeof msg.text !== 'string' || msg.text.trim() === '') {
+      sendError(ws, 'Invalid speak payload')
+      return
+    }
+
+    const speakMsg = JSON.stringify({ type: 'speak', text: msg.text.trim() })
+    clients.forEach((meta, clientWs) => {
+      if (meta.role === 'display' && clientWs.readyState === 1) {
+        clientWs.send(speakMsg)
+      }
+    })
+  }
+
+  /**
+   * Invia un messaggio di errore al client
+   */
+  function sendError(ws, message) {
+    if (ws.readyState === 1) { // Stato WebSocket.OPEN
+      try {
+        ws.send(JSON.stringify({ type: 'error', message }))
+      } catch (err) {
+        console.error('Failed to send error message:', err)
+      }
+    }
+  }
+
+  /**
+   * Invia lo stato corrente a tutti i client connessi.
+   */
+  function broadcastState() {
+    const stateMsg = JSON.stringify({ type: 'state', state: gameState })
+    wss.clients.forEach((client) => {
+      if (client.readyState === 1) { // Stato WebSocket.OPEN
+        client.send(stateMsg)
+      }
+    })
+  }
+
+  /**
+   * Gestisce la chiusura della connessione
+   */
+  function handleClose(ws) {
+    const client = clients.get(ws)
+    const role = client?.role || 'unknown'
+    console.log(`[WebSocket] Client disconnected (role: ${role})`)
+    clients.delete(ws)
+  }
+
+  /**
+   * Gestisce gli errori WebSocket
+   */
+  function handleError(err, ws) {
+    console.error('WebSocket error:', err)
+
+    // In caso di frame non validi, chiude forzatamente la connessione.
+    if (err.code === 'WS_ERR_INVALID_CLOSE_CODE' || err.code === 'WS_ERR_INVALID_UTF8') {
+      try {
+        if (ws && ws.readyState === 1) { // Stato WebSocket.OPEN
+          ws.terminate() // Chiusura forzata senza handshake di chiusura.
+        }
+      } catch (closeErr) {
+        console.error('Error closing connection:', closeErr)
+      }
+    }
+  }
+
+  // Registra gli handler per ogni nuova connessione.
+  wss.on('connection', (ws) => {
+    // Imposta il tipo binario per ridurre i problemi di codifica.
+    ws.binaryType = 'arraybuffer'
+
+    ws.on('message', (data) => handleMessage(ws, data))
+    ws.on('close', () => handleClose(ws))
+    ws.on('error', (err) => handleError(err, ws))
+  })
+
+  // Espone un'API pubblica per controllo esterno, se necessario.
+  return {
+    getState: () => gameState,
+    setState: (newState) => { gameState = newState },
+    broadcastState,
+    getClients: () => clients,
+  }
+}

tests/README.md

@@ -0,0 +1,281 @@
+# Guida ai Test
+
+Obiettivo della guida:
+- capire che tipi di test esistono nel progetto
+- capire a cosa servono davvero
+- sapere come lanciarli senza errori
+- sapere come leggere i risultati
+- sapere cosa fare quando qualcosa fallisce
+
+## 0) Perche facciamo i test?
+
+Un test è un controllo automatico.
+
+In pratica:
+- tu cambi il codice
+- lanci i test
+- i test ti dicono se hai rotto qualcosa
+
+Se i test sono verdi, hai una buona probabilita che il progetto sia ancora stabile.
+Se i test sono rossi, c'e un problema da capire e sistemare.
+
+## 1) Struttura delle cartelle test
+
+```text
+tests/
+├── unit/          # Test della logica pura (molto veloci)
+├── integration/   # Test di moduli che comunicano tra loro
+├── component/     # Test dei componenti Vue in isolamento
+├── stress/        # Test sotto carico (molti client/azioni)
+├── e2e/           # Test end-to-end su browser reale
+└── README.md      # Questa guida
+```
+
+## 2) Tecnologie usate
+
+- `Vitest`: per `unit`, `integration`, `component`, `stress`
+- `Playwright`: per `e2e`
+
+Tradotto in modo semplice:
+- Vitest controlla parti interne del progetto
+- Playwright controlla il comportamento reale dell'app nel browser
+
+## 3) Prerequisiti (prima di tutto)
+
+### 3.1 Installa dipendenze
+
+Dalla root del progetto:
+
+```bash
+npm install
+```
+
+### 3.2 Installa browser Playwright (solo E2E)
+
+```bash
+npx playwright install chromium firefox
+```
+
+Se non fai questo passo, gli E2E possono fallire subito con errore tipo:
+- `Executable doesn't exist`
+
+## 4) Comandi principali
+
+```bash
+npm run test            # Vitest in watch mode (resta in ascolto)
+npm run test:all        # Tutta la suite Vitest una volta
+npm run test:unit       # Unit + integration
+npm run test:component  # Solo component test
+npm run test:stress     # Solo stress test
+npm run test:e2e        # Tutti gli E2E Playwright
+npm run test:e2e:ui     # Playwright con interfaccia grafica
+```
+
+Ordine consigliato (quando vuoi verificare tutto):
+1. `npm run test:all`
+2. `npm run test:e2e`
+
+## 5) Cosa testa ogni suite (spiegato semplice)
+
+### 5.1 Unit (`tests/unit`)
+
+Cosa sono:
+- test piccoli e veloci sulla logica del gioco
+
+A cosa servono:
+- trovano subito bug in regole punteggio/set/reset
+
+Esempi reali nel progetto:
+- incremento/decremento punti
+- cambio palla
+- vittoria set con regola dei 2 punti di scarto
+- reset stato
+
+Quando falliscono:
+- quasi sempre c'e un problema nella logica core
+
+### 5.2 Integration (`tests/integration`)
+
+Cosa sono:
+- test su pezzi che lavorano insieme (es. WebSocket + handler)
+
+A cosa servono:
+- verificano che i messaggi si muovano nel modo corretto
+
+Esempi reali nel progetto:
+- registrazione client `display`/`controller`
+- broadcast stato ai client
+- validazione input malformati
+- autorizzazioni (solo controller puo inviare certe azioni)
+
+Quando falliscono:
+- spesso c'e problema nel protocollo messaggi o nei controlli di ruolo
+
+### 5.3 Component (`tests/component`)
+
+Cosa sono:
+- test dei componenti Vue senza browser completo
+
+A cosa servono:
+- controllano rendering e comportamento UI locale
+
+Esempi reali nel progetto:
+- punteggio mostrato correttamente
+- stato connessione
+- click bottoni controller
+- dialog reset/config/cambi
+
+Quando falliscono:
+- spesso hai rotto template, computed, metodi o binding
+
+### 5.4 Stress (`tests/stress`)
+
+Cosa sono:
+- test per simulare carico elevato
+
+A cosa servono:
+- verificano che il sistema regga molti client e molte azioni rapide
+
+Esempi reali nel progetto:
+- tanti client display connessi insieme
+- burst di azioni consecutive
+
+Quando falliscono:
+- possono emergere problemi di performance o consistenza stato
+
+### 5.5 End-to-End (`tests/e2e`)
+
+Cosa sono:
+- test realistici nel browser
+
+A cosa servono:
+- verificano che Controller e Display funzionino davvero insieme
+
+File principali:
+- `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
+- `accessibility.spec.cjs`: controlli accessibilita con axe
+- `visual-regression.spec.cjs`: confronto screenshot con baseline
+
+Nota importante:
+- gli E2E sono configurati in seriale (`workers: 1`) per evitare interferenze sullo stato partita condiviso.
+
+## 6) Come leggere i risultati
+
+### 6.1 Risultati Vitest
+
+Caso OK (verde):
+
+```text
+Test Files  6 passed (6)
+Tests      159 passed (159)
+```
+
+Significa:
+- tutti i test Vitest sono passati
+
+Caso KO (rosso):
+- guarda prima il nome del file test
+- poi il nome del test (`describe/test`)
+- poi la riga con `expected` e `received`
+- infine vai alla riga indicata nello stack trace
+
+### 6.2 Risultati Playwright
+
+Caso OK:
+
+```text
+72 passed
+```
+
+Caso KO:
+- apri il report HTML
+
+```bash
+npx playwright show-report
+```
+
+Nel report puoi vedere:
+- step del test
+- errori precisi
+- screenshot/diff
+- trace
+
+## 7) Visual Regression (screenshot)
+
+I test visual confrontano immagini attuali con immagini baseline.
+
+Cartella baseline:
+- `tests/e2e/visual-regression.spec.cjs-snapshots/`
+
+Se cambia la UI in modo intenzionale:
+- aggiorna snapshot
+
+```bash
+npm run test:e2e -- --update-snapshots
+```
+
+Poi rilancia controllo:
+
+```bash
+npm run test:e2e
+```
+
+Se la UI non doveva cambiare:
+- non aggiornare snapshot
+- correggi prima il codice UI/CSS
+
+## 8) Errori comuni e soluzione veloce
+
+- Errore Playwright `Executable doesn't exist`:
+  - esegui `npx playwright install chromium firefox`
+
+- E2E instabili con punteggi strani:
+  - assicurati che i test restino seriali (`workers: 1`)
+  - assicurati che ogni test parta da stato pulito (reset)
+
+- Selettore ambiguo (esempio bottone `Cambi`):
+  - usa selector piu specifici, ad esempio `getByRole(..., { exact: true })`
+
+- Failure accessibilita:
+  - controlla prima `alt` delle immagini e contrasto colori
+
+## 9) Mini checklist prima di fare push
+
+Esegui:
+
+```bash
+npm run test:all
+npm run test:e2e
+```
+
+Se hai cambiato UI e i visual falliscono per differenze volute:
+
+```bash
+npm run test:e2e -- --update-snapshots
+npm run test:e2e
+```
+
+## 10) Come aggiungere un nuovo test (consigli pratici)
+
+- metti i test nel posto giusto:
+  - `tests/unit` per logica pura
+  - `tests/integration` per moduli che dialogano
+  - `tests/component` per Vue in isolamento
+  - `tests/stress` per carico
+  - `tests/e2e` per flussi reali
+
+- mantieni nomi chiari:
+  - il titolo del test deve spiegare cosa verifica
+
+- evita test dipendenti da ordine:
+  - ogni test deve potersi eseguire da solo
+
+- negli E2E:
+  - porta sempre il sistema in stato iniziale
+  - usa selector robusti
+  - limita `waitForTimeout` e preferisci attese su condizioni reali
+
+Se segui questi punti, i test restano stabili e facili da capire anche per chi entra ora nel progetto.

tests/component/ControllerPage.test.js

@@ -0,0 +1,255 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ControllerPage from '../../src/components/ControllerPage.vue'
+
+// Mock globale WebSocket per jsdom
+class MockWebSocket {
+    static OPEN = 1
+    static CONNECTING = 0
+    readyState = 0
+    onopen = null
+    onclose = null
+    onmessage = null
+    onerror = null
+    send = vi.fn()
+    close = vi.fn()
+    constructor() {
+        // Simula connessione immediata
+        setTimeout(() => {
+            this.readyState = 1
+            if (this.onopen) this.onopen()
+        }, 0)
+    }
+}
+
+vi.stubGlobal('WebSocket', MockWebSocket)
+
+// Helper per creare il componente con stato personalizzato
+function mountController(stateOverrides = {}) {
+    const wrapper = mount(ControllerPage, {
+        global: {
+            stubs: { 'w-app': true, 'w-button': true }
+        }
+    })
+    if (Object.keys(stateOverrides).length > 0) {
+        wrapper.vm.state = { ...wrapper.vm.state, ...stateOverrides }
+    }
+    return wrapper
+}
+
+describe('ControllerPage.vue', () => {
+
+    beforeEach(() => {
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    // =============================================
+    // RENDERING INIZIALE
+    // =============================================
+    describe('Rendering iniziale', () => {
+        it('dovrebbe mostrare i nomi dei team', () => {
+            const wrapper = mountController()
+            const text = wrapper.text()
+            expect(text).toContain('Antoniana')
+            expect(text).toContain('Guest')
+        })
+
+        it('dovrebbe mostrare punteggio 0-0', () => {
+            const wrapper = mountController()
+            const pts = wrapper.findAll('.team-pts')
+            expect(pts[0].text()).toBe('0')
+            expect(pts[1].text()).toBe('0')
+        })
+
+        it('dovrebbe mostrare SET 0 per entrambi i team', () => {
+            const wrapper = mountController()
+            const sets = wrapper.findAll('.team-set')
+            expect(sets[0].text()).toContain('SET 0')
+            expect(sets[1].text()).toContain('SET 0')
+        })
+    })
+
+    // =============================================
+    // CLICK PUNTEGGIO
+    // =============================================
+    describe('Click punteggio', () => {
+        it('dovrebbe chiamare sendAction con incPunt home al click sul team home', async () => {
+            const wrapper = mountController()
+            const spy = vi.spyOn(wrapper.vm, 'sendAction')
+            await wrapper.find('.team-score.home-bg').trigger('click')
+            expect(spy).toHaveBeenCalledWith({ type: 'incPunt', team: 'home' })
+        })
+
+        it('dovrebbe chiamare sendAction con incPunt guest al click sul team guest', async () => {
+            const wrapper = mountController()
+            const spy = vi.spyOn(wrapper.vm, 'sendAction')
+            await wrapper.find('.team-score.guest-bg').trigger('click')
+            expect(spy).toHaveBeenCalledWith({ type: 'incPunt', team: 'guest' })
+        })
+    })
+
+    // =============================================
+    // BOTTONE CAMBIO PALLA
+    // =============================================
+    describe('Cambio Palla', () => {
+        it('dovrebbe essere abilitato a 0-0', () => {
+            const wrapper = mountController()
+            const btn = wrapper.findAll('.btn-ctrl').find(b => b.text().includes('Cambio Palla'))
+            expect(btn.attributes('disabled')).toBeUndefined()
+        })
+
+        it('dovrebbe essere disabilitato se il punteggio non è 0-0', async () => {
+            const wrapper = mountController()
+            wrapper.vm.state.sp.punt.home = 5
+            await wrapper.vm.$nextTick()
+            const btn = wrapper.findAll('.btn-ctrl').find(b => b.text().includes('Cambio Palla'))
+            expect(btn.attributes('disabled')).toBeDefined()
+        })
+    })
+
+    // =============================================
+    // DIALOG RESET
+    // =============================================
+    describe('Dialog Reset', () => {
+        it('click Reset dovrebbe aprire la conferma', async () => {
+            const wrapper = mountController()
+            expect(wrapper.find('.overlay').exists()).toBe(false)
+            await wrapper.find('.btn-danger').trigger('click')
+            expect(wrapper.vm.confirmReset).toBe(true)
+            expect(wrapper.find('.overlay').exists()).toBe(true)
+        })
+
+        it('click NO dovrebbe chiudere la conferma', async () => {
+            const wrapper = mountController()
+            wrapper.vm.confirmReset = true
+            await wrapper.vm.$nextTick()
+            await wrapper.find('.btn-cancel').trigger('click')
+            expect(wrapper.vm.confirmReset).toBe(false)
+        })
+
+        it('click SI dovrebbe chiamare doReset', async () => {
+            const wrapper = mountController()
+            const spy = vi.spyOn(wrapper.vm, 'sendAction')
+            wrapper.vm.confirmReset = true
+            await wrapper.vm.$nextTick()
+            await wrapper.find('.btn-confirm').trigger('click')
+            expect(spy).toHaveBeenCalledWith({ type: 'resetta' })
+            expect(wrapper.vm.confirmReset).toBe(false)
+        })
+    })
+
+    // =============================================
+    // COMPUTED cambiValid
+    // =============================================
+    describe('cambiValid', () => {
+        it('dovrebbe essere false se tutti i campi sono vuoti', () => {
+            const wrapper = mountController()
+            wrapper.vm.cambiData = [{ in: '', out: '' }, { in: '', out: '' }]
+            expect(wrapper.vm.cambiValid).toBe(false)
+        })
+
+        it('dovrebbe essere true con un cambio completo', () => {
+            const wrapper = mountController()
+            wrapper.vm.cambiData = [{ in: '10', out: '1' }, { in: '', out: '' }]
+            expect(wrapper.vm.cambiValid).toBe(true)
+        })
+
+        it('dovrebbe essere false con un cambio parziale (solo IN)', () => {
+            const wrapper = mountController()
+            wrapper.vm.cambiData = [{ in: '10', out: '' }, { in: '', out: '' }]
+            expect(wrapper.vm.cambiValid).toBe(false)
+        })
+
+        it('dovrebbe essere false con un cambio parziale (solo OUT)', () => {
+            const wrapper = mountController()
+            wrapper.vm.cambiData = [{ in: '', out: '1' }, { in: '', out: '' }]
+            expect(wrapper.vm.cambiValid).toBe(false)
+        })
+
+        it('dovrebbe essere true con due cambi completi', () => {
+            const wrapper = mountController()
+            wrapper.vm.cambiData = [{ in: '10', out: '1' }, { in: '11', out: '2' }]
+            expect(wrapper.vm.cambiValid).toBe(true)
+        })
+    })
+
+    // =============================================
+    // SPEAK
+    // =============================================
+    describe('speak', () => {
+        it('dovrebbe generare "zero a zero" a 0-0', () => {
+            const wrapper = mountController()
+            wrapper.vm.wsConnected = true
+            wrapper.vm.ws = { readyState: 1, send: vi.fn() }
+            wrapper.vm.speak()
+            const sent = JSON.parse(wrapper.vm.ws.send.mock.calls[0][0])
+            expect(sent.type).toBe('speak')
+            expect(sent.text).toBe('zero a zero')
+        })
+
+        it('dovrebbe generare "N pari" a punteggio uguale', () => {
+            const wrapper = mountController()
+            wrapper.vm.state.sp.punt.home = 5
+            wrapper.vm.state.sp.punt.guest = 5
+            wrapper.vm.wsConnected = true
+            wrapper.vm.ws = { readyState: 1, send: vi.fn() }
+            wrapper.vm.speak()
+            const sent = JSON.parse(wrapper.vm.ws.send.mock.calls[0][0])
+            expect(sent.text).toBe('5 pari')
+        })
+
+        it('dovrebbe annunciare prima il punteggio di chi batte (home serve)', () => {
+            const wrapper = mountController()
+            wrapper.vm.state.sp.punt.home = 15
+            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()
+            const sent = JSON.parse(wrapper.vm.ws.send.mock.calls[0][0])
+            expect(sent.text).toBe('15 a 10')
+        })
+
+        it('dovrebbe annunciare prima il punteggio di chi batte (guest serve)', () => {
+            const wrapper = mountController()
+            wrapper.vm.state.sp.punt.home = 10
+            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()
+            const sent = JSON.parse(wrapper.vm.ws.send.mock.calls[0][0])
+            expect(sent.text).toBe('15 a 10')
+        })
+    })
+
+    // =============================================
+    // BARRA CONNESSIONE
+    // =============================================
+    describe('Barra connessione', () => {
+        it('dovrebbe avere classe "connected" quando connesso', async () => {
+            const wrapper = mountController()
+            wrapper.vm.wsConnected = true
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.conn-bar').classes()).toContain('connected')
+        })
+
+        it('non dovrebbe avere classe "connected" quando disconnesso', () => {
+            const wrapper = mountController()
+            wrapper.vm.wsConnected = false
+            expect(wrapper.find('.conn-bar').classes()).not.toContain('connected')
+        })
+
+        it('dovrebbe mostrare "Connesso" quando connesso', async () => {
+            const wrapper = mountController()
+            wrapper.vm.wsConnected = true
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.conn-bar').text()).toContain('Connesso')
+        })
+    })
+})

tests/component/DisplayPage.test.js

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DisplayPage from '../../src/components/DisplayPage.vue'
+
+// Mock globale WebSocket per jsdom
+class MockWebSocket {
+    static OPEN = 1
+    static CONNECTING = 0
+    readyState = 0
+    onopen = null
+    onclose = null
+    onmessage = null
+    onerror = null
+    send = vi.fn()
+    close = vi.fn()
+    constructor() {
+        setTimeout(() => {
+            this.readyState = 1
+            if (this.onopen) this.onopen()
+        }, 0)
+    }
+}
+
+vi.stubGlobal('WebSocket', MockWebSocket)
+
+// Mock requestFullscreen e speechSynthesis
+vi.stubGlobal('speechSynthesis', {
+    speak: vi.fn(),
+    cancel: vi.fn(),
+    getVoices: () => []
+})
+
+function mountDisplay() {
+    return mount(DisplayPage, {
+        global: {
+            stubs: { 'w-app': true }
+        }
+    })
+}
+
+describe('DisplayPage.vue', () => {
+
+    beforeEach(() => {
+        vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+        vi.useRealTimers()
+    })
+
+    // =============================================
+    // RENDERING PUNTEGGIO
+    // =============================================
+    describe('Rendering punteggio', () => {
+        it('dovrebbe mostrare i nomi dei team', () => {
+            const wrapper = mountDisplay()
+            const text = wrapper.text()
+            expect(text).toContain('Antoniana')
+            expect(text).toContain('Guest')
+        })
+
+        it('dovrebbe mostrare punteggio iniziale 0-0', () => {
+            const wrapper = mountDisplay()
+            const punti = wrapper.findAll('.punt')
+            expect(punti[0].text()).toBe('0')
+            expect(punti[1].text()).toBe('0')
+        })
+
+        it('dovrebbe mostrare i set corretti', () => {
+            const wrapper = mountDisplay()
+            const text = wrapper.text()
+            expect(text).toContain('set 0')
+        })
+
+        it('dovrebbe aggiornare il punteggio quando lo stato cambia', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.sp.punt.home = 15
+            wrapper.vm.state.sp.punt.guest = 12
+            await wrapper.vm.$nextTick()
+            const punti = wrapper.findAll('.punt')
+            expect(punti[0].text()).toBe('15')
+            expect(punti[1].text()).toBe('12')
+        })
+    })
+
+    // =============================================
+    // ORDINE TEAM
+    // =============================================
+    describe('Ordine team', () => {
+        it('order=true → Home prima di Guest', () => {
+            const wrapper = mountDisplay()
+            const headers = wrapper.findAll('.hea')
+            expect(headers[0].classes()).toContain('home')
+            expect(headers[1].classes()).toContain('guest')
+        })
+
+        it('order=false → Guest prima di Home', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.order = false
+            await wrapper.vm.$nextTick()
+            const headers = wrapper.findAll('.hea')
+            expect(headers[0].classes()).toContain('guest')
+            expect(headers[1].classes()).toContain('home')
+        })
+    })
+
+    // =============================================
+    // FORMAZIONE vs PUNTEGGIO
+    // =============================================
+    describe('visuForm toggle', () => {
+        it('visuForm=false → mostra punteggio grande', () => {
+            const wrapper = mountDisplay()
+            expect(wrapper.find('.punteggio-container').exists()).toBe(true)
+            expect(wrapper.find('.form').exists()).toBe(false)
+        })
+
+        it('visuForm=true → mostra formazione', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.visuForm = true
+            await wrapper.vm.$nextTick()
+            expect(wrapper.findAll('.form').length).toBeGreaterThan(0)
+            expect(wrapper.find('.punteggio-container').exists()).toBe(false)
+        })
+
+        it('formazione mostra 6 giocatori per team', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.visuForm = true
+            await wrapper.vm.$nextTick()
+            const formDivs = wrapper.findAll('.formdiv')
+            // 6 per home + 6 per guest = 12
+            expect(formDivs).toHaveLength(12)
+        })
+    })
+
+    // =============================================
+    // STRISCIA
+    // =============================================
+    describe('visuStriscia toggle', () => {
+        it('visuStriscia=true → mostra la striscia', () => {
+            const wrapper = mountDisplay()
+            expect(wrapper.find('.striscia').exists()).toBe(true)
+        })
+
+        it('visuStriscia=false → nasconde la striscia', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.state.visuStriscia = false
+            await wrapper.vm.$nextTick()
+            expect(wrapper.find('.striscia').exists()).toBe(false)
+        })
+    })
+
+    // =============================================
+    // INDICATORE CONNESSIONE
+    // =============================================
+    describe('Indicatore connessione', () => {
+        it('dovrebbe avere classe "disconnected" quando non connesso', () => {
+            const wrapper = mountDisplay()
+            const status = wrapper.find('.connection-status')
+            expect(status.classes()).toContain('disconnected')
+        })
+
+        it('dovrebbe avere classe "connected" quando connesso', async () => {
+            const wrapper = mountDisplay()
+            wrapper.vm.wsConnected = true
+            await wrapper.vm.$nextTick()
+            const status = wrapper.find('.connection-status')
+            expect(status.classes()).toContain('connected')
+        })
+
+        it('dovrebbe mostrare "Disconnesso" quando non connesso', () => {
+            const wrapper = mountDisplay()
+            const status = wrapper.find('.connection-status')
+            expect(status.text()).toContain('Disconnesso')
+        })
+    })
+
+    // =============================================
+    // ICONA SERVIZIO
+    // =============================================
+    describe('Icona servizio', () => {
+        it('dovrebbe mostrare l\'icona servizio sul team home quando servHome=true', () => {
+            const wrapper = mountDisplay()
+            // v-show imposta display:none. In happy-dom controlliamo lo style.
+            const imgs = wrapper.findAll('.serv-slot img')
+            // Con state.order=true e servHome=true:
+            // - la prima img (home) è visibile (no display:none)
+            // - la seconda img (guest) ha display:none
+            const homeStyle = imgs[0].attributes('style') || ''
+            const guestStyle = imgs[1].attributes('style') || ''
+            expect(homeStyle).not.toContain('display: none')
+            expect(guestStyle).toContain('display: none')
+        })
+    })
+})

tests/e2e/accessibility.spec.cjs

@@ -0,0 +1,72 @@
+const { test, expect } = require('@playwright/test');
+const AxeBuilderImport = require('@axe-core/playwright');
+const AxeBuilder = AxeBuilderImport.default || AxeBuilderImport;
+
+test.describe('Accessibility (a11y)', () => {
+
+    test('Display: non dovrebbe avere violazioni critiche a11y', async ({ page }) => {
+        await page.goto('http://localhost:3000');
+        await page.waitForTimeout(500);
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa'])
+            .disableRules(['color-contrast']) // il display ha sfondo nero con testo grande, valutato separatamente
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+
+    test('Controller: non dovrebbe avere violazioni critiche a11y', async ({ page }) => {
+        await page.goto('http://localhost:3001');
+        await page.waitForTimeout(500);
+
+        const results = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa'])
+            .analyze();
+
+        // Mostra i dettagli delle violazioni se ci sono
+        if (results.violations.length > 0) {
+            console.log('A11y violations:', JSON.stringify(results.violations.map(v => ({
+                id: v.id,
+                impact: v.impact,
+                description: v.description,
+                nodes: v.nodes.length
+            })), null, 2));
+        }
+
+        // Accettiamo solo violazioni minor (non critiche o serie)
+        const serious = results.violations.filter(v =>
+            v.impact === 'critical' || v.impact === 'serious'
+        );
+        expect(serious).toEqual([]);
+    });
+
+    test('Controller: i touch target dovrebbero avere dimensione minima', async ({ page }) => {
+        await page.goto('http://localhost:3001');
+        await page.waitForSelector('.conn-bar.connected');
+
+        // Controlla che i bottoni principali abbiano dimensione minima 44x44px
+        const buttons = page.locator('.btn-ctrl');
+        const count = await buttons.count();
+
+        for (let i = 0; i < count; i++) {
+            const box = await buttons.nth(i).boundingBox();
+            expect(box.width).toBeGreaterThanOrEqual(44);
+            expect(box.height).toBeGreaterThanOrEqual(44);
+        }
+    });
+
+    test('Controller: i bottoni punteggio dovrebbero avere dimensione adeguata', async ({ page }) => {
+        await page.goto('http://localhost:3001');
+        await page.waitForSelector('.conn-bar.connected');
+
+        const scoreButtons = page.locator('.team-score');
+        const count = await scoreButtons.count();
+
+        for (let i = 0; i < count; i++) {
+            const box = await scoreButtons.nth(i).boundingBox();
+            expect(box.width).toBeGreaterThanOrEqual(100);
+            expect(box.height).toBeGreaterThanOrEqual(100);
+        }
+    });
+});

tests/e2e/basic-flow.spec.cjs

@@ -0,0 +1,119 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Basic Flow: Controller ↔ Display', () => {
+
+    test('dovrebbe caricare Display e Controller con i titoli corretti', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        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();
+        await controllerPage.goto('http://localhost:3001');
+
+        // 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');
+        await expect(homeScore).toHaveText('0');
+        await expect(guestScore).toHaveText('0');
+    });
+
+    test('click +1 Home sul Controller dovrebbe aggiornare il Display', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        await displayPage.goto('http://localhost:3000');
+        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();
+        await controllerPage.waitForTimeout(200);
+
+        // Verifica Controller mostra 1
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('1');
+
+        // Verifica Display mostra 1 (il punteggio grande)
+        await expect(displayPage.locator('.punt.home')).toHaveText('1');
+    });
+
+    test('click +1 Guest sul Controller dovrebbe aggiornare il Display', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        await displayPage.goto('http://localhost:3000');
+        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();
+        await controllerPage.waitForTimeout(200);
+
+        // Verifica Controller
+        await expect(controllerPage.locator('.team-score.guest-bg .team-pts')).toHaveText('1');
+
+        // Verifica Display
+        await expect(displayPage.locator('.punt.guest')).toHaveText('1');
+    });
+
+    test('la sincronizzazione dovrebbe funzionare con punti alternati', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        await displayPage.goto('http://localhost:3000');
+        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();
+        await controllerPage.waitForTimeout(100);
+        await controllerPage.locator('.team-score.guest-bg').click();
+        await controllerPage.waitForTimeout(100);
+        await controllerPage.locator('.team-score.home-bg').click();
+        await controllerPage.waitForTimeout(200);
+
+        // Controller: Home 2, Guest 1
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('2');
+        await expect(controllerPage.locator('.team-score.guest-bg .team-pts')).toHaveText('1');
+
+        // Display: Home 2, Guest 1
+        await expect(displayPage.locator('.punt.home')).toHaveText('2');
+        await expect(displayPage.locator('.punt.guest')).toHaveText('1');
+    });
+});

tests/e2e/full-match.spec.cjs

@@ -0,0 +1,131 @@
+const { test, expect } = require('@playwright/test');
+
+// 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 }) => {
+        const controllerPage = await context.newPage();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        // Cambia modalità a 2/3
+        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 vince 25-0 ===
+        await addPoints(controllerPage, 'home', 25);
+
+        // Verifica punteggio 25
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('25');
+
+        // Incrementa set Home
+        await controllerPage.locator('.btn-set.home-bg').click();
+        await controllerPage.waitForTimeout(100);
+
+        // 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();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        // Cambia modalità a 2/3
+        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);
+
+        // Imposta set 1-1 manualmente (simula set pareggiati)
+        await controllerPage.locator('.btn-set.home-bg').click();
+        await controllerPage.waitForTimeout(50);
+        await controllerPage.locator('.btn-set.guest-bg').click();
+        await controllerPage.waitForTimeout(100);
+
+        // Verifica set 1-1
+        await expect(controllerPage.locator('.team-score.home-bg .team-set')).toContainText('SET 1');
+        await expect(controllerPage.locator('.team-score.guest-bg .team-set')).toContainText('SET 1');
+
+        // === SET DECISIVO: Home porta a 15 ===
+        await addPoints(controllerPage, 'home', 15);
+
+        // 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)
+        await controllerPage.locator('.team-score.home-bg').click();
+        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();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        // Porta a 24-24
+        await addPoints(controllerPage, 'home', 24);
+        await addPoints(controllerPage, 'guest', 24);
+
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('24');
+        await expect(controllerPage.locator('.team-score.guest-bg .team-pts')).toHaveText('24');
+
+        // Home va a 25 (non è vittoria perché serve scarto di 2)
+        await controllerPage.locator('.team-score.home-bg').click();
+        await controllerPage.waitForTimeout(100);
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('25');
+
+        // Si possono ancora aggiungere punti (non è vittoria a 25-24)
+        await controllerPage.locator('.team-score.home-bg').click();
+        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
+        await controllerPage.locator('.team-score.home-bg').click();
+        await controllerPage.waitForTimeout(100);
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('26');
+    });
+});

tests/e2e/game-operations.spec.cjs

@@ -0,0 +1,182 @@
+const { test, expect } = require('@playwright/test');
+
+// 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();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        // Incrementa Home a 1
+        await controllerPage.locator('.team-score.home-bg').click();
+        await controllerPage.waitForTimeout(100);
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('1');
+
+        // Annulla
+        await controllerPage.getByText('ANNULLA PUNTO').click();
+        await controllerPage.waitForTimeout(100);
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('0');
+    });
+
+    test('Reset: dovrebbe azzerare tutto dopo conferma', async ({ context }) => {
+        const controllerPage = await context.newPage();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        // Imposta qualche punto
+        for (let i = 0; i < 5; i++) {
+            await controllerPage.locator('.team-score.home-bg').click();
+            await controllerPage.waitForTimeout(50);
+        }
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('5');
+
+        // Reset
+        await resetGame(controllerPage);
+
+        await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('0');
+        await expect(controllerPage.locator('.team-score.guest-bg .team-pts')).toHaveText('0');
+    });
+
+    test('Config: dovrebbe cambiare i nomi dei team', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        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();
+        await controllerPage.waitForSelector('.dialog-config');
+
+        // Modifica nomi
+        const inputs = controllerPage.locator('.dialog-config .input-field');
+        await inputs.first().fill('Padova');
+        await inputs.nth(1).fill('Milano');
+
+        // Salva
+        await controllerPage.locator('.dialog-config .btn-confirm').click();
+        await controllerPage.waitForTimeout(300);
+
+        // Verifica sul Controller
+        await expect(controllerPage.locator('.team-score.home-bg .team-name')).toHaveText('Padova');
+        await expect(controllerPage.locator('.team-score.guest-bg .team-name')).toHaveText('Milano');
+
+        // Verifica sul Display
+        await expect(displayPage.locator('.hea.home')).toContainText('Padova');
+        await expect(displayPage.locator('.hea.guest')).toContainText('Milano');
+    });
+
+    test('Toggle Formazione: dovrebbe mostrare la formazione sul display', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        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();
+
+        // Click Formazioni
+        await controllerPage.getByText('Formazioni').click();
+        await controllerPage.waitForTimeout(300);
+
+        // Il display mostra le formazioni
+        await expect(displayPage.locator('.form').first()).toBeVisible();
+    });
+
+    test('Toggle Striscia: dovrebbe nascondere/mostrare la striscia', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        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();
+
+        // Toggle off
+        await controllerPage.getByText('Striscia').click();
+        await controllerPage.waitForTimeout(300);
+        await expect(displayPage.locator('.striscia')).not.toBeVisible();
+
+        // Toggle on
+        await controllerPage.getByText('Striscia').click();
+        await controllerPage.waitForTimeout(300);
+        await expect(displayPage.locator('.striscia')).toBeVisible();
+    });
+
+    test('Cambi: dovrebbe effettuare una sostituzione giocatore', async ({ context }) => {
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        await displayPage.goto('http://localhost:3000');
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        // Attiva formazione sul display per verificare
+        await controllerPage.getByText('Formazioni').click();
+        await controllerPage.waitForTimeout(200);
+
+        // Apri cambi → scegli Home
+        await controllerPage.getByRole('button', { name: 'Cambi', exact: true }).click();
+        await controllerPage.waitForTimeout(100);
+        await controllerPage.locator('.dialog .btn-set.home-bg').click();
+        await controllerPage.waitForTimeout(100);
+
+        // Inserisci sostituzione: IN=10, OUT=1
+        const inField = controllerPage.locator('.cambi-in-field').first();
+        const outField = controllerPage.locator('.cambi-out-field').first();
+        await inField.fill('10');
+        await outField.fill('1');
+
+        // Conferma
+        await controllerPage.locator('.dialog .btn-confirm').click();
+        await controllerPage.waitForTimeout(300);
+
+        // Verifica formazione aggiornata sul display
+        const formText = await displayPage.locator('.form.home').textContent();
+        expect(formText).toContain('10');
+    });
+
+    test('Cambi: dovrebbe mostrare errore per giocatore non in formazione', async ({ context }) => {
+        const controllerPage = await context.newPage();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        // Apri cambi → scegli Home
+        await controllerPage.getByRole('button', { name: 'Cambi', exact: true }).click();
+        await controllerPage.waitForTimeout(100);
+        await controllerPage.locator('.dialog .btn-set.home-bg').click();
+        await controllerPage.waitForTimeout(100);
+
+        // Inserisci sostituzione invalida: OUT=99 (non in formazione)
+        await controllerPage.locator('.cambi-in-field').first().fill('10');
+        await controllerPage.locator('.cambi-out-field').first().fill('99');
+
+        // Conferma
+        await controllerPage.locator('.dialog .btn-confirm').click();
+        await controllerPage.waitForTimeout(200);
+
+        // Dovrebbe mostrare errore
+        await expect(controllerPage.locator('.cambi-error')).toBeVisible();
+    });
+});

tests/e2e/game-simulation.spec.cjs

@@ -0,0 +1,69 @@
+const { test, expect } = require('@playwright/test');
+
+test.describe('Game Simulation', () => {
+    test('Simulazione Partita: Controller aggiunge punti finché non cambia il set', async ({ context }) => {
+        // 1. Setup Pagine
+        const displayPage = await context.newPage();
+        const controllerPage = await context.newPage();
+
+        await displayPage.goto('http://localhost:3000');
+        await controllerPage.goto('http://localhost:3001');
+
+        // Selettori (basati su ID ipotetici o classi, adattali al tuo HTML reale)
+        // Assumo che nel DOM ci siano elementi con ID o classi riconoscibili
+        // E che i punteggi siano visibili.
+
+        // Pulisco lo stato iniziale (reset)
+        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');
+
+        // Clicca bottone SET
+        const btnSetHome = controllerPage.locator('.btn-set.home-bg');
+        await btnSetHome.click();
+
+        // Verifica che il set sia incrementato
+        // Nota: display potrebbe chiamarsi diversamente, controlliamo Controller per coerenza
+        await expect(controllerPage.locator('.team-score.home-bg .team-set')).toContainText('SET 1');
+    });
+});

tests/e2e/visual-regression.spec.cjs

@@ -0,0 +1,86 @@
+const { test, expect } = require('@playwright/test');
+
+// 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 displayPage = await context.newPage();
+
+        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
+        await displayPage.waitForTimeout(500);
+
+        await expect(displayPage).toHaveScreenshot('display-0-0.png', {
+            maxDiffPixelRatio: 0.05,
+        });
+    });
+
+    test('Display: screenshot durante partita (15-12)', async ({ context }) => {
+        const controllerPage = await context.newPage();
+        const displayPage = await context.newPage();
+
+        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 controllerPage.locator('.team-score.home-bg').click();
+            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,
+        });
+    });
+
+    test('Controller: screenshot stato iniziale', async ({ context }) => {
+        const controllerPage = await context.newPage();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        await resetGame(controllerPage);
+
+        await expect(controllerPage).toHaveScreenshot('controller-initial.png', {
+            maxDiffPixelRatio: 0.05,
+        });
+    });
+
+    test('Controller: screenshot con modal config aperta', async ({ context }) => {
+        const controllerPage = await context.newPage();
+        await controllerPage.goto('http://localhost:3001');
+        await controllerPage.waitForSelector('.conn-bar.connected');
+
+        // Apri config
+        await controllerPage.getByText('Config').click();
+        await controllerPage.waitForSelector('.dialog-config');
+        await controllerPage.waitForTimeout(300);
+
+        await expect(controllerPage).toHaveScreenshot('controller-config-modal.png', {
+            maxDiffPixelRatio: 0.05,
+        });
+    });
+});

tests/integration/websocket.test.js

@@ -0,0 +1,403 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { setupWebSocketHandler } from '../../src/websocket-handler.js'
+import { EventEmitter } from 'events'
+
+// Mock parziale di una WebSocket e del Server
+class MockWebSocket extends EventEmitter {
+    constructor() {
+        super()
+        this.readyState = 1 // OPEN
+    }
+    send = vi.fn()
+    terminate = vi.fn()
+}
+
+class MockWebSocketServer extends EventEmitter {
+    clients = new Set()
+}
+
+// Helper: connette e registra un client
+function connectAndRegister(wss, role) {
+    const ws = new MockWebSocket()
+    wss.emit('connection', ws)
+    wss.clients.add(ws)
+    ws.emit('message', JSON.stringify({ type: 'register', role }))
+    ws.send.mockClear()
+    return ws
+}
+
+// Helper: ultimo messaggio inviato a un ws
+function lastSent(ws) {
+    const calls = ws.send.mock.calls
+    return JSON.parse(calls[calls.length - 1][0])
+}
+
+describe('WebSocket Integration (websocket-handler.js)', () => {
+    let wss
+    let handler
+
+    beforeEach(() => {
+        wss = new MockWebSocketServer()
+        handler = setupWebSocketHandler(wss)
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    // =============================================
+    // REGISTRAZIONE
+    // =============================================
+    describe('Registrazione', () => {
+        it('dovrebbe registrare un client come "display" e inviare lo stato', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+            wss.clients.add(ws)
+            ws.emit('message', JSON.stringify({ type: 'register', role: 'display' }))
+
+            expect(ws.send).toHaveBeenCalled()
+            const sentMsg = JSON.parse(ws.send.mock.calls[0][0])
+            expect(sentMsg.type).toBe('state')
+            expect(sentMsg.state).toBeDefined()
+        })
+
+        it('dovrebbe registrare un client come "controller"', () => {
+            connectAndRegister(wss, 'controller')
+            expect(handler.getClients().size).toBe(1)
+        })
+
+        it('dovrebbe rifiutare ruolo non valido', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+            wss.clients.add(ws)
+            ws.emit('message', JSON.stringify({ type: 'register', role: 'hacker' }))
+
+            const sentMsg = JSON.parse(ws.send.mock.calls[0][0])
+            expect(sentMsg.type).toBe('error')
+            expect(sentMsg.message).toContain('Invalid role')
+        })
+
+        it('dovrebbe usare "display" come ruolo default se mancante', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+            wss.clients.add(ws)
+            ws.emit('message', JSON.stringify({ type: 'register' }))
+
+            const sentMsg = JSON.parse(ws.send.mock.calls[0][0])
+            expect(sentMsg.type).toBe('state')
+        })
+    })
+
+    // =============================================
+    // AZIONI
+    // =============================================
+    describe('Azioni', () => {
+        it('dovrebbe permettere al controller di cambiare il punteggio', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+
+            expect(controller.send).toHaveBeenCalled()
+            const sentMsg = lastSent(controller)
+            expect(sentMsg.type).toBe('state')
+            expect(sentMsg.state.sp.punt.home).toBe(1)
+        })
+
+        it('dovrebbe impedire al display di inviare azioni', () => {
+            const display = connectAndRegister(wss, 'display')
+
+            display.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+
+            const sentMsg = lastSent(display)
+            expect(sentMsg.type).toBe('error')
+            expect(sentMsg.message).toContain('Only controllers')
+        })
+
+        it('dovrebbe impedire azioni da client non registrati', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+            wss.clients.add(ws)
+
+            ws.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+
+            const sentMsg = JSON.parse(ws.send.mock.calls[0][0])
+            expect(sentMsg.type).toBe('error')
+            expect(sentMsg.message).toContain('Only controllers')
+        })
+
+        it('dovrebbe rifiutare azione con formato invalido (missing action)', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            controller.emit('message', JSON.stringify({
+                type: 'action'
+            }))
+
+            const sentMsg = lastSent(controller)
+            expect(sentMsg.type).toBe('error')
+            expect(sentMsg.message).toContain('Invalid action format')
+        })
+
+        it('dovrebbe rifiutare azione con formato invalido (missing action.type)', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { team: 'home' }
+            }))
+
+            const sentMsg = lastSent(controller)
+            expect(sentMsg.type).toBe('error')
+            expect(sentMsg.message).toContain('Invalid action format')
+        })
+    })
+
+    // =============================================
+    // BROADCAST MULTI-CLIENT
+    // =============================================
+    describe('Broadcast', () => {
+        it('dovrebbe inviare lo stato a tutti i client dopo un\'azione', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            const display1 = connectAndRegister(wss, 'display')
+            const display2 = connectAndRegister(wss, 'display')
+
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+
+            // Tutti i client nel set dovrebbero aver ricevuto lo stato
+            expect(controller.send).toHaveBeenCalled()
+            expect(display1.send).toHaveBeenCalled()
+            expect(display2.send).toHaveBeenCalled()
+
+            const msg1 = lastSent(display1)
+            const msg2 = lastSent(display2)
+            expect(msg1.type).toBe('state')
+            expect(msg1.state.sp.punt.home).toBe(1)
+            expect(msg2.state.sp.punt.home).toBe(1)
+        })
+
+        it('non dovrebbe inviare a client con readyState != OPEN', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            const closedClient = connectAndRegister(wss, 'display')
+            closedClient.readyState = 3 // CLOSED
+
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+
+            // closedClient non dovrebbe aver ricevuto il broadcast
+            expect(closedClient.send).not.toHaveBeenCalled()
+        })
+    })
+
+    // =============================================
+    // SPEAK
+    // =============================================
+    describe('Speak', () => {
+        it('dovrebbe inoltrare il messaggio speak solo ai display', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            const display = connectAndRegister(wss, 'display')
+
+            controller.emit('message', JSON.stringify({
+                type: 'speak',
+                text: 'quindici a dieci'
+            }))
+
+            // Il display riceve il messaggio speak
+            expect(display.send).toHaveBeenCalled()
+            const msg = lastSent(display)
+            expect(msg.type).toBe('speak')
+            expect(msg.text).toBe('quindici a dieci')
+        })
+
+        it('non dovrebbe permettere al display di inviare speak', () => {
+            const display = connectAndRegister(wss, 'display')
+
+            display.emit('message', JSON.stringify({
+                type: 'speak',
+                text: 'test'
+            }))
+
+            const msg = lastSent(display)
+            expect(msg.type).toBe('error')
+            expect(msg.message).toContain('Only controllers')
+        })
+
+        it('dovrebbe rifiutare speak con testo vuoto', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            controller.emit('message', JSON.stringify({
+                type: 'speak',
+                text: '   '
+            }))
+
+            const msg = lastSent(controller)
+            expect(msg.type).toBe('error')
+            expect(msg.message).toContain('Invalid speak payload')
+        })
+
+        it('dovrebbe rifiutare speak senza testo', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            controller.emit('message', JSON.stringify({
+                type: 'speak'
+            }))
+
+            const msg = lastSent(controller)
+            expect(msg.type).toBe('error')
+        })
+
+        it('dovrebbe fare trim del testo speak', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            const display = connectAndRegister(wss, 'display')
+
+            controller.emit('message', JSON.stringify({
+                type: 'speak',
+                text: '  dieci a otto  '
+            }))
+
+            const msg = lastSent(display)
+            expect(msg.text).toBe('dieci a otto')
+        })
+    })
+
+    // =============================================
+    // MESSAGGI MALFORMATI
+    // =============================================
+    describe('Messaggi malformati', () => {
+        it('dovrebbe gestire JSON non valido senza crash', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+            wss.clients.add(ws)
+
+            expect(() => {
+                ws.emit('message', 'questo non è JSON {{{')
+            }).not.toThrow()
+
+            const msg = lastSent(ws)
+            expect(msg.type).toBe('error')
+            expect(msg.message).toContain('Invalid message format')
+        })
+
+        it('dovrebbe gestire Buffer come input', () => {
+            const controller = connectAndRegister(wss, 'controller')
+
+            const buf = Buffer.from(JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+
+            controller.emit('message', buf)
+
+            const msg = lastSent(controller)
+            expect(msg.type).toBe('state')
+            expect(msg.state.sp.punt.home).toBe(1)
+        })
+    })
+
+    // =============================================
+    // DISCONNESSIONE
+    // =============================================
+    describe('Disconnessione', () => {
+        it('dovrebbe rimuovere il client dalla mappa alla disconnessione', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            expect(handler.getClients().size).toBe(1)
+
+            controller.emit('close')
+
+            expect(handler.getClients().size).toBe(0)
+        })
+
+        it('i client rimanenti non dovrebbero essere affetti dalla disconnessione', () => {
+            const controller = connectAndRegister(wss, 'controller')
+            const display = connectAndRegister(wss, 'display')
+            expect(handler.getClients().size).toBe(2)
+
+            controller.emit('close')
+            expect(handler.getClients().size).toBe(1)
+
+            expect(handler.getClients().has(display)).toBe(true)
+        })
+    })
+
+    // =============================================
+    // ERRORI WEBSOCKET
+    // =============================================
+    describe('Errori WebSocket', () => {
+        it('dovrebbe terminare la connessione per errore UTF8 invalido', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+
+            const err = new Error('Invalid UTF8')
+            err.code = 'WS_ERR_INVALID_UTF8'
+            ws.emit('error', err)
+
+            expect(ws.terminate).toHaveBeenCalled()
+        })
+
+        it('dovrebbe terminare la connessione per close code invalido', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+
+            const err = new Error('Invalid close code')
+            err.code = 'WS_ERR_INVALID_CLOSE_CODE'
+            ws.emit('error', err)
+
+            expect(ws.terminate).toHaveBeenCalled()
+        })
+
+        it('non dovrebbe terminare per altri errori', () => {
+            const ws = new MockWebSocket()
+            wss.emit('connection', ws)
+
+            const err = new Error('Generic error')
+            ws.emit('error', err)
+
+            expect(ws.terminate).not.toHaveBeenCalled()
+        })
+    })
+
+    // =============================================
+    // API PUBBLICA
+    // =============================================
+    describe('API pubblica', () => {
+        it('getState dovrebbe restituire lo stato corrente', () => {
+            const state = handler.getState()
+            expect(state.sp.punt.home).toBe(0)
+            expect(state.sp.punt.guest).toBe(0)
+        })
+
+        it('setState dovrebbe sovrascrivere lo stato', () => {
+            const newState = handler.getState()
+            newState.sp.punt.home = 99
+            handler.setState(newState)
+            expect(handler.getState().sp.punt.home).toBe(99)
+        })
+
+        it('broadcastState dovrebbe inviare a tutti i client', () => {
+            const display = connectAndRegister(wss, 'display')
+            handler.broadcastState()
+            expect(display.send).toHaveBeenCalled()
+            const msg = lastSent(display)
+            expect(msg.type).toBe('state')
+        })
+
+        it('getClients dovrebbe restituire la mappa dei client', () => {
+            expect(handler.getClients()).toBeInstanceOf(Map)
+            expect(handler.getClients().size).toBe(0)
+            connectAndRegister(wss, 'display')
+            expect(handler.getClients().size).toBe(1)
+        })
+    })
+})

tests/stress/websocket-load.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { setupWebSocketHandler } from '../../src/websocket-handler.js'
+import { EventEmitter } from 'events'
+
+class MockWebSocket extends EventEmitter {
+    constructor() {
+        super()
+        this.readyState = 1
+    }
+    send = vi.fn()
+    terminate = vi.fn()
+}
+
+class MockWebSocketServer extends EventEmitter {
+    clients = new Set()
+}
+
+function connectAndRegister(wss, role) {
+    const ws = new MockWebSocket()
+    wss.emit('connection', ws)
+    wss.clients.add(ws)
+    ws.emit('message', JSON.stringify({ type: 'register', role }))
+    ws.send.mockClear()
+    return ws
+}
+
+describe('Stress Test WebSocket', () => {
+    let wss
+    let handler
+
+    beforeEach(() => {
+        wss = new MockWebSocketServer()
+        handler = setupWebSocketHandler(wss)
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    it('dovrebbe gestire 50 client display connessi simultaneamente', () => {
+        const displays = []
+        for (let i = 0; i < 50; i++) {
+            displays.push(connectAndRegister(wss, 'display'))
+        }
+
+        expect(handler.getClients().size).toBe(50)
+
+        // Un controller invia un'azione
+        const controller = connectAndRegister(wss, 'controller')
+        controller.emit('message', JSON.stringify({
+            type: 'action',
+            action: { type: 'incPunt', team: 'home' }
+        }))
+
+        // Tutti i display devono aver ricevuto il broadcast
+        for (const display of displays) {
+            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)
+        }
+    })
+
+    it('dovrebbe gestire 100 azioni rapide in sequenza con stato finale corretto', () => {
+        const controller = connectAndRegister(wss, 'controller')
+
+        // 60 punti home, 40 punti guest
+        for (let i = 0; i < 60; i++) {
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+        }
+        for (let i = 0; i < 40; i++) {
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'guest' }
+            }))
+        }
+
+        // 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)
+        // 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)
+    })
+
+    it('dovrebbe garantire che tutti i display ricevano ogni update sotto carico', () => {
+        const displays = []
+        for (let i = 0; i < 10; i++) {
+            displays.push(connectAndRegister(wss, 'display'))
+        }
+
+        const controller = connectAndRegister(wss, 'controller')
+
+        // 5 azioni rapide
+        for (let i = 0; i < 5; i++) {
+            controller.emit('message', JSON.stringify({
+                type: 'action',
+                action: { type: 'incPunt', team: 'home' }
+            }))
+        }
+
+        // Ogni display deve aver ricevuto esattamente 5 broadcast
+        for (const display of displays) {
+            expect(display.send).toHaveBeenCalledTimes(5)
+        }
+
+        // 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)
+        }
+    })
+})

tests/unit/gameState.test.js

@@ -0,0 +1,659 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createInitialState, applyAction, checkVittoria } from '../../src/gameState.js'
+
+describe('Game Logic (gameState.js)', () => {
+    let state
+
+    beforeEach(() => {
+        state = createInitialState()
+    })
+
+    // =============================================
+    // STATO INIZIALE
+    // =============================================
+    describe('Stato iniziale', () => {
+        it('dovrebbe iniziare con 0-0', () => {
+            expect(state.sp.punt.home).toBe(0)
+            expect(state.sp.punt.guest).toBe(0)
+        })
+
+        it('dovrebbe avere i set a 0', () => {
+            expect(state.sp.set.home).toBe(0)
+            expect(state.sp.set.guest).toBe(0)
+        })
+
+        it('dovrebbe avere servizio Home', () => {
+            expect(state.sp.servHome).toBe(true)
+        })
+
+        it('dovrebbe avere formazione di default [1-6]', () => {
+            expect(state.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+            expect(state.sp.form.guest).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('dovrebbe avere la striscia iniziale a [0]', () => {
+            expect(state.sp.striscia.home).toEqual([0])
+            expect(state.sp.striscia.guest).toEqual([0])
+        })
+
+        it('dovrebbe avere storico servizio vuoto', () => {
+            expect(state.sp.storicoServizio).toEqual([])
+        })
+
+        it('dovrebbe avere modalità 3/5 di default', () => {
+            expect(state.modalitaPartita).toBe("3/5")
+        })
+
+        it('dovrebbe avere visuForm false e visuStriscia true', () => {
+            expect(state.visuForm).toBe(false)
+            expect(state.visuStriscia).toBe(true)
+        })
+    })
+
+    // =============================================
+    // IMMUTABILITÀ
+    // =============================================
+    describe('Immutabilità', () => {
+        it('applyAction non dovrebbe mutare lo stato originale', () => {
+            const original = JSON.stringify(state)
+            applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(JSON.stringify(state)).toBe(original)
+        })
+
+        it('dovrebbe restituire un nuovo oggetto', () => {
+            const newState = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(newState).not.toBe(state)
+        })
+    })
+
+    // =============================================
+    // INCREMENTO PUNTI (incPunt)
+    // =============================================
+    describe('incPunt', () => {
+        it('dovrebbe incrementare i punti Home', () => {
+            const newState = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(newState.sp.punt.home).toBe(1)
+            expect(newState.sp.punt.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(newState.sp.punt.home).toBe(0)
+        })
+
+        it('dovrebbe gestire il cambio palla (Guest segna, batteva Home)', () => {
+            state.sp.servHome = true
+            const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
+            expect(s1.sp.servHome).toBe(false)
+        })
+
+        it('dovrebbe gestire il cambio palla (Home segna, batteva Guest)', () => {
+            state.sp.servHome = false
+            const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s1.sp.servHome).toBe(true)
+        })
+
+        it('non dovrebbe cambiare palla se segna chi batte', () => {
+            state.sp.servHome = true
+            const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s1.sp.servHome).toBe(true)
+        })
+
+        it('dovrebbe ruotare la formazione al cambio palla', () => {
+            state.sp.servHome = true
+            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
+            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"])
+        })
+
+        it('dovrebbe aggiornare la striscia per punto Home', () => {
+            const s = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s.sp.striscia.home).toEqual([0, 1])
+            expect(s.sp.striscia.guest).toEqual([0, " "])
+        })
+
+        it('dovrebbe aggiornare la striscia per punto Guest', () => {
+            const s = applyAction(state, { type: 'incPunt', team: 'guest' })
+            expect(s.sp.striscia.guest).toEqual([0, 1])
+            expect(s.sp.striscia.home).toEqual([0, " "])
+        })
+
+        it('dovrebbe registrare lo storico servizio', () => {
+            const s = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s.sp.storicoServizio).toHaveLength(1)
+            expect(s.sp.storicoServizio[0]).toHaveProperty('servHome')
+            expect(s.sp.storicoServizio[0]).toHaveProperty('cambioPalla')
+        })
+
+        it('non dovrebbe incrementare i punti dopo vittoria', () => {
+            state.sp.punt.home = 25
+            state.sp.punt.guest = 23
+            const s = applyAction(state, { type: 'incPunt', team: 'home' })
+            expect(s.sp.punt.home).toBe(25)
+        })
+    })
+
+    // =============================================
+    // DECREMENTO PUNTI (decPunt)
+    // =============================================
+    describe('decPunt', () => {
+        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(s2.sp.punt.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(s2.sp.punt.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(s.sp.punt.guest).toBe(0)
+        })
+
+        it('dovrebbe ripristinare il servizio dopo undo con cambio palla', () => {
+            state.sp.servHome = true
+            const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
+            expect(s1.sp.servHome).toBe(false)
+            const s2 = applyAction(s1, { type: 'decPunt' })
+            expect(s2.sp.servHome).toBe(true)
+        })
+
+        it('dovrebbe invertire la rotazione dopo undo con cambio palla', () => {
+            state.sp.servHome = true
+            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"])
+            const s2 = applyAction(s1, { type: 'decPunt' })
+            expect(s2.sp.form.guest).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('dovrebbe ripristinare la striscia', () => {
+            const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
+            const s2 = applyAction(s1, { type: 'decPunt' })
+            expect(s2.sp.striscia.home).toEqual([0])
+        })
+
+        it('dovrebbe gestire undo multipli in sequenza', () => {
+            let s = state
+            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(s.sp.punt.guest).toBe(1)
+            s = applyAction(s, { type: 'decPunt' })
+            expect(s.sp.punt.home).toBe(1)
+            s = applyAction(s, { type: 'decPunt' })
+            expect(s.sp.punt.guest).toBe(0)
+            s = applyAction(s, { type: 'decPunt' })
+            expect(s.sp.punt.home).toBe(0)
+        })
+    })
+
+    // =============================================
+    // INCREMENTO SET (incSet)
+    // =============================================
+    describe('incSet', () => {
+        it('dovrebbe incrementare il set Home', () => {
+            const s = applyAction(state, { type: 'incSet', team: 'home' })
+            expect(s.sp.set.home).toBe(1)
+        })
+
+        it('dovrebbe incrementare il set Guest', () => {
+            const s = applyAction(state, { type: 'incSet', team: 'guest' })
+            expect(s.sp.set.guest).toBe(1)
+        })
+
+        it('dovrebbe fare wrap da 2 a 0', () => {
+            state.sp.set.home = 2
+            const s = applyAction(state, { type: 'incSet', team: 'home' })
+            expect(s.sp.set.home).toBe(0)
+        })
+
+        it('dovrebbe incrementare da 1 a 2', () => {
+            state.sp.set.home = 1
+            const s = applyAction(state, { type: 'incSet', team: 'home' })
+            expect(s.sp.set.home).toBe(2)
+        })
+    })
+
+    // =============================================
+    // CAMBIO PALLA (cambiaPalla)
+    // =============================================
+    describe('cambiaPalla', () => {
+        it('dovrebbe invertire il servizio a 0-0', () => {
+            expect(state.sp.servHome).toBe(true)
+            const s = applyAction(state, { type: 'cambiaPalla' })
+            expect(s.sp.servHome).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)
+        })
+
+        it('non dovrebbe cambiare palla se il punteggio non è 0-0', () => {
+            state.sp.punt.home = 1
+            const s = applyAction(state, { type: 'cambiaPalla' })
+            expect(s.sp.servHome).toBe(true)
+        })
+
+        it('non dovrebbe cambiare palla se Guest ha punti', () => {
+            state.sp.punt.guest = 3
+            const s = applyAction(state, { type: 'cambiaPalla' })
+            expect(s.sp.servHome).toBe(true)
+        })
+    })
+
+    // =============================================
+    // TOGGLE (toggleFormazione, toggleStriscia, toggleOrder)
+    // =============================================
+    describe('Toggle', () => {
+        it('toggleFormazione: false → true', () => {
+            expect(state.visuForm).toBe(false)
+            const s = applyAction(state, { type: 'toggleFormazione' })
+            expect(s.visuForm).toBe(true)
+        })
+
+        it('toggleFormazione: true → false', () => {
+            state.visuForm = true
+            const s = applyAction(state, { type: 'toggleFormazione' })
+            expect(s.visuForm).toBe(false)
+        })
+
+        it('toggleStriscia: true → false', () => {
+            expect(state.visuStriscia).toBe(true)
+            const s = applyAction(state, { type: 'toggleStriscia' })
+            expect(s.visuStriscia).toBe(false)
+        })
+
+        it('toggleOrder: true → false', () => {
+            expect(state.order).toBe(true)
+            const s = applyAction(state, { type: 'toggleOrder' })
+            expect(s.order).toBe(false)
+        })
+    })
+
+    // =============================================
+    // NOMI (setNomi)
+    // =============================================
+    describe('setNomi', () => {
+        it('dovrebbe aggiornare entrambi i nomi', () => {
+            const s = applyAction(state, { type: 'setNomi', home: 'Volley A', guest: 'Volley B' })
+            expect(s.sp.nomi.home).toBe('Volley A')
+            expect(s.sp.nomi.guest).toBe('Volley B')
+        })
+
+        it('dovrebbe aggiornare solo il nome Home se guest è undefined', () => {
+            const s = applyAction(state, { type: 'setNomi', home: 'Volley A' })
+            expect(s.sp.nomi.home).toBe('Volley A')
+            expect(s.sp.nomi.guest).toBe('Guest')
+        })
+
+        it('dovrebbe aggiornare solo il nome Guest se home è undefined', () => {
+            const s = applyAction(state, { type: 'setNomi', guest: 'Volley B' })
+            expect(s.sp.nomi.home).toBe('Antoniana')
+            expect(s.sp.nomi.guest).toBe('Volley B')
+        })
+    })
+
+    // =============================================
+    // MODALITÀ (setModalita)
+    // =============================================
+    describe('setModalita', () => {
+        it('dovrebbe cambiare in 2/3', () => {
+            const s = applyAction(state, { type: 'setModalita', modalita: '2/3' })
+            expect(s.modalitaPartita).toBe('2/3')
+        })
+
+        it('dovrebbe cambiare in 3/5', () => {
+            state.modalitaPartita = '2/3'
+            const s = applyAction(state, { type: 'setModalita', modalita: '3/5' })
+            expect(s.modalitaPartita).toBe('3/5')
+        })
+    })
+
+    // =============================================
+    // FORMAZIONE (setFormazione)
+    // =============================================
+    describe('setFormazione', () => {
+        it('dovrebbe sostituire la formazione Home', () => {
+            const nuova = ["10", "11", "12", "13", "14", "15"]
+            const s = applyAction(state, { type: 'setFormazione', team: 'home', form: nuova })
+            expect(s.sp.form.home).toEqual(nuova)
+        })
+
+        it('dovrebbe sostituire la formazione Guest', () => {
+            const nuova = ["7", "8", "9", "10", "11", "12"]
+            const s = applyAction(state, { type: 'setFormazione', team: 'guest', form: nuova })
+            expect(s.sp.form.guest).toEqual(nuova)
+        })
+
+        it('non dovrebbe modificare se manca team', () => {
+            const s = applyAction(state, { type: 'setFormazione', form: ["7", "8", "9", "10", "11", "12"] })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('non dovrebbe modificare se manca form', () => {
+            const s = applyAction(state, { type: 'setFormazione', team: 'home' })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+    })
+
+    // =============================================
+    // CAMBI GIOCATORI (confermaCambi)
+    // =============================================
+    describe('confermaCambi', () => {
+        it('dovrebbe effettuare una sostituzione valida', () => {
+            state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [{ in: "10", out: "3" }]
+            })
+            expect(s.sp.form.home).toContain("10")
+            expect(s.sp.form.home).not.toContain("3")
+        })
+
+        it('dovrebbe gestire doppia sostituzione', () => {
+            state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [
+                    { in: "10", out: "1" },
+                    { in: "11", out: "2" }
+                ]
+            })
+            expect(s.sp.form.home).toContain("10")
+            expect(s.sp.form.home).toContain("11")
+            expect(s.sp.form.home).not.toContain("1")
+            expect(s.sp.form.home).not.toContain("2")
+        })
+
+        it('non dovrebbe accettare input non numerico', () => {
+            state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [{ in: "abc", out: "1" }]
+            })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('non dovrebbe accettare in == out', () => {
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [{ in: "1", out: "1" }]
+            })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('non dovrebbe accettare giocatore IN già in formazione', () => {
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [{ in: "2", out: "1" }]
+            })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('non dovrebbe accettare giocatore OUT non in formazione', () => {
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [{ in: "10", out: "99" }]
+            })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('dovrebbe saltare cambi con campo vuoto', () => {
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [
+                    { in: "", out: "" },
+                    { in: "10", out: "1" }
+                ]
+            })
+            expect(s.sp.form.home).toContain("10")
+        })
+
+        it('dovrebbe mantenere la posizione del giocatore sostituito', () => {
+            state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [{ in: "10", out: "3" }]
+            })
+            expect(s.sp.form.home[2]).toBe("10")
+        })
+
+        it('dovrebbe gestire cambi sequenziali che dipendono l\'uno dall\'altro', () => {
+            // Sostituisci 1→10, poi 10→20 (il secondo dipende dal risultato del primo)
+            state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
+            const s = applyAction(state, {
+                type: 'confermaCambi',
+                team: 'home',
+                cambi: [
+                    { in: "10", out: "1" },
+                    { in: "20", out: "10" }
+                ]
+            })
+            expect(s.sp.form.home).toContain("20")
+            expect(s.sp.form.home).not.toContain("1")
+            expect(s.sp.form.home).not.toContain("10")
+        })
+    })
+
+    // =============================================
+    // VITTORIA SET (checkVittoria)
+    // =============================================
+    describe('checkVittoria', () => {
+        it('non dovrebbe dare vittoria a 24-24', () => {
+            state.sp.punt.home = 24
+            state.sp.punt.guest = 24
+            expect(checkVittoria(state)).toBe(false)
+        })
+
+        it('dovrebbe dare vittoria a 25-23', () => {
+            state.sp.punt.home = 25
+            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
+            state.sp.punt.guest = 24
+            expect(checkVittoria(state)).toBe(false)
+        })
+
+        it('dovrebbe dare vittoria a 26-24', () => {
+            state.sp.punt.home = 26
+            state.sp.punt.guest = 24
+            expect(checkVittoria(state)).toBe(true)
+        })
+
+        it('dovrebbe dare vittoria Guest a 25-20', () => {
+            state.sp.punt.home = 20
+            state.sp.punt.guest = 25
+            expect(checkVittoria(state)).toBe(true)
+        })
+
+        it('dovrebbe dare vittoria ai vantaggi (30-28)', () => {
+            state.sp.punt.home = 30
+            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
+            state.sp.punt.guest = 27
+            expect(checkVittoria(state)).toBe(false)
+        })
+    })
+
+    // =============================================
+    // SET DECISIVO (15 punti)
+    // =============================================
+    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
+            state.sp.set.guest = 2
+            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
+            state.sp.set.guest = 2
+            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
+            state.sp.set.guest = 2
+            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
+            state.sp.set.guest = 2
+            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
+            state.sp.set.guest = 2
+            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
+            state.sp.set.guest = 1
+            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)', () => {
+            state.modalitaPartita = "2/3"
+            state.sp.set.home = 1
+            state.sp.set.guest = 1
+            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
+            state.sp.set.guest = 0
+            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
+            state.sp.set.guest = 1
+            state.sp.punt.home = 15
+            state.sp.punt.guest = 10
+            expect(checkVittoria(state)).toBe(false)
+        })
+    })
+
+    // =============================================
+    // RESET
+    // =============================================
+    describe('Reset', () => {
+        it('dovrebbe resettare punti e set a zero', () => {
+            state.sp.punt.home = 10
+            state.sp.punt.guest = 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(s.sp.punt.guest).toBe(0)
+            expect(s.sp.set.home).toBe(0)
+            expect(s.sp.set.guest).toBe(0)
+        })
+
+        it('dovrebbe resettare formazioni a default', () => {
+            state.sp.form.home = ["10", "11", "12", "13", "14", "15"]
+            const s = applyAction(state, { type: 'resetta' })
+            expect(s.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
+            expect(s.sp.form.guest).toEqual(["1", "2", "3", "4", "5", "6"])
+        })
+
+        it('dovrebbe resettare la striscia', () => {
+            state.sp.striscia = { home: [0, 1, 2, 3], guest: [0, " ", " ", 1] }
+            const s = applyAction(state, { type: 'resetta' })
+            expect(s.sp.striscia.home).toEqual([0])
+            expect(s.sp.striscia.guest).toEqual([0])
+        })
+
+        it('dovrebbe resettare lo storico servizio', () => {
+            state.sp.storicoServizio = [{ servHome: true, cambioPalla: false }]
+            const s = applyAction(state, { type: 'resetta' })
+            expect(s.sp.storicoServizio).toEqual([])
+        })
+
+        it('dovrebbe impostare visuForm a false', () => {
+            state.visuForm = true
+            const s = applyAction(state, { type: 'resetta' })
+            expect(s.visuForm).toBe(false)
+        })
+
+        it('dovrebbe mantenere nomi e modalità', () => {
+            state.sp.nomi.home = "Squadra A"
+            state.modalitaPartita = "2/3"
+            const s = applyAction(state, { type: 'resetta' })
+            expect(s.sp.nomi.home).toBe("Squadra A")
+            expect(s.modalitaPartita).toBe("2/3")
+        })
+    })
+
+    // =============================================
+    // AZIONE SCONOSCIUTA
+    // =============================================
+    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(s.sp.punt.guest).toBe(0)
+        })
+    })
+})

tests/unit/server-utils.test.js

@@ -0,0 +1,148 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import * as os from 'os'
+
+vi.mock('os', async (importOriginal) => {
+    return {
+        ...await importOriginal(),
+        networkInterfaces: vi.fn(() => ({}))
+    }
+})
+
+import { getNetworkIPs, printServerInfo } from '../../src/server-utils.js'
+
+describe('Server Utils', () => {
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+    })
+
+    // =============================================
+    // getNetworkIPs
+    // =============================================
+    describe('getNetworkIPs', () => {
+        it('dovrebbe restituire indirizzi IPv4 non-loopback', () => {
+            os.networkInterfaces.mockReturnValue({
+                eth0: [
+                    { family: 'IPv4', internal: false, address: '192.168.1.100' }
+                ]
+            })
+            expect(getNetworkIPs()).toEqual(['192.168.1.100'])
+        })
+
+        it('dovrebbe escludere indirizzi loopback (internal)', () => {
+            os.networkInterfaces.mockReturnValue({
+                lo: [
+                    { family: 'IPv4', internal: true, address: '127.0.0.1' }
+                ],
+                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({
+                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({
+                docker0: [
+                    { family: 'IPv4', internal: false, address: '172.17.0.1' }
+                ],
+                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({
+                br0: [
+                    { family: 'IPv4', internal: false, address: '172.18.0.1' }
+                ]
+            })
+            expect(getNetworkIPs()).toEqual([])
+        })
+
+        it('dovrebbe restituire array vuoto se nessuna interfaccia disponibile', () => {
+            os.networkInterfaces.mockReturnValue({})
+            expect(getNetworkIPs()).toEqual([])
+        })
+
+        it('dovrebbe restituire più indirizzi da interfacce diverse', () => {
+            os.networkInterfaces.mockReturnValue({
+                eth0: [
+                    { family: 'IPv4', internal: false, address: '192.168.1.100' }
+                ],
+                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')
+        })
+    })
+
+    // =============================================
+    // printServerInfo
+    // =============================================
+    describe('printServerInfo', () => {
+        it('dovrebbe stampare le porte corrette (default)', () => {
+            os.networkInterfaces.mockReturnValue({})
+            const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+            printServerInfo()
+            const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
+            expect(allLogs).toContain('5173')
+            expect(allLogs).toContain('3001')
+            consoleSpy.mockRestore()
+        })
+
+        it('dovrebbe stampare le porte personalizzate', () => {
+            os.networkInterfaces.mockReturnValue({})
+            const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+            printServerInfo(3000, 4000)
+            const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
+            expect(allLogs).toContain('3000')
+            expect(allLogs).toContain('4000')
+            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, 3001)
+            const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
+            expect(allLogs).toContain('192.168.1.50')
+            expect(allLogs).toContain('remoti')
+            consoleSpy.mockRestore()
+        })
+
+        it('non dovrebbe mostrare sezione remoti se nessun IP di rete', () => {
+            os.networkInterfaces.mockReturnValue({})
+            const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
+            printServerInfo(3000, 3001)
+            const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
+            expect(allLogs).not.toContain('remoti')
+            consoleSpy.mockRestore()
+        })
+    })
+})

vite-plugin-websocket.js

@@ -0,0 +1,131 @@
+import { WebSocketServer } from 'ws'
+import { createServer as createHttpServer, request as httpRequest } from 'http'
+import { setupWebSocketHandler } from './src/websocket-handler.js'
+import { printServerInfo } from './src/server-utils.js'
+
+const CONTROLLER_PORT = 3001
+const DEV_PROXY_HOST = process.env.DEV_PROXY_HOST || '127.0.0.1'
+
+/**
+ * Plugin Vite che integra un server WebSocket per la gestione dello stato di gioco
+ * e un server separato sulla porta 3001 per il controller.
+ * @returns {import('vite').Plugin}
+ */
+export default function websocketPlugin() {
+  return {
+    name: 'vite-plugin-websocket',
+    configureServer(server) {
+      // Inizializza un server WebSocket collegato al server HTTP di Vite.
+      const wss = new WebSocketServer({ noServer: true })
+
+      // Registra i gestori WebSocket con la logica di gioco.
+      setupWebSocketHandler(wss)
+
+      // Intercetta le richieste di upgrade WebSocket solo sul path /ws.
+      server.httpServer.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)
+          })
+        }
+      })
+
+      // Avvia un server separato per il controller sulla porta 3001.
+      server.httpServer.once('listening', () => {
+        const viteAddr = server.httpServer.address()
+        const vitePort = viteAddr.port
+
+        startControllerDevServer(vitePort, wss)
+
+        setTimeout(() => printServerInfo(vitePort, CONTROLLER_PORT), 100)
+      })
+    }
+  }
+}
+
+/**
+ * Avvia il server di sviluppo per il controller.
+ * Fa da proxy verso il dev server di Vite per moduli ES, HMR, e asset.
+ */
+function startControllerDevServer(vitePort, wss) {
+  const controllerServer = createHttpServer((req, res) => {
+    // Se richiesta alla root, riscrive verso controller.html
+    let targetPath = req.url
+    if (targetPath === '/' || targetPath === '') {
+      targetPath = '/controller.html'
+    }
+
+    // Proxy verso il dev server di Vite
+    const proxyReq = httpRequest(
+      {
+        hostname: DEV_PROXY_HOST,
+        port: vitePort,
+        path: targetPath,
+        method: req.method,
+        headers: {
+          ...req.headers,
+          host: `${DEV_PROXY_HOST}:${vitePort}`,
+        },
+      },
+      (proxyRes) => {
+        res.writeHead(proxyRes.statusCode, proxyRes.headers)
+        proxyRes.pipe(res, { end: true })
+      }
+    )
+
+    proxyReq.on('error', (err) => {
+      console.error('[Controller Proxy] Error:', err.message)
+      if (!res.headersSent) {
+        res.writeHead(502)
+        res.end('Proxy error')
+      }
+    })
+
+    req.pipe(proxyReq, { end: true })
+  })
+
+  // Gestisce l'upgrade WebSocket anche sulla porta del controller
+  controllerServer.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 {
+      // Per l'HMR di Vite, proxare l'upgrade WebSocket verso Vite
+      const proxyReq = httpRequest({
+        hostname: DEV_PROXY_HOST,
+        port: vitePort,
+        path: request.url,
+        method: 'GET',
+        headers: request.headers,
+      })
+
+      proxyReq.on('upgrade', (proxyRes, proxySocket, proxyHead) => {
+        socket.write(
+          `HTTP/1.1 101 Switching Protocols\r\n` +
+          Object.entries(proxyRes.headers)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join('\r\n') +
+          '\r\n\r\n'
+        )
+        proxySocket.pipe(socket)
+        socket.pipe(proxySocket)
+      })
+
+      proxyReq.on('error', (err) => {
+        console.error('[Controller Proxy] WS upgrade error:', err.message)
+        socket.destroy()
+      })
+
+      proxyReq.end()
+    }
+  })
+
+  controllerServer.listen(CONTROLLER_PORT, '0.0.0.0', () => {
+    console.log(`[Controller] Dev server running on port ${CONTROLLER_PORT}`)
+  })
+}

vite.config.js

@@ -1,12 +1,26 @@
 import { defineConfig } from 'vite'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
+import websocketPlugin from './vite-plugin-websocket.js'
 
-// https://vitejs.dev/config/
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// Configurazione principale di Vite
 export default defineConfig({
-  base: process.env.NODE_ENV === 'production' ? '/segnap' : '/',
+  base: '/',
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        controller: resolve(__dirname, 'controller.html'),
+      },
+    },
+  },
   plugins: [
     vue(),
+    websocketPlugin(),
     VitePWA({
       registerType: 'autoUpdate',
       manifest: {
@@ -32,4 +46,8 @@ export default defineConfig({
       }
     })
   ],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  },
 })

vitest.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+    plugins: [vue()],
+    test: {
+        include: [
+            'tests/unit/**/*.{test,spec}.js',
+            'tests/integration/**/*.{test,spec}.js',
+            'tests/component/**/*.{test,spec}.js',
+            'tests/stress/**/*.{test,spec}.js',
+        ],
+        globals: true,
+        environment: 'node',
+        environmentMatchGlobs: [
+            ['tests/component/**', 'happy-dom'],
+        ],
+    },
+})