7 Commits

Author SHA1 Message Date
2c0bcdb833 Aggiorna dipendenze e Node.js 20 con fix permessi dist
- Aggiorna Vite: 4.3.9 → 5.4.10
- Aggiorna Vue: 3.2.47 → 3.4.38
- Aggiorna @vitejs/plugin-vue: 4.1.0 → 5.1.4
- Aggiorna vite-plugin-pwa: 0.16.0 → 0.20.5
- Aggiorna Capacitor: 6.0.0 → 6.2.0
- Aggiorna wave-ui: 3.3.0 → 3.17.0
- Aggiorna Node.js nel Dockerfile: 18.x → 20.x (LTS)
- Aggiunge fix automatico permessi dist dopo build Docker
2026-01-24 18:43:21 +01:00
5e9377c681 Unifica output APK nella cartella /dist/android invece di /output 2026-01-24 18:41:11 +01:00
b174e66c8b Corregge encoding README.md (caratteri accentati) 2026-01-24 18:02:57 +01:00
3394113ea0 Aggiunge sensor landscape e tenta fix audio mobile (WIP)
- Cambia orientamento da landscape a sensorLandscape (rotazione 180°)
- Aggiorna Java 17 -> 21 per plugin TTS
- Aggiunge @capacitor-community/text-to-speech per audio nativo
- Implementa fallback Web API su desktop, plugin nativo su mobile
- Corregge lang 'it_IT' -> 'it-IT', aggiunge log debug

Nota: audio mobile ancora non funziona, richiede debug
2026-01-24 16:29:11 +01:00
1f71846e23 Ottimizza layout mobile e setup icone APK Android
- Forza orientamento landscape e blocca scroll su mobile
- Aggiunge media queries responsive per schermi <768px
- Usa 100dvh e position:fixed per layout fullscreen
- Crea setup-android-icons.sh per generazione automatica icone Android
- Configura Capacitor per landscape, disabilita splash screen
- Refactoring Dockerfile con ImageMagick per icone multi-densità
2026-01-24 16:29:11 +01:00
9346117603 Aggiunge integrazione Capacitor per build APK Android 2026-01-24 16:29:11 +01:00
2e956aef75 Aggiorna README.md 2026-01-24 10:10:00 +01:00
61 changed files with 4316 additions and 11848 deletions

23
.gitignore vendored
View File

