Sorry, but the page you were trying to view does not exist.
+ + + + diff --git a/mobile/favicon.ico b/mobile/favicon.ico new file mode 100644 index 0000000..be74abd Binary files /dev/null and b/mobile/favicon.ico differ diff --git a/mobile/game.js b/mobile/game.js new file mode 100644 index 0000000..817bcd6 --- /dev/null +++ b/mobile/game.js @@ -0,0 +1,954 @@ +// 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 ? 100 : 120 + const gridPadding = isMobile ? 5 : 10 // padding inside grid-container + const sectionPadding = isMobile ? 5 : 20 // padding of puzzle-section + const mainPadding = isMobile ? 10 : 20 // game-main padding + const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2) + (isMobile ? 20 : 0) + const gap = isMobile ? 1 : 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 - more conservative on mobile + const minSize = isMobile ? 28 : 40 + const maxSize = isMobile ? 45 : 120 + cellSize = Math.max(minSize, Math.min(maxSize, cellSize)) + + console.log('Grid calculation:', { + isMobile, + viewportWidth: window.innerWidth, + availableWidth, + availableHeight, + rows, + cols, + maxCellFromWidth, + maxCellFromHeight, + finalCellSize: cellSize, + totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2), + totalPadding + }) + + 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) + + const isMobile = window.innerWidth < 768 + const gap = isMobile ? 1 : 2 + + this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)` + this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)` + this.gridElement.style.gap = `${gap}px` + this.gridElement.style.justifyContent = 'center' + this.gridElement.style.margin = '0 auto' + + // 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() +}) diff --git a/mobile/icon.png b/mobile/icon.png new file mode 100644 index 0000000..8a42581 Binary files /dev/null and b/mobile/icon.png differ diff --git a/mobile/icon.svg b/mobile/icon.svg new file mode 100644 index 0000000..f232922 --- /dev/null +++ b/mobile/icon.svg @@ -0,0 +1 @@ + diff --git a/public/mobile.html b/mobile/index.html similarity index 98% rename from public/mobile.html rename to mobile/index.html index 044e042..80765a3 100644 --- a/public/mobile.html +++ b/mobile/index.html @@ -4,7 +4,6 @@Sorry, but the page you were trying to view does not exist.
+ + + + diff --git a/tablet/favicon.ico b/tablet/favicon.ico new file mode 100644 index 0000000..be74abd Binary files /dev/null and b/tablet/favicon.ico differ diff --git a/tablet/game.js b/tablet/game.js new file mode 100644 index 0000000..817bcd6 --- /dev/null +++ b/tablet/game.js @@ -0,0 +1,954 @@ +// 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 ? 100 : 120 + const gridPadding = isMobile ? 5 : 10 // padding inside grid-container + const sectionPadding = isMobile ? 5 : 20 // padding of puzzle-section + const mainPadding = isMobile ? 10 : 20 // game-main padding + const totalPadding = (gridPadding * 2) + (sectionPadding * 2) + (mainPadding * 2) + (isMobile ? 20 : 0) + const gap = isMobile ? 1 : 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 - more conservative on mobile + const minSize = isMobile ? 28 : 40 + const maxSize = isMobile ? 45 : 120 + cellSize = Math.max(minSize, Math.min(maxSize, cellSize)) + + console.log('Grid calculation:', { + isMobile, + viewportWidth: window.innerWidth, + availableWidth, + availableHeight, + rows, + cols, + maxCellFromWidth, + maxCellFromHeight, + finalCellSize: cellSize, + totalGridWidth: cols * cellSize + totalGapWidth + (gridPadding * 2), + totalPadding + }) + + 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) + + const isMobile = window.innerWidth < 768 + const gap = isMobile ? 1 : 2 + + this.gridElement.style.gridTemplateColumns = `repeat(${ cols }, ${ cellSize }px)` + this.gridElement.style.gridTemplateRows = `repeat(${ rows }, ${ cellSize }px)` + this.gridElement.style.gap = `${gap}px` + this.gridElement.style.justifyContent = 'center' + this.gridElement.style.margin = '0 auto' + + // 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() +}) diff --git a/tablet/icon.png b/tablet/icon.png new file mode 100644 index 0000000..8a42581 Binary files /dev/null and b/tablet/icon.png differ diff --git a/tablet/icon.svg b/tablet/icon.svg new file mode 100644 index 0000000..f232922 --- /dev/null +++ b/tablet/icon.svg @@ -0,0 +1 @@ + diff --git a/public/tablet.html b/tablet/index.html similarity index 98% rename from public/tablet.html rename to tablet/index.html index 90668f6..29601b4 100644 --- a/public/tablet.html +++ b/tablet/index.html @@ -4,7 +4,6 @@