diff options
| -rw-r--r-- | src/components/MultiplayerGrid.tsx | 21 | ||||
| -rw-r--r-- | src/server/index.js | 13 |
2 files changed, 23 insertions, 11 deletions
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> = (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 ( diff --git a/src/server/index.js b/src/server/index.js index 31af8c4..0fe20bb 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -43,16 +43,15 @@ const getRightDiagonal = (board, i = 2) => // }); io.on('connection', (socket) => { - socket.on('update-remote-board', (board) => { - if (board.includes(0) || board.includes(1)) { - const rows = getRows(board); + socket.on('update-remote-data', (data) => { + if (data.board.includes(0) || data.board.includes(1)) { + const rows = getRows(data.board); (rows.some((i) => allEqual(i)) || getCols(rows).some((i) => allEqual(i)) - || [getLeftDiagonal(board), getRightDiagonal(board)].some((i) => allEqual(i)) - ) ? console.log("win") : (board.includes(2) || console.log("maybe draw")) - // ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2)); + || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i)) + ) ? io.emit('set winner') : (data.board.includes(2) || io.emit('set draw')) } - io.emit('update-client-board', board) + io.emit('update-client-data', {board: data.board, turn: data.turn === 0 ? 1 : 0}); }) }); |