@@ -11,7 +11,8 @@ lerna-debug.log*
currentCommit.txt currentCommit.txt
node_modules node_modules
dist dist/*
!dist/android/
dist-ssr dist-ssr
*.local *.local
@@ -26,15 +27,13 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
# Playwright # Capacitor
/test-results/ android/
/playwright-report/ ios/
/blob-report/ .capacitor/
/playwright/.cache/
/playwright/.auth/
# Vitest # Build output
coverage/ output/
*.apk
# Database SQLite !dist/android/*.apk
data/ *.aab

View File

@@ -1,282 +0,0 @@
# 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

View File

@@ -1,18 +1,83 @@
FROM node:20-alpine AS builder # Dockerfile per build APK Android con Capacitor
FROM ubuntu:22.04
WORKDIR /usr/src/app # Evita prompt interattivi
# Copia tutto ENV DEBIAN_FRONTEND=noninteractive
# Installa dipendenze base
RUN apt-get update && apt-get install -y \
curl \
git \
unzip \
wget \
openjdk-21-jdk \
build-essential \
imagemagick \
&& rm -rf /var/lib/apt/lists/*
# Installa Node.js 20.x (LTS)
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
&& apt-get install -y nodejs
# Installa Gradle 8.5
ENV GRADLE_VERSION=8.5
RUN wget https://services.gradle.org/distributions/gradle-${GRADLE_VERSION}-bin.zip -P /tmp \
&& unzip -d /opt/gradle /tmp/gradle-${GRADLE_VERSION}-bin.zip \
&& ln -s /opt/gradle/gradle-${GRADLE_VERSION}/bin/gradle /usr/bin/gradle \
&& rm /tmp/gradle-${GRADLE_VERSION}-bin.zip
# Installa Android SDK
ENV ANDROID_SDK_ROOT=/opt/android-sdk
ENV ANDROID_HOME=${ANDROID_SDK_ROOT}
ENV PATH=${PATH}:${ANDROID_SDK_ROOT}/cmdline-tools/latest/bin:${ANDROID_SDK_ROOT}/platform-tools
RUN mkdir -p ${ANDROID_SDK_ROOT}/cmdline-tools \
&& wget https://dl.google.com/android/repository/commandlinetools-linux-9477386_latest.zip -P /tmp \
&& unzip -d ${ANDROID_SDK_ROOT}/cmdline-tools /tmp/commandlinetools-linux-9477386_latest.zip \
&& mv ${ANDROID_SDK_ROOT}/cmdline-tools/cmdline-tools ${ANDROID_SDK_ROOT}/cmdline-tools/latest \
&& rm /tmp/commandlinetools-linux-9477386_latest.zip
# Accetta licenze Android SDK
RUN yes | sdkmanager --licenses || true
# Installa componenti Android necessari
RUN sdkmanager "platform-tools" \
"platforms;android-34" \
"build-tools;34.0.0" \
"extras;google;google_play_services" \
"extras;android;m2repository" \
"extras;google;m2repository"
# Imposta JAVA_HOME in base all'architettura
RUN ARCH=$(dpkg --print-architecture) && \
echo "export JAVA_HOME=/usr/lib/jvm/java-21-openjdk-${ARCH}" >> /etc/profile && \
ln -sf /usr/lib/jvm/java-21-openjdk-${ARCH} /usr/lib/jvm/default-java
ENV JAVA_HOME=/usr/lib/jvm/default-java
# Directory di lavoro
WORKDIR /app
# Copia package files per cache layer
COPY package*.json ./
# Installa dipendenze npm
RUN npm ci --legacy-peer-deps || npm install --legacy-peer-deps
# Copia il resto del progetto
COPY . . COPY . .
# Aggiunge GIT ma serve solo se si vuole evidenziare un hash del commit # Build script
RUN apk add git CMD ["bash", "-c", "\
npm install --legacy-peer-deps && \
# aggiunge l'ultima versione di node npm run build && \
RUN npm install -g npm@latest npx cap add android && \
# Installa tutte le dipendenze del progetto npx cap sync && \
RUN npm install sed -i 's/android:configChanges=\"\\([^\"]*\\)\"/android:configChanges=\"\\1\" android:screenOrientation=\"sensorLandscape\"/g' android/app/src/main/AndroidManifest.xml && \
bash setup-android-icons.sh && \
# Qui fa partire il comando... cd android && ./gradlew assembleDebug --no-daemon && \
# Per adesso è dev perchè non ho capito bene il tutto... (Attilio) mkdir -p /app/dist/android && \
CMD ["npm", "run", "serve"] cp app/build/outputs/apk/debug/app-debug.apk /app/dist/android/segnapunti-debug.apk && \
echo '' && \
echo 'APK generato: /app/dist/android/segnapunti-debug.apk'\
"]

521
README.md
View File

@@ -1,208 +1,437 @@
# Segnapunti Anto # Segnapunti - Anto
Applicazione web **Progressive Web App (PWA)** per tracciare i punteggi di partite di pallavolo in tempo reale. Un'applicazione web segnapunti per pallavolo con funzionalità di sintesi vocale, modalità formazione e supporto PWA (Progressive Web App).
--- ## Cos'è
## Panoramica Segnapunti è un'applicazione standalone per tenere il punteggio durante le partite di pallavolo. L'applicazione è ottimizzata per dispositivi mobili in modalità landscape (orizzontale) e può essere installata come app nativa grazie al supporto PWA.
**Segnapunti Anto** e un'applicazione digitale per il tracciamento del punteggio durante partite di pallavolo, ottimizzata per tablet e smartphone. ### Caratteristiche principali
L'app e composta da due interfacce: - **Segnapunti digitale**: Visualizzazione chiara del punteggio per le due squadre (Home e Guest)
- **Display** (tabellone pubblico) - **Contatore set**: Traccia i set vinti da ciascuna squadra (fino a 3 set)
- **Controller** (pannello operatore) - **Indicatore battuta**: Mostra quale squadra ha il servizio
- **Modalità formazione**: Visualizza la rotazione dei giocatori in campo (posizioni 1-6)
- **Sintesi vocale**: Annuncia il punteggio in italiano
- **PWA**: Installabile come app standalone con funzionamento offline
- **Controllo da tastiera**: Scorciatoie per gestire rapidamente il punteggio
- **No Sleep**: Impedisce allo schermo di spegnersi durante l'uso
- **Fullscreen automatico**: Su dispositivi mobili si avvia a schermo intero
Le due interfacce condividono lo stato in tempo reale tramite WebSocket. ## Come funziona
### Funzionalita Principali ### Interfaccia
- **Gestione partita in tempo reale** L'applicazione divide lo schermo in due metà:
- Tracciamento punti home/guest
- Gestione set
- Indicatore servizio
- Storico punti (striscia)
- Blocchi logici quando il set e gia vinto
- **Regole pallavolo integrate** - **Metà sinistra (gialla su sfondo nero)**: Squadra Home - Antoniana
- Set normali: vittoria a 25 con almeno 2 punti di scarto - **Metà destra (bianca su sfondo blu)**: Squadra Guest
- Set decisivo: vittoria a 15 con almeno 2 punti di scarto
- Modalita partita `2/3` o `3/5`
- **Formazioni e cambi** #### Visualizzazioni
- Gestione formazione a 6 giocatori
- Rotazione automatica al cambio palla
- Dialog cambi con validazioni (`IN -> OUT`)
- **Controlli e personalizzazione** 1. **Modalità Punteggio** (default):
- Configurazione nomi squadre - Mostra il punteggio corrente in caratteri molto grandi
- Toggle ordine squadre (inverti) - Cliccando sul punteggio si incrementa di 1
- Toggle visualizzazione punteggio/formazioni - Cliccando sul nome della squadra si decrementa di 1
- Toggle striscia storico
- Sintesi vocale punteggio (Web Speech API)
--- 2. **Modalità Formazione**:
- Mostra le posizioni dei giocatori in campo (1-6)
- La formazione ruota automaticamente quando si incrementa il punteggio
- L'ordine visualizzato è: [3, 2, 1, 4, 5, 0] (ordine inverso rispetto alla rotazione standard)
## Requisiti #### Funzionalità
### Requisiti di Sistema - **Reset**: Azzera punteggio e formazioni, mantiene i nomi delle squadre
- **Cambio servizio**: Toggle manuale del servizio tra le squadre
- **Configurazione nomi**: Dialog per modificare i nomi delle squadre
- **Sintesi vocale**:
- Pronuncia il punteggio in italiano
- Se 0-0 dice "zero a zero"
- Se pari dice "[punteggio] pari"
- Altrimenti annuncia prima il punteggio della squadra al servizio
- **Incremento set**: Click sul contatore set per aumentarlo (si azzera dopo 2)
#### Per Sviluppo ### Controlli da tastiera
- **Sistema Operativo**: Linux, macOS, Windows
- **Node.js**: `>= 18.19.0` (consigliato `20 LTS`)
- **npm**: `>= 9`
- **RAM**: minimo 2GB (consigliato 4GB)
#### Per Esecuzione Test E2E - **Ctrl + M**: Apri dialog configurazione nomi
- Browser Playwright installati (`chromium`, `firefox`) - **Ctrl + B**: Mostra/nascondi barra pulsanti in basso
- Su Linux, eventuali dipendenze sistema per browser headless - **Ctrl + F**: Attiva modalità fullscreen
- **Ctrl + S**: Pronuncia il punteggio
- **Ctrl + Z**: Alterna tra modalità punteggio e formazione
- **Ctrl + ↑**: Incrementa punteggio Home
- **Ctrl + ↓**: Decrementa punteggio Home
- **Ctrl + →**: Incrementa set Home
- **Shift + ↑**: Incrementa punteggio Guest
- **Shift + ↓**: Decrementa punteggio Guest
- **Shift + →**: Incrementa set Guest
- **Ctrl + ←**: Cambia servizio
Comandi utili: ### Comportamento su mobile
```bash Su dispositivi mobili l'applicazione:
node -v 1. Attiva automaticamente NoSleep per impedire lo spegnimento dello schermo
npm -v 2. Si avvia in modalità fullscreen
npx playwright install chromium firefox 3. Esegue un test di sintesi vocale al caricamento
# Linux, se necessario: 4. Mostra il pulsante "Esci" per chiudere l'app
# npx playwright install --with-deps chromium firefox
```
### Requisiti Browser (Utente Finale) ## Stack tecnologico
| Requisito | Dettaglio | Necessita | ### Framework e librerie
|-----------|-----------|-----------|
| 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 - **Vue 3** (^3.2.47): Framework JavaScript progressivo per l'interfaccia utente
- **Vite** (^4.3.9): Build tool moderno e veloce
- **Wave UI** (^3.3.0): Libreria di componenti UI per Vue
- **NoSleep.js** (^0.12.0): Previene lo spegnimento automatico dello schermo
- **vite-plugin-pwa** (^0.16.0): Plugin per generare la PWA
| Browser | Supporto | Note | ### API Web utilizzate
|---------|----------|------|
| Chrome/Chromium | ✅ | Completo |
| Firefox | ✅ | Completo |
| Mobile Chrome (Playwright Pixel 5) | ✅ | Copertura E2E mobile |
--- - **Web Speech API**: Per la sintesi vocale (Text-to-Speech)
- **Fullscreen API**: Per la modalità schermo intero
- **Service Worker**: Per il funzionamento offline (PWA)
## Installazione e Setup ## Come svilupparlo
### Prerequisiti ### Prerequisiti
- Node.js `>= 18.19.0` - **Node.js** (versione 14 o superiore, raccomandata v20.2.0)
- npm `>= 9` - **npm** o **yarn**
### Installazione ### Installazione
1. Clona il repository:
2. Installa le dipendenze:
```bash ```bash
git clone https://santantonio.sytes.net/attilio/segnapunti.git
cd segnapunti
npm install npm install
``` ```
--- ### Comandi di sviluppo
## Comandi per Sviluppo #### Avviare il server di sviluppo
```bash
npm run dev
```
Questo comando avvia Vite in modalità development. L'applicazione sarà disponibile su `http://localhost:5173` (o altra porta se già occupata).
### Dev Server #### Build per produzione
```bash
npm run build
```
Genera i file ottimizzati per la produzione nella cartella `dist/`. Include:
- Minificazione del codice
- Tree-shaking per rimuovere codice non utilizzato
- Generazione del Service Worker per la PWA
- Generazione del manifest per l'installazione
Avvia il server di sviluppo Vite: #### Anteprima build di produzione
```bash
npm run preview
```
Avvia un server locale per testare la build di produzione.
La configurazione PWA si trova in [vite.config.js](vite.config.js:10-32):
- **Display**: fullscreen
- **Orientamento**: landscape (orizzontale)
- **Colore tema**: bianco
- **Base path**: `/segnap` in produzione, `/` in sviluppo
### Modifiche comuni
#### Cambiare i colori delle squadre
Modifica il file [src/style.css](src/style.css:101-108):
```css
.home {
background-color: black;
color: yellow;
}
.guest {
background-color: blue;
color: white;
}
```
#### Modificare i nomi predefiniti
Nel file [src/components/HomePage.vue](src/components/HomePage.vue:20), modifica:
```javascript
nomi: { home: "Antoniana", guest: "Guest" }
```
#### Cambiare la voce della sintesi vocale
Nel file [src/components/HomePage.vue](src/components/HomePage.vue:104), modifica:
```javascript
msg.voice = voices.find(voice => voice.name === 'Google italiano');
```
#### Modificare l'ordine di visualizzazione delle formazioni
Nel template del componente [src/components/HomePage.vue](src/components/HomePage.vue:181), l'ordine di visualizzazione delle posizioni è controllato dall'array nell'attributo `v-for`. La sequenza `[3, 2, 1, 4, 5, 0]` rappresenta l'ordine in cui vengono mostrate le posizioni dei giocatori sulla griglia 2x3 del campo.
Per modificare l'ordine di visualizzazione, modifica questo array:
```vue
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
{{ sp.form.home[x] }}
</div>
```
L'ordine attuale mostra le posizioni in questo schema:
```
3 2 1
4 5 0
```
Dove 0 corrisponde alla posizione 1 nel pallavolo, 1 alla posizione 2, e così via.
## Testing e Deploy
### Testing su dispositivi mobili
Per testare l'applicazione su dispositivi mobili nella stessa rete locale:
1. Avvia il server di sviluppo:
```bash ```bash
npm run dev npm run dev
``` ```
Accesso tipico in sviluppo: 2. Vite mostrerà l'indirizzo locale e di rete. Se non viene mostrato, trova l'indirizzo IP del tuo computer:
- `http://localhost:5173/` -> Display ```bash
- `http://localhost:5173/controller.html` -> Controller # Su Linux/Mac
hostname -I
# oppure
ifconfig | grep "inet "
### Modalita Sviluppo # Su Windows
- Hot reload attivo ipconfig
- Build veloce lato Vite ```
- Buona per sviluppo UI/UX
--- 3. Dal dispositivo mobile, connesso alla stessa rete Wi-Fi, naviga su:
```
http://[tuo-ip]:5173
```
## Comandi per Build 4. Accetta eventuali permessi richiesti dal browser per:
- Modalità fullscreen
- Sintesi vocale
- Wake Lock (prevenzione spegnimento schermo)
### Build Produzione ### Build e Deploy
#### Build per produzione
Genera i file ottimizzati per la produzione:
```bash ```bash
npm run build npm run build
``` ```
Output: Questo comando crea una cartella `dist/` contenente:
- cartella `dist/` - HTML, CSS e JavaScript minificati
- asset ottimizzati - Service Worker per il funzionamento offline
- file PWA (manifest + service worker) - Manifest PWA per l'installazione come app
- Asset ottimizzati
### Avvio Server Applicativo Locale (Display + Controller) #### Anteprima della build
```bash
npm run serve
```
Espone:
- `http://localhost:3000` -> Display
- `http://localhost:3001` -> Controller
### Altri comandi utili
Prima del deploy, puoi testare la build in locale:
```bash ```bash
npm run preview npm run preview
npm run start
``` ```
--- #### Deploy su GitHub Pages
## Configurazione PWA 1. Nel file [vite.config.js](vite.config.js:7), verifica che il `base` path corrisponda al nome del repository:
```javascript
L'app usa `vite-plugin-pwa` (vedi `vite.config.js`) con: base: process.env.NODE_ENV === 'production' ? '/nome-repository' : '/',
- `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:
2. Esegui la build:
```bash ```bash
npm run test:all npm run build
npm run test:e2e
``` ```
Guida completa test: 3. Publica il contenuto della cartella `dist/` su GitHub Pages usando uno di questi metodi:
- `tests/README.md` - Manualmente tramite l'interfaccia GitHub
- Usando `gh-pages`:
```bash
npm install -D gh-pages
npx gh-pages -d dist
```
- Tramite GitHub Actions (configurando un workflow)
#### Deploy su server web
Il contenuto della cartella `dist/` può essere servito da qualsiasi server web statico:
**Nginx:**
```nginx
server {
listen 80;
server_name tuo-dominio.com;
root /percorso/a/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
```
**Apache (.htaccess):**
```apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
```
#### Installazione come PWA
Dopo il deploy, gli utenti possono installare l'app:
**Su Android/Chrome:**
1. Visita il sito
2. Tocca il menu (⋮) > "Aggiungi a schermata Home"
3. L'app si avvierà in modalità fullscreen standalone
**Su iOS/Safari:**
1. Visita il sito
2. Tocca il pulsante Condividi
3. Seleziona "Aggiungi a Home"
## Dettagli tecnici
### Architettura del componente
L'applicazione è strutturata come Single Page Application (SPA) con un unico componente principale `HomePage`. Questo design semplice è ideale per un'app focalizzata su un'unica funzionalità.
### Gestione dello stato
Lo stato dell'applicazione è gestito localmente nel componente tramite `data()`:
- `punt`: punteggio corrente delle due squadre
- `set`: numero di set vinti
- `servHome`: boolean che indica quale squadra ha il servizio
- `form`: array con le posizioni dei giocatori (1-6)
- `nomi`: nomi personalizzabili delle squadre
- `visuForm`: toggle tra visualizzazione punteggio/formazione
- `visuButt`: visibilità della barra dei pulsanti
### Gestione della rotazione
La rotazione dei giocatori segue le regole del pallavolo:
**Incremento punteggio** ([HomePage.vue:74-78](src/components/HomePage.vue:74-78)):
```javascript
incPunt(team) {
this.sp.punt[team]++;
this.sp.servHome = (team == "home");
this.sp.form[team].push(this.sp.form[team].shift());
}
```
- Il servizio passa alla squadra che ha segnato
- La rotazione avviene con `push(shift())`: il primo elemento va in fondo
- Simula la rotazione oraria dei giocatori
**Decremento punteggio** ([HomePage.vue:79-85](src/components/HomePage.vue:79-85)):
```javascript
decPunt(team) {
if (this.sp.punt[team] > 0) {
this.sp.punt[team]--;
this.sp.form[team].unshift(this.sp.form[team].pop());
}
}
```
- La rotazione inversa avviene con `unshift(pop())`: l'ultimo elemento va all'inizio
- Permette di annullare errori di punteggio
### Sintesi vocale
La funzione `speak()` ([HomePage.vue:86-112](src/components/HomePage.vue:86-112)) utilizza la Web Speech API:
```javascript
const msg = new SpeechSynthesisUtterance();
msg.lang = 'it_IT';
msg.voice = voices.find(voice => voice.name === 'Google italiano');
```
Logica di annuncio:
- "zero a zero" se il punteggio è 0-0
- "[numero] pari" se il punteggio è uguale
- "[servizio] a [ricezione]" annunciando prima chi ha il servizio
### Prevenzione spegnimento schermo
NoSleep.js ([HomePage.vue:32-33](src/components/HomePage.vue:32-33)) viene attivato al mount su dispositivi mobili:
```javascript
var noSleep = new NoSleep();
noSleep.enable();
```
Questo impedisce allo schermo di spegnersi durante le partite, funzionalità essenziale per un segnapunti.
### Controlli da tastiera
Gli eventi tastiera sono gestiti tramite listener globale ([HomePage.vue:121-150](src/components/HomePage.vue:121-150)):
```javascript
window.addEventListener("keydown", this.funzioneTastiSpeciali);
```
I listener vengono temporaneamente disabilitati quando si aprono dialog per permettere l'inserimento di testo.
### Progressive Web App
La configurazione PWA in [vite.config.js](vite.config.js:10-33) definisce:
- **Manifest**: metadati dell'app (nome, icone, orientamento)
- **Service Worker**: strategia di cache per funzionamento offline
- **Display mode**: fullscreen per esperienza app-like
- **Orientamento forzato**: landscape per massimizzare spazio visibile
## Setup IDE raccomandato
- [VS Code](https://code.visualstudio.com/) - Editor consigliato
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Supporto Vue 3 (disabilita Vetur se installato)
- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) - IntelliSense migliorato
### Estensioni VS Code utili
File [.vscode/extensions.json](.vscode/extensions.json) suggerisce:
- Vue Language Features (Volar)
- TypeScript Vue Plugin
## Risoluzione problemi comuni
### La sintesi vocale non funziona
- Verifica che il browser supporti la Web Speech API (Chrome/Edge consigliati)
- Su alcuni browser è necessaria l'interazione utente prima di utilizzare la sintesi vocale
- Controlla che la voce "Google italiano" sia disponibile nel sistema
### L'app non si installa come PWA
- Verifica che il sito sia servito tramite HTTPS (richiesto per Service Workers)
- Controlla che le icone in `public/` siano presenti e accessibili
- Ispeziona la console del browser per errori del Service Worker
### Lo schermo si spegne comunque
- NoSleep.js richiede un'interazione utente per attivarsi
- Su iOS, la prevenzione dello spegnimento ha limitazioni del sistema operativo
- Verifica che non ci siano impostazioni di risparmio energetico aggressive
### La rotazione non funziona correttamente
- Le formazioni si azzerano con il RESET
- Verifica che gli array `form` abbiano sempre 6 elementi
- La visualizzazione può essere invertita ma la logica di rotazione rimane corretta
## Licenza
Progetto privato. Tutti i diritti riservati.

41
build-apk.sh Executable file
View File

@@ -0,0 +1,41 @@
#!/bin/bash
set -e
echo "========================================="
echo " Building APK for Segnapunti Android "
echo "========================================="
echo ""
# Rileva architettura
ARCH=$(uname -m)
echo "Architettura rilevata: $ARCH"
# Crea directory dist/android se non esiste
mkdir -p dist/android
echo "Building Docker image..."
docker build --platform linux/$(uname -m) -t segnapunti-android-builder .
echo ""
echo "Building APK inside Docker container..."
docker run --rm \
-v "$(pwd)/dist:/app/dist" \
segnapunti-android-builder
echo ""
echo "Fixing permissions on dist folder..."
sudo chown -R $USER:$USER dist
echo ""
echo "========================================="
echo "Build completed successfully!"
echo "========================================="
echo ""
echo "APK location: $(pwd)/dist/android/segnapunti-debug.apk"
echo ""
echo "Per installare su dispositivo Android:"
echo " adb install dist/android/segnapunti-debug.apk"
echo ""
echo "Oppure trasferisci il file sul dispositivo"
echo "e installalo manualmente."
echo ""

21
capacitor.config.json Normal file
View File

@@ -0,0 +1,21 @@
{
"appId": "com.antoniana.segnapunti",
"appName": "Segnapunti",
"webDir": "dist",
"bundledWebRuntime": false,
"server": {
"androidScheme": "https"
},
"android": {
"allowMixedContent": true,
"webContentsDebuggingEnabled": true
},
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"preferences": {
"orientation": "landscape"
}
}

View File

@@ -1,13 +0,0 @@
<!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>

View File

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

42
generate-icons.sh Executable file
View File

@@ -0,0 +1,42 @@
#!/bin/bash
# Script per generare automaticamente le icone Android da segnap-512x512.png
SOURCE="./public/segnap-512x512.png"
BASE_DIR="./android/app/src/main/res"
# Verifica che ImageMagick sia installato
if ! command -v convert &> /dev/null; then
echo "Errore: ImageMagick non è installato."
echo "Installa con: sudo apt-get install imagemagick"
exit 1
fi
# Verifica che il file sorgente esista
if [ ! -f "$SOURCE" ]; then
echo "Errore: File sorgente $SOURCE non trovato"
exit 1
fi
# Verifica che la directory android esista
if [ ! -d "./android" ]; then
echo "Errore: Directory android/ non trovata."
echo "Esegui prima: npx cap add android"
exit 1
fi
echo "Generazione icone Android da $SOURCE..."
# Crea le directory se non esistono e genera le icone
for size in "mdpi:48" "hdpi:72" "xhdpi:96" "xxhdpi:144" "xxxhdpi:192"; do
density="${size%:*}"
pixels="${size#*:}"
dir="$BASE_DIR/mipmap-$density"
mkdir -p "$dir"
convert "$SOURCE" -resize ${pixels}x${pixels} "$dir/ic_launcher.png"
echo " ✓ Creata icona $density (${pixels}x${pixels})"
done
echo "Icone generate con successo!"
echo ""
echo "Prossimo passo: npx cap sync"

View File

@@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>Segnapunti - Anto</title> <title>Segnapunti - Anto</title>
</head> </head>
<body> <body>

7956
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -6,39 +6,25 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "node server.js", "preview": "vite preview",
"start": "node server.js", "cap:sync": "npm run build && cap sync",
"serve": "vite build && node server.js", "cap:open": "cap open android",
"test": "vitest", "android:build:debug": "cd android && ./gradlew assembleDebug",
"test:unit": "vitest run tests/unit tests/integration", "docker:build": "./build-apk.sh"
"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": { "dependencies": {
"better-sqlite3": "^12.6.2", "@capacitor-community/text-to-speech": "^6.0.0",
"express": "^5.2.1", "@capacitor/android": "^6.2.0",
"vue": "^3.2.47", "@capacitor/app": "^6.0.1",
"vue-router": "^4.6.4", "@capacitor/core": "^6.2.0",
"wave-ui": "^3.3.0", "nosleep.js": "^0.12.0",
"ws": "^8.19.0" "vue": "^3.4.38",
"wave-ui": "^3.17.0"
}, },
"devDependencies": { "devDependencies": {
"@axe-core/playwright": "^4.11.1", "@capacitor/cli": "^6.2.0",
"@playwright/test": "^1.58.2", "@vitejs/plugin-vue": "^5.1.4",
"@types/node": "^25.2.3", "vite": "^5.4.10",
"@vitejs/plugin-vue": "^4.1.0", "vite-plugin-pwa": "^0.20.5"
"@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",
"vitest": "^4.0.18"
} }
} }

View File

@@ -1,38 +0,0 @@
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,
},
});

View File

@@ -1,76 +0,0 @@
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,
},
});

View File

@@ -1,98 +0,0 @@
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'
import { getPartite, getPartita } from './src/db.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')))
// API REST per le partite salvate.
displayApp.get('/api/partite', (_req, res) => {
try { res.json(getPartite()) }
catch (err) { res.status(500).json({ error: err.message }) }
})
displayApp.get('/api/partite/:id', (req, res) => {
try {
const p = getPartita(Number(req.params.id))
if (!p) return res.status(404).json({ error: 'Not found' })
res.json(p)
} catch (err) { res.status(500).json({ error: err.message }) }
})
// 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)
})

40
setup-android-icons.sh Normal file
View File

@@ -0,0 +1,40 @@
#!/bin/bash
set -e
echo "Configurazione icone Android..."
# Rimuove icone default di Capacitor
rm -rf android/app/src/main/res/mipmap-*
# Crea directory per tutte le densità
for density in mdpi hdpi xhdpi xxhdpi xxxhdpi; do
mkdir -p android/app/src/main/res/mipmap-$density
done
# Mappa densità -> dimensioni
declare -A sizes=(
["mdpi"]="48"
["hdpi"]="72"
["xhdpi"]="96"
["xxhdpi"]="144"
["xxxhdpi"]="192"
)
# Genera icone per ogni densità
for density in "${!sizes[@]}"; do
size="${sizes[$density]}"
echo " Generando icone ${size}x${size} per $density..."
convert public/segnap-512x512.png -resize ${size}x${size} \
android/app/src/main/res/mipmap-$density/ic_launcher.png
convert public/segnap-512x512.png -resize ${size}x${size} \
android/app/src/main/res/mipmap-$density/ic_launcher_round.png
done
# Icona per il file APK (visibile da PC)
mkdir -p android/app/src/main/res/drawable
convert public/segnap-512x512.png -resize 512x512 \
android/app/src/main/res/drawable/icon.png
echo "Icone configurate con successo!"

View File

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

File diff suppressed because it is too large Load Diff

View File

@@ -1,485 +0,0 @@
<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>
<!-- Overlay fine partita -->
<div class="partita-finita-overlay" v-if="state.sp.partitaFinita">
<div class="partita-finita-box">
<div class="partita-finita-label">PARTITA FINITA</div>
<div class="partita-finita-vincitore">{{ state.sp.nomi[state.sp.partitaFinita.vincitore] }}</div>
<div class="partita-finita-set">{{ state.sp.set.home }} {{ state.sp.set.guest }}</div>
</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: {
strisce: [],
setFinito: null,
partitaFinita: null,
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;
}
/* Fine partita */
.partita-finita-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
display: flex;
align-items: center;
justify-content: center;
z-index: 500;
}
.partita-finita-box {
text-align: center;
color: #fff;
}
.partita-finita-label {
font-size: 5vw;
font-weight: 700;
letter-spacing: 0.1em;
color: #aaa;
margin-bottom: 0.3em;
}
.partita-finita-vincitore {
font-size: 14vw;
font-weight: 900;
color: #fdd835;
text-transform: uppercase;
line-height: 1;
margin-bottom: 0.2em;
}
.partita-finita-set {
font-size: 8vw;
font-weight: 700;
}
</style>

