2211482
/
CONNECT4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added board state to singleplayer

main
Selim Eser 2025-01-02 21:42:46 +01:00
parent bc6b3f9487
commit 37755c233f
4 changed files with 108 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/App/App.jsx
View File

@ -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 (
<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>

10
src/components/App/AppFunctions.js
View File

@ -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);
}
};

26
src/components/Board/Board.jsx
View File

@ -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 (
<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"
min="7"
max="6239465226101869857685537024892857210"
step="1"
value={inputDecimal === 0 ? "" : inputDecimal}
type="text"
value={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}
onClick={() => clickHandlerRestart(self)}
hidden={!self.gameOver || !self.turns > 0}
onClick={() => clickHandlerRestart(self, true)}
>
&#8634;
</button>

132
src/components/Board/BoardFunctions.js
View File

@ -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);
};