docs(readme): rimuovi sezione shortcuts tastiera non più implementata

feat: apri config automaticamente dopo il reset
Dopo aver azzerato la partita il dialog di configurazione si apre subito, con nomi e modalità correnti e formazioni resettate ai default — stesso comportamento già presente al termine di ogni set.
2026-06-20 15:53:04 +02:00 · 2026-06-20 15:51:11 +02:00 · 2026-06-20 15:43:03 +02:00 · 2026-06-20 15:23:58 +02:00 · 2026-06-20 14:57:20 +02:00 · 2026-05-13 10:21:49 +02:00
11 changed files with 470 additions and 650 deletions
@@ -0,0 +1,6 @@
+{
+  "enabledPlugins": {
+    "claude-md-management@claude-plugins-official": true,
+    "code-simplifier@claude-plugins-official": true
+  }
+}
@@ -2,26 +2,28 @@

 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

-## Project Purpose
+## Scopo del progetto

-**Segnapunti Anto** is a real-time volleyball scoreboard PWA. An Express/WebSocket server hosts the game state; two separate web interfaces — a **display** (public scoreboard) and a **controller** (operator panel) — stay in sync via WebSocket.
+**Segnapunti Anto** è una PWA per il segnapunti pallavolo in tempo reale. Un server Express/WebSocket gestisce lo stato di gioco; due interfacce Vue separate — **display** (tabellone pubblico) e **controller** (pannello operatore) — si sincronizzano via WebSocket.

-## Commands
+## Comandi

 ```bash
 npm run dev          # Vite dev server — display: :5173/display, controller: :5173/controller
-npm run serve        # Build + run production — display: :3000/display, controller: :3000/controller
+npm run serve        # Build + avvio produzione — display: :3000/display, controller: :3000/controller

-npm run test         # Vitest watch mode
-npm run test:all     # All Vitest suites once (unit, integration, component, stress)
-npm run test:unit    # Unit + integration only
-npm run test:component  # Vue component tests
-npm run test:stress  # Load tests (50+ concurrent clients)
-npm run test:e2e     # Playwright E2E (requires servers to be running via npm run serve)
-npm run test:e2e:ui  # Playwright with interactive UI
+npm run test         # Vitest in modalità watch
+npm run test:all     # Tutte le suite Vitest in una sola esecuzione
+npm run test:unit    # Solo unit + integration
+npm run test:component  # Test componenti Vue (happy-dom)
+npm run test:stress  # Load test (50+ client concorrenti)
+npm run test:e2e     # Playwright E2E (richiede npm run serve attivo)
+npm run test:e2e:ui  # Playwright con UI interattiva
 ```

-## Architecture
+Per eseguire un singolo file di test: `npx vitest run tests/unit/gameState.test.js`
+
+## Architettura

 ```
 Controller (Vue)  ──WebSocket──┐
@@ -30,33 +32,51 @@ Display (Vue)     ──WebSocket──┤── websocket-handler.js ── gam
                               │         └── persist.js ── .segnapunti/state.json
 ```

-All game logic lives in `src/gameState.js` as three pure functions:
- `createInitialState()` — returns the initial state
- `applyAction(state, action)` — immutable reducer (deep-clones via `structuredClone`)
- `checkVittoria(state)` — volleyball win conditions (25-point sets with 2-point margin, 15-point final set)
+**Tutta la logica di gioco** è in `src/gameState.js` come tre funzioni pure esportate:
+- `createInitialState()` — restituisce lo stato iniziale
+- `applyAction(state, action)` — reducer immutabile (deep-clone via `structuredClone`)
+- `checkVittoria(state)` — condizioni di vittoria set (25 punti, vantaggio di 2; 15 punti nel set decisivo)

-`src/websocket-handler.js` receives actions, validates that the sender is a registered controller (not just a display), calls `applyAction`, broadcasts the new state to all clients, then calls `onStateChange` to persist state to disk.
+`src/websocket-handler.js` riceve i messaggi WebSocket, valida che il mittente sia un `controller` (non un `display`), chiama `applyAction`, fa il broadcast del nuovo stato a tutti i client, poi invoca `onStateChange` per persistere su disco.

-`server.js` (Express) serves both interfaces on port 3000: `/display` → `dist/index.html`, `/controller` → `dist/controller.html`. Single WebSocket endpoint at `/ws`.
+`server.js` (Express) serve entrambe le interfacce sulla porta 3000: `/display` → `dist/index.html`, `/controller` → `dist/controller.html`. Singolo endpoint WebSocket su `/ws`.

-In development, `vite-plugin-websocket.js` embeds the WebSocket server inside the Vite dev server with URL rewrite middleware for `/display` and `/controller`.
+In sviluppo, `vite-plugin-websocket.js` incorpora il server WebSocket dentro il dev server Vite con middleware di URL rewrite per `/display` e `/controller`.

-## Key Design Constraints
+## Vincoli di design

- **All game rules on the server** — clients are pure UI; the server is the source of truth.
- **Role-based WebSocket** — clients register as `display` or `controller`; only controllers may send actions.
- **Immutable state** — `applyAction` never mutates; always returns a new state object.
- **Single-controller intent** — the design targets one active controller and one display; no conflict resolution exists for simultaneous controllers.
- **Persistent state** — `src/persist.js` saves state to `.segnapunti/state.json` after every action and loads it on server startup.
+- **Tutta la logica sul server** — i client sono pura UI; il server è l'unica source of truth.
+- **WebSocket role-based** — i client si registrano come `display` o `controller`; solo i controller possono inviare azioni.
+- **Stato immutabile** — `applyAction` non muta mai lo stato, restituisce sempre un nuovo oggetto.
+- **Un solo controller** — il design prevede un controller e un display attivi; non esiste conflict resolution per controller simultanei.
+- **Stato persistente** — `src/persist.js` salva lo stato in `.segnapunti/state.json` dopo ogni azione e lo carica all'avvio del server.

-## Test Layout
+## Layout dei test

-| Suite | Path | Runner |
-|-------|------|--------|
+| Suite | Percorso | Runner |
+|-------|----------|--------|
 | Unit | `tests/unit/` | Vitest + Node |
 | Integration | `tests/integration/` | Vitest + Node |
 | Component | `tests/component/` | Vitest + Happy-DOM |
 | Stress | `tests/stress/` | Vitest + Node |
 | E2E | `tests/e2e/` | Playwright (Chromium, Firefox, Mobile Chrome) |

