Added board state to singleplayer

src/components/App/App.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { clickHandlerGamemode } from "./AppFunctions.js";
+import { clickHandlerGameMode } from "./AppFunctions.js";
 import "./App.css";
 import Board from "../Board/Board.jsx";
 
@@ -9,32 +9,32 @@ const App = () => {
   const [menu, setMenu] = useState(true);
   self.menu = menu;
   self.setMenu = setMenu;
-  const [gamemode, setGamemode] = useState(0);
+  const [gameMode, setGameMode] = useState(0);
-  self.gamemode = gamemode;
+  self.gameMode = gameMode;
-  self.setGamemode = setGamemode;
+  self.setGameMode = setGameMode;
 
   return (
     <div id="app-container">
       <Heading />
-      <Gamemode />
+      <GameMode />
       <Board />
       <Message />
     </div>
   );
 };
 
-const Gamemode = () => (
+const GameMode = () => (
   <div className="gamemode" hidden={!self.menu}>
     <button
       className="gamemode-selection"
-      onClick={async () => await clickHandlerGamemode(self, 1)}
+      onClick={async () => await clickHandlerGameMode(self, 1)}
     >
       singleplayer
     </button>
     <br />
     <button
       className="gamemode-selection"
-      onClick={async () => await clickHandlerGamemode(self, 2)}
+      onClick={async () => await clickHandlerGameMode(self, 2)}
     >
       multiplayer
     </button>

src/components/App/AppFunctions.js

@@ -1,4 +1,10 @@
-export const clickHandlerGamemode = async (self, gamemode) => {
+import { clickHandlerBotTurn } from "../Board/BoardFunctions";
+
+export const clickHandlerGameMode = async (self, gameMode) => {
   await self.setMenu(false);
-  await self.setGamemode(gamemode);
+  await self.setMessage("red's turn");
+  await self.setGameMode(gameMode);
+  if (gameMode === 1) {
+    await clickHandlerBotTurn(self, 0, true);
+  }
 };

src/components/Board/Board.jsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
 import {
-  clickHandlerTurn,
   clickHandlerRestart,
   clickHandlerReturn,
   clickHandlerLoadBoard,
   clickHandlerCopyClipboard,
+  clickHandlerBotTurn,
+  clickHandlerPlayerTurn,
 } from "./BoardFunctions.js";
 import "./Board.css";
 import { self } from "../App/App.jsx";
@@ -94,8 +95,12 @@ const Field = ({ row, col, style, disabled }) => {
       col={col}
       style={styling}
       onClick={async () => {
-        await clickHandlerTurn(self, col);
+        if (self.gameMode === 1) {
-        if (self.gamemode === 2) {
+          if ((await clickHandlerPlayerTurn(self, col)) && !self.gameOver) {
+            await clickHandlerBotTurn(self, col, true);
+          }
+        } else {
+          await clickHandlerPlayerTurn(self, col);
           self.currentPlayer === "red"
             ? setHoverColor("hsla(0, 100%, 80%, 1)")
             : setHoverColor("hsla(60, 100%, 80%, 1)");
@@ -134,7 +139,7 @@ const BoardState = () => {
   self.setShowCopy = setShowCopy;
 
   return (
-    <div hidden={self.gamemode !== 2}>
+    <div hidden={self.menu}>
       <div className="board-state">
         <div className="board-state-action">
           <button
@@ -165,13 +170,10 @@ const BoardState = () => {
         </div>
         <input
           className="board-state-number"
-          type="number"
+          type="text"
-          min="7"
+          value={inputDecimal}
-          max="6239465226101869857685537024892857210"
-          step="1"
-          value={inputDecimal === 0 ? "" : inputDecimal}
           name="board-state-input"
-          onChange={(i) => setInputDecimal(Math.floor(i.target.value))}
+          onChange={(i) => setInputDecimal(i.target.value)}
         />
       </div>
     </div>
@@ -188,8 +190,8 @@ const Restart = () => (
   <button
     className="action-button"
     id="restart"
-    hidden={!self.gameOver}
+    hidden={!self.gameOver || !self.turns > 0}
-    onClick={() => clickHandlerRestart(self)}
+    onClick={() => clickHandlerRestart(self, true)}
   >
     &#8634;
   </button>

src/components/Board/BoardFunctions.js

@@ -127,64 +127,66 @@ const decToSep = (dec) => {
   return res;
 };
 
-export const clickHandlerTurn = async (self, col) => {
+export const clickHandlerTurn = async (self, col, winStringPrefix) => {
-  const iMax = self.gamemode === 1 ? 2 : 1;
+  const memCurrentPlayer = self.currentPlayer;
 
-  for (let i = 0; i < iMax; i++) {
+  const worked = await putChip(
-    const memCurrentPlayer = self.currentPlayer;
+    col,
+    self.colorBoard,
+    self.currentPlayer,
+    self.setColorBoard,
+    self.setCurrentPlayer
+  );
 
-    const worked =
+  if (worked) {
-      i === 0
+    await self.setMessage(
-        ? await putChip(
+      self.gameMode === 2 ? self.currentPlayer + "'s turn" : ""
-            col,
+    );
-            self.colorBoard,
-            self.currentPlayer,
-            self.setColorBoard,
-            self.setCurrentPlayer
-          )
-        : await putChip(
-            botChoice(self.colorBoard),
-            self.colorBoard,
-            self.currentPlayer,
-            self.setColorBoard,
-            self.setCurrentPlayer
-          );
 
-    if (worked) {
+    const win = await checkWin(
-      await self.setMessage("");
+      self.colorBoard,
+      memCurrentPlayer,
+      self.outlineBoard,
+      self.setOutlineBoard
+    );
 
-      const win = await checkWin(
+    await self.setTurnsMem(col + self.turnsMem);
-        self.colorBoard,
+    await self.setTurns(self.turns + 1);
-        memCurrentPlayer,
+
-        self.outlineBoard,
+    if (win) {
-        self.setOutlineBoard
+      await self.setMessage(
+        self.gameMode === 1
+          ? winStringPrefix + " " + " wins!"
+          : winStringPrefix + " " + memCurrentPlayer + " wins!"
       );
-
+      await self.setGameOver(true);
-      await self.setTurnsMem(col + self.turnsMem);
+    } else if (self.turns === 42) {
-      await self.setTurns(self.turns + 1);
+      await self.setMessage("draw!");
-
+      await self.setGameOver(true);
-      if (win) {
-        const mem = i === 1 ? "bot " : "player ";
-        await self.setMessage(mem + memCurrentPlayer + " wins!");
-        await self.setGameOver(true);
-        break;
-      } else if (self.turns === 42) {
-        await self.setMessage("draw!");
-        await self.setGameOver(true);
-        break;
-      }
-    } else {
-      self.setMessage("column is full!");
-      break;
     }
-  }
-
-  if (self.gamemode === 2) {
     await self.setBoardDecimal(sepToDec(self.turnsMem).toString());
+    return true;
+  } else {
+    self.setMessage("column is full!");
+    return false;
   }
 };
 
-export const clickHandlerRestart = async (self) => {
+export const clickHandlerPlayerTurn = async (self, col) => {
+  return await clickHandlerTurn(self, col, "player");
+};
+
+export const clickHandlerBotTurn = async (self, col, random) => {
+  let botCol = 0;
+  if (random) {
+    botCol = botChoice(self.colorBoard);
+  } else {
+    botCol = col;
+  }
+  return await clickHandlerTurn(self, botCol, "bot");
+};
+
+export const clickHandlerRestart = async (self, autoPut) => {
   await self.setTurns(0);
   await self.setGameOver(false);
   await self.setCurrentPlayer("red");
@@ -194,10 +196,13 @@ export const clickHandlerRestart = async (self) => {
   await self.setOutlineBoard(
     Array.from(Array(6), () => new Array(7).fill("0px solid black"))
   );
-  await self.setMessage("");
+  await self.setMessage("red's turn");
   await self.setTurnsMem("");
   await self.setBoardDecimal("");
   await self.setInputDecimal("");
+  if (self.gameMode === 1 && autoPut) {
+    await clickHandlerBotTurn(self, 0, true);
+  }
 };
 
 export const clickHandlerReturn = async (self) => {
@@ -218,12 +223,31 @@ export const clickHandlerReturn = async (self) => {
 };
 
 export const clickHandlerLoadBoard = async (self, dec) => {
-  let sep = decToSep(dec);
+  let sep = "";
-  await clickHandlerRestart(self);
+
+  try {
+    sep = decToSep(dec);
+  } catch {
+    await clickHandlerRestart(self, false);
+    if (self.gameMode === 1) {
+      await clickHandlerBotTurn(self, 0, true);
+    }
+    return;
+  }
+
+  await clickHandlerRestart(self, false);
 
   while (sep.length) {
-    await clickHandlerTurn(self, sep[sep.length - 1]);
+    if (sep.length % 2 != 0) {
-    sep = sep.slice(0, -1);
+      await clickHandlerPlayerTurn(self, sep[sep.length - 1]);
+      sep = sep.slice(0, -1);
+    } else {
+      await clickHandlerBotTurn(self, sep[sep.length - 1], false);
+      sep = sep.slice(0, -1);
+    }
+  }
+  if (self.gameMode === 1 && self.currentPlayer === "red" && !self.gameOver) {
+    await clickHandlerBotTurn(self, 0, true);
   }
 };
 
@@ -232,5 +256,5 @@ export const clickHandlerCopyClipboard = async (self) => {
   self.setShowCopy(true);
   setTimeout(() => {
     self.setShowCopy(false);
-  }, 1500);
+  }, 1000);
 };