Update 2025-04-13_17:31:30

static/app.js

@@ -1,75 +1,60 @@
-let currentWord = [];
-let attemptsLeft = 0;
+import { setupButtons } from "./button.js";
+import { drawLineChart } from "./chart.js";
+import { shapeToEmoji } from "./emoji.js";
+import { playSound } from "./sound.js";
+import { guess } from "./score.js";
+import { startRound } from "./round.js";
+import { previousTile, currentTile } from "./state.js";
+import { generateRandomTiles } from "./tile.js";
+import { renderTiles } from "./render.js";
 
-const wordDisplay = document.getElementById("word");
-const input = document.getElementById("input");
-const feedback = document.getElementById("feedback");
-const attemptsDisplay = document.getElementById("attempts");
-const startBtn = document.getElementById("start");
-const topicLabel = document.createElement("div");
-topicLabel.id = "topic-label";
-topicLabel.style.marginTop = "1rem";
-topicLabel.style.fontWeight = "bold";
-wordDisplay.parentElement.insertBefore(topicLabel, wordDisplay);
+let selectedIndices = [];
+let correctChangedTiles = [];
+let showFeedback = false;
 
-function renderWord() {
-    wordDisplay.textContent = currentWord.join(" ");
-    attemptsDisplay.textContent = `Versuche übrig: ${attemptsLeft}`;
+let tiles = [];
+
+function startGame() {
+  tiles.forEach(tile => delete tile.feedback);
+  document.getElementById("game-area").classList.add("flash");
+  setTimeout(() => {
+    document.getElementById("game-area").classList.remove("flash");
+  }, 250);
+  const beforeTiles = generateRandomTiles();
+  const { modifiedTiles, changedIndices } = createModifiedTiles(beforeTiles);
+
+  tiles = modifiedTiles;
+  correctChangedTiles = changedIndices;
+  selectedIndices = [];
+  showFeedback = false;
+
+  renderTiles();
+  document.getElementById("submit-btn").disabled = false;
 }
 
-async function startGame() {
-    const res = await fetch("/api/start", {
-        method: "POST"
-    });
+function handleSubmit() {
+  showFeedback = true;
+  renderTiles();
 
-    const data = await res.json();
-    if (!data.word) {
-        feedback.textContent = "❌ Fehler: Keine gültige Antwort vom Server.";
-        return;
-    }
+  const result = calculateScore(selectedIndices, correctChangedTiles);
+  playSound(result.score > 0 ? "correct" : "wrong");
 
-    currentWord = data.word;
-    attemptsLeft = data.attempts;
-    topicLabel.textContent = `🧠 Thema: ${data.topic || '(unbekannt)'}`;
-    feedback.textContent = `Spiel gestartet (${data.source})`;
-    renderWord();
-    input.focus();
+  document.getElementById("submit-btn").disabled = true;
+
+  setTimeout(() => {
+    startGame();
+  }, 2500);
 }
 
-async function guessLetter() {
-    if (!currentWord.length) {
-        feedback.textContent = "❌ Bitte zuerst ein Spiel starten!";
-        return;
-    }
-
-    const letter = input.value.trim().toLowerCase();
-    if (!letter || letter.length !== 1) return;
-
-    const res = await fetch(`/api/guess/${letter}`, { method: "POST" });
-    const data = await res.json();
-
-    if (!data.word) {
-        feedback.textContent = "❌ Kein aktives Spiel – bitte erst starten!";
-        return;
-    }
-
-    currentWord = data.word;
-    attemptsLeft = data.attempts;
-
-    let msg = data.correct_this_turn > 0 ? "✅" : "❌";
-    if (data.status === "won") {
-        msg += " 🎉 Gewonnen!";
-    } else if (data.status === "lost") {
-        msg += ` 💥 Verloren! ⇨ ${data.target} ⇦`;
-    }
-    feedback.textContent = msg;
-    renderWord();
-    input.value = "";
-    input.focus();
+function resetGame() {
+  selectedIndices = [];
+  correctChangedTiles = [];
+  showFeedback = false;
+  tiles = [];
+  renderTiles();
 }
 
-startBtn.addEventListener("click", startGame);
-input.addEventListener("keypress", (e) => {
-    if (e.key === "Enter") guessLetter();
+window.addEventListener("load", () => {
+  startRound();
 });