Added sep-dec and dec-sep serialization multiplayer

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 (
     <>
       <Heading />
@@ -125,15 +132,19 @@ function Board() {
   );
 
   const displayMem = params.menu ? "none" : "";
+  const displayState = params.gamemode === 1 ? "none" : "";
 
   return (
     <div className="board-outer" style={{ display: displayMem }}>
       <div className="board-inner">
         {fields.map((subarr) => subarr.map((field) => field))}
       </div>
-      <Return />
+      <BoardState display={displayState} />
       <br />
-      <Restart />
+      <div className="action-bar">
+        <Return />
+        <Restart />
+      </div>
     </div>
   );
 }
@@ -196,3 +207,55 @@ function Heading() {
     </h1>
   );
 }
+
+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 (
+    <div style={{ display: display }}>
+      <div className="board-state">
+        <div className="field-div">
+          <button
+            className="inner-button"
+            onClick={() => {
+              clickHandlerCopyClipboard(params);
+            }}
+          >
+            state
+          </button>
+        </div>
+        <input
+          className="board-rw"
+          id="1"
+          type="text"
+          readOnly={true}
+          value={showCopy ? "copied to clipboard!" : boardDecimal}
+        />
+      </div>
+      <div className="board-state">
+        <div className="field-div">
+          <button
+            className="inner-button"
+            onClick={() => clickHandlerLoadBoard(params, inputDecimal)}
+          >
+            load
+          </button>
+        </div>
+        <input
+          className="board-rw"
+          type="text"
+          value={inputDecimal}
+          onChange={(i) => setInputDecimal(i.target.value)}
+        />
+      </div>
+    </div>
+  );
+}

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

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