Added gamemode ui and singleplayer

src/App.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { clickHandlerTurn, clickHandlerRestart } from "./functions";
+import { clickHandlerTurn, clickHandlerRestart, clickHandlerGamemode } from "./functions";
 
 let params = {};
 
@@ -22,18 +22,27 @@ export default function App() {
   params.message = message;
   params.setMessage = setMessage;
 
-  const [turns, setTurns] = useState(1);
+  const [turns, setTurns] = useState(0);
   params.turns = turns;
   params.setTurns = setTurns;
 
+  const [menu, setMenu] = useState(true);
+  params.menu = menu;
+  params.setMenu = setMenu;
+
+  const [gamemode, setGamemode] = useState(0);
+  params.gamemode = gamemode;
+  params.setGamemode = setGamemode;
+
 
 
   return (
     <>
       <h1>CONNECT4</h1>
-      <Board />
-      <Restart />
-      <p>{params.message}</p>
+      <Gamemode />
+      {!params.menu && <Board />}
+      {!params.menu && <Restart />}
+      {!params.menu && <p>{params.message}</p>}
     </>
   );
 }
@@ -76,7 +85,19 @@ function Board() {
 }
 
 function Restart() {
-  return (< button className="restart" disabled={!params.gameOver} hidden={!params.gameOver} onClick={() => clickHandlerRestart(params)}>
+  return (< button className="restart" hidden={!params.gameOver} onClick={() => clickHandlerRestart(params)}>
     &#8634;
   </button >);
 }
+
+function Gamemode() {
+  return <div className="gamemode-div" hidden={!params.menu}>
+    <button className="gamemode-button" onClick={() => clickHandlerGamemode(params, 1)}>
+      singleplayer
+    </button>
+    <br />
+    <button className="gamemode-button" onClick={() => clickHandlerGamemode(params, 2)}>
+      multiplayer
+    </button>
+  </div>
+}

src/functions.js

@@ -1,4 +1,4 @@
-export function putChip(
+async function putChip(
   col,
   colorBoard,
   currentPlayer,
@@ -10,14 +10,14 @@ export function putChip(
       if (currentPlayer === "red") {
         let mem = colorBoard;
         mem[row][col] = "red";
-        setColorBoard(mem);
-        setCurrentPlayer("yellow");
+        await setColorBoard(mem);
+        await setCurrentPlayer("yellow");
         return [true, row];
       } else {
         let mem = colorBoard;
         mem[row][col] = "yellow";
-        setColorBoard(mem);
-        setCurrentPlayer("red");
+        await setColorBoard(mem);
+        await setCurrentPlayer("red");
         return [true, row];
       }
     }
@@ -25,7 +25,7 @@ export function putChip(
   return [false, null];
 }
 
-export function checkWin(row, col, colorBoard, currentPlayer) {
+function checkWin(row, col, colorBoard, currentPlayer) {
   if (
     (row <= 2 &&
       colorBoard[row][col] === currentPlayer &&
@@ -78,36 +78,79 @@ export function checkWin(row, col, colorBoard, currentPlayer) {
   }
 }
 
-export function clickHandlerTurn(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);
+function botChoice(colorBoard) {
+  while (true) {
+    const rand = Math.floor(Math.random() * 7)
+    if (colorBoard[0][rand] === "white") {
+      return rand;
     }
-  } else {
-    params.setMessage("column is full!");
   }
 }
 
+export async function clickHandlerTurn(col, params) {
+
+  const iMax = params.gamemode === 1 ? 2 : 1;
+
+  for (let i = 0; i < iMax; i++) {
+
+    const memCurrentPlayer = params.currentPlayer;
+
+    const botMove = i !== 0 && botChoice(params.colorBoard);
+
+    const [worked, currentChip] = i === 0 ?
+      await putChip(
+        col,
+        params.colorBoard,
+        params.currentPlayer,
+        params.setColorBoard,
+        params.setCurrentPlayer
+      ) : await putChip(
+        botMove,
+        params.colorBoard,
+        params.currentPlayer,
+        params.setColorBoard,
+        params.setCurrentPlayer
+      );
+
+    if (worked) {
+      await params.setMessage("");
+
+      const actualMove = i === 0 ? col : botMove;
+
+      const win = checkWin(currentChip, actualMove, params.colorBoard, memCurrentPlayer);
+
+      await params.setTurns(params.turns + 1);
+
+      if (win) {
+        const mem = i === 1 ? "bot " : "player ";
+        await params.setMessage(mem + memCurrentPlayer + " wins!");
+        await params.setGameOver(true);
+        await params.setCurrentPlayer("red");
+        break;
+
+      } else if (params.turns === 42) {
+        await params.setMessage("draw!");
+        await params.setGameOver(true);
+        await params.setCurrentPlayer("red")
+        break;
+      }
+    } else {
+      params.setMessage("column is full!");
+      break;
+    }
+  }
+
+
+}
+
 export function clickHandlerRestart(params) {
-  params.setTurns(1);
+  params.setTurns(0);
   params.setGameOver(false);
   params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white")));
   params.setMessage("");
 }
+
+export function clickHandlerGamemode(params, gamemode) {
+  params.setMenu(false);
+  params.setGamemode(gamemode);
+}

src/index.css

@@ -1,6 +1,7 @@
 body {
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
+    color: black;
 }
 
 .board {
@@ -23,9 +24,29 @@ body {
     width: 100px;
     height: 60px;
     font-size: xx-large;
-    border: 5px solid black;
-    color: white;
-    background-color: blue;
+    border: 3px solid black;
+    background-color: white;
     margin-top: 20px;
 
+}
+
+.gamemode-div {
+
+    margin-left: auto;
+    margin-right: auto;
+    width: 300px;
+    height: 202px;
+    border: 5px solid black;
+
+    background-color: blue;
+
+}
+
+.gamemode-div .gamemode-button {
+    margin-top: 34px;
+    border: 3px solid black;
+    width: 50%;
+    height: 50px;
+    font-size: larger;
+
 }