Update 2025-04-13_16:26:04
This commit is contained in:
root
71
static/app.js
Normal file
71
static/app.js
Normal file
@ -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));
|
||||
}
|
||||
});
|
||||
|
||||
45
static/emoji.js
Normal file
45
static/emoji.js
Normal file
@ -0,0 +1,45 @@
|
||||
// emoji.js – zentrale Emoji-Liste für Emoji Evolution
|
||||
|
||||
export const ALL_EMOJIS = [
|
||||
// Faces
|
||||
"😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇",
|
||||
"🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚",
|
||||
"😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🥳",
|
||||
"🤯", "😤", "😡", "😠", "🤬", "😳", "🥺", "😢", "😭", "😱",
|
||||
"😰", "😥", "😓", "🤗", "🤔", "🤭", "🤫", "🤥", "😶", "😐",
|
||||
"😑", "😬", "🙄", "😯", "😦", "😧", "😮", "😲", "🥱", "😴",
|
||||
"😪", "😵", "🤢", "🤮", "🤧", "😷", "🤒", "🤕", "🤑", "😈",
|
||||
"👿", "👹", "👺", "💀", "👻", "👽", "🤖", "🎃", "😺", "😸",
|
||||
"😹", "😻", "😼", "😽", "🙀", "😿", "😾",
|
||||
|
||||
// New Unicode Faces / People
|
||||
"🫠", "🫣", "🫡", "🫥", "🫢", "🫨", "🫤", "🫦", "🫧", "🫰",
|
||||
"🫶", "🫱", "🫲", "🫳", "🫴", "🫵", "🫂", "🫄", "🫃", "🫅",
|
||||
|
||||
// Animals & Fauna
|
||||
"🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯",
|
||||
"🦁", "🐮", "🐷", "🐸", "🐵", "🐔", "🐧", "🐦", "🐤", "🐣",
|
||||
"🦆", "🦅", "🦉", "🦇", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛",
|
||||
"🦋", "🐌", "🐞", "🐜", "🦂", "🐢", "🐍", "🦎", "🦖", "🦕",
|
||||
|
||||
// Funny / Objects / Faces / Weird
|
||||
"💩", "🪿", "🍌", "🥒", "🥚", "🍕", "🍟", "🍿", "🎂", "🧁",
|
||||
"🍭", "🍩", "🍦", "🎈", "🎉", "🎊", "🎭", "👯", "🕺", "💃",
|
||||
|
||||
// Weird & Misc
|
||||
"🧠", "🦷", "🦴", "🦻", "🧏", "🧌", "🪳", "🪰", "🪱", "🪲",
|
||||
"🪨", "🧿", "🪬", "🧸", "🪦", "🪞", "🪡", "🪢", "🪤",
|
||||
"🪥", "🪜", "🧃", "🧊", "🧪", "🧬", "🧫", "🧯", "🧱", "🪓",
|
||||
|
||||
// Flora & Additional Fauna
|
||||
"🦀", "🦞", "🦐", "🦑", "🐙", "🐚", "🐬", "🐳", "🐋", "🐊",
|
||||
"🐆", "🐅", "🐃", "🐂", "🐄", "🦌", "🦬", "🐘", "🦣", "🦏",
|
||||
"🦛", "🐪", "🐫", "🦙", "🦒", "🐓", "🦃", "🕊", "🦜", "🦢",
|
||||
"🦩", "🦚", "🦤", "🪶", "🪺", "🦔", "🐇", "🐁", "🐀", "🐿",
|
||||
"🦫", "🦦", "🦥", "🐾",
|
||||
|
||||
// Flora
|
||||
"🌵", "🎄", "🌲", "🌳", "🌴", "🌱", "🌿", "☘️", "🍀",
|
||||
"🎍", "🪷", "💐", "🌸", "🌼", "🌻", "🌺", "🌹", "🥀", "🪻"
|
||||
];
|
||||
|
||||
30
static/index.html
Normal file
30
static/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Emoji Evolution: The Single-Player Puzzle</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Emoji Evolution: Your Ultimate Puzzle Experience</h1>
|
||||
|
||||
<h2>Puzzle Area</h2>
|
||||
<div id="puzzle-area">
|
||||
<div class="emoji-slot" data-slot="0"></div>
|
||||
<div class="emoji-slot" data-slot="1"></div>
|
||||
<div class="emoji-slot" data-slot="2"></div>
|
||||
</div>
|
||||
|
||||
<h2>Emoji Bank</h2>
|
||||
<div id="emoji-bank"></div>
|
||||
|
||||
<h2>Solution Check</h2>
|
||||
<div class="button-group">
|
||||
<button id="reset-btn" class="secondary-button">🔄</button>
|
||||
</div>
|
||||
<div id="feedback" style="text-align: left; margin-top: 20px; white-space: pre-line;"></div>
|
||||
|
||||
<script type="module" src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
35
static/ollama.js
Normal file
35
static/ollama.js
Normal file
@ -0,0 +1,35 @@
|
||||
// ollama.js – OpenAI-kompatibler API-Aufruf für Open-WebUI
|
||||
|
||||
export async function checkWithOllama(sequence) {
|
||||
const prompt = sequence.join(" ");
|
||||
|
||||
try {
|
||||
const response = await fetch("https://at1.dynproxy.net/api/chat/completions", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": "Bearer sk-d0e3a491b19c435a975b234969298cd0"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: "gemma3:1b",
|
||||
messages: [
|
||||
{ role: "system", content: "Du bist ein Emoji-Detektiv für Kinder. Bewerte jedes Emoji in genau einer Zeile im Format: Position X: ✅ oder ❌ Emoji – einfache, freundliche Begründung." },
|
||||
{ role: "user", content: prompt } ],
|
||||
stream: false
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Ollama API Error:", response.status);
|
||||
return "(Fehler beim LLM-Request)";
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.choices?.[0]?.message?.content?.trim() || "(keine Antwort vom Modell)";
|
||||
|
||||
} catch (error) {
|
||||
console.error("LLM-Request fehlgeschlagen:", error);
|
||||
return "(Verbindungsfehler mit Ollama)";
|
||||
}
|
||||
}
|
||||
|
||||
93
static/style.css
Normal file
93
static/style.css
Normal file
@ -0,0 +1,93 @@
|
||||
/* Normal Stylesheet for Emoji Evolution */
|
||||
|
||||
body {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#puzzle-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.emoji-slot {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px dashed #34495E;
|
||||
background-color: #ECF0F1;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
#emoji-bank {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 32px;
|
||||
cursor: move;
|
||||
color: #4A90E2;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#submit-btn,
|
||||
#reset-btn {
|
||||
padding: 10px 20px;
|
||||
background-color: #4A90E2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#submit-btn:hover,
|
||||
#reset-btn:hover {
|
||||
background-color: #F39C12;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
background-color: #bdc3c7;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
#feedback {
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
color: #34495E;
|
||||
}
|
||||
|
||||
.page-break {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user