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

all

Browse Source
This commit is contained in:
mike
2025-12-16 13:26:51 +01:00
parent b48121e6f8
commit eb0c79b657
15 changed files with 341 additions and 1652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
img/.gitkeep
View File

0
js/app.js
View File

14
package.json
View File

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

0
404.html → public/404.html
View File

481
public/crossword.js
View File

@@ -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();
});

0
favicon.ico → public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 766 B

After

Width:  |  Height:  |  Size: 766 B

576
public/gameLogic.js
View File

@@ -1,105 +1,105 @@
// 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
@@ -217,107 +217,107 @@ class KruiswoordProGame {
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,19 +325,19 @@ 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) {
@@ -346,74 +346,74 @@ class KruiswoordProGame {
return {
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()
})

0
icon.png → public/icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

0
icon.svg → public/icon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 429 B

After

Width:  |  Height:  |  Size: 429 B

120
public/solve.html
View File

@@ -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">&times;</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>

179
public/solvers.js
View File

@@ -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
View File

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

12
webpack.common.js
View File

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

13
webpack.config.dev.js
View File

@@ -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 : ['./']
}
})

26
webpack.config.prod.js
View File

@@ -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' }
]
})
]
})