feat: Add universal victory celebration modal, chamber item requirements, and fix broom & cauldron displays

2026-09-22 21:10:08 +02:00
parent cb8851b7a4
commit 8c3e60c1c4
19 changed files with 1149 additions and 92 deletions
@@ -123,19 +123,36 @@
            const data = await res.json();

            if (data.result === 'success_ahead') {
-                if (window.soundFX) window.soundFX.playMagicSuccess();
-                if (window.notifyNewItem && data.new_item) {
-                    window.notifyNewItem(data.new_item);
+                if (window.showChamberVictory) {
+                    window.showChamberVictory({
+                        chamberBadge: "Kammer VI: Snapes Flaschenrätsel",
+                        title: "🔥 Schwarzes Feuer Durchquert!",
+                        statsHtml: `<span>🧪 Flasche 3 (Zwerg): <strong>Schutztrank</strong></span><span>🔥 Schwarzes Feuer: <strong>Besiegt!</strong></span>`,
+                        item: data.new_item || {
+                            id: "philosophers_stone",
+                            name: "Stein der Weisen",
+                            icon: "💎",
+                            desc: "Der legendäre rote Alchemistenstein!"
+                        },
+                        storyText: "Ein eisiger Frosthauch hüllt deinen Körper ein! Du schreitest durch das tosend schwarze Feuer, ohne auch nur ein Haar zu versengen. Dahinter enthüllt sich das größte Geheimnis von Hogwarts: <strong>Der Spiegel Nerhegeb und der Stein der Weisen</strong>!",
+                        nextUrl: "/finale",
+                        nextBtnText: "➔ Zum großen Finale: Der Stein der Weisen 💎"
+                    });
+                } else {
+                    if (window.soundFX) window.soundFX.playMagicSuccess();
+                    if (window.notifyNewItem && data.new_item) {
+                        window.notifyNewItem(data.new_item);
+                    }
+                    modalIcon.innerText = "❄️⚡";
+                    modalTitle.innerText = "Hervorragend kombiniert!";
+                    modalTitle.style.color = "#ffd700";
+                    modalText.innerHTML = `Du hast die <strong>kleinste Flasche (Flasche 3, den 'Zwerg')</strong> getrunken!<br><br>
+                    ${data.message}<br><br>
+                    Das schwarze Feuer teilt sich mit einem frostigen Zischen. Der Weg zum Stein der Weisen liegt frei vor dir!`;
+                    modalBtn.innerText = "Zum Finale & Escape-Triumph 🏆";
+                    modalBtn.onclick = () => { window.location.href = data.next_url; };
+                    modalBackdrop.classList.add('show');
                }
-                modalIcon.innerText = "❄️⚡";
-                modalTitle.innerText = "Hervorragend kombiniert!";
-                modalTitle.style.color = "#ffd700";
-                modalText.innerHTML = `Du hast die <strong>kleinste Flasche (Flasche 3, den 'Zwerg')</strong> getrunken!<br><br>
-                ${data.message}<br><br>
-                Das schwarze Feuer teilt sich mit einem frostigen Zischen. Der Weg zum Stein der Weisen liegt frei vor dir!`;
-                modalBtn.innerText = "Zum Finale & Escape-Triumph 🏆";
-                modalBtn.onclick = () => { window.location.href = data.next_url; };
-                modalBackdrop.classList.add('show');

            } else if (data.result === 'success_back') {
                if (window.soundFX) window.soundFX.playMagicSuccess();
@@ -215,16 +215,36 @@
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate([50, 100, 150]);

        // API Completion Call
+        let newItem = null;
        try {
            const res = await fetch('/api/brew/complete', { method: 'POST' });
            const data = await res.json();
-            if (data.new_item && window.notifyNewItem) {
-                window.notifyNewItem(data.new_item);
-            }
+            if (data.new_item) newItem = data.new_item;
        } catch (e) {
            console.error("Brew complete error:", e);
        }

+        if (!newItem) {
+            newItem = {
+                id: "felix_felicis",
+                name: "Felix Felicis",
+                icon: "🧪",
+                desc: "Ein Tropfen flüssiges Gold! Verleiht dir unerschütterliches Glück und enthüllt verborgene Runen."
+            };
+        }
+
        if (successPanel) successPanel.style.display = 'block';
+
+        if (window.showChamberVictory) {
+            window.showChamberVictory({
+                chamberBadge: "Kammer III: Die Brauküche",
+                title: "⚗️ Zaubertrank Gemeistert!",
+                statsHtml: `<span>🧪 Elixier: <strong>Felix Felicis</strong></span><span>🌡️ Hitze: <strong>Perfekt gemeistert</strong></span>`,
+                item: newItem,
+                storyText: "Der Kessel erstrahlt in gleißendem, flüssigem Gold! Du füllst eine Phiole des unbezahlbaren <strong>Felix Felicis</strong> ab. Seine Wärme durchdringt deinen Geist. Mit geschärften Sinnen trittst du vor das gewaltige <strong>Runen-Drehschloss der vier Gründer</strong>!",
+                nextUrl: "/cryptex",
+                nextBtnText: "➔ Weiter zu Kammer IV: Das Drehschloss 🔐"
+            });
+        }
    }
 })();
