Initial commit: Modernes Harry Potter Escape Quiz Portal (FastAPI & MariaDB)

2026-09-21 11:29:18 +02:00
commit c3a21369ef
50 changed files with 3346 additions and 0 deletions
@@ -0,0 +1,128 @@
+function showTab(tabId) {
+    document.querySelectorAll(".tab-content").forEach(el => el.classList.remove("active"));
+    document.querySelectorAll(".tab-btn").forEach(el => el.classList.remove("active"));
+
+    const targetTab = document.getElementById(tabId);
+    if (targetTab) {
+        targetTab.classList.add("active");
+    }
+
+    // Mark active button
+    event.currentTarget.classList.add("active");
+}
+
+function toggleEdit(id) {
+    const editForm = document.getElementById(`edit-form-${id}`);
+    if (editForm) {
+        editForm.classList.toggle("hidden");
+    }
+}
+
+async function approveQuestion(id) {
+    if (!confirm(`Möchtest du Frage #${id} wirklich freischalten und für alle Spieler aktivieren?`)) {
+        return;
+    }
+
+    try {
+        const res = await fetch(`/admin/questions/${id}/approve`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" }
+        });
+
+        const data = await res.json();
+        if (res.ok && data.success) {
+            alert(data.message);
+            window.location.reload();
+        } else {
+            alert("Fehler: " + (data.error || "Aktion fehlgeschlagen"));
+        }
+    } catch (err) {
+        alert("Netzwerkfehler: " + err.message);
+    }
+}
+
+async function rejectQuestion(id) {
+    if (!confirm(`Möchtest du Frage #${id} ablehnen?`)) {
+        return;
+    }
+
+    try {
+        const res = await fetch(`/admin/questions/${id}/reject`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" }
+        });
+
+        const data = await res.json();
+        if (res.ok && data.success) {
+            alert(data.message);
+            window.location.reload();
+        } else {
+            alert("Fehler: " + (data.error || "Aktion fehlgeschlagen"));
+        }
+    } catch (err) {
+        alert("Netzwerkfehler: " + err.message);
+    }
+}
+
+async function deleteQuestion(id) {
+    if (!confirm(`Soll Frage #${id} wirklich unwiderruflich gelöscht werden?`)) {
+        return;
+    }
+
+    try {
+        const res = await fetch(`/admin/questions/${id}/delete`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" }
+        });
+
+        const data = await res.json();
+        if (res.ok && data.success) {
+            const card = document.getElementById(`q-card-${id}`);
+            if (card) card.remove();
+        } else {
+            alert("Fehler beim Löschen: " + (data.error || ""));
+        }
+    } catch (err) {
+        alert("Netzwerkfehler: " + err.message);
+    }
+}
+
+async function testMatcher(id, canonical) {
+    const input = document.getElementById(`test-input-${id}`);
+    const resultBox = document.getElementById(`test-result-${id}`);
+    const testVal = input.value.trim();
+
+    if (!testVal) {
+        resultBox.innerHTML = '<span style="color: #f39c12;">Bitte gib einen Testwert ein.</span>';
+        return;
+    }
+
+    try {
+        const formData = new FormData();
+        formData.append("test_input", testVal);
+        formData.append("canonical", canonical);
+
+        const res = await fetch("/admin/questions/test-match", {
+            method: "POST",
+            body: formData
+        });
+
+        const data = await res.json();
+
+        if (data.matched) {
+            resultBox.innerHTML = `
+                <span style="color: #2ecc71; font-weight: bold;">
+                    ✅ Treffer! (Distanz: ${data.levenshtein_distance}, Bereinigt: "${data.input_clean}" ↔ "${data.target_clean}")
+                </span>
+            `;
+        } else {
+            resultBox.innerHTML = `
+                <span style="color: #e74c3c; font-weight: bold;">
+                    ❌ Kein Treffer (Distanz: ${data.levenshtein_distance}, Bereinigt: "${data.input_clean}" ↔ "${data.target_clean}")
+                </span>
+            `;
+        }
+    } catch (err) {
+        resultBox.innerHTML = '<span style="color: #e74c3c;">Fehler bei der Prüfung.</span>';
+    }
+}
@@ -0,0 +1,249 @@
+let currentSessionId = null;
+let currentQuestionNumber = 1;
+let totalQuestions = 15;
+let currentScore = 0;
+let attemptsUsed = 0;
+const maxAttempts = 3;
+
+// Web Audio API Sound Generator for magic chimes and buzzers
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+function playSound(type) {
+    if (audioCtx.state === 'suspended') {
+        audioCtx.resume();
+    }
+    if (type === 'magic') {
+        // Magical bright arpeggio chime
+        const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
+        notes.forEach((freq, index) => {
+            const osc = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            osc.type = 'sine';
+            osc.frequency.value = freq;
+            gain.gain.setValueAtTime(0.15, audioCtx.currentTime + index * 0.08);
+            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + index * 0.08 + 0.35);
+            osc.connect(gain);
+            gain.connect(audioCtx.destination);
+            osc.start(audioCtx.currentTime + index * 0.08);
+            osc.stop(audioCtx.currentTime + index * 0.08 + 0.35);
+        });
+    } else if (type === 'wrong') {
+        // Soft error buzz
+        const osc = audioCtx.createOscillator();
+        const gain = audioCtx.createGain();
+        osc.type = 'sawtooth';
+        osc.frequency.setValueAtTime(150, audioCtx.currentTime);
+        osc.frequency.exponentialRampToValueAtTime(80, audioCtx.currentTime + 0.25);
+        gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.25);
+        osc.connect(gain);
+        gain.connect(audioCtx.destination);
+        osc.start();
+        osc.stop(audioCtx.currentTime + 0.25);
+    }
+}
+
+async function startGame() {
+    const envelope = document.getElementById("envelope");
+    const startBtn = document.getElementById("startBtn");
+
+    startBtn.disabled = true;
+    startBtn.innerText = "✨ Zauber wird gewirkt...";
+    envelope.classList.add("envelope-opened");
+
+    // Start background music if enabled or first click
+    const bgm = document.getElementById("bgm");
+    if (bgm && bgm.paused) {
+        bgm.play().then(() => {
+            const icon = document.getElementById("audioIcon");
+            const text = document.getElementById("audioText");
+            if (icon && text) {
+                icon.innerText = "🔊";
+                text.innerText = "Musik: An";
+            }
+            localStorage.setItem("bgm_enabled", "true");
+        }).catch(() => {});
+    }
+
+    try {
+        const res = await fetch("/api/game/start", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" }
+        });
+
+        if (!res.ok) {
+            throw new Error("Konnte Spiel nicht starten.");
+        }
+
+        const data = await res.json();
+        currentSessionId = data.session_id;
+        currentQuestionNumber = data.question_number;
+        totalQuestions = data.total_questions;
+        currentScore = data.score;
+        attemptsUsed = data.attempts_used;
+
+        setTimeout(() => {
+            document.getElementById("introCard").classList.add("hidden");
+            document.getElementById("gameCard").classList.remove("hidden");
+            renderQuestion(data);
+        }, 1100);
+
+    } catch (err) {
+        alert("Fehler beim Starten des Quiz: " + err.message);
+        startBtn.disabled = false;
+        startBtn.innerText = "📜 Siegel brechen & Brief öffnen";
+        envelope.classList.remove("envelope-opened");
+    }
+}
+
+function renderQuestion(qData) {
+    document.getElementById("questionCounter").innerText = `Frage ${qData.question_number} von ${totalQuestions}`;
+    document.getElementById("pointsCounter").innerText = `🏆 Hauspunkte: ${currentScore}`;
+    document.getElementById("badgeCategory").innerText = `⚡ ${qData.category.replace("_", " ").toUpperCase()}`;
+    document.getElementById("attemptBadge").innerText = `Versuch ${attemptsUsed + 1} von ${maxAttempts}`;
+    document.getElementById("frageText").innerText = qData.question;
+
+    const input = document.getElementById("answerInput");
+    input.value = "";
+    input.disabled = false;
+    input.focus();
+
+    document.getElementById("checkBtn").disabled = false;
+    document.getElementById("hintBtn").disabled = false;
+    document.getElementById("hintBox").classList.add("hidden");
+    document.getElementById("feedbackBox").innerHTML = "";
+
+    updateProgress();
+}
+
+function updateProgress() {
+    const percent = ((currentQuestionNumber - 1) / totalQuestions) * 100;
+    document.getElementById("progressBar").style.width = percent + "%";
+}
+
+async function checkAnswer() {
+    const input = document.getElementById("answerInput");
+    const answer = input.value.trim();
+
+    if (!answer) {
+        input.focus();
+        return;
+    }
+
+    const checkBtn = document.getElementById("checkBtn");
+    checkBtn.disabled = true;
+
+    try {
+        const res = await fetch("/api/game/check", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                session_id: currentSessionId,
+                answer: answer
+            })
+        });
+
+        if (!res.ok) {
+            throw new Error("Fehler bei der Antwortprüfung.");
+        }
+
+        const result = await res.json();
+        currentScore = result.score;
+        document.getElementById("pointsCounter").innerText = `🏆 Hauspunkte: ${currentScore}`;
+
+        const frageBox = document.getElementById("frageBox");
+        const feedbackBox = document.getElementById("feedbackBox");
+
+        if (result.correct) {
+            // Success!
+            playSound('magic');
+            frageBox.classList.add("sparkle-effect");
+            feedbackBox.innerHTML = `<span class="feedback-correct">✨ Richtig! 1 Hauspunkt für dein Haus! ✨</span>`;
+            input.disabled = true;
+
+            setTimeout(() => {
+                frageBox.classList.remove("sparkle-effect");
+                if (result.is_finished) {
+                    finishGame();
+                } else if (result.next_question) {
+                    currentQuestionNumber = result.next_question.question_number;
+                    attemptsUsed = 0;
+                    renderQuestion(result.next_question);
+                }
+            }, 1200);
+
+        } else {
+            // Incorrect
+            playSound('wrong');
+            frageBox.classList.add("shake-effect");
+            setTimeout(() => frageBox.classList.remove("shake-effect"), 500);
+
+            attemptsUsed = result.attempts_used;
+            document.getElementById("attemptBadge").innerText = `Versuch ${Math.min(attemptsUsed + 1, maxAttempts)} von ${maxAttempts}`;
+
+            if (result.attempts_left === 0) {
+                // Exhausted all 3 attempts
+                feedbackBox.innerHTML = `
+                    <div class="feedback-wrong">Leider nicht richtig (3 Fehlversuche).</div>
+                    <div class="feedback-revealed">Richtige Lösung: <strong>${result.revealed_answer}</strong></div>
+                `;
+                input.disabled = true;
+
+                setTimeout(() => {
+                    if (result.is_finished) {
+                        finishGame();
+                    } else if (result.next_question) {
+                        currentQuestionNumber = result.next_question.question_number;
+                        attemptsUsed = 0;
+                        renderQuestion(result.next_question);
+                    }
+                }, 2200);
+
+            } else {
+                // Still attempts remaining
+                feedbackBox.innerHTML = `<span class="feedback-wrong">Leider falsch! Noch ${result.attempts_left} Versuch(e).</span>`;
+                checkBtn.disabled = false;
+                input.select();
+            }
+        }
+
+    } catch (err) {
+        alert("Netzwerkfehler: " + err.message);
+        checkBtn.disabled = false;
+    }
+}
+
+async function requestHint() {
+    if (!currentSessionId) return;
+    const hintBox = document.getElementById("hintBox");
+    const hintText = document.getElementById("hintText");
+
+    try {
+        const res = await fetch(`/api/game/hint?session_id=${encodeURIComponent(currentSessionId)}`);
+        const data = await res.json();
+        hintText.innerText = data.hint || "Kein Tipp vorhanden.";
+        hintBox.classList.remove("hidden");
+    } catch (err) {
+        hintText.innerText = "Tipp konnte nicht geladen werden.";
+        hintBox.classList.remove("hidden");
+    }
+}
+
+function finishGame() {
+    // 100% progress
+    document.getElementById("progressBar").style.width = "100%";
+    window.location.href = `/finale?score=${currentScore}&total=${totalQuestions}`;
+}
+
+// Enter key to submit
+document.addEventListener("DOMContentLoaded", () => {
+    const input = document.getElementById("answerInput");
+    if (input) {
+        input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                checkAnswer();
+            }
+        });
+    }
+});
@@ -0,0 +1,61 @@
+async function submitSuggestion(event) {
+    event.preventDefault();
+
+    const name = document.getElementById("name").value.trim();
+    const frage = document.getElementById("frage").value.trim();
+    const antwort = document.getElementById("antwort").value.trim();
+    const tipp = document.getElementById("tipp").value.trim();
+    const submitBtn = document.getElementById("submitBtn");
+    const resultBox = document.getElementById("resultMessage");
+
+    if (!frage || !antwort) {
+        alert("Bitte gib mindestens die Frage und die richtige Antwort ein.");
+        return;
+    }
+
+    submitBtn.disabled = true;
+    submitBtn.innerText = "✨ Vorschlag wird übertragen...";
+
+    try {
+        const res = await fetch("/api/suggestions", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                name: name || "Gast",
+                frage: frage,
+                antwort: antwort,
+                tipp: tipp || null
+            })
+        });
+
+        const data = await res.json();
+
+        if (res.ok && data.success) {
+            resultBox.innerHTML = `
+                <div style="background: rgba(46, 204, 113, 0.2); border: 1px solid #2ecc71; color: #55efc4; padding: 15px; border-radius: 8px;">
+                    <h3>✨ Vorschlag erfolgreich übermittelt! ✨</h3>
+                    <p>${data.message}</p>
+                </div>
+            `;
+            resultBox.classList.remove("hidden");
+            document.getElementById("suggestionForm").reset();
+        } else {
+            resultBox.innerHTML = `
+                <div class="alert alert-danger">
+                    ${data.detail || "Fehler beim Einreichen deines Vorschlags."}
+                </div>
+            `;
+            resultBox.classList.remove("hidden");
+        }
+    } catch (err) {
+        resultBox.innerHTML = `
+            <div class="alert alert-danger">
+                Netzwerkfehler: ${err.message}
+            </div>
+        `;
+        resultBox.classList.remove("hidden");
+    } finally {
+        submitBtn.disabled = false;
+        submitBtn.innerText = "📜 Vorschlag an das Ministerium senden";
+    }
+}