-E2E tests run serially (`workers: 1`) to avoid WebSocket state races. Run `npm run serve` before `npm run test:e2e`.
+I test E2E girano in serie (`workers: 1`) per evitare race condition sullo stato WebSocket. Eseguire `npm run serve` prima di `npm run test:e2e`.
+
+## Deploy
+
+Il progetto si distribuisce tramite Docker. L'immagine è pubblicata sul registry Gitea self-hosted (`santantonio.sytes.net`):
+
+```bash
+docker compose up -d   # Avvia con immagine dal registry privato (porta 3000)
+```
+
+Il volume `./.segnapunti` persiste lo stato tra i riavvii del container.
+
+## Istruzioni operative
+
+- Per ogni nuova funzionalità: analizza come si inserisce nel flusso `action → applyAction → broadcast`, poi decidi se aggiungere un nuovo tipo di action o estendere uno esistente.
+- Qualsiasi modifica alle regole di gioco va fatta esclusivamente in `src/gameState.js`.
+- Qualsiasi modifica al protocollo WebSocket va fatta in `src/websocket-handler.js`.
+- Aggiungere test unit in `tests/unit/gameState.test.js` per ogni nuovo action type o regola di gioco.
+- Il codice deve essere scritto in italiano per commenti e nomi di variabili di dominio (es. `servHome`, `striscia`, `nomi`), ma in inglese per nomi tecnici standard (`state`, `action`, `handler`).
@@ -14,7 +14,6 @@ Segnapunti digitale in tempo reale per partite di pallavolo. Un server centrale
 - [Architettura](#architettura)
 - [Guida utente](#guida-utente)
 - [Funzionalità](#funzionalità)
- [Shortcuts tastiera](#shortcuts-tastiera)
 - [Deploy con Docker](#deploy-con-docker)
 - [Sviluppo](#sviluppo)
 - [Test](#test)
@@ -111,25 +110,6 @@ http://<IP-del-server>:3000/controller

 ---

-## Shortcuts tastiera
-
-> Valide sul controller da browser desktop.
-
-| Tasto | Azione |
-|---|---|
-| `Ctrl + ↑` | Punto casa |
-| `Ctrl + ↓` | Annulla ultimo punto |
-| `Shift + ↑` | Punto ospite |
-| `Ctrl + ←` | Cambia servizio (solo a 0-0) |
-| `Ctrl + M` | Apri configurazione |
-| `Ctrl + C` | Cambi squadra casa |
-| `Shift + C` | Cambi squadra ospite |
-| `Ctrl + Z` | Toggle punteggio / formazioni |
-| `Ctrl + S` | Annuncio vocale punteggio |
-| `Ctrl + B` | Mostra/nascondi barra pulsanti |
-| `Ctrl + F` | Fullscreen |
-
---

 ## Deploy con Docker

@@ -1,12 +1,9 @@
 services:
  segnapunti:
-    image: santantonio.sytes.net/attilio/segnapunti:1.0.0
+    image: santantonio.sytes.net/attilio/segnapunti:2.0.0
    container_name: segnapunti
    ports:
      - "3000:3000"
    volumes:
-      - segnapunti-state:/app/.segnapunti
+      - ./.segnapunti:/app/.segnapunti
    restart: unless-stopped
-
-volumes:
-  segnapunti-state:
@@ -4,7 +4,7 @@
  "version": "2.0.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
    "build": "vite build",
    "serve": "vite build && node server.js",
    "test": "vitest",
@@ -10,15 +10,15 @@
    <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" alt="Servizio" />
+        <div class="team-pts">{{ punt.home }}</div>
+        <div class="team-set">SET {{ set.home }}</div>
+        <img v-show="servHome" src="/serv.png" class="serv-icon" alt="Servizio" />
      </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" alt="Servizio" />
+        <div class="team-pts">{{ punt.guest }}</div>
+        <div class="team-set">SET {{ set.guest }}</div>
+        <img v-show="!servHome" src="/serv.png" class="serv-icon" alt="Servizio" />
      </div>
    </div>

@@ -78,15 +78,16 @@
      </div>
    </div>

-    <!-- Finestra set vinto -->
+    <!-- Finestra set vinto / partita finita -->
    <div class="overlay" v-if="showSetVinto">
      <div class="dialog">
-        <div class="dialog-title">SET VINTO</div>
+        <div class="dialog-title">{{ isPartitaFinita ? 'PARTITA FINITA' : 'SET VINTO' }}</div>
        <div class="dialog-winner">{{ state.sp.nomi[setVintoTeam] }}</div>
-        <div class="dialog-subtitle">Configura le formazioni per il prossimo set</div>
+        <div class="dialog-subtitle" v-if="!isPartitaFinita">Configura le formazioni per il prossimo set</div>
        <div class="dialog-buttons">
          <button class="btn btn-cancel" @click="undoUltimoPoint()">INDIETRO</button>
-          <button class="btn btn-confirm" @click="doNuovoSet()">VAI AL SET SUCCESSIVO</button>
+          <button v-if="isPartitaFinita" class="btn btn-confirm" @click="showSetVinto = false">CHIUDI</button>
+          <button v-else class="btn btn-confirm" @click="doNuovoSet()">VAI AL SET SUCCESSIVO</button>
        </div>
      </div>
    </div>
@@ -112,6 +113,8 @@
              @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>
+            <button :class="['btn', 'btn-mode', configData.modalita === 'amichevole' ? 'active' : '']"
+              @click="configData.modalita = 'amichevole'">Amichevole</button>
          </div>
        </div>

@@ -189,16 +192,13 @@
 </template>

 <script>
+import { createWsMixin } from '../wsMixin.js'
+
 export default {
  name: "ControllerPage",
+  mixins: [createWsMixin('controller')],
  data() {
    return {
-      ws: null,
-      wsConnected: false,
-      isConnecting: false,
-      reconnectTimeout: null,
-      reconnectAttempts: 0,
-      maxReconnectDelay: 30000,
      confirmReset: false,
      showSetVinto: false,
      setVintoTeam: null,
@@ -206,62 +206,44 @@ export default {
      showCambiTeam: false,
      showCambi: false,
      cambiTeam: "home",
-      cambiData: [
-        { in: "", out: "" },
-        { in: "", out: "" },
-      ],
+      cambiData: [{ in: "", out: "" }, { in: "", out: "" }],
      cambiError: "",
      configData: {
-        nomeHome: "",
-        nomeGuest: "",
-        modalita: "3/5",
+        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: [{ serv: 'home', r: [] }],
-          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"],
-          },
-        },
-      },
    }
  },
  computed: {
    isPunteggioZeroZero() {
-      return this.state.sp.punt.home === 0 && this.state.sp.punt.guest === 0
+      return this.state.sp.striscia.at(-1).ris === ''
    },
    squadraVincente() {
-      const { home, guest } = this.state.sp.punt
-      const totSet = this.state.sp.set.home + this.state.sp.set.guest
+      const { home, guest } = this.punt
+      const sv = this.set
+      const totSet = sv.home + sv.guest
      const isSetDecisivo = this.state.modalitaPartita === '2/3' ? totSet >= 2 : totSet >= 4
      const soglia = isSetDecisivo ? 15 : 25
      if (home >= soglia && home - guest >= 2) return 'home'
      if (guest >= soglia && guest - home >= 2) return 'guest'
      return null
    },
+    isPartitaFinita() {
+      if (!this.setVintoTeam || this.state.modalitaPartita === 'amichevole') return false
+      const setsToWin = this.state.modalitaPartita === '2/3' ? 2 : 3
+      return this.set[this.setVintoTeam] + 1 >= setsToWin
+    },
    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 }
+      for (const c of this.cambiData) {
+        const cin = (c.in || "").trim(), cout = (c.out || "").trim()
+        if (!cin && !cout) continue
+        if (!cin || !cout) return false
        hasComplete = true
-      })
-      return allValid && hasComplete
      }
+      return hasComplete
+    },
  },
  watch: {
    squadraVincente(val) {
@@ -271,231 +253,55 @@ export default {
      }
    },
  },
-  mounted() {
-    this.connectWebSocket()
-
-    // Gestisce l'HMR di Vite evitando riconnessioni durante la ricarica a caldo.
-    if (import.meta.hot) {
-      import.meta.hot.on('vite:beforeUpdate', () => {
-        // Annulla eventuali tentativi di riconnessione pianificati.
-        if (this.reconnectTimeout) {
-          clearTimeout(this.reconnectTimeout)
-          this.reconnectTimeout = null
-        }
-      })
-    }
-  },
-  beforeUnmount() {
-    // Pulisce il timeout di riconnessione.
-    if (this.reconnectTimeout) {
-      clearTimeout(this.reconnectTimeout)
-      this.reconnectTimeout = null
-    }
-
-    // Chiude il WebSocket con il codice di chiusura appropriato.
-    if (this.ws) {
-      this.ws.onclose = null // Rimuove il listener per evitare nuove riconnessioni pianificate.
-      this.ws.onerror = null
-      this.ws.onmessage = null
-      this.ws.onopen = null
-
-      // Usa il codice 1000 (chiusura normale) se la connessione e aperta.
-      try {
-        if (this.ws.readyState === WebSocket.OPEN) {
-          this.ws.close(1000, 'Component unmounting')
-        } else if (this.ws.readyState === WebSocket.CONNECTING) {
-          // Se la connessione e ancora in fase di apertura, chiude direttamente.
-          this.ws.close()
-        }
-      } catch (err) {
-        console.error('[Controller] Error closing WebSocket:', err)
-      }
-      this.ws = null
-    }
-  },
  methods: {
-    connectWebSocket() {
-      // Evita connessioni simultanee multiple.
-      if (this.isConnecting) {
-        console.log('[Controller] Already connecting, skipping...')
-        return
-      }
-
-      // Chiude la connessione precedente, se presente.
-      if (this.ws) {
-        this.ws.onclose = null
-        this.ws.onerror = null
-        this.ws.onmessage = null
-        this.ws.onopen = null
-        try {
-          if (this.ws.readyState === WebSocket.OPEN) {
-            this.ws.close(1000, 'Reconnecting')
-          } else if (this.ws.readyState === WebSocket.CONNECTING) {
-            this.ws.close()
-          }
-        } catch (err) {
-          console.error('[Controller] Error closing previous WebSocket:', err)
-        }
-        this.ws = null
-      }
-
-      this.isConnecting = true
-      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
-
-      // Permette di specificare un host WebSocket alternativo via query parameter
-      // Utile per scenari WSL2 o development remoto: ?wsHost=192.168.1.100:3001
-      const params = new URLSearchParams(location.search)
-      const defaultHost = (
-        location.hostname === 'localhost' || location.hostname === '::1'
-      )
-        ? `127.0.0.1${location.port ? `:${location.port}` : ''}`
-        : location.host
-      const wsHost = params.get('wsHost') || defaultHost
-      const wsUrl = `${protocol}//${wsHost}/ws`
-
-      console.log('[Controller] Connecting to WebSocket:', wsUrl)
-
-      try {
-        this.ws = new WebSocket(wsUrl)
-      } catch (err) {
-        console.error('[Controller] Failed to create WebSocket:', err)
-        this.isConnecting = false
-        this.scheduleReconnect()
-        return
-      }
-
-      this.ws.onopen = () => {
-        this.isConnecting = false
-        this.wsConnected = true
-        this.reconnectAttempts = 0
-        console.log('[Controller] Connected to server')
-
-        // Invia la registrazione solo se la connessione e realmente aperta.
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-          try {
-            this.ws.send(JSON.stringify({ type: 'register', role: 'controller' }))
-          } catch (err) {
-            console.error('[Controller] Failed to register:', err)
-          }
-        }
-      }
-
-      this.ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data)
-
-          if (msg.type === 'state') {
-            this.state = msg.state
-          } else if (msg.type === 'error') {
-            console.error('[Controller] Server error:', msg.message)
-            // Fornisce feedback di errore all'utente.
-            this.showErrorFeedback(msg.message)
-          }
-        } catch (e) {
-          console.error('[Controller] Parse error:', e)
-        }
-      }
-
-      this.ws.onclose = (event) => {
-        this.isConnecting = false
-        this.wsConnected = false
-        console.log('[Controller] Disconnected from server', event.code, event.reason)
-
-        // Non riconnette durante HMR (codice 1001, "going away")
-        // ne in caso di chiusura pulita (codice 1000).
-        if (event.code === 1000 || event.code === 1001) {
-          console.log('[Controller] Clean close, not reconnecting')
-          return
-        }
-
-        this.scheduleReconnect()
-      }
-
-      this.ws.onerror = (err) => {
-        console.error('[Controller] WebSocket error:', err)
-        this.isConnecting = false
-        this.wsConnected = false
-      }
+    onWsMessage(msg) {
+      if (msg.type === 'error') this.showErrorFeedback(msg.message)
    },
-
-    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')
-      }
+      if (!action?.type) return
+      if (!this.sendWs({ type: 'action', action })) this.showErrorFeedback('Non connesso al server')
    },
