diff --git a/client/src/components/game/GamePage.tsx b/client/src/components/game/GamePage.tsx index faeac4d..7b1831f 100644 --- a/client/src/components/game/GamePage.tsx +++ b/client/src/components/game/GamePage.tsx @@ -51,11 +51,9 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) { handleResize(); if (lobby.pgn && lobby.actualGame.pgn() !== lobby.pgn) { - const gameCopy = new Chess(); - gameCopy.loadPgn(lobby.pgn as string); - updateLobby({ type: "setGame", payload: gameCopy }); + lobby.actualGame.loadPgn(lobby.pgn as string); - const lastMove = gameCopy.history({ verbose: true }).pop(); + const lastMove = lobby.actualGame.history({ verbose: true }).pop(); let lastMoveSquares = undefined; let kingSquare = undefined; @@ -65,10 +63,10 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) { [lastMove.to]: { background: "rgba(255, 255, 0, 0.4)" } }; } - if (gameCopy.inCheck()) { - const kingPos = gameCopy.board().reduce((acc, row, index) => { + if (lobby.actualGame.inCheck()) { + const kingPos = lobby.actualGame.board().reduce((acc, row, index) => { const squareIndex = row.findIndex( - (square) => square && square.type === "k" && square.color === gameCopy.turn() + (square) => square && square.type === "k" && square.color === lobby.actualGame.turn() ); return squareIndex >= 0 ? `${String.fromCharCode(squareIndex + 97)}${8 - index}` : acc; }, ""); @@ -115,6 +113,21 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) { chatlist.scrollTop = chatlist.scrollHeight; }, [chatMessages]); + useEffect(() => { + updateTurnTitle(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [lobby]); + + function updateTurnTitle() { + if (lobby.side === "s" || !lobby.white?.id || !lobby.black?.id) return; + + if (lobby.side === lobby.actualGame.turn()) { + document.title = "(your turn) chessu"; + } else { + document.title = "chessu"; + } + } + function handleResize() { if (window.innerWidth >= 1920) { setBoardWidth(580); @@ -161,7 +174,13 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) { function makeMove(m: { from: string; to: string; promotion?: string }) { try { const result = lobby.actualGame.move(m); + if (result) { + updateLobby({ + type: "updateLobby", + payload: { pgn: lobby.actualGame.pgn() } + }); + updateTurnTitle(); let kingSquare = undefined; if (lobby.actualGame.inCheck()) { const kingPos = lobby.actualGame.board().reduce((acc, row, index) => { diff --git a/client/src/components/game/handlers.ts b/client/src/components/game/handlers.ts index 27ac08d..c6ff782 100644 --- a/client/src/components/game/handlers.ts +++ b/client/src/components/game/handlers.ts @@ -49,14 +49,10 @@ export function initSocket( }); socket.on("receivedLatestGame", (latestGame: Game) => { - actions.updateLobby({ type: "updateLobby", payload: latestGame }); - if (latestGame.pgn && latestGame.pgn !== lobby.actualGame.pgn()) { - const gameCopy = new Chess(); - gameCopy.loadPgn(latestGame.pgn as string); - actions.updateLobby({ type: "setGame", payload: gameCopy }); + lobby.actualGame.loadPgn(latestGame.pgn as string); - const lastMove = gameCopy.history({ verbose: true }).pop(); + const lastMove = lobby.actualGame.history({ verbose: true }).pop(); let lastMoveSquares = undefined; let kingSquare = undefined; @@ -66,11 +62,13 @@ export function initSocket( [lastMove.to]: { background: "rgba(255, 255, 0, 0.4)" } }; } - if (gameCopy.inCheck()) { - const kingPos = gameCopy.board().reduce((acc, row, index) => { + if (lobby.actualGame.inCheck()) { + const kingPos = lobby.actualGame.board().reduce((acc, row, index) => { const squareIndex = row.findIndex( (square) => - square && square.type === "k" && square.color === gameCopy.turn() + square && + square.type === "k" && + square.color === lobby.actualGame.turn() ); return squareIndex >= 0 ? `${String.fromCharCode(squareIndex + 97)}${8 - index}` @@ -88,6 +86,7 @@ export function initSocket( check: kingSquare }); } + actions.updateLobby({ type: "updateLobby", payload: latestGame }); if (latestGame.black?.id === user?.id) { if (lobby.side !== "b") actions.updateLobby({ type: "setSide", payload: "b" }); @@ -100,6 +99,7 @@ export function initSocket( socket.on("receivedMove", (m: { from: string; to: string; promotion?: string }) => { const success = actions.makeMove(m); + console.log(success); if (!success) { socket.emit("getLatestGame"); }