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