# Segnapunti Anto Applicazione web **fullstack real-time** per il tracciamento dei punteggi di partite di pallavolo, installabile come PWA. --- ## Panoramica **Segnapunti Anto** è un'applicazione fullstack per il tracciamento del punteggio durante partite di pallavolo, ottimizzata per tablet e smartphone in contesto sportivo. ### Architettura Il sistema è composto da un **backend Node.js/Express** e due interfacce web separate: | Interfaccia | Porta | Ruolo | |-------------|-------|-------| | **Display** | 3000 | Tabellone pubblico — mostra punteggi, formazioni e storico | | **Controller** | 3001 | Pannello operatore — invia azioni e gestisce la partita | Le due interfacce comunicano tramite **WebSocket** (`/ws`): ogni azione del Controller viene elaborata dal server e trasmessa in broadcast a tutti i client connessi. La logica di gioco risiede interamente **lato server** (`gameState.js`), con aggiornamenti di stato immutabili. Il frontend Vue 3 è puramente reattivo: riceve lo stato e lo visualizza senza gestirne la consistenza. In produzione, entrambi i server sono gestiti da un unico processo Node.js (`server.js`) e l'intera applicazione è containerizzabile via Docker. Il frontend è installabile come **PWA** (service worker, manifest, modalità fullscreen landscape) per utilizzo kiosk su dispositivi sportivi. --- ## Funzionalità ### Gestione partita in tempo reale - Tracciamento punti home/guest con indicatore di servizio - Gestione set e storico punti (striscia) - Blocco azioni quando il set è già vinto ### Regole pallavolo integrate - Set normali: vittoria a 25 con almeno 2 punti di scarto - Set decisivo (5° set): vittoria a 15 con almeno 2 punti di scarto - Modalità partita `2/3` o `3/5` ### Formazioni e cambi - Gestione formazione a 6 giocatori per squadra - Rotazione automatica al cambio palla - Dialog cambi con validazione `IN → OUT` ### Controlli e personalizzazione - Configurazione nomi squadre - Inversione ordine di visualizzazione squadre - Toggle punteggio/formazioni e visibilità striscia storico - Sintesi vocale del punteggio (Web Speech API) --- ## Requisiti ### Ambiente di sviluppo | Requisito | Versione minima | Consigliata | |-----------|-----------------|-------------| | **Node.js** | `>= 18.19.0` | `24 LTS` | | **npm** | `>= 9` | — | | **RAM** | 2 GB | 4 GB | | **OS** | Linux, macOS, Windows | — | ### Test E2E I test end-to-end richiedono i browser Playwright. Su Linux potrebbero essere necessarie dipendenze di sistema aggiuntive. ```bash npx playwright install chromium firefox # Linux (con dipendenze di sistema): # npx playwright install --with-deps chromium firefox ``` ### Requisiti browser (utente finale) | API | Utilizzo | Necessità | |-----|----------|-----------| | JavaScript ES6+ | Moduli, async/await | Obbligatorio | | WebSocket | Sincronizzazione stato live | Obbligatorio | | Service Worker | Supporto PWA offline | Consigliato | | Web Speech API | Annunci vocali punteggio | Opzionale | **Browser testati:** Chrome/Chromium, Firefox, Mobile Chrome (Playwright Pixel 5). --- ## Installazione ```bash git clone https://santantonio.sytes.net/attilio/segnapunti.git cd segnapunti npm install ``` --- ## Sviluppo ### Dev server ```bash npm run dev ``` Avvia il server Vite con hot reload: - `http://localhost:5173/` — Display - `http://localhost:5173/controller.html` — Controller ### Build di produzione ```bash npm run build ``` Genera la cartella `dist/` con asset ottimizzati, manifest e service worker PWA. ### Avvio in produzione (locale) ```bash npm run serve ``` Espone i due server: - `http://localhost:3000` — Display - `http://localhost:3001` — Controller --- ## Test La suite di test copre tutti i livelli dell'applicazione: | Suite | Comando | Descrizione | |-------|---------|-------------| | Tutti | `npm run test:all` | Unit + integration + component + stress | | Unit + integration | `npm run test:unit` | Logica di gioco e WebSocket | | Component | `npm run test:component` | Componenti Vue | | Stress | `npm run test:stress` | Load test WebSocket | | E2E | `npm run test:e2e` | Playwright (chromium, firefox, mobile) | Per la guida completa ai test, consultare [`tests/README.md`](tests/README.md). --- ## Docker ```bash docker-compose up --build ``` Espone le porte `3000` (Display) e `3001` (Controller).