264
src/components/HomePage.vue Normal file
View File

@@ -0,0 +1,264 @@
<script>
import NoSleep from "nosleep.js";
import { Capacitor } from '@capacitor/core';
import { App } from '@capacitor/app';
import { TextToSpeech } from '@capacitor-community/text-to-speech';
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() {
// Carica le voci (necessario su alcuni browser)
this.voices = window.speechSynthesis.getVoices();
// Ascolta l'evento voiceschanged per Android/Chrome
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = () => {
this.voices = window.speechSynthesis.getVoices();
};
}
if (this.isMobile()) {
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());
}
},
async speak() {
// Prepara il testo da pronunciare
let text = "";
if (this.sp.punt.home + this.sp.punt.guest == 0) {
text = "zero a zero";
} else if (this.sp.punt.home == this.sp.punt.guest) {
text = this.sp.punt.home + " pari";
} else {
if (this.sp.servHome) {
text = this.sp.punt.home + " a " + this.sp.punt.guest;
} else {
text = this.sp.punt.guest + " a " + this.sp.punt.home;
}
}
console.log('Speak called, text:', text);
console.log('Is native platform:', Capacitor.isNativePlatform());
// Usa plugin nativo su mobile, Web API su desktop
if (Capacitor.isNativePlatform()) {
try {
console.log('Using native TTS');
await TextToSpeech.speak({
text: text,
lang: 'it-IT',
rate: 0.9,
pitch: 1.0,
volume: 1.0,
category: 'ambient'
});
console.log('TTS completed successfully');
} catch (error) {
console.error('TTS error:', error);
this.$waveui.notify('Errore TTS: ' + error.message, 'error', 3000);
}
} else {
// Fallback Web API per desktop/browser
console.log('Using web API speechSynthesis');
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.volume = 1.0;
msg.rate = 0.9;
msg.pitch = 1.0;
msg.lang = 'it-IT';
const voices = window.speechSynthesis.getVoices();
const italianVoice = voices.find(voice =>
voice.lang.startsWith('it') || voice.name.includes('Italian') || voice.name.includes('italiano')
);
if (italianVoice) {
msg.voice = italianVoice;
}
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>

View File

@@ -0,0 +1,129 @@
<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>

View File

@@ -0,0 +1,178 @@
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 }
}
}
}

