5 Commits

Author SHA1 Message Date
davide 5f9e37062c fix(controller): aggiunge tasto indietro nel dialog set vinto
Permette di annullare l'ultimo punto (decPunt) nel caso in cui
l'ultimo punto del set sia stato assegnato per errore.
2026-05-12 13:26:19 +02:00
davide 3188994299 feat(controller): dialog set vinto con transizione automatica al set successivo
Quando una squadra raggiunge il punteggio di vittoria (25 con +2 di
scarto, 15 nel set decisivo), il controller mostra un dialog "SET VINTO"
con il nome della squadra vincente.

Alla conferma: invia l'azione nuovoSet (incrementa il set, azzera punti,
striscia, storico servizio e formazioni) e apre automaticamente il dialog
di configurazione per inserire le formazioni del set successivo.
2026-05-12 13:19:02 +02:00
davide eec4ef0526 chore: aggiunge CLAUDE.md con architettura e comandi del progetto 2026-05-12 12:22:42 +02:00
davide 16a3fb912a fix(gameState): striscia simmetrica + structuredClone + cambioPalla dedup
- Inizializza striscia con { home: [0], guest: [0] } invece di usare
  [" "] per il team non servente; corregge anche reset e cambiaPalla.
- Sostituisce JSON.parse/stringify con structuredClone (nativo, più veloce).
- Calcola cambioPalla una sola volta in incPunt invece di due volte.
2026-05-12 12:22:28 +02:00
davide 2fe1808fc9 refactor(server): porta singola, /display e /controller come percorsi
Unifica i due server Express (display :3000, controller :3001) in un
unico processo su PORT (default 3000). Le route /display e /controller
servono rispettivamente index.html e controller.html.