-
    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
+      this.configData = {
+        nomeHome: this.state.sp.nomi.home,
+        nomeGuest: this.state.sp.nomi.guest,
+        modalita: this.state.modalitaPartita,
+        formHome: ["1", "2", "3", "4", "5", "6"],
+        formGuest: ["1", "2", "3", "4", "5", "6"],
+      }
+      this.showConfig = true
    },
-
    undoUltimoPoint() {
      this.sendAction({ type: 'decPunt' })
      this.showSetVinto = false
    },
-
    doNuovoSet() {
      this.sendAction({ type: 'nuovoSet', team: this.setVintoTeam })
      this.showSetVinto = false
-      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 = ["1", "2", "3", "4", "5", "6"]
-      this.configData.formGuest = ["1", "2", "3", "4", "5", "6"]
+      this.configData = {
+        nomeHome: this.state.sp.nomi.home,
+        nomeGuest: this.state.sp.nomi.guest,
+        modalita: this.state.modalitaPartita,
+        formHome: ["1", "2", "3", "4", "5", "6"],
+        formGuest: ["1", "2", "3", "4", "5", "6"],
+      }
      this.showConfig = true
    },
-
    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.configData = {
+        nomeHome: this.state.sp.nomi.home,
+        nomeGuest: this.state.sp.nomi.guest,
+        modalita: this.state.modalitaPartita,
+        formHome: [...this.state.sp.form.home],
+        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 })
@@ -503,11 +309,7 @@ export default {
      this.sendAction({ type: 'setFormazione', team: 'guest', form: this.configData.formGuest })
      this.showConfig = false
    },
