Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 04969a45ea | |||
| 3789f25d0d | |||
| d3698a506d | |||
| 1972fd37a4 | |||
| ea4d8ec523 | |||
| f190db2161 | |||
| 9df74a760f | |||
| 44617f2f86 | |||
| 33a1534319 | |||
| 2e66a6cf2a | |||
| c923bdbf64 | |||
| 139dcc9c5b | |||
| 24dda41b0d | |||
| 4cbb5fb48d | |||
| eae5cbf964 | |||
| 2c6416bfe0 | |||
| 9a808e566d | |||
| 6c6ac7fc29 | |||
| bbe0862241 | |||
| 26d647dce7 | |||
| a72bc1844e |
282
CHANGELOG.md
Normal file
282
CHANGELOG.md
Normal file
@@ -0,0 +1,282 @@
|
||||
# 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
|
||||
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→6→5→4→3→2→1
|
||||
|
||||
@@ -1,28 +1,126 @@
|
||||
<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">
|
||||
<w-dialog v-model="diaNomi.show" :width="600" @close="chiudiDialogConfig()">
|
||||
<w-input v-model="sp.nomi.home" type="text" class="pa3" tabindex="1">Nome Home</w-input>
|
||||
<w-input v-model="sp.nomi.guest" type="text" class="pa3" tabindex="2">Nome Guest</w-input>
|
||||
|
||||
<w-flex justify-center align-center class="pa3">
|
||||
<span class="mr3">Modalità partita:</span>
|
||||
<w-button
|
||||
@click="modalitaPartita = '2/3'"
|
||||
:bg-color="modalitaPartita === '2/3' ? 'success' : 'grey-light4'"
|
||||
:dark="modalitaPartita === '2/3'"
|
||||
class="ma1"
|
||||
tabindex="-1">
|
||||
2/3
|
||||
</w-button>
|
||||
<w-button
|
||||
@click="modalitaPartita = '3/5'"
|
||||
:bg-color="modalitaPartita === '3/5' ? 'success' : 'grey-light4'"
|
||||
:dark="modalitaPartita === '3/5'"
|
||||
class="ma1"
|
||||
tabindex="-1">
|
||||
3/5
|
||||
</w-button>
|
||||
</w-flex>
|
||||
|
||||
<w-flex justify-space-around class="pa3">
|
||||
<div class="campo-config">
|
||||
<div class="text-bold mb3 text-center">Formazione Home</div>
|
||||
<div class="campo-pallavolo">
|
||||
<!-- Fila anteriore - index [3, 2, 1] - VICINO ALLA RETE (prima fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-anteriore">
|
||||
<w-input v-model="sp.form.home[3]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="6"></w-input>
|
||||
<w-input v-model="sp.form.home[2]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="5"></w-input>
|
||||
<w-input v-model="sp.form.home[1]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="4"></w-input>
|
||||
</w-flex>
|
||||
<!-- Linea dei 3 metri -->
|
||||
<div class="linea-tre-metri"></div>
|
||||
<!-- Fila posteriore - index [4, 5, 0] - ZONA DIFESA (seconda fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-posteriore">
|
||||
<w-input v-model="sp.form.home[4]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="7"></w-input>
|
||||
<w-input v-model="sp.form.home[5]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="8"></w-input>
|
||||
<w-input v-model="sp.form.home[0]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="3"></w-input>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="campo-config">
|
||||
<div class="text-bold mb3 text-center">Formazione Guest</div>
|
||||
<div class="campo-pallavolo">
|
||||
<!-- Fila anteriore - index [3, 2, 1] - VICINO ALLA RETE (prima fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-anteriore">
|
||||
<w-input v-model="sp.form.guest[3]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="12"></w-input>
|
||||
<w-input v-model="sp.form.guest[2]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="11"></w-input>
|
||||
<w-input v-model="sp.form.guest[1]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="10"></w-input>
|
||||
</w-flex>
|
||||
<!-- Linea dei 3 metri -->
|
||||
<div class="linea-tre-metri"></div>
|
||||
<!-- Fila posteriore - index [4, 5, 0] - ZONA DIFESA (seconda fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-posteriore">
|
||||
<w-input v-model="sp.form.guest[4]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="13"></w-input>
|
||||
<w-input v-model="sp.form.guest[5]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="14"></w-input>
|
||||
<w-input v-model="sp.form.guest[0]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="9"></w-input>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
</w-flex>
|
||||
|
||||
<w-button @click="order = !order" class="ma2" tabindex="-1">Inverti ordine</w-button>
|
||||
<w-button bg-color="success" @click="diaNomi.show = false" class="ma2" tabindex="-1">
|
||||
Ok
|
||||
</w-button>
|
||||
</w-dialog>
|
||||
<w-dialog v-model="diaCambiTeam.show" :width="420" @close="abilitaTastiSpeciali()">
|
||||
<div class="text-bold text-center mb2">Scegli squadra</div>
|
||||
<w-flex justify-center class="pa3">
|
||||
<w-button class="ma2" @click="selezionaTeamCambi('home')">{{ sp.nomi.home }}</w-button>
|
||||
<w-button class="ma2" @click="selezionaTeamCambi('guest')">{{ sp.nomi.guest }}</w-button>
|
||||
</w-flex>
|
||||
</w-dialog>
|
||||
<w-dialog v-model="diaCambi.show" :width="360" @close="chiudiDialogCambi">
|
||||
<div class="cambi-dialog">
|
||||
<div class="cambi-title">{{ sp.nomi[diaCambi.team] }}: CAMBIO</div>
|
||||
<div class="cambi-rows">
|
||||
<div class="cambi-row">
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[0].in" type="text" class="cambi-input cambi-in"></w-input>
|
||||
<span class="cambi-arrow">→</span>
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[0].out" type="text" class="cambi-input cambi-out"></w-input>
|
||||
</div>
|
||||
<div class="cambi-row">
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[1].in" type="text" class="cambi-input cambi-in"></w-input>
|
||||
<span class="cambi-arrow">→</span>
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[1].out" type="text" class="cambi-input cambi-out"></w-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<w-flex justify-end class="pa3">
|
||||
<w-button bg-color="success" :disabled="!cambiConfermabili" @click="confermaCambi">
|
||||
CONFERMA
|
||||
</w-button>
|
||||
</w-flex>
|
||||
</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>
|
||||
{{ sp.nomi.home }}
|
||||
<span class="serv-slot">
|
||||
<img v-show="sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
<span v-if="visuForm" class="score-inline">{{ 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 v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
|
||||
<span class="serv-slot">
|
||||
<img v-show="!sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
{{ sp.nomi.guest }}
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
|
||||
</div>
|
||||
@@ -40,8 +138,10 @@
|
||||
</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>
|
||||
<w-flex class="punteggio-container">
|
||||
<w-flex justify-center align-center class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</w-flex>
|
||||
<w-flex justify-center align-center class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</w-flex>
|
||||
</w-flex>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
@@ -50,16 +150,22 @@
|
||||
|
||||
<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>
|
||||
{{ sp.nomi.guest }}
|
||||
<span class="serv-slot">
|
||||
<img v-show="!sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
<span v-if="visuForm" class="score-inline">{{ 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 v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
|
||||
<span class="serv-slot">
|
||||
<img v-show="sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
{{ sp.nomi.home }}
|
||||
</span>
|
||||
<span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
@@ -77,8 +183,10 @@
|
||||
</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>
|
||||
<w-flex class="punteggio-container">
|
||||
<w-flex justify-center align-center class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</w-flex>
|
||||
<w-flex justify-center align-center class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</w-flex>
|
||||
</w-flex>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
@@ -106,7 +214,7 @@
|
||||
<w-button @click="apriDialogConfig()">
|
||||
<img src="/gear.png" width="25" />
|
||||
</w-button>
|
||||
<w-button @click="sp.servHome = !sp.servHome">
|
||||
<w-button @click="cambiaPalla" :disabled="!isPunteggioZeroZero">
|
||||
<img src="/serv.png" width="25" />
|
||||
</w-button>
|
||||
<w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
|
||||
@@ -116,6 +224,9 @@
|
||||
<span v-if="visuForm">PUNTEGGIO</span>
|
||||
<span v-if="!visuForm">FORMAZIONI</span>
|
||||
</w-button>
|
||||
<w-button @click="apriDialogCambi">
|
||||
CAMBI
|
||||
</w-button>
|
||||
<w-button @click="visuStriscia = !visuStriscia">
|
||||
STRISCIA
|
||||
</w-button>
|
||||
@@ -126,4 +237,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@@ -11,9 +11,19 @@ export default {
|
||||
home: "",
|
||||
guest: "",
|
||||
},
|
||||
diaCambi: {
|
||||
show: false,
|
||||
team: "home",
|
||||
guest: { cambi: [{ in: "", out: "" }, { in: "", out: "" }] },
|
||||
home: { cambi: [{ in: "", out: "" }, { in: "", out: "" }] },
|
||||
},
|
||||
diaCambiTeam: {
|
||||
show: false,
|
||||
},
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
visuStriscia: true,
|
||||
modalitaPartita: "3/5", // "2/3" o "3/5"
|
||||
sp: {
|
||||
striscia: { home: [0], guest: [0] },
|
||||
servHome: true,
|
||||
@@ -24,6 +34,7 @@ export default {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
storicoServizio: [], // Stack per tracciare lo stato del servizio prima di ogni punto
|
||||
},
|
||||
}
|
||||
},
|
||||
@@ -37,6 +48,33 @@ export default {
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
computed: {
|
||||
isPunteggioZeroZero() {
|
||||
return this.sp.punt.home === 0 && this.sp.punt.guest === 0;
|
||||
},
|
||||
cambiConfermabili() {
|
||||
const team = this.diaCambi.team;
|
||||
const cambi = this.diaCambi[team].cambi || [];
|
||||
let hasComplete = false;
|
||||
let allValid = true;
|
||||
|
||||
cambi.forEach((cambio) => {
|
||||
const teamIn = (cambio.in || "").trim();
|
||||
const teamOut = (cambio.out || "").trim();
|
||||
|
||||
if (!teamIn && !teamOut) {
|
||||
return;
|
||||
}
|
||||
if (!teamIn || !teamOut) {
|
||||
allValid = false;
|
||||
return;
|
||||
}
|
||||
hasComplete = true;
|
||||
});
|
||||
|
||||
return allValid && hasComplete;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
var win = window.open("", "_self");
|
||||
@@ -66,6 +104,14 @@ export default {
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
}
|
||||
this.sp.striscia = { home: [0], guest: [0] }
|
||||
this.sp.storicoServizio = []
|
||||
},
|
||||
cambiaPalla() {
|
||||
if (!this.isPunteggioZeroZero) {
|
||||
this.$waveui.notify("Cambio palla consentito solo a inizio set (0-0)", "warning");
|
||||
return;
|
||||
}
|
||||
this.sp.servHome = !this.sp.servHome;
|
||||
},
|
||||
incSet(team) {
|
||||
if (this.sp.set[team] == 2) {
|
||||
@@ -75,6 +121,17 @@ export default {
|
||||
}
|
||||
},
|
||||
incPunt(team) {
|
||||
// Se il set è già terminato, evita ulteriori incrementi
|
||||
if (this.checkVittoria()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Salva lo stato del servizio PRIMA di modificarlo
|
||||
this.sp.storicoServizio.push({
|
||||
servHome: this.sp.servHome,
|
||||
cambioPalla: (team == "home" && !this.sp.servHome) || (team == "guest" && this.sp.servHome)
|
||||
});
|
||||
|
||||
this.sp.punt[team]++;
|
||||
if (team == 'home') {
|
||||
this.sp.striscia.home.push(this.sp.punt.home)
|
||||
@@ -82,21 +139,69 @@ export default {
|
||||
} else {
|
||||
this.sp.striscia.guest.push(this.sp.punt.guest)
|
||||
this.sp.striscia.home.push(' ')
|
||||
}
|
||||
}
|
||||
|
||||
// Ruota la formazione solo se c'è cambio palla (conquista del servizio)
|
||||
const cambioPalla = (team == "home" && !this.sp.servHome) || (team == "guest" && this.sp.servHome);
|
||||
|
||||
if (cambioPalla) {
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
}
|
||||
|
||||
this.sp.servHome = (team == "home");
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
checkVittoria() {
|
||||
const puntHome = this.sp.punt.home;
|
||||
const puntGuest = this.sp.punt.guest;
|
||||
const setHome = this.sp.set.home;
|
||||
const setGuest = this.sp.set.guest;
|
||||
const totSet = setHome + setGuest;
|
||||
|
||||
// Determina se siamo nel set decisivo in base alla modalità partita
|
||||
let isSetDecisivo = false;
|
||||
if (this.modalitaPartita === "2/3") {
|
||||
// Tie-break al 3° set (quando totSet >= 2)
|
||||
isSetDecisivo = totSet >= 2;
|
||||
} else {
|
||||
// Tie-break al 5° set (quando totSet >= 4)
|
||||
isSetDecisivo = totSet >= 4;
|
||||
}
|
||||
|
||||
const punteggioVittoria = isSetDecisivo ? 15 : 25;
|
||||
|
||||
// Vittoria con punteggio >= 25 (o 15 per set decisivo) e almeno 2 punti di vantaggio
|
||||
if (puntHome >= punteggioVittoria && puntHome - puntGuest >= 2) {
|
||||
return true; // Home ha vinto
|
||||
}
|
||||
if (puntGuest >= punteggioVittoria && puntGuest - puntHome >= 2) {
|
||||
return true; // Guest ha vinto
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
decPunt() {
|
||||
if (this.sp.striscia.home.length > 1) {
|
||||
if (this.sp.striscia.home.length > 1 && this.sp.storicoServizio.length > 0) {
|
||||
var tmpHome = this.sp.striscia.home.pop()
|
||||
var tmpGuest = this.sp.striscia.guest.pop()
|
||||
var statoServizio = this.sp.storicoServizio.pop() // Recupera lo stato completo del servizio
|
||||
|
||||
if (tmpHome == ' ') {
|
||||
this.sp.punt.guest--
|
||||
this.sp.form.guest.unshift(this.sp.form.guest.pop());
|
||||
// Ruota indietro solo se c'era stato un cambio palla
|
||||
if (statoServizio.cambioPalla) {
|
||||
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());
|
||||
// Ruota indietro solo se c'era stato un cambio palla
|
||||
if (statoServizio.cambioPalla) {
|
||||
this.sp.form.home.unshift(this.sp.form.home.pop());
|
||||
}
|
||||
}
|
||||
|
||||
// Ripristina il servizio allo stato precedente
|
||||
this.sp.servHome = statoServizio.servHome;
|
||||
|
||||
}
|
||||
},
|
||||
// decPunt(team) {
|
||||
@@ -139,6 +244,152 @@ export default {
|
||||
apriDialogConfig() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaNomi.show = true;
|
||||
|
||||
// Aggiungi gestore Tab per il dialog
|
||||
this.dialogConfigTabHandler = (e) => {
|
||||
if (e.key === 'Tab' && this.diaNomi.show) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const dialog = document.querySelector('.w-dialog');
|
||||
if (!dialog) return;
|
||||
|
||||
const allInputs = Array.from(dialog.querySelectorAll('input[type="text"]'))
|
||||
.sort((a, b) => {
|
||||
const tabA = parseInt(a.closest('[tabindex]')?.getAttribute('tabindex') || '0');
|
||||
const tabB = parseInt(b.closest('[tabindex]')?.getAttribute('tabindex') || '0');
|
||||
return tabA - tabB;
|
||||
});
|
||||
|
||||
if (allInputs.length === 0) return;
|
||||
|
||||
// Verifica se il focus è già dentro il dialog
|
||||
const focusInDialog = dialog.contains(document.activeElement);
|
||||
|
||||
// Se non è nel dialog o non è in un input, vai al primo
|
||||
if (!focusInDialog || !allInputs.includes(document.activeElement)) {
|
||||
allInputs[0].focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigazione normale tra i campi
|
||||
const currentIndex = allInputs.indexOf(document.activeElement);
|
||||
let nextIndex;
|
||||
|
||||
if (e.shiftKey) {
|
||||
nextIndex = currentIndex <= 0 ? allInputs.length - 1 : currentIndex - 1;
|
||||
} else {
|
||||
nextIndex = currentIndex >= allInputs.length - 1 ? 0 : currentIndex + 1;
|
||||
}
|
||||
|
||||
if (allInputs[nextIndex]) {
|
||||
allInputs[nextIndex].focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', this.dialogConfigTabHandler, true);
|
||||
|
||||
// Focus immediato + retry con timeout
|
||||
this.$nextTick(() => {
|
||||
const focusFirst = () => {
|
||||
const dialog = document.querySelector('.w-dialog');
|
||||
if (dialog) {
|
||||
const firstInput = dialog.querySelector('input[type="text"]');
|
||||
if (firstInput) {
|
||||
firstInput.focus();
|
||||
firstInput.select();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// Prova immediatamente
|
||||
if (!focusFirst()) {
|
||||
// Se fallisce, riprova dopo un breve delay
|
||||
setTimeout(focusFirst, 100);
|
||||
}
|
||||
});
|
||||
},
|
||||
chiudiDialogConfig() {
|
||||
if (this.dialogConfigTabHandler) {
|
||||
window.removeEventListener('keydown', this.dialogConfigTabHandler, true);
|
||||
this.dialogConfigTabHandler = null;
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
resettaCambi(team) {
|
||||
const teams = team ? [team] : ["home", "guest"];
|
||||
teams.forEach((t) => {
|
||||
this.diaCambi[t].cambi.forEach((cambio) => {
|
||||
cambio.in = "";
|
||||
cambio.out = "";
|
||||
});
|
||||
});
|
||||
},
|
||||
apriDialogCambi() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaCambiTeam.show = true;
|
||||
},
|
||||
apriDialogCambiTeam(team) {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaCambi.team = team;
|
||||
this.resettaCambi(team);
|
||||
this.diaCambi.show = true;
|
||||
},
|
||||
selezionaTeamCambi(team) {
|
||||
this.diaCambiTeam.show = false;
|
||||
this.apriDialogCambiTeam(team);
|
||||
},
|
||||
chiudiDialogCambi() {
|
||||
this.diaCambi.show = false;
|
||||
this.resettaCambi(this.diaCambi.team);
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
confermaCambi() {
|
||||
if (!this.cambiConfermabili) {
|
||||
return;
|
||||
}
|
||||
|
||||
const team = this.diaCambi.team;
|
||||
const cambi = (this.diaCambi[team].cambi || [])
|
||||
.map((cambio) => ({
|
||||
team,
|
||||
in: (cambio.in || "").trim(),
|
||||
out: (cambio.out || "").trim(),
|
||||
}))
|
||||
.filter((cambio) => cambio.in || cambio.out);
|
||||
|
||||
const form = this.sp.form[team].map((val) => String(val).trim());
|
||||
const formAggiornata = [...form];
|
||||
|
||||
for (const cambio of cambi) {
|
||||
if (!/^\d+$/.test(cambio.in) || !/^\d+$/.test(cambio.out)) {
|
||||
this.$waveui.notify("Inserisci solo numeri nei campi", "warning");
|
||||
return;
|
||||
}
|
||||
if (cambio.in === cambio.out) {
|
||||
this.$waveui.notify(`Numero IN e OUT uguali per ${cambio.team}`, "warning");
|
||||
return;
|
||||
}
|
||||
if (formAggiornata.includes(cambio.in)) {
|
||||
this.$waveui.notify(`Numero ${cambio.in} già presente in formazione ${cambio.team}`, "warning");
|
||||
return;
|
||||
}
|
||||
if (!formAggiornata.includes(cambio.out)) {
|
||||
this.$waveui.notify(`Numero ${cambio.out} non presente in formazione ${cambio.team}`, "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
const idx = formAggiornata.findIndex((val) => String(val).trim() === cambio.out);
|
||||
if (idx !== -1) {
|
||||
formAggiornata.splice(idx, 1, cambio.in);
|
||||
}
|
||||
}
|
||||
|
||||
this.sp.form[team] = formAggiornata;
|
||||
|
||||
this.chiudiDialogCambi();
|
||||
},
|
||||
disabilitaTastiSpeciali() {
|
||||
window.removeEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
@@ -147,32 +398,82 @@ export default {
|
||||
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
funzioneTastiSpeciali(e) {
|
||||
e.preventDefault();
|
||||
if (this.diaNomi.show || this.diaCambi.show || this.diaCambiTeam.show) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = e.target;
|
||||
const path = typeof e.composedPath === "function" ? e.composedPath() : [];
|
||||
const elements = [target, ...path].filter(Boolean);
|
||||
const isTypingField = elements.some((el) => {
|
||||
if (!el || !el.tagName) {
|
||||
return false;
|
||||
}
|
||||
const tag = String(el.tagName).toLowerCase();
|
||||
if (tag === "input" || tag === "textarea") {
|
||||
return true;
|
||||
}
|
||||
if (el.isContentEditable) {
|
||||
return true;
|
||||
}
|
||||
if (el.classList && (el.classList.contains("w-input") || el.classList.contains("w-textarea"))) {
|
||||
return true;
|
||||
}
|
||||
const contentEditable = el.getAttribute && el.getAttribute("contenteditable");
|
||||
return contentEditable === "true";
|
||||
});
|
||||
if (isTypingField) {
|
||||
return;
|
||||
}
|
||||
|
||||
let handled = false;
|
||||
if (e.ctrlKey && e.key == "m") {
|
||||
this.diaNomi.show = true
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "b") {
|
||||
this.visuButt = !this.visuButt
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "f") {
|
||||
document.documentElement.requestFullscreen();
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "s") {
|
||||
this.speak();
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "z") {
|
||||
this.visuForm = !this.visuForm
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowUp") {
|
||||
this.incPunt("home")
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowDown") {
|
||||
this.decPunt("home")
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowRight") {
|
||||
this.incSet("home")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && e.key == "ArrowUp") {
|
||||
this.incPunt("guest")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && e.key == "ArrowDown") {
|
||||
this.decPunt("guest")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && e.key == "ArrowRight") {
|
||||
this.incSet("guest")
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowLeft") {
|
||||
this.sp.servHome = !this.sp.servHome
|
||||
this.cambiaPalla()
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && (e.key == "c" || e.key == "C")) {
|
||||
this.apriDialogCambiTeam("home")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && (e.key == "c" || e.key == "C")) {
|
||||
this.apriDialogCambiTeam("guest")
|
||||
handled = true;
|
||||
} else { return false }
|
||||
|
||||
if (handled) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
142
src/style.css
142
src/style.css
@@ -58,6 +58,19 @@ button:focus-visible {
|
||||
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;
|
||||
@@ -121,4 +149,116 @@ button:focus-visible {
|
||||
background-color: rgb(206, 247, 3);
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user