Fix UI state synchronization and End Game reset issues

Co-authored-by: mgierschdev <62764972+mgierschdev@users.noreply.github.com>

Author: Copilot

frontend/src/app/_client_components/ChessGameWrapper.tsx

@@ -24,6 +24,11 @@ export default function ChessGameWrapper({gameInfo: initialGameInfo}: {gameInfo:
             });
         }
     }, [gameInfo]);
+
+    // Callback to update game info from child components
+    const handleGameInfoUpdate = (newGameInfo: ChessGame) => {
+        setGameInfo(newGameInfo);
+    };
 
     // Show loading state if game info isn't available yet
     if (!gameInfo) {
@@ -46,7 +51,11 @@ export default function ChessGameWrapper({gameInfo: initialGameInfo}: {gameInfo:
             </div>
 
             <div className="right-panel">
-                <RightSidePanel gameInfoProp={gameInfo} onBotModeChange={setIsBotMode} />
+                <RightSidePanel 
+                    gameInfoProp={gameInfo} 
+                    onBotModeChange={setIsBotMode}
+                    onGameInfoUpdate={handleGameInfoUpdate}
+                />
             </div>
         </>
     );

frontend/src/app/_client_components/Chessboard.tsx

@@ -18,7 +18,7 @@
  */
 
 import {ChessService} from "@/app/_services/ChessService";
-import React, {useState} from "react";
+import React, {useState, useEffect} from "react";
 import ChessPieceCell from "@/app/_client_components/ChessPieceCell";
 import {ChessPieceType, Color, GameState} from "@/app/_models/enums";
 import {ChessPiece} from "@/app/_models/ChessPiece";
@@ -29,15 +29,26 @@ import PromotionModal from "@/app/_client_components/PromotionModal";
 let gameService: ChessService = new ChessService();
 
 export default function Chessboard({gameInfo, isBotMode}: any) {
-    let [chessboard, setChessboard] = useState(gameInfo.chessboard);
-    let chessPieces = printChessBoard();
+    let [chessboard, setChessboard] = useState(gameInfo?.chessboard || []);
     let [allowedPositions, setAllowedPositions ]= useState(new Set());
     let [selectedPiece, setSelectedPiece] = useState(-1);
-    let [playerTurn, setPlayerTurn] = useState(gameInfo.turn);
-    let [gameState, setGameState] = useState(gameInfo.gameState);
+    let [playerTurn, setPlayerTurn] = useState(gameInfo?.turn);
+    let [gameState, setGameState] = useState(gameInfo?.gameState);
     let [showPromotion, setShowPromotion] = useState(false);
     let [promotionMove, setPromotionMove] = useState<{source: Position, target: Position} | null>(null);
     let [isComputerThinking, setIsComputerThinking] = useState(false);
+    let chessPieces = printChessBoard();
+
+    // Reset board state when gameInfo changes (e.g., when game ends/starts)
+    useEffect(() => {
+        if (gameInfo) {
+            setChessboard(gameInfo.chessboard || []);
+            setPlayerTurn(gameInfo.turn);
+            setGameState(gameInfo.gameState);
+            setSelectedPiece(-1);
+            setAllowedPositions(new Set());
+        }
+    }, [gameInfo]);
 
 
     async function onCellClick(chessPiece: ChessPiece) {

frontend/src/app/_client_components/RightSidePanel.tsx

@@ -8,7 +8,7 @@ import {GameState} from "@/app/_models/enums";
 // Game Service
 let gameService: ChessService = new ChessService();
 
-export default function RightSidePanel({gameInfoProp, onBotModeChange}: any) {
+export default function RightSidePanel({gameInfoProp, onBotModeChange, onGameInfoUpdate}: any) {
 
     const [gameInfo, setGameInfo] = useState(gameInfoProp);
     const [isBotMode, setIsBotMode] = useState(false);
@@ -22,6 +22,11 @@ export default function RightSidePanel({gameInfoProp, onBotModeChange}: any) {
             response = await gameService.startGame();
         }
         setGameInfo(response);
+        
+        // Notify parent component of the update
+        if (onGameInfoUpdate) {
+            onGameInfoUpdate(response);
+        }
     }
 
     function handleBotModeToggle() {