diff --git a/img/.gitkeep b/img/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/js/app.js b/js/app.js
deleted file mode 100644
index e69de29..0000000
diff --git a/package.json b/package.json
index b7438a8..ec611a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": " ",
- "version": "0.0.1",
+ "name": "crosser",
+ "version": "0.0.2",
"description": "",
"private": true,
"keywords": [
@@ -9,16 +9,8 @@
"license": "",
"author": "",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "start": "webpack serve --open --config webpack.config.dev.js",
- "build": "webpack --config webpack.config.prod.js"
+ "test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
- "copy-webpack-plugin": "^11.0.0",
- "html-webpack-plugin": "^5.6.0",
- "webpack": "^5.91.0",
- "webpack-cli": "^5.1.4",
- "webpack-dev-server": "^5.0.4",
- "webpack-merge": "^5.10.0"
}
}
diff --git a/404.html b/public/404.html
similarity index 100%
rename from 404.html
rename to public/404.html
diff --git a/public/crossword.js b/public/crossword.js
deleted file mode 100644
index 985b6e7..0000000
--- a/public/crossword.js
+++ /dev/null
@@ -1,481 +0,0 @@
-// Crossword Game Controller
-class CrosswordGame {
- constructor() {
- this.currentPuzzle = null;
- this.userAnswers = {};
- this.selectedCell = null;
- this.gridElement = document.getElementById('crosswordGrid');
- this.progress = 0;
-
- this.initializeEventListeners();
- this.loadNewPuzzle();
- }
-
- initializeEventListeners() {
- // New puzzle button
- document.getElementById('newPuzzleBtn').addEventListener('click', () => {
- this.loadNewPuzzle();
- });
-
- // Settings button
- document.getElementById('settingsBtn').addEventListener('click', () => {
- document.getElementById('settingsModal').style.display = 'block';
- });
-
- // Close modal
- document.querySelector('.close').addEventListener('click', () => {
- document.getElementById('settingsModal').style.display = 'none';
- });
-
- // Game control buttons
- document.getElementById('checkAnswersBtn').addEventListener('click', () => {
- this.checkAnswers();
- });
-
- document.getElementById('revealLetterBtn').addEventListener('click', () => {
- this.revealLetter();
- });
-
- document.getElementById('clearGridBtn').addEventListener('click', () => {
- this.clearGrid();
- });
-
- // Settings changes
- document.getElementById('difficultySelect').addEventListener('change', (e) => {
- this.loadNewPuzzle(e.target.value);
- });
-
- // Keyboard navigation
- document.addEventListener('keydown', (e) => {
- this.handleKeyboardNavigation(e);
- });
- }
-
- async loadNewPuzzle(difficulty = 'medium') {
- try {
- this.showLoading();
- this.currentPuzzle = await PuzzleDatabase.getPuzzle(difficulty);
- this.renderGrid();
- this.userAnswers = {};
- this.updateProgress();
- } catch (error) {
- console.error('Error loading puzzle:', error);
- this.showError('Er is een fout opgetreden bij het laden van de puzzel.');
- }
- }
-
- renderGrid() {
- if (!this.currentPuzzle) return;
-
- const grid = this.currentPuzzle.grid;
- const words = this.currentPuzzle.words;
-
- this.gridElement.innerHTML = '';
- this.gridElement.style.gridTemplateColumns = `repeat(${grid[0].length}, 1fr)`;
-
- // Create grid cells
- for (let row = 0; row < grid.length; row++) {
- for (let col = 0; col < grid[row].length; col++) {
- const cell = grid[row][row];
- const cellElement = this.createCellElement(cell, row, col, words);
- this.gridElement.appendChild(cellElement);
- }
- }
-
- // Add event listeners to input cells
- this.attachInputListeners();
- }
-
- createCellElement(cellType, row, col, words) {
- const cellDiv = document.createElement('div');
- cellDiv.className = 'grid-cell';
- cellDiv.dataset.row = row;
- cellDiv.dataset.col = col;
-
- switch (cellType) {
- case '#':
- cellDiv.classList.add('blocked-cell');
- break;
- case 'C':
- case 'L':
- case 'U':
- case 'E':
- // This is a clue cell (example from template)
- const clueData = this.findClueForPosition(row, col, words);
- if (clueData) {
- cellDiv.classList.add('clue-cell', clueData.direction);
- cellDiv.innerHTML = `
-
${clueData.clue}
-
- ${clueData.direction === 'horizontal' ? '→' : '↓'}
-
- `;
- }
- break;
- default:
- // This should be an input cell
- cellDiv.classList.add('input-cell');
- const input = document.createElement('input');
- input.type = 'text';
- input.maxLength = 1;
- input.dataset.row = row;
- input.dataset.col = col;
-
- // Add existing answer if available
- const key = `${row}-${col}`;
- if (this.userAnswers[key]) {
- input.value = this.userAnswers[key];
- }
-
- cellDiv.appendChild(input);
- }
-
- return cellDiv;
- }
-
- findClueForPosition(row, col, words) {
- for (const word of words) {
- if (word.startRow === row && word.startCol === col) {
- return {
- clue: word.clue,
- direction: word.direction
- };
- }
- }
- return null;
- }
-
- attachInputListeners() {
- 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;
-
- // Move to next cell automatically
- if (value && value.length === 1) {
- this.moveToNextCell(input);
- }
-
- this.updateProgress();
- }
-
- 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;
-
- // Highlight related word
- this.highlightWord(input);
- }
-
- highlightWord(input) {
- // Remove previous highlights
- document.querySelectorAll('.grid-cell').forEach(cell => {
- cell.classList.remove('highlighted');
- });
-
- // Find and highlight the entire word
- const row = parseInt(input.dataset.row);
- const col = parseInt(input.dataset.col);
-
- // This is a simplified version - in a real app you'd track word boundaries
- const word = this.findWordAtPosition(row, col);
- if (word) {
- // Highlight all cells in this word
- // Implementation depends on your word tracking system
- }
- }
-
- moveToNextCell(currentInput) {
- const row = parseInt(currentInput.dataset.row);
- const col = parseInt(currentInput.dataset.col);
-
- // Try to find next input cell in row first
- let nextInput = null;
- const currentCell = currentInput.parentElement;
- const nextCell = currentCell.nextElementSibling;
-
- if (nextCell && nextCell.querySelector('input')) {
- nextInput = nextCell.querySelector('input');
- } else {
- // Move to next row
- const currentRow = currentCell.parentElement;
- const nextRow = currentRow.nextElementSibling;
- if (nextRow) {
- const firstInput = nextRow.querySelector('input');
- if (firstInput) {
- nextInput = firstInput;
- }
- }
- }
-
- if (nextInput) {
- nextInput.focus();
- nextInput.select();
- }
- }
-
- handleKeyboardNavigation(e) {
- if (!this.selectedCell) return;
-
- const row = parseInt(this.selectedCell.dataset.row);
- const col = parseInt(this.selectedCell.dataset.col);
-
- let targetRow = row;
- let targetCol = col;
-
- switch (e.key) {
- case 'ArrowUp':
- targetRow = Math.max(0, row - 1);
- break;
- case 'ArrowDown':
- targetRow = Math.min(this.currentPuzzle.grid.length - 1, row + 1);
- break;
- case 'ArrowLeft':
- targetCol = Math.max(0, col - 1);
- break;
- case 'ArrowRight':
- targetCol = Math.min(this.currentPuzzle.grid[0].length - 1, col + 1);
- break;
- case 'Backspace':
- this.selectedCell.value = '';
- delete this.userAnswers[`${row}-${col}`];
- this.updateProgress();
- break;
- default:
- return;
- }
-
- e.preventDefault();
- const targetInput = this.gridElement.querySelector(`input[data-row="${targetRow}"][data-col="${targetCol}"]`);
- if (targetInput) {
- targetInput.focus();
- targetInput.select();
- }
- }
-
- 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();
-
- // Find the correct answer for this position
- 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;
-
- // Show feedback
- if (percentage === 100) {
- this.showSuccess('Gefeliciteerd! Alle antwoorden zijn correct!');
- } else {
- this.showFeedback(`Je hebt ${correct} van de ${total} letters correct (${percentage}%).`);
- }
- }
-
- findCorrectAnswer(row, col) {
- // Find the correct letter for this position
- 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;
- }
-
- revealLetter() {
- if (!this.selectedCell) {
- this.showError('Selecteer eerst een cel om een letter te onthullen.');
- return;
- }
-
- const row = parseInt(this.selectedCell.dataset.row);
- const col = parseInt(this.selectedCell.dataset.col);
- const correctAnswer = this.findCorrectAnswer(row, col);
-
- if (correctAnswer) {
- this.selectedCell.value = correctAnswer;
- const key = `${row}-${col}`;
- this.userAnswers[key] = correctAnswer;
- this.updateProgress();
- this.showFeedback('Letter onthuld!');
- }
- }
-
- clearGrid() {
- if (confirm('Weet je zeker dat je het hele raster 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.');
- }
- }
-
- 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++;
- }
- }
- });
-
- this.progress = total > 0 ? Math.round((filled / total) * 100) : 0;
-
- const progressFill = document.getElementById('progressFill');
- const progressText = document.getElementById('progressText');
-
- progressFill.style.width = `${this.progress}%`;
- progressText.textContent = `${this.progress}% voltooid`;
-
- if (this.progress === 100) {
- this.checkAnswers();
- }
- }
-
- showLoading() {
- this.gridElement.innerHTML = '';
- }
-
- showError(message) {
- this.showFeedback(message, 'error');
- }
-
- showSuccess(message) {
- this.showFeedback(message, 'success');
- }
-
- showFeedback(message, type = 'info') {
- // Create feedback element
- const feedback = document.createElement('div');
- feedback.className = `feedback feedback-${type}`;
- feedback.textContent = message;
-
- // Style the feedback
- feedback.style.cssText = `
- position: fixed;
- top: 20px;
- 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;
- `;
-
- // Set background color based on type
- 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);
-
- // Remove after 3 seconds
- setTimeout(() => {
- feedback.style.animation = 'slideOut 0.3s ease';
- setTimeout(() => {
- if (feedback.parentNode) {
- feedback.parentNode.removeChild(feedback);
- }
- }, 300);
- }, 3000);
- }
-}
-
-// Add CSS animations for feedback
-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; }
- }
-`;
-document.head.appendChild(style);
-
-// Initialize the game when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
- const game = new CrosswordGame();
-});
diff --git a/favicon.ico b/public/favicon.ico
similarity index 100%
rename from favicon.ico
rename to public/favicon.ico
diff --git a/public/gameLogic.js b/public/gameLogic.js
index 9f3dbff..0fd7d00 100644
--- a/public/gameLogic.js
+++ b/public/gameLogic.js
@@ -1,194 +1,194 @@
// 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.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);
+ this.initializeGame()
+ this.setupEventListeners()
+ this.loadPuzzle(this.currentLevel)
// Handle window resize for tablet/desktop
window.addEventListener('resize', () => {
- this.handleResize();
- });
+ this.handleResize()
+ })
}
handleResize() {
- const wasTablet = this.isTablet;
- this.isTablet = window.innerWidth >= 768;
+ const wasTablet = this.isTablet
+ this.isTablet = window.innerWidth >= 768
if (wasTablet !== this.isTablet && this.currentPuzzle) {
- this.renderGrid(); // Re-render for different screen size
+ this.renderGrid() // Re-render for different screen size
}
}
initializeGame() {
- this.updateUI();
- this.setupTabletStyles();
+ this.updateUI()
+ this.setupTabletStyles()
}
setupTabletStyles() {
if (this.isTablet) {
- document.body.classList.add('tablet-mode');
+ document.body.classList.add('tablet-mode')
} else {
- document.body.classList.remove('tablet-mode');
+ document.body.classList.remove('tablet-mode')
}
}
setupEventListeners() {
// Menu controls
document.getElementById('menuBtn').addEventListener('click', () => {
- document.getElementById('sideMenu').classList.add('active');
- });
+ document.getElementById('sideMenu').classList.add('active')
+ })
document.getElementById('closeMenu').addEventListener('click', () => {
- document.getElementById('sideMenu').classList.remove('active');
- });
+ document.getElementById('sideMenu').classList.remove('active')
+ })
// Game controls
document.getElementById('checkBtn').addEventListener('click', () => {
- this.checkAnswers();
- });
+ this.checkAnswers()
+ })
document.getElementById('clearBtn').addEventListener('click', () => {
- this.clearGrid();
- });
+ this.clearGrid()
+ })
document.getElementById('revealLetterBtn').addEventListener('click', () => {
- this.showHintModal();
- });
+ this.showHintModal()
+ })
document.getElementById('skipBtn').addEventListener('click', () => {
- this.skipPuzzle();
- });
+ this.skipPuzzle()
+ })
// Hint modal
document.getElementById('useHintBtn').addEventListener('click', () => {
- this.useHint();
- });
+ this.useHint()
+ })
document.getElementById('cancelHintBtn').addEventListener('click', () => {
- this.hideHintModal();
- });
+ this.hideHintModal()
+ })
// Success modal
document.getElementById('nextPuzzleBtn').addEventListener('click', () => {
- this.nextPuzzle();
- });
+ this.nextPuzzle()
+ })
document.getElementById('closeModalBtn').addEventListener('click', () => {
- this.hideSuccessModal();
- });
+ this.hideSuccessModal()
+ })
// Menu items
document.getElementById('dailyPuzzle').addEventListener('click', () => {
- this.loadDailyPuzzle();
- });
+ this.loadDailyPuzzle()
+ })
document.getElementById('levelSelect').addEventListener('click', () => {
- this.showLevelSelect();
- });
+ this.showLevelSelect()
+ })
// Keyboard navigation
document.addEventListener('keydown', (e) => {
- this.handleKeyboardInput(e);
- });
+ this.handleKeyboardInput(e)
+ })
}
// FIXED: Better Dutch puzzles with correct hint placement
getDutchPuzzles() {
return {
1: {
- grid: [
+ grid : [
['H', 'A', 'A', 'S'],
['#', '#', '#', '#'],
['V', 'L', 'I', 'E', 'G'],
['#', '#', '#', '#', '#']
],
- words: [
+ words : [
{
- word: 'HAAS',
- clue: 'Snel dier →',
- startRow: 0,
- startCol: 0,
+ word : 'HAAS',
+ clue : 'Snel dier →',
+ startRow : 0,
+ startCol : 0,
direction: 'horizontal',
- answer: 'HAAS'
+ answer : 'HAAS'
},
{
- word: 'VLIEG',
- clue: 'Insect →',
- startRow: 2,
- startCol: 0,
+ word : 'VLIEG',
+ clue : 'Insect →',
+ startRow : 2,
+ startCol : 0,
direction: 'horizontal',
- answer: 'VLIEG'
+ answer : 'VLIEG'
}
],
difficulty: 1
},
2: {
- grid: [
+ grid : [
['B', 'O', 'M', 'E', 'N'],
['#', '#', '#', '#', '#'],
['H', 'O', 'N', 'D', 'E'],
['#', '#', '#', '#', '#']
],
- words: [
+ words : [
{
- word: 'BOMEN',
- clue: 'Planten →',
- startRow: 0,
- startCol: 0,
+ word : 'BOMEN',
+ clue : 'Planten →',
+ startRow : 0,
+ startCol : 0,
direction: 'horizontal',
- answer: 'BOMEN'
+ answer : 'BOMEN'
},
{
- word: 'HONDE',
- clue: 'Huisdieren →',
- startRow: 2,
- startCol: 0,
+ word : 'HONDE',
+ clue : 'Huisdieren →',
+ startRow : 2,
+ startCol : 0,
direction: 'horizontal',
- answer: 'HONDE'
+ answer : 'HONDE'
}
],
difficulty: 2
},
3: {
- grid: [
+ grid : [
['R', 'E', 'G', 'E', 'N'],
['#', '#', '#', '#', '#'],
['S', 'N', 'E', 'E', 'U'],
['#', '#', '#', '#', '#']
],
- words: [
+ words : [
{
- word: 'REGEN',
- clue: 'Valt uit de lucht →',
- startRow: 0,
- startCol: 0,
+ word : 'REGEN',
+ clue : 'Valt uit de lucht →',
+ startRow : 0,
+ startCol : 0,
direction: 'horizontal',
- answer: 'REGEN'
+ answer : 'REGEN'
},
{
- word: 'SNEEU',
- clue: 'Witte vlokken →',
- startRow: 2,
- startCol: 0,
+ word : 'SNEEU',
+ clue : 'Witte vlokken →',
+ startRow : 2,
+ startCol : 0,
direction: 'horizontal',
- answer: 'SNEEU'
+ answer : 'SNEEU'
}
],
difficulty: 3
},
// Tablet-optimized larger puzzles
4: {
- grid: [
+ grid : [
['H', 'A', 'A', 'S', '#', '#'],
['#', '#', '#', 'T', '#', '#'],
['V', 'L', 'I', 'E', 'G', '#'],
@@ -196,128 +196,128 @@ class KruiswoordProGame {
['#', '#', '#', '#', '#', '#'],
['#', '#', '#', '#', '#', '#']
],
- words: [
+ words : [
{
- word: 'HAAS',
- clue: 'Snel dier →',
- startRow: 0,
- startCol: 0,
+ word : 'HAAS',
+ clue : 'Snel dier →',
+ startRow : 0,
+ startCol : 0,
direction: 'horizontal',
- answer: 'HAAS'
+ answer : 'HAAS'
},
{
- word: 'VLIEG',
- clue: 'Insect →',
- startRow: 2,
- startCol: 0,
+ word : 'VLIEG',
+ clue : 'Insect →',
+ startRow : 2,
+ startCol : 0,
direction: 'horizontal',
- answer: 'VLIEG'
+ answer : 'VLIEG'
}
],
- difficulty: 2,
+ difficulty : 2,
tabletOptimized: true
}
- };
+ }
}
loadPuzzle(level) {
- const puzzles = this.getDutchPuzzles();
- this.currentPuzzle = puzzles[level] || puzzles[1];
- this.renderGrid();
- this.userAnswers = {};
- this.updateProgress();
+ const puzzles = this.getDutchPuzzles()
+ this.currentPuzzle = puzzles[level] || puzzles[1]
+ this.renderGrid()
+ this.userAnswers = {}
+ this.updateProgress()
}
renderGrid() {
- if (!this.currentPuzzle) return;
+ if (!this.currentPuzzle) return
- const grid = this.currentPuzzle.grid;
- const words = this.currentPuzzle.words;
+ const grid = this.currentPuzzle.grid
+ const words = this.currentPuzzle.words
- this.gridElement.innerHTML = '';
+ this.gridElement.innerHTML = ''
// Set grid dimensions
- const rows = grid.length;
- const cols = Math.max(...grid.map(row => row.length));
+ const rows = grid.length
+ const cols = Math.max(...grid.map(row => row.length))
// FIXED: Tablet-responsive sizing
- const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 60 : 50) : 45;
+ const cellSize = this.isTablet ? (window.innerWidth > 1024 ? 60 : 50) : 45
- 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';
+ 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
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);
+ const cellValue = grid[row] && grid[row][col] ? grid[row][col] : '#'
+ const cellElement = this.createCellElement(cellValue, row, col, words, cellSize)
+ this.gridElement.appendChild(cellElement)
}
}
- this.attachCellListeners();
+ this.attachCellListeners()
}
createCellElement(cellValue, row, col, words, cellSize) {
- const cellDiv = document.createElement('div');
- cellDiv.className = 'grid-cell';
- cellDiv.dataset.row = row;
- cellDiv.dataset.col = col;
+ 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`;
+ cellDiv.style.width = `${ cellSize }px`
+ cellDiv.style.height = `${ cellSize }px`
if (cellValue === '#') {
// Blocked cell
- cellDiv.classList.add('blocked-cell');
+ cellDiv.classList.add('blocked-cell')
} else if (this.isClueCell(row, col, words)) {
// Clue cell
- const clueData = this.getClueForPosition(row, col, words);
- cellDiv.classList.add('clue-cell', clueData.direction);
+ const clueData = this.getClueForPosition(row, col, words)
+ cellDiv.classList.add('clue-cell', clueData.direction)
// 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 ? '10px' : '8px'
- 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-${ clueData.direction === 'horizontal' ? 'right' : 'down' }`
+ arrow.textContent = clueData.direction === 'horizontal' ? '→' : '↓'
+ arrow.style.fontSize = this.isTablet ? '16px' : '14px'
- cellDiv.appendChild(clueText);
- cellDiv.appendChild(arrow);
+ cellDiv.appendChild(clueText)
+ cellDiv.appendChild(arrow)
} else {
// FIXED: Input cell - only create if it's part of a word
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;
+ cellDiv.classList.add('input-cell')
+ const input = document.createElement('input')
+ input.type = 'text'
+ input.maxLength = 1
+ input.dataset.row = row
+ input.dataset.col = col
// FIXED: Responsive font sizing
- input.style.fontSize = this.isTablet ? '24px' : '20px';
+ input.style.fontSize = this.isTablet ? '24px' : '20px'
// Add existing answer if available
- const key = `${row}-${col}`;
+ const key = `${ row }-${ col }`
if (this.userAnswers[key]) {
- input.value = this.userAnswers[key];
+ input.value = this.userAnswers[key]
}
- cellDiv.appendChild(input);
+ cellDiv.appendChild(input)
} else {
// Empty cell that's not part of any word
- cellDiv.classList.add('blocked-cell');
+ cellDiv.classList.add('blocked-cell')
}
}
- return cellDiv;
+ return cellDiv
}
// FIXED: Check if cell is part of any word
@@ -325,95 +325,95 @@ class KruiswoordProGame {
for (const word of words) {
if (word.direction === 'horizontal') {
if (row === word.startRow && col >= word.startCol && col < word.startCol + word.answer.length) {
- return true;
+ return true
}
} else if (word.direction === 'vertical') {
if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
- return true;
+ return true
}
}
}
- return false;
+ return false
}
isClueCell(row, col, words) {
- return words.some(word => word.startRow === row && word.startCol === col);
+ 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,
+ clue : word.clue,
direction: word.direction
- };
+ }
}
}
- return null;
+ return null
}
attachCellListeners() {
- const inputs = this.gridElement.querySelectorAll('input');
+ const inputs = this.gridElement.querySelectorAll('input')
inputs.forEach(input => {
input.addEventListener('input', (e) => {
- this.handleInput(e);
- });
+ this.handleInput(e)
+ })
input.addEventListener('focus', (e) => {
- this.selectCell(e.target);
- });
+ this.selectCell(e.target)
+ })
input.addEventListener('click', (e) => {
- this.selectCell(e.target);
- });
- });
+ this.selectCell(e.target)
+ })
+ })
}
handleInput(e) {
- const input = e.target;
- const value = input.value.toUpperCase();
- input.value = value;
+ 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}`;
+ const row = parseInt(input.dataset.row)
+ const col = parseInt(input.dataset.col)
+ const key = `${ row }-${ col }`
- this.userAnswers[key] = value;
+ 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.moveToNextInWord(input, row, col)
}
- this.updateProgress();
+ 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);
+ const currentWord = this.findWordContainingCell(row, col)
if (!currentWord) {
- this.moveToNextCell(currentInput);
- return;
+ this.moveToNextCell(currentInput)
+ return
}
- let nextRow = row;
- let nextCol = col;
+ let nextRow = row
+ let nextCol = col
if (currentWord.direction === 'horizontal') {
- nextCol++;
+ nextCol++
} else {
- nextRow++;
+ nextRow++
}
// Check if next position is still in the same word
- const nextInput = this.gridElement.querySelector(`input[data-row="${nextRow}"][data-col="${nextCol}"]`);
+ 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();
+ nextInput.focus()
+ nextInput.select()
} else {
// End of word, move to next available input
- this.moveToNextCell(currentInput);
+ this.moveToNextCell(currentInput)
}
}
@@ -421,140 +421,140 @@ class KruiswoordProGame {
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;
+ return word
}
} else if (word.direction === 'vertical') {
if (col === word.startCol && row >= word.startRow && row < word.startRow + word.answer.length) {
- return word;
+ return word
}
}
}
- return null;
+ return null
}
selectCell(input) {
// Remove previous selection
document.querySelectorAll('.grid-cell').forEach(cell => {
- cell.classList.remove('active');
- });
+ cell.classList.remove('active')
+ })
// Add selection to current cell
- input.parentElement.classList.add('active');
- this.selectedCell = input;
+ 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);
+ 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();
+ const nextInput = inputs[currentIndex + 1]
+ nextInput.focus()
+ nextInput.select()
}
}
handleKeyboardInput(e) {
- if (!this.selectedCell) return;
+ if (!this.selectedCell) return
- const inputs = Array.from(this.gridElement.querySelectorAll('input'));
- const currentIndex = inputs.indexOf(this.selectedCell);
+ const inputs = Array.from(this.gridElement.querySelectorAll('input'))
+ const currentIndex = inputs.indexOf(this.selectedCell)
- if (currentIndex === -1) return;
+ if (currentIndex === -1) return
- let targetIndex = currentIndex;
+ 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);
+ 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();
+ targetInput.focus()
+ targetInput.select()
}
- break;
+ break
case 'ArrowDown':
- const targetInputDown = this.findInputBelow(currentRow, currentCol);
+ const targetInputDown = this.findInputBelow(currentRow, currentCol)
if (targetInputDown) {
- targetInputDown.focus();
- targetInputDown.select();
+ targetInputDown.focus()
+ targetInputDown.select()
}
- break;
+ break
case 'ArrowLeft':
if (currentIndex > 0) {
- targetIndex--;
- inputs[targetIndex].focus();
- inputs[targetIndex].select();
+ targetIndex--
+ inputs[targetIndex].focus()
+ inputs[targetIndex].select()
}
- break;
+ break
case 'ArrowRight':
if (currentIndex < inputs.length - 1) {
- targetIndex++;
- inputs[targetIndex].focus();
- inputs[targetIndex].select();
+ targetIndex++
+ inputs[targetIndex].focus()
+ inputs[targetIndex].select()
}
- break;
+ 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;
+ 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;
+ const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
+ if (input) return input
}
- return null;
+ return null
}
findInputBelow(row, col) {
- const maxRow = Math.max(...Array.from(this.gridElement.querySelectorAll('input')).map(input => parseInt(input.dataset.row)));
+ 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;
+ const input = this.gridElement.querySelector(`input[data-row="${ r }"][data-col="${ col }"]`)
+ if (input) return input
}
- return null;
+ return null
}
checkAnswers() {
- let correct = 0;
- let total = 0;
+ let correct = 0
+ let total = 0
- const inputs = this.gridElement.querySelectorAll('input');
+ 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 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);
+ const correctAnswer = this.findCorrectAnswer(row, col)
if (correctAnswer) {
- total++;
+ total++
if (userAnswer === correctAnswer) {
- correct++;
- input.parentElement.classList.add('correct');
- input.parentElement.classList.remove('incorrect');
+ correct++
+ input.parentElement.classList.add('correct')
+ input.parentElement.classList.remove('incorrect')
} else if (userAnswer) {
- input.parentElement.classList.add('incorrect');
- input.parentElement.classList.remove('correct');
+ input.parentElement.classList.add('incorrect')
+ input.parentElement.classList.remove('correct')
}
}
- });
+ })
- const percentage = total > 0 ? Math.round((correct / total) * 100) : 0;
+ const percentage = total > 0 ? Math.round((correct / total) * 100) : 0
if (percentage === 100) {
- this.showSuccess();
+ this.showSuccess()
} else {
- this.showFeedback(`Je hebt ${correct} van de ${total} letters correct (${percentage}%)`);
+ this.showFeedback(`Je hebt ${ correct } van de ${ total } letters correct (${ percentage }%)`)
}
}
@@ -562,168 +562,168 @@ class KruiswoordProGame {
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];
+ 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];
+ const letterIndex = row - word.startRow
+ return word.answer[letterIndex]
}
}
}
- return null;
+ return null
}
clearGrid() {
if (confirm('Weet je zeker dat je alle ingevulde letters wilt wissen?')) {
- const inputs = this.gridElement.querySelectorAll('input');
+ const inputs = this.gridElement.querySelectorAll('input')
inputs.forEach(input => {
- input.value = '';
- input.parentElement.classList.remove('correct', 'incorrect');
- });
+ input.value = ''
+ input.parentElement.classList.remove('correct', 'incorrect')
+ })
- this.userAnswers = {};
- this.updateProgress();
- this.showFeedback('Raster gewist');
+ 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;
+ this.showFeedback('Je hebt geen hints meer. Verdien hints door puzzels op te lossen!', 'error')
+ return
}
- document.getElementById('hintModal').classList.add('active');
+ document.getElementById('hintModal').classList.add('active')
}
hideHintModal() {
- document.getElementById('hintModal').classList.remove('active');
+ document.getElementById('hintModal').classList.remove('active')
}
useHint() {
- if (this.hints <= 0) return;
+ if (this.hints <= 0) return
- const inputs = this.gridElement.querySelectorAll('input');
- const emptyInputs = Array.from(inputs).filter(input => !input.value);
+ 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;
+ 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);
+ 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;
+ randomInput.value = correctAnswer
+ const key = `${ row }-${ col }`
+ this.userAnswers[key] = correctAnswer
- this.hints--;
- this.updateUI();
- this.updateProgress();
- this.showFeedback('Letter onthuld!');
- this.hideHintModal();
+ this.hints--
+ this.updateUI()
+ this.updateProgress()
+ this.showFeedback('Letter onthuld!')
+ this.hideHintModal()
// Check if puzzle is complete
- this.checkIfComplete();
+ this.checkIfComplete()
}
}
checkIfComplete() {
- const inputs = this.gridElement.querySelectorAll('input');
- let allFilled = true;
+ const inputs = this.gridElement.querySelectorAll('input')
+ let allFilled = true
inputs.forEach(input => {
if (!input.value) {
- allFilled = false;
+ allFilled = false
}
- });
+ })
if (allFilled) {
- setTimeout(() => this.checkAnswers(), 500);
+ setTimeout(() => this.checkAnswers(), 500)
}
}
showSuccess() {
// Award rewards
- this.coins += 50;
- this.hints += 1;
- this.updateUI();
+ this.coins += 50
+ this.hints += 1
+ this.updateUI()
- document.getElementById('successModal').classList.add('active');
+ document.getElementById('successModal').classList.add('active')
}
hideSuccessModal() {
- document.getElementById('successModal').classList.remove('active');
+ document.getElementById('successModal').classList.remove('active')
}
nextPuzzle() {
- this.hideSuccessModal();
- this.currentLevel++;
- this.loadPuzzle(this.currentLevel);
- this.showFeedback(`Niveau ${this.currentLevel} geladen!`);
+ 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');
+ this.currentLevel++
+ this.loadPuzzle(this.currentLevel)
+ this.showFeedback('Puzzel overgeslagen')
}
}
loadDailyPuzzle() {
- this.showFeedback('Dagelijkse puzzel wordt geladen...');
+ this.showFeedback('Dagelijkse puzzel wordt geladen...')
// Implement daily puzzle logic
- document.getElementById('sideMenu').classList.remove('active');
+ document.getElementById('sideMenu').classList.remove('active')
}
showLevelSelect() {
- this.showFeedback('Niveau selectie komt binnenkort!');
- document.getElementById('sideMenu').classList.remove('active');
+ 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;
+ 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);
+ const row = parseInt(input.dataset.row)
+ const col = parseInt(input.dataset.col)
+ const correctAnswer = this.findCorrectAnswer(row, col)
if (correctAnswer) {
- total++;
+ total++
if (input.value) {
- filled++;
+ filled++
}
}
- });
+ })
- const progress = total > 0 ? Math.round((filled / total) * 100) : 0;
+ const progress = total > 0 ? Math.round((filled / total) * 100) : 0
- document.getElementById('progressFill').style.width = `${progress}%`;
- document.getElementById('progressText').textContent = `${progress}% voltooid`;
+ 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}`;
+ 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;
+ const feedback = document.createElement('div')
+ feedback.className = `feedback feedback-${ type }`
+ feedback.textContent = message
feedback.style.cssText = `
position: fixed;
@@ -737,34 +737,34 @@ class KruiswoordProGame {
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;
+ feedback.style.background = 'linear-gradient(135deg, #f56565, #e53e3e)'
+ break
case 'success':
- feedback.style.background = 'linear-gradient(135deg, #48bb78, #38a169)';
- break;
+ feedback.style.background = 'linear-gradient(135deg, #48bb78, #38a169)'
+ break
default:
- feedback.style.background = 'linear-gradient(135deg, #4299e1, #3182ce)';
+ feedback.style.background = 'linear-gradient(135deg, #4299e1, #3182ce)'
}
- document.body.appendChild(feedback);
+ document.body.appendChild(feedback)
setTimeout(() => {
- feedback.style.animation = 'slideOut 0.3s ease';
+ feedback.style.animation = 'slideOut 0.3s ease'
setTimeout(() => {
if (feedback.parentNode) {
- feedback.parentNode.removeChild(feedback);
+ feedback.parentNode.removeChild(feedback)
}
- }, 300);
- }, 3000);
+ }, 300)
+ }, 3000)
}
}
// Add CSS animations and tablet styles
-const style = document.createElement('style');
+const style = document.createElement('style')
style.textContent = `
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
@@ -811,10 +811,10 @@ style.textContent = `
min-height: 70vh;
}
}
-`;
-document.head.appendChild(style);
+`
+document.head.appendChild(style)
// Initialize game when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
- const game = new KruiswoordProGame();
-});
+ const game = new KruiswoordProGame()
+})
diff --git a/icon.png b/public/icon.png
similarity index 100%
rename from icon.png
rename to public/icon.png
diff --git a/icon.svg b/public/icon.svg
similarity index 100%
rename from icon.svg
rename to public/icon.svg
diff --git a/public/solve.html b/public/solve.html
deleted file mode 100644
index e049907..0000000
--- a/public/solve.html
+++ /dev/null
@@ -1,120 +0,0 @@
-
-
-
-
-
- Nederlandse Arroword Kruiswoordpuzzel
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
×
-
Instellingen
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/public/solvers.js b/public/solvers.js
deleted file mode 100644
index 7bf0236..0000000
--- a/public/solvers.js
+++ /dev/null
@@ -1,179 +0,0 @@
-// Pattern Solver
-class PatternSolver {
- static async solve(pattern) {
- try {
- const results = await PuzzleDatabase.getWordSuggestions(pattern);
- return results.map(item => ({
- word: item.word,
- clue: item.clue,
- confidence: this.calculateConfidence(pattern, item.word)
- }));
- } catch (error) {
- console.error('Pattern solving error:', error);
- return [];
- }
- }
-
- static calculateConfidence(pattern, word) {
- let matches = 0;
- let total = pattern.length;
-
- for (let i = 0; i < pattern.length; i++) {
- if (pattern[i] !== '_' && pattern[i] === word[i]) {
- matches++;
- }
- }
-
- return Math.round((matches / total) * 100);
- }
-}
-
-// Anagram Solver
-class AnagramSolver {
- static async solve(letters) {
- try {
- const results = await PuzzleDatabase.getAnagramSolutions(letters);
- return results.map(item => ({
- word: item.word,
- clue: item.clue
- }));
- } catch (error) {
- console.error('Anagram solving error:', error);
- return [];
- }
- }
-}
-
-// Word Helper UI Controller
-class WordHelperUI {
- constructor() {
- this.initializeEventListeners();
- }
-
- initializeEventListeners() {
- // Pattern solver
- const patternBtn = document.getElementById('patternSolveBtn');
- const patternInput = document.getElementById('patternInput');
-
- patternBtn.addEventListener('click', async () => {
- await this.handlePatternSolve();
- });
-
- patternInput.addEventListener('keypress', async (e) => {
- if (e.key === 'Enter') {
- await this.handlePatternSolve();
- }
- });
-
- // Anagram solver
- const anagramBtn = document.getElementById('anagramSolveBtn');
- const anagramInput = document.getElementById('anagramInput');
-
- anagramBtn.addEventListener('click', async () => {
- await this.handleAnagramSolve();
- });
-
- anagramInput.addEventListener('keypress', async (e) => {
- if (e.key === 'Enter') {
- await this.handleAnagramSolve();
- }
- });
- }
-
- async handlePatternSolve() {
- const input = document.getElementById('patternInput').value.trim().toUpperCase();
- const resultsDiv = document.getElementById('patternResults');
-
- if (!input || !input.includes('_')) {
- this.showError(resultsDiv, 'Voer een patroon in met onderstrepingstekens (_) voor onbekende letters.');
- return;
- }
-
- this.showLoading(resultsDiv);
-
- try {
- const solutions = await PatternSolver.solve(input);
- this.displayPatternResults(resultsDiv, solutions);
- } catch (error) {
- this.showError(resultsDiv, 'Er is een fout opgetreden bij het zoeken.');
- }
- }
-
- async handleAnagramSolve() {
- const input = document.getElementById('anagramInput').value.trim().toUpperCase();
- const resultsDiv = document.getElementById('anagramResults');
-
- if (!input || input.length < 3) {
- this.showError(resultsDiv, 'Voer minstens 3 letters in voor anagram zoeken.');
- return;
- }
-
- this.showLoading(resultsDiv);
-
- try {
- const solutions = await AnagramSolver.solve(input);
- this.displayAnagramResults(resultsDiv, solutions);
- } catch (error) {
- this.showError(resultsDiv, 'Er is een fout opgetreden bij het ontcijferen.');
- }
- }
-
- showLoading(container) {
- container.innerHTML = 'Zoeken...';
- }
-
- showError(container, message) {
- container.innerHTML = `${message}
`;
- }
-
- displayPatternResults(container, results) {
- if (results.length === 0) {
- container.innerHTML = 'Geen woorden gevonden.
';
- return;
- }
-
- const html = results.map(result => `
-
- ${result.word} - ${result.clue}
- ${result.confidence}%
-
- `).join('');
-
- container.innerHTML = html;
- }
-
- displayAnagramResults(container, results) {
- if (results.length === 0) {
- container.innerHTML = 'Geen anagrammen gevonden.
';
- return;
- }
-
- const html = results.map(result => `
-
- ${result.word} - ${result.clue}
-
- `).join('');
-
- container.innerHTML = html;
- }
-
- insertWord(word) {
- // This method can be enhanced to insert the word into the current active cell
- const activeCell = document.querySelector('.grid-cell.active input');
- if (activeCell) {
- activeCell.value = word[0];
- // Move to next cells automatically
- let currentInput = activeCell;
- for (let i = 1; i < word.length; i++) {
- const nextCell = currentCell.parentElement.nextElementSibling?.querySelector('input');
- if (nextCell) {
- nextCell.value = word[i];
- currentInput = nextCell;
- }
- }
- }
- }
-}
-
-// Initialize word helper
-const wordHelperUI = new WordHelperUI();
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index fa06c67..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,472 +0,0 @@
-/* Reset and Base Styles */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- min-height: 100vh;
- color: #333;
-}
-
-/* App Container */
-.app-container {
- max-width: 1400px;
- margin: 0 auto;
- padding: 20px;
-}
-
-/* Header */
-.app-header {
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(10px);
- border-radius: 15px;
- padding: 20px 30px;
- margin-bottom: 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-.app-header h1 {
- color: #4a5568;
- font-size: 2rem;
- font-weight: 700;
-}
-
-.header-controls {
- display: flex;
- gap: 15px;
-}
-
-/* Buttons */
-.btn {
- padding: 12px 20px;
- border: none;
- border-radius: 8px;
- cursor: pointer;
- font-weight: 600;
- transition: all 0.3s ease;
- display: inline-flex;
- align-items: center;
- gap: 8px;
- text-decoration: none;
-}
-
-.btn-primary {
- background: linear-gradient(135deg, #667eea, #764ba2);
- color: white;
-}
-
-.btn-primary:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
-}
-
-.btn-secondary {
- background: #e2e8f0;
- color: #4a5568;
-}
-
-.btn-secondary:hover {
- background: #cbd5e0;
-}
-
-.btn-success {
- background: linear-gradient(135deg, #48bb78, #38a169);
- color: white;
-}
-
-.btn-warning {
- background: linear-gradient(135deg, #ed8936, #dd6b20);
- color: white;
-}
-
-.btn-danger {
- background: linear-gradient(135deg, #f56565, #e53e3e);
- color: white;
-}
-
-.btn-help {
- background: linear-gradient(135deg, #4299e1, #3182ce);
- color: white;
- padding: 8px 15px;
- font-size: 0.9rem;
-}
-
-/* Main Content */
-.main-content {
- display: grid;
- grid-template-columns: 1fr 350px;
- gap: 30px;
- align-items: start;
-}
-
-/* Puzzle Container */
-.puzzle-container {
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(10px);
- border-radius: 15px;
- padding: 30px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-/* Crossword Grid */
-.crossword-grid {
- display: grid;
- gap: 2px;
- background: #2d3748;
- padding: 10px;
- border-radius: 10px;
- width: fit-content;
- margin: 0 auto;
-}
-
-.grid-cell {
- width: 40px;
- height: 40px;
- border: 2px solid #e2e8f0;
- background: white;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: bold;
- font-size: 18px;
- cursor: pointer;
- transition: all 0.2s ease;
- position: relative;
-}
-
-.grid-cell:hover {
- background: #f7fafc;
- border-color: #4299e1;
-}
-
-.grid-cell.active {
- background: #ebf8ff;
- border-color: #3182ce;
- box-shadow: 0 0 10px rgba(66, 153, 225, 0.3);
-}
-
-.grid-cell.correct {
- background: #c6f6d5;
- border-color: #48bb78;
-}
-
-.grid-cell.incorrect {
- background: #fed7d7;
- border-color: #f56565;
-}
-
-/* Clue Cell Styles */
-.clue-cell {
- background: linear-gradient(135deg, #4a5568, #2d3748);
- color: white;
- font-size: 8px;
- font-weight: 600;
- text-align: center;
- padding: 2px;
- line-height: 1.2;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
-}
-
-.clue-cell.horizontal {
- border-right: 3px solid #4299e1;
-}
-
-.clue-cell.vertical {
- border-bottom: 3px solid #4299e1;
-}
-
-.clue-text {
- font-size: 7px;
- line-height: 1.1;
- word-wrap: break-word;
- text-align: left;
-}
-
-.arrow {
- position: absolute;
- font-size: 12px;
- color: #4299e1;
- font-weight: bold;
-}
-
-.arrow-right {
- right: 2px;
- top: 50%;
- transform: translateY(-50%);
-}
-
-.arrow-down {
- bottom: 2px;
- left: 50%;
- transform: translateX(-50%);
-}
-
-/* Input Cell Styles */
-.input-cell {
- background: white;
- border: 2px solid #cbd5e0;
-}
-
-.input-cell input {
- width: 100%;
- height: 100%;
- border: none;
- background: transparent;
- text-align: center;
- font-weight: bold;
- font-size: 18px;
- color: #2d3748;
- text-transform: uppercase;
-}
-
-.input-cell input:focus {
- outline: none;
- background: #ebf8ff;
-}
-
-/* Blocked Cell */
-.blocked-cell {
- background: #2d3748;
- border: 2px solid #2d3748;
-}
-
-/* Sidebar */
-.sidebar {
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-
-/* Solver Tools */
-.solver-tools, .game-controls {
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(10px);
- border-radius: 15px;
- padding: 25px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-.solver-tools h3 {
- color: #4a5568;
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- gap: 10px;
-}
-
-.solver-section {
- margin-bottom: 20px;
-}
-
-.solver-section h4 {
- color: #2d3748;
- margin-bottom: 10px;
- font-size: 1rem;
-}
-
-.solver-section input {
- width: 100%;
- padding: 10px;
- border: 2px solid #e2e8f0;
- border-radius: 6px;
- margin-bottom: 10px;
- font-size: 14px;
-}
-
-.solver-section input:focus {
- outline: none;
- border-color: #4299e1;
-}
-
-.solver-results {
- max-height: 100px;
- overflow-y: auto;
- background: #f7fafc;
- border-radius: 6px;
- padding: 10px;
- margin-top: 10px;
-}
-
-.solver-result {
- padding: 5px 0;
- cursor: pointer;
- border-bottom: 1px solid #e2e8f0;
-}
-
-.solver-result:hover {
- background: #ebf8ff;
-}
-
-.solver-result:last-child {
- border-bottom: none;
-}
-
-/* Progress Section */
-.progress-section h4 {
- color: #2d3748;
- margin-bottom: 10px;
-}
-
-.progress-bar {
- width: 100%;
- height: 10px;
- background: #e2e8f0;
- border-radius: 5px;
- overflow: hidden;
- margin-bottom: 10px;
-}
-
-.progress-fill {
- height: 100%;
- background: linear-gradient(90deg, #48bb78, #38a169);
- width: 0%;
- transition: width 0.3s ease;
-}
-
-#progressText {
- font-size: 14px;
- color: #4a5568;
- font-weight: 600;
-}
-
-/* Game Controls */
-.game-controls {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
-
-.game-controls .btn {
- width: 100%;
- justify-content: center;
-}
-
-/* Modal */
-.modal {
- display: none;
- position: fixed;
- z-index: 1000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
-}
-
-.modal-content {
- background-color: white;
- margin: 15% auto;
- padding: 30px;
- border-radius: 15px;
- width: 80%;
- max-width: 500px;
- position: relative;
-}
-
-.close {
- color: #aaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
- cursor: pointer;
-}
-
-.close:hover {
- color: #000;
-}
-
-.settings-group {
- margin-bottom: 20px;
-}
-
-.settings-group label {
- display: block;
- margin-bottom: 5px;
- font-weight: 600;
-}
-
-.settings-group select {
- width: 100%;
- padding: 10px;
- border: 2px solid #e2e8f0;
- border-radius: 6px;
-}
-
-/* Responsive Design */
-@media (max-width: 1024px) {
- .main-content {
- grid-template-columns: 1fr;
- }
-
- .sidebar {
- order: -1;
- }
-}
-
-@media (max-width: 768px) {
- .app-header {
- flex-direction: column;
- gap: 15px;
- text-align: center;
- }
-
- .header-controls {
- justify-content: center;
- }
-
- .grid-cell {
- width: 35px;
- height: 35px;
- font-size: 16px;
- }
-
- .clue-text {
- font-size: 6px;
- }
-}
-
-/* Animations */
-@keyframes fadeIn {
- from { opacity: 0; transform: translateY(20px); }
- to { opacity: 1; transform: translateY(0); }
-}
-
-.crossword-grid {
- animation: fadeIn 0.5s ease-out;
-}
-
-/* Success Animation */
-@keyframes success {
- 0% { transform: scale(1); }
- 50% { transform: scale(1.1); }
- 100% { transform: scale(1); }
-}
-
-.correct {
- animation: success 0.3s ease;
-}
-
-/* Loading Animation */
-.loading {
- display: inline-block;
- width: 20px;
- height: 20px;
- border: 3px solid #f3f3f3;
- border-top: 3px solid #4299e1;
- border-radius: 50%;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- 0% { transform: rotate(0deg); }
- 100% { transform: rotate(360deg); }
-}
diff --git a/webpack.common.js b/webpack.common.js
deleted file mode 100644
index 6fb1522..0000000
--- a/webpack.common.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const path = require('path')
-
-module.exports = {
- entry : {
- app: './js/app.js'
- },
- output: {
- path : path.resolve(__dirname, 'dist'),
- clean : true,
- filename: './js/app.js'
- }
-}
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
deleted file mode 100644
index 60f63f7..0000000
--- a/webpack.config.dev.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { merge } = require('webpack-merge')
-const common = require('./webpack.common.js')
-
-module.exports = merge(common, {
- mode : 'development',
- devtool : 'inline-source-map',
- devServer: {
- liveReload: true,
- hot : true,
- open : true,
- static : ['./']
- }
-})
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
deleted file mode 100644
index ef79d84..0000000
--- a/webpack.config.prod.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const { merge } = require('webpack-merge')
-const common = require('./webpack.common.js')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const CopyPlugin = require('copy-webpack-plugin')
-
-module.exports = merge(common, {
- mode : 'production',
- plugins: [
- new HtmlWebpackPlugin({
- template: './index.html'
- }),
- new CopyPlugin({
- patterns: [
- { from: 'img', to: 'img' },
- { from: 'css', to: 'css' },
- { from: 'js/vendor', to: 'js/vendor' },
- { from: 'icon.svg', to: 'icon.svg' },
- { from: 'favicon.ico', to: 'favicon.ico' },
- { from: 'robots.txt', to: 'robots.txt' },
- { from: 'icon.png', to: 'icon.png' },
- { from: '404.html', to: '404.html' },
- { from: 'site.webmanifest', to: 'site.webmanifest' }
- ]
- })
- ]
-})