inital-release

public/game.js

@@ -239,12 +239,13 @@ class KruiswoordProGame {
   }
 
   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
+    // Get available viewport space with mobile-specific adjustments
+    const isMobile = window.innerWidth < 768
+    const headerHeight = isMobile ? 70 : 80
+    const progressHeight = isMobile ? 50 : 60
+    const controlsHeight = isMobile ? 90 : 120
+    const padding = isMobile ? 20 : 40
+    const gap = 2
 
     const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - padding
     const availableWidth = window.innerWidth - padding
@@ -253,12 +254,12 @@ class KruiswoordProGame {
     const maxCellFromHeight = (availableHeight - (rows * gap)) / rows
     const maxCellFromWidth = (availableWidth - (cols * gap)) / cols
 
-    // Use the smaller dimension and apply constraints
+    // Use the smaller dimension
     let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
 
-    // Set min/max bounds
-    const minSize = 40
-    const maxSize = 120
+    // Set min/max bounds based on device
+    const minSize = isMobile ? 32 : 40
+    const maxSize = isMobile ? 60 : 120
     cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
 
     return cellSize
@@ -329,12 +330,18 @@ class KruiswoordProGame {
       const clueText = document.createElement('div')
       clueText.className = 'clue-text'
       clueText.textContent = clueData.clue
-      clueText.style.fontSize = this.isTablet ? '11px' : '9px'
+
+      // Responsive font sizing based on cell size
+      const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+      clueText.style.fontSize = `${fontSize}px`
+      clueText.style.lineHeight = '1.1'
+      clueText.style.padding = '2px'
 
       const arrow = document.createElement('div')
       arrow.className = 'arrow arrow-right'
       arrow.textContent = '→'
-      arrow.style.fontSize = this.isTablet ? '20px' : '16px'
+      const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+      arrow.style.fontSize = `${arrowSize}px`
 
       cellDiv.appendChild(clueText)
       cellDiv.appendChild(arrow)
@@ -366,12 +373,18 @@ class KruiswoordProGame {
         const clueText = document.createElement('div')
         clueText.className = 'clue-text'
         clueText.textContent = clueData.clue
-        clueText.style.fontSize = this.isTablet ? '11px' : '9px'
+
+        // Responsive font sizing based on cell size
+        const fontSize = Math.max(7, Math.min(12, cellSize / 6))
+        clueText.style.fontSize = `${fontSize}px`
+        clueText.style.lineHeight = '1.1'
+        clueText.style.padding = '2px'
 
         const arrow = document.createElement('div')
         arrow.className = 'arrow arrow-right'
         arrow.textContent = '→'
-        arrow.style.fontSize = this.isTablet ? '20px' : '16px'
+        const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
+        arrow.style.fontSize = `${arrowSize}px`
 
         cellDiv.appendChild(clueText)
         cellDiv.appendChild(arrow)
@@ -389,8 +402,9 @@ class KruiswoordProGame {
         input.dataset.row = row
         input.dataset.col = col
 
-        // Larger font sizing for desktop/tablet
-        input.style.fontSize = this.isTablet ? '32px' : '24px'
+        // Responsive font sizing based on cell size
+        const inputFontSize = Math.max(16, Math.min(36, cellSize * 0.5))
+        input.style.fontSize = `${inputFontSize}px`
 
         // Add existing answer if available
         const key = `${ row }-${ col }`

public/styles.css

@@ -170,6 +170,19 @@ body {
   border-radius: 15px;
   padding: 20px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  overflow: auto;
+}
+
+@media (max-width: 768px) {
+  .game-main {
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .puzzle-section {
+    padding: 10px;
+    border-radius: 10px;
+  }
 }
 
 /* Crossword Grid */
@@ -182,6 +195,13 @@ body {
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+@media (max-width: 768px) {
+  .grid-container {
+    padding: 5px;
+    gap: 1px;
+  }
+}
+
 .grid-cell {
   width: 45px;
   height: 45px;