212 lines
7.1 KiB
Markdown
212 lines
7.1 KiB
Markdown
# Scoreboard-JS
|
|
|
|
Echtzeit-Anzeigetafel für Sportveranstaltungen — zeigt Timer und Spielstand auf einem separaten Monitor an und wird über ein Admin-Panel gesteuert.
|
|
|
|
---
|
|
|
|
## Übersicht
|
|
|
|
Das System besteht aus zwei Teilen:
|
|
|
|
| Teil | URL | Beschreibung |
|
|
|---|---|---|
|
|
| **Monitor** | `http://<host>:3000/` | Vollbildanzeige für den Beamer/Monitor (Timer + Score) |
|
|
| **Admin-Panel** | `http://<host>:3000/admin` | Steuerung von Timer und Scoreboard |
|
|
|
|
Alle Änderungen vom Admin-Panel werden über **WebSockets (Socket.IO)** in Echtzeit auf dem Monitor angezeigt — ohne Seiten-Reload.
|
|
|
|
---
|
|
|
|
## Voraussetzungen
|
|
|
|
- Node.js (v18 oder neuer empfohlen)
|
|
- npm
|
|
|
|
---
|
|
|
|
## Installation & Start
|
|
|
|
```bash
|
|
cd scoreboard
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
Der Server startet mit `nodemon` und ist anschließend unter Port **3000** erreichbar.
|
|
Der Socket.IO-Server läuft separat auf Port **3001**.
|
|
|
|
---
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
scoreboard/
|
|
├── app.js # Express-App, Middleware, Routen
|
|
├── bin/www # HTTP-Server, startet die App
|
|
├── controllers/
|
|
│ ├── socketio.js # Socket.IO-Server (Port 3001)
|
|
│ ├── timer.js # Timer-Logik (Start, Pause, Reset, IncDec)
|
|
│ ├── score.js # Score-Logik (Punkte, Teams, Seitenwechsel)
|
|
│ └── cli.js # CLI-Controller (aktuell Testcode)
|
|
├── routes/
|
|
│ ├── admin.js # REST-Endpunkte für das Admin-Panel
|
|
│ └── index.js # Monitor-Ansicht + WebSocket-Verbindungshandler
|
|
├── views/
|
|
│ ├── admin.hbs # Admin-Panel (Handlebars-Template)
|
|
│ ├── index.hbs # Monitor ohne Scoreboard (nur Timer)
|
|
│ └── indexScore.hbs # Monitor mit Scoreboard (Timer + Score + Teamnamen)
|
|
└── public/
|
|
├── javascripts/
|
|
│ ├── admin.js # Frontend-Logik Admin-Panel
|
|
│ ├── index.js # Frontend-Logik Monitor (ohne Score)
|
|
│ └── indexScore.js # Frontend-Logik Monitor (mit Score)
|
|
└── stylesheets/
|
|
├── admin.css
|
|
├── index.css
|
|
├── indexScore.css
|
|
└── seven-segment.css # Seven-Segment-Display-Schrift für den Timer
|
|
```
|
|
|
|
---
|
|
|
|
## Funktionen
|
|
|
|
### Timer
|
|
|
|
- Countdown-Timer mit konfigurierbarer Startzeit (Standard: **7:00 Minuten**)
|
|
- Start / Pause
|
|
- Zurücksetzen auf eine neue Zeit (0:00 bis 10:00, in 15-Sekunden-Schritten)
|
|
- Feineinstellung im laufenden Betrieb: ±1s, ±5s, ±10s
|
|
- Nach Ablauf wird `timerEnded` an alle Clients gesendet und "ENDE" auf dem Monitor angezeigt
|
|
|
|
### Scoreboard
|
|
|
|
- Punktestand für **Team A** und **Team B**
|
|
- Punkte einzeln erhöhen (+1) oder verringern (-1)
|
|
- Score direkt auf einen bestimmten Wert setzen
|
|
- Score zurücksetzen (beide Teams auf 0)
|
|
- **Scoreboard ein-/ausblenden:** Der Monitor wechselt zwischen Timer-only-Ansicht (`index.hbs`) und Timer+Score-Ansicht (`indexScore.hbs`)
|
|
|
|
### Teams konfigurieren
|
|
|
|
Jedes Team hat folgende Felder:
|
|
|
|
| Feld | Beschreibung |
|
|
|---|---|
|
|
| `name` | Hauptname des Teams |
|
|
| `name2` | Zweiter Name (nur bei Spielgemeinschaft) |
|
|
| `isSpielgemeinschaft` | Wenn aktiv, werden beide Namen untereinander angezeigt |
|
|
|
|
### Seitenwechsel (Halbzeit)
|
|
|
|
Über "Seitenwechsel" werden Team A und Team B auf dem Monitor die Seiten tauschen — der Spielstand bleibt unverändert, nur die Anzeigepositionen (links/rechts) wechseln.
|
|
|
|
### Monitor neu laden
|
|
|
|
Der Button "Monitor neu laden" im Admin-Panel sendet ein `refresh`-Event an alle verbundenen Clients und löst einen Seiten-Reload des Monitors aus. Nützlich z.B. nach dem Ein-/Ausblenden des Scoreboards.
|
|
|
|
---
|
|
|
|
## Architektur / Datenfluss
|
|
|
|
```
|
|
Admin-Panel (Browser)
|
|
│
|
|
│ HTTP REST (fetch)
|
|
▼
|
|
Express-Server :3000
|
|
routes/admin.js
|
|
│
|
|
├── controllers/timer.js ──┐
|
|
└── controllers/score.js ──┤
|
|
│ io.sockets.emit(event, data)
|
|
▼
|
|
Socket.IO-Server :3001
|
|
│
|
|
WebSocket-Verbindung
|
|
│
|
|
┌───────────────┴───────────────┐
|
|
▼ ▼
|
|
Monitor (index.hbs) Monitor (indexScore.hbs)
|
|
index.js indexScore.js
|
|
```
|
|
|
|
### WebSocket-Events
|
|
|
|
| Event | Richtung | Beschreibung |
|
|
|---|---|---|
|
|
| `timerDurationLeft` | Server → Client | Aktuelle Restzeit als String `MM:SS` |
|
|
| `timerEnded` | Server → Client | Timer abgelaufen |
|
|
| `score` | Server → Client | Aktueller Spielstand als String `X:Y` |
|
|
| `scoreSideswitch` | Server → Client | Seitenwechsel ausgelöst — Frontend neu laden |
|
|
| `refresh` | Server → Client | Kompletten Seiten-Reload auslösen |
|
|
|
|
---
|
|
|
|
## REST-API (Admin-Endpunkte)
|
|
|
|
Alle Endpunkte sind unter `/admin` erreichbar.
|
|
|
|
### Allgemein
|
|
|
|
| Methode | Endpunkt | Beschreibung |
|
|
|---|---|---|
|
|
| GET | `/admin/refreshMonitor` | Sendet `refresh` an alle Monitors |
|
|
|
|
### Timer
|
|
|
|
| Methode | Endpunkt | Body | Beschreibung |
|
|
|---|---|---|---|
|
|
| GET | `/admin/timerStart` | — | Timer starten |
|
|
| GET | `/admin/timerPause` | — | Timer pausieren |
|
|
| POST | `/admin/timerReset` | `{ duration: <Sekunden> }` | Timer zurücksetzen |
|
|
| POST | `/admin/timerIncDec` | `{ value: <Sekunden> }` | Timer erhöhen (positiv) / verringern (negativ) |
|
|
| GET | `/admin/timerGetValues` | — | Aktuelle Timer-Werte abrufen |
|
|
|
|
Antwortformat `timerGetValues`:
|
|
```json
|
|
{
|
|
"isPaused": true,
|
|
"duration": "<ISO 8601>",
|
|
"durationLeft": "<ISO 8601>",
|
|
"print": "07:00"
|
|
}
|
|
```
|
|
|
|
### Scoreboard
|
|
|
|
| Methode | Endpunkt | Body | Beschreibung |
|
|
|---|---|---|---|
|
|
| GET | `/admin/scoreToggle` | — | Scoreboard ein-/ausblenden |
|
|
| GET | `/admin/scoreGetValues` | — | Aktuelle Score-Werte abrufen |
|
|
| GET | `/admin/scoreClearScore` | — | Spielstand beider Teams auf 0 |
|
|
| GET | `/admin/scoreToggleSideswitch` | — | Seiten der Teams tauschen |
|
|
| POST | `/admin/scoreSetScore` | `{ team, score }` | Score direkt setzen |
|
|
| POST | `/admin/scoreAlterScore` | `{ team, dir }` | Score um 1 ändern (`dir`: `"inc"` / `"dec"`) |
|
|
| POST | `/admin/scoreConfigTeams` | `{ teamA: { name, name2, isSpielgemeinschaft }, teamB: { ... } }` | Teams konfigurieren |
|
|
|
|
`team` ist jeweils `"teamA"` oder `"teamB"`.
|
|
|
|
Antwortformat `scoreGetValues`:
|
|
```json
|
|
{
|
|
"enabled": false,
|
|
"teamA": { "name": "Team A", "name2": "", "score": 0, "isSpielgemeinschaft": 0 },
|
|
"teamB": { "name": "Team B", "name2": "", "score": 0, "isSpielgemeinschaft": 0 },
|
|
"sideswitch": false,
|
|
"print": "0:0"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Abhängigkeiten
|
|
|
|
| Paket | Verwendung |
|
|
|---|---|
|
|
| `express` | HTTP-Server und Routing |
|
|
| `socket.io` | WebSocket-Kommunikation |
|
|
| `moment` | Timer-Berechnung und Zeitformatierung |
|
|
| `hbs` | Handlebars als View-Engine |
|
|
| `morgan` | HTTP-Request-Logging |
|
|
| `nodemon` | Automatischer Server-Neustart bei Dateiänderungen |
|