@@ -35,7 +35,10 @@

    window.startFlight = function() {
        const overlay = document.getElementById('broomStartOverlay');
-        if (overlay) overlay.style.display = 'none';
+        if (overlay) {
+            overlay.classList.add('hidden');
+            overlay.style.display = 'none';
+        }

        rings.length = 0;
        rings.push({ x: width + 60, y: height * 0.4, radius: 25, speed: 3.5, golden: false, collected: false, scale: 1, alpha: 1, pulse: 0 });
@@ -57,6 +60,20 @@
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(40);
    };

+    // Explicitly bind click and pointerdown to start button for instant mobile activation
+    const startFlightBtn = document.getElementById('startFlightBtn');
+    if (startFlightBtn) {
+        const onStartTrigger = (e) => {
+            if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            window.startFlight();
+        };
+        startFlightBtn.addEventListener('click', onStartTrigger);
+        startFlightBtn.addEventListener('pointerdown', onStartTrigger);
+    }
+
    // Player (Broomstick)
    const player = {
        x: 90,
@@ -505,7 +522,7 @@
    requestAnimationFrame(loop);

    async function onCourseWin(elapsedSec) {
-        if (window.soundFX) window.soundFX.playMagicSuccess();
+        let newItem = null;
        try {
            const res = await fetch('/api/broom/complete', {
                method: 'POST',
@@ -513,23 +530,36 @@
                body: JSON.stringify({ score: score, time_taken: elapsedSec })
            });
            const data = await res.json();
-            if (data.new_item && window.notifyNewItem) {
-                window.notifyNewItem(data.new_item);
-            }
+            if (data.new_item) newItem = data.new_item;
        } catch (e) {
            console.error(e);
        }

-        modalTitle.innerText = "🏆 Ring-Parcours Gemeistert!";
-        modalText.innerHTML = `
-            Mit atemberaubenden Manövern hast du alle <strong>${TOTAL_RINGS_NEEDED} goldenen Ringe</strong> durchflogen!<br><br>
-            <strong>Flugzeit:</strong> ${elapsedSec} Sekunden<br>
-            <strong>Punkte:</strong> ${score}<br><br>
-            Madam Hooch nickt anerkennend und überreicht dir die Flug-Auszeichnung!<br>
-            Das Tor zur nächsten Kammer steht offen!
-        `;
-        modalBtn.innerText = "Weiter zum Zauberspruch-Duell 🪄";
-        modalBtn.onclick = () => { window.location.href = '/duel'; };
-        modalBackdrop.classList.add('show');
+        if (!newItem) {
+            newItem = {
+                id: "winged_key",
+                name: "Geflügelter Schlüssel",
+                icon: "🗝️",
+                desc: "Ein surrender Schlüssel mit Libellenflügeln. Er öffnet die Tür zur Duellier-Kammer!"
+            };
+        }
+
+        if (window.showChamberVictory) {
+            window.showChamberVictory({
+                chamberBadge: "Kammer I: Ring-Flug",
+                title: "🏆 Ring-Parcours Gemeistert!",
+                statsHtml: `<span>⏱️ Flugzeit: <strong>${elapsedSec}s</strong></span><span>✨ Punkte: <strong>${score} Pkt</strong></span><span>⭕ Ringe: <strong>${TOTAL_RINGS_NEEDED}/${TOTAL_RINGS_NEEDED}</strong></span>`,
+                item: newItem,
+                storyText: "Mit einem meisterhaften Sturzflug fängst du den surrenden <strong>geflügelten Schlüssel</strong>! Madam Hoochs Silberpfeife ertönt anerkennend über dem Schloss. Die massive Eichentür zur verzauberten <strong>Duellier-Kammer</strong> öffnet sich!",
+                nextUrl: "/duel",
+                nextBtnText: "➔ Weiter zu Kammer II: Spruch-Duell 🪄"
+            });
+        } else {
+            modalTitle.innerText = "🏆 Ring-Parcours Gemeistert!";
+            modalText.innerHTML = `Mit atemberaubenden Manövern hast du alle <strong>${TOTAL_RINGS_NEEDED} goldenen Ringe</strong> durchflogen!<br>Flugzeit: ${elapsedSec}s · Punkte: ${score}`;
+            modalBtn.innerText = "Weiter zum Zauberspruch-Duell 🪄";
+            modalBtn.onclick = () => { window.location.href = '/duel'; };
+            modalBackdrop.classList.add('show');
+        }
    }
 })();
