all
This commit is contained in:
mike
14
package.json
14
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": " ",
|
"name": "crosser",
|
||||||
"version": "0.0.1",
|
"version": "0.0.2",
|
||||||
"description": "",
|
"description": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
"keywords": [
|
"keywords": [
|
||||||
@@ -9,16 +9,8 @@
|
|||||||
"license": "",
|
"license": "",
|
||||||
"author": "",
|
"author": "",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
"start": "webpack serve --open --config webpack.config.dev.js",
|
|
||||||
"build": "webpack --config webpack.config.prod.js"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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