diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index fa5cfed..4db59c4 100644
--- a/src/components/App/App.jsx
+++ b/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);
- self.gamemode = gamemode;
- self.setGamemode = setGamemode;
+ const [gameMode, setGameMode] = useState(0);
+ self.gameMode = gameMode;
+ self.setGameMode = setGameMode;
return (
diff --git a/src/components/App/AppFunctions.js b/src/components/App/AppFunctions.js
index 1f942e7..ee7f346 100644
--- a/src/components/App/AppFunctions.js
+++ b/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);
+ }
};
diff --git a/src/components/Board/Board.jsx b/src/components/Board/Board.jsx
index 167f7bb..de8df35 100644
--- a/src/components/Board/Board.jsx
+++ b/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 === 2) {
+ if (self.gameMode === 1) {
+ 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 (
-
+
@@ -188,8 +190,8 @@ const Restart = () => (
diff --git a/src/components/Board/BoardFunctions.js b/src/components/Board/BoardFunctions.js
index e90f828..61f6d7e 100644
--- a/src/components/Board/BoardFunctions.js
+++ b/src/components/Board/BoardFunctions.js
@@ -127,64 +127,66 @@ const decToSep = (dec) => {
return res;
};
-export const clickHandlerTurn = async (self, col) => {
- const iMax = self.gamemode === 1 ? 2 : 1;
+export const clickHandlerTurn = async (self, col, winStringPrefix) => {
+ const memCurrentPlayer = self.currentPlayer;
- for (let i = 0; i < iMax; i++) {
- const memCurrentPlayer = self.currentPlayer;
+ const worked = await putChip(
+ col,
+ self.colorBoard,
+ self.currentPlayer,
+ self.setColorBoard,
+ self.setCurrentPlayer
+ );
- const worked =
- i === 0
- ? await putChip(
- col,
- self.colorBoard,
- self.currentPlayer,
- self.setColorBoard,
- self.setCurrentPlayer
- )
- : await putChip(
- botChoice(self.colorBoard),
- self.colorBoard,
- self.currentPlayer,
- self.setColorBoard,
- self.setCurrentPlayer
- );
+ if (worked) {
+ await self.setMessage(
+ self.gameMode === 2 ? self.currentPlayer + "'s turn" : ""
+ );
- if (worked) {
- await self.setMessage("");
+ const win = await checkWin(
+ self.colorBoard,
+ memCurrentPlayer,
+ self.outlineBoard,
+ self.setOutlineBoard
+ );
- const win = await checkWin(
- self.colorBoard,
- memCurrentPlayer,
- self.outlineBoard,
- self.setOutlineBoard
+ await self.setTurnsMem(col + self.turnsMem);
+ await self.setTurns(self.turns + 1);
+
+ if (win) {
+ await self.setMessage(
+ self.gameMode === 1
+ ? winStringPrefix + " " + " wins!"
+ : winStringPrefix + " " + memCurrentPlayer + " wins!"
);
-
- await self.setTurnsMem(col + self.turnsMem);
- await self.setTurns(self.turns + 1);
-
- 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;
+ await self.setGameOver(true);
+ } else if (self.turns === 42) {
+ await self.setMessage("draw!");
+ await self.setGameOver(true);
}
- }
-
- 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);
- await clickHandlerRestart(self);
+ let sep = "";
+
+ 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]);
- sep = sep.slice(0, -1);
+ if (sep.length % 2 != 0) {
+ 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);
};