quiz/app/static/js/quiz.js

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();
            }
        });
    }
});