Turn history is now displaying turns as column instead of states

src/components/Board/Board.css

@@ -1,11 +1,11 @@
 .board-outer {
     display: grid;
-    grid-template-columns: 560px 500px;
+    grid-template-columns: 560px 250px;
     grid-template-rows: 480px 160px;
     grid-template-areas: 
     "board table"
     "state action";
-    width: 1060px;
+    width: 810px;
     border: 5px solid black;
     background-color: blue;
     margin-top: 30px;
@@ -39,7 +39,7 @@
 }
 
 .action-button {
-    width: 160px;
+    width: 120px;
     height: 60px;
     font-size: larger;
     border: 3px solid black;
@@ -119,11 +119,10 @@ th, td {
     width: 100%;
     border: 3px solid black;
     background-color: lightgray;
-    text-align: left;
+    text-align: center;
   }
 
 table .action-button{
-    text-align: left;
     font-size: medium;
     width: auto;
     height: 30px;

src/components/Board/Board.jsx

@@ -194,7 +194,7 @@ function TurnDisplay() {
         <thead>
           <tr>
             <th>turn</th>
-            <th>state</th>
+            <th>column</th>
           </tr>
         </thead>
         <tbody>
@@ -203,21 +203,27 @@ function TurnDisplay() {
               <tr key={element}>
                 <td
                   className="action-button"
-                  onClick={() => clickHandlerLoadBoard(self, element)}
+                  onClick={() =>
+                    clickHandlerLoadBoard(self, element.split(" ")[0])
+                  }
                 >
+                  {index + 1}
+                  <br />
                   {self.gameMode === 2
                     ? index % 2 === 0
-                      ? index + 1 + " (red)"
+                      ? "(red)"
-                      : index + 1 + " (yellow)"
+                      : "(yellow)"
                     : index % 2 === 0
-                    ? index + 1 + " (bot)"
+                    ? "(bot)"
-                    : index + 1 + " (player)"}
+                    : "(player)"}
                 </td>
                 <td
                   className="action-button"
-                  onClick={() => clickHandlerLoadBoard(self, element)}
+                  onClick={() =>
+                    clickHandlerLoadBoard(self, element.split(" ")[0])
+                  }
                 >
-                  {element}
+                  {element.split(" ")[1]}
                 </td>
               </tr>
             );

src/components/Board/BoardFunctions.js

@@ -166,7 +166,7 @@ export const clickHandlerTurn = async (self, col, winStringPrefix) => {
     }
     await self.setBoardDecimal(sepToDec(self.turnsMem).toString());
     const memTurnsDisplay = self.turnsDisplay;
-    memTurnsDisplay.push(self.boardDecimal);
+    memTurnsDisplay.push(self.boardDecimal + " " + (parseInt(col) + 1));
     await self.setTurnsDisplay(memTurnsDisplay);
     return true;
   } else {