Style the title box

src/view/board-renderer.ts

@@ -52,6 +52,6 @@ export function renderGameBoardHtml(
   return boardHtml;
 }
 
-export function renderPlayerInfoHtml(gameId: string, playerId: string): string {
-  return `<div id="player-info">You are: ${playerId}<br/>Game ID: ${gameId}</div>`;
+export function renderTitleBoxHtml(gameId: string, playerId: string): string {
+  return `<div id="title-box">You are: ${playerId}<br/>Game ID: ${gameId}</div>`;
 }

src/web-socket-handler.ts

@@ -2,7 +2,6 @@ import { ElysiaWS } from 'elysia/dist/ws';
 import { GameInstance } from './game/game-instance';
 import {
   renderGameBoardHtml,
-  renderPlayerInfoHtml,
 } from './view/board-renderer';
 
 interface MakeMoveMessage {
@@ -109,7 +108,7 @@ export class WebSocketHandler {
     }
     this.connections.set(
       gameId,
-      connectionsInGame.filter((conn) => conn !== ws),
+      connectionsInGame.filter((conn) => conn.data.query.playerId !== ws.data.query.playerId),
     );
     if (this.connections.get(gameId)?.length === 0) {
       this.connections.delete(gameId);
@@ -119,6 +118,9 @@ export class WebSocketHandler {
       // Notify remaining players about disconnect
       this.sendMessageToGame(gameId, `${playerId} disconnected.`);
     }
+
+    this.sendTitleBoxesForGame(gameId);
+
     console.log(`${playerId} disconnected from game ${gameId}`);
   }
 
@@ -138,8 +140,6 @@ export class WebSocketHandler {
 
         const updatedBoardHtml = renderGameBoardHtml(game, playerId);
         ws.send(updatedBoardHtml);
-        const updatedPlayerInfoHtml = renderPlayerInfoHtml(game.id, playerId);
-        ws.send(updatedPlayerInfoHtml);
 
         if (game.status === 'finished') {
           if (game.winner === 'draw') {
@@ -166,13 +166,15 @@ export class WebSocketHandler {
     } else {
       console.log(`No connections to update for game ${gameId}.`);
     }
+
+    this.sendTitleBoxesForGame(gameId);
   }
 
   public sendMessageToGame(gameId: string, message: string): void {
     const connections = this.connections.get(gameId);
     if (connections) {
       connections.forEach((ws) => {
-        ws.send('<div id="messages">' + message + '</div>');
+        this.sendMessage(ws, message);
       });
     }
   }
@@ -181,6 +183,64 @@ export class WebSocketHandler {
     targetWs.send('<div id="messages">' + message + '</div>');
   }
 
+  private sendTitleBox(targetWs: WS, message: string): void {
+    targetWs.send('<div id="title-box">' + message + '</div>');
+  }
+  
+  private sendTitleBoxesForGame(gameId: string): void {
+    const game = this.games.get(gameId);
+    if (!game) {
+      console.error(`Tried to send title boxes for game ${gameId}, but it doesn't exist!`)
+      return;
+    }
+    const connections = this.connections.get(gameId);
+    if (!connections) {
+      console.log(`Attempted to send title boxes for game ${gameId}, but no players are connected.`)
+      return;
+    }
+
+    var message = "";
+    switch (game.status) {
+      case 'waiting': {
+        message = "Waiting for players...";
+      }
+      case 'playing': {
+        const blackTag = game.players.black ? this.playerTag(gameId, game.players.black) : 'Unknown';
+        const whiteTag = game.players.white ? this.playerTag(gameId, game.players.white) : 'Unknown';
+        message = `${blackTag} vs ${whiteTag}`;
+      }
+      case 'finished': {
+        switch (game.winner) {
+          case 'draw': {
+            message = "Game ended in draw.";
+          }
+          case 'black': {
+            message = `${game.players.black} wins!`;
+          }
+          case 'white': {
+            message = `${game.players.white} wins!`;
+          }
+        }
+      }
+    }
+    
+    connections.forEach((connection) => {this.sendTitleBox(connection, message)});
+  }
+
+  private playerTag(gameId: string, playerId: string) {
+    var connectionIcon = `<img src="/icons/disconnected.svg" alt="Disconnected" class="icon" />`
+    const connections = this.connections.get(gameId);
+    if (connections) {
+      connections.forEach((ws) => {
+        if (ws.data.query.playerId === playerId) {
+          console.log(`Connection exists for player ${playerId}`);
+          connectionIcon = '';
+        }
+      });
+    }
+    return `<span>${playerId}${connectionIcon}</span>`
+  }
+
   public getGame(gameId: string): GameInstance | undefined {
     return this.games.get(gameId);
   }