Dynamically size gameboard

michaeldoylecs · Dec 2, 2024 · d76018d · d76018d
1 parent 5235c40
commit d76018d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/minesweeper/Minesweeper.css b/src/minesweeper/Minesweeper.css
@@ -8,13 +8,12 @@
 
 .board-tile {
     cursor: pointer;
-    width: 24px;
-    height: 24px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-content: center;
     font-weight: bold;
+    font-size: 1em;
 }
 
 .tile-hidden {
@@ -24,7 +23,7 @@
 .tile-hidden:hover {
     background-color: lightgray;
     transition-timing-function: ease-out;
-    transition-duration: 200ms;
+    transition-duration: 150ms;
 }
 
 .tile-visible { 
@@ -33,4 +32,4 @@
 
 .tile-bomb {
     background-color: red;
-}
+}
diff --git a/src/minesweeper/Minesweeper.tsx b/src/minesweeper/Minesweeper.tsx
@@ -42,7 +42,6 @@ function Minesweeper() {
     });
     const rowCount = game.board.length;
     const columnCount = game.board[0].length;
-    const tileSize = 24;
 
     const parseTileCoordinates = (tile: EventTarget & Element): [number, number] => {
         const x = parseInt(tile.getAttribute('data-x') ?? '-1');
@@ -83,8 +82,7 @@ function Minesweeper() {
 
     const boardTileStyle = {
         cursor: 'pointer',
-        width: `${tileSize}px`,
-        height: `${tileSize}px`,
+        justifySelf: 'stretch',
     }
 
     const GameBoardComponent = observer((observable: { game: MinesweeperGame }) => 
@@ -138,7 +136,12 @@ function Minesweeper() {
         columnGap: '2px',
         rowGap: '2px',
         justifyItems: 'center',
-        width: `${(tileSize + 2) * width - 2}px`,
+        minWidth: `500px`,
+        minHeight: `500px`,
+        width: `70vh`,
+        height: `70vh`,
+        maxWidth: `70vw`,
+        maxHeight: `70vw`,
         backgroundColor: 'whitesmoke',
         border: '2px solid black',
         padding: '2px',