Basic game functionality completed

src/App.jsx

@@ -16,11 +16,11 @@ function App() {
   ]
 
   const [ score, setScore ] = useState({
-    player1: {
+    "1": {
       wins: 0,
       losses: 0
     },
-    player2: {
+    "2": {
       wins: 0,
       losses: 0
     }
@@ -44,6 +44,8 @@ function App() {
           board={board}
           setBoard={setBoard}
           frozen={frozen}
+          setFrozen={setFrozen}
+          score={score}
           setScore={setScore}
         />
       </main>

src/components/Board.jsx

@@ -1,8 +1,11 @@
 import { useState, useEffect } from 'react';
+import getWinner from '../utils/detectWin';
 
 import Cell from './Cell'
 
-export default function Board ({ board, setBoard, frozen }) {
+export default function Board (
+  { board, setBoard, frozen, setFrozen, score, setScore }
+) {
 
   const [ lastStart, setLastStart ] = useState(1)
   const [ turn, setTurn ] = useState(1)
@@ -22,8 +25,17 @@ export default function Board ({ board, setBoard, frozen }) {
 
   useEffect(() => {
     // checkBoard for win
-
-
+    const winner = getWinner(board)
+    if (winner) {
+      const loser = winner === 1 ? 2 : 1
+      let newScore = {...score}
+      score[winner].wins += 1
+      score[loser].losses += 1
+      setMsg(`Player ${winner} wins!`)
+      setScore({...newScore})
+      setFrozen(true)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [board])
 
   const handleClick = (col) => {

src/components/Score.jsx

@@ -1,4 +1,4 @@
-export default function Score ({ score: { player1, player2 }}) {
+export default function Score ({ score }) {
 
   return (
     <table className="scoreboard">
@@ -16,10 +16,10 @@ export default function Score ({ score: { player1, player2 }}) {
           <td>Losses</td>
         </tr>
         <tr>
-          <td>{player1.wins}</td>
-          <td>{player1.losses}</td>
-          <td>{player2.wins}</td>
-          <td>{player2.losses}</td>
+          <td>{score[1].wins}</td>
+          <td>{score[1].losses}</td>
+          <td>{score[2].wins}</td>
+          <td>{score[2].losses}</td>
         </tr>
       </tbody>
     </table>

src/utils/detectWin.js

@@ -0,0 +1,67 @@
+export default function detectWin (board) {
+  // horizontals
+  console.log('checking horizontals')
+  for (let r = 0; r < board.length; r++) {
+      let count = 0
+      let player = 0
+
+      for (let c = 0; c < board[0].length; c++) {
+        let cell = board[r][c]
+        if (!!cell && cell !== player) {
+          player = cell
+          count = 1
+        } else if (!!cell && cell === player) {
+          count ++
+        }
+        if (count >= 4 && !!player) {
+          return player
+        }
+      }
+    }
+
+  // verticals
+  console.log('checking verticals')
+    for (let c = 0; c < board[0].length; c++) {
+      let count = 0
+      let player = 0
+      for (let r = 0; r < board.length; r++) {
+        let cell = board[r][c]
+        if (!!cell && cell !== player) {
+          player = cell
+          count = 1
+        } else if (!!cell && cell === player) {
+          count ++
+        }
+        if (count >= 4 && !!player) {
+          return player
+        }
+      }
+    }
+
+  // diagonals
+  console.log('checking diagonals')
+  let startRow = 0
+  while (startRow < 4) {
+    let count = 0
+    let player = 0
+    let r = startRow
+    let c = 0
+    while (r < board.length && c < board[0].length) {
+      let cell = board[r][c]
+      if (!!cell && cell !== player) {
+        player = cell
+        count = 1
+      } else if (!!cell && cell === player) {
+        count ++
+      }
+      if (count >= 4 && !!player) {
+        return player
+      }
+      r++
+      c++
+    }
+    startRow++
+  }
+
+  return 0
+}