@@ -146,9 +146,24 @@
                    window.notifyNewItem(data.new_item);
                }

-                setTimeout(() => {
-                    if (successPanel) successPanel.style.display = 'block';
-                }, 600);
+                if (successPanel) successPanel.style.display = 'block';
+
+                if (window.showChamberVictory) {
+                    window.showChamberVictory({
+                        chamberBadge: "Kammer IV: Das Runen-Drehschloss",
+                        title: "🔐 Gründer-Siegel Entriegelt!",
+                        statsHtml: `<span>🦁 Löwe</span><span>🌙 Mond</span><span>🔥 Feuer</span><span>🪄 Zauberstab</span>`,
+                        item: data.new_item || {
+                            id: "cryptex_key",
+                            name: "Schlüssel der Gründer",
+                            icon: "🗝️",
+                            desc: "Ein uralter Messingschlüssel. Er sperrt die Pforte zur Verteidigungs-Kammer auf!"
+                        },
+                        storyText: "Mit einem satten Grollen rasten die vier massiven Messingbolzen ein! Das Tor schnappt auf. Der <strong>Schlüssel der Gründer</strong> und <strong>Snapes Logik-Rolle</strong> wandern in deinen Beutel. Dahinter hörst du lautes Geschrei: <strong>Wichtel-Panik</strong>!",
+                        nextUrl: "/pixies",
+                        nextBtnText: "➔ Weiter zu Kammer V: Wichtel-Panik 🧚"
+                    });
+                }

            } else {
                if (window.soundFX) window.soundFX.playWhoosh();
@@ -174,4 +189,17 @@
            console.error("Cryptex check error:", e);
        }
    };
+
+    // Felix Felicis Lucky Intuition Action
+    window.useFelixFelicisHint = function() {
+        if (window.soundFX) window.soundFX.playMagicSuccess();
+        if (window.showFloatingToast) {
+            window.showFloatingToast("🍀 <strong>Felix Felicis wirkt!</strong> Eine goldene Stimme flüstert: <em>»Löwe 🦁 und Mond 🌙 weisen den Weg!«</em>");
+        }
+        // Guide dials 0 and 1
+        dials[0] = 0; // 🦁
+        dials[1] = 1; // 🌙
+        updateDialDisplay(0);
+        updateDialDisplay(1);
+    };
 })();