View File

@@ -0,0 +1,112 @@
.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;
}
}

View File

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

View File

@@ -1,9 +0,0 @@
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')

View File

@@ -1,62 +0,0 @@
import Database from 'better-sqlite3'
import { mkdirSync } from 'fs'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'
const __dirname = dirname(fileURLToPath(import.meta.url))
const DATA_DIR = join(__dirname, '..', 'data')
const DB_PATH = process.env.DB_PATH || join(DATA_DIR, 'partite.db')
mkdirSync(DATA_DIR, { recursive: true })
const db = new Database(DB_PATH)
db.pragma('journal_mode = WAL')
db.exec(`
CREATE TABLE IF NOT EXISTS partite (
id INTEGER PRIMARY KEY AUTOINCREMENT,
data TEXT NOT NULL,
modalita TEXT NOT NULL,
nome_home TEXT NOT NULL,
nome_guest TEXT NOT NULL,
set_home INTEGER NOT NULL,
set_guest INTEGER NOT NULL,
vincitore TEXT,
json TEXT NOT NULL
)
`)
const stmtInsert = db.prepare(`
INSERT INTO partite (data, modalita, nome_home, nome_guest, set_home, set_guest, vincitore, json)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
`)
export function salvaPartita(state) {
const payload = {
data: new Date().toISOString(),
modalita: state.modalitaPartita,
nomi: state.sp.nomi,
set: state.sp.set,
vincitore: state.sp.partitaFinita?.vincitore ?? null,
strisce: state.sp.strisce,
}
const { lastInsertRowid } = stmtInsert.run(
payload.data,
payload.modalita,
payload.nomi.home,
payload.nomi.guest,
payload.set.home,
payload.set.guest,
payload.vincitore,
JSON.stringify(payload)
)
return lastInsertRowid
}
export function getPartite() {
return db.prepare('SELECT * FROM partite ORDER BY id DESC').all()
}
export function getPartita(id) {
return db.prepare('SELECT * FROM partite WHERE id = ?').get(id)
}

View File

