Segnapunti Anto

Applicazione web Progressive Web App (PWA) per tracciare i punteggi di partite di pallavolo in tempo reale.

---

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)
  • 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)

# 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:

npm run dev

L'applicazione sarà disponibile su 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:

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:

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:

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