Added state jumper window singleplayer and multiplayer

src/components/Board/Board.css

@@ -1,21 +1,25 @@
 .board-outer {
-    width: 600px;
+    display: grid;
+    grid-template-columns: 560px 500px;
+    grid-template-rows: 480px 160px;
+    grid-template-areas: 
+    "board table"
+    "state action";
+    width: 1060px;
     border: 5px solid black;
     background-color: blue;
     margin-top: 30px;
     margin-left: auto;
     margin-right: auto;
+    padding: 20px;
 }
 
 .board-inner {
-    width: 560px;
-    height: 480px;
+    grid-area: board;
+    width: auto;
+    height: auto;
     display: grid;
     grid-template-columns: repeat(7, auto [col-start]);
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 20px;
-    margin-bottom: 20px;
 }
 
 .board-inner .field {
@@ -26,23 +30,22 @@
 }
 
 .board-action{
+    grid-area: action;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 30px;
-    margin-bottom: 30px;
 }
 
 .action-button {
-    width: 17%;
+    width: 160px;
     height: 60px;
     font-size: larger;
     border: 3px solid black;
     background-color: white;
-    margin-left: 3%;
-    margin-right: 3%;
+    margin-left: 5%;
+    margin-right: 5%;
 }
 
 #restart{
@@ -55,34 +58,72 @@
 }
 
 .board-state{
+    grid-area: state;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.board-state-line{
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 90%;
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 20px;
     margin-top: 10px;
 }
 
 .board-state-action{
-    margin-right: 3%;
+    margin-right: 5%;
+}
+
+.board-state-action .action-button{
+    margin: 0%;
 }
 
 .board-state-number{
     height: 40px;
-    width: 60%;
+    width: 65%;
     border: 3px solid black;
     font-size: medium;
 }
 
-.board-state .board-action{
+.board-state-line .board-action{
     margin-top: 0px;
     margin-bottom: 0px;
 }
 
-.board-state .action-button{
-    width: 100px;
+.board-state-line .action-button{
+    width: 120px;
     height: 48px;
 }
 
+.turns-display{
+    overflow-y: scroll;
+}
+
+table{
+    border-spacing: 10px;
+    width: auto;
+    grid-area: table;
+    margin-left: 10px;
+    margin-right: auto;
+}
+
+thead{
+    font-size: larger;
+}
+
+th, td {
+    padding:10px;
+    width: 100%;
+    border: 3px solid black;
+    background-color: lightgray;
+    text-align: left;
+  }
+
+table .action-button{
+    text-align: left;
+    font-size: medium;
+    width: auto;
+    height: 30px;
+}

src/components/Board/Board.jsx

@@ -31,14 +31,6 @@ const Board = () => {
   self.currentPlayer = currentPlayer;
   self.setCurrentPlayer = setCurrentPlayer;
 
-  const [turns, setTurns] = useState(0);
-  self.turns = turns;
-  self.setTurns = setTurns;
-
-  const [turnsMem, setTurnsMem] = useState("");
-  self.turnsMem = turnsMem;
-  self.setTurnsMem = setTurnsMem;
-
   const fields = colorBoard.map((subarr, row) =>
     subarr.map((color, col) => {
       return (
@@ -58,11 +50,14 @@ const Board = () => {
     })
   );
 
+  const display = self.menu ? "none" : "grid";
+
   return (
-    <div className="board-outer" hidden={self.menu}>
+    <div className="board-outer" style={{ display: display }}>
       <div className="board-inner">
         {fields.map((subarr) => subarr.map((field) => field))}
       </div>
+      <TurnDisplay />
       <BoardState />
       <div className="board-action">
         <Return />
@@ -139,8 +134,8 @@ const BoardState = () => {
   self.setShowCopy = setShowCopy;
 
   return (
-    <div hidden={self.menu}>
-      <div className="board-state">
+    <div className="board-state" hidden={self.menu}>
+      <div className="board-state-line">
         <div className="board-state-action">
           <button
             className="action-button"
@@ -159,7 +154,7 @@ const BoardState = () => {
           name="board-state-output"
         />
       </div>
-      <div className="board-state">
+      <div className="board-state-line">
         <div className="board-state-action">
           <button
             className="action-button"
@@ -180,6 +175,59 @@ const BoardState = () => {
   );
 };
 
+function TurnDisplay() {
+  const [turns, setTurns] = useState(0);
+  self.turns = turns;
+  self.setTurns = setTurns;
+
+  const [turnsMem, setTurnsMem] = useState("");
+  self.turnsMem = turnsMem;
+  self.setTurnsMem = setTurnsMem;
+
+  const [turnsDisplay, setTurnsDisplay] = useState([]);
+  self.turnsDisplay = turnsDisplay;
+  self.setTurnsDisplay = setTurnsDisplay;
+
+  return (
+    <div className="turns-display">
+      <table>
+        <thead>
+          <tr>
+            <th>turn</th>
+            <th>state</th>
+          </tr>
+        </thead>
+        <tbody>
+          {turnsDisplay.map((element, index) => {
+            return (
+              <tr key={element}>
+                <td
+                  className="action-button"
+                  onClick={() => clickHandlerLoadBoard(self, element)}
+                >
+                  {self.gameMode === 2
+                    ? index % 2 === 0
+                      ? index + 1 + " (red)"
+                      : index + 1 + " (yellow)"
+                    : index % 2 === 0
+                    ? index + 1 + " (bot)"
+                    : index + 1 + " (player)"}
+                </td>
+                <td
+                  className="action-button"
+                  onClick={() => clickHandlerLoadBoard(self, element)}
+                >
+                  {element}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 const Return = () => (
   <button className="action-button" onClick={() => clickHandlerReturn(self)}>
     menu

src/components/Board/BoardFunctions.js

@@ -165,6 +165,9 @@ export const clickHandlerTurn = async (self, col, winStringPrefix) => {
       await self.setGameOver(true);
     }
     await self.setBoardDecimal(sepToDec(self.turnsMem).toString());
+    const memTurnsDisplay = self.turnsDisplay;
+    memTurnsDisplay.push(self.boardDecimal);
+    await self.setTurnsDisplay(memTurnsDisplay);
     return true;
   } else {
     self.setMessage("column is full!");
@@ -187,7 +190,6 @@ export const clickHandlerBotTurn = async (self, col, random) => {
 };
 
 export const clickHandlerRestart = async (self, autoPut) => {
-  await self.setTurns(0);
   await self.setGameOver(false);
   await self.setCurrentPlayer("red");
   await self.setColorBoard(
@@ -197,7 +199,9 @@ export const clickHandlerRestart = async (self, autoPut) => {
     Array.from(Array(6), () => new Array(7).fill("0px solid black"))
   );
   await self.setMessage("red's turn");
+  await self.setTurns(0);
   await self.setTurnsMem("");
+  await self.setTurnsDisplay([]);
   await self.setBoardDecimal("");
   await self.setInputDecimal("");
   if (self.gameMode === 1 && autoPut) {
@@ -218,6 +222,7 @@ export const clickHandlerReturn = async (self) => {
   );
   await self.setMessage("");
   await self.setTurnsMem("");
+  await self.setTurnsDisplay([]);
   await self.setBoardDecimal("");
   await self.setInputDecimal("");
 };