Merge pull request #13 from jorendorff/grid-size

Make the CSS adapt to grid size.
skedwards88 · Oct 17, 2023 · 8a4ddf5 · 8a4ddf5
2 parents ca0fa7d + 3c334e1
commit 8a4ddf5
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 31 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,7 @@
 /* General */
 html {
-  --box-size: min(8vw, 5.5vh);
-  --default-font-size: calc(var(--box-size) * 0.9);
+  --default-box-size: min(8vw, 5.5vh);
+  --default-font-size: calc(var(--default-box-size) * 0.9);
   --dark-color: rgb(55 54 71);
   --shadow-color: rgba(20 19 25 / 50%);
   --drag-color: rgba(77 76 99);
@@ -176,7 +176,7 @@ input[type="range"]:focus::-ms-fill-upper {
   align-items: center;
   grid-area: controls;
   width: 100vw;
-  height: calc(var(--box-size) * 1.2);
+  height: calc(var(--default-box-size) * 1.2);
   border-bottom: 2px solid var(--light-color);
 }
 
@@ -296,6 +296,10 @@ a {
 
 #game {
   display: grid;
+  --box-size: min(
+    calc(66vh / var(--grid-rows)),
+    calc(96vw / var(--grid-columns))
+  );
   grid-area: game;
   grid-template-areas:
     "board"
@@ -305,16 +309,21 @@ a {
   -webkit-user-select: none;
 }
 
+#board,
+#drag-group,
+.piece {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), var(--box-size));
+  grid-template-rows: repeat(var(--grid-rows), var(--box-size));
+  width: calc(var(--grid-columns) * var(--box-size));
+  height: calc(var(--grid-rows) * var(--box-size));
+}
+
 #board {
   overflow: hidden;
   grid-area: board;
-  display: grid;
   touch-action: none;
   justify-content: center;
-  grid-template-columns: repeat(12, var(--box-size));
-  grid-template-rows: repeat(12, var(--box-size));
-  width: fit-content;
-  height: fit-content;
   justify-self: center;
   color: var(--light-color);
   border: 1px solid var(--light-color);
@@ -327,7 +336,7 @@ a {
   touch-action: none;
   align-items: center;
   justify-content: center;
-  font-size: var(--default-font-size);
+  font-size: calc(0.9 * var(--box-size));
   background-color: var(--dark-color);
   color: var(--light-color);
 }
@@ -361,8 +370,12 @@ a {
 #pool {
   grid-area: pool;
   width: 100%;
-  height: calc(88vh - (var(--box-size) * 12) - (var(--box-size) * 1.2));
-  height: calc(98svh - (var(--box-size) * 12) - (var(--box-size) * 1.2));
+  height: calc(
+    88vh - (var(--box-size) * var(--grid-rows)) - (var(--box-size) * 1.2)
+  );
+  height: calc(
+    98svh - (var(--box-size) * var(--grid-rows)) - (var(--box-size) * 1.2)
+  );
   display: flex;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -373,15 +386,9 @@ a {
 }
 
 .piece {
-  display: grid;
   touch-action: none;
   pointer-events: none;
-  grid-template-columns: repeat(var(--numCols), var(--box-size));
-  grid-template-rows: repeat(var(--numRows), var(--box-size));
   justify-content: center;
-  font-size: var(--default-font-size);
-  width: fit-content;
-  height: fit-content;
   align-content: center;
 }
 
@@ -395,12 +402,7 @@ a {
 }
 
 #drag-group {
-  display: grid;
   touch-action: none;
-  grid-template-columns: repeat(var(--group-columns), var(--box-size));
-  grid-template-rows: repeat(var(--group-rows), var(--box-size));
-  width: fit-content;
-  height: fit-content;
 }
 
 #drag-group .letter {
@@ -571,7 +573,7 @@ body:has(#drag-group) {
     border-width: 0 2px 0 0;
     align-items: center;
     height: 100%;
-    width: calc(var(--box-size) * 1.5);
+    width: calc(var(--default-box-size) * 1.5);
   }
 
   #exitDailyButton {
@@ -588,7 +590,15 @@ body:has(#drag-group) {
 /* Large screen */
 @media (min-height: 800px) and (min-width: 800px) {
   html {
-    --box-size: min(4vh, 7vw, 1cm);
+    --default-box-size: min(4vh, 7vw, 1cm);
+  }
+
+  #game {
+    --box-size: min(
+      calc(48vh / var(--grid-rows)),
+      calc(84vw / var(--grid-columns)),
+      1cm
+    );
   }
 
   #controls {

diff --git a/src/components/DragGroup.js b/src/components/DragGroup.js
@@ -112,8 +112,8 @@ export default function DragGroup({ dispatchGameState, gameState }) {
         position: "absolute",
         top,
         left,
-        "--group-rows": groupRows,
-        "--group-columns": groupColumns,
+        "--grid-rows": groupRows,
+        "--grid-columns": groupColumns,
       }}
       onPointerMove={onPointerMove}
       onLostPointerCapture={onLostPointerCapture}

diff --git a/src/components/DragShadow.js b/src/components/DragShadow.js
@@ -29,8 +29,8 @@ export default function DragShadow({ grid, top, left }) {
   }
 
   const styles = {
-    "--numRows": grid.length,
-    "--numCols": grid[0].length,
+    "--grid-rows": grid.length,
+    "--grid-columns": grid[0].length,
   };
   // For the drag shadow on the board, need to specify the position of shadow on the board
   if (top !== undefined) {

diff --git a/src/components/Game.js b/src/components/Game.js
@@ -15,7 +15,13 @@ function Game({ dispatchGameState, gameState, setDisplay }) {
     />
   ) : null;
   return (
-    <div id="game">
+    <div
+      id="game"
+      style={{
+        "--grid-rows": gameState.gridSize,
+        "--grid-columns": gameState.gridSize,
+      }}
+    >
       <Board
         pieces={gameState.pieces}
         gridSize={gameState.gridSize}

diff --git a/src/components/Piece.js b/src/components/Piece.js
@@ -123,8 +123,8 @@ export default function Piece({
       id={`piece-${piece.id}`}
       className="piece"
       style={{
-        "--numRows": `${letters.length}`,
-        "--numCols": `${letters[0].length}`,
+        "--grid-rows": `${letters.length}`,
+        "--grid-columns": `${letters[0].length}`,
         ...layoutStyle,
       }}
     >