diff --git a/src/App.jsx b/src/App.jsx
index 8c496c6..773801e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,7 +4,10 @@ import {
clickHandlerRestart,
clickHandlerGamemode,
clickHandlerReturn,
+ clickHandlerLoadBoard,
+ clickHandlerCopyClipboard,
} from "./functions";
+import { use } from "react";
const params = {};
@@ -45,6 +48,10 @@ export default function App() {
params.gamemode = gamemode;
params.setGamemode = setGamemode;
+ const [turnsMem, setTurnsMem] = useState("");
+ params.turnsMem = turnsMem;
+ params.setTurnsMem = setTurnsMem;
+
return (
<>
@@ -125,15 +132,19 @@ function Board() {
);
const displayMem = params.menu ? "none" : "";
+ const displayState = params.gamemode === 1 ? "none" : "";
return (
{fields.map((subarr) => subarr.map((field) => field))}
-
+
-
+
+
+
+
);
}
@@ -196,3 +207,55 @@ function Heading() {
);
}
+
+function BoardState({ display }) {
+ const [boardDecimal, setBoardDecimal] = useState("");
+ params.boardDecimal = boardDecimal;
+ params.setBoardDecimal = setBoardDecimal;
+
+ const [inputDecimal, setInputDecimal] = useState("");
+ params.setInputDecimal = setInputDecimal;
+
+ const [showCopy, setShowCopy] = useState(false);
+ params.setShowCopy = setShowCopy;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
setInputDecimal(i.target.value)}
+ />
+
+
+ );
+}
diff --git a/src/functions.js b/src/functions.js
index b3cbd1c..5d43d2f 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -144,18 +144,17 @@ export async function clickHandlerTurn(params, col) {
params.setOutlineBoard
);
+ await params.setTurnsMem(col + params.turnsMem);
await params.setTurns(params.turns + 1);
if (win) {
const mem = i === 1 ? "bot " : "player ";
await params.setMessage(mem + memCurrentPlayer + " wins!");
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");
break;
}
} else {
@@ -163,30 +162,90 @@ export async function clickHandlerTurn(params, col) {
break;
}
}
+
+ if (params.gamemode === 2) {
+ await params.setBoardDecimal(sepToDec(params.turnsMem).toString());
+ }
}
-export function clickHandlerRestart(params) {
- params.setTurns(0);
- params.setGameOver(false);
- params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white")));
- params.setOutlineBoard(
+export async function clickHandlerRestart(params) {
+ await params.setTurns(0);
+ await params.setGameOver(false);
+ await params.setCurrentPlayer("red");
+ await params.setColorBoard(
+ Array.from(Array(6), () => new Array(7).fill("white"))
+ );
+ await params.setOutlineBoard(
Array.from(Array(6), () => new Array(7).fill("0px solid black"))
);
- params.setMessage("");
+ await params.setMessage("");
+ await params.setTurnsMem("");
+ await params.setBoardDecimal("");
+ await params.setInputDecimal("");
}
-export function clickHandlerGamemode(params, gamemode) {
- params.setMenu(false);
- params.setGamemode(gamemode);
+export async function clickHandlerGamemode(params, gamemode) {
+ await params.setMenu(false);
+ await 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.setOutlineBoard(
+export async function clickHandlerReturn(params) {
+ await params.setMenu(true);
+ await params.setTurns(0);
+ await params.setGameOver(false);
+ await params.setCurrentPlayer("red");
+ await params.setColorBoard(
+ Array.from(Array(6), () => new Array(7).fill("white"))
+ );
+ await params.setOutlineBoard(
Array.from(Array(6), () => new Array(7).fill("0px solid black"))
);
- params.setMessage("");
+ await params.setMessage("");
+ await params.setTurnsMem("");
+ await params.setBoardDecimal("");
+ await params.setInputDecimal("");
+}
+
+export async function clickHandlerLoadBoard(params, dec) {
+ let sep = decToSep(dec);
+ await clickHandlerRestart(params);
+
+ while (sep.length) {
+ await clickHandlerTurn(params, sep[sep.length - 1]);
+ sep = sep.slice(0, -1);
+ }
+}
+
+export async function clickHandlerCopyClipboard(params) {
+ navigator.clipboard.writeText(params.boardDecimal);
+ params.setShowCopy(true);
+ setTimeout(() => {
+ params.setShowCopy(false);
+ }, 1500);
+}
+
+function sepToDec(sep) {
+ let res = 0n;
+ let ind = 0n;
+ let mem = sep.split("").reverse().join("");
+ while (ind < mem.length) {
+ res = BigInt(7n ** ind * BigInt(mem[ind])) + res;
+ ind++;
+ }
+ res = BigInt(7n ** ind) + res;
+
+ return res;
+}
+
+function decToSep(dec) {
+ let mem = BigInt(dec);
+ let res = "";
+
+ while (mem > 0n) {
+ res = (mem % 7n).toString() + res;
+ mem = mem / 7n;
+ }
+ res = res.slice(1, res.length);
+
+ return res;
}
diff --git a/src/index.css b/src/index.css
index 5cd9786..b54211e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,13 +32,13 @@ body {
}
.inner-button {
- width: 100px;
+ width: 17%;
height: 60px;
font-size: larger;
border: 3px solid black;
background-color: white;
- margin-bottom: 30px;
-
+ margin-left: 3%;
+ margin-right: 3%;
}
#restart{
@@ -50,6 +50,23 @@ body {
background-color: lightgray;
}
+#board-load-button{
+ margin-left: 16.1%;
+}
+
+.flex-box .inner-button{
+ width: 200px;
+}
+
+.board-state .inner-button:disabled{
+ margin-left: 16.1%;
+ color: black;
+ background-color: lightgray;
+ border-color: black;
+ cursor: not-allowed ;
+}
+
+
.gamemode-div {
margin-left: auto;
@@ -57,7 +74,6 @@ body {
width: 300px;
height: 202px;
border: 5px solid black;
-
background-color: blue;
}
@@ -86,4 +102,42 @@ body {
.heading:hover{
font-size:3em;
+}
+
+.board-rw{
+ height: 40px;
+ width: 60%;
+ border: 3px solid black;
+ font-size: large;
+ margin-right: auto;
+}
+
+.board-state{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 90%;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 20px;
+ margin-top: 10px;
+}
+
+.action-bar{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 30px;
+}
+
+.board-state .inner-button{
+ width: 100px;
+ height: 48px;
+}
+
+.field-div{
+ width: 20%;
+ margin-left: auto;
}
\ No newline at end of file