all
This commit is contained in:
mike
14
package.json
14
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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 = `
|
||||
<div class="clue-text">${clueData.clue}</div>
|
||||
<div class="arrow ${clueData.direction === 'horizontal' ? 'arrow-right' : 'arrow-down'}">
|
||||
${clueData.direction === 'horizontal' ? '→' : '↓'}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
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 = '<div style="text-align: center; padding: 50px;"><div class="loading"></div><p>Laden...</p></div>';
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
|
Before Width: | Height: | Size: 766 B After Width: | Height: | Size: 766 B |
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 429 B After Width: | Height: | Size: 429 B |
@@ -1,120 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nederlandse Arroword Kruiswoordpuzzel</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<h1><i class="fas fa-puzzle-piece"></i> Nederlandse Arroword</h1>
|
||||
<div class="header-controls">
|
||||
<button id="newPuzzleBtn" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> Nieuwe Puzzel
|
||||
</button>
|
||||
<button id="settingsBtn" class="btn btn-secondary">
|
||||
<i class="fas fa-cog"></i> Instellingen
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<!-- Puzzle Grid Container -->
|
||||
<div class="puzzle-container">
|
||||
<div id="crosswordGrid" class="crossword-grid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<!-- Word Solver Tools -->
|
||||
<div class="solver-tools">
|
||||
<h3><i class="fas fa-lightbulb"></i> Hulp Gereedschap</h3>
|
||||
|
||||
<!-- Letter Pattern Solver -->
|
||||
<div class="solver-section">
|
||||
<h4>Letter Patroon</h4>
|
||||
<input type="text" id="patternInput" placeholder="Bijv: H_L_O" maxlength="20">
|
||||
<button id="patternSolveBtn" class="btn btn-help">
|
||||
<i class="fas fa-search"></i> Zoek
|
||||
</button>
|
||||
<div id="patternResults" class="solver-results"></div>
|
||||
</div>
|
||||
|
||||
<!-- Anagram Solver -->
|
||||
<div class="solver-section">
|
||||
<h4>Anagram Oplosser</h4>
|
||||
<input type="text" id="anagramInput" placeholder="Bijv: OLHLO" maxlength="15">
|
||||
<button id="anagramSolveBtn" class="btn btn-help">
|
||||
<i class="fas fa-random"></i> Ontcijfer
|
||||
</button>
|
||||
<div id="anagramResults" class="solver-results"></div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Tracker -->
|
||||
<div class="progress-section">
|
||||
<h4>Voortgang</h4>
|
||||
<div class="progress-bar">
|
||||
<div id="progressFill" class="progress-fill"></div>
|
||||
</div>
|
||||
<span id="progressText">0% voltooid</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game Controls -->
|
||||
<div class="game-controls">
|
||||
<button id="checkAnswersBtn" class="btn btn-success">
|
||||
<i class="fas fa-check"></i> Controleer
|
||||
</button>
|
||||
<button id="revealLetterBtn" class="btn btn-warning">
|
||||
<i class="fas fa-eye"></i> Onthul Letter
|
||||
</button>
|
||||
<button id="clearGridBtn" class="btn btn-danger">
|
||||
<i class="fas fa-trash"></i> Wissen
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div id="settingsModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Instellingen</h2>
|
||||
<div class="settings-group">
|
||||
<label for="difficultySelect">Moeilijkheidsgraad:</label>
|
||||
<select id="difficultySelect">
|
||||
<option value="easy">Gemakkelijk</option>
|
||||
<option value="medium" selected>Normaal</option>
|
||||
<option value="hard">Moeilijk</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label for="gridSizeSelect">Raster Grootte:</label>
|
||||
<select id="gridSizeSelect">
|
||||
<option value="11x16" selected>11x16 (Standaard)</option>
|
||||
<option value="13x18">13x18</option>
|
||||
<option value="15x20">15x20</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label for="languageSelect">Taal:</label>
|
||||
<select id="languageSelect">
|
||||
<option value="nl" selected>Nederlands</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="puzzleData.js"></script>
|
||||
<script src="solvers.js"></script>
|
||||
<script src="crossword.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 = '<div class="loading"></div><span>Zoeken...</span>';
|
||||
}
|
||||
|
||||
showError(container, message) {
|
||||
container.innerHTML = `<div style="color: #e53e3e; font-style: italic;">${message}</div>`;
|
||||
}
|
||||
|
||||
displayPatternResults(container, results) {
|
||||
if (results.length === 0) {
|
||||
container.innerHTML = '<div style="color: #718096; font-style: italic;">Geen woorden gevonden.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = results.map(result => `
|
||||
<div class="solver-result" onclick="wordHelperUI.insertWord('${result.word}')">
|
||||
<strong>${result.word}</strong> - ${result.clue}
|
||||
<span style="float: right; color: #48bb78; font-size: 12px;">${result.confidence}%</span>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
displayAnagramResults(container, results) {
|
||||
if (results.length === 0) {
|
||||
container.innerHTML = '<div style="color: #718096; font-style: italic;">Geen anagrammen gevonden.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const html = results.map(result => `
|
||||
<div class="solver-result" onclick="wordHelperUI.insertWord('${result.word}')">
|
||||
<strong>${result.word}</strong> - ${result.clue}
|
||||
</div>
|
||||
`).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();
|
||||
472
public/style.css
472
public/style.css
@@ -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); }
|
||||
}
|
||||
@@ -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'
|
||||
}
|
||||
}
|
||||
@@ -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 : ['./']
|
||||
}
|
||||
})
|
||||
@@ -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' }
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
Reference in New Issue
Block a user