Corregge encoding README.md (caratteri accentati)
This commit is contained in:
76
README.md
76
README.md
@@ -1,17 +1,17 @@
|
|||||||
# Segnapunti - Anto
|
# Segnapunti - Anto
|
||||||
|
|
||||||
Un'applicazione web segnapunti per pallavolo con funzionalità di sintesi vocale, modalità formazione e supporto PWA (Progressive Web App).
|
Un'applicazione web segnapunti per pallavolo con funzionalità di sintesi vocale, modalità formazione e supporto PWA (Progressive Web App).
|
||||||
|
|
||||||
## Cos'è
|
## Cos'è
|
||||||
|
|
||||||
Segnapunti è un'applicazione standalone per tenere il punteggio durante le partite di pallavolo. L'applicazione è ottimizzata per dispositivi mobili in modalità landscape (orizzontale) e può essere installata come app nativa grazie al supporto PWA.
|
Segnapunti è un'applicazione standalone per tenere il punteggio durante le partite di pallavolo. L'applicazione è ottimizzata per dispositivi mobili in modalità landscape (orizzontale) e può essere installata come app nativa grazie al supporto PWA.
|
||||||
|
|
||||||
### Caratteristiche principali
|
### Caratteristiche principali
|
||||||
|
|
||||||
- **Segnapunti digitale**: Visualizzazione chiara del punteggio per le due squadre (Home e Guest)
|
- **Segnapunti digitale**: Visualizzazione chiara del punteggio per le due squadre (Home e Guest)
|
||||||
- **Contatore set**: Traccia i set vinti da ciascuna squadra (fino a 3 set)
|
- **Contatore set**: Traccia i set vinti da ciascuna squadra (fino a 3 set)
|
||||||
- **Indicatore battuta**: Mostra quale squadra ha il servizio
|
- **Indicatore battuta**: Mostra quale squadra ha il servizio
|
||||||
- **Modalità formazione**: Visualizza la rotazione dei giocatori in campo (posizioni 1-6)
|
- **Modalità formazione**: Visualizza la rotazione dei giocatori in campo (posizioni 1-6)
|
||||||
- **Sintesi vocale**: Annuncia il punteggio in italiano
|
- **Sintesi vocale**: Annuncia il punteggio in italiano
|
||||||
- **PWA**: Installabile come app standalone con funzionamento offline
|
- **PWA**: Installabile come app standalone con funzionamento offline
|
||||||
- **Controllo da tastiera**: Scorciatoie per gestire rapidamente il punteggio
|
- **Controllo da tastiera**: Scorciatoie per gestire rapidamente il punteggio
|
||||||
@@ -22,24 +22,24 @@ Segnapunti è un'applicazione standalone per tenere il punteggio durante le pa
|
|||||||
|
|
||||||
### Interfaccia
|
### Interfaccia
|
||||||
|
|
||||||
L'applicazione divide lo schermo in due metà :
|
L'applicazione divide lo schermo in due metà:
|
||||||
|
|
||||||
- **Metà sinistra (gialla su sfondo nero)**: Squadra Home - Antoniana
|
- **Metà sinistra (gialla su sfondo nero)**: Squadra Home - Antoniana
|
||||||
- **Metà destra (bianca su sfondo blu)**: Squadra Guest
|
- **Metà destra (bianca su sfondo blu)**: Squadra Guest
|
||||||
|
|
||||||
#### Visualizzazioni
|
#### Visualizzazioni
|
||||||
|
|
||||||
1. **Modalità Punteggio** (default):
|
1. **Modalità Punteggio** (default):
|
||||||
- Mostra il punteggio corrente in caratteri molto grandi
|
- Mostra il punteggio corrente in caratteri molto grandi
|
||||||
- Cliccando sul punteggio si incrementa di 1
|
- Cliccando sul punteggio si incrementa di 1
|
||||||
- Cliccando sul nome della squadra si decrementa di 1
|
- Cliccando sul nome della squadra si decrementa di 1
|
||||||
|
|
||||||
2. **Modalità Formazione**:
|
2. **Modalità Formazione**:
|
||||||
- Mostra le posizioni dei giocatori in campo (1-6)
|
- Mostra le posizioni dei giocatori in campo (1-6)
|
||||||
- La formazione ruota automaticamente quando si incrementa il punteggio
|
- La formazione ruota automaticamente quando si incrementa il punteggio
|
||||||
- L'ordine visualizzato è: [3, 2, 1, 4, 5, 0] (ordine inverso rispetto alla rotazione standard)
|
- L'ordine visualizzato è: [3, 2, 1, 4, 5, 0] (ordine inverso rispetto alla rotazione standard)
|
||||||
|
|
||||||
#### FunzionalitÃ
|
#### Funzionalità
|
||||||
|
|
||||||
- **Reset**: Azzera punteggio e formazioni, mantiene i nomi delle squadre
|
- **Reset**: Azzera punteggio e formazioni, mantiene i nomi delle squadre
|
||||||
- **Cambio servizio**: Toggle manuale del servizio tra le squadre
|
- **Cambio servizio**: Toggle manuale del servizio tra le squadre
|
||||||
@@ -55,22 +55,22 @@ L'applicazione divide lo schermo in due metà :
|
|||||||
|
|
||||||
- **Ctrl + M**: Apri dialog configurazione nomi
|
- **Ctrl + M**: Apri dialog configurazione nomi
|
||||||
- **Ctrl + B**: Mostra/nascondi barra pulsanti in basso
|
- **Ctrl + B**: Mostra/nascondi barra pulsanti in basso
|
||||||
- **Ctrl + F**: Attiva modalità fullscreen
|
- **Ctrl + F**: Attiva modalità fullscreen
|
||||||
- **Ctrl + S**: Pronuncia il punteggio
|
- **Ctrl + S**: Pronuncia il punteggio
|
||||||
- **Ctrl + Z**: Alterna tra modalità punteggio e formazione
|
- **Ctrl + Z**: Alterna tra modalità punteggio e formazione
|
||||||
- **Ctrl + ↑**: Incrementa punteggio Home
|
- **Ctrl + ↑**: Incrementa punteggio Home
|
||||||
- **Ctrl + ↓**: Decrementa punteggio Home
|
- **Ctrl + ↓**: Decrementa punteggio Home
|
||||||
- **Ctrl + →**: Incrementa set Home
|
- **Ctrl + →**: Incrementa set Home
|
||||||
- **Shift + ↑**: Incrementa punteggio Guest
|
- **Shift + ↑**: Incrementa punteggio Guest
|
||||||
- **Shift + ↓**: Decrementa punteggio Guest
|
- **Shift + ↓**: Decrementa punteggio Guest
|
||||||
- **Shift + →**: Incrementa set Guest
|
- **Shift + →**: Incrementa set Guest
|
||||||
- **Ctrl + â†**: Cambia servizio
|
- **Ctrl + ←**: Cambia servizio
|
||||||
|
|
||||||
### Comportamento su mobile
|
### Comportamento su mobile
|
||||||
|
|
||||||
Su dispositivi mobili l'applicazione:
|
Su dispositivi mobili l'applicazione:
|
||||||
1. Attiva automaticamente NoSleep per impedire lo spegnimento dello schermo
|
1. Attiva automaticamente NoSleep per impedire lo spegnimento dello schermo
|
||||||
2. Si avvia in modalità fullscreen
|
2. Si avvia in modalità fullscreen
|
||||||
3. Esegue un test di sintesi vocale al caricamento
|
3. Esegue un test di sintesi vocale al caricamento
|
||||||
4. Mostra il pulsante "Esci" per chiudere l'app
|
4. Mostra il pulsante "Esci" per chiudere l'app
|
||||||
|
|
||||||
@@ -87,7 +87,7 @@ Su dispositivi mobili l'applicazione:
|
|||||||
### API Web utilizzate
|
### API Web utilizzate
|
||||||
|
|
||||||
- **Web Speech API**: Per la sintesi vocale (Text-to-Speech)
|
- **Web Speech API**: Per la sintesi vocale (Text-to-Speech)
|
||||||
- **Fullscreen API**: Per la modalità schermo intero
|
- **Fullscreen API**: Per la modalità schermo intero
|
||||||
- **Service Worker**: Per il funzionamento offline (PWA)
|
- **Service Worker**: Per il funzionamento offline (PWA)
|
||||||
|
|
||||||
## Come svilupparlo
|
## Come svilupparlo
|
||||||
@@ -112,7 +112,7 @@ npm install
|
|||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
Questo comando avvia Vite in modalità development. L'applicazione sarà disponibile su `http://localhost:5173` (o altra porta se già occupata).
|
Questo comando avvia Vite in modalità development. L'applicazione sarà disponibile su `http://localhost:5173` (o altra porta se già occupata).
|
||||||
|
|
||||||
#### Build per produzione
|
#### Build per produzione
|
||||||
```bash
|
```bash
|
||||||
@@ -169,7 +169,7 @@ msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
|||||||
|
|
||||||
#### Modificare l'ordine di visualizzazione delle formazioni
|
#### Modificare l'ordine di visualizzazione delle formazioni
|
||||||
|
|
||||||
Nel template del componente [src/components/HomePage.vue](src/components/HomePage.vue:181), l'ordine di visualizzazione delle posizioni è controllato dall'array nell'attributo `v-for`. La sequenza `[3, 2, 1, 4, 5, 0]` rappresenta l'ordine in cui vengono mostrate le posizioni dei giocatori sulla griglia 2x3 del campo.
|
Nel template del componente [src/components/HomePage.vue](src/components/HomePage.vue:181), l'ordine di visualizzazione delle posizioni è controllato dall'array nell'attributo `v-for`. La sequenza `[3, 2, 1, 4, 5, 0]` rappresenta l'ordine in cui vengono mostrate le posizioni dei giocatori sulla griglia 2x3 del campo.
|
||||||
|
|
||||||
Per modificare l'ordine di visualizzazione, modifica questo array:
|
Per modificare l'ordine di visualizzazione, modifica questo array:
|
||||||
```vue
|
```vue
|
||||||
@@ -184,7 +184,7 @@ L'ordine attuale mostra le posizioni in questo schema:
|
|||||||
4 5 0
|
4 5 0
|
||||||
```
|
```
|
||||||
|
|
||||||
Dove 0 corrisponde alla posizione 1 nel pallavolo, 1 alla posizione 2, e così via.
|
Dove 0 corrisponde alla posizione 1 nel pallavolo, 1 alla posizione 2, e così via.
|
||||||
|
|
||||||
## Testing e Deploy
|
## Testing e Deploy
|
||||||
|
|
||||||
@@ -197,7 +197,7 @@ Per testare l'applicazione su dispositivi mobili nella stessa rete locale:
|
|||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
2. Vite mostrerà l'indirizzo locale e di rete. Se non viene mostrato, trova l'indirizzo IP del tuo computer:
|
2. Vite mostrerà l'indirizzo locale e di rete. Se non viene mostrato, trova l'indirizzo IP del tuo computer:
|
||||||
```bash
|
```bash
|
||||||
# Su Linux/Mac
|
# Su Linux/Mac
|
||||||
hostname -I
|
hostname -I
|
||||||
@@ -214,7 +214,7 @@ http://[tuo-ip]:5173
|
|||||||
```
|
```
|
||||||
|
|
||||||
4. Accetta eventuali permessi richiesti dal browser per:
|
4. Accetta eventuali permessi richiesti dal browser per:
|
||||||
- Modalità fullscreen
|
- Modalità fullscreen
|
||||||
- Sintesi vocale
|
- Sintesi vocale
|
||||||
- Wake Lock (prevenzione spegnimento schermo)
|
- Wake Lock (prevenzione spegnimento schermo)
|
||||||
|
|
||||||
@@ -263,7 +263,7 @@ npm run build
|
|||||||
|
|
||||||
#### Deploy su server web
|
#### Deploy su server web
|
||||||
|
|
||||||
Il contenuto della cartella `dist/` può essere servito da qualsiasi server web statico:
|
Il contenuto della cartella `dist/` può essere servito da qualsiasi server web statico:
|
||||||
|
|
||||||
**Nginx:**
|
**Nginx:**
|
||||||
```nginx
|
```nginx
|
||||||
@@ -297,8 +297,8 @@ Dopo il deploy, gli utenti possono installare l'app:
|
|||||||
|
|
||||||
**Su Android/Chrome:**
|
**Su Android/Chrome:**
|
||||||
1. Visita il sito
|
1. Visita il sito
|
||||||
2. Tocca il menu (â‹®) > "Aggiungi a schermata Home"
|
2. Tocca il menu (⋮) > "Aggiungi a schermata Home"
|
||||||
3. L'app si avvierà in modalità fullscreen standalone
|
3. L'app si avvierà in modalità fullscreen standalone
|
||||||
|
|
||||||
**Su iOS/Safari:**
|
**Su iOS/Safari:**
|
||||||
1. Visita il sito
|
1. Visita il sito
|
||||||
@@ -309,18 +309,18 @@ Dopo il deploy, gli utenti possono installare l'app:
|
|||||||
|
|
||||||
### Architettura del componente
|
### Architettura del componente
|
||||||
|
|
||||||
L'applicazione è strutturata come Single Page Application (SPA) con un unico componente principale `HomePage`. Questo design semplice è ideale per un'app focalizzata su un'unica funzionalità .
|
L'applicazione è strutturata come Single Page Application (SPA) con un unico componente principale `HomePage`. Questo design semplice è ideale per un'app focalizzata su un'unica funzionalità.
|
||||||
|
|
||||||
### Gestione dello stato
|
### Gestione dello stato
|
||||||
|
|
||||||
Lo stato dell'applicazione è gestito localmente nel componente tramite `data()`:
|
Lo stato dell'applicazione è gestito localmente nel componente tramite `data()`:
|
||||||
- `punt`: punteggio corrente delle due squadre
|
- `punt`: punteggio corrente delle due squadre
|
||||||
- `set`: numero di set vinti
|
- `set`: numero di set vinti
|
||||||
- `servHome`: boolean che indica quale squadra ha il servizio
|
- `servHome`: boolean che indica quale squadra ha il servizio
|
||||||
- `form`: array con le posizioni dei giocatori (1-6)
|
- `form`: array con le posizioni dei giocatori (1-6)
|
||||||
- `nomi`: nomi personalizzabili delle squadre
|
- `nomi`: nomi personalizzabili delle squadre
|
||||||
- `visuForm`: toggle tra visualizzazione punteggio/formazione
|
- `visuForm`: toggle tra visualizzazione punteggio/formazione
|
||||||
- `visuButt`: visibilità della barra dei pulsanti
|
- `visuButt`: visibilità della barra dei pulsanti
|
||||||
|
|
||||||
### Gestione della rotazione
|
### Gestione della rotazione
|
||||||
|
|
||||||
@@ -361,8 +361,8 @@ msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
|||||||
```
|
```
|
||||||
|
|
||||||
Logica di annuncio:
|
Logica di annuncio:
|
||||||
- "zero a zero" se il punteggio è 0-0
|
- "zero a zero" se il punteggio è 0-0
|
||||||
- "[numero] pari" se il punteggio è uguale
|
- "[numero] pari" se il punteggio è uguale
|
||||||
- "[servizio] a [ricezione]" annunciando prima chi ha il servizio
|
- "[servizio] a [ricezione]" annunciando prima chi ha il servizio
|
||||||
|
|
||||||
### Prevenzione spegnimento schermo
|
### Prevenzione spegnimento schermo
|
||||||
@@ -373,7 +373,7 @@ var noSleep = new NoSleep();
|
|||||||
noSleep.enable();
|
noSleep.enable();
|
||||||
```
|
```
|
||||||
|
|
||||||
Questo impedisce allo schermo di spegnersi durante le partite, funzionalità essenziale per un segnapunti.
|
Questo impedisce allo schermo di spegnersi durante le partite, funzionalità essenziale per un segnapunti.
|
||||||
|
|
||||||
### Controlli da tastiera
|
### Controlli da tastiera
|
||||||
|
|
||||||
@@ -411,7 +411,7 @@ File [.vscode/extensions.json](.vscode/extensions.json) suggerisce:
|
|||||||
### La sintesi vocale non funziona
|
### La sintesi vocale non funziona
|
||||||
|
|
||||||
- Verifica che il browser supporti la Web Speech API (Chrome/Edge consigliati)
|
- Verifica che il browser supporti la Web Speech API (Chrome/Edge consigliati)
|
||||||
- Su alcuni browser è necessaria l'interazione utente prima di utilizzare la sintesi vocale
|
- Su alcuni browser è necessaria l'interazione utente prima di utilizzare la sintesi vocale
|
||||||
- Controlla che la voce "Google italiano" sia disponibile nel sistema
|
- Controlla che la voce "Google italiano" sia disponibile nel sistema
|
||||||
|
|
||||||
### L'app non si installa come PWA
|
### L'app non si installa come PWA
|
||||||
@@ -430,7 +430,7 @@ File [.vscode/extensions.json](.vscode/extensions.json) suggerisce:
|
|||||||
|
|
||||||
- Le formazioni si azzerano con il RESET
|
- Le formazioni si azzerano con il RESET
|
||||||
- Verifica che gli array `form` abbiano sempre 6 elementi
|
- Verifica che gli array `form` abbiano sempre 6 elementi
|
||||||
- La visualizzazione può essere invertita ma la logica di rotazione rimane corretta
|
- La visualizzazione può essere invertita ma la logica di rotazione rimane corretta
|
||||||
|
|
||||||
## Licenza
|
## Licenza
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user