init

solvers.js

@@ -0,0 +1,179 @@
+// 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();