init

public/game.js

@@ -102,8 +102,18 @@ class KruiswoordProGame {
     })
   }
 
-  // FIXED: Better Dutch puzzles with correct hint placement
+  // Load puzzles from external puzzleData.js
   getDutchPuzzles() {
+    // Use puzzles from puzzleData.js if available
+    if (typeof DUTCH_PUZZLES !== 'undefined') {
+      return {
+        1: DUTCH_PUZZLES.level1,
+        2: DUTCH_PUZZLES.level2,
+        3: DUTCH_PUZZLES.level3
+      }
+    }
+
+    // Fallback puzzles
     return {
       1: {
         grid      : [
@@ -115,7 +125,7 @@ class KruiswoordProGame {
         words     : [
           {
             word     : 'HAAS',
-            clue     : 'Snel dier →',
+            clue     : 'Snel dier',
             startRow : 0,
             startCol : 0,
             direction: 'horizontal',
@@ -123,7 +133,7 @@ class KruiswoordProGame {
           },
           {
             word     : 'VLIEG',
-            clue     : 'Insect →',
+            clue     : 'Insect',
             startRow : 2,
             startCol : 0,
             direction: 'horizontal',
@@ -236,30 +246,80 @@ class KruiswoordProGame {
 
     this.gridElement.innerHTML = ''
 
-    // Set grid dimensions
+    // Set grid dimensions - add 1 column for clue cells on the left
     const rows = grid.length
-    const cols = Math.max(...grid.map(row => row.length))
+    const cols = Math.max(...grid.map(row => row.length)) + 1
 
-    // FIXED: Tablet-responsive sizing
+    // FIXED: Larger sizing for desktop/tablet
-    const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 60 : 50) : 45
+    const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 80 : 65) : 50
 
     this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)`
     this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)`
     this.gridElement.style.gap = '2px'
     this.gridElement.style.justifyContent = 'center'
 
-    // Create grid cells
+    // Create grid cells with clue column
     for (let row = 0; row < rows; row++) {
       for (let col = 0; col < cols; col++) {
-        const cellValue = grid[row] && grid[row][col] ? grid[row][col] : '#'
+        if (col === 0) {
-        const cellElement = this.createCellElement(cellValue, row, col, words, cellSize)
+          // First column is for clues
-        this.gridElement.appendChild(cellElement)
+          const clueData = this.getClueForRow(row, words)
+          const cellElement = this.createClueCell(row, clueData, cellSize)
+          this.gridElement.appendChild(cellElement)
+        } else {
+          // Remaining columns are the actual grid (offset by 1)
+          const gridCol = col - 1
+          const cellValue = grid[row] && grid[row][gridCol] ? grid[row][gridCol] : '#'
+          const cellElement = this.createCellElement(cellValue, row, gridCol, words, cellSize)
+          this.gridElement.appendChild(cellElement)
+        }
       }
     }
 
     this.attachCellListeners()
   }
 
+  getClueForRow(row, words) {
+    // Find horizontal word that starts in this row
+    for (const word of words) {
+      if (word.direction === 'horizontal' && word.startRow === row) {
+        return {
+          clue: word.clue,
+          direction: 'horizontal'
+        }
+      }
+    }
+    return null
+  }
+
+  createClueCell(row, clueData, cellSize) {
+    const cellDiv = document.createElement('div')
+    cellDiv.className = 'grid-cell clue-cell'
+    cellDiv.style.width = `${ cellSize }px`
+    cellDiv.style.height = `${ cellSize }px`
+
+    if (clueData) {
+      // Has a clue for this row
+      const clueText = document.createElement('div')
+      clueText.className = 'clue-text'
+      clueText.textContent = clueData.clue
+      clueText.style.fontSize = this.isTablet ? '11px' : '9px'
+
+      const arrow = document.createElement('div')
+      arrow.className = 'arrow arrow-right'
+      arrow.textContent = '→'
+      arrow.style.fontSize = this.isTablet ? '20px' : '16px'
+
+      cellDiv.appendChild(clueText)
+      cellDiv.appendChild(arrow)
+    } else {
+      // Empty clue cell
+      cellDiv.classList.add('blocked-cell')
+    }
+
+    return cellDiv
+  }
+
   createCellElement(cellValue, row, col, words, cellSize) {
     const cellDiv = document.createElement('div')
     cellDiv.className = 'grid-cell'
@@ -271,28 +331,30 @@ class KruiswoordProGame {
     cellDiv.style.height = `${ cellSize }px`
 
     if (cellValue === '#') {
-      // Blocked cell
+      // Check if this is a clue cell (before second word in row)
-      cellDiv.classList.add('blocked-cell')
-    } else if (this.isClueCell(row, col, words)) {
-      // Clue cell
       const clueData = this.getClueForPosition(row, col, words)
-      cellDiv.classList.add('clue-cell', clueData.direction)
+      if (clueData) {
+        // This is a clue cell for the second word
+        cellDiv.classList.add('clue-cell')
 
-      // FIXED: Better clue text sizing for tablets
+        const clueText = document.createElement('div')
-      const clueText = document.createElement('div')
+        clueText.className = 'clue-text'
-      clueText.className = 'clue-text'
+        clueText.textContent = clueData.clue
-      clueText.textContent = clueData.clue
+        clueText.style.fontSize = this.isTablet ? '11px' : '9px'
-      clueText.style.fontSize = this.isTablet ? '10px' : '8px'
 
-      const arrow = document.createElement('div')
+        const arrow = document.createElement('div')
-      arrow.className = `arrow arrow-${ clueData.direction === 'horizontal' ? 'right' : 'down' }`
+        arrow.className = 'arrow arrow-right'
-      arrow.textContent = clueData.direction === 'horizontal' ? '→' : '↓'
+        arrow.textContent = '→'
-      arrow.style.fontSize = this.isTablet ? '16px' : '14px'
+        arrow.style.fontSize = this.isTablet ? '20px' : '16px'
 
-      cellDiv.appendChild(clueText)
+        cellDiv.appendChild(clueText)
-      cellDiv.appendChild(arrow)
+        cellDiv.appendChild(arrow)
+      } else {
+        // Regular blocked cell
+        cellDiv.classList.add('blocked-cell')
+      }
     } else {
-      // FIXED: Input cell - only create if it's part of a word
+      // Letter cell - create input
       if (this.isPartOfWord(row, col, words)) {
         cellDiv.classList.add('input-cell')
         const input = document.createElement('input')
@@ -301,8 +363,8 @@ class KruiswoordProGame {
         input.dataset.row = row
         input.dataset.col = col
 
-        // FIXED: Responsive font sizing
+        // Larger font sizing for desktop/tablet
-        input.style.fontSize = this.isTablet ? '24px' : '20px'
+        input.style.fontSize = this.isTablet ? '32px' : '24px'
 
         // Add existing answer if available
         const key = `${ row }-${ col }`
@@ -336,16 +398,23 @@ class KruiswoordProGame {
     return false
   }
 
-  isClueCell(row, col, words) {
-    return words.some(word => word.startRow === row && word.startCol === col)
-  }
-
   getClueForPosition(row, col, words) {
     for (const word of words) {
-      if (word.startRow === row && word.startCol === col) {
+      if (word.direction === 'horizontal') {
-        return {
+        // Horizontal clue appears one cell to the left of word start
-          clue     : word.clue,
+        if (word.startRow === row && word.startCol - 1 === col) {
-          direction: word.direction
+          return {
+            clue     : word.clue,
+            direction: word.direction
+          }
+        }
+      } else if (word.direction === 'vertical') {
+        // Vertical clue appears one cell above word start
+        if (word.startRow - 1 === row && word.startCol === col) {
+          return {
+            clue     : word.clue,
+            direction: word.direction
+          }
         }
       }
     }

public/index.html

@@ -161,6 +161,6 @@
 </div>
 
 <script src="puzzleData.js"></script>
-<script src="gameLogic.js"></script>
+<script src="game.js"></script>
 </body>
 </html>

public/puzzleData.js

@@ -1,12 +1,59 @@
+// Level 4 - 9x8 (Nature & Daily Words)
+const level1 = {
+  grid: [
+    ['B','O','M','E','N','#','Z','O','N'],
+    ['H','A','A','S','#','D','O','R','P'],
+    ['H','O','N','D','#','O','P','E','N'],
+    ['W','I','N','D','#','N','E','S','T'],
+    ['W','O','L','K','#','D','U','I','F'],
+    ['S','T','E','R','#','E','E','N','D'],
+    ['M','A','A','N','#','R','E','U','S'],
+    ['R','E','G','E','N','#','V','I','S']
+  ],
+  words: [
+    // horizontaal
+    { word: 'BOMEN', clue: 'Planten', startRow: 0, startCol: 0, direction: 'horizontal', answer: 'BOMEN' },
+    { word: 'ZON',   clue: 'Ster aan de hemel', startRow: 0, startCol: 6, direction: 'horizontal', answer: 'ZON' },
+
+    { word: 'HAAS',  clue: 'Snel dier', startRow: 1, startCol: 0, direction: 'horizontal', answer: 'HAAS' },
+    { word: 'DORP',  clue: 'Kleine plaats', startRow: 1, startCol: 5, direction: 'horizontal', answer: 'DORP' },
+
+    { word: 'HOND',  clue: 'Huisdier', startRow: 2, startCol: 0, direction: 'horizontal', answer: 'HOND' },
+    { word: 'OPEN',  clue: 'Niet dicht', startRow: 2, startCol: 5, direction: 'horizontal', answer: 'OPEN' },
+
+    { word: 'WIND',  clue: 'Luchtbeweging', startRow: 3, startCol: 0, direction: 'horizontal', answer: 'WIND' },
+    { word: 'NEST',  clue: 'Thuis van een vogel', startRow: 3, startCol: 5, direction: 'horizontal', answer: 'NEST' },
+
+    { word: 'WOLK',  clue: 'In de lucht', startRow: 4, startCol: 0, direction: 'horizontal', answer: 'WOLK' },
+    { word: 'DUIF',  clue: 'Stadsvogel', startRow: 4, startCol: 5, direction: 'horizontal', answer: 'DUIF' },
+
+    { word: 'STER',  clue: 'Hemellichaam', startRow: 5, startCol: 0, direction: 'horizontal', answer: 'STER' },
+    { word: 'EEND',  clue: 'Watervogel', startRow: 5, startCol: 5, direction: 'horizontal', answer: 'EEND' },
+
+    { word: 'MAAN',  clue: 'Nachthemel', startRow: 6, startCol: 0, direction: 'horizontal', answer: 'MAAN' },
+    { word: 'REUS',  clue: 'Gigant', startRow: 6, startCol: 5, direction: 'horizontal', answer: 'REUS' },
+
+    { word: 'REGEN', clue: 'Valt uit de lucht', startRow: 7, startCol: 0, direction: 'horizontal', answer: 'REGEN' },
+    { word: 'VIS',   clue: 'Zwemt in water', startRow: 7, startCol: 6, direction: 'horizontal', answer: 'VIS' },
+
+    // verticaal (spine)
+    { word: 'DONDER', clue: 'Weerverschijnsel', startRow: 1, startCol: 5, direction: 'vertical', answer: 'DONDER' }
+  ],
+  difficulty: 3,
+  rewards: { coins: 125, stars: 4, hints: 1 }
+};
+
 // Dutch Swedish-style Crossword Puzzles Database
 const DUTCH_PUZZLES = {
   // Level 1 - Easy
-  level1: {
+  level1,
+  level0: {
     grid: [
-      ['H', 'A', 'A', 'S'],
+      ['#','#', '#', '#', '#'],
-      ['#', '#', '#', 'T'],
+      ['#','H', 'A', 'A', 'S'],
-      ['V', 'L', 'I', 'E', 'G'],
+      ['#','#', '#', '#', 'T'],
-      ['#', '#', '#', 'S']
+      ['#','V', 'L', 'I', 'E', 'G'],
+      ['#','#', '#', '#', 'S']
     ],
     words: [
       {