Make game fully playable with two players

src/client-entry.ts

@@ -26,6 +26,8 @@ let playerId: string; // Declare playerId here, accessible throughout the module
 const gameStateManager = new GameStateManager();
 const wsClient = new WebSocketClient(WS_URL);
 
+let gameBoardUI: GameBoardUI;
+
 const gameBoardElement = document.getElementById('game-board');
 console.log('gameBoardElement: ', gameBoardElement); // Log to check if element is found
 
@@ -40,13 +42,6 @@ if (!gameBoardElement || !messagesElement || !playerInfoElement) {
     'Missing essential DOM elements (game-board, messages, or player-info)',
   );
 }
-
-const gameBoardUI = new GameBoardUI(gameBoardElement);
-console.log('GameBoardUI initialized.', gameBoardUI); // Log to confirm GameBoardUI construction
-
-// --- Event Handlers and Wiring ---
-
-// WebSocketClient -> GameStateManager -> GameBoardUI
 wsClient.onMessage((message) => {
   try {
     const msg = JSON.parse(message);
@@ -95,6 +90,38 @@ wsClient.onMessage((message) => {
 });
 
 // GameBoardUI -> WebSocketClient (for making moves)
+// This will be set up inside wsClient.onOpen
+
+// Initial board render (empty board until server sends state)
+// This initial render is no longer needed as updateBoard is called within onOpen and onMessage
+
+// Initial setup for player info
+if (playerInfoElement) {
+  playerInfoElement.textContent = `You are: (Connecting...)`;
+}
+wsClient.onOpen(() => {
+  console.log('Connected to game server.');
+  playerId = `player-${Math.random().toString(36).substring(2, 9)}`;
+  
+  gameBoardUI = new GameBoardUI(gameBoardElement, playerId);
+  console.log('GameBoardUI initialized.', gameBoardUI); // Log to confirm GameBoardUI construction
+
+  const joinMessage: any = {
+    type: 'join_game',
+    playerId: playerId,
+  };
+
+  if (gameIdFromUrl) {
+    joinMessage.gameId = gameIdFromUrl;
+  }
+  wsClient.send(JSON.stringify(joinMessage));
+  if (playerInfoElement) {
+    playerInfoElement.textContent = `You are: ${playerId} (Waiting for game state...)`;
+  }
+
+  // Initial board render (empty board until server sends state)
+  gameBoardUI.updateBoard(gameStateManager.getGameState());
+
   gameBoardUI.setOnCellClick((row, col) => {
     const moveMessage = {
       type: 'make_move',
@@ -119,23 +146,6 @@ gameBoardUI.setOnCellClick((row, col) => {
     gameStateManager.updateGameState(optimisticState);
     gameBoardUI.updateBoard(gameStateManager.getGameState());
   });
-
-// WebSocketClient connection status messages
-wsClient.onOpen(() => {
-  console.log('Connected to game server.');
-  playerId = `player-${Math.random().toString(36).substring(2, 9)}`;
-  const joinMessage: any = {
-    type: 'join_game',
-    playerId: playerId,
-  };
-
-  if (gameIdFromUrl) {
-    joinMessage.gameId = gameIdFromUrl;
-  }
-  wsClient.send(JSON.stringify(joinMessage));
-  if (playerInfoElement) {
-    playerInfoElement.textContent = `You are: ${playerId} (Waiting for game state...)`;
-  }
 });
 
 wsClient.onClose(() => {
@@ -151,8 +161,6 @@ wsClient.onError((error: Event) => {
 // --- Start Connection ---
 wsClient.connect();
 
-// Initial board render (empty board until server sends state)
-gameBoardUI.updateBoard(gameStateManager.getGameState());
 // Initial setup for player info
 if (playerInfoElement) {
   playerInfoElement.textContent = `You are: (Connecting...)`;

src/game-client/GameBoardUI.ts

@@ -8,9 +8,11 @@ export class GameBoardUI {
   private onCellClickCallback: ((row: number, col: number) => void) | null =
     null;
   private isInteractionEnabled: boolean = true;
+  private thisClientPlayerId: string;
 
-  constructor(boardElement: HTMLElement) {
+  constructor(boardElement: HTMLElement, thisClientPlayerId: string) {
     this.boardElement = boardElement;
+    this.thisClientPlayerId = thisClientPlayerId;
     this.initializeBoard();
   }
 
@@ -47,6 +49,8 @@ export class GameBoardUI {
     const board = gameState.board;
     const lastMove = { row: -1, col: -1 }; // Placeholder for last move highlighting (needs actual last move from state)
 
+    const thisClientColor = Object.entries(gameState.players).find(([color, id]) => id === this.thisClientPlayerId)?.[0] || null;
+
     for (let row = 0; row < 15; row++) {
       for (let col = 0; col < 15; col++) {
         const cell = this.cells[row][col];
@@ -76,10 +80,8 @@ export class GameBoardUI {
 
     // Disable interaction if it's not our turn or game is over
     // This logic needs to know which player 'we' are, and the current player from gameState
-    // For simplicity, let's assume 'black' is the client for now, and enable/disable
-    // based on if it's black's turn. This will need refinement for multi-player.
     this.isInteractionEnabled =
-      gameState.status === 'playing' && gameState.currentPlayer === 'black'; // Simplified for now
+      gameState.status === 'playing' && gameState.currentPlayer === (thisClientColor as 'black' | 'white');
     this.boardElement.style.pointerEvents = this.isInteractionEnabled
       ? 'auto'
       : 'none';