@@ -302,27 +302,41 @@
    }

    async function onDuelWon() {
-        if (window.soundFX) window.soundFX.playMagicSuccess();
+        let newItem = null;
        try {
            const res = await fetch('/api/duel/complete', { method: 'POST' });
            const data = await res.json();
-            if (data.new_item && window.notifyNewItem) {
-                window.notifyNewItem(data.new_item);
-            }
+            if (data.new_item) newItem = data.new_item;
        } catch (e) {
            console.error(e);
        }

-        modalTitle.innerText = "⚡ Duell Gemeistert!";
-        modalText.innerHTML = `
-            Mit meisterhafter Zauberstabführung hast du alle 3 Zaubersprüche entfesselt und die verzauberte Rüstung bezwungen!<br><br>
-            <strong>Gelehrte Sprüche:</strong> Flipendo ⚡, Incendio 🔥 & Alohomora 🗝️<br><br>
-            Die alte Rüstung verneigt sich ehrfürchtig. Das Tor öffnet sich und gibt den Weg zur dampfenden <strong>Zaubertrank-Brauküche</strong> frei!<br><br>
-            🎒 <em>Das goldene Duellanten-Abzeichen wurde deinem Zauberbeutel hinzugefügt!</em>
-        `;
-        modalBtn.innerText = "Weiter zur Zaubertrank-Brauküche ⚗️ ➔";
-        modalBtn.onclick = () => { window.location.href = '/brew'; };
-        modalBackdrop.classList.add('show');
+        if (!newItem) {
+            newItem = {
+                id: "duel_badge",
+                name: "Duellanten-Abzeichen & Kessel-Rezept",
+                icon: "⚡",
+                desc: "Ein goldenes Abzeichen und Snapes geheime Zaubertrank-Formel für die Brauküche."
+            };
+        }
+
+        if (window.showChamberVictory) {
+            window.showChamberVictory({
+                chamberBadge: "Kammer II: Das Spruch-Duell",
+                title: "⚡ Duell Gemeistert!",
+                statsHtml: `<span>🪄 Gesten: <strong>4 Sprüche</strong></span><span>🛡️ Rüstung: <strong>Bezwungen!</strong></span>`,
+                item: newItem,
+                storyText: "Die verzauberte Rüstung bricht klirrend in sich zusammen! In ihrem Brustharnisch liegt ein versiegeltes Pergament: <strong>Snapes geheime Rezeptur</strong> für die Kessel-Brauküche. Das schwere Fallgitter zur <strong>Zaubertrank-Brauküche</strong> hebt sich!",
+                nextUrl: "/brew",
+                nextBtnText: "➔ Weiter zu Kammer III: Brauküche ⚗️"
+            });
+        } else {
+            modalTitle.innerText = "⚡ Duell Gemeistert!";
+            modalText.innerHTML = `Mit meisterhafter Zauberstabführung hast du alle Sprüche entfesselt und die Rüstung bezwungen!`;
+            modalBtn.innerText = "Weiter zur Brauküche ⚗️";
+            modalBtn.onclick = () => { window.location.href = '/brew'; };
+            modalBackdrop.classList.add('show');
+        }
    }

    function render() {
@@ -230,6 +230,127 @@
        window.showFloatingToast(`🎒 <strong>Neuer Gegenstand im Beutel:</strong> ${item.icon} ${item.name}!`);
    };

