fixed wrong winner showing

3 files changed, 9 insertions, 66 deletions

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 1f646b3..a76e3b3 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -53,7 +53,7 @@ const App: React.FC = () => {
           scoreO={scoreO} setScoreO={setScoreO} 
           setMessage={setMessage} 
           setShowMessage={setShowMessageBox}
-        /> : <MultiplayerGrid 
+        /> : <Grid 
           turn={turn} 
           setTurn={setTurn} 
           scoreX={scoreX} 
diff --git a/src/components/MultiplayerGrid.tsx b/src/components/MultiplayerGrid.tsx
index 2643667..89ab564 100644
--- a/src/components/MultiplayerGrid.tsx
+++ b/src/components/MultiplayerGrid.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useState, useEffect, Dispatch, SetStateAction } from 'react';
+import React, { useState/*, useEffect*/, Dispatch, SetStateAction } from 'react';
 import { io } from 'socket.io-client';
 import Box from './Box';
 import './style.css';
@@ -49,10 +49,14 @@ const MultiplayerGrid: React.FC<Props> = (props) => {
     const gameWinner = winner < 2 ? (winner === 1 ? "X" : "O") : "Draw";
     props.setMessage(`WINNER: ${gameWinner}`);
     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));
-    socket.emit("update-remote-board", [2,2,2,2,2,2,2,2,2]);
+
+    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
   }
 
diff --git a/src/server/index.js b/src/server/index.js
index 0fe20bb..97eeecc 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -21,35 +21,15 @@ const getLeftDiagonal = (board, i = 0) =>
 const getRightDiagonal = (board, i = 2) =>
   i >= 0 ? [getRow(board, 2-i)[i]].concat(getRightDiagonal(board, i-1)) : [];
 
-// 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));
-//   setBoard([2,2,2,2,2,2,2,2,2]);
-//   winner < 2 && props.setTurn(winner); // set turn to prev. winner
-// }
-// 
-// useEffect(() => {
-//   if (board.includes(0) || board.includes(1)) {
-//     const rows = getRows();
-//     (rows.some((i: number[]) => allEqual(i))
-//       || getCols(rows).some((i: number[]) => allEqual(i))
-//       || [getLeftDiagonal(), getRightDiagonal()].some((i) => allEqual(i))
-//     ) ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2));
-//   }
-// });
-
 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))
         || getCols(rows).some((i) => allEqual(i))
         || [getLeftDiagonal(data.board), getRightDiagonal(data.board)].some((i) => allEqual(i))
-      ) ? io.emit('set winner') : (data.board.includes(2) || io.emit('set draw'))
+      ) ? 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});
   })
@@ -63,44 +43,3 @@ const PORT = process.env.PORT || 5000;
 http.listen(PORT, () => {
     console.log(`App listening on port ${PORT}`);
 });
-
-
-/*
- *   const allEqual = (arr: number[]) =>
-    arr.includes(2) ? false : arr.every(i => i === arr[0])
-
-  const getRow = (r: number) => board.slice(r * 3, (r * 3) + 3);
-  const getRows: any = (r: number = 0) =>
-    r <= 2 ? [getRow(r)].concat(getRows(r+1)) : getRow(r)
-
-  const getCol = (arr: number[][], c: number) => arr.map((i: any) => i[c])
-  const getCols: any = (rows: number[][], c: number = 0) =>
-    c < 2 ? [getCol(rows, c)].concat(getCols(rows, c+1)) : [getCol(rows, c)]
-
-  const getLeftDiagonal: any = (i: number = 0) =>
-    i < 3 ? [getRow(i)[i]].concat(getLeftDiagonal(i+1)) : [];
-
-  const getRightDiagonal: any = (i: number = 2) =>
-    i >= 0 ? [getRow(2-i)[i]].concat(getRightDiagonal(i-1)) : [];
-
-  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));
-    setBoard([2,2,2,2,2,2,2,2,2]);
-    winner < 2 && props.setTurn(winner); // set turn to prev. winner
-  }
-
-  useEffect(() => {
-    if (board.includes(0) || board.includes(1)) {
-      const rows = getRows();
-      (rows.some((i: number[]) => allEqual(i))
-        || getCols(rows).some((i: number[]) => allEqual(i))
-        || [getLeftDiagonal(), getRightDiagonal()].some((i) => allEqual(i))
-      ) ? endGame(turn === 0 ? 1 : 0) : (board.includes(2) || endGame(2));
-    }
-  });
-  */