7 Commits

Author SHA1 Message Date
davide 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
davide 5e9377c681 Unifica output APK nella cartella /dist/android invece di /output 2026-01-24 18:41:11 +01:00
davide b174e66c8b Corregge encoding README.md (caratteri accentati) 2026-01-24 18:02:57 +01:00
davide 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
davide 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
davide 9346117603 Aggiunge integrazione Capacitor per build APK Android 2026-01-24 16:29:11 +01:00
davide 2e956aef75 Aggiorna README.md 2026-01-24 10:10:00 +01:00
71 changed files with 4268 additions and 10308 deletions
-7
View File
@@ -1,7 +0,0 @@
{
"enabledPlugins": {
"claude-md-management@claude-plugins-official": true,
"code-simplifier@claude-plugins-official": true,
"frontend-design@claude-plugins-official": true
}
}
-11
View File
@@ -1,11 +0,0 @@
node_modules
dist
dev-dist
.segnapunti
tests
playwright-report
test-results
*.md
.git
.gitignore
.vscode
+11 -11
View File
@@ -11,10 +11,9 @@ lerna-debug.log*
currentCommit.txt currentCommit.txt
node_modules node_modules
dist dist/*
!dist/android/
dist-ssr dist-ssr
dev-dist
.segnapunti
*.local *.local
# Editor directories and files # Editor directories and files
@@ -28,12 +27,13 @@ dev-dist
*.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
!dist/android/*.apk
*.aab
-311
View File
@@ -1,311 +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/).
---
## [2.0.0] - 2026-05-12
### Aggiunto
- Architettura client-server con WebSocket: server Express (`server.js`) + handler (`src/websocket-handler.js`) come unica fonte di verità; display e controller sono client separati sincronizzati in tempo reale
- Interfaccia display (`/display`) e controller (`/controller`) su porta singola `:3000`
- Robustezza connessione WebSocket: reconnect automatico con backoff esponenziale, indicatore stato connessione sul display
- Supporto query parameter `?wsHost=` per scenari WSL2 / development remoto
- Validazione cambi giocatori già in formazione lato client
- Sintesi vocale inoltrata dal controller al display via WebSocket
- Dialog set vinto sul controller al raggiungimento dei 25 punti: mostra il vincitore, permette di annullare l'ultimo punto (INDIETRO) o avanzare al set successivo con reset automatico formazioni
- Struttura striscia ottimizzata: array di set `[{ serv, r[] }]` che registra la sequenza dei punti e preserva la storia di tutti i set; elimina `storicoServizio`
- Persistenza stato su `.segnapunti/state.json`: salvato ad ogni azione, ricaricato all'avvio del server
- Suite di test completa: unit (Vitest), integration, component (Vue Test Utils + Happy-DOM), stress (50+ client), E2E (Playwright su Chromium, Firefox, Mobile Chrome)
- Dockerfile multi-stage (builder + runtime minimale) e docker-compose con volume per persistenza stato; immagine pubblicata su registro Gitea
### Modificato
- `applyAction` usa `structuredClone` al posto di `JSON.parse/stringify`
- Calcolo cambio palla deduplicato in `applyAction`
- Undo punto (`decPunt`) ricostruisce il servizio precedente dalla storia `r[]`
- `nuovoSet` come azione dedicata per la progressione regolare tra set
### Rimosso
- Terminal controller CLI (`cli.js`)
- Dipendenze inutilizzate: `wave-ui`, `vue-router`, `concurrently`
- Script npm ridondanti: `preview`, `start`, `cli`, `cli:dev`
- Asset template Vite: `vite.svg`, `vue.svg`, `serve.png`
---
## [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
-82
View File
@@ -1,82 +0,0 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Scopo del progetto
**Segnapunti Anto** è una PWA per il segnapunti pallavolo in tempo reale. Un server Express/WebSocket gestisce lo stato di gioco; due interfacce Vue separate — **display** (tabellone pubblico) e **controller** (pannello operatore) — si sincronizzano via WebSocket.
## Comandi
```bash
npm run dev # Vite dev server — display: :5173/display, controller: :5173/controller
npm run serve # Build + avvio produzione — display: :3000/display, controller: :3000/controller
npm run test # Vitest in modalità watch
npm run test:all # Tutte le suite Vitest in una sola esecuzione
npm run test:unit # Solo unit + integration
npm run test:component # Test componenti Vue (happy-dom)
npm run test:stress # Load test (50+ client concorrenti)
npm run test:e2e # Playwright E2E (richiede npm run serve attivo)
npm run test:e2e:ui # Playwright con UI interattiva
```
Per eseguire un singolo file di test: `npx vitest run tests/unit/gameState.test.js`
## Architettura
```
Controller (Vue) ──WebSocket──┐
Display (Vue) ──WebSocket──┤── websocket-handler.js ── gameState.js
│ │
│ └── persist.js ── .segnapunti/state.json
```
**Tutta la logica di gioco** è in `src/gameState.js` come tre funzioni pure esportate:
- `createInitialState()` — restituisce lo stato iniziale
- `applyAction(state, action)` — reducer immutabile (deep-clone via `structuredClone`)
- `checkVittoria(state)` — condizioni di vittoria set (25 punti, vantaggio di 2; 15 punti nel set decisivo)
`src/websocket-handler.js` riceve i messaggi WebSocket, valida che il mittente sia un `controller` (non un `display`), chiama `applyAction`, fa il broadcast del nuovo stato a tutti i client, poi invoca `onStateChange` per persistere su disco.
`server.js` (Express) serve entrambe le interfacce sulla porta 3000: `/display``dist/index.html`, `/controller``dist/controller.html`. Singolo endpoint WebSocket su `/ws`.
In sviluppo, `vite-plugin-websocket.js` incorpora il server WebSocket dentro il dev server Vite con middleware di URL rewrite per `/display` e `/controller`.
## Vincoli di design
- **Tutta la logica sul server** — i client sono pura UI; il server è l'unica source of truth.
- **WebSocket role-based** — i client si registrano come `display` o `controller`; solo i controller possono inviare azioni.
- **Stato immutabile** — `applyAction` non muta mai lo stato, restituisce sempre un nuovo oggetto.
- **Un solo controller** — il design prevede un controller e un display attivi; non esiste conflict resolution per controller simultanei.
- **Stato persistente** — `src/persist.js` salva lo stato in `.segnapunti/state.json` dopo ogni azione e lo carica all'avvio del server.
## Layout dei test
| Suite | Percorso | Runner |
|-------|----------|--------|
| Unit | `tests/unit/` | Vitest + Node |
| Integration | `tests/integration/` | Vitest + Node |
| Component | `tests/component/` | Vitest + Happy-DOM |
| Stress | `tests/stress/` | Vitest + Node |
| E2E | `tests/e2e/` | Playwright (Chromium, Firefox, Mobile Chrome) |
I test E2E girano in serie (`workers: 1`) per evitare race condition sullo stato WebSocket. Eseguire `npm run serve` prima di `npm run test:e2e`.
## Deploy
Il progetto si distribuisce tramite Docker. L'immagine è pubblicata sul registry Gitea self-hosted (`santantonio.sytes.net`):
```bash
docker compose up -d # Avvia con immagine dal registry privato (porta 3000)
```
Il volume `./.segnapunti` persiste lo stato tra i riavvii del container.
## Istruzioni operative
- Per ogni nuova funzionalità: analizza come si inserisce nel flusso `action → applyAction → broadcast`, poi decidi se aggiungere un nuovo tipo di action o estendere uno esistente.
- Qualsiasi modifica alle regole di gioco va fatta esclusivamente in `src/gameState.js`.
- Qualsiasi modifica al protocollo WebSocket va fatta in `src/websocket-handler.js`.
- Aggiungere test unit in `tests/unit/gameState.test.js` per ogni nuovo action type o regola di gioco.
- Il codice deve essere scritto in italiano per commenti e nomi di variabili di dominio (es. `servHome`, `striscia`, `nomi`), ma in inglese per nomi tecnici standard (`state`, `action`, `handler`).
+79 -18
View File
@@ -1,22 +1,83 @@
# Stage 1: build frontend # Dockerfile per build APK Android con Capacitor
FROM node:20-alpine AS builder FROM ubuntu:22.04
# Evita prompt interattivi
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 WORKDIR /app
# Copia package files per cache layer
COPY package*.json ./ COPY package*.json ./
RUN npm ci
# Installa dipendenze npm
RUN npm ci --legacy-peer-deps || npm install --legacy-peer-deps
# Copia il resto del progetto
COPY . . COPY . .
RUN npm run build
# Stage 2: runtime # Build script
FROM node:20-alpine CMD ["bash", "-c", "\
WORKDIR /app npm install --legacy-peer-deps && \
ENV NODE_ENV=production PORT=3000 npm run build && \
npx cap add android && \
COPY package*.json ./ npx cap sync && \
RUN npm ci --omit=dev sed -i 's/android:configChanges=\"\\([^\"]*\\)\"/android:configChanges=\"\\1\" android:screenOrientation=\"sensorLandscape\"/g' android/app/src/main/AndroidManifest.xml && \
bash setup-android-icons.sh && \
COPY server.js ./ cd android && ./gradlew assembleDebug --no-daemon && \
COPY src/gameState.js src/websocket-handler.js src/server-utils.js src/persist.js ./src/ mkdir -p /app/dist/android && \
COPY --from=builder /app/dist ./dist cp app/build/outputs/apk/debug/app-debug.apk /app/dist/android/segnapunti-debug.apk && \
echo '' && \
EXPOSE 3000 echo 'APK generato: /app/dist/android/segnapunti-debug.apk'\
CMD ["node", "server.js"] "]
+393 -151
View File
@@ -1,195 +1,437 @@
# Segnapunti # Segnapunti - Anto
![Version](https://img.shields.io/badge/versione-2.0.0-blue) Un'applicazione web segnapunti per pallavolo con funzionalità di sintesi vocale, modalità formazione e supporto PWA (Progressive Web App).
![Node](https://img.shields.io/badge/node-%3E%3D18-green)
![Docker](https://img.shields.io/badge/docker-ready-2496ED?logo=docker&logoColor=white)
![License](https://img.shields.io/badge/licenza-privata-lightgrey)
Segnapunti digitale in tempo reale per partite di pallavolo. Un server centrale gestisce lo stato della partita; un **display** mostra il tabellone pubblico e un **controller** (smartphone o tablet) permette all'operatore di gestire punti, formazioni e cambi. ## Cos'è
--- 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.
## Indice ### Caratteristiche principali
- [Architettura](#architettura) - **Segnapunti digitale**: Visualizzazione chiara del punteggio per le due squadre (Home e Guest)
- [Guida utente](#guida-utente) - **Contatore set**: Traccia i set vinti da ciascuna squadra (fino a 3 set)
- [Funzionalità](#funzionalità) - **Indicatore battuta**: Mostra quale squadra ha il servizio
- [Deploy con Docker](#deploy-con-docker) - **Modalità formazione**: Visualizza la rotazione dei giocatori in campo (posizioni 1-6)
- [Sviluppo](#sviluppo) - **Sintesi vocale**: Annuncia il punteggio in italiano
- [Test](#test) - **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
--- ## Come funziona
## Architettura ### Interfaccia
``` L'applicazione divide lo schermo in due metà:
Controller (smartphone) ──WebSocket──┐
├── Server Node.js ── gameState.js
Display (schermo) ──WebSocket──┘ │
└── .segnapunti/state.json
```
Il server è l'unica fonte di verità. Ogni azione del controller viene elaborata e trasmessa in broadcast a tutti i client connessi. Lo stato viene salvato su disco ad ogni azione e ricaricato all'avvio, sopravvivendo ai riavvii del server. - **Metà sinistra (gialla su sfondo nero)**: Squadra Home - Antoniana
- **Metà destra (bianca su sfondo blu)**: Squadra Guest
| Percorso | Ruolo | #### Visualizzazioni
|---|---|
| `http://<host>:3000/display` | Tabellone pubblico — sola lettura |
| `http://<host>:3000/controller` | Pannello operatore — gestione partita |
| `ws://<host>:3000/ws` | WebSocket endpoint |
--- 1. **Modalità Punteggio** (default):
- Mostra il punteggio corrente in caratteri molto grandi
- Cliccando sul punteggio si incrementa di 1
- Cliccando sul nome della squadra si decrementa di 1
## Guida utente 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)
### Scenario tipico: schermo fisso + smartphone operatore #### Funzionalità
#### 1. Avvia il server - **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)
```bash ### Controlli da tastiera
docker compose up -d
```
All'avvio il terminale mostra gli URL locali e di rete. - **Ctrl + M**: Apri dialog configurazione nomi
- **Ctrl + B**: Mostra/nascondi barra pulsanti in basso
- **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
#### 2. Apri il display ### Comportamento su mobile
Collega il PC/server allo schermo via HDMI e apri il browser a schermo intero: Su dispositivi mobili l'applicazione:
1. Attiva automaticamente NoSleep per impedire lo spegnimento dello schermo
2. Si avvia in modalità fullscreen
3. Esegue un test di sintesi vocale al caricamento
4. Mostra il pulsante "Esci" per chiudere l'app
``` ## Stack tecnologico
http://localhost:3000/display
```
Se il display è su un dispositivo separato nella stessa rete: ### Framework e librerie
``` - **Vue 3** (^3.2.47): Framework JavaScript progressivo per l'interfaccia utente
http://<IP-del-server>:3000/display - **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
> **Trovare l'IP:** il server lo stampa all'avvio. In alternativa usa `ip a` su Linux. ### API Web utilizzate
#### 3. Apri il controller sullo smartphone - **Web Speech API**: Per la sintesi vocale (Text-to-Speech)
- **Fullscreen API**: Per la modalità schermo intero
- **Service Worker**: Per il funzionamento offline (PWA)
Connetti il telefono alla stessa rete Wi-Fi e apri: ## Come svilupparlo
``` ### Prerequisiti
http://<IP-del-server>:3000/controller
```
> **Installazione come app:** nel browser tocca *"Aggiungi a schermata Home"* per avere il controller come icona dedicata. - **Node.js** (versione 14 o superiore, raccomandata v20.2.0)
- **npm** o **yarn**
--- ### Installazione
## Funzionalità 1. Clona il repository:
### Display
- Nomi squadre con indicatore di servizio
- Punteggio del set corrente (grande, leggibile da lontano)
- Contatore set vinti
- Striscia storica punti del set in corso, scorrevole verso destra
- Modalità formazioni: posizioni dei 6 giocatori in campo
- Indicatore connessione WebSocket (scompare quando connesso, rosso lampeggiante se disconnesso)
### Controller
- **Punti** — `+1` per casa e ospite, con annullamento dell'ultimo punto
- **Dialog set vinto** — appare automaticamente al raggiungimento dei 25 punti (o 15 nel tie-break); permette di confermare il set o annullare l'ultimo punto
- **Formazioni** — configura i numeri di maglia; la rotazione avviene automaticamente al cambio palla
- **Cambi** — dialog `IN → OUT` con validazione
- **Servizio** — cambio manuale (disponibile solo a 0-0)
- **Visualizzazione** — alterna tra punteggio grande e formazioni in campo
- **Striscia** — mostra/nasconde lo storico punti sul display
- **Reset** — azzera la partita (richiede conferma)
### Regole pallavolo integrate
| Set | Condizione di vittoria |
|---|---|
| Set 14 (modalità 3/5) o 12 (modalità 2/3) | Primo a **25** con almeno 2 punti di scarto |
| Set decisivo (tie-break) | Primo a **15** con almeno 2 punti di scarto |
---
## Deploy con Docker
### Prima installazione
```bash
docker compose up -d
```
Lo stato viene salvato nel volume Docker `segnapunti-state` e sopravvive ai riavvii del container.
### Aggiornamento a nuova versione
```bash
docker compose pull && docker compose up -d
```
### Build e pubblicazione immagine
```bash
docker build \
-t santantonio.sytes.net/attilio/segnapunti:2.0.0 \
-t santantonio.sytes.net/attilio/segnapunti:latest .
docker push santantonio.sytes.net/attilio/segnapunti:2.0.0
docker push santantonio.sytes.net/attilio/segnapunti:latest
```
---
## Sviluppo
### Requisiti
| Strumento | Versione minima |
|---|---|
| Node.js | >= 18 |
| npm | >= 9 |
### Avvio
2. Installa le dipendenze:
```bash ```bash
npm install npm install
```
### Comandi di 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).
#### 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
#### 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
npm run dev npm run dev
``` ```
| URL | Interfaccia | 2. Vite mostrerà l'indirizzo locale e di rete. Se non viene mostrato, trova l'indirizzo IP del tuo computer:
|---|---| ```bash
| `http://localhost:5173/display` | Display | # Su Linux/Mac
| `http://localhost:5173/controller` | Controller | hostname -I
# oppure
ifconfig | grep "inet "
Lo stato viene salvato in `.segnapunti/state.json` anche in modalità dev. # Su Windows
ipconfig
```
### Comandi disponibili 3. Dal dispositivo mobile, connesso alla stessa rete Wi-Fi, naviga su:
```
http://[tuo-ip]:5173
```
| Comando | Descrizione | 4. Accetta eventuali permessi richiesti dal browser per:
|---|---| - Modalità fullscreen
| `npm run dev` | Dev server con hot reload | - Sintesi vocale
| `npm run build` | Build di produzione in `dist/` | - Wake Lock (prevenzione spegnimento schermo)
| `npm run serve` | Build + avvio server produzione |
--- ### Build e Deploy
## Test #### Build per produzione
| Comando | Descrizione | Genera i file ottimizzati per la produzione:
|---|---| ```bash
| `npm run test:unit` | Unit + integration (Vitest) | npm run build
| `npm run test:component` | Componenti Vue (Happy-DOM) | ```
| `npm run test:stress` | Load test WebSocket (50+ client) |
| `npm run test:all` | Tutti i test tranne E2E |
| `npm run test:e2e` | Playwright — Chromium, Firefox, Mobile Chrome |
> I test E2E richiedono il server in esecuzione (`npm run serve`) e i browser Playwright installati: Questo comando crea una cartella `dist/` contenente:
> ```bash - HTML, CSS e JavaScript minificati
> npx playwright install chromium firefox - Service Worker per il funzionamento offline
> ``` - Manifest PWA per l'installazione come app
- Asset ottimizzati
--- #### Anteprima della build
## Changelog Prima del deploy, puoi testare la build in locale:
```bash
npm run preview
```
Vedere [CHANGELOG.md](CHANGELOG.md) per la storia delle versioni. #### Deploy su GitHub Pages
1. Nel file [vite.config.js](vite.config.js:7), verifica che il `base` path corrisponda al nome del repository:
```javascript
base: process.env.NODE_ENV === 'production' ? '/nome-repository' : '/',
```
2. Esegui la build:
```bash
npm run build
```
3. Publica il contenuto della cartella `dist/` su GitHub Pages usando uno di questi metodi:
- 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.
Executable
+41
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
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"
}
}
-13
View File
@@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/segnap-192x192.png" />
<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>
-9
View File
@@ -1,9 +0,0 @@
services:
segnapunti:
image: santantonio.sytes.net/attilio/segnapunti:2.0.0
container_name: segnapunti
ports:
- "3000:3000"
volumes:
- ./.segnapunti:/app/.segnapunti
restart: unless-stopped
+42
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"
+5 -2
View File
@@ -2,8 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/segnap-192x192.png" /> <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>
+2850 -3732
View File
File diff suppressed because it is too large Load Diff
+18 -29
View File
@@ -1,41 +1,30 @@
{ {
"name": "segnapuntianto", "name": "segnapuntianto",
"private": true, "private": true,
"version": "2.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite",
"build": "vite build", "build": "vite build",
"serve": "vite build && node server.js", "preview": "vite preview",
"test": "vitest", "cap:sync": "npm run build && cap sync",
"test:unit": "vitest run tests/unit tests/integration", "cap:open": "cap open android",
"test:component": "vitest run tests/component", "android:build:debug": "cd android && ./gradlew assembleDebug",
"test:stress": "vitest run tests/stress", "docker:build": "./build-apk.sh"
"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": {
"express": "^5.2.1", "@capacitor-community/text-to-speech": "^6.0.0",
"vue": "^3.2.47", "@capacitor/android": "^6.2.0",
"ws": "^8.19.0" "@capacitor/app": "^6.0.1",
}, "@capacitor/core": "^6.2.0",
"overrides": { "nosleep.js": "^0.12.0",
"serialize-javascript": "^7.0.5" "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": "^6.0.5", "vite-plugin-pwa": "^0.20.5"
"@vitest/ui": "^4.0.18",
"@vue/test-utils": "^2.4.6",
"happy-dom": "^20.6.1",
"jsdom": "^28.0.0",
"vite": "^7.3.1",
"vite-plugin-pwa": "^1.2.0",
"vitest": "^4.0.18"
} }
} }
-38
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,
},
});
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

-61
View File
@@ -1,61 +0,0 @@
import { createServer } from 'http'
import express from 'express'
import { WebSocketServer } from 'ws'
import { fileURLToPath, pathToFileURL } from 'url'
import { dirname, join } from 'path'
import { setupWebSocketHandler } from './src/websocket-handler.js'
import { printServerInfo } from './src/server-utils.js'
import { loadState, saveState } from './src/persist.js'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
const DIST_DIR = join(__dirname, 'dist')
// Crea l'app Express (asset statici + route display/controller) senza avviare il
// listen né il WebSocket: così il routing è testabile in isolamento.
export function createApp(distDir = DIST_DIR) {
const app = express()
app.use(express.static(distDir, { index: false }))
app.get(['/', '/display', '/display/*splat'], (_req, res) => {
res.sendFile(join(distDir, 'index.html'))
})
app.get(['/controller', '/controller/*splat'], (_req, res) => {
res.sendFile(join(distDir, 'controller.html'))
})
return app
}
// Avvia HTTP + WebSocket. Lo stato viene caricato da disco e ripersistito ad ogni azione.
export function startServer(port = process.env.PORT || 3000) {
const app = createApp()
const server = createServer(app)
const wss = new WebSocketServer({ noServer: true })
setupWebSocketHandler(wss, { initialState: loadState(), onStateChange: saveState })
server.on('upgrade', (request, socket, head) => {
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
if (pathname === '/ws') {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request)
})
} else {
socket.destroy()
}
})
server.listen(port, '0.0.0.0', () => {
printServerInfo(port)
})
return server
}
// Avvia solo se eseguito direttamente (`node server.js`), non quando importato nei test.
if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
startServer()
}
+40
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!"
+5 -1
View File
@@ -1,3 +1,7 @@
<script setup>
import HomePage from './components/HomePage/index.vue'
</script>
<template> <template>
<router-view /> <HomePage />
</template> </template>
Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

After

Width:  |  Height:  |  Size: 496 B

File diff suppressed because it is too large Load Diff
-250
View File
@@ -1,250 +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="servHome" src="/serv.png" width="25" alt="Servizio" />
</span>
<span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
</span>
<span class="mr3" :style="{ 'float': 'right' }">set {{ set.home }}</span>
</div>
<div class="hea guest">
<span :style="{ 'float': 'right' }">
<span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
<span class="serv-slot">
<img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
</span>
{{ state.sp.nomi.guest }}
</span>
<span class="ml3" :style="{ 'float': 'left' }">set {{ 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">{{ punt.home }}</div>
<div class="col punt guest">{{ 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="!servHome" src="/serv.png" width="25" alt="Servizio" />
</span>
<span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
</span>
<span class="mr3" :style="{ 'float': 'right' }">set {{ set.guest }}</span>
</div>
<div class="hea home">
<span :style="{ 'float': 'right' }">
<span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
<span class="serv-slot">
<img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
</span>
{{ state.sp.nomi.home }}
</span>
<span class="ml3" :style="{ 'float': 'left' }">set {{ 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">{{ punt.guest }}</div>
<div class="col punt home">{{ 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 stricciaStrip.home" :key="'sh'+i"
class="item" :class="{ 'item-vuoto': h === ' ' }">
{{ 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 stricciaStrip.guest" :key="'sg'+i"
class="item" :class="{ 'item-vuoto': h === ' ' }">
{{ h }}
</div>
</div>
</div>
<!-- Indicatore stato connessione -->
<div class="connection-status" :class="{ connected: wsConnected, disconnected: !wsConnected }">
<span class="dot"></span>
{{ wsConnected ? '' : 'Disconnesso' }}
</div>
</div>
</section>
</template>
<script>
import { createWsMixin } from '../wsMixin.js'
export default {
name: "DisplayPage",
mixins: [createWsMixin('display')],
mounted() {
if (this.isMobile()) {
try { document.documentElement.requestFullscreen() } catch (e) {}
}
},
computed: {
stricciaStrip() {
const currentSet = this.state.sp.striscia.at(-1)
if (!currentSet) return { home: [], guest: [] }
let h = 0, g = 0
const home = [], guest = []
for (const scorer of currentSet.ris) {
if (scorer === 'h') { h++; home.push(h); guest.push(' ') }
else { g++; guest.push(g); home.push(' ') }
}
return { home, guest }
},
},
watch: {
'state.sp.striscia': {
deep: true,
handler() {
this.$nextTick(() => {
if (this.$refs.homeItems) this.$refs.homeItems.scrollLeft = this.$refs.homeItems.scrollWidth
if (this.$refs.guestItems) this.$refs.guestItems.scrollLeft = this.$refs.guestItems.scrollWidth
})
}
},
},
methods: {
onWsMessage(msg) {
if (msg.type === 'speak') this.speakOnDisplay(msg.text)
else if (msg.type === 'error') console.error('[Display] Server error:', msg.message)
},
isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
},
speakOnDisplay(text) {
if (typeof text !== 'string' || !text.trim() || !('speechSynthesis' in window)) return
const utterance = new SpeechSynthesisUtterance(text.trim())
const voices = window.speechSynthesis.getVoices()
utterance.voice = voices.find(v => v.name === 'Google italiano')
|| voices.find(v => v.lang?.toLowerCase().startsWith('it'))
|| null
utterance.lang = 'it-IT'
window.speechSynthesis.cancel()
window.speechSynthesis.speak(utterance)
},
},
}
</script>
<style scoped>
.display-page {
width: 100%;
height: 100vh;
background: #000;
overflow: hidden;
}
.connection-status {
position: fixed;
top: 8px;
right: 8px;
font-size: 12px;
padding: 4px 10px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 5px;
z-index: 100;
transition: opacity 0.5s;
}
.connection-status.connected {
opacity: 0;
}
.connection-status.disconnected {
background: rgba(255, 50, 50, 0.8);
color: white;
opacity: 1;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.connected .dot {
background: #4caf50;
}
.disconnected .dot {
background: #f44336;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.guest-striscia {
color: white;
}
.punteggio-container {
width: 100%;
display: flex;
}
.punt {
font-size: 60vh;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
min-width: 50vw;
max-width: 50vw;
overflow: hidden;
box-sizing: border-box;
}
</style>
+264
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>
+129
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>
+178
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 }
}
}
}
+112
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;
}
}
+3
View File
@@ -0,0 +1,3 @@
<template src="./HomePage.html"></template>
<script src="./HomePage.js"></script>
-6
View File
@@ -1,6 +0,0 @@
import { createApp } from 'vue'
import './style.css'
import ControllerPage from './components/ControllerPage.vue'
const app = createApp(ControllerPage)
app.mount('#app')
-218
View File
@@ -1,218 +0,0 @@
export function punteggio(striscia) {
let home = 0, guest = 0
for (const c of striscia.at(-1).ris) c === 'h' ? home++ : guest++
return { home, guest }
}
export function servizio(striscia) {
const set = striscia.at(-1)
return set.ris.length === 0 ? set.serv === 'h' : set.ris.at(-1) === 'h'
}
export function setVinti(striscia) {
return {
home: striscia.filter(s => s.vinc === 'h').length,
guest: striscia.filter(s => s.vinc === 'g').length,
}
}
export function createInitialState() {
return {
order: true,
visuForm: false,
visuStriscia: true,
modalitaPartita: "3/5",
sp: {
striscia: [{ serv: 'h', ris: '', vinc: null }],
nomi: { home: "Antoniana", guest: "Guest" },
form: {
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
},
},
}
}
export function checkVittoria(state) {
const { home: puntHome, guest: puntGuest } = punteggio(state.sp.striscia)
const sv = setVinti(state.sp.striscia)
const totSet = sv.home + sv.guest
const isSetDecisivo = state.modalitaPartita === "2/3" ? totSet >= 2 : 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 checkVittoriaPartita(state) {
if (state.modalitaPartita === 'amichevole') return false
const setsToWin = state.modalitaPartita === "2/3" ? 2 : 3
const sv = setVinti(state.sp.striscia)
return sv.home >= setsToWin || sv.guest >= setsToWin
}
export function applyAction(state, action) {
const s = structuredClone(state)
switch (action.type) {
case "incPunt": {
const team = action.team
if (checkVittoria(s)) break
const servHome = servizio(s.sp.striscia)
const cambioPalla = (team === "home") !== servHome
const setCorrente = s.sp.striscia.at(-1)
if (setCorrente.ris === '') {
setCorrente.formInizio = {
home: [...s.sp.form.home],
guest: [...s.sp.form.guest],
}
}
s.sp.striscia.at(-1).ris += team === 'home' ? 'h' : 'g'
if (cambioPalla) {
s.sp.form[team].push(s.sp.form[team].shift())
}
break
}
case "decPunt": {
const currentSet = s.sp.striscia.at(-1)
if (currentSet.ris.length === 0) break
const lastScorerShort = currentSet.ris.at(-1)
const prevServerShort = currentSet.ris.length >= 2
? currentSet.ris.at(-2)
: currentSet.serv
const wasCambioPalla = lastScorerShort !== prevServerShort
currentSet.ris = currentSet.ris.slice(0, -1)
if (currentSet.ris === '') delete currentSet.formInizio
const lastScorer = lastScorerShort === 'h' ? 'home' : 'guest'
if (wasCambioPalla) {
s.sp.form[lastScorer].unshift(s.sp.form[lastScorer].pop())
}
break
}
case "incSet": {
const team = action.team
const sv = setVinti(s.sp.striscia)
const count = sv[team]
const teamShort = team === 'home' ? 'h' : 'g'
if (count >= 2) {
// cicla a 0: rimuove le voci fantasma per questo team
s.sp.striscia = s.sp.striscia.filter(
entry => !(entry._phantom && entry.vinc === teamShort)
)
} else {
// inserisce una voce fantasma prima dell'ultimo set (quello in corso)
s.sp.striscia.splice(-1, 0, { serv: teamShort, ris: '', vinc: teamShort, _phantom: true })
}
break
}
case "nuovoSet": {
const team = action.team
if (team !== 'home' && team !== 'guest') break
if (checkVittoriaPartita(s)) break
s.sp.striscia.at(-1).vinc = team === 'home' ? 'h' : 'g'
if (checkVittoriaPartita(s)) break
s.sp.striscia.push({ serv: team === 'home' ? 'h' : 'g', ris: '', vinc: null })
s.sp.form = {
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
}
break
}
case "cambiaPalla": {
const currentSet = s.sp.striscia.at(-1)
if (currentSet.ris.length === 0) {
currentSet.serv = currentSet.serv === 'h' ? 'g' : 'h'
}
break
}
case "resetta": {
s.visuForm = false
const servIniziale = s.sp.striscia[0]?.serv ?? 'h'
s.sp.striscia = [{ serv: servIniziale, ris: '', vinc: null }]
s.sp.form = {
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]
}
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
}
+6 -2
View File
@@ -1,6 +1,10 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import './style.css' import './style.css'
import DisplayPage from './components/DisplayPage.vue' import App from './App.vue'
import WaveUI from 'wave-ui'
import 'wave-ui/dist/wave-ui.css'
const app = createApp(DisplayPage) const app = createApp(App)
app.use(WaveUI)
app.mount('#app') app.mount('#app')
-26
View File
@@ -1,26 +0,0 @@
import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'
import { createInitialState } from './gameState.js'
const STATE_PATH = join(dirname(fileURLToPath(import.meta.url)), '..', '.segnapunti', 'state.json')
export function loadState() {
try {
if (existsSync(STATE_PATH)) {
return JSON.parse(readFileSync(STATE_PATH, 'utf8'))
}
} catch (err) {
console.warn('[Persist] Stato non leggibile, si riparte da zero:', err.message)
}
return createInitialState()
}
export function saveState(state) {
try {
mkdirSync(dirname(STATE_PATH), { recursive: true })
writeFileSync(STATE_PATH, JSON.stringify(state), 'utf8')
} catch (err) {
console.error('[Persist] Salvataggio fallito:', err.message)
}
}
-141
View File
@@ -1,141 +0,0 @@
function vincitoreSet(s) {
if (s.vinc === 'h' || s.vinc === 'g') return s.vinc
let h = 0, g = 0
for (const c of s.ris) c === 'h' ? h++ : g++
if (h > g) return 'h'
if (g > h) return 'g'
return null
}
// Costruisce l'HTML del referto (funzione pura, testabile).
// `now` è iniettabile per rendere deterministica la data nei test.
export function buildRefertoHtml(state, now = new Date()) {
const { sp, modalitaPartita } = state
const { nomi, striscia } = sp
const setReali = striscia.filter(s => !s._phantom)
const setVinti = { home: 0, guest: 0 }
for (const s of setReali) {
const v = vincitoreSet(s)
if (v === 'h') setVinti.home++
else if (v === 'g') setVinti.guest++
}
const dataOra = now.toLocaleString('it-IT', {
day: '2-digit', month: '2-digit', year: 'numeric',
hour: '2-digit', minute: '2-digit',
})
const giocatoreHtml = (n) => `<div class="giocatore">${n}</div>`
const formazioneHtml = (formazioneSet) => {
if (!formazioneSet) return '<em style="color:#999;font-size:11px">non disponibile</em>'
return `
<div class="form-row">
<div class="form-team">
<div class="form-team-name">${nomi.home}</div>
<div class="giocatori">${formazioneSet.home.map(giocatoreHtml).join('')}</div>
</div>
<div class="form-team">
<div class="form-team-name">${nomi.guest}</div>
<div class="giocatori">${formazioneSet.guest.map(giocatoreHtml).join('')}</div>
</div>
</div>`
}
const setsHtml = setReali.map((s, i) => {
let h = 0, g = 0
const punti = []
for (const c of s.ris) {
c === 'h' ? h++ : g++
punti.push({ chi: c, h, g })
}
const vinc = vincitoreSet(s)
const nomeVinc = vinc === 'h' ? nomi.home : vinc === 'g' ? nomi.guest : ''
const etichettaVinc = nomeVinc ? ` &nbsp;·&nbsp; vinto da <strong>${nomeVinc}</strong>` : ''
const puntiHtml = punti.map(p =>
`<span class="punto punto-${p.chi}">${p.h}-${p.g}</span>`
).join('')
return `
<div class="set-section">
<div class="set-header">
Set ${i + 1} &nbsp;—&nbsp; ${nomi.home} <strong>${h}</strong> · <strong>${g}</strong> ${nomi.guest}${etichettaVinc}
</div>
<div class="form-inizio">
<div class="form-inizio-label">Formazione di partenza</div>
${formazioneHtml(s.formInizio)}
</div>
<div class="punti-grid">${puntiHtml || '<em style="color:#999;font-size:11px">Nessun punto registrato</em>'}</div>
</div>`
}).join('')
const html = `<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Referto — ${nomi.home} vs ${nomi.guest}</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; color: #111; background: #fff; padding: 28px; font-size: 14px; }
@media print { body { padding: 12px; } }
.header { text-align: center; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 20px; }
.titolo { font-size: 18px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }
.meta { font-size: 12px; color: #666; margin-top: 5px; }
.squadre-row { display: flex; justify-content: space-around; align-items: center; margin: 18px 0 6px; }
.nome-sq { font-size: 22px; font-weight: bold; text-align: center; max-width: 40%; }
.vs { font-size: 16px; color: #999; }
.risultato { text-align: center; font-size: 36px; font-weight: bold; letter-spacing: 6px; margin-bottom: 4px; }
.modalita-label { text-align: center; font-size: 12px; color: #888; margin-bottom: 22px; }
.set-section { margin-bottom: 12px; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.set-header { background: #f5f5f5; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid #ddd; }
.punti-grid { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 10px; }
.punto { display: inline-block; padding: 2px 5px; border-radius: 3px; font-size: 11px; font-family: 'Courier New', monospace; white-space: nowrap; }
.punto-h { background: #d0e8ff; color: #003a6e; }
.punto-g { background: #ffddc0; color: #6e2700; }
.form-inizio { padding: 8px 10px; border-bottom: 1px solid #eee; background: #fafafa; }
.form-inizio-label { font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #888; margin-bottom: 7px; }
.form-row { display: flex; gap: 40px; }
.form-team { flex: 1; }
.form-team-name { font-weight: bold; font-size: 13px; margin-bottom: 6px; }
.giocatori { display: flex; gap: 5px; flex-wrap: wrap; }
.giocatore { background: #f0f0f0; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div class="header">
<div class="titolo">Referto di Gara</div>
<div class="meta">${dataOra} &nbsp;·&nbsp; Modalità: ${modalitaPartita}</div>
</div>
<div class="squadre-row">
<div class="nome-sq">${nomi.home}</div>
<div class="vs">vs</div>
<div class="nome-sq">${nomi.guest}</div>
</div>
<div class="risultato">${setVinti.home} ${setVinti.guest}</div>
<div class="modalita-label">set vinti</div>
${setsHtml}
</body>
</html>`
return html
}
// Apre il referto in una nuova scheda e avvia la stampa (effetto collaterale,
// solo browser). La generazione dell'HTML è delegata a buildRefertoHtml.
export function generaReferto(state) {
const html = buildRefertoHtml(state)
const w = window.open('', '_blank')
w.document.write(html)
w.document.close()
w.print()
}
-70
View File
@@ -1,70 +0,0 @@
import { networkInterfaces } from 'os'
import { readFileSync, existsSync } from 'fs'
import { execSync } from 'child_process'
function isWSL() {
try {
return existsSync('/proc/sys/kernel/osrelease') &&
readFileSync('/proc/sys/kernel/osrelease', 'utf8').toLowerCase().includes('microsoft')
} catch { return false }
}
// Un IPv4 è "pubblicabile" in LAN se non è loopback, link-local o bridge Docker.
function isLanIPv4(address) {
return !!address
&& !address.startsWith('127.')
&& !address.startsWith('169.254.')
&& !address.startsWith('172.')
}
// Estrae gli IP LAN da un oggetto in stile os.networkInterfaces().
// Esportata per poter essere testata in isolamento, senza dipendere dalla piattaforma.
export function collectIPs(nets) {
const out = []
for (const name of Object.keys(nets || {})) {
for (const net of nets[name]) {
if (net.family === 'IPv4' && !net.internal && isLanIPv4(net.address)) {
out.push(net.address)
}
}
}
return out
}
// Restituisce gli IP di rete della macchina.
// Passando `nets` (oggetto in stile os.networkInterfaces) si forza il percorso
// deterministico, scavalcando il rilevamento WSL/PowerShell: utile nei test.
export function getNetworkIPs(nets) {
if (nets) return collectIPs(nets)
if (isWSL()) {
try {
const out = execSync(
'powershell.exe -NoProfile -Command "Get-NetIPAddress -AddressFamily IPv4 | Select-Object -ExpandProperty IPAddress"',
{ timeout: 3000 }
)
return out.toString().trim().split('\n')
.map(s => s.trim())
.filter(isLanIPv4)
} catch { return [] }
}
return collectIPs(networkInterfaces())
}
// `networkIPs` è iniettabile per rendere la stampa testabile in modo deterministico.
export function printServerInfo(port = 3000, networkIPs = getNetworkIPs()) {
console.log(`\nSegnapunti Server`)
console.log(` Display: http://127.0.0.1:${port}/display`)
console.log(` Controller: http://127.0.0.1:${port}/controller`)
if (networkIPs.length > 0) {
console.log(`\n Da dispositivi remoti:`)
networkIPs.forEach(ip => {
console.log(` Display: http://${ip}:${port}/display`)
console.log(` Controller: http://${ip}:${port}/controller`)
})
}
console.log()
}
+56 -141
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;
@@ -136,136 +129,58 @@ button:focus-visible {
} }
.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 {
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 {
background: rgba(120, 200, 120, 0.4);
}
.cambi-out input {
background: rgba(200, 120, 120, 0.4);
}
.cambi-input input:focus {
border-color: rgba(255, 255, 255, 0.7);
outline: none;
} }
-200
View File
@@ -1,200 +0,0 @@
import { createInitialState, applyAction } from './gameState.js'
/**
* Crea e configura il server WebSocket per la gestione dello stato di gioco.
* @param {WebSocketServer} wss - Istanza del server WebSocket.
* @returns {Object} Oggetto con metodi di gestione dello stato.
*/
export function setupWebSocketHandler(wss, options = {}) {
// Stato globale della partita.
let gameState = options.initialState ?? createInitialState()
// Mappa dei ruoli associati ai client connessi.
const clients = new Map() // ws -> { role: 'display' | 'controller' }
/**
* Gestisce i messaggi in arrivo dal client
*/
function handleMessage(ws, data) {
try {
// Converte il payload in stringa in modo sicuro, anche se arriva come Buffer.
const dataStr = typeof data === 'string' ? data : data.toString('utf8')
const msg = JSON.parse(dataStr)
if (msg.type === 'register') {
return handleRegister(ws, msg)
}
if (msg.type === 'action') {
return handleAction(ws, msg)
}
if (msg.type === 'speak') {
return handleSpeak(ws, msg)
}
} catch (err) {
console.error('Error processing message:', err, 'data:', data)
// Invia l'errore solo se la connessione e ancora aperta.
if (ws.readyState === 1) { // Stato WebSocket.OPEN
try {
sendError(ws, 'Invalid message format')
} catch (sendErr) {
console.error('Error sending error message:', sendErr)
}
}
}
}
/**
* Gestisce la registrazione di un client (display o controller)
*/
function handleRegister(ws, msg) {
const role = msg.role || 'display'
// Valida il ruolo dichiarato dal client.
if (!['display', 'controller'].includes(role)) {
sendError(ws, 'Invalid role')
return
}
clients.set(ws, { role })
console.log(`[WebSocket] Client registered as: ${role} (total clients: ${clients.size})`)
// Invia subito lo stato corrente, se la connessione e aperta.
if (ws.readyState === 1) { // Stato WebSocket.OPEN
try {
ws.send(JSON.stringify({ type: 'state', state: gameState }))
} catch (err) {
console.error('Error sending initial state:', err)
}
}
}
/**
* Gestisce un'azione di gioco dal controller
*/
function handleAction(ws, msg) {
// Solo i client controller possono inviare azioni.
const client = clients.get(ws)
if (!client || client.role !== 'controller') {
sendError(ws, 'Only controllers can send actions')
return
}
// Verifica il formato dell'azione ricevuta.
if (!msg.action || !msg.action.type) {
sendError(ws, 'Invalid action format')
return
}
// Applica l'azione allo stato della partita.
const previousState = gameState
try {
gameState = applyAction(gameState, msg.action)
} catch (err) {
console.error('Error applying action:', err)
sendError(ws, 'Failed to apply action')
gameState = previousState
return
}
// Propaga il nuovo stato a tutti i client connessi.
broadcastState()
options.onStateChange?.(gameState)
}
/**
* Gestisce una richiesta di sintesi vocale proveniente dal controller.
* Il messaggio viene inoltrato solo ai client registrati come display.
*/
function handleSpeak(ws, msg) {
const client = clients.get(ws)
if (!client || client.role !== 'controller') {
sendError(ws, 'Only controllers can request speech')
return
}
if (typeof msg.text !== 'string' || msg.text.trim() === '') {
sendError(ws, 'Invalid speak payload')
return
}
const speakMsg = JSON.stringify({ type: 'speak', text: msg.text.trim() })
clients.forEach((meta, clientWs) => {
if (meta.role === 'display' && clientWs.readyState === 1) {
clientWs.send(speakMsg)
}
})
}
/**
* Invia un messaggio di errore al client
*/
function sendError(ws, message) {
if (ws.readyState === 1) { // Stato WebSocket.OPEN
try {
ws.send(JSON.stringify({ type: 'error', message }))
} catch (err) {
console.error('Failed to send error message:', err)
}
}
}
/**
* Invia lo stato corrente a tutti i client connessi.
*/
function broadcastState() {
const stateMsg = JSON.stringify({ type: 'state', state: gameState })
wss.clients.forEach((client) => {
if (client.readyState === 1) { // Stato WebSocket.OPEN
client.send(stateMsg)
}
})
}
/**
* Gestisce la chiusura della connessione
*/
function handleClose(ws) {
const client = clients.get(ws)
const role = client?.role || 'unknown'
console.log(`[WebSocket] Client disconnected (role: ${role})`)
clients.delete(ws)
}
/**
* Gestisce gli errori WebSocket
*/
function handleError(err, ws) {
console.error('WebSocket error:', err)
// In caso di frame non validi, chiude forzatamente la connessione.
if (err.code === 'WS_ERR_INVALID_CLOSE_CODE' || err.code === 'WS_ERR_INVALID_UTF8') {
try {
if (ws && ws.readyState === 1) { // Stato WebSocket.OPEN
ws.terminate() // Chiusura forzata senza handshake di chiusura.
}
} catch (closeErr) {
console.error('Error closing connection:', closeErr)
}
}
}
// Registra gli handler per ogni nuova connessione.
wss.on('connection', (ws) => {
// Imposta il tipo binario per ridurre i problemi di codifica.
ws.binaryType = 'arraybuffer'
ws.on('message', (data) => handleMessage(ws, data))
ws.on('close', () => handleClose(ws))
ws.on('error', (err) => handleError(err, ws))
})
// Espone un'API pubblica per controllo esterno, se necessario.
return {
getState: () => gameState,
setState: (newState) => { gameState = newState },
broadcastState,
getClients: () => clients,
}
}
-146
View File
@@ -1,146 +0,0 @@
import { createInitialState, punteggio, servizio, setVinti } from './gameState.js'
export function createWsMixin(role) {
return {
data() {
return {
ws: null,
wsConnected: false,
isConnecting: false,
reconnectTimeout: null,
reconnectAttempts: 0,
maxReconnectDelay: 30000,
state: createInitialState(),
}
},
computed: {
punt() { return punteggio(this.state.sp.striscia) },
servHome() { return servizio(this.state.sp.striscia) },
set() { return setVinti(this.state.sp.striscia) },
},
mounted() {
this.connectWebSocket()
if (import.meta.hot) {
import.meta.hot.on('vite:beforeUpdate', () => {
if (this.reconnectTimeout) {
clearTimeout(this.reconnectTimeout)
this.reconnectTimeout = null
}
})
}
},
beforeUnmount() {
if (this.reconnectTimeout) {
clearTimeout(this.reconnectTimeout)
this.reconnectTimeout = null
}
if (this.ws) {
this.ws.onclose = null
this.ws.onerror = null
this.ws.onmessage = null
this.ws.onopen = null
try {
if (this.ws.readyState === WebSocket.OPEN) {
this.ws.close(1000, 'Component unmounting')
} else if (this.ws.readyState === WebSocket.CONNECTING) {
this.ws.close()
}
} catch (err) {
console.error(`[${role}] Error closing WebSocket:`, err)
}
this.ws = null
}
},
methods: {
connectWebSocket() {
if (this.isConnecting) return
if (this.ws) {
this.ws.onclose = null
this.ws.onerror = null
this.ws.onmessage = null
this.ws.onopen = null
try {
if (this.ws.readyState === WebSocket.OPEN) {
this.ws.close(1000, 'Reconnecting')
} else if (this.ws.readyState === WebSocket.CONNECTING) {
this.ws.close()
}
} catch (err) {
console.error(`[${role}] Error closing previous WebSocket:`, err)
}
this.ws = null
}
this.isConnecting = true
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
const params = new URLSearchParams(location.search)
const defaultHost = (location.hostname === 'localhost' || location.hostname === '::1')
? `127.0.0.1${location.port ? `:${location.port}` : ''}`
: location.host
const wsUrl = `${protocol}//${params.get('wsHost') || defaultHost}/ws`
try {
this.ws = new WebSocket(wsUrl)
} catch (err) {
console.error(`[${role}] Failed to create WebSocket:`, err)
this.isConnecting = false
this.scheduleReconnect()
return
}
this.ws.onopen = () => {
this.isConnecting = false
this.wsConnected = true
this.reconnectAttempts = 0
try {
this.ws?.send(JSON.stringify({ type: 'register', role }))
} catch (err) {
console.error(`[${role}] Failed to register:`, err)
}
}
this.ws.onmessage = (event) => {
try {
const msg = JSON.parse(event.data)
if (msg.type === 'state') this.state = msg.state
else this.onWsMessage?.(msg)
} catch (e) {
console.error(`[${role}] Error parsing message:`, e)
}
}
this.ws.onclose = (event) => {
this.isConnecting = false
this.wsConnected = false
if (event.code !== 1000 && event.code !== 1001) this.scheduleReconnect()
}
this.ws.onerror = () => {
this.isConnecting = false
this.wsConnected = false
}
},
scheduleReconnect() {
if (this.reconnectTimeout) return
const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), this.maxReconnectDelay)
this.reconnectAttempts++
this.reconnectTimeout = setTimeout(() => {
this.reconnectTimeout = null
this.connectWebSocket()
}, delay)
},
sendWs(msg) {
if (!this.wsConnected || this.ws?.readyState !== WebSocket.OPEN) return false
try {
this.ws.send(JSON.stringify(msg))
return true
} catch (err) {
console.error(`[${role}] Failed to send:`, err)
return false
}
},
},
}
}
-108
View File
@@ -1,108 +0,0 @@
# TODO — completamento suite di test
Checkpoint: branch `test-suite-repair`, commit `bf9a6f8`.
## Contesto
La suite era allineata a una **vecchia forma dello stato** (`sp.punt` / `sp.set` /
`sp.servHome`) e a una **vecchia architettura e2e** (controller su `:3001`).
Baseline iniziale: **77/170 test Vitest falliti**, **tutti gli e2e rotti**.
Nel commit `bf9a6f8`:
- Vitest riportato a **212/212 verde** (verificato con `npx vitest run`).
- e2e migrati **parzialmente** (porte + viewport + reset→config), **NON verificati verdi**.
---
## ✅ Fatto (verificato)
- `tests/unit/gameState.test.js` — riscritto con helper che derivano
punteggio/set/servizio dalla striscia; aggiunto blocco `formInizio`.
- `src/server-utils.js``getNetworkIPs(nets)` con interfacce iniettabili +
`printServerInfo(port, ips)` con IP iniettabili (deterministico anche su WSL);
filtro LAN unificato (esclude `127.` / `169.254.` / `172.`). Test riscritto.
- `tests/integration/websocket.test.js` + `tests/stress/websocket-load.test.js`
— punteggio letto via `punteggio(striscia)`.
- `tests/component/ControllerPage.test.js` + `DisplayPage.test.js` — forzato
layout mobile (viewport portrait), punteggi via striscia; aggiunto test REFERTO.
- Nuovi unit/integration: `referto.test.js`, `persist.test.js` (mock `fs`),
`wsMixin.test.js`, `integration/server.test.js` (routing).
- `src/referto.js` — estratta `buildRefertoHtml(state, now)` pura; `generaReferto`
resta wrapper con `window.open`/`print`.
- `server.js` — estratti `createApp()` / `startServer()`; avvio solo se entrypoint.
---
## ⚠️ Da finire / verificare — e2e Playwright
Gli e2e NON sono stati eseguiti fino a verde (run lenti). Punto di ripartenza.
### Fix già applicati nei 6 spec
1. `:3001``:3000/controller`.
2. `setViewportSize({ width: 390, height: 844 })` prima di ogni `goto` controller
(su desktop renderizza la dashboard landscape `.e-dash`, ma i test cercano il
markup mobile `.team-score` / `.team-pts` / `.btn-set`).
3. Il reset ora chiude il dialog di configurazione che `doReset()` apre in automatico.
4. `game-simulation`: a 25 gestito il modal automatico "SET VINTO" con
"VAI AL SET SUCCESSIVO".
### Da verificare / probabili fix residui
- [ ] **`full-match.spec.cjs`** — RISCHIO ALTO. I test arrivano a 25/15 → scatta
il modal automatico (`squadraVincente`). Le asserzioni che cliccano
`.btn-set` o `.team-score` DOPO i 25 punti vengono bloccate dall'overlay del
modal. Da rivedere il flusso (usare i bottoni del modal).
- [ ] **`game-simulation.spec.cjs`** — verificare il nuovo finale col modal.
- [ ] **`game-operations.spec.cjs`** — verificare flusso cambi/toggle/config dopo
`resetGame` (config ora chiuso).
- [ ] **`basic-flow.spec.cjs`** — probabile OK, confermare.
- [ ] **`accessibility.spec.cjs`** — rieseguire axe sul markup attuale.
- [ ] **`visual-regression.spec.cjs`** — FALLIRÀ: snapshot baseline della vecchia
UI. Rigenerare con `npm run test:e2e -- --update-snapshots` DOPO aver
sistemato il resto.
### Note importanti
- Stato e2e **condiviso e persistente** (`.segnapunti/state.json`): i test
dipendono dall'ordine e dal reset. Partire da stato pulito.
- I 3 progetti Playwright (chromium, firefox, Mobile Chrome) girano in serie
(`workers: 1`).
---
## ⬜ Non ancora iniziato
- [ ] **`tests/e2e/referto.spec.cjs`** (nuovo) — portare una partita 2/3 a fine
match, intercettare il popup con `page.waitForEvent('popup')` dopo il click
su REFERTO, verificare nomi squadre + punteggi. Stubbare `window.print`
(via `addInitScript`) perché può bloccare.
- [ ] **Documentazione**:
- `README.md` — sezione Controller: aggiungere il referto (PARTITA FINITA →
referto stampabile/PDF, prototipo). Sezione Test: aggiungere `test:ui`.
- `CLAUDE.md` — aggiungere `src/referto.js` (`buildRefertoHtml` + `generaReferto`),
menzionare `wsMixin.js` / `persist.js` / `server-utils.js`; nota su `formInizio`.
- `tests/README.md` — correggere i conteggi obsoleti ("159 passed (159)",
"6 files"); aggiungere referto / persist / wsMixin / routing server / spec
referto.
---
## Comandi utili
```bash
# Vitest (deve restare verde: 212/212)
npx vitest run
# e2e — partire da stato pulito + server attivo
rm -f .segnapunti/state.json
npm run serve # in un terminale a parte
# e2e mirati (chromium, dai più rischiosi)
npx playwright test --config=playwright.config.cjs --project=chromium tests/e2e/full-match.spec.cjs
npx playwright test --config=playwright.config.cjs --project=chromium tests/e2e/game-simulation.spec.cjs
# rigenerare gli snapshot visual DOPO aver sistemato la UI dei test
npm run test:e2e -- --update-snapshots
# suite e2e completa (3 browser, lenta)
npm run test:e2e
```
-281
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.
-314
View File
@@ -1,314 +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'
import { generaReferto } from '../../src/referto.js'
// Il referto apre una finestra/print: lo mockiamo per testarne solo l'invocazione.
vi.mock('../../src/referto.js', () => ({ generaReferto: vi.fn() }))
// Mock globale WebSocket per jsdom
class MockWebSocket {
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)
// Forza l'orientamento portrait → il controller usa il layout "mobile"
// (con .team-pts, .btn-ctrl, ecc.) su cui questi test fanno asserzioni.
Object.defineProperty(window, 'innerWidth', { value: 400, writable: true, configurable: true })
Object.defineProperty(window, 'innerHeight', { value: 800, writable: true, configurable: true })
// Imposta il punteggio del set in corso costruendo una ris coerente.
// `serv` ('h'|'g') controlla l'ultimo punto, quindi chi risulta al servizio.
function setScore(wrapper, home, guest, serv = 'h') {
const altro = serv === 'h' ? 'g' : 'h'
const nAltro = serv === 'h' ? guest : home
const nServ = serv === 'h' ? home : guest
// mette per ultimo il carattere del battitore desiderato
wrapper.vm.state.sp.striscia.at(-1).ris = altro.repeat(nAltro) + serv.repeat(nServ)
}
// Helper per creare il componente con stato personalizzato
function mountController(stateOverrides = {}) {
const wrapper = mount(ControllerPage, {
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()
setScore(wrapper, 5, 0)
await wrapper.vm.$nextTick()
const btn = wrapper.findAll('.btn-ctrl').find(b => b.text().includes('Cambio Palla'))
expect(btn.attributes('disabled')).toBeDefined()
})
})
// =============================================
// 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()
setScore(wrapper, 5, 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()
setScore(wrapper, 15, 10, 'h')
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()
setScore(wrapper, 10, 15, 'g')
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')
})
})
// =============================================
// REFERTO (modal PARTITA FINITA)
// =============================================
describe('Referto', () => {
// Porta il componente allo stato "partita finita" per home in 2/3
function setPartitaFinita(wrapper) {
wrapper.vm.state.modalitaPartita = '2/3'
wrapper.vm.state.sp.striscia = [
{ serv: 'h', ris: '', vinc: 'h' },
{ serv: 'h', ris: '', vinc: null },
]
wrapper.vm.setVintoTeam = 'home'
wrapper.vm.showSetVinto = true
}
it('mostra il bottone REFERTO quando la partita è finita', async () => {
const wrapper = mountController()
setPartitaFinita(wrapper)
await wrapper.vm.$nextTick()
expect(wrapper.vm.isPartitaFinita).toBe(true)
const btn = wrapper.findAll('.btn-secondary').find(b => b.text().includes('REFERTO'))
expect(btn).toBeDefined()
})
it('il click su REFERTO invoca generaReferto con lo stato', async () => {
const wrapper = mountController()
setPartitaFinita(wrapper)
await wrapper.vm.$nextTick()
const btn = wrapper.findAll('.btn-secondary').find(b => b.text().includes('REFERTO'))
await btn.trigger('click')
expect(generaReferto).toHaveBeenCalledWith(wrapper.vm.state)
})
it('NON mostra il bottone REFERTO a set vinto (partita non finita)', async () => {
const wrapper = mountController()
wrapper.vm.state.modalitaPartita = '3/5'
wrapper.vm.setVintoTeam = 'home'
wrapper.vm.showSetVinto = true
await wrapper.vm.$nextTick()
expect(wrapper.vm.isPartitaFinita).toBe(false)
const btn = wrapper.findAll('.btn-secondary').find(b => b.text().includes('REFERTO'))
expect(btn).toBeUndefined()
})
})
// =============================================
// 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')
})
})
})
-195
View File
@@ -1,195 +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()
// il punteggio si ricava dalla striscia: 15 punti home + 12 guest
wrapper.vm.state.sp.striscia.at(-1).ris = 'h'.repeat(15) + 'g'.repeat(12)
await wrapper.vm.$nextTick()
const punti = wrapper.findAll('.punt')
expect(punti[0].text()).toBe('15')
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')
})
})
})
-174
View File
@@ -1,174 +0,0 @@
// @vitest-environment happy-dom
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createWsMixin } from '../../src/wsMixin.js'
import { createInitialState } from '../../src/gameState.js'
// WebSocket mock controllabile: i gestori (onopen/onmessage/onclose) vengono
// assegnati dal mixin e li invochiamo manualmente nei test.
class MockWebSocket {
static CONNECTING = 0
static OPEN = 1
static CLOSING = 2
static CLOSED = 3
constructor(url) {
this.url = url
this.readyState = MockWebSocket.CONNECTING
this.send = vi.fn()
this.close = vi.fn()
MockWebSocket.instances.push(this)
}
}
MockWebSocket.instances = []
vi.stubGlobal('WebSocket', MockWebSocket)
// Monta un componente che usa il mixin. `extra` permette di aggiungere hook.
function mountWith(role = 'controller', extra = {}) {
const Comp = {
mixins: [createWsMixin(role)],
template: '<div></div>',
...extra,
}
return mount(Comp)
}
function ultimaWs() {
return MockWebSocket.instances.at(-1)
}
describe('createWsMixin (wsMixin.js)', () => {
beforeEach(() => {
MockWebSocket.instances = []
})
afterEach(() => {
vi.restoreAllMocks()
})
describe('computed derivati', () => {
it('punt/servHome/set delegano alle funzioni pure sulla striscia', async () => {
const wrapper = mountWith()
wrapper.vm.state.sp.striscia = [
{ serv: 'h', ris: 'h', vinc: 'h' },
{ serv: 'h', ris: 'h'.repeat(10) + 'g'.repeat(8), vinc: null },
]
await wrapper.vm.$nextTick()
expect(wrapper.vm.punt).toEqual({ home: 10, guest: 8 })
expect(wrapper.vm.set).toEqual({ home: 1, guest: 0 })
// ultimo punto 'g' → serve guest
expect(wrapper.vm.servHome).toBe(false)
})
})
describe('connessione', () => {
it('apre una WebSocket verso /ws al mount', () => {
mountWith()
const ws = ultimaWs()
expect(ws).toBeDefined()
expect(ws.url).toMatch(/^ws:\/\/.+\/ws$/)
})
it('invia il messaggio register all\'apertura', () => {
const wrapper = mountWith('controller')
const ws = ultimaWs()
ws.readyState = MockWebSocket.OPEN
ws.onopen()
expect(ws.send).toHaveBeenCalledTimes(1)
const msg = JSON.parse(ws.send.mock.calls[0][0])
expect(msg).toEqual({ type: 'register', role: 'controller' })
expect(wrapper.vm.wsConnected).toBe(true)
})
it('un messaggio "state" aggiorna lo stato locale', () => {
const wrapper = mountWith()
const ws = ultimaWs()
const nuovo = createInitialState()
nuovo.sp.nomi.home = 'Nuova Squadra'
ws.onmessage({ data: JSON.stringify({ type: 'state', state: nuovo }) })
expect(wrapper.vm.state.sp.nomi.home).toBe('Nuova Squadra')
})
it('un messaggio non-state invoca l\'hook onWsMessage', () => {
const onWsMessage = vi.fn()
const wrapper = mountWith('display', { methods: { onWsMessage } })
const ws = ultimaWs()
ws.onmessage({ data: JSON.stringify({ type: 'speak', text: 'ciao' }) })
expect(onWsMessage).toHaveBeenCalledWith({ type: 'speak', text: 'ciao' })
})
})
describe('riconnessione', () => {
it('scheduleReconnect usa backoff esponenziale con cap a 30s', () => {
const wrapper = mountWith()
const delays = []
const spy = vi.spyOn(globalThis, 'setTimeout').mockImplementation(() => 123)
// intercetta i delay leggendoli dalle chiamate
spy.mockImplementation((_fn, d) => { delays.push(d); return 123 })
wrapper.vm.reconnectAttempts = 0
wrapper.vm.reconnectTimeout = null
wrapper.vm.scheduleReconnect() // 1000
wrapper.vm.reconnectTimeout = null
wrapper.vm.scheduleReconnect() // 2000
wrapper.vm.reconnectTimeout = null
wrapper.vm.scheduleReconnect() // 4000
expect(delays).toEqual([1000, 2000, 4000])
// attempts alto → cap a 30000
delays.length = 0
wrapper.vm.reconnectAttempts = 20
wrapper.vm.reconnectTimeout = null
wrapper.vm.scheduleReconnect()
expect(delays[0]).toBe(30000)
spy.mockRestore()
})
it('non riconnette su chiusura pulita (1000/1001)', () => {
const wrapper = mountWith()
const ws = ultimaWs()
const spy = vi.spyOn(wrapper.vm, 'scheduleReconnect')
ws.onclose({ code: 1000 })
ws.onclose({ code: 1001 })
expect(spy).not.toHaveBeenCalled()
expect(wrapper.vm.wsConnected).toBe(false)
})
it('riconnette su chiusura anomala (es. 1006)', () => {
const wrapper = mountWith()
const ws = ultimaWs()
const spy = vi.spyOn(wrapper.vm, 'scheduleReconnect')
ws.onclose({ code: 1006 })
expect(spy).toHaveBeenCalled()
})
})
describe('sendWs', () => {
it('ritorna false se non connesso', () => {
const wrapper = mountWith()
wrapper.vm.wsConnected = false
expect(wrapper.vm.sendWs({ type: 'action' })).toBe(false)
})
it('serializza e invia se connesso e aperto', () => {
const wrapper = mountWith()
const ws = ultimaWs()
ws.readyState = MockWebSocket.OPEN
wrapper.vm.wsConnected = true
const ok = wrapper.vm.sendWs({ type: 'action', action: { type: 'incPunt' } })
expect(ok).toBe(true)
const inviato = JSON.parse(ws.send.mock.calls.at(-1)[0])
expect(inviato.type).toBe('action')
})
})
describe('cleanup', () => {
it('beforeUnmount chiude la WebSocket', () => {
const wrapper = mountWith()
const ws = ultimaWs()
wrapper.unmount()
expect(ws.close).toHaveBeenCalled()
})
})
})
-75
View File
@@ -1,75 +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.setViewportSize({ width: 390, height: 844 });
await page.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await page.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await page.goto('http://localhost:3000/controller');
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);
}
});
});
-139
View File
@@ -1,139 +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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
// 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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
// 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();
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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();
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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();
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.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');
});
});
-139
View File
@@ -1,139 +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();
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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');
});
});
-194
View File
@@ -1,194 +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();
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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();
});
});
-76
View File
@@ -1,76 +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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
// 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();
}
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.click();
}
await controllerPage.waitForTimeout(200);
// 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.
// A 25-0 compare automaticamente il dialog "SET VINTO"
await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('25');
await controllerPage.waitForSelector('.dialog-winner');
// Procedi al set successivo: registra il set vinto da Home
await controllerPage.getByText('VAI AL SET SUCCESSIVO').click();
await controllerPage.waitForTimeout(300);
// Verifica che il set Home sia incrementato a 1
await expect(controllerPage.locator('.team-score.home-bg .team-set')).toContainText('SET 1');
});
});
-95
View File
@@ -1,95 +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();
}
// doReset apre automaticamente il dialog di configurazione: chiudilo
const cfgCancel = controllerPage.locator('.dialog-config .btn-cancel');
if (await cfgCancel.isVisible()) {
await cfgCancel.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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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.setViewportSize({ width: 390, height: 844 });
await controllerPage.goto('http://localhost:3000/controller');
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

-66
View File
@@ -1,66 +0,0 @@
import { describe, it, expect, beforeAll, afterAll } from 'vitest'
import { mkdtempSync, writeFileSync, rmSync } from 'fs'
import { tmpdir } from 'os'
import { join } from 'path'
import { createApp } from '../../server.js'
// Usiamo una dist temporanea con file marcatori, così il test non dipende da
// una build reale ed è deterministico.
let server
let baseUrl
let distDir
beforeAll(async () => {
distDir = mkdtempSync(join(tmpdir(), 'segnapunti-dist-'))
writeFileSync(join(distDir, 'index.html'), 'DISPLAY_MARKER')
writeFileSync(join(distDir, 'controller.html'), 'CONTROLLER_MARKER')
writeFileSync(join(distDir, 'app.js'), 'ASSET_MARKER')
const app = createApp(distDir)
await new Promise((resolve) => {
server = app.listen(0, () => {
baseUrl = `http://127.0.0.1:${server.address().port}`
resolve()
})
})
})
afterAll(async () => {
await new Promise((resolve) => server.close(resolve))
rmSync(distDir, { recursive: true, force: true })
})
async function get(path) {
const res = await fetch(baseUrl + path)
return { status: res.status, body: await res.text() }
}
describe('Routing server (server.js)', () => {
it('GET / serve la pagina display', async () => {
const { status, body } = await get('/')
expect(status).toBe(200)
expect(body).toBe('DISPLAY_MARKER')
})
it('GET /display serve la pagina display', async () => {
expect((await get('/display')).body).toBe('DISPLAY_MARKER')
})
it('GET /display/qualsiasi serve comunque la pagina display (SPA)', async () => {
expect((await get('/display/foo/bar')).body).toBe('DISPLAY_MARKER')
})
it('GET /controller serve la pagina controller', async () => {
expect((await get('/controller')).body).toBe('CONTROLLER_MARKER')
})
it('GET /controller/qualsiasi serve comunque la pagina controller', async () => {
expect((await get('/controller/foo')).body).toBe('CONTROLLER_MARKER')
})
it('serve gli asset statici dalla dist', async () => {
const { status, body } = await get('/app.js')
expect(status).toBe(200)
expect(body).toBe('ASSET_MARKER')
})
})
-407
View File
@@ -1,407 +0,0 @@
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import { setupWebSocketHandler } from '../../src/websocket-handler.js'
import { punteggio } from '../../src/gameState.js'
import { EventEmitter } from 'events'
// Il punteggio non è memorizzato nello stato: si ricava dalla striscia.
const puntHome = (state) => punteggio(state.sp.striscia).home
// Mock parziale di una WebSocket e del Server
class MockWebSocket extends EventEmitter {
constructor() {
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(puntHome(sentMsg.state)).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(puntHome(msg1.state)).toBe(1)
expect(puntHome(msg2.state)).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(puntHome(msg.state)).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(puntHome(state)).toBe(0)
expect(punteggio(state.sp.striscia).guest).toBe(0)
})
it('setState dovrebbe sovrascrivere lo stato', () => {
const newState = handler.getState()
newState.sp.striscia.at(-1).ris = 'hh'
handler.setState(newState)
expect(puntHome(handler.getState())).toBe(2)
})
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)
})
})
})
-122
View File
@@ -1,122 +0,0 @@
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import { setupWebSocketHandler } from '../../src/websocket-handler.js'
import { punteggio } from '../../src/gameState.js'
import { EventEmitter } from 'events'
// Il punteggio si ricava dalla striscia, non è memorizzato nello stato.
const punt = (state) => punteggio(state.sp.striscia)
class MockWebSocket extends EventEmitter {
constructor() {
super()
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(punt(msg.state).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(punt(state).home).toBe(25)
// Guest: non può segnare dopo vittoria? No, checkVittoria blocca solo il team che ha vinto?
// Controlliamo: checkVittoria controlla ENTRAMBI i team.
// A 25-0 → vittoria=true → incPunt per guest è anche bloccato
expect(punt(state).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(punt(lastMsg.state).home).toBe(5)
}
})
})
-818
View File
@@ -1,818 +0,0 @@
import { describe, it, expect, beforeEach } from 'vitest'
import {
createInitialState, applyAction, checkVittoria, checkVittoriaPartita,
punteggio, setVinti, servizio,
} from '../../src/gameState.js'
// =============================================
// HELPER
// Lo stato non memorizza più punteggio/set/servizio direttamente:
// si ricavano dalla striscia tramite le funzioni pure esportate.
// =============================================
// Punteggio del set in corso
const puntDi = (s) => punteggio(s.sp.striscia)
// Set vinti nel match
const setDi = (s) => setVinti(s.sp.striscia)
// true se serve Home
const servDi = (s) => servizio(s.sp.striscia)
// Imposta chi serve a inizio set (set in corso a 0-0)
function setServizioIniziale(state, team) {
state.sp.striscia.at(-1).serv = team === 'home' ? 'h' : 'g'
}
// Imposta il punteggio del set in corso costruendo una ris coerente
function setPunteggio(state, home, guest) {
state.sp.striscia.at(-1).ris = 'h'.repeat(home) + 'g'.repeat(guest)
}
// Aggiunge set già conclusi (vinti) PRIMA del set in corso
function setSetVinti(state, home, guest) {
const conclusi = []
for (let i = 0; i < home; i++) conclusi.push({ serv: 'h', ris: '', vinc: 'h' })
for (let i = 0; i < guest; i++) conclusi.push({ serv: 'g', ris: '', vinc: 'g' })
state.sp.striscia = [...conclusi, state.sp.striscia.at(-1)]
}
describe('Game Logic (gameState.js)', () => {
let state
beforeEach(() => {
state = createInitialState()
})
// =============================================
// STATO INIZIALE
// =============================================
describe('Stato iniziale', () => {
it('dovrebbe iniziare con 0-0', () => {
expect(puntDi(state).home).toBe(0)
expect(puntDi(state).guest).toBe(0)
})
it('dovrebbe avere i set a 0', () => {
expect(setDi(state).home).toBe(0)
expect(setDi(state).guest).toBe(0)
})
it('dovrebbe avere servizio Home', () => {
expect(servDi(state)).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 con un set vuoto', () => {
expect(state.sp.striscia).toHaveLength(1)
expect(state.sp.striscia[0].serv).toBe('h')
expect(state.sp.striscia[0].ris).toBe('')
})
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(puntDi(newState).home).toBe(1)
expect(puntDi(newState).guest).toBe(0)
})
it('dovrebbe incrementare i punti Guest', () => {
const newState = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(puntDi(newState).guest).toBe(1)
expect(puntDi(newState).home).toBe(0)
})
it('dovrebbe gestire il cambio palla (Guest segna, batteva Home)', () => {
setServizioIniziale(state, 'home')
const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(servDi(s1)).toBe(false)
})
it('dovrebbe gestire il cambio palla (Home segna, batteva Guest)', () => {
setServizioIniziale(state, 'guest')
const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
expect(servDi(s1)).toBe(true)
})
it('non dovrebbe cambiare palla se segna chi batte', () => {
setServizioIniziale(state, 'home')
const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
expect(servDi(s1)).toBe(true)
})
it('dovrebbe ruotare la formazione al cambio palla', () => {
setServizioIniziale(state, 'home')
state.sp.form.guest = ["1", "2", "3", "4", "5", "6"]
const newState = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(newState.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
})
it('non dovrebbe ruotare la formazione se non c\'è cambio palla', () => {
setServizioIniziale(state, 'home')
state.sp.form.home = ["1", "2", "3", "4", "5", "6"]
const newState = applyAction(state, { type: 'incPunt', team: 'home' })
expect(newState.sp.form.home).toEqual(["1", "2", "3", "4", "5", "6"])
})
it('dovrebbe aggiornare la striscia per punto Home', () => {
const s = applyAction(state, { type: 'incPunt', team: 'home' })
expect(s.sp.striscia.at(-1).ris).toBe('h')
})
it('dovrebbe aggiornare la striscia per punto Guest', () => {
const s = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(s.sp.striscia.at(-1).ris).toBe('g')
})
it('dovrebbe registrare scorer nella striscia', () => {
let s = applyAction(state, { type: 'incPunt', team: 'home' })
s = applyAction(s, { type: 'incPunt', team: 'guest' })
s = applyAction(s, { type: 'incPunt', team: 'home' })
expect(s.sp.striscia.at(-1).ris).toBe('hgh')
})
it('non dovrebbe incrementare i punti dopo vittoria', () => {
setPunteggio(state, 25, 23)
const s = applyAction(state, { type: 'incPunt', team: 'home' })
expect(puntDi(s).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(puntDi(s2).home).toBe(0)
expect(puntDi(s2).guest).toBe(0)
})
it('dovrebbe annullare l\'ultimo punto Guest', () => {
const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
const s2 = applyAction(s1, { type: 'decPunt' })
expect(puntDi(s2).home).toBe(0)
expect(puntDi(s2).guest).toBe(0)
})
it('non dovrebbe fare nulla sullo stato iniziale', () => {
const s = applyAction(state, { type: 'decPunt' })
expect(puntDi(s).home).toBe(0)
expect(puntDi(s).guest).toBe(0)
})
it('dovrebbe ripristinare il servizio dopo undo con cambio palla', () => {
setServizioIniziale(state, 'home')
const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(servDi(s1)).toBe(false)
const s2 = applyAction(s1, { type: 'decPunt' })
expect(servDi(s2)).toBe(true)
})
it('dovrebbe invertire la rotazione dopo undo con cambio palla', () => {
setServizioIniziale(state, 'home')
state.sp.form.guest = ["1", "2", "3", "4", "5", "6"]
const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
expect(s1.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
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.at(-1).ris).toBe('')
})
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(puntDi(s).home).toBe(2)
expect(puntDi(s).guest).toBe(1)
s = applyAction(s, { type: 'decPunt' })
expect(puntDi(s).home).toBe(1)
s = applyAction(s, { type: 'decPunt' })
expect(puntDi(s).guest).toBe(0)
s = applyAction(s, { type: 'decPunt' })
expect(puntDi(s).home).toBe(0)
})
})
// =============================================
// FORMAZIONE DI PARTENZA (formInizio)
// =============================================
describe('formInizio', () => {
it('dovrebbe salvare la formazione corrente al primo punto del set', () => {
const s = applyAction(state, { type: 'incPunt', team: 'home' })
expect(s.sp.striscia.at(-1).formInizio).toEqual({
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
})
})
it('formInizio è uno snapshot: la rotazione successiva non lo modifica', () => {
setServizioIniziale(state, 'home')
// 1° punto Home: nessun cambio palla, salva formInizio
let s = applyAction(state, { type: 'incPunt', team: 'home' })
// 2° punto Guest: cambio palla → ruota la formazione guest
s = applyAction(s, { type: 'incPunt', team: 'guest' })
expect(s.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
// lo snapshot resta quello iniziale
expect(s.sp.striscia.at(-1).formInizio.guest).toEqual(["1", "2", "3", "4", "5", "6"])
})
it('decPunt che riporta il set a 0-0 cancella formInizio', () => {
const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
expect(s1.sp.striscia.at(-1).formInizio).toBeDefined()
const s2 = applyAction(s1, { type: 'decPunt' })
expect(s2.sp.striscia.at(-1).formInizio).toBeUndefined()
})
it('decPunt con punti ancora presenti NON cancella formInizio', () => {
let s = applyAction(state, { type: 'incPunt', team: 'home' })
s = applyAction(s, { type: 'incPunt', team: 'home' })
s = applyAction(s, { type: 'decPunt' })
expect(s.sp.striscia.at(-1).ris).toBe('h')
expect(s.sp.striscia.at(-1).formInizio).toBeDefined()
})
it('ogni set mantiene la propria formInizio', () => {
const custom = ['7', '8', '9', '10', '11', '12']
let s = applyAction(state, { type: 'setFormazione', team: 'home', form: custom })
// primo punto del set 1: salva formInizio custom
s = applyAction(s, { type: 'incPunt', team: 'home' })
// chiude il set 1 e ne apre uno nuovo (formazioni resettate a default)
s = applyAction(s, { type: 'nuovoSet', team: 'home' })
// primo punto del set 2: salva formInizio default
s = applyAction(s, { type: 'incPunt', team: 'home' })
expect(s.sp.striscia[0].formInizio.home).toEqual(custom)
expect(s.sp.striscia.at(-1).formInizio.home).toEqual(['1', '2', '3', '4', '5', '6'])
})
})
// =============================================
// INCREMENTO SET (incSet)
// =============================================
describe('incSet', () => {
it('dovrebbe incrementare il set Home', () => {
const s = applyAction(state, { type: 'incSet', team: 'home' })
expect(setDi(s).home).toBe(1)
})
it('dovrebbe incrementare il set Guest', () => {
const s = applyAction(state, { type: 'incSet', team: 'guest' })
expect(setDi(s).guest).toBe(1)
})
it('dovrebbe fare wrap da 2 a 0', () => {
let s = applyAction(state, { type: 'incSet', team: 'home' })
s = applyAction(s, { type: 'incSet', team: 'home' })
expect(setDi(s).home).toBe(2)
s = applyAction(s, { type: 'incSet', team: 'home' })
expect(setDi(s).home).toBe(0)
})
it('dovrebbe incrementare da 1 a 2', () => {
let s = applyAction(state, { type: 'incSet', team: 'home' })
expect(setDi(s).home).toBe(1)
s = applyAction(s, { type: 'incSet', team: 'home' })
expect(setDi(s).home).toBe(2)
})
})
// =============================================
// NUOVO SET (nuovoSet)
// =============================================
describe('nuovoSet', () => {
it('dovrebbe incrementare il set della squadra vincente', () => {
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(setDi(s).home).toBe(1)
expect(setDi(s).guest).toBe(0)
})
it('dovrebbe azzerare i punti nel nuovo set', () => {
setPunteggio(state, 25, 10)
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(puntDi(s).home).toBe(0)
expect(puntDi(s).guest).toBe(0)
})
it('dovrebbe aggiungere un nuovo set vuoto alla striscia', () => {
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.striscia).toHaveLength(2)
expect(s.sp.striscia.at(-1).ris).toBe('')
expect(s.sp.striscia.at(-1).serv).toBe('h')
})
it('dovrebbe conservare il set precedente nella striscia', () => {
state.sp.striscia[0].ris = 'hgh'
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.striscia[0].ris).toBe('hgh')
})
it('dovrebbe resettare le formazioni', () => {
state.sp.form.home = ['7', '8', '9', '10', '11', '12']
state.sp.form.guest = ['7', '8', '9', '10', '11', '12']
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
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 ignorare team non valido', () => {
const s = applyAction(state, { type: 'nuovoSet', team: 'invalid' })
expect(setDi(s).home).toBe(0)
expect(setDi(s).guest).toBe(0)
})
it('in 2/3 alla palla match registra il set vincente senza aprirne uno nuovo', () => {
state.modalitaPartita = '2/3'
setSetVinti(state, 1, 0)
setPunteggio(state, 25, 18)
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(setDi(s).home).toBe(2)
expect(puntDi(s).home).toBe(25)
expect(puntDi(s).guest).toBe(18)
})
it('in 3/5 alla palla match registra il set vincente senza aprirne uno nuovo', () => {
state.modalitaPartita = '3/5'
setSetVinti(state, 2, 0)
setPunteggio(state, 25, 20)
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(setDi(s).home).toBe(3)
expect(puntDi(s).home).toBe(25)
expect(puntDi(s).guest).toBe(20)
})
it('dovrebbe ignorare nuovoSet se la partita è già finita', () => {
state.modalitaPartita = '2/3'
setSetVinti(state, 2, 0)
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(setDi(s).home).toBe(2)
})
})
// =============================================
// VITTORIA PARTITA (checkVittoriaPartita)
// =============================================
describe('checkVittoriaPartita', () => {
it('in 2/3 restituisce false se nessuno ha 2 set', () => {
state.modalitaPartita = '2/3'
setSetVinti(state, 1, 0)
expect(checkVittoriaPartita(state)).toBe(false)
})
it('in 2/3 restituisce true se home ha 2 set', () => {
state.modalitaPartita = '2/3'
setSetVinti(state, 2, 0)
expect(checkVittoriaPartita(state)).toBe(true)
})
it('in 3/5 restituisce false se nessuno ha 3 set', () => {
state.modalitaPartita = '3/5'
setSetVinti(state, 2, 2)
expect(checkVittoriaPartita(state)).toBe(false)
})
it('in 3/5 restituisce true se guest ha 3 set', () => {
state.modalitaPartita = '3/5'
setSetVinti(state, 0, 3)
expect(checkVittoriaPartita(state)).toBe(true)
})
it('in amichevole restituisce sempre false', () => {
state.modalitaPartita = 'amichevole'
setSetVinti(state, 5, 0)
expect(checkVittoriaPartita(state)).toBe(false)
})
})
// =============================================
// CAMBIO PALLA (cambiaPalla)
// =============================================
describe('cambiaPalla', () => {
it('dovrebbe invertire il servizio a 0-0', () => {
expect(servDi(state)).toBe(true)
const s = applyAction(state, { type: 'cambiaPalla' })
expect(servDi(s)).toBe(false)
})
it('dovrebbe tornare a Home con doppio toggle', () => {
let s = applyAction(state, { type: 'cambiaPalla' })
s = applyAction(s, { type: 'cambiaPalla' })
expect(servDi(s)).toBe(true)
})
it('non dovrebbe cambiare palla se il punteggio non è 0-0', () => {
setPunteggio(state, 1, 0)
const prima = servDi(state)
const s = applyAction(state, { type: 'cambiaPalla' })
expect(servDi(s)).toBe(prima)
})
it('non dovrebbe cambiare palla se Guest ha punti', () => {
setPunteggio(state, 0, 3)
const prima = servDi(state)
const s = applyAction(state, { type: 'cambiaPalla' })
expect(servDi(s)).toBe(prima)
})
})
// =============================================
// 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', () => {
setPunteggio(state, 24, 24)
expect(checkVittoria(state)).toBe(false)
})
it('dovrebbe dare vittoria a 25-23', () => {
setPunteggio(state, 25, 23)
expect(checkVittoria(state)).toBe(true)
})
it('non dovrebbe dare vittoria a 25-24 (serve 2 punti di scarto)', () => {
setPunteggio(state, 25, 24)
expect(checkVittoria(state)).toBe(false)
})
it('dovrebbe dare vittoria a 26-24', () => {
setPunteggio(state, 26, 24)
expect(checkVittoria(state)).toBe(true)
})
it('dovrebbe dare vittoria Guest a 25-20', () => {
setPunteggio(state, 20, 25)
expect(checkVittoria(state)).toBe(true)
})
it('dovrebbe dare vittoria ai vantaggi (30-28)', () => {
setPunteggio(state, 30, 28)
expect(checkVittoria(state)).toBe(true)
})
it('non dovrebbe dare vittoria ai vantaggi senza scarto (28-27)', () => {
setPunteggio(state, 28, 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"
setSetVinti(state, 2, 2)
setPunteggio(state, 15, 10)
expect(checkVittoria(state)).toBe(true)
})
it('modalità 3/5: non vittoria a 14-10 nel set decisivo', () => {
state.modalitaPartita = "3/5"
setSetVinti(state, 2, 2)
setPunteggio(state, 14, 10)
expect(checkVittoria(state)).toBe(false)
})
it('modalità 3/5: vittoria a 15-13 nel set decisivo', () => {
state.modalitaPartita = "3/5"
setSetVinti(state, 2, 2)
setPunteggio(state, 15, 13)
expect(checkVittoria(state)).toBe(true)
})
it('modalità 3/5: non vittoria a 15-14 nel set decisivo (serve scarto)', () => {
state.modalitaPartita = "3/5"
setSetVinti(state, 2, 2)
setPunteggio(state, 15, 14)
expect(checkVittoria(state)).toBe(false)
})
it('modalità 3/5: vittoria a 16-14 nel set decisivo', () => {
state.modalitaPartita = "3/5"
setSetVinti(state, 2, 2)
setPunteggio(state, 16, 14)
expect(checkVittoria(state)).toBe(true)
})
it('modalità 2/3: set decisivo dopo 2 set totali → vittoria a 15', () => {
state.modalitaPartita = "2/3"
setSetVinti(state, 1, 1)
setPunteggio(state, 15, 10)
expect(checkVittoria(state)).toBe(true)
})
it('modalità 2/3: non vittoria a 14-10 nel set decisivo (soglia 15)', () => {
state.modalitaPartita = "2/3"
setSetVinti(state, 1, 1)
setPunteggio(state, 14, 10)
expect(checkVittoria(state)).toBe(false)
})
it('modalità 2/3: set non decisivo (1-0) → soglia 25', () => {
state.modalitaPartita = "2/3"
setSetVinti(state, 1, 0)
setPunteggio(state, 15, 10)
expect(checkVittoria(state)).toBe(false)
})
it('modalità 3/5: set non decisivo (2-1) → soglia 25', () => {
state.modalitaPartita = "3/5"
setSetVinti(state, 2, 1)
setPunteggio(state, 15, 10)
expect(checkVittoria(state)).toBe(false)
})
})
// =============================================
// RESET
// =============================================
describe('Reset', () => {
it('dovrebbe resettare punti e set a zero', () => {
setSetVinti(state, 1, 1)
setPunteggio(state, 10, 8)
const s = applyAction(state, { type: 'resetta' })
expect(puntDi(s).home).toBe(0)
expect(puntDi(s).guest).toBe(0)
expect(setDi(s).home).toBe(0)
expect(setDi(s).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 a un set vuoto', () => {
state.sp.striscia = [{ serv: 'h', ris: 'hgh', vinc: 'h' }, { serv: 'h', ris: 'g', vinc: null }]
const s = applyAction(state, { type: 'resetta' })
expect(s.sp.striscia).toHaveLength(1)
expect(s.sp.striscia[0].ris).toBe('')
})
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(puntDi(s).home).toBe(0)
expect(puntDi(s).guest).toBe(0)
})
})
})
-71
View File
@@ -1,71 +0,0 @@
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
// Mock dell'I/O su disco: i test non toccano il filesystem reale né dipendono
// dal path relativo a src/.
vi.mock('fs', () => ({
readFileSync: vi.fn(),
writeFileSync: vi.fn(),
mkdirSync: vi.fn(),
existsSync: vi.fn(),
}))
import * as fs from 'fs'
import { loadState, saveState } from '../../src/persist.js'
import { createInitialState } from '../../src/gameState.js'
describe('Persistenza stato (persist.js)', () => {
beforeEach(() => {
vi.clearAllMocks()
})
afterEach(() => {
vi.restoreAllMocks()
})
describe('saveState', () => {
it('crea la directory e scrive lo stato serializzato', () => {
const state = createInitialState()
saveState(state)
expect(fs.mkdirSync).toHaveBeenCalledWith(expect.any(String), { recursive: true })
expect(fs.writeFileSync).toHaveBeenCalled()
const [, contenuto, encoding] = fs.writeFileSync.mock.calls[0]
expect(JSON.parse(contenuto)).toEqual(state)
expect(encoding).toBe('utf8')
})
it('non lancia eccezioni se la scrittura fallisce', () => {
fs.mkdirSync.mockImplementation(() => { throw new Error('EACCES') })
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
expect(() => saveState(createInitialState())).not.toThrow()
expect(errSpy).toHaveBeenCalled()
})
})
describe('loadState', () => {
it('legge e fa il parse di un file valido', () => {
const salvato = createInitialState()
salvato.sp.nomi.home = 'Squadra X'
fs.existsSync.mockReturnValue(true)
fs.readFileSync.mockReturnValue(JSON.stringify(salvato))
expect(loadState()).toEqual(salvato)
})
it('ritorna lo stato iniziale se il file non esiste', () => {
fs.existsSync.mockReturnValue(false)
expect(loadState()).toEqual(createInitialState())
})
it('ritorna lo stato iniziale se il JSON è corrotto', () => {
fs.existsSync.mockReturnValue(true)
fs.readFileSync.mockReturnValue('{ questo non è json')
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
expect(loadState()).toEqual(createInitialState())
expect(warnSpy).toHaveBeenCalled()
})
})
})
-110
View File
@@ -1,110 +0,0 @@
import { describe, it, expect } from 'vitest'
import { buildRefertoHtml } from '../../src/referto.js'
import { createInitialState } from '../../src/gameState.js'
// Data fissa per asserzioni deterministiche
const NOW = new Date('2026-03-14T20:30:00')
// Costruisce uno stato con una striscia di set arbitraria
function statoConSet(striscia, extra = {}) {
const state = createInitialState()
state.sp.striscia = striscia
state.sp.nomi = { home: 'Antoniana', guest: 'Rivali' }
return { ...state, ...extra }
}
describe('buildRefertoHtml (referto.js)', () => {
it('esclude i set _phantom dal referto', () => {
const striscia = [
{ serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(20), vinc: 'h' },
{ serv: 'g', ris: '', vinc: 'g', _phantom: true },
{ serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(18), vinc: 'h' },
]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
// due set reali → "Set 1" e "Set 2", mai "Set 3"
expect(html).toContain('Set 1')
expect(html).toContain('Set 2')
expect(html).not.toContain('Set 3')
})
it('calcola il punteggio finale di ogni set dalla ris', () => {
const striscia = [
{ serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(20), vinc: 'h' },
{ serv: 'h', ris: '', vinc: null },
]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
// header del set: "Antoniana 25 · 20 Rivali"
expect(html).toContain('<strong>25</strong>')
expect(html).toContain('<strong>20</strong>')
})
it('conta i set vinti usando vinc', () => {
const striscia = [
{ serv: 'h', ris: '', vinc: 'h' },
{ serv: 'g', ris: '', vinc: 'g' },
{ serv: 'h', ris: '', vinc: 'h' },
{ serv: 'h', ris: '', vinc: null },
]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
// risultato 2 1
expect(html).toContain('2 1')
})
it('ricava il vincitore dal conteggio punti se vinc è nullo', () => {
const striscia = [
{ serv: 'h', ris: 'h'.repeat(25) + 'g'.repeat(23), vinc: null },
{ serv: 'h', ris: '', vinc: null },
]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
// il primo set, pur con vinc null, conta come vinto da home → 1 0
expect(html).toContain('1 0')
})
it('include la progressione punto-punto con classi per squadra', () => {
const striscia = [
{ serv: 'h', ris: 'hhg', vinc: null },
]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
expect(html).toContain('punto-h')
expect(html).toContain('punto-g')
expect(html).toContain('1-0')
expect(html).toContain('2-0')
expect(html).toContain('2-1')
})
it('rende la formazione di partenza quando presente', () => {
const striscia = [
{
serv: 'h', ris: 'h', vinc: null,
formInizio: { home: ['4', '8', '15'], guest: ['16', '23', '42'] },
},
]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
expect(html).toContain('Formazione di partenza')
expect(html).toContain('>4<')
expect(html).toContain('>42<')
})
it('mostra "non disponibile" se manca formInizio', () => {
const striscia = [{ serv: 'h', ris: 'h', vinc: null }]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
expect(html).toContain('non disponibile')
})
it('mostra "Nessun punto registrato" per un set senza punti', () => {
const striscia = [{ serv: 'h', ris: '', vinc: null }]
const html = buildRefertoHtml(statoConSet(striscia), NOW)
expect(html).toContain('Nessun punto registrato')
})
it('header contiene nomi squadre, modalità e data iniettata', () => {
const striscia = [{ serv: 'h', ris: '', vinc: null }]
const state = statoConSet(striscia)
state.modalitaPartita = '2/3'
const html = buildRefertoHtml(state, NOW)
expect(html).toContain('Antoniana')
expect(html).toContain('Rivali')
expect(html).toContain('Modalità: 2/3')
expect(html).toContain('14/03/2026')
})
})
-123
View File
@@ -1,123 +0,0 @@
import { describe, it, expect, vi, afterEach } from 'vitest'
import { getNetworkIPs, collectIPs, printServerInfo } from '../../src/server-utils.js'
// Nota: gli IP vengono iniettati nei test (oggetto stile os.networkInterfaces o
// array di IP), così i risultati sono deterministici su qualsiasi piattaforma —
// incluso WSL, dove getNetworkIPs() userebbe altrimenti PowerShell.
describe('Server Utils', () => {
afterEach(() => {
vi.restoreAllMocks()
})
// =============================================
// getNetworkIPs / collectIPs
// =============================================
describe('getNetworkIPs', () => {
it('dovrebbe restituire indirizzi IPv4 non-loopback', () => {
expect(getNetworkIPs({
eth0: [{ family: 'IPv4', internal: false, address: '192.168.1.100' }]
})).toEqual(['192.168.1.100'])
})
it('dovrebbe escludere indirizzi loopback (internal)', () => {
const ips = getNetworkIPs({
lo: [{ family: 'IPv4', internal: true, address: '127.0.0.1' }],
eth0: [{ family: 'IPv4', internal: false, address: '192.168.1.100' }]
})
expect(ips).not.toContain('127.0.0.1')
expect(ips).toContain('192.168.1.100')
})
it('dovrebbe escludere indirizzi IPv6', () => {
const ips = getNetworkIPs({
eth0: [
{ family: 'IPv6', internal: false, address: 'fe80::1' },
{ family: 'IPv4', internal: false, address: '192.168.1.100' }
]
})
expect(ips).toEqual(['192.168.1.100'])
})
it('dovrebbe escludere bridge Docker 172.17.x.x', () => {
const ips = getNetworkIPs({
docker0: [{ family: 'IPv4', internal: false, address: '172.17.0.1' }],
eth0: [{ family: 'IPv4', internal: false, address: '10.0.0.5' }]
})
expect(ips).not.toContain('172.17.0.1')
expect(ips).toContain('10.0.0.5')
})
it('dovrebbe escludere bridge Docker 172.18.x.x', () => {
expect(getNetworkIPs({
br0: [{ family: 'IPv4', internal: false, address: '172.18.0.1' }]
})).toEqual([])
})
it('dovrebbe escludere indirizzi link-local 169.254.x.x', () => {
expect(getNetworkIPs({
eth0: [{ family: 'IPv4', internal: false, address: '169.254.1.1' }]
})).toEqual([])
})
it('dovrebbe restituire array vuoto se nessuna interfaccia disponibile', () => {
expect(getNetworkIPs({})).toEqual([])
})
it('dovrebbe restituire più indirizzi da interfacce diverse', () => {
const ips = getNetworkIPs({
eth0: [{ family: 'IPv4', internal: false, address: '192.168.1.100' }],
wlan0: [{ family: 'IPv4', internal: false, address: '192.168.1.101' }]
})
expect(ips).toHaveLength(2)
expect(ips).toContain('192.168.1.100')
expect(ips).toContain('192.168.1.101')
})
it('collectIPs gestisce input vuoto/undefined senza errori', () => {
expect(collectIPs()).toEqual([])
expect(collectIPs({})).toEqual([])
})
})
// =============================================
// printServerInfo
// =============================================
describe('printServerInfo', () => {
it('dovrebbe stampare la porta di default (3000)', () => {
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, [])
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('3000')
expect(allLogs).toContain('/display')
expect(allLogs).toContain('/controller')
consoleSpy.mockRestore()
})
it('dovrebbe stampare la porta personalizzata', () => {
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(8080, [])
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('8080')
consoleSpy.mockRestore()
})
it('dovrebbe mostrare gli URL remoti se ci sono IP di rete', () => {
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, ['192.168.1.50'])
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('192.168.1.50')
expect(allLogs).toContain('remoti')
consoleSpy.mockRestore()
})
it('non dovrebbe mostrare sezione remoti se nessun IP di rete', () => {
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, [])
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).not.toContain('remoti')
consoleSpy.mockRestore()
})
})
})
-35
View File
@@ -1,35 +0,0 @@
import { WebSocketServer } from 'ws'
import { setupWebSocketHandler } from './src/websocket-handler.js'
import { printServerInfo } from './src/server-utils.js'
import { loadState, saveState } from './src/persist.js'
export default function websocketPlugin() {
return {
name: 'vite-plugin-websocket',
configureServer(server) {
const wss = new WebSocketServer({ noServer: true })
setupWebSocketHandler(wss, { initialState: loadState(), onStateChange: saveState })
// Rewrite /display → / (index.html) e /controller → /controller.html
server.middlewares.use((req, _res, next) => {
if (req.url === '/display' || req.url === '/display/') req.url = '/'
else if (req.url === '/controller' || req.url === '/controller/') req.url = '/controller.html'
next()
})
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)
})
}
})
server.httpServer.once('listening', () => {
const { port } = server.httpServer.address()
setTimeout(() => printServerInfo(port), 100)
})
}
}
}
+1 -19
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,
},
}) })
-19
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'],
],
},
})