tour/word
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
mike
2025-12-16 13:48:02 +01:00
parent eb0c79b657
commit 6cef9d07fe
3 changed files with 160 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
public/gameLogic.js → public/game.js
View File

@@ -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
}
}
}
}

2
public/index.html
View File

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

57
public/puzzleData.js
View File

@@ -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: [
{