${title}
${artist}
@@ -216,6 +233,18 @@ function shortName(id) {
function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
+// Stable distinct color per year for the year badge
+function badgeColorForYear(y) {
+ const val = (y === undefined || y === null) ? '?' : y;
+ if (val === '?' || Number.isNaN(Number(val))) {
+ // Neutral slate for unknown years
+ return 'background-color: hsl(215 16% 34%);';
+ }
+ const n = Number(val);
+ const hue = ((n * 23) % 360 + 360) % 360; // spread hues deterministically
+ return `background-color: hsl(${hue} 70% 42%);`;
+}
+
function handleMessage(ev) {
const msg = JSON.parse(ev.data);
if (msg.type === 'connected') {
diff --git a/public/index.html b/public/index.html
index b1e1264..ebead02 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,9 +46,29 @@
Dein Name:
+
+
+
-
Spieler
-
+
+
+ i
+ Dashboard: Spielerstatus & Punkte
+
+
+
+
+
+ | Spieler |
+ Verbindung |
+ Ready |
+ Score |
+
+
+
+
+
diff --git a/server.js b/server.js
index 73ef5d7..8962ba3 100644
--- a/server.js
+++ b/server.js
@@ -156,6 +156,7 @@ function createRoom(name, host) {
timeline: {}, // playerId -> [{trackId, year, title, artist}]
tokens: {}, // playerId -> number
ready: { [host.id]: false }, // playerId -> boolean
+ spectators: {}, // playerId -> boolean (joined after game start)
phase: 'guess', // 'guess' | 'reveal'
lastResult: null, // { playerId, correct }
trackStartAt: null, // ms epoch for synced start time
@@ -186,6 +187,7 @@ function roomSummary(room) {
name: p.name,
connected: p.connected,
ready: !!room.state.ready?.[p.id],
+ spectator: !!room.state.spectators?.[p.id] || !!p.spectator,
})),
state: room.state,
};
@@ -331,6 +333,14 @@ wss.on('connection', (ws) => {
room.players.set(player.id, player);
player.roomId = room.id;
room.state.ready[player.id] = false;
+ // If the game already started, mark as spectator
+ if (room.state.status === 'playing' || room.state.status === 'ended') {
+ room.state.spectators[player.id] = true;
+ player.spectator = true;
+ } else {
+ delete room.state.spectators[player.id];
+ player.spectator = false;
+ }
broadcast(room, 'room_update', { room: roomSummary(room) });
return;
}
@@ -342,6 +352,7 @@ wss.on('connection', (ws) => {
room.players.delete(player.id);
player.roomId = null;
if (room.state.ready) delete room.state.ready[player.id];
+ if (room.state.spectators) delete room.state.spectators[player.id];
if (room.players.size === 0) rooms.delete(room.id);
else broadcast(room, 'room_update', { room: roomSummary(room) });
return;
@@ -361,7 +372,9 @@ wss.on('connection', (ws) => {
if (!room) return;
if (room.hostId !== player.id) return send('error', { message: 'Only host can start' });
// All players must be ready
- const pids = [...room.players.keys()];
+ const pids = [...room.players.values()]
+ .filter(p => !room.state.spectators?.[p.id])
+ .map(p => p.id);
const allReady = pids.every((pid) => !!room.state.ready?.[pid]);
if (!allReady) return send('error', { message: 'All players must be ready' });
room.state.status = 'playing';