From 6cef9d07fe61d4184a619975518583cdcbcaec48 Mon Sep 17 00:00:00 2001 From: mike Date: Tue, 16 Dec 2025 13:48:02 +0100 Subject: [PATCH] init --- public/{gameLogic.js => game.js} | 145 +++++++++++++++++++++++-------- public/index.html | 2 +- public/puzzleData.js | 57 ++++++++++-- 3 files changed, 160 insertions(+), 44 deletions(-) rename public/{gameLogic.js => game.js} (85%) 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 @@ - + diff --git a/public/puzzleData.js b/public/puzzleData.js index 4a90d8b..d6a8e93 100644 --- a/public/puzzleData.js +++ b/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'], - ['V', 'L', 'I', 'E', 'G'], - ['#', '#', '#', 'S'] + ['#','#', '#', '#', '#'], + ['#','H', 'A', 'A', 'S'], + ['#','#', '#', '#', 'T'], + ['#','V', 'L', 'I', 'E', 'G'], + ['#','#', '#', '#', 'S'] ], words: [ {