72 lines
2.3 KiB
JavaScript
72 lines
2.3 KiB
JavaScript
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));
|
|
}
|
|
});
|
|
|