948 lines
26 KiB
JavaScript
948 lines
26 KiB
JavaScript
// Kruiswoord Pro Game Logic - Fixed Version with Tablet Support and Correct Hints
|
|
class KruiswoordProGame {
|
|
constructor() {
|
|
this.currentLevel = 1
|
|
this.coins = 100
|
|
this.hints = 3
|
|
this.currentPuzzle = null
|
|
this.userAnswers = {}
|
|
this.selectedCell = null
|
|
this.gridElement = document.getElementById('crosswordGrid')
|
|
this.isTablet = window.innerWidth >= 768
|
|
|
|
this.initializeGame()
|
|
this.setupEventListeners()
|
|
this.loadPuzzle(this.currentLevel)
|
|
|
|
// Handle window resize for tablet/desktop
|
|
window.addEventListener('resize', () => {
|
|
this.handleResize()
|
|
})
|
|
}
|
|
|
|
handleResize() {
|
|
const wasTablet = this.isTablet
|
|
this.isTablet = window.innerWidth >= 768
|
|
|
|
if (wasTablet !== this.isTablet && this.currentPuzzle) {
|
|
this.renderGrid() // Re-render for different screen size
|
|
}
|
|
}
|
|
|
|
initializeGame() {
|
|
this.updateUI()
|
|
this.setupTabletStyles()
|
|
}
|
|
|
|
setupTabletStyles() {
|
|
if (this.isTablet) {
|
|
document.body.classList.add('tablet-mode')
|
|
} else {
|
|
document.body.classList.remove('tablet-mode')
|
|
}
|
|
}
|
|
|
|
setupEventListeners() {
|
|
// Menu controls
|
|
document.getElementById('menuBtn').addEventListener('click', () => {
|
|
document.getElementById('sideMenu').classList.add('active')
|
|
})
|
|
|
|
document.getElementById('closeMenu').addEventListener('click', () => {
|
|
document.getElementById('sideMenu').classList.remove('active')
|
|
})
|
|
|
|
// Game controls
|
|
document.getElementById('checkBtn').addEventListener('click', () => {
|
|
this.checkAnswers()
|
|
})
|
|
|
|
document.getElementById('clearBtn').addEventListener('click', () => {
|
|
this.clearGrid()
|
|
})
|
|
|
|
document.getElementById('revealLetterBtn').addEventListener('click', () => {
|
|
this.showHintModal()
|
|
})
|
|
|
|
document.getElementById('skipBtn').addEventListener('click', () => {
|
|
this.skipPuzzle()
|
|
})
|
|
|
|
// Hint modal
|
|
document.getElementById('useHintBtn').addEventListener('click', () => {
|
|
this.useHint()
|
|
})
|
|
|
|
document.getElementById('cancelHintBtn').addEventListener('click', () => {
|
|
this.hideHintModal()
|
|
})
|
|
|
|
// Success modal
|
|
document.getElementById('nextPuzzleBtn').addEventListener('click', () => {
|
|
this.nextPuzzle()
|
|
})
|
|
|
|
document.getElementById('closeModalBtn').addEventListener('click', () => {
|
|
this.hideSuccessModal()
|
|
})
|
|
|
|
// Menu items
|
|
document.getElementById('dailyPuzzle').addEventListener('click', () => {
|
|
this.loadDailyPuzzle()
|
|
})
|
|
|
|
document.getElementById('levelSelect').addEventListener('click', () => {
|
|
this.showLevelSelect()
|
|
})
|
|
|
|
// Keyboard navigation
|
|
document.addEventListener('keydown', (e) => {
|
|
this.handleKeyboardInput(e)
|
|
})
|
|
}
|
|
|
|
// 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 : [
|
|
['H', 'A', 'A', 'S'],
|
|
['#', '#', '#', '#'],
|
|
['V', 'L', 'I', 'E', 'G'],
|
|
['#', '#', '#', '#', '#']
|
|
],
|
|
words : [
|
|
{
|
|
word : 'HAAS',
|
|
clue : 'Snel dier',
|
|
startRow : 0,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'HAAS'
|
|
},
|
|
{
|
|
word : 'VLIEG',
|
|
clue : 'Insect',
|
|
startRow : 2,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'VLIEG'
|
|
}
|
|
],
|
|
difficulty: 1
|
|
},
|
|
2: {
|
|
grid : [
|
|
['B', 'O', 'M', 'E', 'N'],
|
|
['#', '#', '#', '#', '#'],
|
|
['H', 'O', 'N', 'D', 'E'],
|
|
['#', '#', '#', '#', '#']
|
|
],
|
|
words : [
|
|
{
|
|
word : 'BOMEN',
|
|
clue : 'Planten →',
|
|
startRow : 0,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'BOMEN'
|
|
},
|
|
{
|
|
word : 'HONDE',
|
|
clue : 'Huisdieren →',
|
|
startRow : 2,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'HONDE'
|
|
}
|
|
],
|
|
difficulty: 2
|
|
},
|
|
3: {
|
|
grid : [
|
|
['R', 'E', 'G', 'E', 'N'],
|
|
['#', '#', '#', '#', '#'],
|
|
['S', 'N', 'E', 'E', 'U'],
|
|
['#', '#', '#', '#', '#']
|
|
],
|
|
words : [
|
|
{
|
|
word : 'REGEN',
|
|
clue : 'Valt uit de lucht →',
|
|
startRow : 0,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'REGEN'
|
|
},
|
|
{
|
|
word : 'SNEEU',
|
|
clue : 'Witte vlokken →',
|
|
startRow : 2,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'SNEEU'
|
|
}
|
|
],
|
|
difficulty: 3
|
|
},
|
|
// Tablet-optimized larger puzzles
|
|
4: {
|
|
grid : [
|
|
['H', 'A', 'A', 'S', '#', '#'],
|
|
['#', '#', '#', 'T', '#', '#'],
|
|
['V', 'L', 'I', 'E', 'G', '#'],
|
|
['#', '#', '#', 'S', '#', '#'],
|
|
['#', '#', '#', '#', '#', '#'],
|
|
['#', '#', '#', '#', '#', '#']
|
|
],
|
|
words : [
|
|
{
|
|
word : 'HAAS',
|
|
clue : 'Snel dier →',
|
|
startRow : 0,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'HAAS'
|
|
},
|
|
{
|
|
word : 'VLIEG',
|
|
clue : 'Insect',
|
|
startRow : 2,
|
|
startCol : 0,
|
|
direction: 'horizontal',
|
|
answer : 'VLIEG'
|
|
}
|
|
],
|
|
difficulty : 2,
|
|
tabletOptimized: true
|
|
}
|
|
}
|
|
}
|
|
|
|
loadPuzzle(level) {
|
|
const puzzles = this.getDutchPuzzles()
|
|
this.currentPuzzle = puzzles[level] || puzzles[1]
|
|
this.renderGrid()
|
|
this.userAnswers = {}
|
|
this.updateProgress()
|
|
}
|
|
|
|
calculateOptimalCellSize(rows, cols) {
|
|
// Get available viewport space with mobile-specific adjustments
|
|
const isMobile = window.innerWidth < 768
|
|
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 availableHeight = window.innerHeight - headerHeight - progressHeight - controlsHeight - totalPadding
|
|
const availableWidth = window.innerWidth - totalPadding
|
|
|
|
// Calculate max cell size based on available space
|
|
// Account for gaps between cells
|
|
const totalGapHeight = (rows - 1) * gap
|
|
const totalGapWidth = (cols - 1) * gap
|
|
|
|
const maxCellFromHeight = (availableHeight - totalGapHeight) / rows
|
|
const maxCellFromWidth = (availableWidth - totalGapWidth) / cols
|
|
|
|
// Use the smaller dimension
|
|
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
|
|
cellSize = Math.max(minSize, Math.min(maxSize, cellSize))
|
|
|
|
console.log('Grid calculation:', {
|
|
isMobile,
|
|
availableWidth,
|
|
availableHeight,
|
|
rows,
|
|
cols,
|
|
maxCellFromWidth,
|
|
maxCellFromHeight,
|
|
finalCellSize: cellSize,
|
|
totalGridWidth: cols * cellSize + totalGapWidth
|
|
})
|
|
|
|
return cellSize
|
|
}
|
|
|
|
renderGrid() {
|
|
if (!this.currentPuzzle) return
|
|
|
|
const grid = this.currentPuzzle.grid
|
|
const words = this.currentPuzzle.words
|
|
|
|
this.gridElement.innerHTML = ''
|
|
|
|
// 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)) + 1
|
|
|
|
// Calculate available space and determine optimal cell size
|
|
const cellSize = this.calculateOptimalCellSize(rows, cols)
|
|
|
|
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 with clue column
|
|
for (let row = 0; row < rows; row++) {
|
|
for (let col = 0; col < cols; col++) {
|
|
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
|
|
|
|
// Responsive font sizing based on cell size
|
|
const fontSize = Math.max(7, Math.min(12, cellSize / 6))
|
|
clueText.style.fontSize = `${fontSize}px`
|
|
clueText.style.lineHeight = '1.1'
|
|
clueText.style.padding = '2px'
|
|
|
|
const arrow = document.createElement('div')
|
|
arrow.className = 'arrow arrow-right'
|
|
arrow.textContent = '→'
|
|
const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
|
|
arrow.style.fontSize = `${arrowSize}px`
|
|
|
|
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'
|
|
cellDiv.dataset.row = row
|
|
cellDiv.dataset.col = col
|
|
|
|
// FIXED: Set consistent sizing
|
|
cellDiv.style.width = `${ cellSize }px`
|
|
cellDiv.style.height = `${ cellSize }px`
|
|
|
|
if (cellValue === '#') {
|
|
// Check if this is a clue cell (before second word in row)
|
|
const clueData = this.getClueForPosition(row, col, words)
|
|
if (clueData) {
|
|
// This is a clue cell for the second word
|
|
cellDiv.classList.add('clue-cell')
|
|
|
|
const clueText = document.createElement('div')
|
|
clueText.className = 'clue-text'
|
|
clueText.textContent = clueData.clue
|
|
|
|
// Responsive font sizing based on cell size
|
|
const fontSize = Math.max(7, Math.min(12, cellSize / 6))
|
|
clueText.style.fontSize = `${fontSize}px`
|
|
clueText.style.lineHeight = '1.1'
|
|
clueText.style.padding = '2px'
|
|
|
|
const arrow = document.createElement('div')
|
|
arrow.className = 'arrow arrow-right'
|
|
arrow.textContent = '→'
|
|
const arrowSize = Math.max(12, Math.min(24, cellSize / 3))
|
|
arrow.style.fontSize = `${arrowSize}px`
|
|
|
|
cellDiv.appendChild(clueText)
|
|
cellDiv.appendChild(arrow)
|
|
} else {
|
|
// Regular blocked cell
|
|
cellDiv.classList.add('blocked-cell')
|
|
}
|
|
} else {
|
|
// Letter cell - create input
|
|
if (this.isPartOfWord(row, col, words)) {
|
|
cellDiv.classList.add('input-cell')
|
|
const input = document.createElement('input')
|
|
input.type = 'text'
|
|
input.maxLength = 1
|
|
input.dataset.row = row
|
|
input.dataset.col = col
|
|
|
|
// Responsive font sizing based on cell size
|
|
const inputFontSize = Math.max(16, Math.min(36, cellSize * 0.5))
|
|
input.style.fontSize = `${inputFontSize}px`
|
|
|
|
// Add existing answer if available
|
|
const key = `${ row }-${ col }`
|
|
if (this.userAnswers[key]) {
|
|
input.value = this.userAnswers[key]
|
|
}
|
|
|
|
cellDiv.appendChild(input)
|
|
} else {
|
|
// Empty cell that's not part of any word
|
|
cellDiv.classList.add('blocked-cell')
|
|
}
|
|
}
|
|
|
|
return cellDiv
|
|
}
|
|
|
|
// FIXED: Check if cell is part of any word
|
|
isPartOfWord(row, col, words) {
|
|
for (const word of words) {
|
|
if (word.direction === 'horizontal') {
|
|
if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
|
|
return true
|
|
}
|
|
} else if (word.direction === 'vertical') {
|
|
if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
getClueForPosition(row, col, words) {
|
|
for (const word of words) {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
attachCellListeners() {
|
|
const inputs = this.gridElement.querySelectorAll('input')
|
|
|
|
inputs.forEach(input => {
|
|
input.addEventListener('input', (e) => {
|
|
this.handleInput(e)
|
|
})
|
|
|
|
input.addEventListener('focus', (e) => {
|
|
this.selectCell(e.target)
|
|
})
|
|
|
|
input.addEventListener('click', (e) => {
|
|
this.selectCell(e.target)
|
|
})
|
|
})
|
|
}
|
|
|
|
handleInput(e) {
|
|
const input = e.target
|
|
const value = input.value.toUpperCase()
|
|
input.value = value
|
|
|
|
const row = parseInt(input.dataset.row)
|
|
const col = parseInt(input.dataset.col)
|
|
const key = `${ row }-${ col }`
|
|
|
|
this.userAnswers[key] = value
|
|
|
|
// FIXED: Smart navigation to next cell in the same word
|
|
if (value && value.length === 1) {
|
|
this.moveToNextInWord(input, row, col)
|
|
}
|
|
|
|
this.updateProgress()
|
|
}
|
|
|
|
// FIXED: Navigate to next cell in the same word, not just any next input
|
|
moveToNextInWord(currentInput, row, col) {
|
|
const currentWord = this.findWordContainingCell(row, col)
|
|
if (!currentWord) {
|
|
this.moveToNextCell(currentInput)
|
|
return
|
|
}
|
|
|
|
let nextRow = row
|
|
let nextCol = col
|
|
|
|
if (currentWord.direction === 'horizontal') {
|
|
nextCol++
|
|
} else {
|
|
nextRow++
|
|
}
|
|
|
|
// Check if next position is still in the same word
|
|
const nextInput = this.gridElement.querySelector(`input[data-row="${ nextRow }"][data-col="${ nextCol }"]`)
|
|
if (nextInput && this.isPartOfWord(nextRow, nextCol, this.currentPuzzle.words)) {
|
|
nextInput.focus()
|
|
nextInput.select()
|
|
} else {
|
|
// End of word, move to next available input
|
|
this.moveToNextCell(currentInput)
|
|
}
|
|
}
|
|
|
|
findWordContainingCell(row, col) {
|
|
for (const word of this.currentPuzzle.words) {
|
|
if (word.direction === 'horizontal') {
|
|
if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
|
|
return word
|
|
}
|
|
} else if (word.direction === 'vertical') {
|
|
if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
|
|
return word
|
|
}
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
selectCell(input) {
|
|
// Remove previous selection
|
|
document.querySelectorAll('.grid-cell').forEach(cell => {
|
|
cell.classList.remove('active')
|
|
})
|
|
|
|
// Add selection to current cell
|
|
input.parentElement.classList.add('active')
|
|
this.selectedCell = input
|
|
}
|
|
|
|
// FIXED: Better navigation that respects word boundaries
|
|
moveToNextCell(currentInput) {
|
|
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
|
const currentIndex = inputs.indexOf(currentInput)
|
|
|
|
if (currentIndex !== -1 && currentIndex < inputs.length - 1) {
|
|
const nextInput = inputs[currentIndex + 1]
|
|
nextInput.focus()
|
|
nextInput.select()
|
|
}
|
|
}
|
|
|
|
handleKeyboardInput(e) {
|
|
if (!this.selectedCell) return
|
|
|
|
const inputs = Array.from(this.gridElement.querySelectorAll('input'))
|
|
const currentIndex = inputs.indexOf(this.selectedCell)
|
|
|
|
if (currentIndex === -1) return
|
|
|
|
let targetIndex = currentIndex
|
|
|
|
switch (e.key) {
|
|
case 'ArrowUp':
|
|
const currentRow = parseInt(this.selectedCell.dataset.row)
|
|
const currentCol = parseInt(this.selectedCell.dataset.col)
|
|
const targetInput = this.findInputAbove(currentRow, currentCol)
|
|
if (targetInput) {
|
|
targetInput.focus()
|
|
targetInput.select()
|
|
}
|
|
break
|
|
case 'ArrowDown':
|
|
const targetInputDown = this.findInputBelow(currentRow, currentCol)
|
|
if (targetInputDown) {
|
|
targetInputDown.focus()
|
|
targetInputDown.select()
|
|
}
|
|
break
|
|
case 'ArrowLeft':
|
|
if (currentIndex > 0) {
|
|
targetIndex--
|
|
inputs[targetIndex].focus()
|
|
inputs[targetIndex].select()
|
|
}
|
|
break
|
|
case 'ArrowRight':
|
|
if (currentIndex < inputs.length - 1) {
|
|
targetIndex++
|
|
inputs[targetIndex].focus()
|
|
inputs[targetIndex].select()
|
|
}
|
|
break
|
|
case 'Backspace':
|
|
this.selectedCell.value = ''
|
|
const row = parseInt(this.selectedCell.dataset.row)
|
|
const col = parseInt(this.selectedCell.dataset.col)
|
|
delete this.userAnswers[`${ row }-${ col }`]
|
|
this.updateProgress()
|
|
break
|
|
}
|
|
}
|
|
|
|
findInputAbove(row, col) {
|
|
for (let r = row - 1; r >= 0; r--) {
|
|
const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
|
|
if (input) return input
|
|
}
|
|
return null
|
|
}
|
|
|
|
findInputBelow(row, col) {
|
|
const maxRow = Math.max(...Array.from(this.gridElement.querySelectorAll('input')).map(input => parseInt(input.dataset.row)))
|
|
for (let r = row + 1; r <= maxRow; r++) {
|
|
const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
|
|
if (input) return input
|
|
}
|
|
return null
|
|
}
|
|
|
|
checkAnswers() {
|
|
let correct = 0
|
|
let total = 0
|
|
|
|
const inputs = this.gridElement.querySelectorAll('input')
|
|
inputs.forEach(input => {
|
|
const row = parseInt(input.dataset.row)
|
|
const col = parseInt(input.dataset.col)
|
|
const key = `${ row }-${ col }`
|
|
const userAnswer = input.value.toUpperCase()
|
|
|
|
const correctAnswer = this.findCorrectAnswer(row, col)
|
|
|
|
if (correctAnswer) {
|
|
total++
|
|
if (userAnswer === correctAnswer) {
|
|
correct++
|
|
input.parentElement.classList.add('correct')
|
|
input.parentElement.classList.remove('incorrect')
|
|
} else if (userAnswer) {
|
|
input.parentElement.classList.add('incorrect')
|
|
input.parentElement.classList.remove('correct')
|
|
}
|
|
}
|
|
})
|
|
|
|
const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
|
|
|
|
if (percentage === 100) {
|
|
this.showSuccess()
|
|
} else {
|
|
this.showFeedback(`Je hebt ${ correct } van de ${ total } letters correct (${ percentage }%)`)
|
|
}
|
|
}
|
|
|
|
findCorrectAnswer(row, col) {
|
|
for (const word of this.currentPuzzle.words) {
|
|
if (word.direction === 'horizontal') {
|
|
if (word.startRow === row && col >= word.startCol && col < word.startCol + word.answer.length) {
|
|
const letterIndex = col - word.startCol
|
|
return word.answer[letterIndex]
|
|
}
|
|
} else if (word.direction === 'vertical') {
|
|
if (word.startCol === col && row >= word.startRow && row < word.startRow + word.answer.length) {
|
|
const letterIndex = row - word.startRow
|
|
return word.answer[letterIndex]
|
|
}
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
clearGrid() {
|
|
if (confirm('Weet je zeker dat je alle ingevulde letters wilt wissen?')) {
|
|
const inputs = this.gridElement.querySelectorAll('input')
|
|
inputs.forEach(input => {
|
|
input.value = ''
|
|
input.parentElement.classList.remove('correct', 'incorrect')
|
|
})
|
|
|
|
this.userAnswers = {}
|
|
this.updateProgress()
|
|
this.showFeedback('Raster gewist')
|
|
}
|
|
}
|
|
|
|
showHintModal() {
|
|
if (this.hints <= 0) {
|
|
this.showFeedback('Je hebt geen hints meer. Verdien hints door puzzels op te lossen!', 'error')
|
|
return
|
|
}
|
|
|
|
document.getElementById('hintModal').classList.add('active')
|
|
}
|
|
|
|
hideHintModal() {
|
|
document.getElementById('hintModal').classList.remove('active')
|
|
}
|
|
|
|
useHint() {
|
|
if (this.hints <= 0) return
|
|
|
|
const inputs = this.gridElement.querySelectorAll('input')
|
|
const emptyInputs = Array.from(inputs).filter(input => !input.value)
|
|
|
|
if (emptyInputs.length === 0) {
|
|
this.showFeedback('Alle letters zijn al ingevuld!', 'info')
|
|
this.hideHintModal()
|
|
return
|
|
}
|
|
|
|
// Randomly select an empty cell
|
|
const randomInput = emptyInputs[Math.floor(Math.random() * emptyInputs.length)]
|
|
const row = parseInt(randomInput.dataset.row)
|
|
const col = parseInt(randomInput.dataset.col)
|
|
const correctAnswer = this.findCorrectAnswer(row, col)
|
|
|
|
if (correctAnswer) {
|
|
randomInput.value = correctAnswer
|
|
const key = `${ row }-${ col }`
|
|
this.userAnswers[key] = correctAnswer
|
|
|
|
this.hints--
|
|
this.updateUI()
|
|
this.updateProgress()
|
|
this.showFeedback('Letter onthuld!')
|
|
this.hideHintModal()
|
|
|
|
// Check if puzzle is complete
|
|
this.checkIfComplete()
|
|
}
|
|
}
|
|
|
|
checkIfComplete() {
|
|
const inputs = this.gridElement.querySelectorAll('input')
|
|
let allFilled = true
|
|
|
|
inputs.forEach(input => {
|
|
if (!input.value) {
|
|
allFilled = false
|
|
}
|
|
})
|
|
|
|
if (allFilled) {
|
|
setTimeout(() => this.checkAnswers(), 500)
|
|
}
|
|
}
|
|
|
|
showSuccess() {
|
|
// Award rewards
|
|
this.coins += 50
|
|
this.hints += 1
|
|
this.updateUI()
|
|
|
|
document.getElementById('successModal').classList.add('active')
|
|
}
|
|
|
|
hideSuccessModal() {
|
|
document.getElementById('successModal').classList.remove('active')
|
|
}
|
|
|
|
nextPuzzle() {
|
|
this.hideSuccessModal()
|
|
this.currentLevel++
|
|
this.loadPuzzle(this.currentLevel)
|
|
this.showFeedback(`Niveau ${ this.currentLevel } geladen!`)
|
|
}
|
|
|
|
skipPuzzle() {
|
|
if (confirm('Weet je zeker dat je deze puzzel wilt overslaan?')) {
|
|
this.currentLevel++
|
|
this.loadPuzzle(this.currentLevel)
|
|
this.showFeedback('Puzzel overgeslagen')
|
|
}
|
|
}
|
|
|
|
loadDailyPuzzle() {
|
|
this.showFeedback('Dagelijkse puzzel wordt geladen...')
|
|
// Implement daily puzzle logic
|
|
document.getElementById('sideMenu').classList.remove('active')
|
|
}
|
|
|
|
showLevelSelect() {
|
|
this.showFeedback('Niveau selectie komt binnenkort!')
|
|
document.getElementById('sideMenu').classList.remove('active')
|
|
}
|
|
|
|
updateProgress() {
|
|
const inputs = this.gridElement.querySelectorAll('input')
|
|
let filled = 0
|
|
let total = 0
|
|
|
|
inputs.forEach(input => {
|
|
const row = parseInt(input.dataset.row)
|
|
const col = parseInt(input.dataset.col)
|
|
const correctAnswer = this.findCorrectAnswer(row, col)
|
|
|
|
if (correctAnswer) {
|
|
total++
|
|
if (input.value) {
|
|
filled++
|
|
}
|
|
}
|
|
})
|
|
|
|
const progress = total > 0 ? Math.round((filled / total) * 100) : 0
|
|
|
|
document.getElementById('progressFill').style.width = `${ progress }%`
|
|
document.getElementById('progressText').textContent = `${ progress }% voltooid`
|
|
}
|
|
|
|
updateUI() {
|
|
document.getElementById('coinsCount').textContent = this.coins
|
|
document.querySelector('.hint-count').textContent = this.hints
|
|
document.querySelector('.level-number').textContent = `Niveau ${ this.currentLevel }`
|
|
}
|
|
|
|
showFeedback(message, type = 'info') {
|
|
const feedback = document.createElement('div')
|
|
feedback.className = `feedback feedback-${ type }`
|
|
feedback.textContent = message
|
|
|
|
feedback.style.cssText = `
|
|
position: fixed;
|
|
top: 100px;
|
|
right: 20px;
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-weight: 600;
|
|
z-index: 1000;
|
|
animation: slideIn 0.3s ease;
|
|
max-width: 300px;
|
|
word-wrap: break-word;
|
|
`
|
|
|
|
switch (type) {
|
|
case 'error':
|
|
feedback.style.background = 'linear-gradient(135deg, #f56565, #e53e3e)'
|
|
break
|
|
case 'success':
|
|
feedback.style.background = 'linear-gradient(135deg, #48bb78, #38a169)'
|
|
break
|
|
default:
|
|
feedback.style.background = 'linear-gradient(135deg, #4299e1, #3182ce)'
|
|
}
|
|
|
|
document.body.appendChild(feedback)
|
|
|
|
setTimeout(() => {
|
|
feedback.style.animation = 'slideOut 0.3s ease'
|
|
setTimeout(() => {
|
|
if (feedback.parentNode) {
|
|
feedback.parentNode.removeChild(feedback)
|
|
}
|
|
}, 300)
|
|
}, 3000)
|
|
}
|
|
}
|
|
|
|
// Add CSS animations and tablet styles
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
from { transform: translateX(0); opacity: 1; }
|
|
to { transform: translateX(100%); opacity: 0; }
|
|
}
|
|
|
|
/* Tablet Mode Styles */
|
|
.tablet-mode .grid-container {
|
|
max-width: 90vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tablet-mode .puzzle-section {
|
|
padding: 30px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.app-container {
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.game-main {
|
|
padding: 30px;
|
|
}
|
|
|
|
.bottom-controls {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.grid-container {
|
|
transform: scale(1.1);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.puzzle-section {
|
|
min-height: 70vh;
|
|
}
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
|
|
// Initialize game when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const game = new KruiswoordProGame()
|
|
})
|