chore: Remove player from scoreboard if removed from game state (#25)

src/client/client.ts

@@ -186,4 +186,14 @@ htmx.on("htmx:sseMessage", (evt) => {
 		chart.data.datasets.push(data);
 		chart.update();
 	}
+
+	// If player leaves, remove them from the chart
+	if (evt instanceof CustomEvent && evt.detail.type === "player-left-chart") {
+		const nick = JSON.parse(evt.detail.data).nick;
+		const datasetIndex = chart.data.datasets.findIndex((d) => d.label === nick);
+		if (datasetIndex !== -1) {
+			chart.data.datasets.splice(datasetIndex, 1);
+			chart.update();
+		}
+	}
 });

src/game/events.ts

@@ -12,7 +12,7 @@ interface PlayerJoined extends Pick<Player, "uuid" | "nick" | "url"> {
  * Event sent to player worker thread when a player leaves the game.
  * At this point the worker thread should be terminated.
  */
-interface PlayerLeft extends Pick<Player, "uuid"> {
+interface PlayerLeft extends Pick<Player, "uuid" | "nick"> {
 	type: "player-left";
 }
 

src/game/state.ts

@@ -189,18 +189,32 @@ export function playerSurrender(state: State, uuid: string) {
 	const player = state.players.find((p) => p.uuid === uuid);
 	if (player) {
 		player.playing = false;
-		player.worker?.postMessage({ type: "player-left", uuid });
+		player.worker?.postMessage({
+			type: "player-left",
+			uuid,
+			nick: player.nick,
+		});
 		player.worker = undefined;
 		saveState(state);
 	}
 }
 
 export const removePlayer = (state: State, uuid: string) => {
 	const player = state.players.find((p) => p.uuid === uuid);
-	player?.worker?.postMessage({ type: "player-left", uuid });
+	player?.worker?.postMessage({ type: "player-left", uuid, nick: player.nick });
 	state.players = state.players.filter((p) => p.uuid !== uuid);
 
 	saveState(state);
+
+	if (player) {
+		for (const listener of Object.values(state.uiListeners)) {
+			listener({
+				type: "player-left",
+				uuid,
+				nick: player.nick,
+			});
+		}
+	}
 };
 
 export const startGame = (state: State, mode: State["mode"]) => {

src/pages/scoreboard/scoreboard.tsx

@@ -10,6 +10,8 @@ const PlayerRow = ({ player }: { player: Player }) => {
 		<li
 			class="flex flex-row justify-between bg-base-300 px-4 py-2 rounded-2xl bg-opacity-30 shadow-lg z-1"
 			id={`player-${player.nick}`}
+			sse-swap={`player-left-${player.nick}`}
+			hx-swap="delete"
 		>
 			<h2 class={`text-xl ${player.color.class}`} safe>
 				{player.nick}
@@ -96,6 +98,7 @@ export const scoreboardPlugin = basePluginSetup()
 						sse-swap="player-joined-chart"
 						hx-swap="none"
 					/>
+					<span class="hidden" sse-swap="player-left-chart" hx-swap="none" />
 				</div>
 				<script>
 					{htmx.is
@@ -157,6 +160,18 @@ export const scoreboardPlugin = basePluginSetup()
 						: [];
 				}
 
+				if (event.type === "player-left") {
+					return [
+						{
+							event: `player-left-${event.nick}`,
+						},
+						{
+							event: "player-left-chart",
+							data: JSON.stringify({ nick: event.nick }),
+						},
+					];
+				}
+
 				return [];
 			},
 		]);