Compare commits
25 Commits
apk
...
9598d587c6
| Author | SHA1 | Date | |
|---|---|---|---|
| 9598d587c6 | |||
| f44138efd3 | |||
| 082a52dc3e | |||
| f7c4fdc2ef | |||
| a40fad7194 | |||
| 3789f25d0d | |||
| d3698a506d | |||
| 1972fd37a4 | |||
| ea4d8ec523 | |||
| f190db2161 | |||
| 9df74a760f | |||
| 44617f2f86 | |||
| 33a1534319 | |||
| 2e66a6cf2a | |||
| c923bdbf64 | |||
| 139dcc9c5b | |||
| 24dda41b0d | |||
| 4cbb5fb48d | |||
| eae5cbf964 | |||
| 2c6416bfe0 | |||
| 9a808e566d | |||
| 6c6ac7fc29 | |||
| bbe0862241 | |||
| 26d647dce7 | |||
| a72bc1844e |
257
README.md
257
README.md
@@ -1,8 +1,255 @@
|
||||
# Vue 3 + Vite
|
||||
# nvm use v20.2.0
|
||||
# Segnapunti Anto
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
Applicazione web **Progressive Web App (PWA)** per tracciare i punteggi di partite di pallavolo in tempo reale.
|
||||
|
||||
## Recommended IDE Setup
|
||||
---
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
## Panoramica
|
||||
|
||||
**Segnapunti Anto** è 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.
|
||||
|
||||
### Funzionalità Principali
|
||||
|
||||
- **Gestione Completa Partite**
|
||||
- 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**
|
||||
- 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**
|
||||
- Scorciatoie da tastiera complete (vedi sezione [Shortcuts](#shortcuts))
|
||||
- Sintesi vocale per annunci punteggio in italiano (Web Speech API)
|
||||
|
||||
- **Personalizzazione**
|
||||
- Configurazione dinamica nomi squadre
|
||||
- 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
|
||||
|
||||
---
|
||||
|
||||
## Requisiti
|
||||
|
||||
### Requisiti di Sistema
|
||||
|
||||
#### Per Sviluppo
|
||||
- **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
|
||||
- **Server Web**: Qualsiasi server statico (nginx, Apache, Vercel, Netlify)
|
||||
- **HTTPS**: Obbligatorio per Service Worker e PWA (eccetto localhost)
|
||||
- **Connessione Internet**: Solo per primo caricamento (poi funziona offline)
|
||||
|
||||
### Requisiti Browser (Utente Finale)
|
||||
|
||||
| Requisito | Dettaglio | Necessità |
|
||||
|-----------|-----------|-----------|
|
||||
| **JavaScript ES6+** | Supporto moduli, arrow functions, async/await | Obbligatorio |
|
||||
| **Service Worker API** | Per funzionalità offline PWA | Obbligatorio |
|
||||
| **Fullscreen API** | Per modalità schermo intero | Consigliato |
|
||||
| **Web Speech API** | Per sintesi vocale punteggi | Opzionale |
|
||||
| **Local Storage** | Per persistenza configurazioni | Consigliato |
|
||||
|
||||
### Browser Testati e Supportati
|
||||
|
||||
| Browser | Versione Minima | Supporto | Note |
|
||||
|---------|-----------------|----------|------|
|
||||
| Chrome/Chromium | 90+ | ✅ Completo | Consigliato per tutte le features |
|
||||
| Firefox | 88+ | ✅ Completo | Supporto completo PWA e Speech API |
|
||||
|
||||
---
|
||||
|
||||
## Installazione e Setup
|
||||
|
||||
### Prerequisiti
|
||||
|
||||
- **Node.js** v20.2.0 (consigliato)
|
||||
- **npm** o **yarn**
|
||||
|
||||
### Installazione con NVM (consigliato)
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Comandi per Sviluppo
|
||||
|
||||
### Dev Server
|
||||
|
||||
Avvia il server di sviluppo con hot-reload:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
L'applicazione sarà disponibile su [http://localhost:5173](http://localhost:5173)
|
||||
|
||||
### Modalità Sviluppo
|
||||
- Hot Module Replacement (HMR) attivo
|
||||
- Source maps per debugging
|
||||
- Vue DevTools supportato
|
||||
- Errori e warnings in console
|
||||
|
||||
---
|
||||
|
||||
## Comandi per Build
|
||||
|
||||
### Build Produzione
|
||||
|
||||
Genera i file ottimizzati per il deployment:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
**Output:**
|
||||
- Cartella `/dist` con file statici ottimizzati
|
||||
- Service Worker generato automaticamente
|
||||
- PWA manifest configurato
|
||||
- Assets minificati e con hash per cache busting
|
||||
- Base path: `/segnap` (modificabile in `vite.config.js`)
|
||||
|
||||
### Preview Build
|
||||
|
||||
Anteprima locale della build di produzione:
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
Serve i file dalla cartella `/dist` per testare la build prima del deploy.
|
||||
|
||||
---
|
||||
|
||||
## Shortcuts
|
||||
|
||||
### Controlli Tastiera Squadra Home
|
||||
|
||||
| Scorciatoia | Azione |
|
||||
|-------------|--------|
|
||||
| `Ctrl + ↑` | Incrementa punti |
|
||||
| `Ctrl + ↓` | Decrementa punti |
|
||||
| `Ctrl + →` | Incrementa set |
|
||||
| `Ctrl + C` | Apri dialog cambi |
|
||||
|
||||
### Controlli Tastiera Squadra Guest
|
||||
|
||||
| Scorciatoia | Azione |
|
||||
|-------------|--------|
|
||||
| `Shift + ↑` | Incrementa punti |
|
||||
| `Shift + ↓` | Decrementa punti |
|
||||
| `Shift + →` | Incrementa set |
|
||||
| `Shift + C` | Apri dialog cambi |
|
||||
|
||||
### Comandi Globali
|
||||
|
||||
| Scorciatoia | Azione |
|
||||
|-------------|--------|
|
||||
| `Ctrl + ←` | Cambio palla (servizio) - **solo a 0-0** |
|
||||
| `Ctrl + M` | Apri configurazione nomi squadre e formazioni |
|
||||
| `Ctrl + B` | Toggle visibilità barra pulsanti |
|
||||
| `Ctrl + F` | Attiva/disattiva fullscreen |
|
||||
| `Ctrl + S` | Annuncio vocale punteggio corrente |
|
||||
| `Ctrl + Z` | Switch tra visualizzazione formazioni e punteggio |
|
||||
|
||||
---
|
||||
|
||||
## Configurazione PWA
|
||||
|
||||
L'applicazione è configurata come **Progressive Web App** nel file [vite.config.js](vite.config.js):
|
||||
|
||||
```javascript
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
manifest: {
|
||||
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
|
||||
|
||||
- **Display**: Fullscreen per massimizzare lo spazio visivo
|
||||
- **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
|
||||
|
||||
**Android/Desktop (Chrome):**
|
||||
- Menu → "Installa app" o icona (⊕) nella barra degli indirizzi
|
||||
|
||||
**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→2→3→4→5→6→1
|
||||
|
||||
1338
package-lock.json
generated
1338
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@@ -4,17 +4,24 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "concurrently -n vite,server -c cyan,yellow \"npm run dev:vite\" \"npm run dev:server\"",
|
||||
"dev:vite": "vite --clearScreen false",
|
||||
"dev:server": "PORT=5173 node server.js",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"start": "node server.js",
|
||||
"serve": "vite build && node server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"nosleep.js": "^0.12.0",
|
||||
"express": "^5.2.1",
|
||||
"vue": "^3.2.47",
|
||||
"wave-ui": "^3.3.0"
|
||||
"vue-router": "^4.6.4",
|
||||
"wave-ui": "^3.3.0",
|
||||
"ws": "^8.19.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"concurrently": "^9.2.1",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-pwa": "^0.16.0"
|
||||
}
|
||||
|
||||
34
server.js
Normal file
34
server.js
Normal file
@@ -0,0 +1,34 @@
|
||||
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 app = express()
|
||||
const PORT = process.env.PORT || 3000
|
||||
|
||||
// Espone i file generati dalla build di Vite.
|
||||
app.use(express.static(join(__dirname, 'dist')))
|
||||
|
||||
// Fallback per SPA: restituisce `index.html` per tutte le route che non puntano a file statici.
|
||||
app.get('/{*splat}', (_req, res) => {
|
||||
res.sendFile(join(__dirname, 'dist', 'index.html'))
|
||||
})
|
||||
|
||||
const server = createServer(app)
|
||||
|
||||
// Inizializza il server WebSocket con la logica di gioco.
|
||||
const wss = new WebSocketServer({ server })
|
||||
setupWebSocketHandler(wss)
|
||||
|
||||
// Avvia il server HTTP.
|
||||
server.listen(PORT, '0.0.0.0', () => {
|
||||
printServerInfo(PORT)
|
||||
})
|
||||
@@ -1,7 +1,3 @@
|
||||
<script setup>
|
||||
import HomePage from './components/HomePage/index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HomePage />
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
849
src/components/ControllerPage.vue
Normal file
849
src/components/ControllerPage.vue
Normal file
@@ -0,0 +1,849 @@
|
||||
<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 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: "" },
|
||||
],
|
||||
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:'
|
||||
const wsUrl = `${protocol}//${location.host}`
|
||||
|
||||
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.showCambi = true
|
||||
},
|
||||
|
||||
closeCambi() {
|
||||
this.showCambi = false
|
||||
this.cambiData = [{ in: "", out: "" }, { in: "", out: "" }]
|
||||
},
|
||||
|
||||
confermaCambi() {
|
||||
if (!this.cambiValid) return
|
||||
const cambi = this.cambiData
|
||||
.filter(c => (c.in || "").trim() && (c.out || "").trim())
|
||||
.map(c => ({ in: c.in.trim(), out: c.out.trim() }))
|
||||
this.sendAction({ type: 'confermaCambi', team: this.cambiTeam, cambi })
|
||||
this.closeCambi()
|
||||
},
|
||||
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance()
|
||||
if (this.state.sp.punt.home + this.state.sp.punt.guest === 0) {
|
||||
msg.text = "zero a zero"
|
||||
} else if (this.state.sp.punt.home === this.state.sp.punt.guest) {
|
||||
msg.text = this.state.sp.punt.home + " pari"
|
||||
} else {
|
||||
if (this.state.sp.servHome) {
|
||||
msg.text = this.state.sp.punt.home + " a " + this.state.sp.punt.guest
|
||||
} else {
|
||||
msg.text = this.state.sp.punt.guest + " a " + this.state.sp.punt.home
|
||||
}
|
||||
}
|
||||
const voices = window.speechSynthesis.getVoices()
|
||||
msg.voice = voices.find(v => v.name === 'Google italiano')
|
||||
window.speechSynthesis.speak(msg)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
384
src/components/DisplayPage.vue
Normal file
384
src/components/DisplayPage.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<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:'
|
||||
const wsUrl = `${protocol}//${location.host}`
|
||||
|
||||
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 === '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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
@@ -1,220 +0,0 @@
|
||||
<script>
|
||||
import NoSleep from "nosleep.js";
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
voices: null,
|
||||
diaNomi: {
|
||||
show: false,
|
||||
home: "",
|
||||
guest: "",
|
||||
},
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
sp: {
|
||||
servHome: true,
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
nomi: { home: "Antoniana", guest: "Guest" },
|
||||
form: {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.voices = window.speechSynthesis.getVoices();
|
||||
if (this.isMobile()) {
|
||||
this.speak();
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
var win = window.open("", "_self");
|
||||
win.close();
|
||||
},
|
||||
fullScreen() {
|
||||
document.documentElement.requestFullscreen();
|
||||
},
|
||||
isMobile() {
|
||||
if (
|
||||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
resetta() {
|
||||
this.$waveui.notify("Punteggio<br />RESETTATO", "success");
|
||||
this.visuForm = false;
|
||||
this.sp.punt.home = 0;
|
||||
this.sp.punt.guest = 0;
|
||||
this.sp.form = {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
}
|
||||
},
|
||||
incSet(team) {
|
||||
if (this.sp.set[team] == 2) {
|
||||
this.sp.set[team] = 0;
|
||||
} else {
|
||||
this.sp.set[team]++;
|
||||
}
|
||||
},
|
||||
incPunt(team) {
|
||||
this.sp.punt[team]++;
|
||||
this.sp.servHome = (team == "home");
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
decPunt(team) {
|
||||
// decrementa il punteggio se è > 0.
|
||||
if (this.sp.punt[team] > 0) {
|
||||
this.sp.punt[team]--;
|
||||
this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
}
|
||||
},
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
if (this.sp.punt.home + this.sp.punt.guest == 0) {
|
||||
msg.text = "zero a zero";
|
||||
} else if (this.sp.punt.home == this.sp.punt.guest) {
|
||||
msg.text = this.sp.punt.home + " pari";
|
||||
} else {
|
||||
if (this.sp.servHome) {
|
||||
msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
|
||||
} else {
|
||||
msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
|
||||
}
|
||||
}
|
||||
// msg.volume = 1.0; // speech volume (default: 1.0)
|
||||
// msg.pitch = 1.0; // speech pitch (default: 1.0)
|
||||
// msg.rate = 1.0; // speech rate (default: 1.0)
|
||||
msg.lang = 'it_IT'; // speech language (default: 'en-US')
|
||||
const voices = window.speechSynthesis.getVoices();
|
||||
msg.voice = voices.find(voice => voice.name === 'Google italiano'); // voice URI (default: platform-dependent)
|
||||
// msg.onboundary = function (event) {
|
||||
// console.log('Speech reached a boundary:', event.name);
|
||||
// };
|
||||
// msg.onpause = function (event) {
|
||||
// console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
|
||||
// };
|
||||
window.speechSynthesis.speak(msg);
|
||||
},
|
||||
apriDialogConfig() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaNomi.show = true;
|
||||
},
|
||||
disabilitaTastiSpeciali() {
|
||||
window.removeEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
abilitaTastiSpeciali() {
|
||||
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
funzioneTastiSpeciali(e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey && e.key == "m") {
|
||||
this.diaNomi.show = true
|
||||
} else if (e.ctrlKey && e.key == "b") {
|
||||
this.visuButt = !this.visuButt
|
||||
} else if (e.ctrlKey && e.key == "f") {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if (e.ctrlKey && e.key == "s") {
|
||||
this.speak();
|
||||
} else if (e.ctrlKey && e.key == "z") {
|
||||
this.visuForm = !this.visuForm
|
||||
} else if (e.ctrlKey && e.key == "ArrowUp") {
|
||||
this.incPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowDown") {
|
||||
this.decPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowRight") {
|
||||
this.incSet("home")
|
||||
} else if (e.shiftKey && e.key == "ArrowUp") {
|
||||
this.incPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowDown") {
|
||||
this.decPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowRight") {
|
||||
this.incSet("guest")
|
||||
} else if (e.ctrlKey && e.key == "ArrowLeft") {
|
||||
this.sp.servHome = !this.sp.servHome
|
||||
} else { return false }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<w-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
|
||||
<w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
|
||||
<w-input v-model="sp.nomi.guest" type="text" class="pa3">Guest</w-input>
|
||||
<w-button bg-color="success" @click="diaNomi.show = false">
|
||||
Ok
|
||||
</w-button>
|
||||
</w-dialog>
|
||||
<div class="campo">
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
|
||||
<span v-if="visuForm">{{ sp.punt.home }}</span>
|
||||
</span>
|
||||
<span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
<div class="hea guest">
|
||||
<span @click="decPunt('guest')" :style="{ 'float': 'right' }">
|
||||
<img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
|
||||
<span v-if="visuForm">{{ sp.punt.guest }}</span>
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
|
||||
|
||||
</div>
|
||||
<span v-if="visuForm">
|
||||
<div class="col form home" @click="incPunt('home')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form guest" @click="incPunt('guest')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
|
||||
<div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
</span>
|
||||
|
||||
<div class="bot" v-if="visuButt">
|
||||
<w-flex justify-space-between class="pa2">
|
||||
<w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
|
||||
<img src="/exit.png" width="25" />
|
||||
</w-confirm>
|
||||
<w-button @click="apriDialogConfig()">
|
||||
<img src="/gear.png" width="25" />
|
||||
</w-button>
|
||||
<w-button @click="sp.servHome = !sp.servHome">
|
||||
<img src="/serv.png" width="25" />
|
||||
</w-button>
|
||||
<w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
|
||||
RESET
|
||||
</w-confirm>
|
||||
<w-button @click="visuForm = !visuForm">
|
||||
<span v-if="visuForm">PUNTEGGIO</span>
|
||||
<span v-if="!visuForm">FORMAZIONI</span>
|
||||
</w-button>
|
||||
<w-button @click="speak">
|
||||
<img src="/speaker.png" width="25" />
|
||||
</w-button>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,129 +0,0 @@
|
||||
<section class="homepage">
|
||||
<w-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
|
||||
<w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
|
||||
<w-input v-model="sp.nomi.guest" type="text" class="pa3">Guest</w-input>
|
||||
<w-button @click="order = !order">Inverti ordine</w-button>
|
||||
<w-button bg-color="success" @click="diaNomi.show = false">
|
||||
Ok
|
||||
</w-button>
|
||||
</w-dialog>
|
||||
<div class="campo">
|
||||
|
||||
<span v-if="order">
|
||||
<!-- home guest -->
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
|
||||
<span v-if="visuForm">{{ sp.punt.home }}</span>
|
||||
</span>
|
||||
<span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
|
||||
<div class="hea guest">
|
||||
<span @click="decPunt('guest')" :style="{ 'float': 'right' }">
|
||||
<img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
|
||||
<span v-if="visuForm">{{ sp.punt.guest }}</span>
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
|
||||
</div>
|
||||
|
||||
<span v-if="visuForm">
|
||||
<div class="col form home" @click="incPunt('home')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form guest" @click="incPunt('guest')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
|
||||
<div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
<span v-else>
|
||||
<!-- guest home -->
|
||||
|
||||
<div class="hea guest">
|
||||
<span @click="decPunt('guest')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.guest }} <img v-if="!sp.servHome" src="/serv.png" width="25" />
|
||||
<span v-if="visuForm">{{ sp.punt.guest }}</span>
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span>
|
||||
</div>
|
||||
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'right' }">
|
||||
<img v-if="sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.home }}
|
||||
<span v-if="visuForm">{{ sp.punt.home }}</span>
|
||||
</span>
|
||||
<span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
|
||||
<span v-if="visuForm">
|
||||
<div class="col form guest" @click="incPunt('guest')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form home" @click="incPunt('home')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
<div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
<div class="striscia" v-if="visuStriscia">
|
||||
<div>
|
||||
<span class="text-bold mr1">{{ sp.nomi.home }}</span>
|
||||
<div v-for="h in sp.striscia.home" class="item">
|
||||
{{String(h)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest">
|
||||
<span class="text-bold mr1">{{ sp.nomi.guest }}</span>
|
||||
<div v-for="h in sp.striscia.guest" class="item">
|
||||
{{String(h)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bot" v-if="visuButt">
|
||||
<w-flex justify-space-between class="pa2">
|
||||
<w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
|
||||
<img src="/exit.png" width="25" />
|
||||
</w-confirm>
|
||||
<w-button @click="apriDialogConfig()">
|
||||
<img src="/gear.png" width="25" />
|
||||
</w-button>
|
||||
<w-button @click="sp.servHome = !sp.servHome">
|
||||
<img src="/serv.png" width="25" />
|
||||
</w-button>
|
||||
<w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
|
||||
RESET
|
||||
</w-confirm>
|
||||
<w-button @click="visuForm = !visuForm">
|
||||
<span v-if="visuForm">PUNTEGGIO</span>
|
||||
<span v-if="!visuForm">FORMAZIONI</span>
|
||||
</w-button>
|
||||
<w-button @click="visuStriscia = !visuStriscia">
|
||||
STRISCIA
|
||||
</w-button>
|
||||
<w-button @click="speak">
|
||||
<img src="/speaker.png" width="25" />
|
||||
</w-button>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,178 +0,0 @@
|
||||
import NoSleep from "nosleep.js";
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
order: true,
|
||||
voices: null,
|
||||
diaNomi: {
|
||||
show: false,
|
||||
home: "",
|
||||
guest: "",
|
||||
},
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
visuStriscia: true,
|
||||
sp: {
|
||||
striscia: { home: [0], guest: [0] },
|
||||
servHome: true,
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
nomi: { home: "Antoniana", guest: "Guest" },
|
||||
form: {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.voices = window.speechSynthesis.getVoices();
|
||||
if (this.isMobile()) {
|
||||
this.speak();
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
var win = window.open("", "_self");
|
||||
win.close();
|
||||
},
|
||||
fullScreen() {
|
||||
document.documentElement.requestFullscreen();
|
||||
},
|
||||
isMobile() {
|
||||
if (
|
||||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
resetta() {
|
||||
this.$waveui.notify("Punteggio<br />RESETTATO", "success");
|
||||
this.visuForm = false;
|
||||
this.sp.punt.home = 0;
|
||||
this.sp.punt.guest = 0;
|
||||
this.sp.form = {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
}
|
||||
this.sp.striscia = { home: [0], guest: [0] }
|
||||
},
|
||||
incSet(team) {
|
||||
if (this.sp.set[team] == 2) {
|
||||
this.sp.set[team] = 0;
|
||||
} else {
|
||||
this.sp.set[team]++;
|
||||
}
|
||||
},
|
||||
incPunt(team) {
|
||||
this.sp.punt[team]++;
|
||||
if (team == 'home') {
|
||||
this.sp.striscia.home.push(this.sp.punt.home)
|
||||
this.sp.striscia.guest.push(' ')
|
||||
} else {
|
||||
this.sp.striscia.guest.push(this.sp.punt.guest)
|
||||
this.sp.striscia.home.push(' ')
|
||||
}
|
||||
this.sp.servHome = (team == "home");
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
decPunt() {
|
||||
if (this.sp.striscia.home.length > 1) {
|
||||
var tmpHome = this.sp.striscia.home.pop()
|
||||
var tmpGuest = this.sp.striscia.guest.pop()
|
||||
if (tmpHome == ' ') {
|
||||
this.sp.punt.guest--
|
||||
this.sp.form.guest.unshift(this.sp.form.guest.pop());
|
||||
} else {
|
||||
this.sp.punt.home--
|
||||
this.sp.form.home.unshift(this.sp.form.home.pop());
|
||||
}
|
||||
}
|
||||
},
|
||||
// decPunt(team) {
|
||||
// // decrementa il punteggio se è > 0.
|
||||
// if (this.sp.punt[team] > 0) {
|
||||
// this.sp.punt[team]--;
|
||||
// this.sp.striscia.home.pop()
|
||||
// this.sp.striscia.guest.pop()
|
||||
// this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
// }
|
||||
// },
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
if (this.sp.punt.home + this.sp.punt.guest == 0) {
|
||||
msg.text = "zero a zero";
|
||||
} else if (this.sp.punt.home == this.sp.punt.guest) {
|
||||
msg.text = this.sp.punt.home + " pari";
|
||||
} else {
|
||||
if (this.sp.servHome) {
|
||||
msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
|
||||
} else {
|
||||
msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
|
||||
}
|
||||
}
|
||||
// msg.volume = 1.0; // speech volume (default: 1.0)
|
||||
// msg.pitch = 1.0; // speech pitch (default: 1.0)
|
||||
// msg.rate = 1.0; // speech rate (default: 1.0)
|
||||
// msg.lang = 'it_IT'; // speech language (default: 'en-US')
|
||||
const voices = window.speechSynthesis.getVoices();
|
||||
msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
||||
// voice URI (default: platform-dependent)
|
||||
// msg.onboundary = function (event) {
|
||||
// console.log('Speech reached a boundary:', event.name);
|
||||
// };
|
||||
// msg.onpause = function (event) {
|
||||
// console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
|
||||
// };
|
||||
window.speechSynthesis.speak(msg);
|
||||
},
|
||||
apriDialogConfig() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaNomi.show = true;
|
||||
},
|
||||
disabilitaTastiSpeciali() {
|
||||
window.removeEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
abilitaTastiSpeciali() {
|
||||
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
funzioneTastiSpeciali(e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey && e.key == "m") {
|
||||
this.diaNomi.show = true
|
||||
} else if (e.ctrlKey && e.key == "b") {
|
||||
this.visuButt = !this.visuButt
|
||||
} else if (e.ctrlKey && e.key == "f") {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if (e.ctrlKey && e.key == "s") {
|
||||
this.speak();
|
||||
} else if (e.ctrlKey && e.key == "z") {
|
||||
this.visuForm = !this.visuForm
|
||||
} else if (e.ctrlKey && e.key == "ArrowUp") {
|
||||
this.incPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowDown") {
|
||||
this.decPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowRight") {
|
||||
this.incSet("home")
|
||||
} else if (e.shiftKey && e.key == "ArrowUp") {
|
||||
this.incPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowDown") {
|
||||
this.decPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowRight") {
|
||||
this.incSet("guest")
|
||||
} else if (e.ctrlKey && e.key == "ArrowLeft") {
|
||||
this.sp.servHome = !this.sp.servHome
|
||||
} else { return false }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
.homepage {
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
touch-action: pan-x pan-y;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: contain;
|
||||
margin: 0;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fff;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
background-color: #333;
|
||||
}
|
||||
button:focus, button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.campo {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
display: table;
|
||||
color: #fff;
|
||||
}
|
||||
.hea {
|
||||
float: left;
|
||||
width: 50%;
|
||||
font-size: xx-large;
|
||||
}
|
||||
.hea span {
|
||||
/* border: 1px solid #f3fb00; */
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tal {
|
||||
text-align: left;
|
||||
}
|
||||
.tar {
|
||||
text-align: right;
|
||||
}
|
||||
.bot {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 1px;
|
||||
background-color: #111;
|
||||
}
|
||||
.col {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.punt {
|
||||
font-size: 60vh;
|
||||
}
|
||||
.form {
|
||||
font-size: 5vh;
|
||||
border-top: #fff dashed 25px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.formtit {
|
||||
font-size: 5vh;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.formdiv {
|
||||
font-size: 20vh;
|
||||
float: left;
|
||||
width: 32%;
|
||||
}
|
||||
.home {
|
||||
background-color: black;
|
||||
color: yellow;
|
||||
}
|
||||
.guest {
|
||||
background-color: blue;
|
||||
color: white
|
||||
}
|
||||
.item-stri {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<template src="./HomePage.html"></template>
|
||||
<script src="./HomePage.js"></script>
|
||||
|
||||
204
src/gameState.js
Normal file
204
src/gameState.js
Normal file
@@ -0,0 +1,204 @@
|
||||
/**
|
||||
* 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.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
|
||||
}
|
||||
13
src/main.js
13
src/main.js
@@ -1,10 +1,21 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import WaveUI from 'wave-ui'
|
||||
import 'wave-ui/dist/wave-ui.css'
|
||||
import DisplayPage from './components/DisplayPage.vue'
|
||||
import ControllerPage from './components/ControllerPage.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: '/', component: DisplayPage },
|
||||
{ path: '/controller', component: ControllerPage },
|
||||
],
|
||||
})
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(router)
|
||||
app.use(WaveUI)
|
||||
app.mount('#app')
|
||||
|
||||
45
src/server-utils.js
Normal file
45
src/server-utils.js
Normal file
@@ -0,0 +1,45 @@
|
||||
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} port - Porta sulla quale il server e in ascolto.
|
||||
*/
|
||||
export function printServerInfo(port = 5173) {
|
||||
const networkIPs = getNetworkIPs()
|
||||
|
||||
console.log(`\nSegnapunti Server`)
|
||||
console.log(` Display: http://localhost:${port}/`)
|
||||
console.log(` Controller: http://localhost:${port}/controller`)
|
||||
|
||||
if (networkIPs.length > 0) {
|
||||
console.log(`\n Da dispositivi remoti:`)
|
||||
networkIPs.forEach(ip => {
|
||||
console.log(` http://${ip}:${port}/controller`)
|
||||
})
|
||||
}
|
||||
|
||||
console.log()
|
||||
}
|
||||
142
src/style.css
142
src/style.css
@@ -53,11 +53,24 @@ button:focus-visible {
|
||||
font-size: xx-large;
|
||||
}
|
||||
.hea span {
|
||||
/* border: 1px solid #f3fb00; */
|
||||
/* Bordo di debug: border: 1px solid #f3fb00; */
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.score-inline {
|
||||
display: inline-block;
|
||||
min-width: 3ch;
|
||||
text-align: center;
|
||||
}
|
||||
.serv-slot {
|
||||
display: inline-flex;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tal {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -80,8 +93,23 @@ button:focus-visible {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.punteggio-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.punt {
|
||||
font-size: 60vh;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
min-height: 50vh;
|
||||
min-width: 50vw;
|
||||
max-width: 50vw;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.form {
|
||||
font-size: 5vh;
|
||||
@@ -122,3 +150,115 @@ button:focus-visible {
|
||||
color: blue;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.campo-config {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.campo-pallavolo {
|
||||
border: 3px solid #999;
|
||||
background-color: rgba(205, 133, 63, 0.25);
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fila-anteriore {
|
||||
height: 33.33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.fila-posteriore {
|
||||
height: 66.67%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.linea-tre-metri {
|
||||
border-top: 2px solid #666;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cambi-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.cambi-dialog {
|
||||
padding: 8px 6px 2px;
|
||||
}
|
||||
|
||||
.cambi-title {
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.cambi-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cambi-arrow {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 6px 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cambi-input {
|
||||
min-width: 48px;
|
||||
max-width: 64px;
|
||||
}
|
||||
|
||||
.cambi-input input,
|
||||
.cambi-input .w-input__input,
|
||||
.cambi-input .w-input__field {
|
||||
border: 2px solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cambi-in input,
|
||||
.cambi-in .w-input__input,
|
||||
.cambi-in .w-input__field {
|
||||
background: rgba(120, 200, 120, 0.4);
|
||||
}
|
||||
|
||||
.cambi-out input,
|
||||
.cambi-out .w-input__input,
|
||||
.cambi-out .w-input__field {
|
||||
background: rgba(200, 120, 120, 0.4);
|
||||
}
|
||||
|
||||
.cambi-input input:focus,
|
||||
.cambi-input .w-input__input:focus,
|
||||
.cambi-input .w-input__field:focus {
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
171
src/websocket-handler.js
Normal file
171
src/websocket-handler.js
Normal file
@@ -0,0 +1,171 @@
|
||||
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)
|
||||
}
|
||||
} 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()
|
||||
}
|
||||
|
||||
/**
|
||||
* 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,
|
||||
}
|
||||
}
|
||||
39
vite-plugin-websocket.js
Normal file
39
vite-plugin-websocket.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { WebSocketServer } from 'ws'
|
||||
import { setupWebSocketHandler } from './src/websocket-handler.js'
|
||||
import { printServerInfo } from './src/server-utils.js'
|
||||
|
||||
/**
|
||||
* Plugin Vite che integra un server WebSocket per la gestione dello stato di gioco.
|
||||
* @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.
|
||||
// Importante: usa `noServer: true` per evitare conflitti con l'HMR 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.
|
||||
server.httpServer.on('upgrade', (request, socket, head) => {
|
||||
// Se la richiesta non riguarda l'HMR di Vite (es. /@vite/client),
|
||||
// la gestisce il server WebSocket dell'applicazione.
|
||||
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
|
||||
|
||||
if (!pathname.startsWith('/@vite') && !pathname.startsWith('/@fs')) {
|
||||
wss.handleUpgrade(request, socket, head, (ws) => {
|
||||
wss.emit('connection', ws, request)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Stampa le informazioni di accesso dopo l'avvio del server Vite.
|
||||
server.httpServer.once('listening', () => {
|
||||
setTimeout(() => printServerInfo(5173), 100)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,9 +2,9 @@ import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
// Configurazione principale di Vite
|
||||
export default defineConfig({
|
||||
base: process.env.NODE_ENV === 'production' ? '/segnap' : '/',
|
||||
base: '/',
|
||||
plugins: [
|
||||
vue(),
|
||||
VitePWA({
|
||||
@@ -32,4 +32,15 @@ export default defineConfig({
|
||||
}
|
||||
})
|
||||
],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/': {
|
||||
target: 'http://127.0.0.1:5174',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user