Added draw and column full message

package-lock.json

@@ -21,7 +21,7 @@
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.16",
         "globals": "^15.14.0",
-        "vite": "^6.0.5"
+        "vite": "^6.0.6"
       }
     },
     "node_modules/@ampproject/remapping": {

package.json

@@ -23,6 +23,6 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "vite": "^6.0.5"
+    "vite": "^6.0.6"
   }
 }

src/App.jsx

@@ -1,35 +1,38 @@
 import { useState } from "react";
-import { checkWin, putChip } from "./fns";
+import { clickHandler } from "./fns";
 
-let [getColorBoard, setColorBoard] = [null, null];
+let params = {};
-let [getGameOver, setGameOver] = [null, null];
-let [getCurrentPlayer, setCurrentPlayer] = [null, null];
-let [getMessage, setMessage] = [null, null];
 
 export default function App() {
-  const [colorBoard, sColorBoard] = useState(
+  const [colorBoard, setColorBoard] = useState(
     Array.from(Array(6), () => new Array(7).fill("white"))
   );
-  getColorBoard = colorBoard;
+  params.colorBoard = colorBoard;
-  setColorBoard = sColorBoard;
+  params.setColorBoard = setColorBoard;
 
-  const [gameOver, sGameOver] = useState(false);
+  const [gameOver, setGameOver] = useState(false);
-  getGameOver = gameOver;
+  params.gameOver = gameOver;
-  setGameOver = sGameOver;
+  params.setGameOver = setGameOver;
+
+  const [currentPlayer, setCurrentPlayer] = useState("red");
+  params.currentPlayer = currentPlayer;
+  params.setCurrentPlayer = setCurrentPlayer;
+
+  const [message, setMessage] = useState("");
+  params.message = message;
+  params.setMessage = setMessage;
+
+  const [turns, setTurns] = useState(1);
+  params.turns = turns;
+  params.setTurns = setTurns;
 
-  const [currentPlayer, sCurrentPlayer] = useState("red");
-  getCurrentPlayer = currentPlayer;
-  setCurrentPlayer = sCurrentPlayer;
 
-  const [message, sMessage] = useState("");
-  getMessage = message;
-  setMessage = sMessage;
 
   return (
     <>
       <h1>CONNECT4</h1>
       <Board />
-      <p>{getMessage}</p>
+      <p>{params.message}</p>
     </>
   );
 }
@@ -41,22 +44,7 @@ function Field({ row, col, backgroundColor, disabled }) {
       row={row}
       col={col}
       style={backgroundColor}
-      onClick={() => {
+      onClick={() => clickHandler(col, params)}
-        let currentChip = putChip(
-          col,
-          getColorBoard,
-          getCurrentPlayer,
-          setColorBoard,
-          setCurrentPlayer
-        );
-
-        let win = checkWin(currentChip, col, getColorBoard, getCurrentPlayer);
-
-        if (win) {
-          setMessage(getCurrentPlayer + " wins!");
-          setGameOver(true);
-        }
-      }}
       disabled={disabled}
     >
       &nbsp;
@@ -65,7 +53,7 @@ function Field({ row, col, backgroundColor, disabled }) {
 }
 
 function Board() {
-  var fields = getColorBoard.map((subarr, row) =>
+  var fields = params.colorBoard.map((subarr, row) =>
     subarr.map((color, col) => {
       return (
         <Field
@@ -73,7 +61,7 @@ function Board() {
           row={row}
           col={col}
           backgroundColor={{ backgroundColor: color }}
-          disabled={row === 0 ? getGameOver : true}
+          disabled={row === 0 ? params.gameOver : true}
         />
       );
     })

src/fns.js

@@ -12,16 +12,17 @@ export function putChip(
         mem[row][col] = "red";
         setColorBoard(mem);
         setCurrentPlayer("yellow");
-        return row;
+        return [true, row];
       } else {
         let mem = colorBoard;
         mem[row][col] = "yellow";
         setColorBoard(mem);
         setCurrentPlayer("red");
-        return row;
+        return [true, row];
       }
     }
   }
+  return [false, null];
 }
 
 export function checkWin(row, col, colorBoard, currentPlayer) {
@@ -76,3 +77,30 @@ export function checkWin(row, col, colorBoard, currentPlayer) {
     return false;
   }
 }
+
+export function clickHandler(col, params) {
+  const [worked, currentChip] = putChip(
+    col,
+    params.colorBoard,
+    params.currentPlayer,
+    params.setColorBoard,
+    params.setCurrentPlayer
+  );
+  if (worked) {
+    params.setMessage("");
+    params.setTurns(params.turns + 1);
+
+    const win = checkWin(currentChip, col, params.colorBoard, params.currentPlayer);
+
+    if (win) {
+      params.setMessage(params.currentPlayer + " wins!");
+      params.setGameOver(true);
+
+    } else if (params.turns === 42) {
+      params.setMessage("draw!");
+      params.setGameOver(true);
+    }
+  } else {
+    params.setMessage("column is full!");
+  }
+}