Bug Fix: score doesn't increase on draw

3 files changed, 29 insertions, 22 deletions

diff --git a/package.json b/package.json
index 281c7f8..05ace5d 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "express": "^4.17.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
diff --git a/src/components/Grid.tsx b/src/components/Grid.tsx
index 97448b0..23ab194 100644
--- a/src/components/Grid.tsx
+++ b/src/components/Grid.tsx
@@ -33,18 +33,22 @@ const Grid: React.FC<Props> = (props) => {
   // 0 is O, 1 is X, 2 is blank
   const [board, setBoard] = useState<number[]>([2,2,2,2,2,2,2,2,2]);
   const [turn, setTurn] = useState<number>(1);
-  const [winner, setWinner] = useState<number>(2)
 
   const getBoard = (index: number) => {
     setBoard(board.slice(0, index).concat(turn).concat(board.slice(index+1, 9)));
     setTurn(turn === 1 ? 0 : 1)
   }
 
-  const allEqual = (arr: number[]) => arr.includes(2) ? false : arr.every(v => v === arr[0])
+  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: any = (c: number, arr=board) => arr.length <= 3 ? arr[c] : [arr[c]].concat(getCol(c, arr.slice(3)))
+  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)) : [];
@@ -52,34 +56,25 @@ const Grid: React.FC<Props> = (props) => {
   const getRightDiagonal: any = (i: number = 2) =>
     i >= 0 ? [getRow(2-i)[i]].concat(getRightDiagonal(i-1)) : [];
 
-  const checkHorMatch: any = (rowNum: number = 0) =>
-    rowNum <= 2 && (allEqual(getRow(rowNum)) ? setWinner(turn === 1 ? 0 : 1) : checkHorMatch(rowNum+1))
-
-  const checkVerMatch: any = (colNum: number = 0) =>
-    colNum <= 2 && (allEqual(getCol(colNum)) ? setWinner(turn === 1 ? 0 : 1) : checkVerMatch(colNum+1))
-
-  const checkDiagonalMatch: any = () => {
-    (allEqual(getLeftDiagonal()) || allEqual(getRightDiagonal())) && setWinner(turn === 1 ? 0 : 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" 
+    gameWinner === "Draw" || (gameWinner === "X" 
       ? props.setScoreX(props.scoreX + 1)
-      : props.setScoreO(props.scoreO + 1);
+      : props.setScoreO(props.scoreO + 1));
     setBoard([2,2,2,2,2,2,2,2,2]);
-    setWinner(2);
   }
 
   useEffect(() => {
-    checkHorMatch();
-    checkVerMatch();
-    checkDiagonalMatch();
-    winner < 2 && endGame(winner);
-    board.includes(2) || endGame(2);
-  })
+    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));
+    }
+  });
 
   return (
     <div className="Grid">
diff --git a/src/server/index.js b/src/server/index.js
new file mode 100644
index 0000000..2b85ea5
--- /dev/null
+++ b/src/server/index.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(path.join(__dirname, '../../build')));
+
+// Start the server
+const PORT = process.env.PORT || 5000;
+app.listen(PORT, () => {
+    console.log(`App listening on port ${PORT}`);
+});