Compute initial grid size to be no larger than fits on the screen

Nobody wants a UI that starts off with a horizontal scrollbar!

But the 10x10 initial grid wasn't fitting on my mobile device. So
dynamically compute a smaller grid size that will fit.

Also, rather than hard-coding the cell size in the computation of the
grid size, use a --cell-size custom property.

diff --git a/letterrip/letterrip.css b/letterrip/letterrip.css
index fc5a67c48c89933d2ad49763a63bc5f8286d3888..248f902503fb6afd105dd5b809b9c4ef46cbefc7 100644 (file)
--- a/letterrip/letterrip.css
+++ b/letterrip/letterrip.css
@@ -158,9 +158,13 @@
   background: #fff;
 }
 
+.board-container {
+  --cell-size: 48px;
+}
+
 .cell {
-  width: 48px;
-  height: 48px;
+  width: var(--cell-size);
+  height: var(--cell-size);
   border: 1px solid #ddd;
   display: flex;
   align-items: center;

diff --git a/letterrip/letterrip.jsx b/letterrip/letterrip.jsx
index 4d506c73ab2ff69c7ad9afef370134915a3f10d8..a9e5437e3061c108a1f2d1aa5bdc5435d6e2e483 100644 (file)
--- a/letterrip/letterrip.jsx
+++ b/letterrip/letterrip.jsx
@@ -179,15 +179,30 @@ function get_unconnected_cells(grid, analysis) {
  * Compute grid render bounds                            *
  *********************************************************/
 
-/* The grid starts at 10x10 and only grows when a tile is placed in
- * one of the outermost rows/columns, ensuring there is always at
- * least 1 empty row/column at each edge for placing new tiles. */
-const GRID_MIN_SIZE = 10;
+/* Read the cell size from the CSS --cell-size custom property so
+ * there's a single source of truth for the grid cell dimensions. */
+function get_cell_size() {
+  const board = document.querySelector(".board-container");
+  if (board) {
+    return parseFloat(getComputedStyle(board).getPropertyValue("--cell-size"));
+  }
+  return 48; /* fallback before board is rendered */
+}
+
+/* The grid starts as the largest square that fits the viewport width
+ * (capped at 10x10) and only grows when a tile is placed in one of
+ * the outermost rows/columns. */
+function initial_grid_size() {
+  const cell_size = get_cell_size() + 2; /* +2 for 1px border each side */
+  const available = window.innerWidth - 32; /* rough page padding */
+  const fit = Math.floor(available / cell_size);
+  return Math.max(4, Math.min(10, fit));
+}
 
 function grid_bounds(grid, prev_bounds) {
   const keys = Object.keys(grid);
   if (keys.length === 0) {
-    const half = Math.floor(GRID_MIN_SIZE / 2);
+    const half = Math.floor(initial_grid_size() / 2);
     return { minR: -half, maxR: half - 1, minC: -half, maxC: half - 1 };
   }
 
@@ -210,7 +225,7 @@ function grid_bounds(grid, prev_bounds) {
     minC = prev_bounds.minC;
     maxC = prev_bounds.maxC;
   } else {
-    const half = Math.floor(GRID_MIN_SIZE / 2);
+    const half = Math.floor(initial_grid_size() / 2);
     minR = Math.min(-half, tileMinR - 1);
     maxR = Math.max(half - 1, tileMaxR + 1);
     minC = Math.min(-half, tileMinC - 1);
@@ -960,7 +975,7 @@ class Game extends React.Component {
     return (
       <div key="board" className="board-container">
         <div className="board"
-             style={{ gridTemplateColumns: `repeat(${cols}, 48px)` }}>
+             style={{ gridTemplateColumns: `repeat(${cols}, var(--cell-size))` }}>
           {rows.flat()}
         </div>
       </div>