Improve title box with turn indicator

src/game/game-instance.ts

@@ -7,7 +7,7 @@ type BoardCell = null | 'black' | 'white';
 export class GameInstance {
   public readonly id: string;
   public readonly board: BoardCell[][];
-  public currentPlayer: PlayerColor | null;
+  public currentPlayerColor: PlayerColor | null;
   public status: GameStatus;
   public winner: null | PlayerColor | 'draw';
   public players: { black?: string; white?: string };
@@ -20,12 +20,20 @@ export class GameInstance {
     this.board = Array.from({ length: this.boardSize }, () =>
       Array(this.boardSize).fill(null),
     );
-    this.currentPlayer = null;
+    this.currentPlayerColor = null;
     this.status = 'waiting';
     this.winner = null;
     this.players = {};
   }
 
+  public getCurrentPlayerId(): string | undefined {
+    if (this.currentPlayerColor === 'black') {
+      return this.players.black;
+    } else {
+      return this.players.white;
+    }
+  }
+
   public getPlayerCount(): number {
     return Object.values(this.players).filter(Boolean).length;
   }
@@ -52,7 +60,7 @@ export class GameInstance {
 
     // If both players have joined, start the game.
     if (this.players.black && this.players.white) {
-      this.currentPlayer = 'black';
+      this.currentPlayerColor = 'black';
       this.status = 'playing';
     }
     return true;
@@ -77,7 +85,7 @@ export class GameInstance {
     }
 
     // Validate it's the player's turn
-    if (this.currentPlayer !== playerColor) {
+    if (this.currentPlayerColor !== playerColor) {
       return { success: false, error: 'Not your turn' };
     }
 
@@ -99,7 +107,7 @@ export class GameInstance {
     if (this.checkWin(row, col, playerColor)) {
       this.winner = playerColor;
       this.status = 'finished';
-      this.currentPlayer = null;
+      this.currentPlayerColor = null;
       return { success: true };
     }
 
@@ -107,12 +115,12 @@ export class GameInstance {
     if (this.moveCount === this.boardSize * this.boardSize) {
       this.winner = 'draw';
       this.status = 'finished';
-      this.currentPlayer = null;
+      this.currentPlayerColor = null;
       return { success: true };
     }
 
     // Switch turns
-    this.currentPlayer = playerColor === 'black' ? 'white' : 'black';
+    this.currentPlayerColor = playerColor === 'black' ? 'white' : 'black';
 
     return { success: true };
   }