now the board and turn are handled by backend

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});
   })
 });