+    // Confetti Animation Controller
+    let confettiAnimId = null;
+    function runVictoryConfetti() {
+        const canvas = document.getElementById('victoryConfettiCanvas');
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        const colors = ['#ffd700', '#f39c12', '#e74c3c', '#3498db', '#2ecc71', '#9b59b6', '#ffffff'];
+        const particles = [];
+        for (let i = 0; i < 90; i++) {
+            particles.push({
+                x: Math.random() * canvas.width,
+                y: Math.random() * -canvas.height * 0.5,
+                w: Math.random() * 9 + 5,
+                h: Math.random() * 5 + 3,
+                vx: (Math.random() - 0.5) * 4,
+                vy: Math.random() * 3 + 2.5,
+                color: colors[Math.floor(Math.random() * colors.length)],
+                angle: Math.random() * Math.PI * 2,
+                vAngle: (Math.random() - 0.5) * 0.15,
+                shape: Math.random() > 0.4 ? 'rect' : 'star'
+            });
+        }
+
+        let start = Date.now();
+        if (confettiAnimId) cancelAnimationFrame(confettiAnimId);
+
+        function drawConfetti() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const elapsed = (Date.now() - start) / 1000;
+
+            particles.forEach(p => {
+                p.x += p.vx;
+                p.y += p.vy;
+                p.angle += p.vAngle;
+
+                ctx.save();
+                ctx.translate(p.x, p.y);
+                ctx.rotate(p.angle);
+                ctx.fillStyle = p.color;
+
+                if (p.shape === 'star') {
+                    ctx.beginPath();
+                    ctx.arc(0, 0, p.w * 0.45, 0, Math.PI * 2);
+                    ctx.fill();
+                } else {
+                    ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+                }
+                ctx.restore();
+
+                if (p.y > canvas.height + 20) {
+                    p.y = -20;
+                    p.x = Math.random() * canvas.width;
+                }
+            });
+
+            if (elapsed < 8) {
+                confettiAnimId = requestAnimationFrame(drawConfetti);
+            } else {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+        }
+        confettiAnimId = requestAnimationFrame(drawConfetti);
+    }
+
+    // Unified Spectacular Victory Celebration Overlay
+    window.showChamberVictory = function(config) {
+        const modal = document.getElementById('victoryCelebrationModal');
+        if (!modal) {
+            // Fallback to standard modal if celebration overlay missing
+            if (window.modalTitle) window.modalTitle.innerText = config.title;
+            if (window.modalText) window.modalText.innerHTML = config.storyText;
+            if (window.modalBackdrop) window.modalBackdrop.classList.add('show');
+            return;
+        }
+
+        const badge = document.getElementById('vicChamberBadge');
+        const title = document.getElementById('vicTitle');
+        const statsBox = document.getElementById('vicStatsBox');
+        const itemBox = document.getElementById('vicItemRewardBox');
+        const rewardIcon = document.getElementById('vicRewardIcon');
+        const rewardName = document.getElementById('vicRewardName');
+        const rewardDesc = document.getElementById('vicRewardDesc');
+        const storyBox = document.getElementById('vicStoryBox');
+        const nextBtn = document.getElementById('vicNextBtn');
+
+        if (badge) badge.innerText = config.chamberBadge || 'Kammer Gemeistert';
+        if (title) title.innerText = config.title || 'Hervorragend!';
+        if (statsBox) {
+            statsBox.innerHTML = config.statsHtml || '';
+            statsBox.style.display = config.statsHtml ? 'flex' : 'none';
+        }
+        if (storyBox) storyBox.innerHTML = config.storyText || '';
+
+        if (config.item && itemBox) {
+            itemBox.style.display = 'flex';
+            if (rewardIcon) rewardIcon.innerText = config.item.icon || '✨';
+            if (rewardName) rewardName.innerText = config.item.name || '';
+            if (rewardDesc) rewardDesc.innerText = config.item.desc || '';
+            window.notifyNewItem(config.item);
+        } else if (itemBox) {
+            itemBox.style.display = 'none';
+        }
+
+        if (nextBtn) {
+            nextBtn.href = config.nextUrl || '/';
+            nextBtn.innerHTML = config.nextBtnText || '➔ Weiter zur nächsten Kammer ✨';
+        }
+
+        // Trigger Audio, Haptic & Particle Celebration
+        if (window.soundFX) window.soundFX.playMagicSuccess();
+        if (window.navigator && window.navigator.vibrate) {
+            window.navigator.vibrate([60, 50, 80, 50, 180]);
+        }
+
+        modal.classList.add('show');
+        runVictoryConfetti();
+    };
+
    // Auto-select first item if available
    if (itemSlots.length > 0) {
        selectItem(itemSlots[0]);
@@ -165,11 +165,7 @@
        activeTargets.clear();

        if (won) {
-            if (window.soundFX) window.soundFX.playMagicSuccess();
-            if (window.navigator && window.navigator.vibrate) {
-                window.navigator.vibrate([50, 100, 150]);
-            }
-
+            let newItem = null;
            try {
                const res = await fetch('/api/pixies/complete', {
                    method: 'POST',
@@ -177,15 +173,34 @@
                    body: JSON.stringify({ caught: score })
                });
                const data = await res.json();
-                if (data.new_item && window.notifyNewItem) {
-                    window.notifyNewItem(data.new_item);
-                }
+                if (data.new_item) newItem = data.new_item;
            } catch (e) {
                console.error("Pixies complete error:", e);
            }

+            if (!newItem) {
+                newItem = {
+                    id: "pixie_jar",
+                    name: "Wichtelglas",
+                    icon: "🧚",
+                    desc: "Ein dickbauchiges Glas mit einem gebannten Wichtel."
+                };
+            }
+
            if (successPanel) successPanel.style.display = 'block';

+            if (window.showChamberVictory) {
+                window.showChamberVictory({
+                    chamberBadge: "Kammer V: Wichtel-Panik",
+                    title: "🧚 Wichtel Gebannt!",
+                    statsHtml: `<span>❄️ Gebannt: <strong>${score} Wichtel</strong></span><span>👦 Neville: <strong>Gerettet</strong></span>`,
+                    item: newItem,
+                    storyText: "Mit blitzschnellen <em>Immobilus!</em>-Zaubern hast du alle 10 Wichtel eingefroren! Ein zappelnder Wichtel landet sicher im <strong>Wichtelglas</strong>. Neville bedankt sich erleichtert. Der Weg zur berüchtigten <strong>Flammenkammer von Severus Snape</strong> liegt nun offen!",
+                    nextUrl: "/bottles",
+                    nextBtnText: "➔ Weiter zu Kammer VI: Snapes Flaschen 🧪"
+                });
+            }
+
        } else {
            if (window.soundFX) window.soundFX.playWhoosh();
            if (startOverlay) {
@@ -125,14 +125,25 @@

            fetch('/api/sliding/complete', { method: 'POST' }).catch(console.error);

-            modalTitle.innerText = "✨ Schieberätsel gelöst!";
-            modalText.innerHTML = `Mit geschicktem Schieben hast du alle 8 alchemistischen Phiolen in die perfekte harmonische Ordnung gebracht!<br><br>
-            <strong>Züge:</strong> ${moves}<br>
-            <strong>Zeit:</strong> ${secondsElapsed} Sekunden<br><br>
-            Die Runenplatte leuchtet golden auf und der Weg zur Flammenkammer öffnet sich!`;
-            modalBtn.innerText = "Zur Flammenkammer 🧪";
-            modalBtn.onclick = () => { window.location.href = '/bottles'; };
-            modalBackdrop.classList.add('show');
+            if (window.showChamberVictory) {
+                window.showChamberVictory({
+                    chamberBadge: "Alchemie-Zusatzprüfung",
+                    title: "✨ Schiebesiegel Gelöst!",
+                    statsHtml: `<span>⚗️ Züge: <strong>${moves}</strong></span><span>⏱️ Zeit: <strong>${secondsElapsed}s</strong></span>`,
+                    storyText: "Mit geschicktem Schieben hast du alle 8 alchemistischen Essenzen in harmonische Ordnung gebracht! Das antike Relief leuchtet golden auf.",
+                    nextUrl: "/bottles",
+                    nextBtnText: "➔ Weiter zu Snapes Flaschen 🧪"
+                });
+            } else {
+                modalTitle.innerText = "✨ Schieberätsel gelöst!";
+                modalText.innerHTML = `Mit geschicktem Schieben hast du alle 8 alchemistischen Phiolen in die perfekte harmonische Ordnung gebracht!<br><br>
+                <strong>Züge:</strong> ${moves}<br>
+                <strong>Zeit:</strong> ${secondsElapsed} Sekunden<br><br>
+                Die Runenplatte leuchtet golden auf und der Weg zur Flammenkammer öffnet sich!`;
+                modalBtn.innerText = "Zur Flammenkammer 🧪";
+                modalBtn.onclick = () => { window.location.href = '/bottles'; };
+                modalBackdrop.classList.add('show');
+            }
        }
    }