-
-    openCambiTeam() {
-      this.showCambiTeam = true
-    },
-
+    openCambiTeam() { this.showCambiTeam = true },
    openCambi(team) {
      this.showCambiTeam = false
      this.cambiTeam = team
@@ -515,76 +317,44 @@ export default {
      this.cambiError = ""
      this.showCambi = true
    },
-
    closeCambi() {
      this.showCambi = false
      this.cambiData = [{ in: "", out: "" }, { in: "", out: "" }]
      this.cambiError = ""
    },
-
    confermaCambi() {
      if (!this.cambiValid) return
      this.cambiError = ""
-
      const cambi = this.cambiData
        .filter(c => (c.in || "").trim() && (c.out || "").trim())
        .map(c => ({ in: c.in.trim(), out: c.out.trim() }))
-
-      // Simula i cambi in sequenza per validare
-      const formCorrente = this.state.sp.form[this.cambiTeam].map(v => String(v).trim())
-      const formSimulata = [...formCorrente]
-
+      const formSimulata = this.state.sp.form[this.cambiTeam].map(v => String(v).trim())
      for (const cambio of cambi) {
        if (!/^\d+$/.test(cambio.in) || !/^\d+$/.test(cambio.out)) {
-          this.cambiError = "I numeri dei giocatori devono essere cifre"
-          return
+          this.cambiError = "I numeri dei giocatori devono essere cifre"; return
        }
        if (cambio.in === cambio.out) {
-          this.cambiError = `Il giocatore ${cambio.in} non può sostituire sé stesso`
-          return
+          this.cambiError = `Il giocatore ${cambio.in} non può sostituire sé stesso`; return
        }
        if (formSimulata.includes(cambio.in)) {
-          this.cambiError = `Il giocatore ${cambio.in} è già in formazione`
-          return
+          this.cambiError = `Il giocatore ${cambio.in} è già in formazione`; return
        }
        if (!formSimulata.includes(cambio.out)) {
-          this.cambiError = `Il giocatore ${cambio.out} non è in formazione`
-          return
+          this.cambiError = `Il giocatore ${cambio.out} non è in formazione`; return
        }
-        const idx = formSimulata.indexOf(cambio.out)
-        formSimulata.splice(idx, 1, cambio.in)
+        formSimulata.splice(formSimulata.indexOf(cambio.out), 1, cambio.in)
      }
-
      this.sendAction({ type: 'confermaCambi', team: this.cambiTeam, cambi })
      this.closeCambi()
    },
-
    speak() {
-      let text = ''
-      if (this.state.sp.punt.home + this.state.sp.punt.guest === 0) {
-        text = "zero a zero"
-      } else if (this.state.sp.punt.home === this.state.sp.punt.guest) {
-        text = this.state.sp.punt.home + " pari"
-      } else {
-        if (this.state.sp.servHome) {
-          text = this.state.sp.punt.home + " a " + this.state.sp.punt.guest
-        } else {
-          text = this.state.sp.punt.guest + " a " + this.state.sp.punt.home
-        }
-      }
-      if (!this.wsConnected || !this.ws || this.ws.readyState !== WebSocket.OPEN) {
-        this.showErrorFeedback('Non connesso al server')
-        return
-      }
-
-      try {
-        this.ws.send(JSON.stringify({ type: 'speak', text }))
-      } catch (err) {
-        console.error('[Controller] Failed to send speak command:', err)
-        this.showErrorFeedback('Errore invio comando voce')
-      }
-    }
-  }
+      const { home, guest } = this.punt
+      const text = home + guest === 0 ? "zero a zero"
+        : home === guest ? `${home} pari`
+        : this.servHome ? `${home} a ${guest}` : `${guest} a ${home}`
+      this.sendWs({ type: 'speak', text })
+    },
+  },
 }
 </script>

@@ -7,22 +7,22 @@
          <span :style="{ 'float': 'left' }">
            {{ state.sp.nomi.home }}
            <span class="serv-slot">
-              <img v-show="state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
-            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.home }}</span>
+            <span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
          </span>
-          <span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.set.home }}</span>
+          <span class="mr3" :style="{ 'float': 'right' }">set {{ 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 v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
            <span class="serv-slot">
-              <img v-show="!state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
            {{ state.sp.nomi.guest }}
          </span>
-          <span class="ml3" :style="{ 'float': 'left' }">set {{ state.sp.set.guest }}</span>
+          <span class="ml3" :style="{ 'float': 'left' }">set {{ set.guest }}</span>
        </div>

        <span v-if="state.visuForm">
@@ -39,8 +39,8 @@
        </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 class="col punt home">{{ punt.home }}</div>
+            <div class="col punt guest">{{ punt.guest }}</div>
          </div>
        </span>
      </span>
@@ -51,22 +51,22 @@
          <span :style="{ 'float': 'left' }">
            {{ state.sp.nomi.guest }}
            <span class="serv-slot">
-              <img v-show="!state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
-            <span v-if="state.visuForm" class="score-inline">{{ state.sp.punt.guest }}</span>
+            <span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
          </span>
-          <span class="mr3" :style="{ 'float': 'right' }">set {{ state.sp.set.guest }}</span>
+          <span class="mr3" :style="{ 'float': 'right' }">set {{ 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 v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
            <span class="serv-slot">
-              <img v-show="state.sp.servHome" src="/serv.png" width="25" alt="Servizio" />
+              <img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
            {{ state.sp.nomi.home }}
          </span>
-          <span class="ml3" :style="{ 'float': 'left' }">set {{ state.sp.set.home }}</span>
+          <span class="ml3" :style="{ 'float': 'left' }">set {{ set.home }}</span>
        </div>

        <span v-if="state.visuForm">
@@ -83,8 +83,8 @@
        </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 class="col punt guest">{{ punt.guest }}</div>
+            <div class="col punt home">{{ punt.home }}</div>
          </div>
        </span>
      </span>
@@ -116,80 +116,15 @@
 </template>

 <script>
+import { createWsMixin } from '../wsMixin.js'
+
 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: [{ serv: 'home', r: [] }],
-          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"],
-          },
-        },
-      },
-    }
-  },
+  mixins: [createWsMixin('display')],
  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