In sviluppo elimina il server proxy su :3001; il plugin Vite riscrive
/display → / e /controller → /controller.html internamente.
printServerInfo aggiornata alla firma a porta singola.
2026-05-12 12:22:50 +02:00
8 changed files with 230 additions and 196 deletions
+66
View File
@@ -0,0 +1,66 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Purpose
**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. A terminal CLI (`cli.js`) provides an alternative controller interface.
## Commands
```bash
npm run dev # Vite dev server — display: :5173, controller: :5173/controller.html (proxied on :3001)
npm run serve # Build + run production — display: :3000, controller: :3001
npm run cli # Terminal controller (connects to production :3000)
npm run cli:dev # Terminal controller (connects to dev :5173)
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
```
## Architecture
```
Controller (Vue) ──WebSocket──┐
Display (Vue) ──WebSocket──┤── websocket-handler.js ── gameState.js
CLI (Node) ──WebSocket──┘
```
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 `JSON.parse/stringify`)
- `checkVittoria(state)` — volleyball win conditions (25-point sets with 2-point margin, 15-point final set)
`src/websocket-handler.js` receives actions, validates that the sender is a registered controller (not just a display), calls `applyAction`, then broadcasts the new state to all clients.
Two production HTTP servers are started by `server.js` (Express): port 3000 serves `dist/index.html` (display), port 3001 serves `dist/controller.html` (controller). Both share a single WebSocket endpoint at `/ws`.
In development, `vite-plugin-websocket.js` is a custom Vite plugin that embeds the WebSocket server inside the Vite dev server and proxies port 3001 traffic back to Vite.
## Key Design Constraints
- **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.
## Test Layout
| Suite | Path | 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`.
## Simplification Goals (Current Work)
The intended architecture is: **one host acts as both WebSocket server and display; one connected device acts as controller**. Complexity reduction should be evaluated against this constraint — anything that supports multi-controller scenarios, complex client topologies, or unneeded abstractions is a candidate for removal.
+13 -52
View File
@@ -9,32 +9,26 @@ import { printServerInfo } from './src/server-utils.js'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
// --- Configurazione del server ---
const PORT = process.env.PORT || 3000
const distDir = join(__dirname, 'dist')
const DISPLAY_PORT = process.env.PORT || 3000
const CONTROLLER_PORT = process.env.CONTROLLER_PORT || 3001
const app = express()
// ========================================
// Server Display (porta principale)
// ========================================
app.use(express.static(distDir, { index: false }))
const displayApp = express()
// Espone i file generati dalla build di Vite.
displayApp.use(express.static(join(__dirname, 'dist')))
// Fallback per SPA: restituisce `index.html` per tutte le route.
displayApp.get(/.*/, (_req, res) => {
res.sendFile(join(__dirname, 'dist', 'index.html'))
app.get(['/', '/display', '/display/*splat'], (_req, res) => {
res.sendFile(join(distDir, 'index.html'))
})
const displayServer = createServer(displayApp)
app.get(['/controller', '/controller/*splat'], (_req, res) => {
res.sendFile(join(distDir, 'controller.html'))
})
// Inizializza il server WebSocket condiviso.
const server = createServer(app)
const wss = new WebSocketServer({ noServer: true })
setupWebSocketHandler(wss)
displayServer.on('upgrade', (request, socket, head) => {
server.on('upgrade', (request, socket, head) => {
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
if (pathname === '/ws') {
wss.handleUpgrade(request, socket, head, (ws) => {
@@ -45,39 +39,6 @@ displayServer.on('upgrade', (request, socket, head) => {
}
})
displayServer.listen(DISPLAY_PORT, '0.0.0.0', () => {
console.log(`[Display] Server running on port ${DISPLAY_PORT}`)
})
// ========================================
// Server Controller (porta separata)
// ========================================
const controllerApp = express()
// Espone gli stessi file statici della build.
// IMPORTANTE: { index: false } impedisce di servire index.html (il display) sulla root.
controllerApp.use(express.static(join(__dirname, 'dist'), { index: false }))
// Fallback: restituisce `controller.html` per tutte le route.
controllerApp.get(/.*/, (_req, res) => {
res.sendFile(join(__dirname, 'dist', 'controller.html'))
})
const controllerServer = createServer(controllerApp)
// Gestisce l'upgrade WebSocket anche sulla porta del controller.
controllerServer.on('upgrade', (request, socket, head) => {
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
if (pathname === '/ws') {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request)
})
} else {
socket.destroy()
}
})
controllerServer.listen(CONTROLLER_PORT, '0.0.0.0', () => {
printServerInfo(DISPLAY_PORT, CONTROLLER_PORT)
server.listen(PORT, '0.0.0.0', () => {
printServerInfo(PORT)
})
+62
View File
@@ -78,6 +78,19 @@
</div>
</div>
<!-- Finestra set vinto -->
<div class="overlay" v-if="showSetVinto">
<div class="dialog">
<div class="dialog-title">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-buttons">
<button class="btn btn-cancel" @click="undoUltimoPoint()">INDIETRO</button>
<button class="btn btn-confirm" @click="doNuovoSet()">VAI AL SET SUCCESSIVO</button>
</div>
</div>
</div>
<!-- Finestra configurazione -->
<div class="overlay" v-if="showConfig" @click.self="showConfig = false">
<div class="dialog dialog-config">
@@ -187,6 +200,8 @@ export default {
reconnectAttempts: 0,
maxReconnectDelay: 30000,
confirmReset: false,
showSetVinto: false,
setVintoTeam: null,
showConfig: false,
showCambiTeam: false,
showCambi: false,
@@ -227,6 +242,15 @@ export default {
isPunteggioZeroZero() {
return this.state.sp.punt.home === 0 && this.state.sp.punt.guest === 0
},
squadraVincente() {
const { home, guest } = this.state.sp.punt
const totSet = this.state.sp.set.home + this.state.sp.set.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
},
cambiValid() {
let hasComplete = false
let allValid = true
@@ -240,6 +264,14 @@ export default {
return allValid && hasComplete
}
},
watch: {
squadraVincente(val) {
if (val && !this.showSetVinto) {
this.setVintoTeam = val
this.showSetVinto = true
}
},
},
mounted() {
this.connectWebSocket()
@@ -440,6 +472,22 @@ export default {
this.confirmReset = false
},
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.showConfig = true
},
openConfig() {
this.configData.nomeHome = this.state.sp.nomi.home
this.configData.nomeGuest = this.state.sp.nomi.guest
@@ -747,6 +795,20 @@ export default {
border: 1px solid rgba(255,255,255,0.12);
}
.dialog-winner {
font-size: 28px;
font-weight: 900;
text-align: center;
margin-bottom: 8px;
}
.dialog-subtitle {
font-size: 13px;
color: #aaa;
text-align: center;
margin-bottom: 4px;
}
.dialog-config {
max-height: 85vh;
overflow-y: auto;
+21 -15
View File
@@ -10,7 +10,7 @@ export function createInitialState() {
visuStriscia: true,
modalitaPartita: "3/5",
sp: {
striscia: { home: [0], guest: [" "] },
striscia: { home: [0], guest: [0] },
servHome: true,
punt: { home: 0, guest: 0 },
set: { home: 0, guest: 0 },
@@ -51,19 +51,15 @@ export function checkVittoria(state) {
}
export function applyAction(state, action) {
// Esegue un deep clone per evitare mutazioni indesiderate dello stato lato server.
// Restituisce sempre un nuovo oggetto di stato.
const s = JSON.parse(JSON.stringify(state))
const s = structuredClone(state)
switch (action.type) {
case "incPunt": {
const team = action.team
if (checkVittoria(s)) break
s.sp.storicoServizio.push({
servHome: s.sp.servHome,
cambioPalla: (team === "home" && !s.sp.servHome) || (team === "guest" && s.sp.servHome),
})
const cambioPalla = (team === "home") !== s.sp.servHome
s.sp.storicoServizio.push({ servHome: s.sp.servHome, cambioPalla })
s.sp.punt[team]++
if (team === "home") {
@@ -74,7 +70,6 @@ export function applyAction(state, action) {
s.sp.striscia.home.push(" ")
}
const cambioPalla = (team === "home" && !s.sp.servHome) || (team === "guest" && s.sp.servHome)
if (cambioPalla) {
s.sp.form[team].push(s.sp.form[team].shift())
}
@@ -115,12 +110,25 @@ export function applyAction(state, action) {
break
}
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.striscia = { home: [0], guest: [0] }
s.sp.storicoServizio = []
s.sp.form = {
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
}
break
}
case "cambiaPalla": {
if (s.sp.punt.home === 0 && s.sp.punt.guest === 0) {
s.sp.servHome = !s.sp.servHome
s.sp.striscia = s.sp.servHome
? { home: [0], guest: [" "] }
: { home: [" "], guest: [0] }
s.sp.striscia = { home: [0], guest: [0] }
}
break
}
@@ -135,9 +143,7 @@ export function applyAction(state, action) {
home: ["1", "2", "3", "4", "5", "6"],
guest: ["1", "2", "3", "4", "5", "6"],
}
s.sp.striscia = s.sp.servHome
? { home: [0], guest: [" "] }
: { home: [" "], guest: [0] }
s.sp.striscia = { home: [0], guest: [0] }
s.sp.storicoServizio = []
break
}
+4 -14
View File
@@ -1,16 +1,11 @@
import { networkInterfaces } from 'os'
/**
* Restituisce gli indirizzi IP di rete del sistema, escludendo loopback e bridge Docker.
* @returns {string[]} Elenco degli indirizzi IP disponibili.
*/
export function getNetworkIPs() {
const nets = networkInterfaces()
const networkIPs = []
for (const name of Object.keys(nets)) {
for (const net of nets[name]) {
// Esclude loopback (127.0.0.1), indirizzi non IPv4 e bridge Docker (172.17.x.x, 172.18.x.x).
if (net.family === 'IPv4' &&
!net.internal &&
!net.address.startsWith('172.17.') &&
@@ -23,22 +18,17 @@ export function getNetworkIPs() {
return networkIPs
}
/**
* Stampa il riepilogo di avvio del server con gli URL di accesso.
* @param {number} displayPort - Porta del display.
* @param {number} controllerPort - Porta del controller.
*/
export function printServerInfo(displayPort = 5173, controllerPort = 3001) {
export function printServerInfo(port = 3000) {
const networkIPs = getNetworkIPs()
console.log(`\nSegnapunti Server`)
console.log(` Display: http://127.0.0.1:${displayPort}/`)
console.log(` Controller: http://127.0.0.1:${controllerPort}/`)
console.log(` Display: http://127.0.0.1:${port}/display`)
console.log(` Controller: http://127.0.0.1:${port}/controller`)
if (networkIPs.length > 0) {
console.log(`\n Controller da dispositivi remoti:`)
networkIPs.forEach(ip => {
console.log(` http://${ip}:${controllerPort}/`)
console.log(` http://${ip}:${port}/controller`)
})
}
+46
View File
@@ -231,6 +231,52 @@ describe('Game Logic (gameState.js)', () => {
})
})
// =============================================
// NUOVO SET (nuovoSet)
// =============================================
describe('nuovoSet', () => {
it('dovrebbe incrementare il set della squadra vincente', () => {
state.sp.punt.home = 25
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.set.home).toBe(1)
expect(s.sp.set.guest).toBe(0)
})
it('dovrebbe azzerare i punti', () => {
state.sp.punt.home = 25
state.sp.punt.guest = 10
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.punt.home).toBe(0)
expect(s.sp.punt.guest).toBe(0)
})
it('dovrebbe resettare la striscia', () => {
state.sp.punt.home = 25
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.striscia).toEqual({ home: [0], guest: [0] })
})
it('dovrebbe resettare lo storico servizio', () => {
state.sp.storicoServizio = [{ servHome: true, cambioPalla: false }]
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.storicoServizio).toEqual([])
})
it('dovrebbe resettare le formazioni', () => {
state.sp.form.home = ['7', '8', '9', '10', '11', '12']
state.sp.form.guest = ['7', '8', '9', '10', '11', '12']
const s = applyAction(state, { type: 'nuovoSet', team: 'home' })
expect(s.sp.form.home).toEqual(['1', '2', '3', '4', '5', '6'])
expect(s.sp.form.guest).toEqual(['1', '2', '3', '4', '5', '6'])
})
it('dovrebbe ignorare team non valido', () => {
const s = applyAction(state, { type: 'nuovoSet', team: 'invalid' })
expect(s.sp.set.home).toBe(0)
expect(s.sp.set.guest).toBe(0)
})
})
// =============================================
// CAMBIO PALLA (cambiaPalla)
// =============================================
+9 -9
View File
@@ -102,23 +102,23 @@ describe('Server Utils', () => {
// printServerInfo
// =============================================
describe('printServerInfo', () => {
it('dovrebbe stampare le porte corrette (default)', () => {
it('dovrebbe stampare la porta di default (3000)', () => {
os.networkInterfaces.mockReturnValue({})
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo()
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('5173')
expect(allLogs).toContain('3001')
expect(allLogs).toContain('3000')
expect(allLogs).toContain('/display')
expect(allLogs).toContain('/controller')
consoleSpy.mockRestore()
})
it('dovrebbe stampare le porte personalizzate', () => {
it('dovrebbe stampare la porta personalizzata', () => {
os.networkInterfaces.mockReturnValue({})
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, 4000)
printServerInfo(8080)
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('3000')
expect(allLogs).toContain('4000')
expect(allLogs).toContain('8080')
consoleSpy.mockRestore()
})
@@ -129,7 +129,7 @@ describe('Server Utils', () => {
]
})
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, 3001)
printServerInfo(3000)
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).toContain('192.168.1.50')
expect(allLogs).toContain('remoti')
@@ -139,7 +139,7 @@ describe('Server Utils', () => {
it('non dovrebbe mostrare sezione remoti se nessun IP di rete', () => {
os.networkInterfaces.mockReturnValue({})
const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
printServerInfo(3000, 3001)
printServerInfo(3000)
const allLogs = consoleSpy.mock.calls.map(c => c[0]).join('\n')
expect(allLogs).not.toContain('remoti')
consoleSpy.mockRestore()
+9 -106
View File
@@ -1,30 +1,23 @@
import { WebSocketServer } from 'ws'
import { createServer as createHttpServer, request as httpRequest } from 'http'
import { setupWebSocketHandler } from './src/websocket-handler.js'
import { printServerInfo } from './src/server-utils.js'
const CONTROLLER_PORT = 3001
const DEV_PROXY_HOST = process.env.DEV_PROXY_HOST || '127.0.0.1'
/**
* Plugin Vite che integra un server WebSocket per la gestione dello stato di gioco
* e un server separato sulla porta 3001 per il controller.
* @returns {import('vite').Plugin}
*/
export default function websocketPlugin() {
return {
name: 'vite-plugin-websocket',
configureServer(server) {
// Inizializza un server WebSocket collegato al server HTTP di Vite.
const wss = new WebSocketServer({ noServer: true })
// Registra i gestori WebSocket con la logica di gioco.
setupWebSocketHandler(wss)
// Intercetta le richieste di upgrade WebSocket solo sul path /ws.
// Rewrite /display → / (index.html) e /controller → /controller.html
server.middlewares.use((req, _res, next) => {
if (req.url === '/display' || req.url === '/display/') req.url = '/'
else if (req.url === '/controller' || req.url === '/controller/') req.url = '/controller.html'
next()
})
server.httpServer.on('upgrade', (request, socket, head) => {
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
if (pathname === '/ws') {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request)
@@ -32,100 +25,10 @@ export default function websocketPlugin() {
}
})
// Avvia un server separato per il controller sulla porta 3001.
server.httpServer.once('listening', () => {
const viteAddr = server.httpServer.address()
const vitePort = viteAddr.port
startControllerDevServer(vitePort, wss)
setTimeout(() => printServerInfo(vitePort, CONTROLLER_PORT), 100)
const { port } = server.httpServer.address()
setTimeout(() => printServerInfo(port), 100)
})
}
}
}
/**
* Avvia il server di sviluppo per il controller.
* Fa da proxy verso il dev server di Vite per moduli ES, HMR, e asset.
*/
function startControllerDevServer(vitePort, wss) {
const controllerServer = createHttpServer((req, res) => {
// Se richiesta alla root, riscrive verso controller.html
let targetPath = req.url
if (targetPath === '/' || targetPath === '') {
targetPath = '/controller.html'
}
// Proxy verso il dev server di Vite
const proxyReq = httpRequest(
{
hostname: DEV_PROXY_HOST,
port: vitePort,
path: targetPath,
method: req.method,
headers: {
...req.headers,
host: `${DEV_PROXY_HOST}:${vitePort}`,
},
},
(proxyRes) => {
res.writeHead(proxyRes.statusCode, proxyRes.headers)
proxyRes.pipe(res, { end: true })
}
)
proxyReq.on('error', (err) => {
console.error('[Controller Proxy] Error:', err.message)
if (!res.headersSent) {
res.writeHead(502)
res.end('Proxy error')
}
})
req.pipe(proxyReq, { end: true })
})
// Gestisce l'upgrade WebSocket anche sulla porta del controller
controllerServer.on('upgrade', (request, socket, head) => {
const pathname = new URL(request.url, `http://${request.headers.host}`).pathname
if (pathname === '/ws') {
wss.handleUpgrade(request, socket, head, (ws) => {
wss.emit('connection', ws, request)
})
} else {
// Per l'HMR di Vite, proxare l'upgrade WebSocket verso Vite
const proxyReq = httpRequest({
hostname: DEV_PROXY_HOST,
port: vitePort,
path: request.url,
method: 'GET',
headers: request.headers,
})
proxyReq.on('upgrade', (proxyRes, proxySocket, proxyHead) => {
socket.write(
`HTTP/1.1 101 Switching Protocols\r\n` +
Object.entries(proxyRes.headers)
.map(([k, v]) => `${k}: ${v}`)
.join('\r\n') +
'\r\n\r\n'
)
proxySocket.pipe(socket)
socket.pipe(proxySocket)
})
proxyReq.on('error', (err) => {
console.error('[Controller Proxy] WS upgrade error:', err.message)
socket.destroy()
})
proxyReq.end()
}
})
controllerServer.listen(CONTROLLER_PORT, '0.0.0.0', () => {
console.log(`[Controller] Dev server running on port ${CONTROLLER_PORT}`)
})
}