inital-release

public/game.js

@@ -238,6 +238,32 @@ class KruiswoordProGame {
     this.updateProgress()
   }
 
+  calculateOptimalCellSize(rows, cols) {
+    // Get available viewport space
+    const headerHeight = 70 // top header
+    const progressHeight = 50 // progress bar
+    const controlsHeight = 100 // bottom controls
+    const padding = 40 // puzzle section padding
+    const gap = 2 // grid gap
+
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding
+    const availableWidth = window.innerWidth - padding
+
+    // Calculate max cell size based on available space
+    const maxCellFromHeight = (availableHeight - (rows * gap)) / rows
+    const maxCellFromWidth = (availableWidth - (cols * gap)) / cols
+
+    // Use the smaller dimension and apply constraints
+    let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
+
+    // Set min/max bounds
+    const minSize = 40
+    const maxSize = 120
+    cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
+
+    return cellSize
+  }
+
   renderGrid() {
     if (!this.currentPuzzle) return
 
@@ -250,8 +276,8 @@ class KruiswoordProGame {
     const rows = grid.length
     const cols = Math.max(...grid.map(row => row.length)) + 1
 
-    // FIXED: Larger sizing for desktop/tablet
+    // Calculate available space and determine optimal cell size
-    const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 80 : 65) : 50
+    const cellSize = this.calculateOptimalCellSize(rows, cols)
 
     this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
     this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`