From 39093b0522c0f153f7f212c6b3088b359d5cb114 Mon Sep 17 00:00:00 2001 From: MikunoNaka Date: Thu, 22 Jul 2021 19:52:55 +0530 Subject: fixed score not updating --- src/components/MultiplayerGrid.tsx | 42 ++++++++++++++++++++------------------ src/server/index.js | 27 +++++++++++++++++++----- 2 files changed, 44 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/components/MultiplayerGrid.tsx b/src/components/MultiplayerGrid.tsx index 89ab564..bed926a 100644 --- a/src/components/MultiplayerGrid.tsx +++ b/src/components/MultiplayerGrid.tsx @@ -41,41 +41,43 @@ 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-data", {board: newBoard, turn: turn}); - // props.setTurn(turn === 0 ? 1 : 0); + socket.emit("update-remote-data", { + board: newBoard, + turn: turn, + scoreX: props.scoreX, + scoreO: props.scoreO + }); } - const endGame = (winner: number) => { - const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw"; - props.setMessage(`WINNER: ${gameWinner}`); + const endGame = (data: any) => { + props.setMessage( + `${data.winner === "Data" ? "" : "WINNER: "}${data.winner}` + ); props.setShowMessage(true); - console.log(gameWinner, "X: ", props.scoreX, "O: ", props.scoreO); - - gameWinner === "Draw" || (gameWinner === "X" - ? props.setScoreX(props.scoreX + 1) - : props.setScoreO(props.scoreO + 1)); + props.setScoreX(data.scoreX); + props.setScoreO(data.scoreO); - console.log(gameWinner, "X: ", props.scoreX, "O: ", props.scoreO); - socket.emit("update-remote-data", {board: [2,2,2,2,2,2,2,2,2], turn: turn}); - winner < 2 && props.setTurn(winner); // set turn to prev. winner + // socket.emit messes everything up + // and this does the job very well + setBoard([2,2,2,2,2,2,2,2,2]); + props.setTurn(data.winner === "Draw" ? turn : (data.winner === "X" ? 1 : 0)); } useState(() => { socket.on("update-client-data", (data) => { setBoard(data.board); props.setTurn(data.turn); + props.setScoreX(data.score.scoreX); + props.setScoreO(data.score.scoreO); }); - socket.on("set winner", (turn) => endGame(turn)); + socket.on("update-winner", (data) => endGame(data)); }); return (
- { - board.map( - (i, index) => - - ) - } + {board.map((i, index) => + + )}
); } diff --git a/src/server/index.js b/src/server/index.js index 97eeecc..9013ac6 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -21,18 +21,35 @@ const getLeftDiagonal = (board, i = 0) => const getRightDiagonal = (board, i = 2) => i >= 0 ? [getRow(board, 2-i)[i]].concat(getRightDiagonal(board, i-1)) : []; +const getScore = (winner, scoreX, scoreO, board) => ({ + winner: winner < 2 + ? (winner === 0 ? 'O' : 'X') + : (board.includes(2) ? undefined : 'Draw'), + scoreX: winner === 1 ? scoreX + 1 : scoreX, + scoreO: winner === 0 ? scoreO + 1 : scoreO +}) + io.on('connection', (socket) => { socket.on('update-remote-data', (data) => { console.log(data) if (data.board.includes(0) || data.board.includes(1)) { const rows = getRows(data.board); - (rows.some((i) => allEqual(i)) + const winner = (rows.some((i) => allEqual(i)) || getCols(rows).some((i) => allEqual(i)) || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i)) - ) ? io.emit('set winner', data.turn) : (data.board.includes(2) || io.emit('set draw')) - } - io.emit('update-client-data', {board: data.board, turn: data.turn === 0 ? 1 : 0}); - }) + ) ? data.turn : 2; + + const score = getScore(winner, data.scoreX, data.scoreO, data.board) + io.emit('update-client-data', { + board: data.board, + turn: data.turn === 0 ? 1 : 0, + score: score + }); + + score.winner && console.log("sending winner") + score.winner && io.emit('update-winner', score) + }; + }); }); // serve static front end -- cgit v1.2.3