src/js/Components.js

@@ -109,6 +109,7 @@ export function App()
  */
 export function Board({ board })
 {
+    console.log(board);
     let fields = board.flatMap((row) => row);
 
     return [

src/styles/style.css

@@ -1,52 +1,23 @@
-body {
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-button {
-    padding: 0.5rem;
-    font-size: 1.3rem;
-    transition: 0.3s background-color ease-in-out;
-    background-color: azure;
-    border: lightblue solid 1px;
-    border-radius: 4px;
-}
-
-button:hover {
-    background-color: lightblue;
-}
-
-button:active {
-    background-color: rgb(96, 190, 221);
-}
-
 div {
     box-sizing: border-box;
 }
 
 .board {
-    width: 84vmin;
+    width: min(84vw, 84vh);
     margin: 10px auto;
     outline: 1px solid black;
 }
 
 .board .field {
     border: 1px solid black;
-    width: 12vmin;
-    height: 12vmin;
+    width: min(12vw, 12vh);
+    height: min(12vw, 12vh);
     display: flex;
     align-items: center;
     justify-content: center;
     float: left;
 }
 
-.game.winner.r .board, .game.winner.r .log {
-    background-color: pink;
-}
-
-.game.winner.b .board, .game.winner.b .log {
-    background-color: lightblue;
-}
-
 .board .row .field:first-child {
     clear: both;
 }
@@ -64,21 +35,3 @@ div {
 .board .field .red {
     background-color: red;
 }
-
-.log {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    text-align: center;
-}
-
-.game.winner .log {
-    font-size: 3rem;
-}
-
-.game .menu-bar {
-    text-align: center;
-}
-
-.game .menu-bar button {
-    margin: 0 5px 5px 0;
-}