Update 2025-04-13_16:26:04

static/app.js

@@ -0,0 +1,71 @@
+import { ALL_EMOJIS } from './emoji.js';
+import { checkWithOllama } from './ollama.js';
+
+document.addEventListener("DOMContentLoaded", () => {
+    const slots = document.querySelectorAll(".emoji-slot");
+    const emojiBank = document.getElementById("emoji-bank");
+    const resetBtn = document.getElementById("reset-btn");
+    const feedback = document.getElementById("feedback");
+
+    const allEmojis = ALL_EMOJIS;
+    const selectedEmojis = allEmojis.sort(() => 0.5 - Math.random()).slice(0, 9);
+
+    // Fill emoji bank with shuffled emojis
+    selectedEmojis.forEach(emoji => {
+        const span = document.createElement("span");
+        span.className = "emoji";
+        span.textContent = emoji;
+        span.draggable = true;
+        span.addEventListener("dragstart", (e) => {
+            e.dataTransfer.setData("text", e.target.textContent);
+        });
+        emojiBank.appendChild(span);
+    });
+
+    // Drag and Drop Setup (emoji drag already handled inline)
+
+    slots.forEach(slot => {
+        slot.addEventListener("dragover", (e) => e.preventDefault());
+        slot.addEventListener("drop", (e) => {
+            e.preventDefault();
+            const emoji = e.dataTransfer.getData("text");
+            slot.textContent = emoji;
+            saveSequence();
+            checkPuzzle();
+        });
+    });
+
+    // Auto-check puzzle when a drop occurs
+    async function checkPuzzle() {
+        const sequence = Array.from(slots).map(slot => slot.textContent || "");
+
+        
+
+        feedback.textContent = "⌛ Checking your solution...";
+
+        try {
+            const result = await checkWithOllama(sequence);
+            feedback.innerHTML = result
+                .split("\n")
+                .map(line => `${line}`)
+                .join("<br>");
+        } catch (err) {
+            feedback.textContent = "❌ Error while checking the puzzle.";
+            console.error(err);
+        }
+    }
+
+    // Reset Puzzle
+    resetBtn.addEventListener("click", () => {
+        slots.forEach(slot => slot.textContent = "");
+        localStorage.removeItem("emojiSequence");
+        feedback.textContent = "";
+    });
+
+    // Save sequence to localStorage
+    function saveSequence() {
+        const sequence = Array.from(slots).map(slot => slot.textContent || "");
+        localStorage.setItem("emojiSequence", JSON.stringify(sequence));
+    }
+});
+