Added menu button

2024-12-28 17:49:24 +01:00 · 2024-12-28 17:49:24 +01:00 · 54e6312e19
parent 483f50327d
commit 54e6312e19
3 changed files with 118 additions and 59 deletions
--- a/src/App.jsx
+++ b/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) }}
-      onMouseLeave={() => { params.gameOver && setPointer(false) }}
+      onMouseEnter={() => {
+        !disabled && !params.gameOver && setPointer(true);
+      }}
+      onMouseLeave={() => {
+        params.gameOver && setPointer(false);
+      }}
    >
      &nbsp;
    </button>
@ -66,8 +77,7 @@ function Field({ row, col, style, disabled }) {
 }

 function Board() {
-
-  let fields = params.colorBoard.map((subarr, row) =>
+  const 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)}>
-    &#8634;
-  </button >);
+  return (
+    <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}>
-    <button className="gamemode-button" onClick={() => clickHandlerGamemode(params, 1)}>
-      singleplayer
-    </button>
-    <br />
-    <button className="gamemode-button" onClick={() => clickHandlerGamemode(params, 2)}>
-      multiplayer
-    </button>
-  </div>
+  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>
+  );
 }

 function Message() {
  const displayMem = params.menu ? "none" : "";
-  return <p className="message" style={{ display: displayMem }}>
-    {params.message}
-  </p>
+  return (
+    <p className="message" style={{ display: displayMem }}>
+      {params.message}
+    </p>
+  );
 }

 function Heading() {
  const displayMem = !params.menu ? "none" : "";
-  return <h1 className="heading" style={{ display: displayMem }}>
-    CONNECT4
-  </h1>
-}
+  return (
+    <h1 className="heading" style={{ display: displayMem }}>
+      CONNECT4
+    </h1>
+  );
+}
--- a/src/functions.js
+++ b/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 ?
-      await putChip(
-        col,
-        params.colorBoard,
-        params.currentPlayer,
-        params.setColorBoard,
-        params.setCurrentPlayer
-      ) : await putChip(
-        botChoice(params.colorBoard),
-        params.colorBoard,
-        params.currentPlayer,
-        params.setColorBoard,
-        params.setCurrentPlayer
-      );
+    const worked =
+      i === 0
+        ? await putChip(
+            col,
+            params.colorBoard,
+            params.currentPlayer,
+            params.setColorBoard,
+            params.setCurrentPlayer
+          )
+        : await putChip(
+            botChoice(params.colorBoard),
+            params.colorBoard,
+            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("");
+}
--- a/src/index.css
+++ b/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;
 }