-    }
  },
  computed: {
    stricciaStrip() {
@@ -197,8 +132,8 @@ export default {
      if (!currentSet) return { home: [], guest: [] }
      let h = 0, g = 0
      const home = [], guest = []
-      for (const scorer of currentSet.r) {
-        if (scorer === 'home') { h++; home.push(h); guest.push(' ') }
+      for (const scorer of currentSet.ris) {
+        if (scorer === 'h') { h++; home.push(h); guest.push(' ') }
        else               { g++; guest.push(g); home.push(' ') }
      }
      return { home, guest }
@@ -216,154 +151,25 @@ export default {
    },
  },
  methods: {
+    onWsMessage(msg) {
+      if (msg.type === 'speak') this.speakOnDisplay(msg.text)
+      else if (msg.type === 'error') console.error('[Display] Server error:', msg.message)
+    },
    isMobile() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    },
-    connectWebSocket() {
-      // Evita connessioni simultanee multiple.
-      if (this.isConnecting) {
-        console.log('[Display] Already connecting, skipping...')
-        return
-      }
-
-      // Chiude la connessione precedente, se presente.
-      if (this.ws) {
-        this.ws.onclose = null
-        this.ws.onerror = null
-        this.ws.onmessage = null
-        this.ws.onopen = null
-        try {
-          if (this.ws.readyState === WebSocket.OPEN) {
-            this.ws.close(1000, 'Reconnecting')
-          } else if (this.ws.readyState === WebSocket.CONNECTING) {
-            this.ws.close()
-          }
-        } catch (err) {
-          console.error('[Display] Error closing previous WebSocket:', err)
-        }
-        this.ws = null
-      }
-
-      this.isConnecting = true
-      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
-
-      // Permette di specificare un host WebSocket alternativo via query parameter
-      // Utile per scenari WSL2 o development remoto: ?wsHost=192.168.1.100:5173
-      const params = new URLSearchParams(location.search)
-      const defaultHost = (
-        location.hostname === 'localhost' || location.hostname === '::1'
-      )
-        ? `127.0.0.1${location.port ? `:${location.port}` : ''}`
-        : location.host
-      const wsHost = params.get('wsHost') || defaultHost
-      const wsUrl = `${protocol}//${wsHost}/ws`
-
-      console.log('[Display] Connecting to WebSocket:', wsUrl)
-
-      try {
-        this.ws = new WebSocket(wsUrl)
-      } catch (err) {
-        console.error('[Display] Failed to create WebSocket:', err)
-        this.isConnecting = false
-        this.scheduleReconnect()
-        return
-      }
-
-      this.ws.onopen = () => {
-        this.isConnecting = false
-        this.wsConnected = true
-        this.reconnectAttempts = 0
-        console.log('[Display] Connected to server')
-
-        // Registra il client come display solo con connessione effettivamente aperta.
-        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-          try {
-            this.ws.send(JSON.stringify({ type: 'register', role: 'display' }))
-          } catch (err) {
-            console.error('[Display] Failed to register:', err)
-          }
-        }
-      }
-
-      this.ws.onmessage = (event) => {
-        try {
-          const msg = JSON.parse(event.data)
-
-          if (msg.type === 'state') {
-            this.state = msg.state
-          } else if (msg.type === 'speak') {
-            this.speakOnDisplay(msg.text)
-          } else if (msg.type === 'error') {
-            console.error('[Display] Server error:', msg.message)
-          }
-        } catch (e) {
-          console.error('[Display] Error parsing message:', e)
-        }
-      }
-
-      this.ws.onclose = (event) => {
-        this.isConnecting = false
-        this.wsConnected = false
-        console.log('[Display] Disconnected from server', event.code, event.reason)
-
-        // Non riconnette durante HMR (codice 1001, "going away")
-        // ne in caso di chiusura pulita (codice 1000).
-        if (event.code === 1000 || event.code === 1001) {
-          console.log('[Display] Clean close, not reconnecting')
-          return
-        }
-
-        this.scheduleReconnect()
-      }
-
-      this.ws.onerror = (err) => {
-        console.error('[Display] WebSocket error:', err)
-        this.isConnecting = false
-        this.wsConnected = false
-      }
-    },
-    scheduleReconnect() {
-      // Evita pianificazioni multiple della riconnessione.
-      if (this.reconnectTimeout) {
-        return
-      }
-
-      // Applica backoff esponenziale: 1s, 2s, 4s, 8s, 16s, fino a 30s.
-      const delay = Math.min(
-        1000 * Math.pow(2, this.reconnectAttempts),
-        this.maxReconnectDelay
-      )
-      this.reconnectAttempts++
-
-      console.log(`[Display] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`)
-
-      this.reconnectTimeout = setTimeout(() => {
-        this.reconnectTimeout = null
-        this.connectWebSocket()
-      }, delay)
-    },
    speakOnDisplay(text) {
-      if (typeof text !== 'string' || !text.trim()) {
-        return
-      }
-      if (!('speechSynthesis' in window)) {
-        console.warn('[Display] speechSynthesis not supported')
-        return
-      }
-
+      if (typeof text !== 'string' || !text.trim() || !('speechSynthesis' in window)) return
      const utterance = new SpeechSynthesisUtterance(text.trim())
      const voices = window.speechSynthesis.getVoices()
-      const preferredVoice = voices.find((v) => v.name === 'Google italiano')
-        || voices.find((v) => v.lang && v.lang.toLowerCase().startsWith('it'))
-      if (preferredVoice) {
-        utterance.voice = preferredVoice
-      }
+      utterance.voice = voices.find(v => v.name === 'Google italiano')
+        || voices.find(v => v.lang?.toLowerCase().startsWith('it'))
+        || null
      utterance.lang = 'it-IT'
-
      window.speechSynthesis.cancel()
      window.speechSynthesis.speak(utterance)
-    }
-  }
+    },
+  },
 }
 </script>

