Added menu button

src/App.jsx

@@ -1,7 +1,12 @@
 import { useState } from "react";
-import { clickHandlerTurn, clickHandlerRestart, clickHandlerGamemode } from "./functions";
+import {
+  clickHandlerTurn,
+  clickHandlerRestart,
+  clickHandlerGamemode,
+  clickHandlerReturn,
+} from "./functions";
 
-let params = {};
+const params = {};
 
 export default function App() {
   const [colorBoard, setColorBoard] = useState(
@@ -34,7 +39,6 @@ export default function App() {
   params.gamemode = gamemode;
   params.setGamemode = setGamemode;
 
-
   return (
     <>
       <Heading />
@@ -47,7 +51,10 @@ export default function App() {
 
 function Field({ row, col, style, disabled }) {
   const [pointer, setPointer] = useState(false);
-  const styling = { backgroundColor: style.backgroundColor, cursor: pointer && "pointer" };
+  const styling = {
+    backgroundColor: style.backgroundColor,
+    cursor: pointer && "pointer",
+  };
 
   return (
     <button
@@ -57,8 +64,12 @@ function Field({ row, col, style, disabled }) {
       style={styling}
       onClick={() => clickHandlerTurn(col, params)}
       disabled={disabled}
-      onMouseEnter={() => { !disabled && !params.gameOver && setPointer(true) }}
+      onMouseEnter={() => {
-      onMouseLeave={() => { params.gameOver && setPointer(false) }}
+        !disabled && !params.gameOver && setPointer(true);
+      }}
+      onMouseLeave={() => {
+        params.gameOver && setPointer(false);
+      }}
     >
       &nbsp;
     </button>
@@ -66,8 +77,7 @@ function Field({ row, col, style, disabled }) {
 }
 
 function Board() {
-
+  const fields = params.colorBoard.map((subarr, row) =>
-  let fields = params.colorBoard.map((subarr, row) =>
     subarr.map((color, col) => {
       return (
         <Field
@@ -76,7 +86,6 @@ function Board() {
           col={col}
           style={{ backgroundColor: color }}
           disabled={row === 0 ? params.gameOver : true}
-
         />
       );
     })
@@ -89,39 +98,68 @@ function Board() {
       <div className="board-inner">
         {fields.map((subarr) => subarr.map((field) => field))}
       </div>
+      <Return />
+      <br />
       <Restart />
     </div>
   );
 }
 
 function Restart() {
-  return (< button className="restart" hidden={!params.gameOver} onClick={() => clickHandlerRestart(params)}>
+  return (
-    &#8634;
+    <button
-  </button >);
+      className="inner-button"
+      id="restart"
+      hidden={!params.gameOver}
+      onClick={() => clickHandlerRestart(params)}
+    >
+      &#8634;
+    </button>
+  );
+}
+
+function Return() {
+  return (
+    <button className="inner-button" onClick={() => clickHandlerReturn(params)}>
+      menu
+    </button>
+  );
 }
 
 function Gamemode() {
-  return <div className="gamemode-div" hidden={!params.menu}>
+  return (
-    <button className="gamemode-button" onClick={() => clickHandlerGamemode(params, 1)}>
+    <div className="gamemode-div" hidden={!params.menu}>
-      singleplayer
+      <button
-    </button>
+        className="gamemode-button"
-    <br />
+        onClick={() => clickHandlerGamemode(params, 1)}
-    <button className="gamemode-button" onClick={() => clickHandlerGamemode(params, 2)}>
+      >
-      multiplayer
+        singleplayer
-    </button>
+      </button>
-  </div>
+      <br />
+      <button
+        className="gamemode-button"
+        onClick={() => clickHandlerGamemode(params, 2)}
+      >
+        multiplayer
+      </button>
+    </div>
+  );
 }
 
 function Message() {
   const displayMem = params.menu ? "none" : "";
-  return <p className="message" style={{ display: displayMem }}>
+  return (
-    {params.message}
+    <p className="message" style={{ display: displayMem }}>
-  </p>
+      {params.message}
+    </p>
+  );
 }
 
 function Heading() {
   const displayMem = !params.menu ? "none" : "";
-  return <h1 className="heading" style={{ display: displayMem }}>
+  return (
-    CONNECT4
+    <h1 className="heading" style={{ display: displayMem }}>
-  </h1>
+      CONNECT4
-}
+    </h1>
+  );
+}

src/functions.js

@@ -26,12 +26,13 @@ async function putChip(
 }
 
 async function checkWin(colorBoard, setColorBoard, currentPlayer) {
-
   const mem = colorBoard;
 
   for (let row = 0; row <= 5; row++) {
     for (let col = 0; col <= 6; col++) {
-      if (row <= 2 && mem[row][col] === currentPlayer &&
+      if (
+        row <= 2 &&
+        mem[row][col] === currentPlayer &&
         mem[row + 1][col] === currentPlayer &&
         mem[row + 2][col] === currentPlayer &&
         mem[row + 3][col] === currentPlayer
@@ -41,7 +42,9 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) {
         }
         await setColorBoard(mem);
         return true;
-      } else if (col <= 3 && mem[row][col] === currentPlayer &&
+      } else if (
+        col <= 3 &&
+        mem[row][col] === currentPlayer &&
         mem[row][col + 1] === currentPlayer &&
         mem[row][col + 2] === currentPlayer &&
         mem[row][col + 3] === currentPlayer
@@ -51,7 +54,10 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) {
         }
         await setColorBoard(mem);
         return true;
-      } else if (row <= 2 && col <= 3 && mem[row][col] === currentPlayer &&
+      } else if (
+        row <= 2 &&
+        col <= 3 &&
+        mem[row][col] === currentPlayer &&
         mem[row + 1][col + 1] === currentPlayer &&
         mem[row + 2][col + 2] === currentPlayer &&
         mem[row + 3][col + 3] === currentPlayer
@@ -61,7 +67,10 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) {
         }
         await setColorBoard(mem);
         return true;
-      } else if (row <= 2 && col <= 3 && mem[row][col + 3] === currentPlayer &&
+      } else if (
+        row <= 2 &&
+        col <= 3 &&
+        mem[row][col + 3] === currentPlayer &&
         mem[row + 1][col + 2] === currentPlayer &&
         mem[row + 2][col + 1] === currentPlayer &&
         mem[row + 3][col] === currentPlayer
@@ -76,12 +85,11 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) {
   }
 
   return false;
-
 }
 
 function botChoice(colorBoard) {
   while (true) {
-    const rand = Math.floor(Math.random() * 7)
+    const rand = Math.floor(Math.random() * 7);
     if (colorBoard[0][rand] === "white") {
       return rand;
     }
@@ -89,32 +97,36 @@ function botChoice(colorBoard) {
 }
 
 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 worked = i === 0 ?
+    const worked =
-      await putChip(
+      i === 0
-        col,
+        ? await putChip(
-        params.colorBoard,
+            col,
-        params.currentPlayer,
+            params.colorBoard,
-        params.setColorBoard,
+            params.currentPlayer,
-        params.setCurrentPlayer
+            params.setColorBoard,
-      ) : await putChip(
+            params.setCurrentPlayer
-        botChoice(params.colorBoard),
+          )
-        params.colorBoard,
+        : await putChip(
-        params.currentPlayer,
+            botChoice(params.colorBoard),
-        params.setColorBoard,
+            params.colorBoard,
-        params.setCurrentPlayer
+            params.currentPlayer,
-      );
+            params.setColorBoard,
+            params.setCurrentPlayer
+          );
 
     if (worked) {
       await params.setMessage("");
 
-      const win = await checkWin(params.colorBoard, params.setColorBoard, memCurrentPlayer);
+      const win = await checkWin(
+        params.colorBoard,
+        params.setColorBoard,
+        memCurrentPlayer
+      );
 
       await params.setTurns(params.turns + 1);
 
@@ -124,11 +136,10 @@ export async function clickHandlerTurn(col, params) {
         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")
+        await params.setCurrentPlayer("red");
         break;
       }
     } else {
@@ -136,8 +147,6 @@ export async function clickHandlerTurn(col, params) {
       break;
     }
   }
-
-
 }
 
 export function clickHandlerRestart(params) {
@@ -151,3 +160,11 @@ export function clickHandlerGamemode(params, gamemode) {
   params.setMenu(false);
   params.setGamemode(gamemode);
 }
+
+export function clickHandlerReturn(params) {
+  params.setMenu(true);
+  params.setTurns(0);
+  params.setGameOver(false);
+  params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white")));
+  params.setMessage("");
+}

src/index.css

@@ -30,17 +30,21 @@ body {
     margin: 10px;
 }
 
-.restart {
+.inner-button {
     width: 100px;
     height: 60px;
-    font-size: xx-large;
+    font-size: larger;
     border: 3px solid black;
     background-color: white;
     margin-bottom: 30px;
 
 }
 
-.restart:hover {
+#restart{
+    font-size: x-large;
+}
+
+.inner-button:hover {
     cursor: pointer;
     background-color: lightgray;
 }