Compare commits
7 Commits
71119da727
...
apk
| Author | SHA1 | Date | |
|---|---|---|---|
| 2c0bcdb833 | |||
| 5e9377c681 | |||
| b174e66c8b | |||
| 3394113ea0 | |||
| 1f71846e23 | |||
| 9346117603 | |||
| 2e956aef75 |
20
.gitignore
vendored
20
.gitignore
vendored
@@ -11,7 +11,8 @@ lerna-debug.log*
|
|||||||
currentCommit.txt
|
currentCommit.txt
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist/*
|
||||||
|
!dist/android/
|
||||||
dist-ssr
|
dist-ssr
|
||||||
*.local
|
*.local
|
||||||
|
|
||||||
@@ -26,12 +27,13 @@ dist-ssr
|
|||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
# Playwright
|
# Capacitor
|
||||||
/test-results/
|
android/
|
||||||
/playwright-report/
|
ios/
|
||||||
/blob-report/
|
.capacitor/
|
||||||
/playwright/.cache/
|
|
||||||
/playwright/.auth/
|
|
||||||
|
|
||||||
# Vitest
|
# Build output
|
||||||
coverage/
|
output/
|
||||||
|
*.apk
|
||||||
|
!dist/android/*.apk
|
||||||
|
*.aab
|
||||||
282
CHANGELOG.md
282
CHANGELOG.md
@@ -1,282 +0,0 @@
|
|||||||
# Changelog
|
|
||||||
|
|
||||||
Tutte le modifiche significative a questo progetto sono documentate in questo file.
|
|
||||||
|
|
||||||
Il formato si basa su [Keep a Changelog](https://keepachangelog.com/it/1.0.0/),
|
|
||||||
e questo progetto aderisce al [Versionamento Semantico](https://semver.org/lang/it/).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## [1.0.0] - 2026-02-10
|
|
||||||
|
|
||||||
Rilascio iniziale di **Segnapunti Anto**, un'applicazione web Progressive Web App (PWA) professionale per il tracciamento in tempo reale dei punteggi durante partite di pallavolo.
|
|
||||||
|
|
||||||
### Funzionalità Principali
|
|
||||||
|
|
||||||
#### Gestione Partite e Punteggi
|
|
||||||
- **Tracciamento punti in tempo reale** per entrambe le squadre (casa e ospite)
|
|
||||||
- **Conteggio automatico dei set** con supporto per modalità al meglio di 3 o al meglio di 5
|
|
||||||
- **Logica regolamentare completa**:
|
|
||||||
- Set regolari: primo a 25 punti con almeno 2 di vantaggio
|
|
||||||
- Set decisivo (tie-break): primo a 15 punti con almeno 2 di vantaggio
|
|
||||||
- Blocco automatico assegnazione punti al raggiungimento della vittoria
|
|
||||||
- **Indicatore visivo del servizio** per identificare quale squadra è al servizio
|
|
||||||
- **Cronologia punti** con striscia visiva per seguire l'andamento della partita
|
|
||||||
- Possibilità di **incrementare e decrementare punti** e **set**
|
|
||||||
- **Annullamento punti** con ripristino automatico del servizio precedente
|
|
||||||
|
|
||||||
#### Formazioni e Rotazioni
|
|
||||||
- **Visualizzazione interattiva** della formazione in campo con 6 giocatori per squadra
|
|
||||||
- **Rotazione automatica regolamentare** quando la squadra conquista il servizio (cambio palla)
|
|
||||||
- **Configurazione manuale dei numeri di maglia** per ogni giocatore
|
|
||||||
- **Sistema di cambi giocatori**:
|
|
||||||
- Dialog dedicato per effettuare i cambi
|
|
||||||
- Supporto per cambi singoli o multipli
|
|
||||||
- Tabella IN/OUT con validazione degli input
|
|
||||||
- Verifica che i numeri di maglia siano numerici
|
|
||||||
- Scorciatoie da tastiera dedicate per squadra casa e ospite
|
|
||||||
- **Limitazione cambio palla manuale** solo a inizio set (0-0) per prevenire errori nella rotazione
|
|
||||||
|
|
||||||
#### Interfaccia Utente e Personalizzazione
|
|
||||||
- **Interfaccia fullscreen touch-friendly** ottimizzata per tablet e smartphone
|
|
||||||
- **Layout responsive** con media queries per schermi piccoli (<768px)
|
|
||||||
- **Modalità di visualizzazione**:
|
|
||||||
- Punteggio semplice
|
|
||||||
- Formazioni complete con posizioni giocatori
|
|
||||||
- Toggle tra le due modalità con scorciatoia da tastiera
|
|
||||||
- **Personalizzazione squadre**:
|
|
||||||
- Configurazione dinamica dei nomi squadre
|
|
||||||
- Inversione layout orizzontale (scambio posizione casa/ospite)
|
|
||||||
- Configurazione numeri di maglia giocatori
|
|
||||||
- **Controlli nascondibili**: possibilità di nascondere/mostrare barra pulsanti e cronologia
|
|
||||||
- **Stabilizzazione UI**: dimensioni fisse per riquadri punteggio per evitare spostamenti durante gli aggiornamenti
|
|
||||||
|
|
||||||
#### Controlli e Accessibilità
|
|
||||||
- **Controlli da tastiera completi** con scorciatoie dedicate:
|
|
||||||
- **Squadra Casa**: `Ctrl + ↑/↓` (punti), `Ctrl + →` (set), `Ctrl + C` (cambi)
|
|
||||||
- **Squadra Ospite**: `Shift + ↑/↓` (punti), `Shift + →` (set), `Shift + C` (cambi)
|
|
||||||
- **Comandi globali**:
|
|
||||||
- `Ctrl + ←` (cambio palla, solo a 0-0)
|
|
||||||
- `Ctrl + M` (configurazione)
|
|
||||||
- `Ctrl + B` (toggle barra pulsanti)
|
|
||||||
- `Ctrl + F` (fullscreen)
|
|
||||||
- `Ctrl + S` (annuncio vocale)
|
|
||||||
- `Ctrl + Z` (switch visualizzazione)
|
|
||||||
- **Sintesi vocale** per annunci punteggio in italiano usando Web Speech API
|
|
||||||
- **Sistema di alert professionale** usando Wave UI per notifiche e conferme
|
|
||||||
|
|
||||||
#### Progressive Web App (PWA)
|
|
||||||
- **Installabile** come app nativa su smartphone, tablet e desktop
|
|
||||||
- **Funzionamento offline completo** grazie ai Service Worker
|
|
||||||
- **Auto-update automatico** per ricevere nuovi aggiornamenti senza reinstallazione
|
|
||||||
- **Display fullscreen** per massimizzare lo spazio visivo
|
|
||||||
- **Orientamento landscape ottimizzato** per utilizzo su tablet
|
|
||||||
- **Orientamento sensor landscape** con supporto rotazione 180°
|
|
||||||
- **Icone PWA personalizzate** (192x192 e 512x512)
|
|
||||||
- **Prevenzione scroll indesiderato** su mobile (overscroll-behavior)
|
|
||||||
- **Supporto 100dvh** e position:fixed per layout mobile stabile
|
|
||||||
- **Blocco scroll** per evitare ricariche accidentali con swipe-down
|
|
||||||
|
|
||||||
#### Build e Deployment
|
|
||||||
- **Build APK Android** tramite Capacitor per distribuzione nativa
|
|
||||||
- **Setup automatico icone Android** con script dedicato per multi-densità (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)
|
|
||||||
- **Configurazione Capacitor** ottimizzata per landscape senza splash screen
|
|
||||||
- **Output unificato** in `/dist/android` per build Android
|
|
||||||
- **Base path configurabile** (`/segnap`) per deployment su sottocartelle
|
|
||||||
|
|
||||||
### Tecnologie e Dipendenze
|
|
||||||
|
|
||||||
#### Stack Tecnologico
|
|
||||||
- **Vue 3.4.38** - Framework JavaScript reattivo
|
|
||||||
- **Vite 5.4.10** - Build tool e dev server veloce
|
|
||||||
- **Wave UI 3.17.0** - Libreria UI components per alert e dialogs
|
|
||||||
- **NoSleep.js 0.12.0** - Prevenzione standby durante le partite
|
|
||||||
- **vite-plugin-pwa 0.20.5** - Plugin per generazione PWA
|
|
||||||
- **Capacitor 6.2.0** - Framework per build app native Android/iOS
|
|
||||||
|
|
||||||
#### Ambiente di Sviluppo
|
|
||||||
- **Node.js 20.x LTS** (consigliato v20.2.0)
|
|
||||||
- **npm 9.0.0+** per gestione dipendenze
|
|
||||||
- **NVM support** per gestione versioni Node.js
|
|
||||||
- **Hot Module Replacement (HMR)** in modalità sviluppo
|
|
||||||
- **Source maps** per debugging
|
|
||||||
- **Vue DevTools** supportato
|
|
||||||
|
|
||||||
#### Browser Supportati
|
|
||||||
- **Chrome/Chromium 90+** - Supporto completo (consigliato)
|
|
||||||
- **Firefox 88+** - Supporto completo
|
|
||||||
|
|
||||||
### Build e Comandi
|
|
||||||
|
|
||||||
#### Comandi Disponibili
|
|
||||||
- `npm run dev` - Server di sviluppo con hot-reload su http://localhost:5173
|
|
||||||
- `npm run build` - Build di produzione ottimizzata in `/dist`
|
|
||||||
- `npm run preview` - Anteprima locale della build di produzione
|
|
||||||
|
|
||||||
#### Output Build
|
|
||||||
- File statici ottimizzati e minificati
|
|
||||||
- Service Worker generato automaticamente
|
|
||||||
- PWA manifest configurato
|
|
||||||
- Assets con hash per cache busting
|
|
||||||
- Permessi automatici per cartella dist in ambiente Docker
|
|
||||||
|
|
||||||
### Documentazione
|
|
||||||
- **README.md completo** con:
|
|
||||||
- Panoramica funzionalità
|
|
||||||
- Requisiti di sistema dettagliati
|
|
||||||
- Istruzioni di installazione e setup con NVM
|
|
||||||
- Guida ai comandi per sviluppo e build
|
|
||||||
- Tabella completa shortcuts tastiera
|
|
||||||
- Configurazione PWA documentata
|
|
||||||
- Spiegazione logica regolamentare pallavolo
|
|
||||||
- Browser testati e supportati
|
|
||||||
- **Encoding corretto** per caratteri accentati italiani
|
|
||||||
|
|
||||||
### Miglioramenti Architetturali
|
|
||||||
- **Separazione componenti**: HomePage estratta in componente dedicato
|
|
||||||
- **Rimozione codice legacy**: eliminati file non utilizzati (HelloWorld.vue)
|
|
||||||
- **Refactoring CSS**: file style.css organizzato e ottimizzato
|
|
||||||
- **Gestione servizio migliorata**: variabile booleana `servHome` per gestione cambio servizio
|
|
||||||
- **Validazione input**: controlli su numeri di maglia e cambi giocatori
|
|
||||||
- **Gestione errori**: prevenzione incrementi a set concluso senza notifiche spam
|
|
||||||
|
|
||||||
### Note di Sviluppo
|
|
||||||
- **Orientamento sensor landscape**: permette rotazione 180° del dispositivo
|
|
||||||
- **Fix tentati audio mobile**: implementati ma richiedono ancora debug (WIP)
|
|
||||||
- Aggiunto supporto @capacitor-community/text-to-speech per audio nativo
|
|
||||||
- Implementato fallback Web API su desktop, plugin nativo su mobile
|
|
||||||
- Correzione lingua da 'it_IT' a 'it-IT'
|
|
||||||
- **Java 17 → 21**: aggiornamento per compatibilità plugin TTS
|
|
||||||
- **ImageMagick in Dockerfile**: per generazione automatica icone Android
|
|
||||||
|
|
||||||
### Configurazione
|
|
||||||
- **Base path**: `/segnap` (configurabile in vite.config.js)
|
|
||||||
- **Tema PWA**: background `#eee`, theme color `#ffffff`
|
|
||||||
- **Display**: fullscreen landscape
|
|
||||||
- **Manifest name**: app_segnap
|
|
||||||
- **Short name**: segnap
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Architettura e Funzionamento Interno
|
|
||||||
|
|
||||||
### Come Funziona l'Applicazione Web
|
|
||||||
|
|
||||||
L'applicazione è una **Single Page Application (SPA)** completamente **client-side**:
|
|
||||||
|
|
||||||
- **Server**: Serve solo file statici (nessun backend, nessun database)
|
|
||||||
- **Esecuzione**: Tutto gira nel browser dell'utente
|
|
||||||
- **Stato**: Memorizzato solo nella RAM del browser (si perde al refresh)
|
|
||||||
- **Offline**: Funziona completamente offline dopo la prima visita (Service Worker)
|
|
||||||
|
|
||||||
#### Build e Deployment
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Vite compila il codice Vue/JavaScript
|
|
||||||
2. Ottimizza e minifica JavaScript e CSS
|
|
||||||
3. Genera Service Worker e manifest PWA
|
|
||||||
4. Output in `/dist` con file statici pronti
|
|
||||||
|
|
||||||
**Deploy**: Copia `/dist` su web server statico (nginx, Apache, Vercel, Netlify). Non serve Node.js, PHP o database sul server.
|
|
||||||
|
|
||||||
#### Funzionamento Runtime
|
|
||||||
|
|
||||||
**Prima visita:**
|
|
||||||
1. Browser scarica index.html dal server
|
|
||||||
2. Carica bundle JavaScript e CSS
|
|
||||||
3. Vue.js inizializza l'applicazione
|
|
||||||
4. Service Worker cachea tutti gli asset
|
|
||||||
5. App pronta (nessuna ulteriore chiamata al server)
|
|
||||||
|
|
||||||
**Visite successive:**
|
|
||||||
1. Service Worker serve i file dalla cache locale
|
|
||||||
2. App si avvia istantaneamente anche senza internet
|
|
||||||
3. In background verifica se esistono aggiornamenti
|
|
||||||
4. Aggiornamenti applicati al prossimo refresh
|
|
||||||
|
|
||||||
#### Gestione Stato
|
|
||||||
|
|
||||||
Tutto lo stato della partita vive nella memoria del browser:
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sp: {
|
|
||||||
punt: { home: 0, guest: 0 },
|
|
||||||
set: { home: 0, guest: 0 },
|
|
||||||
servHome: true,
|
|
||||||
form: { home: ["1","2","3","4","5","6"], guest: ["1","2","3","4","5","6"] }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Limitazioni:**
|
|
||||||
- Refresh della pagina azzera tutto lo stato
|
|
||||||
- Nessuna sincronizzazione tra dispositivi
|
|
||||||
- Nessuno storico partite
|
|
||||||
|
|
||||||
**Vantaggi:**
|
|
||||||
- Privacy totale (nessun dato esce dal dispositivo)
|
|
||||||
- Velocità massima (nessuna latenza di rete)
|
|
||||||
- Funzionamento offline completo
|
|
||||||
|
|
||||||
**Possibili evoluzioni:**
|
|
||||||
- Persistenza con localStorage
|
|
||||||
- Backend con database per multi-dispositivo
|
|
||||||
- WebSocket per sincronizzazione real-time
|
|
||||||
|
|
||||||
### Note Tecniche
|
|
||||||
|
|
||||||
**Problemi noti:**
|
|
||||||
- Audio mobile: sintesi vocale non funziona su alcuni dispositivi Android
|
|
||||||
- Persistenza: lo stato si perde al refresh della pagina
|
|
||||||
- Codice legacy: presenza di file HomePage duplicati
|
|
||||||
|
|
||||||
**Architettura futura:**
|
|
||||||
- Stato centralizzato con Pinia/Vuex
|
|
||||||
- Architettura client-server con WebSocket per display remoto
|
|
||||||
- Persistenza con localStorage o database
|
|
||||||
- Testing con Vitest e Cypress
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Informazioni sul Progetto
|
|
||||||
|
|
||||||
**Nome progetto**: Segnapunti Anto
|
|
||||||
**Descrizione**: Applicazione web PWA per tracciare i punteggi di partite di pallavolo in tempo reale
|
|
||||||
**Sviluppato per**: Team Antoniana
|
|
||||||
**Licenza**: Privata
|
|
||||||
**Repository**: https://github.com/[username]/segnapunti
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Come Leggere Questo Changelog
|
|
||||||
|
|
||||||
- **Funzionalità Principali**: nuove caratteristiche aggiunte all'applicazione
|
|
||||||
- **Tecnologie e Dipendenze**: stack tecnologico e versioni utilizzate
|
|
||||||
- **Build e Comandi**: istruzioni per compilare ed eseguire il progetto
|
|
||||||
- **Documentazione**: miglioramenti alla documentazione utente e sviluppatore
|
|
||||||
- **Miglioramenti Architetturali**: refactoring e ottimizzazioni del codice
|
|
||||||
- **Note di Sviluppo**: work in progress e problemi noti
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Supporto e Contributi
|
|
||||||
|
|
||||||
Per segnalare bug o richiedere funzionalità, aprire una issue nel repository del progetto.
|
|
||||||
|
|
||||||
Per contribuire al progetto:
|
|
||||||
1. Fork del repository
|
|
||||||
2. Creare un branch per la feature (`git checkout -b feature/nome-feature`)
|
|
||||||
3. Commit delle modifiche (`git commit -m 'Aggiunge nome-feature'`)
|
|
||||||
4. Push al branch (`git push origin feature/nome-feature`)
|
|
||||||
5. Aprire una Pull Request
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Data primo commit**: 2024
|
|
||||||
**Data rilascio 1.0.0**: 2026-02-10
|
|
||||||
83
Dockerfile
Normal file
83
Dockerfile
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
# Dockerfile per build APK Android con Capacitor
|
||||||
|
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
|
||||||
|
|
||||||
|
# Copia package files per cache layer
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Installa dipendenze npm
|
||||||
|
RUN npm ci --legacy-peer-deps || npm install --legacy-peer-deps
|
||||||
|
|
||||||
|
# Copia il resto del progetto
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Build script
|
||||||
|
CMD ["bash", "-c", "\
|
||||||
|
npm install --legacy-peer-deps && \
|
||||||
|
npm run build && \
|
||||||
|
npx cap add android && \
|
||||||
|
npx cap sync && \
|
||||||
|
sed -i 's/android:configChanges=\"\\([^\"]*\\)\"/android:configChanges=\"\\1\" android:screenOrientation=\"sensorLandscape\"/g' android/app/src/main/AndroidManifest.xml && \
|
||||||
|
bash setup-android-icons.sh && \
|
||||||
|
cd android && ./gradlew assembleDebug --no-daemon && \
|
||||||
|
mkdir -p /app/dist/android && \
|
||||||
|
cp app/build/outputs/apk/debug/app-debug.apk /app/dist/android/segnapunti-debug.apk && \
|
||||||
|
echo '' && \
|
||||||
|
echo 'APK generato: /app/dist/android/segnapunti-debug.apk'\
|
||||||
|
"]
|
||||||
546
README.md
546
README.md
@@ -1,255 +1,437 @@
|
|||||||
# Segnapunti Anto
|
# Segnapunti - Anto
|
||||||
|
|
||||||
Applicazione web **Progressive Web App (PWA)** per tracciare i punteggi di partite di pallavolo in tempo reale.
|
Un'applicazione web segnapunti per pallavolo con funzionalità di sintesi vocale, modalità formazione e supporto PWA (Progressive Web App).
|
||||||
|
|
||||||
---
|
## Cos'è
|
||||||
|
|
||||||
## Panoramica
|
Segnapunti è un'applicazione standalone per tenere il punteggio durante le partite di pallavolo. L'applicazione è ottimizzata per dispositivi mobili in modalità landscape (orizzontale) e può essere installata come app nativa grazie al supporto PWA.
|
||||||
|
|
||||||
**Segnapunti Anto** è un'applicazione digitale per il tracciamento dei punteggi durante partite di pallavolo, ottimizzata per l'uso su tablet e smartphone. Sviluppata per il team Antoniana, l'app fornisce un'interfaccia fullscreen touch-friendly con supporto offline e controlli da tastiera.
|
### Caratteristiche principali
|
||||||
|
|
||||||
### Funzionalità Principali
|
- **Segnapunti digitale**: Visualizzazione chiara del punteggio per le due squadre (Home e Guest)
|
||||||
|
- **Contatore set**: Traccia i set vinti da ciascuna squadra (fino a 3 set)
|
||||||
|
- **Indicatore battuta**: Mostra quale squadra ha il servizio
|
||||||
|
- **Modalità formazione**: Visualizza la rotazione dei giocatori in campo (posizioni 1-6)
|
||||||
|
- **Sintesi vocale**: Annuncia il punteggio in italiano
|
||||||
|
- **PWA**: Installabile come app standalone con funzionamento offline
|
||||||
|
- **Controllo da tastiera**: Scorciatoie per gestire rapidamente il punteggio
|
||||||
|
- **No Sleep**: Impedisce allo schermo di spegnersi durante l'uso
|
||||||
|
- **Fullscreen automatico**: Su dispositivi mobili si avvia a schermo intero
|
||||||
|
|
||||||
- **Gestione Completa Partite**
|
## Come funziona
|
||||||
- Tracciamento punti in tempo reale per entrambe le squadre
|
|
||||||
- Conteggio automatico dei set (modalità 2/3 o 3/5)
|
|
||||||
- Indicatore visivo del servizio
|
|
||||||
- Blocco incremento punti a set concluso
|
|
||||||
- Cronologia punti con striscia visiva
|
|
||||||
|
|
||||||
- **Formazioni Squadra**
|
### Interfaccia
|
||||||
- Visualizzazione interattiva dei 6 giocatori in campo
|
|
||||||
- Rotazione automatica regolamentare al cambio palla
|
|
||||||
- Configurazione manuale dei numeri di maglia
|
|
||||||
- Dialog cambi con uno o due cambi (IN → OUT) e validazioni
|
|
||||||
- Supporto logica pallavolo ufficiale (25 punti + 2 di vantaggio, tie-break a 15 nel set decisivo)
|
|
||||||
|
|
||||||
- **Controlli Multimodali**
|
L'applicazione divide lo schermo in due metà:
|
||||||
- Scorciatoie da tastiera complete (vedi sezione [Shortcuts](#shortcuts))
|
|
||||||
- Sintesi vocale per annunci punteggio in italiano (Web Speech API)
|
|
||||||
|
|
||||||
- **Personalizzazione**
|
- **Metà sinistra (gialla su sfondo nero)**: Squadra Home - Antoniana
|
||||||
- Configurazione dinamica nomi squadre
|
- **Metà destra (bianca su sfondo blu)**: Squadra Guest
|
||||||
- Selettore modalità partita: al meglio di 3 o al meglio di 5
|
|
||||||
- Toggle layout orizzontale (inverti home/guest)
|
|
||||||
- Modalità visualizzazione: punteggio semplice o formazioni complete
|
|
||||||
- Nascondi/mostra controlli e cronologia
|
|
||||||
|
|
||||||
---
|
#### Visualizzazioni
|
||||||
|
|
||||||
## Requisiti
|
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
|
||||||
|
|
||||||
### Requisiti di Sistema
|
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)
|
||||||
|
|
||||||
#### Per Sviluppo
|
#### Funzionalità
|
||||||
- **Sistema Operativo**: Linux, macOS, Windows (WSL2 consigliato)
|
|
||||||
- **Node.js**: v20.2.0 o superiore (LTS consigliato)
|
|
||||||
- **npm**: v9.0.0 o superiore (incluso con Node.js)
|
|
||||||
- **RAM**: Minimo 2GB, consigliato 4GB
|
|
||||||
- **Spazio Disco**: ~500MB per dipendenze e build
|
|
||||||
|
|
||||||
#### Per Deployment
|
- **Reset**: Azzera punteggio e formazioni, mantiene i nomi delle squadre
|
||||||
- **Server Web**: Qualsiasi server statico (nginx, Apache, Vercel, Netlify)
|
- **Cambio servizio**: Toggle manuale del servizio tra le squadre
|
||||||
- **HTTPS**: Obbligatorio per Service Worker e PWA (eccetto localhost)
|
- **Configurazione nomi**: Dialog per modificare i nomi delle squadre
|
||||||
- **Connessione Internet**: Solo per primo caricamento (poi funziona offline)
|
- **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)
|
||||||
|
|
||||||
### Requisiti Browser (Utente Finale)
|
### Controlli da tastiera
|
||||||
|
|
||||||
| Requisito | Dettaglio | Necessità |
|
- **Ctrl + M**: Apri dialog configurazione nomi
|
||||||
|-----------|-----------|-----------|
|
- **Ctrl + B**: Mostra/nascondi barra pulsanti in basso
|
||||||
| **JavaScript ES6+** | Supporto moduli, arrow functions, async/await | Obbligatorio |
|
- **Ctrl + F**: Attiva modalità fullscreen
|
||||||
| **Service Worker API** | Per funzionalità offline PWA | Obbligatorio |
|
- **Ctrl + S**: Pronuncia il punteggio
|
||||||
| **Fullscreen API** | Per modalità schermo intero | Consigliato |
|
- **Ctrl + Z**: Alterna tra modalità punteggio e formazione
|
||||||
| **Web Speech API** | Per sintesi vocale punteggi | Opzionale |
|
- **Ctrl + ↑**: Incrementa punteggio Home
|
||||||
| **Local Storage** | Per persistenza configurazioni | Consigliato |
|
- **Ctrl + ↓**: Decrementa punteggio Home
|
||||||
|
- **Ctrl + →**: Incrementa set Home
|
||||||
|
- **Shift + ↑**: Incrementa punteggio Guest
|
||||||
|
- **Shift + ↓**: Decrementa punteggio Guest
|
||||||
|
- **Shift + →**: Incrementa set Guest
|
||||||
|
- **Ctrl + ←**: Cambia servizio
|
||||||
|
|
||||||
### Browser Testati e Supportati
|
### Comportamento su mobile
|
||||||
|
|
||||||
| Browser | Versione Minima | Supporto | Note |
|
Su dispositivi mobili l'applicazione:
|
||||||
|---------|-----------------|----------|------|
|
1. Attiva automaticamente NoSleep per impedire lo spegnimento dello schermo
|
||||||
| Chrome/Chromium | 90+ | ✅ Completo | Consigliato per tutte le features |
|
2. Si avvia in modalità fullscreen
|
||||||
| Firefox | 88+ | ✅ Completo | Supporto completo PWA e Speech API |
|
3. Esegue un test di sintesi vocale al caricamento
|
||||||
|
4. Mostra il pulsante "Esci" per chiudere l'app
|
||||||
|
|
||||||
---
|
## Stack tecnologico
|
||||||
|
|
||||||
## Installazione e Setup
|
### Framework e librerie
|
||||||
|
|
||||||
|
- **Vue 3** (^3.2.47): Framework JavaScript progressivo per l'interfaccia utente
|
||||||
|
- **Vite** (^4.3.9): Build tool moderno e veloce
|
||||||
|
- **Wave UI** (^3.3.0): Libreria di componenti UI per Vue
|
||||||
|
- **NoSleep.js** (^0.12.0): Previene lo spegnimento automatico dello schermo
|
||||||
|
- **vite-plugin-pwa** (^0.16.0): Plugin per generare la PWA
|
||||||
|
|
||||||
|
### API Web utilizzate
|
||||||
|
|
||||||
|
- **Web Speech API**: Per la sintesi vocale (Text-to-Speech)
|
||||||
|
- **Fullscreen API**: Per la modalità schermo intero
|
||||||
|
- **Service Worker**: Per il funzionamento offline (PWA)
|
||||||
|
|
||||||
|
## Come svilupparlo
|
||||||
|
|
||||||
### Prerequisiti
|
### Prerequisiti
|
||||||
|
|
||||||
- **Node.js** v20.2.0 (consigliato)
|
- **Node.js** (versione 14 o superiore, raccomandata v20.2.0)
|
||||||
- **npm** o **yarn**
|
- **npm** o **yarn**
|
||||||
|
|
||||||
### Installazione con NVM (consigliato)
|
### Installazione
|
||||||
|
|
||||||
|
1. Clona il repository:
|
||||||
|
|
||||||
|
2. Installa le dipendenze:
|
||||||
```bash
|
```bash
|
||||||
# Installa la versione corretta di Node.js
|
|
||||||
nvm install v20.2.0
|
|
||||||
nvm use v20.2.0
|
|
||||||
|
|
||||||
# Clona il repository
|
|
||||||
git clone <repository-url>
|
|
||||||
cd segnapunti
|
|
||||||
|
|
||||||
# Installa le dipendenze
|
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
### Comandi di sviluppo
|
||||||
|
|
||||||
## Comandi per Sviluppo
|
#### Avviare il server di sviluppo
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
Questo comando avvia Vite in modalità development. L'applicazione sarà disponibile su `http://localhost:5173` (o altra porta se già occupata).
|
||||||
|
|
||||||
### Dev Server
|
#### Build per produzione
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
Genera i file ottimizzati per la produzione nella cartella `dist/`. Include:
|
||||||
|
- Minificazione del codice
|
||||||
|
- Tree-shaking per rimuovere codice non utilizzato
|
||||||
|
- Generazione del Service Worker per la PWA
|
||||||
|
- Generazione del manifest per l'installazione
|
||||||
|
|
||||||
Avvia il server di sviluppo con hot-reload:
|
#### Anteprima build di produzione
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
Avvia un server locale per testare la build di produzione.
|
||||||
|
|
||||||
|
La configurazione PWA si trova in [vite.config.js](vite.config.js:10-32):
|
||||||
|
|
||||||
|
- **Display**: fullscreen
|
||||||
|
- **Orientamento**: landscape (orizzontale)
|
||||||
|
- **Colore tema**: bianco
|
||||||
|
- **Base path**: `/segnap` in produzione, `/` in sviluppo
|
||||||
|
|
||||||
|
### Modifiche comuni
|
||||||
|
|
||||||
|
#### Cambiare i colori delle squadre
|
||||||
|
|
||||||
|
Modifica il file [src/style.css](src/style.css:101-108):
|
||||||
|
```css
|
||||||
|
.home {
|
||||||
|
background-color: black;
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
.guest {
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Modificare i nomi predefiniti
|
||||||
|
|
||||||
|
Nel file [src/components/HomePage.vue](src/components/HomePage.vue:20), modifica:
|
||||||
|
```javascript
|
||||||
|
nomi: { home: "Antoniana", guest: "Guest" }
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Cambiare la voce della sintesi vocale
|
||||||
|
|
||||||
|
Nel file [src/components/HomePage.vue](src/components/HomePage.vue:104), modifica:
|
||||||
|
```javascript
|
||||||
|
msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Modificare l'ordine di visualizzazione delle formazioni
|
||||||
|
|
||||||
|
Nel template del componente [src/components/HomePage.vue](src/components/HomePage.vue:181), l'ordine di visualizzazione delle posizioni è controllato dall'array nell'attributo `v-for`. La sequenza `[3, 2, 1, 4, 5, 0]` rappresenta l'ordine in cui vengono mostrate le posizioni dei giocatori sulla griglia 2x3 del campo.
|
||||||
|
|
||||||
|
Per modificare l'ordine di visualizzazione, modifica questo array:
|
||||||
|
```vue
|
||||||
|
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||||
|
{{ sp.form.home[x] }}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
L'ordine attuale mostra le posizioni in questo schema:
|
||||||
|
```
|
||||||
|
3 2 1
|
||||||
|
4 5 0
|
||||||
|
```
|
||||||
|
|
||||||
|
Dove 0 corrisponde alla posizione 1 nel pallavolo, 1 alla posizione 2, e così via.
|
||||||
|
|
||||||
|
## Testing e Deploy
|
||||||
|
|
||||||
|
### Testing su dispositivi mobili
|
||||||
|
|
||||||
|
Per testare l'applicazione su dispositivi mobili nella stessa rete locale:
|
||||||
|
|
||||||
|
1. Avvia il server di sviluppo:
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
L'applicazione sarà disponibile su [http://localhost:5173](http://localhost:5173)
|
2. Vite mostrerà l'indirizzo locale e di rete. Se non viene mostrato, trova l'indirizzo IP del tuo computer:
|
||||||
|
```bash
|
||||||
|
# Su Linux/Mac
|
||||||
|
hostname -I
|
||||||
|
# oppure
|
||||||
|
ifconfig | grep "inet "
|
||||||
|
|
||||||
### Modalità Sviluppo
|
# Su Windows
|
||||||
- Hot Module Replacement (HMR) attivo
|
ipconfig
|
||||||
- Source maps per debugging
|
```
|
||||||
- Vue DevTools supportato
|
|
||||||
- Errori e warnings in console
|
|
||||||
|
|
||||||
---
|
3. Dal dispositivo mobile, connesso alla stessa rete Wi-Fi, naviga su:
|
||||||
|
```
|
||||||
|
http://[tuo-ip]:5173
|
||||||
|
```
|
||||||
|
|
||||||
## Comandi per Build
|
4. Accetta eventuali permessi richiesti dal browser per:
|
||||||
|
- Modalità fullscreen
|
||||||
|
- Sintesi vocale
|
||||||
|
- Wake Lock (prevenzione spegnimento schermo)
|
||||||
|
|
||||||
### Build Produzione
|
### Build e Deploy
|
||||||
|
|
||||||
Genera i file ottimizzati per il deployment:
|
#### Build per produzione
|
||||||
|
|
||||||
|
Genera i file ottimizzati per la produzione:
|
||||||
```bash
|
```bash
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
**Output:**
|
Questo comando crea una cartella `dist/` contenente:
|
||||||
- Cartella `/dist` con file statici ottimizzati
|
- HTML, CSS e JavaScript minificati
|
||||||
- Service Worker generato automaticamente
|
- Service Worker per il funzionamento offline
|
||||||
- PWA manifest configurato
|
- Manifest PWA per l'installazione come app
|
||||||
- Assets minificati e con hash per cache busting
|
- Asset ottimizzati
|
||||||
- Base path: `/segnap` (modificabile in `vite.config.js`)
|
|
||||||
|
|
||||||
### Preview Build
|
#### Anteprima della build
|
||||||
|
|
||||||
Anteprima locale della build di produzione:
|
|
||||||
|
|
||||||
|
Prima del deploy, puoi testare la build in locale:
|
||||||
```bash
|
```bash
|
||||||
npm run preview
|
npm run preview
|
||||||
```
|
```
|
||||||
|
|
||||||
Serve i file dalla cartella `/dist` per testare la build prima del deploy.
|
#### 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' : '/',
|
||||||
|
```
|
||||||
|
|
||||||
## Shortcuts
|
2. Esegui la build:
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
### Controlli Tastiera Squadra Home
|
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)
|
||||||
|
|
||||||
| Scorciatoia | Azione |
|
#### Deploy su server web
|
||||||
|-------------|--------|
|
|
||||||
| `Ctrl + ↑` | Incrementa punti |
|
|
||||||
| `Ctrl + ↓` | Decrementa punti |
|
|
||||||
| `Ctrl + →` | Incrementa set |
|
|
||||||
| `Ctrl + C` | Apri dialog cambi |
|
|
||||||
|
|
||||||
### Controlli Tastiera Squadra Guest
|
Il contenuto della cartella `dist/` può essere servito da qualsiasi server web statico:
|
||||||
|
|
||||||
| Scorciatoia | Azione |
|
**Nginx:**
|
||||||
|-------------|--------|
|
```nginx
|
||||||
| `Shift + ↑` | Incrementa punti |
|
server {
|
||||||
| `Shift + ↓` | Decrementa punti |
|
listen 80;
|
||||||
| `Shift + →` | Incrementa set |
|
server_name tuo-dominio.com;
|
||||||
| `Shift + C` | Apri dialog cambi |
|
root /percorso/a/dist;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
### Comandi Globali
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
| Scorciatoia | Azione |
|
**Apache (.htaccess):**
|
||||||
|-------------|--------|
|
```apache
|
||||||
| `Ctrl + ←` | Cambio palla (servizio) - **solo a 0-0** |
|
<IfModule mod_rewrite.c>
|
||||||
| `Ctrl + M` | Apri configurazione nomi squadre e formazioni |
|
RewriteEngine On
|
||||||
| `Ctrl + B` | Toggle visibilità barra pulsanti |
|
RewriteBase /
|
||||||
| `Ctrl + F` | Attiva/disattiva fullscreen |
|
RewriteRule ^index\.html$ - [L]
|
||||||
| `Ctrl + S` | Annuncio vocale punteggio corrente |
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
| `Ctrl + Z` | Switch tra visualizzazione formazioni e punteggio |
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule . /index.html [L]
|
||||||
|
</IfModule>
|
||||||
|
```
|
||||||
|
|
||||||
---
|
#### Installazione come PWA
|
||||||
|
|
||||||
## Configurazione PWA
|
Dopo il deploy, gli utenti possono installare l'app:
|
||||||
|
|
||||||
L'applicazione è configurata come **Progressive Web App** nel file [vite.config.js](vite.config.js):
|
**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
|
```javascript
|
||||||
VitePWA({
|
const msg = new SpeechSynthesisUtterance();
|
||||||
registerType: 'autoUpdate',
|
msg.lang = 'it_IT';
|
||||||
manifest: {
|
msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
||||||
name: "app_segnap",
|
|
||||||
short_name: "segnap",
|
|
||||||
description: "Segnapunti standalone.",
|
|
||||||
background_color: "#eee",
|
|
||||||
theme_color: '#ffffff',
|
|
||||||
display: "fullscreen",
|
|
||||||
orientation: "landscape",
|
|
||||||
icons: [
|
|
||||||
{ src: 'segnap-192x192.png', sizes: '192x192', type: 'image/png' },
|
|
||||||
{ src: 'segnap-512x512.png', sizes: '512x512', type: 'image/png' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Caratteristiche PWA
|
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
|
||||||
|
|
||||||
- **Display**: Fullscreen per massimizzare lo spazio visivo
|
### Prevenzione spegnimento schermo
|
||||||
- **Orientamento**: Landscape (orizzontale) ottimizzato per tablet
|
|
||||||
- **Auto-update**: Service Worker con aggiornamento automatico
|
|
||||||
- **Offline**: Funzionamento completo senza connessione internet
|
|
||||||
- **Installabile**: Aggiungibile alla home screen come app nativa
|
|
||||||
|
|
||||||
### Installazione PWA
|
NoSleep.js ([HomePage.vue:32-33](src/components/HomePage.vue:32-33)) viene attivato al mount su dispositivi mobili:
|
||||||
|
```javascript
|
||||||
**Android/Desktop (Chrome):**
|
var noSleep = new NoSleep();
|
||||||
- Menu → "Installa app" o icona (⊕) nella barra degli indirizzi
|
noSleep.enable();
|
||||||
|
|
||||||
**iOS (Safari):**
|
|
||||||
- Share (□↑) → "Aggiungi a Home"
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Logica Regolamentare Pallavolo
|
|
||||||
|
|
||||||
### Vittoria Set
|
|
||||||
|
|
||||||
- **Set regolari (1-4)**: Primo a 25 punti con almeno 2 di vantaggio
|
|
||||||
- **Set decisivo**:
|
|
||||||
- Modalità 2/3: 3° set a 15 punti con almeno 2 di vantaggio
|
|
||||||
- Modalità 3/5: 5° set a 15 punti con almeno 2 di vantaggio
|
|
||||||
- **Blocco automatico**: Non consente assegnare punti oltre la vittoria
|
|
||||||
|
|
||||||
### Rotazione Formazione
|
|
||||||
|
|
||||||
La rotazione avviene **automaticamente** quando:
|
|
||||||
1. La squadra **conquista il servizio** (cambio palla)
|
|
||||||
2. Il punteggio è diverso da 0-0
|
|
||||||
|
|
||||||
**Limitazione cambio palla manuale:**
|
|
||||||
- Il cambio manuale del servizio (`Ctrl + ←`) è consentito **solo a 0-0**
|
|
||||||
- Questa limitazione previene errori nella rotazione delle formazioni
|
|
||||||
|
|
||||||
### Formazione in Campo
|
|
||||||
|
|
||||||
Visualizzazione a 6 posizioni standard:
|
|
||||||
|
|
||||||
```
|
|
||||||
Rete
|
|
||||||
┌─────┬─────┬─────┐
|
|
||||||
│ 4 │ 3 │ 2 │ ← Fila anteriore
|
|
||||||
├─────┼─────┼─────┤
|
|
||||||
│ 5 │ 6 │ 1 │ ← Fila posteriore
|
|
||||||
└─────┴─────┴─────┘
|
|
||||||
```
|
```
|
||||||
|
|
||||||
La rotazione avviene in senso orario: 1→6→5→4→3→2→1
|
Questo impedisce allo schermo di spegnersi durante le partite, funzionalità essenziale per un segnapunti.
|
||||||
|
|
||||||
|
### Controlli da tastiera
|
||||||
|
|
||||||
|
Gli eventi tastiera sono gestiti tramite listener globale ([HomePage.vue:121-150](src/components/HomePage.vue:121-150)):
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||||
|
```
|
||||||
|
|
||||||
|
I listener vengono temporaneamente disabilitati quando si aprono dialog per permettere l'inserimento di testo.
|
||||||
|
|
||||||
|
### Progressive Web App
|
||||||
|
|
||||||
|
La configurazione PWA in [vite.config.js](vite.config.js:10-33) definisce:
|
||||||
|
|
||||||
|
- **Manifest**: metadati dell'app (nome, icone, orientamento)
|
||||||
|
- **Service Worker**: strategia di cache per funzionamento offline
|
||||||
|
- **Display mode**: fullscreen per esperienza app-like
|
||||||
|
- **Orientamento forzato**: landscape per massimizzare spazio visibile
|
||||||
|
|
||||||
|
## Setup IDE raccomandato
|
||||||
|
|
||||||
|
- [VS Code](https://code.visualstudio.com/) - Editor consigliato
|
||||||
|
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Supporto Vue 3 (disabilita Vetur se installato)
|
||||||
|
- [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) - IntelliSense migliorato
|
||||||
|
|
||||||
|
### Estensioni VS Code utili
|
||||||
|
|
||||||
|
File [.vscode/extensions.json](.vscode/extensions.json) suggerisce:
|
||||||
|
- Vue Language Features (Volar)
|
||||||
|
- TypeScript Vue Plugin
|
||||||
|
|
||||||
|
## Risoluzione problemi comuni
|
||||||
|
|
||||||
|
### La sintesi vocale non funziona
|
||||||
|
|
||||||
|
- Verifica che il browser supporti la Web Speech API (Chrome/Edge consigliati)
|
||||||
|
- Su alcuni browser è necessaria l'interazione utente prima di utilizzare la sintesi vocale
|
||||||
|
- Controlla che la voce "Google italiano" sia disponibile nel sistema
|
||||||
|
|
||||||
|
### L'app non si installa come PWA
|
||||||
|
|
||||||
|
- Verifica che il sito sia servito tramite HTTPS (richiesto per Service Workers)
|
||||||
|
- Controlla che le icone in `public/` siano presenti e accessibili
|
||||||
|
- Ispeziona la console del browser per errori del Service Worker
|
||||||
|
|
||||||
|
### Lo schermo si spegne comunque
|
||||||
|
|
||||||
|
- NoSleep.js richiede un'interazione utente per attivarsi
|
||||||
|
- Su iOS, la prevenzione dello spegnimento ha limitazioni del sistema operativo
|
||||||
|
- Verifica che non ci siano impostazioni di risparmio energetico aggressive
|
||||||
|
|
||||||
|
### La rotazione non funziona correttamente
|
||||||
|
|
||||||
|
- Le formazioni si azzerano con il RESET
|
||||||
|
- Verifica che gli array `form` abbiano sempre 6 elementi
|
||||||
|
- La visualizzazione può essere invertita ma la logica di rotazione rimane corretta
|
||||||
|
|
||||||
|
## Licenza
|
||||||
|
|
||||||
|
Progetto privato. Tutti i diritti riservati.
|
||||||
|
|||||||
41
build-apk.sh
Executable file
41
build-apk.sh
Executable file
@@ -0,0 +1,41 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
set -e
|
||||||
|
|
||||||
|
echo "========================================="
|
||||||
|
echo " Building APK for Segnapunti Android "
|
||||||
|
echo "========================================="
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# Rileva architettura
|
||||||
|
ARCH=$(uname -m)
|
||||||
|
echo "Architettura rilevata: $ARCH"
|
||||||
|
|
||||||
|
# Crea directory dist/android se non esiste
|
||||||
|
mkdir -p dist/android
|
||||||
|
|
||||||
|
echo "Building Docker image..."
|
||||||
|
docker build --platform linux/$(uname -m) -t segnapunti-android-builder .
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "Building APK inside Docker container..."
|
||||||
|
docker run --rm \
|
||||||
|
-v "$(pwd)/dist:/app/dist" \
|
||||||
|
segnapunti-android-builder
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "Fixing permissions on dist folder..."
|
||||||
|
sudo chown -R $USER:$USER dist
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "========================================="
|
||||||
|
echo "Build completed successfully!"
|
||||||
|
echo "========================================="
|
||||||
|
echo ""
|
||||||
|
echo "APK location: $(pwd)/dist/android/segnapunti-debug.apk"
|
||||||
|
echo ""
|
||||||
|
echo "Per installare su dispositivo Android:"
|
||||||
|
echo " adb install dist/android/segnapunti-debug.apk"
|
||||||
|
echo ""
|
||||||
|
echo "Oppure trasferisci il file sul dispositivo"
|
||||||
|
echo "e installalo manualmente."
|
||||||
|
echo ""
|
||||||
21
capacitor.config.json
Normal file
21
capacitor.config.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Segnapunti - Controller</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/controller-main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
42
generate-icons.sh
Executable file
42
generate-icons.sh
Executable 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"
|
||||||
@@ -3,7 +3,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
<title>Segnapunti - Anto</title>
|
<title>Segnapunti - Anto</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
7619
package-lock.json
generated
7619
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
39
package.json
39
package.json
@@ -6,32 +6,25 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "node server.js",
|
"preview": "vite preview",
|
||||||
"start": "node server.js",
|
"cap:sync": "npm run build && cap sync",
|
||||||
"serve": "vite build && node server.js",
|
"cap:open": "cap open android",
|
||||||
"test": "vitest",
|
"android:build:debug": "cd android && ./gradlew assembleDebug",
|
||||||
"test:unit": "vitest run tests/unit tests/integration",
|
"docker:build": "./build-apk.sh"
|
||||||
"test:ui": "vitest --ui",
|
|
||||||
"test:e2e": "playwright test",
|
|
||||||
"test:e2e:ui": "playwright test --ui",
|
|
||||||
"test:e2e:codegen": "playwright codegen"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"express": "^5.2.1",
|
"@capacitor-community/text-to-speech": "^6.0.0",
|
||||||
"vue": "^3.2.47",
|
"@capacitor/android": "^6.2.0",
|
||||||
"vue-router": "^4.6.4",
|
"@capacitor/app": "^6.0.1",
|
||||||
"wave-ui": "^3.3.0",
|
"@capacitor/core": "^6.2.0",
|
||||||
"ws": "^8.19.0"
|
"nosleep.js": "^0.12.0",
|
||||||
|
"vue": "^3.4.38",
|
||||||
|
"wave-ui": "^3.17.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@playwright/test": "^1.58.2",
|
"@capacitor/cli": "^6.2.0",
|
||||||
"@types/node": "^25.2.3",
|
"@vitejs/plugin-vue": "^5.1.4",
|
||||||
"@vitejs/plugin-vue": "^4.1.0",
|
"vite": "^5.4.10",
|
||||||
"@vitest/ui": "^4.0.18",
|
"vite-plugin-pwa": "^0.20.5"
|
||||||
"concurrently": "^9.2.1",
|
|
||||||
"jsdom": "^28.0.0",
|
|
||||||
"vite": "^4.3.9",
|
|
||||||
"vite-plugin-pwa": "^0.16.0",
|
|
||||||
"vitest": "^4.0.18"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
import { defineConfig, devices } from '@playwright/test';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Read environment variables from file.
|
|
||||||
* https://github.com/motdotla/dotenv
|
|
||||||
*/
|
|
||||||
// import dotenv from 'dotenv';
|
|
||||||
// import path from 'path';
|
|
||||||
// dotenv.config({ path: path.resolve(__dirname, '.env') });
|
|
||||||
|
|
||||||
/**
|
|
||||||
* See https://playwright.dev/docs/test-configuration.
|
|
||||||
*/
|
|
||||||
export default defineConfig({
|
|
||||||
testDir: './tests/e2e',
|
|
||||||
/* Run tests in files in parallel */
|
|
||||||
fullyParallel: true,
|
|
||||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
|
||||||
forbidOnly: !!process.env.CI,
|
|
||||||
/* Retry on CI only */
|
|
||||||
retries: process.env.CI ? 2 : 0,
|
|
||||||
/* Opt out of parallel tests on CI. */
|
|
||||||
workers: process.env.CI ? 1 : undefined,
|
|
||||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
|
||||||
reporter: 'html',
|
|
||||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
|
||||||
use: {
|
|
||||||
/* Base URL to use in actions like `await page.goto('')`. */
|
|
||||||
// baseURL: 'http://localhost:3000',
|
|
||||||
|
|
||||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
|
||||||
trace: 'on-first-retry',
|
|
||||||
},
|
|
||||||
|
|
||||||
/* Configure projects for major browsers */
|
|
||||||
projects: [
|
|
||||||
{
|
|
||||||
name: 'chromium',
|
|
||||||
use: { ...devices['Desktop Chrome'] },
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
name: 'firefox',
|
|
||||||
use: { ...devices['Desktop Firefox'] },
|
|
||||||
},
|
|
||||||
|
|
||||||
// {
|
|
||||||
// name: 'webkit',
|
|
||||||
// use: { ...devices['Desktop Safari'] },
|
|
||||||
// },
|
|
||||||
|
|
||||||
/* Test against mobile viewports. */
|
|
||||||
// {
|
|
||||||
// name: 'Mobile Chrome',
|
|
||||||
// use: { ...devices['Pixel 5'] },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'Mobile Safari',
|
|
||||||
// use: { ...devices['iPhone 12'] },
|
|
||||||
// },
|
|
||||||
|
|
||||||
/* Test against branded browsers. */
|
|
||||||
// {
|
|
||||||
// name: 'Microsoft Edge',
|
|
||||||
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: 'Google Chrome',
|
|
||||||
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
|
|
||||||
/* Run your local dev server before starting the tests */
|
|
||||||
webServer: {
|
|
||||||
command: 'npm run serve',
|
|
||||||
url: 'http://localhost:3000',
|
|
||||||
reuseExistingServer: !process.env.CI,
|
|
||||||
timeout: 120 * 1000,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
83
server.js
83
server.js
@@ -1,83 +0,0 @@
|
|||||||
import { createServer } from 'http'
|
|
||||||
import express from 'express'
|
|
||||||
import { WebSocketServer } from 'ws'
|
|
||||||
import { fileURLToPath } from 'url'
|
|
||||||
import { dirname, join } from 'path'
|
|
||||||
import { setupWebSocketHandler } from './src/websocket-handler.js'
|
|
||||||
import { printServerInfo } from './src/server-utils.js'
|
|
||||||
|
|
||||||
const __filename = fileURLToPath(import.meta.url)
|
|
||||||
const __dirname = dirname(__filename)
|
|
||||||
|
|
||||||
// --- Configurazione del server ---
|
|
||||||
|
|
||||||
const DISPLAY_PORT = process.env.PORT || 3000
|
|
||||||
const CONTROLLER_PORT = process.env.CONTROLLER_PORT || 3001
|
|
||||||
|
|
||||||
// ========================================
|
|
||||||
// Server Display (porta principale)
|
|
||||||
// ========================================
|
|
||||||
|
|
||||||
const displayApp = express()
|
|
||||||
|
|
||||||
// Espone i file generati dalla build di Vite.
|
|
||||||
displayApp.use(express.static(join(__dirname, 'dist')))
|
|
||||||
|
|
||||||
// Fallback per SPA: restituisce `index.html` per tutte le route.
|
|
||||||
displayApp.get(/.*/, (_req, res) => {
|
|
||||||
res.sendFile(join(__dirname, 'dist', 'index.html'))
|
|
||||||
})
|
|
||||||
|
|
||||||
const displayServer = createServer(displayApp)
|
|
||||||
|
|
||||||
// Inizializza il server WebSocket condiviso.
|
|
||||||
const wss = new WebSocketServer({ noServer: true })
|
|
||||||
setupWebSocketHandler(wss)
|
|
||||||
|
|
||||||
displayServer.on('upgrade', (request, socket, head) => {
|
|
||||||
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
|
|
||||||
if (pathname === '/ws') {
|
|
||||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
|
||||||
wss.emit('connection', ws, request)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
socket.destroy()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
displayServer.listen(DISPLAY_PORT, '0.0.0.0', () => {
|
|
||||||
console.log(`[Display] Server running on port ${DISPLAY_PORT}`)
|
|
||||||
})
|
|
||||||
|
|
||||||
// ========================================
|
|
||||||
// Server Controller (porta separata)
|
|
||||||
// ========================================
|
|
||||||
|
|
||||||
const controllerApp = express()
|
|
||||||
|
|
||||||
// Espone gli stessi file statici della build.
|
|
||||||
// IMPORTANTE: { index: false } impedisce di servire index.html (il display) sulla root.
|
|
||||||
controllerApp.use(express.static(join(__dirname, 'dist'), { index: false }))
|
|
||||||
|
|
||||||
// Fallback: restituisce `controller.html` per tutte le route.
|
|
||||||
controllerApp.get(/.*/, (_req, res) => {
|
|
||||||
res.sendFile(join(__dirname, 'dist', 'controller.html'))
|
|
||||||
})
|
|
||||||
|
|
||||||
const controllerServer = createServer(controllerApp)
|
|
||||||
|
|
||||||
// Gestisce l'upgrade WebSocket anche sulla porta del controller.
|
|
||||||
controllerServer.on('upgrade', (request, socket, head) => {
|
|
||||||
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
|
|
||||||
if (pathname === '/ws') {
|
|
||||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
|
||||||
wss.emit('connection', ws, request)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
socket.destroy()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
controllerServer.listen(CONTROLLER_PORT, '0.0.0.0', () => {
|
|
||||||
printServerInfo(DISPLAY_PORT, CONTROLLER_PORT)
|
|
||||||
})
|
|
||||||
40
setup-android-icons.sh
Normal file
40
setup-android-icons.sh
Normal 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!"
|
||||||
@@ -1,3 +1,7 @@
|
|||||||
|
<script setup>
|
||||||
|
import HomePage from './components/HomePage/index.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<router-view />
|
<HomePage />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,908 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="controller-page">
|
|
||||||
<!-- Barra di stato connessione -->
|
|
||||||
<div class="conn-bar" :class="{ connected: wsConnected }">
|
|
||||||
<span class="dot"></span>
|
|
||||||
{{ wsConnected ? 'Connesso' : 'Connessione...' }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Anteprima punteggio -->
|
|
||||||
<div class="score-preview">
|
|
||||||
<div class="team-score home-bg" @click="sendAction({ type: 'incPunt', team: 'home' })">
|
|
||||||
<div class="team-name">{{ state.sp.nomi.home }}</div>
|
|
||||||
<div class="team-pts">{{ state.sp.punt.home }}</div>
|
|
||||||
<div class="team-set">SET {{ state.sp.set.home }}</div>
|
|
||||||
<img v-show="state.sp.servHome" src="/serv.png" class="serv-icon" />
|
|
||||||
</div>
|
|
||||||
<div class="team-score guest-bg" @click="sendAction({ type: 'incPunt', team: 'guest' })">
|
|
||||||
<div class="team-name">{{ state.sp.nomi.guest }}</div>
|
|
||||||
<div class="team-pts">{{ state.sp.punt.guest }}</div>
|
|
||||||
<div class="team-set">SET {{ state.sp.set.guest }}</div>
|
|
||||||
<img v-show="!state.sp.servHome" src="/serv.png" class="serv-icon" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Riga annulla punto -->
|
|
||||||
<div class="undo-row">
|
|
||||||
<button class="btn btn-undo" @click="sendAction({ type: 'decPunt' })">
|
|
||||||
ANNULLA PUNTO
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pulsanti set -->
|
|
||||||
<div class="action-row">
|
|
||||||
<button class="btn btn-set home-bg" @click="sendAction({ type: 'incSet', team: 'home' })">
|
|
||||||
SET {{ state.sp.nomi.home }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-set guest-bg" @click="sendAction({ type: 'incSet', team: 'guest' })">
|
|
||||||
SET {{ state.sp.nomi.guest }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Controlli principali -->
|
|
||||||
<div class="controls">
|
|
||||||
<button class="btn btn-ctrl" @click="sendAction({ type: 'cambiaPalla' })" :disabled="!isPunteggioZeroZero">
|
|
||||||
Cambio Palla
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-ctrl" @click="sendAction({ type: 'toggleFormazione' })">
|
|
||||||
{{ state.visuForm ? 'Punteggio' : 'Formazioni' }}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-ctrl" @click="sendAction({ type: 'toggleStriscia' })">
|
|
||||||
Striscia
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-ctrl" @click="sendAction({ type: 'toggleOrder' })">
|
|
||||||
Inverti
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-ctrl" @click="speak()">
|
|
||||||
Voce
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-ctrl" @click="openConfig()">
|
|
||||||
Config
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-ctrl" @click="openCambiTeam()">
|
|
||||||
Cambi
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-danger" @click="confirmReset = true">
|
|
||||||
Reset
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Finestra conferma reset -->
|
|
||||||
<div class="overlay" v-if="confirmReset" @click.self="confirmReset = false">
|
|
||||||
<div class="dialog">
|
|
||||||
<div class="dialog-title">Azzero punteggio?</div>
|
|
||||||
<div class="dialog-buttons">
|
|
||||||
<button class="btn btn-cancel" @click="confirmReset = false">NO</button>
|
|
||||||
<button class="btn btn-confirm" @click="doReset()">SI</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Finestra configurazione -->
|
|
||||||
<div class="overlay" v-if="showConfig" @click.self="showConfig = false">
|
|
||||||
<div class="dialog dialog-config">
|
|
||||||
<div class="dialog-title">Configurazione</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Nome Home</label>
|
|
||||||
<input type="text" v-model="configData.nomeHome" class="input-field" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Nome Guest</label>
|
|
||||||
<input type="text" v-model="configData.nomeGuest" class="input-field" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Modalità partita</label>
|
|
||||||
<div class="mode-buttons">
|
|
||||||
<button :class="['btn', 'btn-mode', configData.modalita === '2/3' ? 'active' : '']"
|
|
||||||
@click="configData.modalita = '2/3'">2/3</button>
|
|
||||||
<button :class="['btn', 'btn-mode', configData.modalita === '3/5' ? 'active' : '']"
|
|
||||||
@click="configData.modalita = '3/5'">3/5</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Formazione Home</label>
|
|
||||||
<div class="form-grid">
|
|
||||||
<div class="form-row">
|
|
||||||
<input type="text" v-model="configData.formHome[3]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formHome[2]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formHome[1]" class="input-num" />
|
|
||||||
</div>
|
|
||||||
<div class="form-line"></div>
|
|
||||||
<div class="form-row">
|
|
||||||
<input type="text" v-model="configData.formHome[4]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formHome[5]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formHome[0]" class="input-num" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Formazione Guest</label>
|
|
||||||
<div class="form-grid">
|
|
||||||
<div class="form-row">
|
|
||||||
<input type="text" v-model="configData.formGuest[3]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formGuest[2]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formGuest[1]" class="input-num" />
|
|
||||||
</div>
|
|
||||||
<div class="form-line"></div>
|
|
||||||
<div class="form-row">
|
|
||||||
<input type="text" v-model="configData.formGuest[4]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formGuest[5]" class="input-num" />
|
|
||||||
<input type="text" v-model="configData.formGuest[0]" class="input-num" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dialog-buttons">
|
|
||||||
<button class="btn btn-cancel" @click="showConfig = false">Annulla</button>
|
|
||||||
<button class="btn btn-confirm" @click="saveConfig()">OK</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Selezione squadra per cambi -->
|
|
||||||
<div class="overlay" v-if="showCambiTeam" @click.self="showCambiTeam = false">
|
|
||||||
<div class="dialog">
|
|
||||||
<div class="dialog-title">Scegli squadra</div>
|
|
||||||
<div class="dialog-buttons">
|
|
||||||
<button class="btn btn-set home-bg" @click="openCambi('home')">{{ state.sp.nomi.home }}</button>
|
|
||||||
<button class="btn btn-set guest-bg" @click="openCambi('guest')">{{ state.sp.nomi.guest }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Finestra gestione cambi -->
|
|
||||||
<div class="overlay" v-if="showCambi" @click.self="closeCambi()">
|
|
||||||
<div class="dialog">
|
|
||||||
<div class="dialog-title">{{ state.sp.nomi[cambiTeam] }}: CAMBIO</div>
|
|
||||||
<div class="cambi-container">
|
|
||||||
<div class="cambio-row" v-for="(c, i) in cambiData" :key="i">
|
|
||||||
<input type="text" v-model="c.in" placeholder="IN" class="input-num cambi-in-field" />
|
|
||||||
<span class="cambio-arrow">→</span>
|
|
||||||
<input type="text" v-model="c.out" placeholder="OUT" class="input-num cambi-out-field" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="cambiError" class="cambi-error">{{ cambiError }}</div>
|
|
||||||
<div class="dialog-buttons">
|
|
||||||
<button class="btn btn-cancel" @click="closeCambi()">Annulla</button>
|
|
||||||
<button class="btn btn-confirm" :disabled="!cambiValid" @click="confermaCambi()">CONFERMA</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "ControllerPage",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
ws: null,
|
|
||||||
wsConnected: false,
|
|
||||||
isConnecting: false,
|
|
||||||
reconnectTimeout: null,
|
|
||||||
reconnectAttempts: 0,
|
|
||||||
maxReconnectDelay: 30000,
|
|
||||||
confirmReset: false,
|
|
||||||
showConfig: false,
|
|
||||||
showCambiTeam: false,
|
|
||||||
showCambi: false,
|
|
||||||
cambiTeam: "home",
|
|
||||||
cambiData: [
|
|
||||||
{ in: "", out: "" },
|
|
||||||
{ in: "", out: "" },
|
|
||||||
],
|
|
||||||
cambiError: "",
|
|
||||||
configData: {
|
|
||||||
nomeHome: "",
|
|
||||||
nomeGuest: "",
|
|
||||||
modalita: "3/5",
|
|
||||||
formHome: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
formGuest: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
},
|
|
||||||
state: {
|
|
||||||
order: true,
|
|
||||||
visuForm: false,
|
|
||||||
visuStriscia: true,
|
|
||||||
modalitaPartita: "3/5",
|
|
||||||
sp: {
|
|
||||||
striscia: { home: [0], guest: [0] },
|
|
||||||
servHome: true,
|
|
||||||
punt: { home: 0, guest: 0 },
|
|
||||||
set: { home: 0, guest: 0 },
|
|
||||||
nomi: { home: "Antoniana", guest: "Guest" },
|
|
||||||
form: {
|
|
||||||
home: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
guest: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
},
|
|
||||||
storicoServizio: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isPunteggioZeroZero() {
|
|
||||||
return this.state.sp.punt.home === 0 && this.state.sp.punt.guest === 0
|
|
||||||
},
|
|
||||||
cambiValid() {
|
|
||||||
let hasComplete = false
|
|
||||||
let allValid = true
|
|
||||||
this.cambiData.forEach((c) => {
|
|
||||||
const cin = (c.in || "").trim()
|
|
||||||
const cout = (c.out || "").trim()
|
|
||||||
if (!cin && !cout) return
|
|
||||||
if (!cin || !cout) { allValid = false; return }
|
|
||||||
hasComplete = true
|
|
||||||
})
|
|
||||||
return allValid && hasComplete
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.connectWebSocket()
|
|
||||||
|
|
||||||
// Gestisce l'HMR di Vite evitando riconnessioni durante la ricarica a caldo.
|
|
||||||
if (import.meta.hot) {
|
|
||||||
import.meta.hot.on('vite:beforeUpdate', () => {
|
|
||||||
// Annulla eventuali tentativi di riconnessione pianificati.
|
|
||||||
if (this.reconnectTimeout) {
|
|
||||||
clearTimeout(this.reconnectTimeout)
|
|
||||||
this.reconnectTimeout = null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
// Pulisce il timeout di riconnessione.
|
|
||||||
if (this.reconnectTimeout) {
|
|
||||||
clearTimeout(this.reconnectTimeout)
|
|
||||||
this.reconnectTimeout = null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chiude il WebSocket con il codice di chiusura appropriato.
|
|
||||||
if (this.ws) {
|
|
||||||
this.ws.onclose = null // Rimuove il listener per evitare nuove riconnessioni pianificate.
|
|
||||||
this.ws.onerror = null
|
|
||||||
this.ws.onmessage = null
|
|
||||||
this.ws.onopen = null
|
|
||||||
|
|
||||||
// Usa il codice 1000 (chiusura normale) se la connessione e aperta.
|
|
||||||
try {
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.close(1000, 'Component unmounting')
|
|
||||||
} else if (this.ws.readyState === WebSocket.CONNECTING) {
|
|
||||||
// Se la connessione e ancora in fase di apertura, chiude direttamente.
|
|
||||||
this.ws.close()
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Controller] Error closing WebSocket:', err)
|
|
||||||
}
|
|
||||||
this.ws = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
connectWebSocket() {
|
|
||||||
// Evita connessioni simultanee multiple.
|
|
||||||
if (this.isConnecting) {
|
|
||||||
console.log('[Controller] Already connecting, skipping...')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chiude la connessione precedente, se presente.
|
|
||||||
if (this.ws) {
|
|
||||||
this.ws.onclose = null
|
|
||||||
this.ws.onerror = null
|
|
||||||
this.ws.onmessage = null
|
|
||||||
this.ws.onopen = null
|
|
||||||
try {
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.close(1000, 'Reconnecting')
|
|
||||||
} else if (this.ws.readyState === WebSocket.CONNECTING) {
|
|
||||||
this.ws.close()
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Controller] Error closing previous WebSocket:', err)
|
|
||||||
}
|
|
||||||
this.ws = null
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isConnecting = true
|
|
||||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
|
|
||||||
|
|
||||||
// Permette di specificare un host WebSocket alternativo via query parameter
|
|
||||||
// Utile per scenari WSL2 o development remoto: ?wsHost=192.168.1.100:3001
|
|
||||||
const params = new URLSearchParams(location.search)
|
|
||||||
const defaultHost = (
|
|
||||||
location.hostname === 'localhost' || location.hostname === '::1'
|
|
||||||
)
|
|
||||||
? `127.0.0.1${location.port ? `:${location.port}` : ''}`
|
|
||||||
: location.host
|
|
||||||
const wsHost = params.get('wsHost') || defaultHost
|
|
||||||
const wsUrl = `${protocol}//${wsHost}/ws`
|
|
||||||
|
|
||||||
console.log('[Controller] Connecting to WebSocket:', wsUrl)
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.ws = new WebSocket(wsUrl)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Controller] Failed to create WebSocket:', err)
|
|
||||||
this.isConnecting = false
|
|
||||||
this.scheduleReconnect()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onopen = () => {
|
|
||||||
this.isConnecting = false
|
|
||||||
this.wsConnected = true
|
|
||||||
this.reconnectAttempts = 0
|
|
||||||
console.log('[Controller] Connected to server')
|
|
||||||
|
|
||||||
// Invia la registrazione solo se la connessione e realmente aperta.
|
|
||||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
try {
|
|
||||||
this.ws.send(JSON.stringify({ type: 'register', role: 'controller' }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Controller] Failed to register:', err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const msg = JSON.parse(event.data)
|
|
||||||
|
|
||||||
if (msg.type === 'state') {
|
|
||||||
this.state = msg.state
|
|
||||||
} else if (msg.type === 'error') {
|
|
||||||
console.error('[Controller] Server error:', msg.message)
|
|
||||||
// Fornisce feedback di errore all'utente.
|
|
||||||
this.showErrorFeedback(msg.message)
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('[Controller] Parse error:', e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onclose = (event) => {
|
|
||||||
this.isConnecting = false
|
|
||||||
this.wsConnected = false
|
|
||||||
console.log('[Controller] Disconnected from server', event.code, event.reason)
|
|
||||||
|
|
||||||
// Non riconnette durante HMR (codice 1001, "going away")
|
|
||||||
// ne in caso di chiusura pulita (codice 1000).
|
|
||||||
if (event.code === 1000 || event.code === 1001) {
|
|
||||||
console.log('[Controller] Clean close, not reconnecting')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.scheduleReconnect()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onerror = (err) => {
|
|
||||||
console.error('[Controller] WebSocket error:', err)
|
|
||||||
this.isConnecting = false
|
|
||||||
this.wsConnected = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
scheduleReconnect() {
|
|
||||||
// Evita pianificazioni multiple della riconnessione.
|
|
||||||
if (this.reconnectTimeout) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Applica backoff esponenziale: 1s, 2s, 4s, 8s, 16s, fino a 30s.
|
|
||||||
const delay = Math.min(
|
|
||||||
1000 * Math.pow(2, this.reconnectAttempts),
|
|
||||||
this.maxReconnectDelay
|
|
||||||
)
|
|
||||||
this.reconnectAttempts++
|
|
||||||
|
|
||||||
console.log(`[Controller] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
|
|
||||||
|
|
||||||
this.reconnectTimeout = setTimeout(() => {
|
|
||||||
this.reconnectTimeout = null
|
|
||||||
this.connectWebSocket()
|
|
||||||
}, delay)
|
|
||||||
},
|
|
||||||
|
|
||||||
sendAction(action) {
|
|
||||||
if (!this.wsConnected || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
|
|
||||||
console.warn('[Controller] Cannot send action: not connected')
|
|
||||||
this.showErrorFeedback('Non connesso al server')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Valida l'azione prima dell'invio.
|
|
||||||
if (!action || !action.type) {
|
|
||||||
console.error('[Controller] Invalid action format:', action)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.ws.send(JSON.stringify({ type: 'action', action }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Controller] Failed to send action:', err)
|
|
||||||
this.showErrorFeedback('Errore invio comando')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
showErrorFeedback(message) {
|
|
||||||
// Feedback visivo degli errori: attualmente solo log su console.
|
|
||||||
// In futuro puo essere esteso con notifiche a comparsa (toast).
|
|
||||||
console.error('[Controller] Error:', message)
|
|
||||||
},
|
|
||||||
|
|
||||||
doReset() {
|
|
||||||
this.sendAction({ type: 'resetta' })
|
|
||||||
this.confirmReset = false
|
|
||||||
},
|
|
||||||
|
|
||||||
openConfig() {
|
|
||||||
this.configData.nomeHome = this.state.sp.nomi.home
|
|
||||||
this.configData.nomeGuest = this.state.sp.nomi.guest
|
|
||||||
this.configData.modalita = this.state.modalitaPartita
|
|
||||||
this.configData.formHome = [...this.state.sp.form.home]
|
|
||||||
this.configData.formGuest = [...this.state.sp.form.guest]
|
|
||||||
this.showConfig = true
|
|
||||||
},
|
|
||||||
|
|
||||||
saveConfig() {
|
|
||||||
this.sendAction({ type: 'setNomi', home: this.configData.nomeHome, guest: this.configData.nomeGuest })
|
|
||||||
this.sendAction({ type: 'setModalita', modalita: this.configData.modalita })
|
|
||||||
this.sendAction({ type: 'setFormazione', team: 'home', form: this.configData.formHome })
|
|
||||||
this.sendAction({ type: 'setFormazione', team: 'guest', form: this.configData.formGuest })
|
|
||||||
this.showConfig = false
|
|
||||||
},
|
|
||||||
|
|
||||||
openCambiTeam() {
|
|
||||||
this.showCambiTeam = true
|
|
||||||
},
|
|
||||||
|
|
||||||
openCambi(team) {
|
|
||||||
this.showCambiTeam = false
|
|
||||||
this.cambiTeam = team
|
|
||||||
this.cambiData = [{ in: "", out: "" }, { in: "", out: "" }]
|
|
||||||
this.cambiError = ""
|
|
||||||
this.showCambi = true
|
|
||||||
},
|
|
||||||
|
|
||||||
closeCambi() {
|
|
||||||
this.showCambi = false
|
|
||||||
this.cambiData = [{ in: "", out: "" }, { in: "", out: "" }]
|
|
||||||
this.cambiError = ""
|
|
||||||
},
|
|
||||||
|
|
||||||
confermaCambi() {
|
|
||||||
if (!this.cambiValid) return
|
|
||||||
this.cambiError = ""
|
|
||||||
|
|
||||||
const cambi = this.cambiData
|
|
||||||
.filter(c => (c.in || "").trim() && (c.out || "").trim())
|
|
||||||
.map(c => ({ in: c.in.trim(), out: c.out.trim() }))
|
|
||||||
|
|
||||||
// Simula i cambi in sequenza per validare
|
|
||||||
const formCorrente = this.state.sp.form[this.cambiTeam].map(v => String(v).trim())
|
|
||||||
const formSimulata = [...formCorrente]
|
|
||||||
|
|
||||||
for (const cambio of cambi) {
|
|
||||||
if (!/^\d+$/.test(cambio.in) || !/^\d+$/.test(cambio.out)) {
|
|
||||||
this.cambiError = "I numeri dei giocatori devono essere cifre"
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (cambio.in === cambio.out) {
|
|
||||||
this.cambiError = `Il giocatore ${cambio.in} non può sostituire sé stesso`
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (formSimulata.includes(cambio.in)) {
|
|
||||||
this.cambiError = `Il giocatore ${cambio.in} è già in formazione`
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!formSimulata.includes(cambio.out)) {
|
|
||||||
this.cambiError = `Il giocatore ${cambio.out} non è in formazione`
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const idx = formSimulata.indexOf(cambio.out)
|
|
||||||
formSimulata.splice(idx, 1, cambio.in)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.sendAction({ type: 'confermaCambi', team: this.cambiTeam, cambi })
|
|
||||||
this.closeCambi()
|
|
||||||
},
|
|
||||||
|
|
||||||
speak() {
|
|
||||||
let text = ''
|
|
||||||
if (this.state.sp.punt.home + this.state.sp.punt.guest === 0) {
|
|
||||||
text = "zero a zero"
|
|
||||||
} else if (this.state.sp.punt.home === this.state.sp.punt.guest) {
|
|
||||||
text = this.state.sp.punt.home + " pari"
|
|
||||||
} else {
|
|
||||||
if (this.state.sp.servHome) {
|
|
||||||
text = this.state.sp.punt.home + " a " + this.state.sp.punt.guest
|
|
||||||
} else {
|
|
||||||
text = this.state.sp.punt.guest + " a " + this.state.sp.punt.home
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!this.wsConnected || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
|
|
||||||
this.showErrorFeedback('Non connesso al server')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.ws.send(JSON.stringify({ type: 'speak', text }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Controller] Failed to send speak command:', err)
|
|
||||||
this.showErrorFeedback('Errore invio comando voce')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.controller-page {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #111;
|
|
||||||
color: #fff;
|
|
||||||
padding: 8px;
|
|
||||||
padding-top: 36px;
|
|
||||||
font-family: 'Inter', system-ui, sans-serif;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Barra stato connessione */
|
|
||||||
.conn-bar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 28px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #c62828;
|
|
||||||
color: white;
|
|
||||||
z-index: 200;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
.conn-bar.connected {
|
|
||||||
background: #2e7d32;
|
|
||||||
}
|
|
||||||
.dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Anteprima punteggio */
|
|
||||||
.score-preview {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.team-score {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 16px 12px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
transition: transform 0.1s;
|
|
||||||
min-height: 120px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.team-score:active {
|
|
||||||
transform: scale(0.97);
|
|
||||||
}
|
|
||||||
.home-bg {
|
|
||||||
background: linear-gradient(145deg, #1a1a1a, #333);
|
|
||||||
border: 2px solid #fdd835;
|
|
||||||
color: #fdd835;
|
|
||||||
}
|
|
||||||
.guest-bg {
|
|
||||||
background: linear-gradient(145deg, #0d47a1, #1565c0);
|
|
||||||
border: 2px solid #64b5f6;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.team-name {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.team-pts {
|
|
||||||
font-size: 56px;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.team-set {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
opacity: 0.75;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.serv-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Riga annulla punto */
|
|
||||||
.undo-row {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.btn-undo {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
color: #ffab91;
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.btn-undo:active {
|
|
||||||
background: rgba(255,100,50,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pulsanti set */
|
|
||||||
.action-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.btn-set {
|
|
||||||
flex: 1;
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.btn-set:active {
|
|
||||||
transform: scale(0.97);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Griglia controlli */
|
|
||||||
.controls {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
border: none;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ctrl {
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 1px solid rgba(255,255,255,0.15);
|
|
||||||
color: #e0e0e0;
|
|
||||||
padding: 14px 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
.btn-ctrl:active {
|
|
||||||
background: rgba(255,255,255,0.18);
|
|
||||||
}
|
|
||||||
.btn-ctrl:disabled {
|
|
||||||
opacity: 0.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: rgba(198, 40, 40, 0.25);
|
|
||||||
border: 1px solid rgba(239, 83, 80, 0.4);
|
|
||||||
color: #ef5350;
|
|
||||||
padding: 14px 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
.btn-danger:active {
|
|
||||||
background: rgba(198, 40, 40, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Overlay e finestre modali */
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0,0,0,0.75);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 300;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog {
|
|
||||||
background: #1e1e1e;
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 24px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-config {
|
|
||||||
max-height: 85vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 800;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-cancel {
|
|
||||||
flex: 1;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
color: #aaa;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-confirm {
|
|
||||||
flex: 1;
|
|
||||||
background: #2e7d32;
|
|
||||||
color: white;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.btn-confirm:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Gruppi form */
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #aaa;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.input-field {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
padding: 10px 14px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.input-field:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #64b5f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-num {
|
|
||||||
width: 52px;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
color: white;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.input-num:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #64b5f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Griglia formazione */
|
|
||||||
.form-grid {
|
|
||||||
background: rgba(205, 133, 63, 0.15);
|
|
||||||
border: 2px solid rgba(255,255,255,0.15);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
.form-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
.form-line {
|
|
||||||
border-top: 1px dashed rgba(255,255,255,0.3);
|
|
||||||
margin: 4px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pulsanti modalita */
|
|
||||||
.mode-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.btn-mode {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
color: #aaa;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
.btn-mode.active {
|
|
||||||
background: #2e7d32;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sezione cambi */
|
|
||||||
.cambi-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 14px;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
.cambio-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.cambio-arrow {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
.cambi-in-field {
|
|
||||||
background: rgba(120, 200, 120, 0.2) !important;
|
|
||||||
border-color: rgba(120, 200, 120, 0.4) !important;
|
|
||||||
}
|
|
||||||
.cambi-out-field {
|
|
||||||
background: rgba(200, 120, 120, 0.2) !important;
|
|
||||||
border-color: rgba(200, 120, 120, 0.4) !important;
|
|
||||||
}
|
|
||||||
.cambi-error {
|
|
||||||
color: #ff6b6b;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px 0;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,419 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="display-page">
|
|
||||||
<div class="campo">
|
|
||||||
<span v-if="state.order">
|
|
||||||
<!-- Ordine visualizzazione: home / guest -->
|
|
||||||
<div class="hea home">
|
|
||||||
<span :style="{ 'float': 'left' }">
|
|
||||||
{{ state.sp.nomi.home }}
|
|
||||||
<span class="serv-slot">
|
|
||||||
<img v-show="state.sp.servHome" src="/serv.png" width="25" />
|
|
||||||
</span>
|
|
||||||
<span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.home }}</span>
|
|
||||||
</span>
|
|
||||||
<span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.set.home }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hea guest">
|
|
||||||
<span :style="{ 'float': 'right' }">
|
|
||||||
<span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.guest }}</span>
|
|
||||||
<span class="serv-slot">
|
|
||||||
<img v-show="!state.sp.servHome" src="/serv.png" width="25" />
|
|
||||||
</span>
|
|
||||||
{{ state.sp.nomi.guest }}
|
|
||||||
</span>
|
|
||||||
<span class="ml3" :style="{ 'float': 'left' }">set {{ state.sp.set.guest }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span v-if="state.visuForm">
|
|
||||||
<div class="col form home">
|
|
||||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'hf'+x">
|
|
||||||
{{ state.sp.form.home[x] }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col form guest">
|
|
||||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'gf'+x">
|
|
||||||
{{ state.sp.form.guest[x] }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
<div class="punteggio-container">
|
|
||||||
<div class="col punt home">{{ state.sp.punt.home }}</div>
|
|
||||||
<div class="col punt guest">{{ state.sp.punt.guest }}</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span v-else>
|
|
||||||
<!-- Ordine visualizzazione: guest / home -->
|
|
||||||
<div class="hea guest">
|
|
||||||
<span :style="{ 'float': 'left' }">
|
|
||||||
{{ state.sp.nomi.guest }}
|
|
||||||
<span class="serv-slot">
|
|
||||||
<img v-show="!state.sp.servHome" src="/serv.png" width="25" />
|
|
||||||
</span>
|
|
||||||
<span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.guest }}</span>
|
|
||||||
</span>
|
|
||||||
<span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.set.guest }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hea home">
|
|
||||||
<span :style="{ 'float': 'right' }">
|
|
||||||
<span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.home }}</span>
|
|
||||||
<span class="serv-slot">
|
|
||||||
<img v-show="state.sp.servHome" src="/serv.png" width="25" />
|
|
||||||
</span>
|
|
||||||
{{ state.sp.nomi.home }}
|
|
||||||
</span>
|
|
||||||
<span class="ml3" :style="{ 'float': 'left' }">set {{ state.sp.set.home }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span v-if="state.visuForm">
|
|
||||||
<div class="col form guest">
|
|
||||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'gf2'+x">
|
|
||||||
{{ state.sp.form.guest[x] }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col form home">
|
|
||||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'hf2'+x">
|
|
||||||
{{ state.sp.form.home[x] }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span v-else>
|
|
||||||
<div class="punteggio-container">
|
|
||||||
<div class="col punt guest">{{ state.sp.punt.guest }}</div>
|
|
||||||
<div class="col punt home">{{ state.sp.punt.home }}</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="striscia" v-if="state.visuStriscia">
|
|
||||||
<div>
|
|
||||||
<span class="text-bold mr1">{{ state.sp.nomi.home }}</span>
|
|
||||||
<div v-for="(h, i) in state.sp.striscia.home" :key="'sh'+i" class="item">
|
|
||||||
{{ String(h) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="guest-striscia">
|
|
||||||
<span class="text-bold mr1">{{ state.sp.nomi.guest }}</span>
|
|
||||||
<div v-for="(h, i) in state.sp.striscia.guest" :key="'sg'+i" class="item">
|
|
||||||
{{ String(h) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Indicatore stato connessione -->
|
|
||||||
<div class="connection-status" :class="{ connected: wsConnected, disconnected: !wsConnected }">
|
|
||||||
<span class="dot"></span>
|
|
||||||
{{ wsConnected ? '' : 'Disconnesso' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "DisplayPage",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
ws: null,
|
|
||||||
wsConnected: false,
|
|
||||||
isConnecting: false,
|
|
||||||
reconnectTimeout: null,
|
|
||||||
reconnectAttempts: 0,
|
|
||||||
maxReconnectDelay: 30000, // Ritardo massimo di riconnessione: 30 secondi
|
|
||||||
state: {
|
|
||||||
order: true,
|
|
||||||
visuForm: false,
|
|
||||||
visuStriscia: true,
|
|
||||||
modalitaPartita: "3/5",
|
|
||||||
sp: {
|
|
||||||
striscia: { home: [0], guest: [0] },
|
|
||||||
servHome: true,
|
|
||||||
punt: { home: 0, guest: 0 },
|
|
||||||
set: { home: 0, guest: 0 },
|
|
||||||
nomi: { home: "Antoniana", guest: "Guest" },
|
|
||||||
form: {
|
|
||||||
home: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
guest: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
},
|
|
||||||
storicoServizio: [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.connectWebSocket()
|
|
||||||
// Attiva la modalita fullscreen su dispositivi mobili.
|
|
||||||
if (this.isMobile()) {
|
|
||||||
try { document.documentElement.requestFullscreen() } catch (e) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gestisce l'HMR di Vite evitando riconnessioni durante la ricarica a caldo.
|
|
||||||
if (import.meta.hot) {
|
|
||||||
import.meta.hot.on('vite:beforeUpdate', () => {
|
|
||||||
// Annulla eventuali tentativi di riconnessione pianificati.
|
|
||||||
if (this.reconnectTimeout) {
|
|
||||||
clearTimeout(this.reconnectTimeout)
|
|
||||||
this.reconnectTimeout = null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
// Pulisce il timeout di riconnessione.
|
|
||||||
if (this.reconnectTimeout) {
|
|
||||||
clearTimeout(this.reconnectTimeout)
|
|
||||||
this.reconnectTimeout = null
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chiude il WebSocket con il codice di chiusura appropriato.
|
|
||||||
if (this.ws) {
|
|
||||||
this.ws.onclose = null // Rimuove il listener per evitare nuove riconnessioni pianificate.
|
|
||||||
this.ws.onerror = null
|
|
||||||
this.ws.onmessage = null
|
|
||||||
this.ws.onopen = null
|
|
||||||
|
|
||||||
// Usa il codice 1000 (chiusura normale) se la connessione e aperta.
|
|
||||||
try {
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.close(1000, 'Component unmounting')
|
|
||||||
} else if (this.ws.readyState === WebSocket.CONNECTING) {
|
|
||||||
// Se la connessione e ancora in fase di apertura, chiude direttamente.
|
|
||||||
this.ws.close()
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Display] Error closing WebSocket:', err)
|
|
||||||
}
|
|
||||||
this.ws = null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isMobile() {
|
|
||||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
|
||||||
},
|
|
||||||
connectWebSocket() {
|
|
||||||
// Evita connessioni simultanee multiple.
|
|
||||||
if (this.isConnecting) {
|
|
||||||
console.log('[Display] Already connecting, skipping...')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chiude la connessione precedente, se presente.
|
|
||||||
if (this.ws) {
|
|
||||||
this.ws.onclose = null
|
|
||||||
this.ws.onerror = null
|
|
||||||
this.ws.onmessage = null
|
|
||||||
this.ws.onopen = null
|
|
||||||
try {
|
|
||||||
if (this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.close(1000, 'Reconnecting')
|
|
||||||
} else if (this.ws.readyState === WebSocket.CONNECTING) {
|
|
||||||
this.ws.close()
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Display] Error closing previous WebSocket:', err)
|
|
||||||
}
|
|
||||||
this.ws = null
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isConnecting = true
|
|
||||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
|
|
||||||
|
|
||||||
// Permette di specificare un host WebSocket alternativo via query parameter
|
|
||||||
// Utile per scenari WSL2 o development remoto: ?wsHost=192.168.1.100:5173
|
|
||||||
const params = new URLSearchParams(location.search)
|
|
||||||
const defaultHost = (
|
|
||||||
location.hostname === 'localhost' || location.hostname === '::1'
|
|
||||||
)
|
|
||||||
? `127.0.0.1${location.port ? `:${location.port}` : ''}`
|
|
||||||
: location.host
|
|
||||||
const wsHost = params.get('wsHost') || defaultHost
|
|
||||||
const wsUrl = `${protocol}//${wsHost}/ws`
|
|
||||||
|
|
||||||
console.log('[Display] Connecting to WebSocket:', wsUrl)
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.ws = new WebSocket(wsUrl)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Display] Failed to create WebSocket:', err)
|
|
||||||
this.isConnecting = false
|
|
||||||
this.scheduleReconnect()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onopen = () => {
|
|
||||||
this.isConnecting = false
|
|
||||||
this.wsConnected = true
|
|
||||||
this.reconnectAttempts = 0
|
|
||||||
console.log('[Display] Connected to server')
|
|
||||||
|
|
||||||
// Registra il client come display solo con connessione effettivamente aperta.
|
|
||||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
try {
|
|
||||||
this.ws.send(JSON.stringify({ type: 'register', role: 'display' }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[Display] Failed to register:', err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const msg = JSON.parse(event.data)
|
|
||||||
|
|
||||||
if (msg.type === 'state') {
|
|
||||||
this.state = msg.state
|
|
||||||
} else if (msg.type === 'speak') {
|
|
||||||
this.speakOnDisplay(msg.text)
|
|
||||||
} else if (msg.type === 'error') {
|
|
||||||
console.error('[Display] Server error:', msg.message)
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('[Display] Error parsing message:', e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onclose = (event) => {
|
|
||||||
this.isConnecting = false
|
|
||||||
this.wsConnected = false
|
|
||||||
console.log('[Display] Disconnected from server', event.code, event.reason)
|
|
||||||
|
|
||||||
// Non riconnette durante HMR (codice 1001, "going away")
|
|
||||||
// ne in caso di chiusura pulita (codice 1000).
|
|
||||||
if (event.code === 1000 || event.code === 1001) {
|
|
||||||
console.log('[Display] Clean close, not reconnecting')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.scheduleReconnect()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onerror = (err) => {
|
|
||||||
console.error('[Display] WebSocket error:', err)
|
|
||||||
this.isConnecting = false
|
|
||||||
this.wsConnected = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scheduleReconnect() {
|
|
||||||
// Evita pianificazioni multiple della riconnessione.
|
|
||||||
if (this.reconnectTimeout) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Applica backoff esponenziale: 1s, 2s, 4s, 8s, 16s, fino a 30s.
|
|
||||||
const delay = Math.min(
|
|
||||||
1000 * Math.pow(2, this.reconnectAttempts),
|
|
||||||
this.maxReconnectDelay
|
|
||||||
)
|
|
||||||
this.reconnectAttempts++
|
|
||||||
|
|
||||||
console.log(`[Display] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
|
|
||||||
|
|
||||||
this.reconnectTimeout = setTimeout(() => {
|
|
||||||
this.reconnectTimeout = null
|
|
||||||
this.connectWebSocket()
|
|
||||||
}, delay)
|
|
||||||
},
|
|
||||||
speakOnDisplay(text) {
|
|
||||||
if (typeof text !== 'string' || !text.trim()) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!('speechSynthesis' in window)) {
|
|
||||||
console.warn('[Display] speechSynthesis not supported')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const utterance = new SpeechSynthesisUtterance(text.trim())
|
|
||||||
const voices = window.speechSynthesis.getVoices()
|
|
||||||
const preferredVoice = voices.find((v) => v.name === 'Google italiano')
|
|
||||||
|| voices.find((v) => v.lang && v.lang.toLowerCase().startsWith('it'))
|
|
||||||
if (preferredVoice) {
|
|
||||||
utterance.voice = preferredVoice
|
|
||||||
}
|
|
||||||
utterance.lang = 'it-IT'
|
|
||||||
|
|
||||||
window.speechSynthesis.cancel()
|
|
||||||
window.speechSynthesis.speak(utterance)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.display-page {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
background: #000;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-status {
|
|
||||||
position: fixed;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
z-index: 100;
|
|
||||||
transition: opacity 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-status.connected {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-status.disconnected {
|
|
||||||
background: rgba(255, 50, 50, 0.8);
|
|
||||||
color: white;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connected .dot {
|
|
||||||
background: #4caf50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.disconnected .dot {
|
|
||||||
background: #f44336;
|
|
||||||
animation: blink 1s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.3; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.guest-striscia {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.punteggio-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.punt {
|
|
||||||
font-size: 60vh;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 50vh;
|
|
||||||
min-width: 50vw;
|
|
||||||
max-width: 50vw;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
264
src/components/HomePage.vue
Normal file
264
src/components/HomePage.vue
Normal 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
src/components/HomePage/HomePage.html
Normal file
129
src/components/HomePage/HomePage.html
Normal 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
src/components/HomePage/HomePage.js
Normal file
178
src/components/HomePage/HomePage.js
Normal 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
src/components/HomePage/HomePage.scss
Normal file
112
src/components/HomePage/HomePage.scss
Normal 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
src/components/HomePage/index.vue
Normal file
3
src/components/HomePage/index.vue
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<template src="./HomePage.html"></template>
|
||||||
|
<script src="./HomePage.js"></script>
|
||||||
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import './style.css'
|
|
||||||
import WaveUI from 'wave-ui'
|
|
||||||
import 'wave-ui/dist/wave-ui.css'
|
|
||||||
import ControllerPage from './components/ControllerPage.vue'
|
|
||||||
|
|
||||||
const app = createApp(ControllerPage)
|
|
||||||
app.use(WaveUI)
|
|
||||||
app.mount('#app')
|
|
||||||
206
src/gameState.js
206
src/gameState.js
@@ -1,206 +0,0 @@
|
|||||||
/**
|
|
||||||
* Logica di gioco condivisa per il segnapunti.
|
|
||||||
* Utilizzata sia dal server WebSocket sia dal client per l'anteprima locale.
|
|
||||||
*/
|
|
||||||
|
|
||||||
export function createInitialState() {
|
|
||||||
return {
|
|
||||||
order: true,
|
|
||||||
visuForm: false,
|
|
||||||
visuStriscia: true,
|
|
||||||
modalitaPartita: "3/5",
|
|
||||||
sp: {
|
|
||||||
striscia: { home: [0], guest: [0] },
|
|
||||||
servHome: true,
|
|
||||||
punt: { home: 0, guest: 0 },
|
|
||||||
set: { home: 0, guest: 0 },
|
|
||||||
nomi: { home: "Antoniana", guest: "Guest" },
|
|
||||||
form: {
|
|
||||||
home: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
guest: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
},
|
|
||||||
storicoServizio: [],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function checkVittoria(state) {
|
|
||||||
const puntHome = state.sp.punt.home
|
|
||||||
const puntGuest = state.sp.punt.guest
|
|
||||||
const setHome = state.sp.set.home
|
|
||||||
const setGuest = state.sp.set.guest
|
|
||||||
const totSet = setHome + setGuest
|
|
||||||
|
|
||||||
let isSetDecisivo = false
|
|
||||||
if (state.modalitaPartita === "2/3") {
|
|
||||||
isSetDecisivo = totSet >= 2
|
|
||||||
} else {
|
|
||||||
isSetDecisivo = totSet >= 4
|
|
||||||
}
|
|
||||||
|
|
||||||
const punteggioVittoria = isSetDecisivo ? 15 : 25
|
|
||||||
|
|
||||||
if (puntHome >= punteggioVittoria && puntHome - puntGuest >= 2) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
if (puntGuest >= punteggioVittoria && puntGuest - puntHome >= 2) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
export function applyAction(state, action) {
|
|
||||||
// Esegue un deep clone per evitare mutazioni indesiderate dello stato lato server.
|
|
||||||
// Restituisce sempre un nuovo oggetto di stato.
|
|
||||||
const s = JSON.parse(JSON.stringify(state))
|
|
||||||
|
|
||||||
switch (action.type) {
|
|
||||||
case "incPunt": {
|
|
||||||
const team = action.team
|
|
||||||
if (checkVittoria(s)) break
|
|
||||||
|
|
||||||
s.sp.storicoServizio.push({
|
|
||||||
servHome: s.sp.servHome,
|
|
||||||
cambioPalla: (team === "home" && !s.sp.servHome) || (team === "guest" && s.sp.servHome),
|
|
||||||
})
|
|
||||||
|
|
||||||
s.sp.punt[team]++
|
|
||||||
if (team === "home") {
|
|
||||||
s.sp.striscia.home.push(s.sp.punt.home)
|
|
||||||
s.sp.striscia.guest.push(" ")
|
|
||||||
} else {
|
|
||||||
s.sp.striscia.guest.push(s.sp.punt.guest)
|
|
||||||
s.sp.striscia.home.push(" ")
|
|
||||||
}
|
|
||||||
|
|
||||||
const cambioPalla = (team === "home" && !s.sp.servHome) || (team === "guest" && s.sp.servHome)
|
|
||||||
if (cambioPalla) {
|
|
||||||
s.sp.form[team].push(s.sp.form[team].shift())
|
|
||||||
}
|
|
||||||
|
|
||||||
s.sp.servHome = team === "home"
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "decPunt": {
|
|
||||||
if (s.sp.striscia.home.length > 1 && s.sp.storicoServizio.length > 0) {
|
|
||||||
const tmpHome = s.sp.striscia.home.pop()
|
|
||||||
s.sp.striscia.guest.pop()
|
|
||||||
const statoServizio = s.sp.storicoServizio.pop()
|
|
||||||
|
|
||||||
if (tmpHome === " ") {
|
|
||||||
s.sp.punt.guest--
|
|
||||||
if (statoServizio.cambioPalla) {
|
|
||||||
s.sp.form.guest.unshift(s.sp.form.guest.pop())
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
s.sp.punt.home--
|
|
||||||
if (statoServizio.cambioPalla) {
|
|
||||||
s.sp.form.home.unshift(s.sp.form.home.pop())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
s.sp.servHome = statoServizio.servHome
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "incSet": {
|
|
||||||
const team = action.team
|
|
||||||
if (s.sp.set[team] === 2) {
|
|
||||||
s.sp.set[team] = 0
|
|
||||||
} else {
|
|
||||||
s.sp.set[team]++
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "cambiaPalla": {
|
|
||||||
if (s.sp.punt.home === 0 && s.sp.punt.guest === 0) {
|
|
||||||
s.sp.servHome = !s.sp.servHome
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "resetta": {
|
|
||||||
s.visuForm = false
|
|
||||||
s.sp.punt.home = 0
|
|
||||||
s.sp.punt.guest = 0
|
|
||||||
s.sp.set.home = 0
|
|
||||||
s.sp.set.guest = 0
|
|
||||||
s.sp.form = {
|
|
||||||
home: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
guest: ["1", "2", "3", "4", "5", "6"],
|
|
||||||
}
|
|
||||||
s.sp.striscia = { home: [0], guest: [0] }
|
|
||||||
s.sp.storicoServizio = []
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "toggleFormazione": {
|
|
||||||
s.visuForm = !s.visuForm
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "toggleStriscia": {
|
|
||||||
s.visuStriscia = !s.visuStriscia
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "toggleOrder": {
|
|
||||||
s.order = !s.order
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "setNomi": {
|
|
||||||
if (action.home !== undefined) s.sp.nomi.home = action.home
|
|
||||||
if (action.guest !== undefined) s.sp.nomi.guest = action.guest
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "setModalita": {
|
|
||||||
s.modalitaPartita = action.modalita
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "setFormazione": {
|
|
||||||
if (action.team && action.form) {
|
|
||||||
s.sp.form[action.team] = [...action.form]
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
case "confermaCambi": {
|
|
||||||
const team = action.team
|
|
||||||
const cambi = action.cambi || []
|
|
||||||
const form = s.sp.form[team].map((val) => String(val).trim())
|
|
||||||
const formAggiornata = [...form]
|
|
||||||
|
|
||||||
let valid = true
|
|
||||||
for (const cambio of cambi) {
|
|
||||||
const cin = (cambio.in || "").trim()
|
|
||||||
const cout = (cambio.out || "").trim()
|
|
||||||
if (!cin || !cout) continue
|
|
||||||
if (!/^\d+$/.test(cin) || !/^\d+$/.test(cout)) { valid = false; break }
|
|
||||||
if (cin === cout) { valid = false; break }
|
|
||||||
if (formAggiornata.includes(cin)) { valid = false; break }
|
|
||||||
if (!formAggiornata.includes(cout)) { valid = false; break }
|
|
||||||
|
|
||||||
const idx = formAggiornata.findIndex((val) => String(val).trim() === cout)
|
|
||||||
if (idx !== -1) {
|
|
||||||
formAggiornata.splice(idx, 1, cin)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (valid) {
|
|
||||||
s.sp.form[team] = formAggiornata
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
return s
|
|
||||||
}
|
|
||||||
@@ -3,10 +3,8 @@ import './style.css'
|
|||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import WaveUI from 'wave-ui'
|
import WaveUI from 'wave-ui'
|
||||||
import 'wave-ui/dist/wave-ui.css'
|
import 'wave-ui/dist/wave-ui.css'
|
||||||
import DisplayPage from './components/DisplayPage.vue'
|
|
||||||
|
|
||||||
// In modalità display-only, non serve il router.
|
const app = createApp(App)
|
||||||
// Il display viene montato direttamente.
|
|
||||||
const app = createApp(DisplayPage)
|
|
||||||
app.use(WaveUI)
|
app.use(WaveUI)
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@@ -1,46 +0,0 @@
|
|||||||
import { networkInterfaces } from 'os'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Restituisce gli indirizzi IP di rete del sistema, escludendo loopback e bridge Docker.
|
|
||||||
* @returns {string[]} Elenco degli indirizzi IP disponibili.
|
|
||||||
*/
|
|
||||||
export function getNetworkIPs() {
|
|
||||||
const nets = networkInterfaces()
|
|
||||||
const networkIPs = []
|
|
||||||
|
|
||||||
for (const name of Object.keys(nets)) {
|
|
||||||
for (const net of nets[name]) {
|
|
||||||
// Esclude loopback (127.0.0.1), indirizzi non IPv4 e bridge Docker (172.17.x.x, 172.18.x.x).
|
|
||||||
if (net.family === 'IPv4' &&
|
|
||||||
!net.internal &&
|
|
||||||
!net.address.startsWith('172.17.') &&
|
|
||||||
!net.address.startsWith('172.18.')) {
|
|
||||||
networkIPs.push(net.address)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return networkIPs
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Stampa il riepilogo di avvio del server con gli URL di accesso.
|
|
||||||
* @param {number} displayPort - Porta del display.
|
|
||||||
* @param {number} controllerPort - Porta del controller.
|
|
||||||
*/
|
|
||||||
export function printServerInfo(displayPort = 5173, controllerPort = 3001) {
|
|
||||||
const networkIPs = getNetworkIPs()
|
|
||||||
|
|
||||||
console.log(`\nSegnapunti Server`)
|
|
||||||
console.log(` Display: http://127.0.0.1:${displayPort}/`)
|
|
||||||
console.log(` Controller: http://127.0.0.1:${controllerPort}/`)
|
|
||||||
|
|
||||||
if (networkIPs.length > 0) {
|
|
||||||
console.log(`\n Controller da dispositivi remoti:`)
|
|
||||||
networkIPs.forEach(ip => {
|
|
||||||
console.log(` http://${ip}:${controllerPort}/`)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log()
|
|
||||||
}
|
|
||||||
182
src/style.css
182
src/style.css
@@ -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;
|
||||||
@@ -151,114 +144,43 @@ button:focus-visible {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.campo-config {
|
/* Responsive mobile */
|
||||||
display: flex;
|
@media (max-width: 768px) {
|
||||||
flex-direction: column;
|
.hea {
|
||||||
align-items: center;
|
font-size: 4vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.campo-pallavolo {
|
.hea span {
|
||||||
border: 3px solid #999;
|
padding-left: 5px;
|
||||||
background-color: rgba(205, 133, 63, 0.25);
|
padding-right: 5px;
|
||||||
position: relative;
|
|
||||||
width: 220px;
|
|
||||||
height: 220px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fila-anteriore {
|
.hea img {
|
||||||
height: 33.33%;
|
width: 18px !important;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fila-posteriore {
|
.punt {
|
||||||
height: 66.67%;
|
font-size: 45vh;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.linea-tre-metri {
|
.form {
|
||||||
border-top: 2px solid #666;
|
font-size: 4vh;
|
||||||
width: 100%;
|
border-top: #fff dashed 15px;
|
||||||
height: 0;
|
padding-top: 30px;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cambi-rows {
|
.formdiv {
|
||||||
display: flex;
|
font-size: 15vh;
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cambi-dialog {
|
.bot button {
|
||||||
padding: 8px 6px 2px;
|
font-size: 0.7em;
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
margin-left: 3px;
|
||||||
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cambi-title {
|
.bot img {
|
||||||
text-align: center;
|
width: 20px !important;
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cambi-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cambi-arrow {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cambi-input {
|
|
||||||
min-width: 48px;
|
|
||||||
max-width: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cambi-input input,
|
|
||||||
.cambi-input .w-input__input,
|
|
||||||
.cambi-input .w-input__field {
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.35);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
color: #000;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cambi-in input,
|
|
||||||
.cambi-in .w-input__input,
|
|
||||||
.cambi-in .w-input__field {
|
|
||||||
background: rgba(120, 200, 120, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cambi-out input,
|
|
||||||
.cambi-out .w-input__input,
|
|
||||||
.cambi-out .w-input__field {
|
|
||||||
background: rgba(200, 120, 120, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cambi-input input:focus,
|
|
||||||
.cambi-input .w-input__input:focus,
|
|
||||||
.cambi-input .w-input__field:focus {
|
|
||||||
border-color: rgba(255, 255, 255, 0.7);
|
|
||||||
outline: none;
|
|
||||||
}
|
}
|
||||||
@@ -1,199 +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) {
|
|
||||||
// Stato globale della partita.
|
|
||||||
let gameState = createInitialState()
|
|
||||||
|
|
||||||
// Mappa dei ruoli associati ai client connessi.
|
|
||||||
const clients = new Map() // ws -> { role: 'display' | 'controller' }
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gestisce i messaggi in arrivo dal client
|
|
||||||
*/
|
|
||||||
function handleMessage(ws, data) {
|
|
||||||
try {
|
|
||||||
// Converte il payload in stringa in modo sicuro, anche se arriva come Buffer.
|
|
||||||
const dataStr = typeof data === 'string' ? data : data.toString('utf8')
|
|
||||||
const msg = JSON.parse(dataStr)
|
|
||||||
|
|
||||||
if (msg.type === 'register') {
|
|
||||||
return handleRegister(ws, msg)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (msg.type === 'action') {
|
|
||||||
return handleAction(ws, msg)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (msg.type === 'speak') {
|
|
||||||
return handleSpeak(ws, msg)
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error processing message:', err, 'data:', data)
|
|
||||||
// Invia l'errore solo se la connessione e ancora aperta.
|
|
||||||
if (ws.readyState === 1) { // Stato WebSocket.OPEN
|
|
||||||
try {
|
|
||||||
sendError(ws, 'Invalid message format')
|
|
||||||
} catch (sendErr) {
|
|
||||||
console.error('Error sending error message:', sendErr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gestisce la registrazione di un client (display o controller)
|
|
||||||
*/
|
|
||||||
function handleRegister(ws, msg) {
|
|
||||||
const role = msg.role || 'display'
|
|
||||||
|
|
||||||
// Valida il ruolo dichiarato dal client.
|
|
||||||
if (!['display', 'controller'].includes(role)) {
|
|
||||||
sendError(ws, 'Invalid role')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
clients.set(ws, { role })
|
|
||||||
console.log(`[WebSocket] Client registered as: ${role} (total clients: ${clients.size})`)
|
|
||||||
|
|
||||||
// Invia subito lo stato corrente, se la connessione e aperta.
|
|
||||||
if (ws.readyState === 1) { // Stato WebSocket.OPEN
|
|
||||||
try {
|
|
||||||
ws.send(JSON.stringify({ type: 'state', state: gameState }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error sending initial state:', err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gestisce un'azione di gioco dal controller
|
|
||||||
*/
|
|
||||||
function handleAction(ws, msg) {
|
|
||||||
// Solo i client controller possono inviare azioni.
|
|
||||||
const client = clients.get(ws)
|
|
||||||
if (!client || client.role !== 'controller') {
|
|
||||||
sendError(ws, 'Only controllers can send actions')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Verifica il formato dell'azione ricevuta.
|
|
||||||
if (!msg.action || !msg.action.type) {
|
|
||||||
sendError(ws, 'Invalid action format')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Applica l'azione allo stato della partita.
|
|
||||||
const previousState = gameState
|
|
||||||
try {
|
|
||||||
gameState = applyAction(gameState, msg.action)
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error applying action:', err)
|
|
||||||
sendError(ws, 'Failed to apply action')
|
|
||||||
gameState = previousState
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Propaga il nuovo stato a tutti i client connessi.
|
|
||||||
broadcastState()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gestisce una richiesta di sintesi vocale proveniente dal controller.
|
|
||||||
* Il messaggio viene inoltrato solo ai client registrati come display.
|
|
||||||
*/
|
|
||||||
function handleSpeak(ws, msg) {
|
|
||||||
const client = clients.get(ws)
|
|
||||||
if (!client || client.role !== 'controller') {
|
|
||||||
sendError(ws, 'Only controllers can request speech')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof msg.text !== 'string' || msg.text.trim() === '') {
|
|
||||||
sendError(ws, 'Invalid speak payload')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const speakMsg = JSON.stringify({ type: 'speak', text: msg.text.trim() })
|
|
||||||
clients.forEach((meta, clientWs) => {
|
|
||||||
if (meta.role === 'display' && clientWs.readyState === 1) {
|
|
||||||
clientWs.send(speakMsg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Invia un messaggio di errore al client
|
|
||||||
*/
|
|
||||||
function sendError(ws, message) {
|
|
||||||
if (ws.readyState === 1) { // Stato WebSocket.OPEN
|
|
||||||
try {
|
|
||||||
ws.send(JSON.stringify({ type: 'error', message }))
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to send error message:', err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Invia lo stato corrente a tutti i client connessi.
|
|
||||||
*/
|
|
||||||
function broadcastState() {
|
|
||||||
const stateMsg = JSON.stringify({ type: 'state', state: gameState })
|
|
||||||
wss.clients.forEach((client) => {
|
|
||||||
if (client.readyState === 1) { // Stato WebSocket.OPEN
|
|
||||||
client.send(stateMsg)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gestisce la chiusura della connessione
|
|
||||||
*/
|
|
||||||
function handleClose(ws) {
|
|
||||||
const client = clients.get(ws)
|
|
||||||
const role = client?.role || 'unknown'
|
|
||||||
console.log(`[WebSocket] Client disconnected (role: ${role})`)
|
|
||||||
clients.delete(ws)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Gestisce gli errori WebSocket
|
|
||||||
*/
|
|
||||||
function handleError(err, ws) {
|
|
||||||
console.error('WebSocket error:', err)
|
|
||||||
|
|
||||||
// In caso di frame non validi, chiude forzatamente la connessione.
|
|
||||||
if (err.code === 'WS_ERR_INVALID_CLOSE_CODE' || err.code === 'WS_ERR_INVALID_UTF8') {
|
|
||||||
try {
|
|
||||||
if (ws && ws.readyState === 1) { // Stato WebSocket.OPEN
|
|
||||||
ws.terminate() // Chiusura forzata senza handshake di chiusura.
|
|
||||||
}
|
|
||||||
} catch (closeErr) {
|
|
||||||
console.error('Error closing connection:', closeErr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Registra gli handler per ogni nuova connessione.
|
|
||||||
wss.on('connection', (ws) => {
|
|
||||||
// Imposta il tipo binario per ridurre i problemi di codifica.
|
|
||||||
ws.binaryType = 'arraybuffer'
|
|
||||||
|
|
||||||
ws.on('message', (data) => handleMessage(ws, data))
|
|
||||||
ws.on('close', () => handleClose(ws))
|
|
||||||
ws.on('error', (err) => handleError(err, ws))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Espone un'API pubblica per controllo esterno, se necessario.
|
|
||||||
return {
|
|
||||||
getState: () => gameState,
|
|
||||||
setState: (newState) => { gameState = newState },
|
|
||||||
broadcastState,
|
|
||||||
getClients: () => clients,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
169
tests/README.md
169
tests/README.md
@@ -1,169 +0,0 @@
|
|||||||
# Guida ai Test per Principianti - Segnapunti
|
|
||||||
|
|
||||||
Benvenuto nella guida ai test del progetto!
|
|
||||||
|
|
||||||
Questo progetto usa tre tipi di test:
|
|
||||||
|
|
||||||
```text
|
|
||||||
tests/
|
|
||||||
├── unit/ # Test veloci per logica pura (funzioni, classi)
|
|
||||||
├── integration/ # Test per componenti che interagiscono (es. WebSocket)
|
|
||||||
├── e2e/ # Test simil-utente reale (Controller -> Display flux)
|
|
||||||
└── README.md # Questa guida
|
|
||||||
```
|
|
||||||
|
|
||||||
1. **Test Unitari (unit) (Vitest)**: Si occupano di verificare le singole funzioni, i componenti e la logica di business in isolamento. Sono progettati per essere estremamente veloci e fornire un feedback immediato sulla correttezza del codice durante lo sviluppo, garantendo che ogni piccola parte del sistema funzioni come previsto.
|
|
||||||
2. **Test di Integrazione (integration) (Vitest)**: Verificano che diversi moduli o servizi (come la comunicazione tramite WebSocket tra server e client) funzionino correttamente insieme, garantendo che i messaggi e gli eventi vengano scambiati e gestiti come previsto.
|
|
||||||
3. **Test End-to-End (E2E) (Playwright)**: Questi test simulano il comportamento di un utente reale all'interno di un browser (come Chrome o Firefox). Verificano che l'intera applicazione funzioni correttamente dall'inizio alla fine, testando l'interfaccia utente, le API e il database insieme per assicurarsi che i flussi principali (come la creazione di una partita) non presentino errori.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 1. Come eseguire i Test Veloci (Unit)
|
|
||||||
|
|
||||||
Questi test controllano che la logica interna del server funzioni correttamente.
|
|
||||||
|
|
||||||
### Cosa viene testato?
|
|
||||||
|
|
||||||
#### `gameState.test.js` (Logica di Gioco)
|
|
||||||
|
|
||||||
- **Punteggio**: Verifica che i punti aumentino correttamente (0 -> 1).
|
|
||||||
- **Cambio Palla**: Controlla che il servizio passi all'avversario e che la formazione ruoti.
|
|
||||||
- **Vittoria Set**:
|
|
||||||
- Verifica la vittoria a 25 punti.
|
|
||||||
- Verifica la regola dei vantaggi (si vince solo con 2 punti di scarto, es. 26-24).
|
|
||||||
- **Reset**: Controlla che il tasto Reset azzeri punti, set e formazioni.
|
|
||||||
|
|
||||||
#### `server-utils.test.js` (Utility)
|
|
||||||
|
|
||||||
- **Stampa Info**: Verifica che il server stampi gli indirizzi IP corretti all'avvio.
|
|
||||||
|
|
||||||
### Comando
|
|
||||||
|
|
||||||
Apri il terminale nella cartella del progetto e scrivi:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run test:unit
|
|
||||||
```
|
|
||||||
|
|
||||||
### Cosa succede se va tutto bene?
|
|
||||||
|
|
||||||
Vedrai delle scritte verdi con la spunta `✓`.
|
|
||||||
Esempio:
|
|
||||||
|
|
||||||
```
|
|
||||||
✓ tests/unit/server-utils.test.js (1 test)
|
|
||||||
Test Files 1 passed (1)
|
|
||||||
Tests 1 passed (1)
|
|
||||||
```
|
|
||||||
|
|
||||||
Significa che il codice funziona come previsto!
|
|
||||||
|
|
||||||
### Cosa succede se c'è un errore?
|
|
||||||
|
|
||||||
Vedrai delle scritte rosse `×` e un messaggio che ti dice cosa non va.
|
|
||||||
Esempio:
|
|
||||||
|
|
||||||
```
|
|
||||||
× tests/unit/server-utils.test.js > Server Utils > ...
|
|
||||||
AssertionError: expected 'A' to include 'B'
|
|
||||||
```
|
|
||||||
|
|
||||||
Significa che hai rotto qualcosa nel codice. Leggi l'errore per capire dove (ti dirà il file e la riga).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2. Come eseguire i Test di Integrazione (Integration)
|
|
||||||
|
|
||||||
Questi test verificano che i componenti del sistema comunichino correttamente tra loro (es. il Server e i Client WebSocket).
|
|
||||||
|
|
||||||
### Cosa viene testato?
|
|
||||||
|
|
||||||
#### `websocket.test.js` (Integrazione WebSocket)
|
|
||||||
|
|
||||||
- **Registrazione**: Verifica che un client riceva lo stato del gioco appena si collega.
|
|
||||||
- **Flusso Messaggi**: Controlla che quando il Controller invia un comando, il Server lo riceva e lo inoltri a tutti (es. Display).
|
|
||||||
- **Sicurezza**: Assicura che solo il "Controller" possa cambiare i punti (il "Display" non può inviare comandi di modifica).
|
|
||||||
|
|
||||||
### Comando
|
|
||||||
|
|
||||||
I test di integrazione sono eseguiti insieme agli unit test:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run test:unit
|
|
||||||
```
|
|
||||||
|
|
||||||
*(Se vuoi eseguire solo gli integrazione, puoi usare `npx vitest tests/integration`)*
|
|
||||||
|
|
||||||
### Cosa succede se va tutto bene?
|
|
||||||
|
|
||||||
Come per gli unit test, vedrai delle spunte verdi `✓` anche per i file nella cartella `tests/integration/`.
|
|
||||||
|
|
||||||
### Cosa succede se c'è un errore?
|
|
||||||
|
|
||||||
Vedrai un errore simile agli unit test, ma spesso legato a problemi di comunicazione (es. "expected message not received").
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 3. Come eseguire i Test Completi (E2E)
|
|
||||||
|
|
||||||
Questi test simulano un utente che apre il sito. Il computer farà partire il server, aprirà un browser invisibile (o visibile) e proverà a usare il sito come farebbe una persona.
|
|
||||||
|
|
||||||
### Cosa viene testato?
|
|
||||||
|
|
||||||
#### `game-simulation.spec.js` (Simulazione Partita)
|
|
||||||
|
|
||||||
Un "robot" esegue queste azioni automaticamente:
|
|
||||||
|
|
||||||
1. Apre il **Display** e il **Controller** in due schede diverse.
|
|
||||||
2. Premi **Reset** per essere sicuro di partire da zero.
|
|
||||||
3. Clicca **25 volte** sul tasto "+" del Controller.
|
|
||||||
4. Controlla che sul **Display** appaia che il set è stato vinto (Punteggio Set: 1).
|
|
||||||
|
|
||||||
### Comando
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run test:e2e
|
|
||||||
```
|
|
||||||
|
|
||||||
(Oppure `npx playwright test` per maggiori opzioni)
|
|
||||||
|
|
||||||
### Cosa succede se va tutto bene?
|
|
||||||
|
|
||||||
Il test impiegherà qualche secondo (è più lento degli unit test). Se tutto va bene, vedrai:
|
|
||||||
|
|
||||||
```
|
|
||||||
Running 1 test using 1 worker
|
|
||||||
✓ 1 [chromium] › tests/e2e/game-simulation.spec.js:3:1 › Game Simulation (5.0s)
|
|
||||||
1 passed (5.5s)
|
|
||||||
```
|
|
||||||
|
|
||||||
Significa che il sito si apre correttamente e il flusso di gioco funziona dall'inizio alla fine!
|
|
||||||
|
|
||||||
### Cosa succede se c'è un errore?
|
|
||||||
|
|
||||||
Se qualcosa non va (es. il server non parte, o il controller non aggiorna il display), il test fallirà.
|
|
||||||
Playwright genererà un **Report HTML** molto dettagliato.
|
|
||||||
Per vederlo, scrivi:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx playwright show-report
|
|
||||||
```
|
|
||||||
|
|
||||||
Si aprirà una pagina web dove potrai vedere passo-passo cosa è successo, inclusi screenshot e video dell'errore.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Domande Frequenti
|
|
||||||
|
|
||||||
**Q: I test E2E falliscono su WebKit (Safari)?**
|
|
||||||
A: È normale su Linux se non hai installato tutte le librerie di sistema. Per ora testiamo solo su **Chromium** (Chrome) e **Firefox** che sono più facili da far girare.
|
|
||||||
|
|
||||||
**Q: Devo avviare il server prima dei test?**
|
|
||||||
A: No! Il comando `npm run test:e2e` avvia automaticamente il tuo server (`npm run serve`) prima di iniziare i test.
|
|
||||||
|
|
||||||
**Q: Come creo un nuovo test?**
|
|
||||||
A:
|
|
||||||
|
|
||||||
- **Unit**: Crea un file `.test.js` in `tests/unit/`. Copia l'esempio esistente.
|
|
||||||
- **Integration**: Crea un file `.test.js` in `tests/integration/`.
|
|
||||||
- **E2E**: Crea un file `.spec.js` in `tests/e2e/`. Copia l'esempio esistente.
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test('Controller updates Display score', async ({ context }) => {
|
|
||||||
// 1. Create two pages (Controller and Display)
|
|
||||||
const displayPage = await context.newPage();
|
|
||||||
const controllerPage = await context.newPage();
|
|
||||||
|
|
||||||
// 2. Open Display
|
|
||||||
await displayPage.goto('http://localhost:3000');
|
|
||||||
await expect(displayPage).toHaveTitle(/Segnapunti/);
|
|
||||||
|
|
||||||
// 3. Open Controller
|
|
||||||
await controllerPage.goto('http://localhost:3001');
|
|
||||||
await expect(controllerPage).toHaveTitle(/Controller/);
|
|
||||||
|
|
||||||
// 4. Check initial state (assuming reset)
|
|
||||||
// Note: This depends on the specific IDs in your HTML.
|
|
||||||
// You might need to adjust selectors based on your actual HTML structure.
|
|
||||||
|
|
||||||
// Example: waiting for score element
|
|
||||||
// await expect(displayPage.locator('#score-home')).toHaveText('0');
|
|
||||||
|
|
||||||
// 5. Action on Controller
|
|
||||||
// await controllerPage.click('#btn-add-home');
|
|
||||||
|
|
||||||
// 6. Verify on Display
|
|
||||||
// await expect(displayPage.locator('#score-home')).toHaveText('1');
|
|
||||||
});
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
|
|
||||||
test.describe('Game Simulation', () => {
|
|
||||||
test('Simulazione Partita: Controller aggiunge punti finché non cambia il set', async ({ context }) => {
|
|
||||||
// 1. Setup Pagine
|
|
||||||
const displayPage = await context.newPage();
|
|
||||||
const controllerPage = await context.newPage();
|
|
||||||
|
|
||||||
await displayPage.goto('http://localhost:3000');
|
|
||||||
await controllerPage.goto('http://localhost:3001');
|
|
||||||
|
|
||||||
// Selettori (basati su ID ipotetici o classi, adattali al tuo HTML reale)
|
|
||||||
// Assumo che nel DOM ci siano elementi con ID o classi riconoscibili
|
|
||||||
// E che i punteggi siano visibili.
|
|
||||||
|
|
||||||
// Pulisco lo stato iniziale (reset)
|
|
||||||
const btnReset = controllerPage.getByText(/Reset/i).first();
|
|
||||||
if (await btnReset.isVisible()) {
|
|
||||||
await btnReset.click();
|
|
||||||
// La modale di conferma ha un bottone "SI" con classe .btn-confirm
|
|
||||||
const btnConfirmReset = controllerPage.locator('.dialog .btn-confirm').getByText('SI');
|
|
||||||
if (await btnConfirmReset.isVisible()) {
|
|
||||||
await btnConfirmReset.click();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Loop per vincere il primo set (25 punti)
|
|
||||||
// In ControllerPage.vue, il click su .team-score.home-bg incrementa i punti home
|
|
||||||
const btnHomeScore = controllerPage.locator('.team-score.home-bg');
|
|
||||||
|
|
||||||
for (let i = 0; i < 25; i++) {
|
|
||||||
await btnHomeScore.click();
|
|
||||||
// Piccola pausa per lasciare tempo al server di processare e broadcastare
|
|
||||||
//await displayPage.waitForTimeout(10);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Verifica Vittoria Set
|
|
||||||
// I punti dovrebbero essere tornati a 0 (o mostrare 25 prima del reset manuale?)
|
|
||||||
// Il codice gameState dice: checkVittoria -> resetta solo se qualcuno chiama resetta?
|
|
||||||
// No, checkVittoria è boolean. applyAction('incPunt') incrementa.
|
|
||||||
// Se vince, il set incrementa? 'incPunt' non incrementa i set in automatico nel codice gameState checkato prima!
|
|
||||||
// Controllo applyAction:
|
|
||||||
// "s.sp.punt[team]++" ... POI "checkVittoria(s)" all'inizio del prossimo incPunt?
|
|
||||||
// NO: "if (checkVittoria(s)) break" all'inizio di incPunt impedisce di andare oltre 25 se già vinto.
|
|
||||||
// MA 'incSet' è un'azione separata!
|
|
||||||
|
|
||||||
// Aspetta, la logica standard è: arrivo a 25 -> vinco set?
|
|
||||||
// In questo codice `gameState.js` NON c'è automatismo "arrivo a 25 -> set++ e palla al centro".
|
|
||||||
// L'utente deve cliccare "SET Antoniana" manualmente?
|
|
||||||
// Guardiamo ControllerPage.vue:
|
|
||||||
// C'è un bottone "SET {{ state.sp.nomi.home }}" che manda { type: 'incSet', team: 'home' }
|
|
||||||
|
|
||||||
// QUINDI: Il test deve:
|
|
||||||
// 1. Arrivare a 25 pt.
|
|
||||||
// 2. Cliccare "SET HOME".
|
|
||||||
// 3. Verificare che Set Home = 1.
|
|
||||||
|
|
||||||
// Verifica che siamo a 25
|
|
||||||
await expect(controllerPage.locator('.team-score.home-bg .team-pts')).toHaveText('25');
|
|
||||||
|
|
||||||
// Clicca bottone SET
|
|
||||||
const btnSetHome = controllerPage.locator('.btn-set.home-bg');
|
|
||||||
await btnSetHome.click();
|
|
||||||
|
|
||||||
// Verifica che il set sia incrementato
|
|
||||||
// Nota: display potrebbe chiamarsi diversamente, controlliamo Controller per coerenza
|
|
||||||
await expect(controllerPage.locator('.team-score.home-bg .team-set')).toContainText('SET 1');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
|
|
||||||
import { setupWebSocketHandler } from '../../src/websocket-handler.js'
|
|
||||||
import { EventEmitter } from 'events'
|
|
||||||
|
|
||||||
// Mock parziale di una WebSocket e del Server
|
|
||||||
class MockWebSocket extends EventEmitter {
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.readyState = 1 // OPEN
|
|
||||||
}
|
|
||||||
send = vi.fn()
|
|
||||||
terminate = vi.fn()
|
|
||||||
}
|
|
||||||
|
|
||||||
class MockWebSocketServer extends EventEmitter {
|
|
||||||
clients = new Set()
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('WebSocket Integration (websocket-handler.js)', () => {
|
|
||||||
let wss
|
|
||||||
let handler
|
|
||||||
let ws
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
wss = new MockWebSocketServer()
|
|
||||||
handler = setupWebSocketHandler(wss)
|
|
||||||
ws = new MockWebSocket()
|
|
||||||
// Simuliamo la connessione
|
|
||||||
wss.emit('connection', ws)
|
|
||||||
// Aggiungiamo il client al set del server (come farebbe 'ws' realmente)
|
|
||||||
wss.clients.add(ws)
|
|
||||||
})
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
vi.restoreAllMocks()
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe registrare un client come "display" e inviare lo stato', () => {
|
|
||||||
ws.emit('message', JSON.stringify({ type: 'register', role: 'display' }))
|
|
||||||
|
|
||||||
// Verifica che abbia inviato lo stato iniziale
|
|
||||||
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 permettere al controller di cambiare il punteggio', () => {
|
|
||||||
// 1. Registra Controller
|
|
||||||
ws.emit('message', JSON.stringify({ type: 'register', role: 'controller' }))
|
|
||||||
ws.send.mockClear() // pulisco chiamate precedenti
|
|
||||||
|
|
||||||
// 2. Invia Azione
|
|
||||||
ws.emit('message', JSON.stringify({
|
|
||||||
type: 'action',
|
|
||||||
action: { type: 'incPunt', team: 'home' }
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 3. Verifica Broadcast del nuovo stato
|
|
||||||
expect(ws.send).toHaveBeenCalled()
|
|
||||||
const sentMsg = JSON.parse(ws.send.mock.calls[0][0])
|
|
||||||
expect(sentMsg.type).toBe('state')
|
|
||||||
expect(sentMsg.state.sp.punt.home).toBe(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe impedire al display di inviare azioni', () => {
|
|
||||||
// 1. Registra Display
|
|
||||||
ws.emit('message', JSON.stringify({ type: 'register', role: 'display' }))
|
|
||||||
ws.send.mockClear()
|
|
||||||
|
|
||||||
// 2. Tenta Azione
|
|
||||||
ws.emit('message', JSON.stringify({
|
|
||||||
type: 'action',
|
|
||||||
action: { type: 'incPunt', team: 'home' }
|
|
||||||
}))
|
|
||||||
|
|
||||||
// 3. Verifica Errore
|
|
||||||
expect(ws.send).toHaveBeenCalled()
|
|
||||||
const sentMsg = JSON.parse(ws.send.mock.calls[0][0])
|
|
||||||
expect(sentMsg.type).toBe('error')
|
|
||||||
expect(sentMsg.message).toContain('Only controllers')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import { describe, it, expect, beforeEach } from 'vitest'
|
|
||||||
import { createInitialState, applyAction, checkVittoria } from '../../src/gameState.js'
|
|
||||||
|
|
||||||
describe('Game Logic (gameState.js)', () => {
|
|
||||||
let state
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
state = createInitialState()
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('Initial State', () => {
|
|
||||||
it('dovrebbe iniziare con 0-0', () => {
|
|
||||||
expect(state.sp.punt.home).toBe(0)
|
|
||||||
expect(state.sp.punt.guest).toBe(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe avere i set a 0', () => {
|
|
||||||
expect(state.sp.set.home).toBe(0)
|
|
||||||
expect(state.sp.set.guest).toBe(0)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('Punteggio', () => {
|
|
||||||
it('dovrebbe incrementare i punti (Home)', () => {
|
|
||||||
const newState = applyAction(state, { type: 'incPunt', team: 'home' })
|
|
||||||
expect(newState.sp.punt.home).toBe(1)
|
|
||||||
expect(newState.sp.punt.guest).toBe(0)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe gestire il cambio palla', () => {
|
|
||||||
// Home batte
|
|
||||||
state.sp.servHome = true
|
|
||||||
// Punto Guest -> Cambio palla
|
|
||||||
const s1 = applyAction(state, { type: 'incPunt', team: 'guest' })
|
|
||||||
expect(s1.sp.servHome).toBe(false) // Ora batte Guest
|
|
||||||
|
|
||||||
// Punto Home -> Cambio palla
|
|
||||||
const s2 = applyAction(s1, { type: 'incPunt', team: 'home' })
|
|
||||||
expect(s2.sp.servHome).toBe(true) // Torna a battere Home
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe gestire la rotazione formazione al cambio palla', () => {
|
|
||||||
state.sp.servHome = true // Batte Home
|
|
||||||
state.sp.form.guest = ["1", "2", "3", "4", "5", "6"]
|
|
||||||
|
|
||||||
// Punto Guest -> Cambio palla e rotazione Guest
|
|
||||||
const newState = applyAction(state, { type: 'incPunt', team: 'guest' })
|
|
||||||
|
|
||||||
// Verifica che la formazione sia ruotata (il primo elemento diventa ultimo)
|
|
||||||
expect(newState.sp.form.guest).toEqual(["2", "3", "4", "5", "6", "1"])
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('Vittoria Set', () => {
|
|
||||||
it('non dovrebbe dare vittoria a 24-24', () => {
|
|
||||||
state.sp.punt.home = 24
|
|
||||||
state.sp.punt.guest = 24
|
|
||||||
expect(checkVittoria(state)).toBe(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe dare vittoria a 25-23', () => {
|
|
||||||
state.sp.punt.home = 25
|
|
||||||
state.sp.punt.guest = 23
|
|
||||||
expect(checkVittoria(state)).toBe(true)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('dovrebbe richiedere 2 punti di scarto (26-24)', () => {
|
|
||||||
state.sp.punt.home = 25
|
|
||||||
state.sp.punt.guest = 24
|
|
||||||
expect(checkVittoria(state)).toBe(false)
|
|
||||||
|
|
||||||
state.sp.punt.home = 26
|
|
||||||
expect(checkVittoria(state)).toBe(true)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
describe('Reset', () => {
|
|
||||||
it('dovrebbe resettare tutto a zero', () => {
|
|
||||||
state.sp.punt.home = 10
|
|
||||||
state.sp.set.home = 1
|
|
||||||
|
|
||||||
const newState = applyAction(state, { type: 'resetta' })
|
|
||||||
|
|
||||||
expect(newState.sp.punt.home).toBe(0)
|
|
||||||
expect(newState.sp.set.home).toBe(0) // Nota: il reset attuale resetta solo i punti o tutto?
|
|
||||||
// Controllo il codice: "s.sp.punt.home = 0... s.sp.storicoServizio = []"
|
|
||||||
// Attenzione: nel codice originale `resetta` NON sembra resettare i set!
|
|
||||||
// Verifichiamo il comportamento attuale del codice.
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { describe, it, expect } from 'vitest'
|
|
||||||
import { printServerInfo } from '../../src/server-utils.js'
|
|
||||||
|
|
||||||
// Mocking console.log per evitare output sporchi durante i test
|
|
||||||
import { vi } from 'vitest'
|
|
||||||
|
|
||||||
describe('Server Utils', () => {
|
|
||||||
it('printServerInfo dovrebbe stampare le porte corrette', () => {
|
|
||||||
const consoleSpy = vi.spyOn(console, 'log')
|
|
||||||
printServerInfo(3000, 3001)
|
|
||||||
|
|
||||||
expect(consoleSpy).toHaveBeenCalled()
|
|
||||||
|
|
||||||
// Unisce tutti i messaggi loggati in un'unica stringa per facilitare la ricerca
|
|
||||||
const allLogs = consoleSpy.mock.calls.map(args => args[0]).join('\n')
|
|
||||||
|
|
||||||
expect(allLogs).toContain('3000')
|
|
||||||
expect(allLogs).toContain('3001')
|
|
||||||
|
|
||||||
consoleSpy.mockRestore()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
import { WebSocketServer } from 'ws'
|
|
||||||
import { createServer as createHttpServer, request as httpRequest } from 'http'
|
|
||||||
import { setupWebSocketHandler } from './src/websocket-handler.js'
|
|
||||||
import { printServerInfo } from './src/server-utils.js'
|
|
||||||
|
|
||||||
const CONTROLLER_PORT = 3001
|
|
||||||
const DEV_PROXY_HOST = process.env.DEV_PROXY_HOST || '127.0.0.1'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Plugin Vite che integra un server WebSocket per la gestione dello stato di gioco
|
|
||||||
* e un server separato sulla porta 3001 per il controller.
|
|
||||||
* @returns {import('vite').Plugin}
|
|
||||||
*/
|
|
||||||
export default function websocketPlugin() {
|
|
||||||
return {
|
|
||||||
name: 'vite-plugin-websocket',
|
|
||||||
configureServer(server) {
|
|
||||||
// Inizializza un server WebSocket collegato al server HTTP di Vite.
|
|
||||||
const wss = new WebSocketServer({ noServer: true })
|
|
||||||
|
|
||||||
// Registra i gestori WebSocket con la logica di gioco.
|
|
||||||
setupWebSocketHandler(wss)
|
|
||||||
|
|
||||||
// Intercetta le richieste di upgrade WebSocket solo sul path /ws.
|
|
||||||
server.httpServer.on('upgrade', (request, socket, head) => {
|
|
||||||
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
|
|
||||||
|
|
||||||
if (pathname === '/ws') {
|
|
||||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
|
||||||
wss.emit('connection', ws, request)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Avvia un server separato per il controller sulla porta 3001.
|
|
||||||
server.httpServer.once('listening', () => {
|
|
||||||
const viteAddr = server.httpServer.address()
|
|
||||||
const vitePort = viteAddr.port
|
|
||||||
|
|
||||||
startControllerDevServer(vitePort, wss)
|
|
||||||
|
|
||||||
setTimeout(() => printServerInfo(vitePort, CONTROLLER_PORT), 100)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Avvia il server di sviluppo per il controller.
|
|
||||||
* Fa da proxy verso il dev server di Vite per moduli ES, HMR, e asset.
|
|
||||||
*/
|
|
||||||
function startControllerDevServer(vitePort, wss) {
|
|
||||||
const controllerServer = createHttpServer((req, res) => {
|
|
||||||
// Se richiesta alla root, riscrive verso controller.html
|
|
||||||
let targetPath = req.url
|
|
||||||
if (targetPath === '/' || targetPath === '') {
|
|
||||||
targetPath = '/controller.html'
|
|
||||||
}
|
|
||||||
|
|
||||||
// Proxy verso il dev server di Vite
|
|
||||||
const proxyReq = httpRequest(
|
|
||||||
{
|
|
||||||
hostname: DEV_PROXY_HOST,
|
|
||||||
port: vitePort,
|
|
||||||
path: targetPath,
|
|
||||||
method: req.method,
|
|
||||||
headers: {
|
|
||||||
...req.headers,
|
|
||||||
host: `${DEV_PROXY_HOST}:${vitePort}`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
(proxyRes) => {
|
|
||||||
res.writeHead(proxyRes.statusCode, proxyRes.headers)
|
|
||||||
proxyRes.pipe(res, { end: true })
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
proxyReq.on('error', (err) => {
|
|
||||||
console.error('[Controller Proxy] Error:', err.message)
|
|
||||||
if (!res.headersSent) {
|
|
||||||
res.writeHead(502)
|
|
||||||
res.end('Proxy error')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
req.pipe(proxyReq, { end: true })
|
|
||||||
})
|
|
||||||
|
|
||||||
// Gestisce l'upgrade WebSocket anche sulla porta del controller
|
|
||||||
controllerServer.on('upgrade', (request, socket, head) => {
|
|
||||||
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
|
|
||||||
|
|
||||||
if (pathname === '/ws') {
|
|
||||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
|
||||||
wss.emit('connection', ws, request)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// Per l'HMR di Vite, proxare l'upgrade WebSocket verso Vite
|
|
||||||
const proxyReq = httpRequest({
|
|
||||||
hostname: DEV_PROXY_HOST,
|
|
||||||
port: vitePort,
|
|
||||||
path: request.url,
|
|
||||||
method: 'GET',
|
|
||||||
headers: request.headers,
|
|
||||||
})
|
|
||||||
|
|
||||||
proxyReq.on('upgrade', (proxyRes, proxySocket, proxyHead) => {
|
|
||||||
socket.write(
|
|
||||||
`HTTP/1.1 101 Switching Protocols\r\n` +
|
|
||||||
Object.entries(proxyRes.headers)
|
|
||||||
.map(([k, v]) => `${k}: ${v}`)
|
|
||||||
.join('\r\n') +
|
|
||||||
'\r\n\r\n'
|
|
||||||
)
|
|
||||||
proxySocket.pipe(socket)
|
|
||||||
socket.pipe(proxySocket)
|
|
||||||
})
|
|
||||||
|
|
||||||
proxyReq.on('error', (err) => {
|
|
||||||
console.error('[Controller Proxy] WS upgrade error:', err.message)
|
|
||||||
socket.destroy()
|
|
||||||
})
|
|
||||||
|
|
||||||
proxyReq.end()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
controllerServer.listen(CONTROLLER_PORT, '0.0.0.0', () => {
|
|
||||||
console.log(`[Controller] Dev server running on port ${CONTROLLER_PORT}`)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -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,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
import { defineConfig } from 'vitest/config'
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
test: {
|
|
||||||
include: ['tests/unit/**/*.{test,spec}.js', 'tests/integration/**/*.{test,spec}.js'],
|
|
||||||
globals: true, // permette di usare describe/it/expect senza import
|
|
||||||
environment: 'node', // per backend tests. Se testi componenti Vue, usa 'jsdom'
|
|
||||||
},
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user