From 5f23dfc40ded0f5935843781829e67ffd5d77ab4 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Thu, 22 Jul 2021 14:16:22 +0530 Subject: now the board and turn are handled by backend --- src/components/MultiplayerGrid.tsx | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) (limited to 'src/components/MultiplayerGrid.tsx') diff --git a/src/components/MultiplayerGrid.tsx b/src/components/MultiplayerGrid.tsx index 3d698e6..2643667 100644 --- a/src/components/MultiplayerGrid.tsx +++ b/src/components/MultiplayerGrid.tsx @@ -41,14 +41,27 @@ const MultiplayerGrid: React.FC = (props) => { const getBoard = (index: number) => { const newBoard: number[] = board.slice(0, index).concat(turn).concat(board.slice(index+1, 9)); - socket.emit("update-remote-board", newBoard); - props.setTurn(turn === 1 ? 0 : 1); + socket.emit("update-remote-data", {board: newBoard, turn: turn}); + // props.setTurn(turn === 0 ? 1 : 0); + } + + const endGame = (winner: number) => { + const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw"; + props.setMessage(`WINNER: ${gameWinner}`); + props.setShowMessage(true); + gameWinner === "Draw" || (gameWinner === "X" + ? props.setScoreX(props.scoreX + 1) + : props.setScoreO(props.scoreO + 1)); + socket.emit("update-remote-board", [2,2,2,2,2,2,2,2,2]); + winner < 2 && props.setTurn(winner); // set turn to prev. winner } useState(() => { - socket.on("update-client-board", (remoteBoard) => { - setBoard(remoteBoard); + socket.on("update-client-data", (data) => { + setBoard(data.board); + props.setTurn(data.turn); }); + socket.on("set winner", (turn) => endGame(turn)); }); return ( -- cgit v1.2.3