inital-release

public/game.js

@@ -244,13 +244,14 @@ class KruiswoordProGame {
     const headerHeight = isMobile ? 70 : 80
     const progressHeight = isMobile ? 50 : 60
     const controlsHeight = isMobile ? 90 : 120
-    const gridPadding = isMobile ? 10 : 20 // padding inside grid-container
-    const sectionPadding = isMobile ? 20 : 40 // padding of puzzle-section
-    const totalPadding = (gridPadding * 2) + (sectionPadding * 2)
-    const gap = 2
+    const gridPadding = isMobile ? 5 : 10 // padding inside grid-container
+    const sectionPadding = isMobile ? 10 : 20 // padding of puzzle-section
+    const mainPadding = isMobile ? 10 : 20 // game-main padding
+    const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2)
+    const gap = isMobile ? 1 : 2
 
-    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
-    const availableWidth = window.innerWidth - totalPadding
+    const availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding - 20 // 20px safety margin
+    const availableWidth = window.innerWidth - totalPadding - 10 // 10px safety margin
 
     // Calculate max cell size based on available space
     // Account for gaps between cells
@@ -264,12 +265,13 @@ class KruiswoordProGame {
     let cellSize = Math.floor(Math.min(maxCellFromHeight, maxCellFromWidth))
 
     // Set min/max bounds based on device
-    const minSize = isMobile ? 28 : 40
-    const maxSize = isMobile ? 55 : 120
+    const minSize = isMobile ? 30 : 40
+    const maxSize = isMobile ? 50 : 120
     cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
 
     console.log('Grid calculation:', {
       isMobile,
+      viewportWidth: window.innerWidth,
       availableWidth,
       availableHeight,
       rows,
@@ -277,7 +279,8 @@ class KruiswoordProGame {
       maxCellFromWidth,
       maxCellFromHeight,
       finalCellSize: cellSize,
-      totalGridWidth: cols * cellSize + totalGapWidth
+      totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2),
+      totalPadding
     })
 
     return cellSize
@@ -298,10 +301,14 @@ class KruiswoordProGame {
     // Calculate available space and determine optimal cell size
     const cellSize = this.calculateOptimalCellSize(rows, cols)
 
+    const isMobile = window.innerWidth < 768
+    const gap = isMobile ? 1 : 2
+
     this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
     this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`
-    this.gridElement.style.gap = '2px'
+    this.gridElement.style.gap = `${gap}px`
     this.gridElement.style.justifyContent = 'center'
+    this.gridElement.style.margin = '0 auto'
 
     // Create grid cells with clue column
     for (let row = 0; row < rows; row++) {

public/styles_v2.css

@@ -170,7 +170,7 @@ body {
   border-radius: 15px;
   padding: 20px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-  overflow: visible;
+  overflow: hidden;
   position: relative;
 }
 
@@ -183,19 +183,21 @@ body {
   .puzzle-section {
     padding: 10px;
     border-radius: 10px;
-    overflow: visible;
+    overflow: hidden;
+    width: 100%;
   }
 }
 
 /* Crossword Grid */
 .grid-container {
   display: grid;
-  gap: 1px;
+  gap: 2px;
   background: #cbd5e0;
   padding: 10px;
   border-radius: 10px;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   margin: 0 auto;
+  width: fit-content;
   max-width: 100%;
 }
 
@@ -203,6 +205,7 @@ body {
   .grid-container {
     padding: 5px;
     gap: 1px;
+    width: fit-content;
   }
 }