diff --git a/public/gameLogic.js b/public/game.js
similarity index 85%
rename from public/gameLogic.js
rename to public/game.js
index 0fd7d00..b16130f 100644
--- a/public/gameLogic.js
+++ b/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
- const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 60 : 50) : 45
+ // FIXED: Larger sizing for desktop/tablet
+ 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] : '#'
- const cellElement = this.createCellElement(cellValue, row, col, words, cellSize)
- this.gridElement.appendChild(cellElement)
+ if (col === 0) {
+ // First column is for clues
+ 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
- cellDiv.classList.add('blocked-cell')
- } else if (this.isClueCell(row, col, words)) {
- // Clue cell
+ // Check if this is a clue cell (before second word in row)
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')
- clueText.className = 'clue-text'
- clueText.textContent = clueData.clue
- clueText.style.fontSize = this.isTablet ? '10px' : '8px'
+ 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-${ clueData.direction === 'horizontal' ? 'right' : 'down' }`
- arrow.textContent = clueData.direction === 'horizontal' ? '→' : '↓'
- arrow.style.fontSize = this.isTablet ? '16px' : '14px'
+ 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)
+ cellDiv.appendChild(clueText)
+ 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
- input.style.fontSize = this.isTablet ? '24px' : '20px'
+ // Larger font sizing for desktop/tablet
+ 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) {
- return {
- clue : word.clue,
- direction: word.direction
+ if (word.direction === 'horizontal') {
+ // Horizontal clue appears one cell to the left of word start
+ if (word.startRow === row && word.startCol - 1 === col) {
+ 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
+ }
}
}
}
diff --git a/public/index.html b/public/index.html
index 129e5ae..b2ac07d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -161,6 +161,6 @@
-
+