From eb0c79b657c7930b2f05c6151edffe3abd8a1bb4 Mon Sep 17 00:00:00 2001
From: mike <michael@appmodel.nl>
Date: Tue, 16 Dec 2025 13:26:51 +0100
Subject: [PATCH] all

---
 img/.gitkeep                      |   0
 js/app.js                         |   0
 package.json                      |  14 +-
 404.html => public/404.html       |   0
 public/crossword.js               | 481 ---------------------
 favicon.ico => public/favicon.ico | Bin
 public/gameLogic.js               | 676 +++++++++++++++---------------
 icon.png => public/icon.png       | Bin
 icon.svg => public/icon.svg       |   0
 public/solve.html                 | 120 ------
 public/solvers.js                 | 179 --------
 public/style.css                  | 472 ---------------------
 webpack.common.js                 |  12 -
 webpack.config.dev.js             |  13 -
 webpack.config.prod.js            |  26 --
 15 files changed, 341 insertions(+), 1652 deletions(-)
 delete mode 100644 img/.gitkeep
 delete mode 100644 js/app.js
 rename 404.html => public/404.html (100%)
 delete mode 100644 public/crossword.js
 rename favicon.ico => public/favicon.ico (100%)
 rename icon.png => public/icon.png (100%)
 rename icon.svg => public/icon.svg (100%)
 delete mode 100644 public/solve.html
 delete mode 100644 public/solvers.js
 delete mode 100644 public/style.css
 delete mode 100644 webpack.common.js
 delete mode 100644 webpack.config.dev.js
 delete mode 100644 webpack.config.prod.js

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