@@ -1,3 +1,21 @@
+export function punteggio(striscia) {
+    let home = 0, guest = 0
+    for (const c of striscia.at(-1).ris) c === 'h' ? home++ : guest++
+    return { home, guest }
+}
+
+export function servizio(striscia) {
+    const set = striscia.at(-1)
+    return set.ris.length === 0 ? set.serv === 'h' : set.ris.at(-1) === 'h'
+}
+
+export function setVinti(striscia) {
+    return {
+        home:  striscia.filter(s => s.vinc === 'h').length,
+        guest: striscia.filter(s => s.vinc === 'g').length,
+    }
+}
+
 export function createInitialState() {
    return {
        order: true,
@@ -5,10 +23,7 @@ export function createInitialState() {
        visuStriscia: true,
        modalitaPartita: "3/5",
        sp: {
-            striscia: [{ serv: 'home', r: [] }],
-            servHome: true,
-            punt: { home: 0, guest: 0 },
-            set: { home: 0, guest: 0 },
+            striscia: [{ serv: 'h', ris: '', vinc: null }],
            nomi: { home: "Antoniana", guest: "Guest" },
            form: {
                home: ["1", "2", "3", "4", "5", "6"],
@@ -19,12 +34,9 @@ export function createInitialState() {
 }

 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
-
+    const { home: puntHome, guest: puntGuest } = punteggio(state.sp.striscia)
+    const sv = setVinti(state.sp.striscia)
+    const totSet = sv.home + sv.guest
    const isSetDecisivo = state.modalitaPartita === "2/3" ? totSet >= 2 : totSet >= 4
    const punteggioVittoria = isSetDecisivo ? 15 : 25

@@ -33,6 +45,13 @@ export function checkVittoria(state) {
    return false
 }

+export function checkVittoriaPartita(state) {
+    if (state.modalitaPartita === 'amichevole') return false
+    const setsToWin = state.modalitaPartita === "2/3" ? 2 : 3
+    const sv = setVinti(state.sp.striscia)
+    return sv.home >= setsToWin || sv.guest >= setsToWin
+}
+
 export function applyAction(state, action) {
    const s = structuredClone(state)

@@ -41,32 +60,30 @@ export function applyAction(state, action) {
            const team = action.team
            if (checkVittoria(s)) break

-            const cambioPalla = (team === "home") !== s.sp.servHome
-            s.sp.punt[team]++
-            s.sp.striscia.at(-1).r.push(team)
+            const servHome = servizio(s.sp.striscia)
+            const cambioPalla = (team === "home") !== servHome
+            s.sp.striscia.at(-1).ris += team === 'home' ? 'h' : 'g'

            if (cambioPalla) {
                s.sp.form[team].push(s.sp.form[team].shift())
            }
-
-            s.sp.servHome = team === "home"
            break
        }

        case "decPunt": {
            const currentSet = s.sp.striscia.at(-1)
-            if (currentSet.r.length === 0) break
+            if (currentSet.ris.length === 0) break

-            const lastScorer = currentSet.r[currentSet.r.length - 1]
-            const prevServer = currentSet.r.length >= 2
-                ? currentSet.r[currentSet.r.length - 2]
+            const lastScorerShort = currentSet.ris.at(-1)
+            const prevServerShort = currentSet.ris.length >= 2
+                ? currentSet.ris.at(-2)
                : currentSet.serv

-            const wasCambioPalla = lastScorer !== prevServer
+            const wasCambioPalla = lastScorerShort !== prevServerShort

-            currentSet.r.pop()
-            s.sp.punt[lastScorer]--
-            s.sp.servHome = prevServer === 'home'
+            currentSet.ris = currentSet.ris.slice(0, -1)
+
+            const lastScorer = lastScorerShort === 'h' ? 'home' : 'guest'

            if (wasCambioPalla) {
                s.sp.form[lastScorer].unshift(s.sp.form[lastScorer].pop())
@@ -76,10 +93,17 @@ export function applyAction(state, action) {

        case "incSet": {
            const team = action.team
-            if (s.sp.set[team] === 2) {
-                s.sp.set[team] = 0
+            const sv = setVinti(s.sp.striscia)
+            const count = sv[team]
+            const teamShort = team === 'home' ? 'h' : 'g'
+            if (count >= 2) {
+                // cicla a 0: rimuove le voci fantasma per questo team
+                s.sp.striscia = s.sp.striscia.filter(
+                    entry => !(entry._phantom && entry.vinc === teamShort)
+                )
            } else {
-                s.sp.set[team]++
+                // inserisce una voce fantasma prima dell'ultimo set (quello in corso)
+                s.sp.striscia.splice(-1, 0, { serv: teamShort, ris: '', vinc: teamShort, _phantom: true })
            }
            break
        }
@@ -87,11 +111,10 @@ export function applyAction(state, action) {
        case "nuovoSet": {
            const team = action.team
            if (team !== 'home' && team !== 'guest') break
-            s.sp.set[team]++
-            s.sp.punt.home = 0
-            s.sp.punt.guest = 0
-            s.sp.servHome = team === 'home'
-            s.sp.striscia.push({ serv: team, r: [] })
+            if (checkVittoriaPartita(s)) break
+            s.sp.striscia.at(-1).vinc = team === 'home' ? 'h' : 'g'
+            if (checkVittoriaPartita(s)) break
+            s.sp.striscia.push({ serv: team === 'home' ? 'h' : 'g', ris: '', vinc: null })
            s.sp.form = {
                home: ["1", "2", "3", "4", "5", "6"],
                guest: ["1", "2", "3", "4", "5", "6"],
@@ -100,24 +123,21 @@ export function applyAction(state, action) {
        }

        case "cambiaPalla": {
-            if (s.sp.punt.home === 0 && s.sp.punt.guest === 0) {
-                s.sp.servHome = !s.sp.servHome
-                s.sp.striscia.at(-1).serv = s.sp.servHome ? 'home' : 'guest'
+            const currentSet = s.sp.striscia.at(-1)
+            if (currentSet.ris.length === 0) {
+                currentSet.serv = currentSet.serv === 'h' ? 'g' : 'h'
            }
            break
        }

        case "resetta": {
            s.visuForm = false
-            s.sp.punt.home = 0
-            s.sp.punt.guest = 0
-            s.sp.set.home = 0
-            s.sp.set.guest = 0
+            const servIniziale = s.sp.striscia[0]?.serv ?? 'h'
+            s.sp.striscia = [{ serv: servIniziale, ris: '', vinc: null }]
            s.sp.form = {
                home: ["1", "2", "3", "4", "5", "6"],
                guest: ["1", "2", "3", "4", "5", "6"],
            }
-            s.sp.striscia = [{ serv: s.sp.servHome ? 'home' : 'guest', r: [] }]
            break
        }

@@ -1,20 +1,34 @@
 import { networkInterfaces } from 'os'
+import { readFileSync, existsSync } from 'fs'
+import { execSync } from 'child_process'
+
+function isWSL() {
+  try {
+    return existsSync('/proc/sys/kernel/osrelease') &&
+      readFileSync('/proc/sys/kernel/osrelease', 'utf8').toLowerCase().includes('microsoft')
+  } catch { return false }
+}

 export function getNetworkIPs() {
+  if (isWSL()) {
+    try {
+      const out = execSync(
+        'powershell.exe -NoProfile -Command "Get-NetIPAddress -AddressFamily IPv4 | Select-Object -ExpandProperty IPAddress"',
+        { timeout: 3000 }
+      )
+      return out.toString().trim().split('\n')
+        .map(s => s.trim())
+        .filter(ip => ip && !ip.startsWith('127.') && !ip.startsWith('169.254.') && !ip.startsWith('172.'))
+    } catch { return [] }
+  }
+
  const nets = networkInterfaces()
  const networkIPs = []
-
  for (const name of Object.keys(nets)) {
    for (const net of nets[name]) {
-      if (net.family === 'IPv4' &&
-        !net.internal &&
-        !net.address.startsWith('172.17.') &&
-        !net.address.startsWith('172.18.')) {
-        networkIPs.push(net.address)
+      if (net.family === 'IPv4' && !net.internal) networkIPs.push(net.address)
    }
  }
-  }
-
  return networkIPs
 }

@@ -26,9 +40,10 @@ export function printServerInfo(port = 3000) {
  console.log(`   Controller: http://127.0.0.1:${port}/controller`)

  if (networkIPs.length > 0) {
-    console.log(`\n   Controller da dispositivi remoti:`)
+    console.log(`\n   Da dispositivi remoti:`)
    networkIPs.forEach(ip => {
-      console.log(`   http://${ip}:${port}/controller`)
+      console.log(`   Display:    http://${ip}:${port}/display`)
+      console.log(`   Controller: http://${ip}:${port}/controller`)
    })
  }

@@ -0,0 +1,146 @@
+import { createInitialState, punteggio, servizio, setVinti } from './gameState.js'
+
+export function createWsMixin(role) {
+    return {
+        data() {
+            return {
+                ws: null,
+                wsConnected: false,
+                isConnecting: false,
+                reconnectTimeout: null,
+                reconnectAttempts: 0,
+                maxReconnectDelay: 30000,
+                state: createInitialState(),
+            }
+        },
+        computed: {
+            punt()     { return punteggio(this.state.sp.striscia) },
+            servHome() { return servizio(this.state.sp.striscia) },
+            set()      { return setVinti(this.state.sp.striscia) },
+        },
+        mounted() {
+            this.connectWebSocket()
+            if (import.meta.hot) {
+                import.meta.hot.on('vite:beforeUpdate', () => {
+                    if (this.reconnectTimeout) {
+                        clearTimeout(this.reconnectTimeout)
+                        this.reconnectTimeout = null
+                    }
+                })
+            }
+        },
+        beforeUnmount() {
+            if (this.reconnectTimeout) {
+                clearTimeout(this.reconnectTimeout)
+                this.reconnectTimeout = null
+            }
+            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, 'Component unmounting')
+                    } else if (this.ws.readyState === WebSocket.CONNECTING) {
+                        this.ws.close()
+                    }
+                } catch (err) {
+                    console.error(`[${role}] Error closing WebSocket:`, err)
+                }
+                this.ws = null
+            }
+        },
+        methods: {
+            connectWebSocket() {
+                if (this.isConnecting) return
+                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(`[${role}] Error closing previous WebSocket:`, err)
+                    }
+                    this.ws = null
+                }
+
+                this.isConnecting = true
+                const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'
+                const params = new URLSearchParams(location.search)
+                const defaultHost = (location.hostname === 'localhost' || location.hostname === '::1')
+                    ? `127.0.0.1${location.port ? `:${location.port}` : ''}`
+                    : location.host
+                const wsUrl = `${protocol}//${params.get('wsHost') || defaultHost}/ws`
+
+                try {
+                    this.ws = new WebSocket(wsUrl)
+                } catch (err) {
+                    console.error(`[${role}] Failed to create WebSocket:`, err)
+                    this.isConnecting = false
+                    this.scheduleReconnect()
+                    return
+                }
+
+                this.ws.onopen = () => {
+                    this.isConnecting = false
+                    this.wsConnected = true
+                    this.reconnectAttempts = 0
+                    try {
+                        this.ws?.send(JSON.stringify({ type: 'register', role }))
+                    } catch (err) {
+                        console.error(`[${role}] Failed to register:`, err)
+                    }
+                }
+
+                this.ws.onmessage = (event) => {
+                    try {
+                        const msg = JSON.parse(event.data)
+                        if (msg.type === 'state') this.state = msg.state
+                        else this.onWsMessage?.(msg)
+                    } catch (e) {
+                        console.error(`[${role}] Error parsing message:`, e)
+                    }
+                }
+
+                this.ws.onclose = (event) => {
+                    this.isConnecting = false
+                    this.wsConnected = false
+                    if (event.code !== 1000 && event.code !== 1001) this.scheduleReconnect()
+                }
+
+                this.ws.onerror = () => {
+                    this.isConnecting = false
+                    this.wsConnected = false
+                }
+            },
+
+            scheduleReconnect() {
+                if (this.reconnectTimeout) return
+                const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), this.maxReconnectDelay)
+                this.reconnectAttempts++
+                this.reconnectTimeout = setTimeout(() => {
+                    this.reconnectTimeout = null
+                    this.connectWebSocket()
+                }, delay)
+            },
+
+            sendWs(msg) {
+                if (!this.wsConnected || this.ws?.readyState !== WebSocket.OPEN) return false
+                try {
+                    this.ws.send(JSON.stringify(msg))
+                    return true
+                } catch (err) {
+                    console.error(`[${role}] Failed to send:`, err)
+                    return false
+                }
+            },
+        },
+    }
+}
@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest'
-import { createInitialState, applyAction, checkVittoria } from '../../src/gameState.js'
+import { createInitialState, applyAction, checkVittoria, checkVittoriaPartita } from '../../src/gameState.js'

 describe('Game Logic (gameState.js)', () => {
    let state
@@ -33,8 +33,8 @@ describe('Game Logic (gameState.js)', () => {

        it('dovrebbe avere la striscia iniziale con un set vuoto', () => {
            expect(state.sp.striscia).toHaveLength(1)
-            expect(state.sp.striscia[0].serv).toBe('home')
-            expect(state.sp.striscia[0].r).toEqual([])
+            expect(state.sp.striscia[0].serv).toBe('h')
+            expect(state.sp.striscia[0].ris).toBe('')
        })

        it('dovrebbe avere modalità 3/5 di default', () => {
@@ -113,19 +113,19 @@ describe('Game Logic (gameState.js)', () => {

        it('dovrebbe aggiornare la striscia per punto Home', () => {
            const s = applyAction(state, { type: 'incPunt', team: 'home' })
-            expect(s.sp.striscia.at(-1).r).toEqual(['home'])
+            expect(s.sp.striscia.at(-1).ris).toBe('h')
        })

        it('dovrebbe aggiornare la striscia per punto Guest', () => {
            const s = applyAction(state, { type: 'incPunt', team: 'guest' })
-            expect(s.sp.striscia.at(-1).r).toEqual(['guest'])
+            expect(s.sp.striscia.at(-1).ris).toBe('g')
        })

        it('dovrebbe registrare scorer nella striscia', () => {
            let s = applyAction(state, { type: 'incPunt', team: 'home' })
            s = applyAction(s, { type: 'incPunt', team: 'guest' })
            s = applyAction(s, { type: 'incPunt', team: 'home' })
-            expect(s.sp.striscia.at(-1).r).toEqual(['home', 'guest', 'home'])
+            expect(s.sp.striscia.at(-1).ris).toBe('hgh')
        })

        it('non dovrebbe incrementare i punti dopo vittoria', () => {
@@ -180,7 +180,7 @@ describe('Game Logic (gameState.js)', () => {
        it('dovrebbe ripristinare la striscia', () => {
            const s1 = applyAction(state, { type: 'incPunt', team: 'home' })
            const s2 = applyAction(s1, { type: 'decPunt' })
-            expect(s2.sp.striscia.at(-1).r).toEqual([])
+            expect(s2.sp.striscia.at(-1).ris).toBe('')
        })

        it('dovrebbe gestire undo multipli in sequenza', () => {
@@ -248,14 +248,14 @@ describe('Game Logic (gameState.js)', () => {
        it('dovrebbe aggiungere un nuovo set vuoto alla striscia', () => {
            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
            expect(s.sp.striscia).toHaveLength(2)
-            expect(s.sp.striscia.at(-1).r).toEqual([])
-            expect(s.sp.striscia.at(-1).serv).toBe('home')
+            expect(s.sp.striscia.at(-1).ris).toBe('')
+            expect(s.sp.striscia.at(-1).serv).toBe('h')
        })

        it('dovrebbe conservare il set precedente nella striscia', () => {
-            state.sp.striscia[0].r = ['home', 'guest', 'home']
+            state.sp.striscia[0].ris = 'hgh'
            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
-            expect(s.sp.striscia[0].r).toEqual(['home', 'guest', 'home'])
+            expect(s.sp.striscia[0].ris).toBe('hgh')
        })

        it('dovrebbe resettare le formazioni', () => {
@@ -271,6 +271,66 @@ describe('Game Logic (gameState.js)', () => {
            expect(s.sp.set.home).toBe(0)
            expect(s.sp.set.guest).toBe(0)
        })
+
+        it('in 2/3 dovrebbe registrare il set vincente senza resettare il punteggio', () => {
+            state.modalitaPartita = '2/3'
+            state.sp.set.home = 1
+            state.sp.punt.home = 25
+            state.sp.punt.guest = 18
+            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
+            expect(s.sp.set.home).toBe(2)
+            expect(s.sp.punt.home).toBe(25)
+            expect(s.sp.punt.guest).toBe(18)
+        })
+
+        it('in 3/5 dovrebbe registrare il set vincente senza resettare il punteggio', () => {
+            state.modalitaPartita = '3/5'
+            state.sp.set.home = 2
+            state.sp.punt.home = 25
+            state.sp.punt.guest = 20
+            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
+            expect(s.sp.set.home).toBe(3)
+            expect(s.sp.punt.home).toBe(25)
+            expect(s.sp.punt.guest).toBe(20)
+        })
+
+        it('dovrebbe ignorare nuovoSet se la partita è già finita', () => {
+            state.modalitaPartita = '2/3'
+            state.sp.set.home = 2
+            const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
+            expect(s.sp.set.home).toBe(2)
+        })
+    })
+
+    // =============================================
+    // VITTORIA PARTITA (checkVittoriaPartita)
+    // =============================================
+    describe('checkVittoriaPartita', () => {
+        it('in 2/3 restituisce false se nessuno ha 2 set', () => {
+            state.modalitaPartita = '2/3'
+            state.sp.set.home = 1
+            state.sp.set.guest = 0
+            expect(checkVittoriaPartita(state)).toBe(false)
+        })
+
+        it('in 2/3 restituisce true se home ha 2 set', () => {
+            state.modalitaPartita = '2/3'
+            state.sp.set.home = 2
+            expect(checkVittoriaPartita(state)).toBe(true)
+        })
+
+        it('in 3/5 restituisce false se nessuno ha 3 set', () => {
+            state.modalitaPartita = '3/5'
+            state.sp.set.home = 2
+            state.sp.set.guest = 2
+            expect(checkVittoriaPartita(state)).toBe(false)
+        })
+
+        it('in 3/5 restituisce true se guest ha 3 set', () => {
+            state.modalitaPartita = '3/5'
+            state.sp.set.guest = 3
+            expect(checkVittoriaPartita(state)).toBe(true)
+        })
    })

    // =============================================
@@ -661,10 +721,10 @@ describe('Game Logic (gameState.js)', () => {
        })

        it('dovrebbe resettare la striscia a un set vuoto', () => {
-            state.sp.striscia = [{ serv: 'home', r: ['home', 'guest', 'home'] }, { serv: 'home', r: ['guest'] }]
+            state.sp.striscia = [{ serv: 'h', ris: 'hgh' }, { serv: 'h', ris: 'g' }]
            const s = applyAction(state, { type: 'resetta' })
            expect(s.sp.striscia).toHaveLength(1)
-            expect(s.sp.striscia[0].r).toEqual([])
+            expect(s.sp.striscia[0].ris).toBe('')
        })

        it('dovrebbe impostare visuForm a false', () => {
Author	SHA1	Message	Date
davide	d322809682	docs(readme): rimuovi sezione shortcuts tastiera non più implementata	2026-06-20 15:53:04 +02:00
davide	6b37fd299f	feat: apri config automaticamente dopo il reset Dopo aver azzerato la partita il dialog di configurazione si apre subito, con nomi e modalità correnti e formazioni resettate ai default — stesso comportamento già presente al termine di ogni set.	2026-06-20 15:51:11 +02:00
davide	87ce0e26b8	feat: modalità amichevole e fix URL remoti in dev (WSL2) - Aggiunge modalità "Amichevole" in config: i set si vincono normalmente ma la partita non termina mai automaticamente (checkVittoriaPartita restituisce false), consentendo di giocare set illimitati - Dev server ora espone su tutte le interfacce (vite --host) - printServerInfo mostra Display + Controller per dispositivi remoti - Su WSL2 getNetworkIPs() interroga PowerShell per ottenere gli IP Windows reali invece degli IP interni WSL (172.x)	2026-06-20 15:43:03 +02:00
davide	38703116ff	refactor: deriva punt/set/servHome dalla striscia, estrai mixin WebSocket La striscia è ora l'unica source of truth: punt, set vinti e servizio vengono calcolati via helper puri (punteggio/servizio/setVinti) invece di essere mantenuti come campi ridondanti nello stato. Il boilerplate WebSocket (~150 righe identiche in entrambi i componenti) è estratto in src/wsMixin.js con createWsMixin(role); i componenti diventano solo logica specifica del loro ruolo.	2026-06-20 15:23:58 +02:00
davide	8e2f3d759d	docs(claude): riscrivi CLAUDE.md in italiano con istruzioni operative Traduzione completa in italiano, aggiunta sezione Deploy con riferimento al registry Gitea self-hosted, sezione Istruzioni operative con linee guida per nuove funzionalità e convenzioni di naming. Inclusa anche la configurazione plugin Claude Code (.claude/settings.json).	2026-06-20 14:57:20 +02:00
davide	6aeeb47f16	chore(docker): usa immagine registry 2.0.0 invece di build locale	2026-05-13 10:21:49 +02:00
davide	a094110be3	feat: blocca partita a fine match e mostra dialog dedicato Aggiunge checkVittoriaPartita per rilevare la vittoria della partita (2 set in 2/3, 3 set in 3/5). nuovoSet ora registra il set vincente senza resettare il punteggio quando la partita è finita. Il controller mostra "PARTITA FINITA" al posto di "SET VINTO" con solo il tasto CHIUDI.	2026-05-13 10:06:43 +02:00
davide	756f78358c	Merge branch 'issue#15'	2026-05-13 09:55:16 +02:00
davide	fb4177056f	chore(docker): usa build locale invece di immagine remota per dev	2026-05-13 09:45:16 +02:00
davide	303c548ab8	refactor(striscia): compatta struttura dati da array a stringa Sostituisce r: ['home','guest',...] con ris: 'hg...' e i valori serv 'home'/'guest' con 'h'/'g'. Nessun cambiamento funzionale.	2026-05-13 09:35:24 +02:00
davide	43e49c4c66	chore(docker): sostituisce named volume con bind mount nella root del repository	2026-05-12 18:55:55 +02:00