@@ -1,279 +0,0 @@
/**
* 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: {
strisce: [],
setFinito: null,
partitaFinita: null,
formInizioSet: {
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
},
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 checkVittoriaPartita(state) {
const setsToWin = state.modalitaPartita === "2/3" ? 2 : 3
if (state.sp.set.home >= setsToWin) return "home"
if (state.sp.set.guest >= setsToWin) return "guest"
return null
}
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 (s.sp.setFinito !== null || s.sp.partitaFinita !== null) 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"
if (checkVittoria(s)) {
s.sp.setFinito = { vincitore: team }
}
break
}
case "decPunt": {
if (s.sp.setFinito !== null) {
s.sp.setFinito = null
}
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 "confermaSet": {
if (!s.sp.setFinito) break
const vincitore = s.sp.setFinito.vincitore
s.sp.strisce.push({
set: s.sp.strisce.length + 1,
formInizio: {
home: [...s.sp.formInizioSet.home],
guest: [...s.sp.formInizioSet.guest],
},
home: [...s.sp.striscia.home],
guest: [...s.sp.striscia.guest],
vincitore,
punt: { ...s.sp.punt },
})
s.sp.formInizioSet = {
home: [...s.sp.form.home],
guest: [...s.sp.form.guest],
}
s.sp.set[vincitore]++
s.sp.punt.home = 0
s.sp.punt.guest = 0
s.sp.storicoServizio = []
s.sp.setFinito = null
const vincitorePartita = checkVittoriaPartita(s)
if (vincitorePartita) {
s.sp.partitaFinita = { vincitore: vincitorePartita }
} else {
s.sp.striscia = s.sp.servHome
? { home: [0], guest: [" "] }
: { home: [" "], guest: [0] }
}
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 = []
s.sp.strisce = []
s.sp.setFinito = null
s.sp.partitaFinita = null
s.sp.formInizioSet = {
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
}
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]
s.sp.formInizioSet[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
}

View File

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

View File

@@ -1,51 +0,0 @@
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, storicoPort = 3002) {
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}/`)
console.log(` Storico: http://127.0.0.1:${storicoPort}/`)
if (networkIPs.length > 0) {
console.log(`\n Controller da dispositivi remoti:`)
networkIPs.forEach(ip => {
console.log(` http://${ip}:${controllerPort}/`)
})
console.log(`\n Storico da dispositivi remoti:`)
networkIPs.forEach(ip => {
console.log(` http://${ip}:${storicoPort}/`)
})
}
console.log()
}

View File

@@ -1,17 +1,33 @@
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
touch-action: pan-x pan-y; touch-action: none;
height: 100% height: 100%;
width: 100%;
overflow: hidden;
}
html {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
} }
body { body {
overscroll-behavior-y: contain; overscroll-behavior: none;
margin: 0; margin: 0;
padding: 0;
place-items: center; place-items: center;
min-width: 320px;
width: 100%; width: 100%;
min-height: 100vh; height: 100vh;
height: 100dvh; /* Dynamic viewport height per mobile */
background-color: #000; background-color: #000;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
button { button {
@@ -38,8 +54,13 @@ button:focus-visible {
} }
#app { #app {
margin: 0 auto; margin: 0;
padding: 0;
text-align: center; text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
} }
.campo { .campo {
user-select: none; user-select: none;
@@ -53,24 +74,11 @@ button:focus-visible {
font-size: xx-large; font-size: xx-large;
} }
.hea span { .hea span {
/* Bordo di debug: border: 1px solid #f3fb00; */ /* border: 1px solid #f3fb00; */
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
border-radius: 5px; 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 { .tal {
text-align: left; text-align: left;
} }
@@ -93,23 +101,8 @@ button:focus-visible {
float: left; float: left;
width: 50%; width: 50%;
} }
.punteggio-container {
width: 100%;
height: 100%;
display: flex;
}
.punt { .punt {
font-size: 60vh; 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 { .form {
font-size: 5vh; font-size: 5vh;
@@ -135,145 +128,59 @@ button:focus-visible {
color: white color: white
} }
.striscia { .striscia {
position: fixed; position:fixed;
text-align: right;
bottom: 50px; bottom: 50px;
left: 10px;
right: 10px; right: 10px;
display: grid; margin-left: -10000px;
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 { .striscia .item {
width: 25px; width: 25px;
min-width: 25px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
flex-shrink: 0; display: inline-block;
border-radius: 5px;
}
.striscia .item:not(.item-vuoto) {
background-color: rgb(206, 247, 3); background-color: rgb(206, 247, 3);
color: blue; color: blue;
border-radius: 5px;
} }
.campo-config { /* Responsive mobile */
display: flex; @media (max-width: 768px) {
flex-direction: column; .hea {
align-items: center; font-size: 4vw;
} }
.campo-pallavolo { .hea span {
border: 3px solid #999; padding-left: 5px;
background-color: rgba(205, 133, 63, 0.25); padding-right: 5px;
position: relative; }
width: 220px;
height: 220px;
display: flex;
flex-direction: column;
padding: 0;
}
.fila-anteriore { .hea img {
height: 33.33%; width: 18px !important;
display: flex; }
align-items: center;
justify-content: center;
padding: 5px;
}
.fila-posteriore { .punt {
height: 66.67%; font-size: 45vh;
display: flex; }
align-items: center;
justify-content: center;
padding: 5px;
}
.linea-tre-metri { .form {
border-top: 2px solid #666; font-size: 4vh;
width: 100%; border-top: #fff dashed 15px;
height: 0; padding-top: 30px;
margin: 0; }
}
.cambi-rows { .formdiv {
display: flex; font-size: 15vh;
flex-direction: column; }
gap: 12px;
padding: 8px 0;
}
.cambi-dialog { .bot button {
padding: 8px 6px 2px; font-size: 0.7em;
} padding: 0.4em 0.8em;
margin-left: 3px;
margin-right: 3px;
}
.cambi-title { .bot img {
text-align: center; width: 20px !important;
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;
} }

View File

@@ -1,212 +0,0 @@
import { createInitialState, applyAction } from './gameState.js'
import { salvaPartita } from './db.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
}
// Salva su DB quando la partita appena finisce.
if (!previousState.sp.partitaFinita && gameState.sp.partitaFinita) {
try {
const id = salvaPartita(gameState)
console.log(`[DB] Partita salvata (id: ${id})`)
} catch (err) {
console.error('[DB] Errore salvataggio partita:', err)
}
}
// 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 || 'unregistered'
clients.delete(ws)
console.log(`[WebSocket] Client disconnected (role: ${role}, remaining: ${wss.clients.size})`)
}
/**
* 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'
console.log(`[WebSocket] New connection (total: ${wss.clients.size})`)
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,
}
}

View File

@@ -1,293 +0,0 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Storico Partite</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #111;
color: #e0e0e0;
font-family: 'Inter', system-ui, sans-serif;
min-height: 100vh;
padding: 24px 16px;
}
h1 {
text-align: center;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.1em;
color: #fdd835;
text-transform: uppercase;
margin-bottom: 24px;
}
#lista {
max-width: 700px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.card {
background: #1e1e1e;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
gap: 12px;
user-select: none;
}
.card-header:hover {
background: rgba(255,255,255,0.04);
}
.card-data {
font-size: 11px;
color: #777;
white-space: nowrap;
}
.card-teams {
flex: 1;
text-align: center;
}
.card-nomi {
font-size: 16px;
font-weight: 700;
}
.card-result {
font-size: 22px;
font-weight: 900;
letter-spacing: 0.05em;
margin-top: 2px;
}
.card-result .winner { color: #fdd835; }
.card-modalita {
font-size: 11px;
color: #777;
white-space: nowrap;
}
.card-arrow {
font-size: 18px;
color: #555;
transition: transform 0.2s;
}
.card.open .card-arrow { transform: rotate(180deg); }
.card-detail {
display: none;
border-top: 1px solid rgba(255,255,255,0.08);
padding: 16px 20px;
}
.card.open .card-detail { display: block; }
.set-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.set-table th {
text-align: left;
padding: 6px 8px;
font-size: 11px;
font-weight: 700;
color: #777;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.set-table td {
padding: 8px 8px;
vertical-align: top;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.set-table tr:last-child td { border-bottom: none; }
.set-num {
font-weight: 800;
color: #aaa;
width: 32px;
}
.set-vince {
font-weight: 700;
color: #fdd835;
}
.set-punt {
font-weight: 700;
font-size: 15px;
}
.form-grid {
display: inline-grid;
grid-template-columns: repeat(3, 28px);
grid-template-rows: repeat(2, 24px);
gap: 2px;
background: rgba(255,255,255,0.05);
border-radius: 6px;
padding: 4px;
}
.form-cell {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
background: rgba(255,255,255,0.08);
border-radius: 4px;
}
.form-label {
font-size: 11px;
color: #666;
margin-bottom: 4px;
}
.form-wrap {
display: flex;
flex-direction: column;
}
#vuoto {
text-align: center;
color: #555;
padding: 48px 16px;
font-size: 15px;
}
#errore {
text-align: center;
color: #ef5350;
padding: 24px;
}
</style>
</head>
<body>
<h1>Storico Partite</h1>
<div id="lista"></div>
<script>
function formatData(iso) {
const d = new Date(iso)
return d.toLocaleDateString('it-IT', { day: '2-digit', month: '2-digit', year: 'numeric' })
+ ' ' + d.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' })
}
// Layout campo: righe [fila attacco 3-2-1, fila difesa 4-5-0] → indici nell'array form
const LAYOUT = [3, 2, 1, 4, 5, 0]
function renderForm(form, label) {
const cells = LAYOUT.map(i => `<div class="form-cell">${form[i] ?? '?'}</div>`).join('')
return `<div class="form-wrap">
<div class="form-label">${label}</div>
<div class="form-grid">${cells}</div>
</div>`
}
function renderDettaglio(dati, nomiHome, nomiGuest) {
if (!dati.strisce || dati.strisce.length === 0) return '<p style="color:#555">Nessun set registrato.</p>'
const righe = dati.strisce.map(s => {
const vince = s.vincitore === 'home' ? nomiHome : nomiGuest
const formHome = s.formInizio?.home ?? []
const formGuest = s.formInizio?.guest ?? []
return `<tr>
<td class="set-num">${s.set}</td>
<td class="set-vince">${vince}</td>
<td class="set-punt">${s.punt.home} ${s.punt.guest}</td>
<td>${renderForm(formHome, nomiHome)}</td>
<td>${renderForm(formGuest, nomiGuest)}</td>
</tr>`
}).join('')
return `<table class="set-table">
<thead>
<tr>
<th>Set</th>
<th>Vincitore</th>
<th>Punteggio</th>
<th>Form Home</th>
<th>Form Guest</th>
</tr>
</thead>
<tbody>${righe}</tbody>
</table>`
}
function renderCard(p) {
const dati = JSON.parse(p.json)
const nomeHome = p.nome_home
const nomeGuest = p.nome_guest
const vincitoreNome = p.vincitore === 'home' ? nomeHome : nomeGuest
const homeWin = p.vincitore === 'home'
const resultHome = homeWin ? `<span class="winner">${p.set_home}</span>` : p.set_home
const resultGuest = homeWin ? p.set_guest : `<span class="winner">${p.set_guest}</span>`
const card = document.createElement('div')
card.className = 'card'
card.innerHTML = `
<div class="card-header">
<div class="card-data">${formatData(p.data)}</div>
<div class="card-teams">
<div class="card-nomi">${nomeHome} vs ${nomeGuest}</div>
<div class="card-result">${resultHome} ${resultGuest}</div>
</div>
<div class="card-modalita">${p.modalita}</div>
<div class="card-arrow">▾</div>
</div>
<div class="card-detail">
${renderDettaglio(dati, nomeHome, nomeGuest)}
</div>
`
card.querySelector('.card-header').addEventListener('click', () => {
card.classList.toggle('open')
})
return card
}
async function caricaPartite() {
const lista = document.getElementById('lista')
try {
const res = await fetch('/api/partite')
if (!res.ok) throw new Error(`HTTP ${res.status}`)
const partite = await res.json()
if (partite.length === 0) {
lista.innerHTML = '<div id="vuoto">Nessuna partita registrata.</div>'
return
}
partite.forEach(p => lista.appendChild(renderCard(p)))
} catch (err) {
lista.innerHTML = `<div id="errore">Errore caricamento: ${err.message}</div>`
}
}
caricaPartite()
</script>
</body>
</html>

View File

@@ -1,281 +0,0 @@
# 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.

View File

@@ -1,288 +0,0 @@
// @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')
})
})
// =============================================
// OVERLAY SET FINITO
// =============================================
describe('Overlay set finito', () => {
it('non mostra l\'overlay se setFinito è null', () => {
const wrapper = mountController()
expect(wrapper.find('.overlay').exists()).toBe(false)
})
it('mostra l\'overlay quando setFinito è impostato', async () => {
const wrapper = mountController()
wrapper.vm.state.sp.setFinito = { vincitore: 'home' }
await wrapper.vm.$nextTick()
expect(wrapper.find('.overlay').exists()).toBe(true)
})
it('l\'overlay mostra il nome del vincitore del set', async () => {
const wrapper = mountController()
wrapper.vm.state.sp.setFinito = { vincitore: 'home' }
await wrapper.vm.$nextTick()
expect(wrapper.find('.overlay').text()).toContain('Antoniana')
})
it('click su CONFERMA invia l\'azione confermaSet', async () => {
const wrapper = mountController()
wrapper.vm.state.sp.setFinito = { vincitore: 'guest' }
await wrapper.vm.$nextTick()
const spy = vi.spyOn(wrapper.vm, 'sendAction')
await wrapper.find('.btn-confirm').trigger('click')
expect(spy).toHaveBeenCalledWith({ type: 'confermaSet' })
})
})
})

View File

@@ -1,230 +0,0 @@
// @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')
})
})
// =============================================
// OVERLAY PARTITA FINITA
// =============================================
describe('Overlay partita finita', () => {
it('non mostra l\'overlay se partitaFinita è null', () => {
const wrapper = mountDisplay()
expect(wrapper.find('.partita-finita-overlay').exists()).toBe(false)
})
it('mostra l\'overlay quando partitaFinita è impostato', async () => {
const wrapper = mountDisplay()
wrapper.vm.state.sp.partitaFinita = { vincitore: 'home' }
await wrapper.vm.$nextTick()
expect(wrapper.find('.partita-finita-overlay').exists()).toBe(true)
})
it('l\'overlay mostra il nome del vincitore della partita', async () => {
const wrapper = mountDisplay()
wrapper.vm.state.sp.nomi = { home: 'Antoniana', guest: 'Rivali' }
wrapper.vm.state.sp.partitaFinita = { vincitore: 'guest' }
await wrapper.vm.$nextTick()
expect(wrapper.find('.partita-finita-overlay').text()).toContain('Rivali')
})
it('l\'overlay mostra il punteggio dei set', async () => {
const wrapper = mountDisplay()
wrapper.vm.state.sp.set = { home: 3, guest: 1 }
wrapper.vm.state.sp.partitaFinita = { vincitore: 'home' }
await wrapper.vm.$nextTick()
const text = wrapper.find('.partita-finita-overlay').text()
expect(text).toContain('3')
expect(text).toContain('1')
})
})
})

View File

@@ -1,72 +0,0 @@
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);
}
});
});

View File

@@ -1,119 +0,0 @@
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');
});
});

View File

@@ -1,131 +0,0 @@
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');
});
});

View File

@@ -1,182 +0,0 @@
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();
});
});

View File

@@ -1,69 +0,0 @@
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');
});
});

View File

@@ -1,86 +0,0 @@
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,
});
});
});

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

View File

@@ -1,478 +0,0 @@
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import { setupWebSocketHandler } from '../../src/websocket-handler.js'
import { EventEmitter } from 'events'
import { salvaPartita } from '../../src/db.js'
// Mock di db.js: evita connessioni reali al DB SQLite durante i test.
// vi.mock è automaticamente hoistato da Vitest all'inizio del file.
vi.mock('../../src/db.js', () => ({
salvaPartita: vi.fn().mockReturnValue(42n),
}))
// 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)
})
})
// =============================================
// SALVATAGGIO DB
// =============================================
describe('Salvataggio DB', () => {
// Helper: inietta uno stato con setFinito già impostato e N set vinti da home
function injectPreFinaleState(setHomeVinti, modalita = '3/5') {
const base = handler.getState()
handler.setState({
...base,
modalitaPartita: modalita,
sp: {
...base.sp,
set: { home: setHomeVinti, guest: 0 },
punt: { home: 25, guest: 0 },
setFinito: { vincitore: 'home' },
partitaFinita: null,
storicoServizio: [],
strisce: [],
striscia: { home: [0], guest: [" "] },
},
})
}
afterEach(() => {
vi.mocked(salvaPartita).mockClear()
})
it('salvaPartita viene chiamata quando confermaSet porta partitaFinita a non-null', () => {
// 3/5: servono 3 set → inietta 2 già vinti + setFinito, poi confermaSet
injectPreFinaleState(2, '3/5')
const controller = connectAndRegister(wss, 'controller')
controller.emit('message', JSON.stringify({ type: 'action', action: { type: 'confermaSet' } }))
expect(salvaPartita).toHaveBeenCalledTimes(1)
})
it('salvaPartita NON viene chiamata per azioni normali (incPunt)', () => {
const controller = connectAndRegister(wss, 'controller')
controller.emit('message', JSON.stringify({ type: 'action', action: { type: 'incPunt', team: 'home' } }))
expect(salvaPartita).not.toHaveBeenCalled()
})
it('salvaPartita NON viene chiamata se partitaFinita era già impostata', () => {
// Inietta stato con partitaFinita già presente
const base = handler.getState()
handler.setState({
...base,
sp: { ...base.sp, partitaFinita: { vincitore: 'home' } },
})
const controller = connectAndRegister(wss, 'controller')
// Qualsiasi azione non dovrebbe triggerare un secondo salvataggio
controller.emit('message', JSON.stringify({ type: 'action', action: { type: 'incPunt', team: 'home' } }))
expect(salvaPartita).not.toHaveBeenCalled()
})
it('se salvaPartita lancia un errore il broadcast avviene comunque', () => {
vi.mocked(salvaPartita).mockImplementationOnce(() => { throw new Error('DB error') })
injectPreFinaleState(2, '3/5')
const display = connectAndRegister(wss, 'display')
const controller = connectAndRegister(wss, 'controller')
display.send.mockClear()
controller.emit('message', JSON.stringify({ type: 'action', action: { type: 'confermaSet' } }))
// Il broadcast deve avvenire anche se il DB ha fallito
expect(display.send).toHaveBeenCalled()
const msg = lastSent(display)
expect(msg.type).toBe('state')
})
})
})

View File

@@ -1,118 +0,0 @@
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)
}
})
})

View File

@@ -1,145 +0,0 @@
import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest'
// Il modulo db.js apre il DB a livello di modulo (top-level).
// Per isolarlo usiamo un DB in memoria: vi.stubEnv + vi.resetModules + import dinamico.
let salvaPartita, getPartite, getPartita
beforeAll(async () => {
vi.stubEnv('DB_PATH', ':memory:')
vi.resetModules()
const mod = await import('../../src/db.js')
salvaPartita = mod.salvaPartita
getPartite = mod.getPartite
getPartita = mod.getPartita
})
afterAll(() => {
vi.unstubAllEnvs()
})
// Stato minimo valido da passare a salvaPartita
function makeState({ vincitore = 'home', setHome = 3, setGuest = 1, strisce = [] } = {}) {
return {
modalitaPartita: '3/5',
sp: {
nomi: { home: 'Antoniana', guest: 'Ospiti' },
set: { home: setHome, guest: setGuest },
partitaFinita: vincitore ? { vincitore } : null,
strisce,
},
}
}
describe('db.js', () => {
// =============================================
// salvaPartita
// =============================================
describe('salvaPartita', () => {
it('ritorna un ID numerico intero positivo', () => {
const id = salvaPartita(makeState())
expect(typeof id).toBe('number')
expect(id).toBeGreaterThan(0)
expect(Number.isInteger(id)).toBe(true)
})
it('IDs sono incrementali su inserimenti multipli', () => {
const id1 = salvaPartita(makeState())
const id2 = salvaPartita(makeState())
expect(id2).toBeGreaterThan(id1)
})
it('il record ha i campi corretti: modalita, nomi, set, vincitore', () => {
const state = makeState({ vincitore: 'guest', setHome: 1, setGuest: 3 })
const id = salvaPartita(state)
const row = getPartita(Number(id))
expect(row.modalita).toBe('3/5')
expect(row.nome_home).toBe('Antoniana')
expect(row.nome_guest).toBe('Ospiti')
expect(row.set_home).toBe(1)
expect(row.set_guest).toBe(3)
expect(row.vincitore).toBe('guest')
})
it('il campo json è una stringa JSON parsabile', () => {
const id = salvaPartita(makeState())
const row = getPartita(Number(id))
expect(() => JSON.parse(row.json)).not.toThrow()
})
it('il JSON contiene nomi, set, strisce, vincitore e data', () => {
const strisce = [{ set: 1, vincitore: 'home', punt: { home: 25, guest: 20 } }]
const state = makeState({ strisce })
const id = salvaPartita(state)
const row = getPartita(Number(id))
const json = JSON.parse(row.json)
expect(json.nomi).toEqual({ home: 'Antoniana', guest: 'Ospiti' })
expect(json.set).toEqual({ home: 3, guest: 1 })
expect(json.vincitore).toBe('home')
expect(json.strisce).toEqual(strisce)
expect(typeof json.data).toBe('string')
expect(() => new Date(json.data)).not.toThrow()
})
it('vincitore nel DB è null se partitaFinita è null', () => {
const state = makeState({ vincitore: null })
const id = salvaPartita(state)
const row = getPartita(Number(id))
expect(row.vincitore).toBeNull()
})
})
// =============================================
// getPartite
// =============================================
describe('getPartite', () => {
it('ritorna tutte le partite inserite', () => {
const prima = getPartite().length
salvaPartita(makeState())
salvaPartita(makeState())
const dopo = getPartite()
expect(dopo.length).toBe(prima + 2)
})
it('ordina per ID discendente (più recente prima)', () => {
const id1 = Number(salvaPartita(makeState()))
const id2 = Number(salvaPartita(makeState()))
const partite = getPartite()
const ids = partite.map(p => p.id)
const idx1 = ids.indexOf(id1)
const idx2 = ids.indexOf(id2)
// id2 (inserito dopo) deve apparire prima (indice minore)
expect(idx2).toBeLessThan(idx1)
})
})
// =============================================
// getPartita
// =============================================
describe('getPartita', () => {
it('ritorna undefined per ID inesistente', () => {
const result = getPartita(999999)
expect(result).toBeUndefined()
})
it('ritorna il record corretto per ID valido', () => {
const id = Number(salvaPartita(makeState({ vincitore: 'home', setHome: 3, setGuest: 0 })))
const row = getPartita(id)
expect(row).toBeDefined()
expect(row.id).toBe(id)
expect(row.set_home).toBe(3)
expect(row.set_guest).toBe(0)
})
it('il record ha tutti i campi attesi', () => {
const id = Number(salvaPartita(makeState()))
const row = getPartita(id)
const campi = ['id', 'data', 'modalita', 'nome_home', 'nome_guest', 'set_home', 'set_guest', 'vincitore', 'json']
for (const campo of campi) {
expect(row).toHaveProperty(campo)
}
})
})
})

View File

@@ -1,939 +0,0 @@
import { describe, it, expect, beforeEach } from 'vitest'
import { createInitialState, applyAction, checkVittoria, checkVittoriaPartita } 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] per home e [" "] per guest', () => {
// home serve per primo → home parte con [0], guest con [" "]
expect(state.sp.striscia.home).toEqual([0])
expect(state.sp.striscia.guest).toEqual([" "])
})
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' })
// Lo stato iniziale ha striscia = { home: [0], guest: [" "] }
expect(s.sp.striscia.home).toEqual([0, 1])
expect(s.sp.striscia.guest).toEqual([" ", " "])
})
it('dovrebbe aggiornare la striscia per punto Guest', () => {
const s = applyAction(state, { type: 'incPunt', team: 'guest' })
// Lo stato iniziale ha striscia = { home: [0], guest: [" "] }
expect(s.sp.striscia.guest).toEqual([" ", 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 (setFinito impostato)', () => {
// Il guard controlla setFinito: va impostato come farebbe il ciclo di gioco reale
state.sp.punt.home = 25
state.sp.punt.guest = 23
state.sp.setFinito = { vincitore: 'home' }
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: [" ", " ", " ", 1] }
const s = applyAction(state, { type: 'resetta' })
// servHome è true di default → home parte con [0], guest con [" "]
expect(s.sp.striscia.home).toEqual([0])
expect(s.sp.striscia.guest).toEqual([" "])
})
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)
})
})
// =============================================
// FORMAZIONEINIZIOSET
// =============================================
describe('formInizioSet', () => {
it('dovrebbe esistere nello stato iniziale con valori di default', () => {
expect(state.sp.formInizioSet.home).toEqual(["1", "2", "3", "4", "5", "6"])
expect(state.sp.formInizioSet.guest).toEqual(["1", "2", "3", "4", "5", "6"])
})
it('setFormazione aggiorna sia form che formInizioSet per il team indicato', () => {
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)
expect(s.sp.formInizioSet.home).toEqual(nuova)
})
it('setFormazione non tocca formInizioSet dell\'altro team', () => {
const nuova = ["10", "11", "12", "13", "14", "15"]
const s = applyAction(state, { type: 'setFormazione', team: 'home', form: nuova })
expect(s.sp.formInizioSet.guest).toEqual(["1", "2", "3", "4", "5", "6"])
})
})
// =============================================
// CONFERMASET
// =============================================
describe('confermaSet', () => {
// Helper: porta lo stato a fine set (home vince 25-0)
function stateConSetFinito(modalita = '3/5') {
let s = createInitialState()
s.modalitaPartita = modalita
// Aggiungiamo 25 punti a home: a 24-0 il prossimo punto vince il set
for (let i = 0; i < 25; i++) {
s = applyAction(s, { type: 'incPunt', team: 'home' })
}
// Ora setFinito dovrebbe essere impostato
return s
}
it('non fa nulla se setFinito è null', () => {
expect(state.sp.setFinito).toBeNull()
const s = applyAction(state, { type: 'confermaSet' })
expect(s.sp.strisce).toEqual([])
expect(s.sp.set.home).toBe(0)
})
it('aggiunge una entry in strisce con i campi corretti', () => {
const s = applyAction(stateConSetFinito(), { type: 'confermaSet' })
expect(s.sp.strisce).toHaveLength(1)
const striscia = s.sp.strisce[0]
expect(striscia).toHaveProperty('set')
expect(striscia).toHaveProperty('formInizio')
expect(striscia).toHaveProperty('home')
expect(striscia).toHaveProperty('guest')
expect(striscia).toHaveProperty('vincitore')
expect(striscia).toHaveProperty('punt')
})
it('il numero set è 1 per il primo set, 2 per il secondo', () => {
let s = stateConSetFinito()
s = applyAction(s, { type: 'confermaSet' })
expect(s.sp.strisce[0].set).toBe(1)
// Secondo set
for (let i = 0; i < 25; i++) {
s = applyAction(s, { type: 'incPunt', team: 'home' })
}
s = applyAction(s, { type: 'confermaSet' })
expect(s.sp.strisce[1].set).toBe(2)
})
it('formInizio nella striscia corrisponde a formInizioSet prima del conferma', () => {
const formazioneInizio = ["7", "8", "9", "10", "11", "12"]
let s = createInitialState()
s = applyAction(s, { type: 'setFormazione', team: 'home', form: formazioneInizio })
// porta a fine set
for (let i = 0; i < 25; i++) {
s = applyAction(s, { type: 'incPunt', team: 'home' })
}
s = applyAction(s, { type: 'confermaSet' })
expect(s.sp.strisce[0].formInizio.home).toEqual(formazioneInizio)
})
it('incrementa set[vincitore]', () => {
const s = applyAction(stateConSetFinito(), { type: 'confermaSet' })
expect(s.sp.set.home).toBe(1)
expect(s.sp.set.guest).toBe(0)
})
it('resetta punt a 0', () => {
const s = applyAction(stateConSetFinito(), { type: 'confermaSet' })
expect(s.sp.punt.home).toBe(0)
expect(s.sp.punt.guest).toBe(0)
})
it('svuota storicoServizio', () => {
const s = applyAction(stateConSetFinito(), { type: 'confermaSet' })
expect(s.sp.storicoServizio).toEqual([])
})
it('azzera setFinito', () => {
const s = applyAction(stateConSetFinito(), { type: 'confermaSet' })
expect(s.sp.setFinito).toBeNull()
})
it('aggiorna formInizioSet con la form corrente post-conferma', () => {
const preConferma = stateConSetFinito()
// La form potrebbe essere ruotata durante il set
const formDopoSet = [...preConferma.sp.form.home]
const s = applyAction(preConferma, { type: 'confermaSet' })
expect(s.sp.formInizioSet.home).toEqual(formDopoSet)
})
it('NON imposta partitaFinita se la partita non è ancora vinta (3/5)', () => {
const s = applyAction(stateConSetFinito('3/5'), { type: 'confermaSet' })
// 1 set vinto su 3 necessari → partita non finita
expect(s.sp.partitaFinita).toBeNull()
})
it('imposta partitaFinita quando home vince 3 set (modalità 3/5)', () => {
let s = createInitialState()
s.modalitaPartita = '3/5'
// Vinci 3 set
for (let set = 0; set < 3; set++) {
for (let i = 0; i < 25; i++) s = applyAction(s, { type: 'incPunt', team: 'home' })
s = applyAction(s, { type: 'confermaSet' })
}
expect(s.sp.partitaFinita).not.toBeNull()
expect(s.sp.partitaFinita.vincitore).toBe('home')
})
it('imposta partitaFinita quando home vince 2 set (modalità 2/3)', () => {
let s = createInitialState()
s.modalitaPartita = '2/3'
for (let set = 0; set < 2; set++) {
for (let i = 0; i < 25; i++) s = applyAction(s, { type: 'incPunt', team: 'home' })
s = applyAction(s, { type: 'confermaSet' })
}
expect(s.sp.partitaFinita).not.toBeNull()
expect(s.sp.partitaFinita.vincitore).toBe('home')
})
it('resetta striscia per il set successivo con 0 per chi serve', () => {
const s = applyAction(stateConSetFinito(), { type: 'confermaSet' })
// servHome era true (home segna per primo → resta home a servire)
expect(s.sp.striscia.home).toEqual([0])
expect(s.sp.striscia.guest).toEqual([" "])
})
})
// =============================================
// GUARDIE setFinito / partitaFinita
// =============================================
describe('Guardie setFinito e partitaFinita', () => {
it('incPunt non incrementa se setFinito è impostato', () => {
state.sp.setFinito = { vincitore: 'home' }
const s = applyAction(state, { type: 'incPunt', team: 'home' })
expect(s.sp.punt.home).toBe(0)
})
it('incPunt non incrementa se partitaFinita è impostata', () => {
state.sp.partitaFinita = { vincitore: 'home' }
const s = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(s.sp.punt.guest).toBe(0)
})
it('decPunt azzera setFinito se era impostato', () => {
state.sp.setFinito = { vincitore: 'home' }
const s = applyAction(state, { type: 'decPunt' })
expect(s.sp.setFinito).toBeNull()
})
})
// =============================================
// RESETTA — nuovi campi
// =============================================
describe('resetta (nuovi campi)', () => {
it('azzera strisce', () => {
state.sp.strisce = [{ set: 1, vincitore: 'home', punt: { home: 25, guest: 20 } }]
const s = applyAction(state, { type: 'resetta' })
expect(s.sp.strisce).toEqual([])
})
it('azzera setFinito', () => {
state.sp.setFinito = { vincitore: 'home' }
const s = applyAction(state, { type: 'resetta' })
expect(s.sp.setFinito).toBeNull()
})
it('azzera partitaFinita', () => {
state.sp.partitaFinita = { vincitore: 'guest' }
const s = applyAction(state, { type: 'resetta' })
expect(s.sp.partitaFinita).toBeNull()
})
it('reimposta formInizioSet ai valori di default', () => {
state.sp.formInizioSet = { home: ["7", "8", "9", "10", "11", "12"], guest: ["7", "8", "9", "10", "11", "12"] }
const s = applyAction(state, { type: 'resetta' })
expect(s.sp.formInizioSet.home).toEqual(["1", "2", "3", "4", "5", "6"])
expect(s.sp.formInizioSet.guest).toEqual(["1", "2", "3", "4", "5", "6"])
})
})
// =============================================
// checkVittoriaPartita
// =============================================
describe('checkVittoriaPartita', () => {
it('ritorna null se nessuno ha vinto (3/5, 1-1)', () => {
state.sp.set.home = 1
state.sp.set.guest = 1
expect(checkVittoriaPartita(state)).toBeNull()
})
it('ritorna "home" con 3 set in modalità 3/5', () => {
state.modalitaPartita = '3/5'
state.sp.set.home = 3
state.sp.set.guest = 1
expect(checkVittoriaPartita(state)).toBe('home')
})
it('ritorna "guest" con 3 set in modalità 3/5', () => {
state.modalitaPartita = '3/5'
state.sp.set.home = 0
state.sp.set.guest = 3
expect(checkVittoriaPartita(state)).toBe('guest')
})
it('ritorna null con 2 set in modalità 3/5 (non ancora vinto)', () => {
state.modalitaPartita = '3/5'
state.sp.set.home = 2
state.sp.set.guest = 2
expect(checkVittoriaPartita(state)).toBeNull()
})
it('ritorna "home" con 2 set in modalità 2/3', () => {
state.modalitaPartita = '2/3'
state.sp.set.home = 2
state.sp.set.guest = 0
expect(checkVittoriaPartita(state)).toBe('home')
})
it('ritorna "guest" con 2 set in modalità 2/3', () => {
state.modalitaPartita = '2/3'
state.sp.set.home = 1
state.sp.set.guest = 2
expect(checkVittoriaPartita(state)).toBe('guest')
})
it('ritorna null con 1 set in modalità 2/3 (non ancora vinto)', () => {
state.modalitaPartita = '2/3'
state.sp.set.home = 1
state.sp.set.guest = 0
expect(checkVittoriaPartita(state)).toBeNull()
})
})
// =============================================
// confermaSet con servHome=false
// =============================================
describe('confermaSet — striscia con servHome=false', () => {
it('resetta striscia con guest a [0] se è guest a servire', () => {
let s = createInitialState()
// guest serve
s = applyAction(s, { type: 'cambiaPalla' })
expect(s.sp.servHome).toBe(false)
// porta a fine set (guest segna 25 volte)
for (let i = 0; i < 25; i++) s = applyAction(s, { type: 'incPunt', team: 'guest' })
s = applyAction(s, { type: 'confermaSet' })
// dopo il set, continua a servire guest
expect(s.sp.striscia.guest).toEqual([0])
expect(s.sp.striscia.home).toEqual([" "])
})
})
})

View File

@@ -1,159 +0,0 @@
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')
expect(allLogs).toContain('3002')
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 stampare storicoPort personalizzato', () => {
os.networkInterfaces.mockReturnValue({})
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, 3001, 5000)
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('5000')
consoleSpy.mockRestore()
})
it('dovrebbe mostrare gli URL remoti per controller e storico', () => {
os.networkInterfaces.mockReturnValue({
eth0: [
{ family: 'IPv4', internal: false, address: '192.168.1.50' }
]
})
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, 3001, 3002)
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('192.168.1.50')
expect(allLogs).toContain('3001')
expect(allLogs).toContain('3002')
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()
})
})
})

View File

@@ -1,198 +0,0 @@
import { WebSocketServer } from 'ws'
import { createServer as createHttpServer, request as httpRequest } from 'http'
import { readFile } from 'fs'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'
import { setupWebSocketHandler } from './src/websocket-handler.js'
import { printServerInfo } from './src/server-utils.js'
import { getPartite, getPartita } from './src/db.js'
const __dirname = dirname(fileURLToPath(import.meta.url))
const CONTROLLER_PORT = 3001
const STORICO_PORT = process.env.STORICO_PORT || 3002
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)
startStoricoDevServer()
setTimeout(() => printServerInfo(vitePort, CONTROLLER_PORT, STORICO_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}`)
})
}
/**
* Avvia il server di sviluppo per lo storico sulla porta 3002.
* Serve storico.html e gli endpoint /api/partite.
*/
function startStoricoDevServer() {
const storicoServer = createHttpServer((req, res) => {
const url = new URL(req.url, `http://${req.headers.host}`)
const pathname = url.pathname
if (pathname === '/api/partite') {
try {
res.writeHead(200, { 'Content-Type': 'application/json' })
res.end(JSON.stringify(getPartite()))
} catch (err) {
res.writeHead(500, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ error: err.message }))
}
return
}
const matchId = pathname.match(/^\/api\/partite\/(\d+)$/)
if (matchId) {
try {
const p = getPartita(Number(matchId[1]))
if (!p) {
res.writeHead(404, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ error: 'Not found' }))
} else {
res.writeHead(200, { 'Content-Type': 'application/json' })
res.end(JSON.stringify(p))
}
} catch (err) {
res.writeHead(500, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ error: err.message }))
}
return
}
if (pathname === '/' || pathname === '') {
readFile(join(__dirname, 'storico.html'), (err, data) => {
if (err) {
res.writeHead(500)
res.end('Error loading storico.html')
} else {
res.writeHead(200, { 'Content-Type': 'text/html' })
res.end(data)
}
})
return
}
res.writeHead(404)
res.end('Not found')
})
storicoServer.listen(STORICO_PORT, '0.0.0.0', () => {
console.log(`[Storico] http://localhost:${STORICO_PORT}`)
})
}

View File

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

View File

@@ -1,19 +0,0 @@
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'],
],
},
})