Feature: Integrate all four Hogwarts mini-games (Duel, Potion Brewing, Cryptex Lock, Cornish Pixies)

2026-09-22 19:43:12 +02:00
parent 0e20549a44
commit 2ce944d1cd
13 changed files with 1662 additions and 13 deletions
@@ -0,0 +1,227 @@
+// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine)
+(function() {
+    let currentStep = 1; // 1: Ingredients, 2: Stirring, 3: Heat, 4: Done
+    const ingredients = {
+        dragon: 0,
+        mandrake: 0,
+        star: 0
+    };
+    const targetIngredients = {
+        dragon: 2,
+        mandrake: 1,
+        star: 1
+    };
+
+    // DOM Elements
+    const stepBadge = document.getElementById('stepBadge');
+    const stepInstruction = document.getElementById('stepInstruction');
+    const stepSubtext = document.getElementById('stepSubtext');
+    const ingredientsShelf = document.getElementById('ingredientsShelf');
+    const potionSurface = document.getElementById('potionSurface');
+    const stirCircle = document.getElementById('stirCircle');
+    const stirTracker = document.getElementById('stirTracker');
+    const stirCounterText = document.getElementById('stirCounterText');
+    const stirCountSpan = document.getElementById('stirCount');
+    const heatPanel = document.getElementById('heatPanel');
+    const tempIndicator = document.getElementById('tempIndicator');
+    const heatTimerSpan = document.getElementById('heatTimer');
+    const successPanel = document.getElementById('successPanel');
+    const cauldronZone = document.getElementById('cauldronZone');
+
+    // Step 1: Add Ingredient
+    window.addIngredient = function(type) {
+        if (currentStep !== 1) return;
+        if (ingredients[type] >= targetIngredients[type]) return;
+
+        ingredients[type]++;
+        if (window.soundFX) window.soundFX.playBottleClink();
+
+        // Update UI Badge
+        if (type === 'dragon') {
+            document.getElementById('countDragon').innerText = `${ingredients.dragon} / ${targetIngredients.dragon}`;
+            if (ingredients.dragon >= targetIngredients.dragon) document.getElementById('ingDragon').classList.add('done');
+        } else if (type === 'mandrake') {
+            document.getElementById('countMandrake').innerText = `${ingredients.mandrake} / ${targetIngredients.mandrake}`;
+            if (ingredients.mandrake >= targetIngredients.mandrake) document.getElementById('ingMandrake').classList.add('done');
+        } else if (type === 'star') {
+            document.getElementById('countStar').innerText = `${ingredients.star} / ${targetIngredients.star}`;
+            if (ingredients.star >= targetIngredients.star) document.getElementById('ingStar').classList.add('done');
+        }
+
+        // Ripple effect on surface
+        potionSurface.style.transform = 'scale(1.08)';
+        setTimeout(() => potionSurface.style.transform = 'scale(1)', 200);
+
+        // Check if all ingredients added
+        const total = ingredients.dragon + ingredients.mandrake + ingredients.star;
+        if (total === 4) {
+            setTimeout(startStep2, 600);
+        }
+    };
+
+    // Step 2: Stirring
+    let completedStirs = 0;
+    let lastAngle = null;
+    let accumulatedAngle = 0;
+
+    function startStep2() {
+        currentStep = 2;
+        stepBadge.innerText = "Schritt 2: Gleichmäßig rühren";
+        stepInstruction.innerText = "Rühre den Sud 3 Runden im Uhrzeigersinn!";
+        stepSubtext.innerText = "Führe deinen Finger oder die Maus im Kreis über dem Kessel oder tippe ihn an.";
+        ingredientsShelf.style.display = 'none';
+        stirCounterText.style.display = 'block';
+        stirCircle.classList.add('active');
+        potionSurface.className = 'potion-surface state-stir';
+
+        if (window.soundFX) window.soundFX.playStoneSlide();
+    }
+
+    // Touch / Pointer stirring logic
+    let isStirring = false;
+
+    function getAngle(e) {
+        const rect = cauldronZone.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+        return Math.atan2(clientY - centerY, clientX - centerX) * (180 / Math.PI);
+    }
+
+    function onStirStart(e) {
+        if (currentStep !== 2) return;
+        isStirring = true;
+        lastAngle = getAngle(e);
+    }
+
+    function onStirMove(e) {
+        if (currentStep !== 2 || !isStirring) return;
+        e.preventDefault();
+        const angle = getAngle(e);
+        if (lastAngle !== null) {
+            let diff = angle - lastAngle;
+            // Handle wrap-around
+            if (diff < -180) diff += 360;
+            if (diff > 180) diff -= 360;
+
+            // Only count clockwise
+            if (diff > 0) {
+                accumulatedAngle += diff;
+                if (accumulatedAngle >= 360) {
+                    accumulatedAngle -= 360;
+                    incrementStir();
+                }
+            }
+        }
+        lastAngle = angle;
+    }
+
+    function onStirEnd() {
+        isStirring = false;
+        lastAngle = null;
+    }
+
+    function incrementStir() {
+        completedStirs++;
+        stirCountSpan.innerText = completedStirs;
+        if (window.soundFX) window.soundFX.playBottleClink();
+
+        if (completedStirs >= 3) {
+            stirCircle.classList.remove('active');
+            stirCounterText.style.display = 'none';
+            setTimeout(startStep3, 600);
+        }
+    }
+
+    // Direct tap fallback for mobile
+    cauldronZone.addEventListener('click', () => {
+        if (currentStep === 2 && !isStirring) {
+            incrementStir();
+        }
+    });
+
+    cauldronZone.addEventListener('mousedown', onStirStart);
+    window.addEventListener('mousemove', onStirMove);
+    window.addEventListener('mouseup', onStirEnd);
+
+    cauldronZone.addEventListener('touchstart', onStirStart, { passive: false });
+    window.addEventListener('touchmove', onStirMove, { passive: false });
+    window.addEventListener('touchend', onStirEnd);
+
+    // Step 3: Heat Control
+    let currentTemp = 35; // percent (0-100)
+    let heatTimer = 0.0;
+    let heatInterval = null;
+
+    function startStep3() {
+        currentStep = 3;
+        stepBadge.innerText = "Schritt 3: Hitze balancieren";
+        stepInstruction.innerText = "Pumpe mit dem Blasebalg, um die Hitze im grünen Bereich zu halten!";
+        stepSubtext.innerText = "Halte die Nadel für 4 Sekunden im grünen Bereich (60% - 85%).";
+        potionSurface.className = 'potion-surface state-heat';
+        heatPanel.classList.add('active');
+
+        if (window.soundFX) window.soundFX.playWhoosh();
+
+        heatInterval = setInterval(updateHeatLoop, 50);
+    }
+
+    window.pumpHeat = function() {
+        if (currentStep !== 3) return;
+        currentTemp = Math.min(100, currentTemp + 15);
+        if (window.soundFX) window.soundFX.playWhoosh();
+    };
+
+    function updateHeatLoop() {
+        if (currentStep !== 3) return;
+
+        // Slow cooling down
+        currentTemp = Math.max(0, currentTemp - 0.55);
+        tempIndicator.style.width = currentTemp + '%';
+
+        // Check ideal zone (60% to 85%)
+        if (currentTemp >= 60 && currentTemp <= 85) {
+            heatTimer += 0.05;
+            heatTimerSpan.innerText = heatTimer.toFixed(1);
+            tempIndicator.style.background = '#2ecc71';
+        } else {
+            tempIndicator.style.background = 'linear-gradient(90deg, #3498db, #f39c12, #e74c3c)';
+        }
+
+        if (heatTimer >= 4.0) {
+            clearInterval(heatInterval);
+            finishPotionBrew();
+        }
+    }
+
+    // Step 4: Victory
+    async function finishPotionBrew() {
+        currentStep = 4;
+        stepBadge.innerText = "✅ Trank vollendet!";
+        stepBadge.style.background = "rgba(46, 204, 113, 0.3)";
+        stepBadge.style.borderColor = "#2ecc71";
+        stepBadge.style.color = "#2ecc71";
+
+        stepInstruction.innerText = "Felix Felicis strahlt in reinem Gold!";
+        stepSubtext.innerText = "Dein Zaubertrank ist perfekt gelungen.";
+
+        heatPanel.classList.remove('active');
+        potionSurface.className = 'potion-surface state-gold';
+
+        if (window.soundFX) window.soundFX.playMagicSuccess();
+
+        // API Completion Call
+        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);
+            }
+        } catch (e) {
+            console.error("Brew complete error:", e);
+        }
+
+        successPanel.style.display = 'block';
+    }
+})();
@@ -0,0 +1,137 @@
+// Magisches Runen-Drehschloss (Cryptex Engine)
+(function() {
+    const DIALS = [
+        // Dial 0: Houses
+        [
+            { icon: '🦁', name: 'Löwe' },
+            { icon: '🐍', name: 'Schlange' },
+            { icon: '🦅', name: 'Rabe' },
+            { icon: '🦡', name: 'Dachs' }
+        ],
+        // Dial 1: Astral
+        [
+            { icon: '☀️', name: 'Sonne' },
+            { icon: '🌙', name: 'Mond' },
+            { icon: '⭐', name: 'Stern' },
+            { icon: '⚡', name: 'Blitz' }
+        ],
+        // Dial 2: Elements
+        [
+            { icon: '🔥', name: 'Feuer' },
+            { icon: '💧', name: 'Wasser' },
+            { icon: '🌿', name: 'Kräuter' },
+            { icon: '💨', name: 'Wind' }
+        ],
+        // Dial 3: Artifacts
+        [
+            { icon: '🗝️', name: 'Schlüssel' },
+            { icon: '🪄', name: 'Zauberstab' },
+            { icon: '📜', name: 'Rolle' },
+            { icon: '⚗️', name: 'Phiole' }
+        ]
+    ];
+
+    // Initial indices (unsolved)
+    const state = [0, 0, 1, 0];
+    let isUnlocked = false;
+
+    // Elements
+    const feedbackBox = document.getElementById('cryptexFeedback');
+    const successPanel = document.getElementById('cryptexSuccess');
+    const unlockBtn = document.getElementById('unlockCryptexBtn');
+
+    window.stepDial = function(dialIdx, dir) {
+        if (isUnlocked) return;
+
+        const dial = DIALS[dialIdx];
+        state[dialIdx] = (state[dialIdx] + dir + dial.length) % dial.length;
+
+        const symEl = document.getElementById(`sym${dialIdx}`);
+        const lblEl = document.getElementById(`lbl${dialIdx}`);
+
+        // Quick flip animation
+        symEl.style.transform = dir > 0 ? 'translateY(15px) scale(0.8)' : 'translateY(-15px) scale(0.8)';
+        symEl.style.opacity = '0.3';
+
+        setTimeout(() => {
+            const currentItem = dial[state[dialIdx]];
+            symEl.innerText = currentItem.icon;
+            lblEl.innerText = currentItem.name;
+            symEl.style.transform = 'translateY(0) scale(1)';
+            symEl.style.opacity = '1';
+        }, 100);
+
+        if (window.soundFX) window.soundFX.playStoneSlide();
+    };
+
+    window.checkCryptex = async function() {
+        if (isUnlocked) return;
+
+        const currentCombination = [
+            DIALS[0][state[0]].icon,
+            DIALS[1][state[1]].icon,
+            DIALS[2][state[2]].icon,
+            DIALS[3][state[3]].icon
+        ];
+
+        try {
+            const res = await fetch('/api/cryptex/unlock', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ combination: currentCombination })
+            });
+            const data = await res.json();
+
+            if (data.success) {
+                isUnlocked = true;
+                unlockBtn.style.display = 'none';
+
+                if (window.soundFX) {
+                    window.soundFX.playKeyChime();
+                    window.soundFX.playMagicSuccess();
+                }
+
+                // Show golden shine on cylinders
+                document.querySelectorAll('.dial-cylinder').forEach(c => {
+                    c.style.borderColor = 'var(--gold)';
+                    c.style.boxShadow = '0 0 20px var(--gold)';
+                });
+
+                if (feedbackBox) {
+                    feedbackBox.style.display = 'block';
+                    feedbackBox.style.background = 'rgba(46, 204, 113, 0.25)';
+                    feedbackBox.style.border = '1px solid #2ecc71';
+                    feedbackBox.style.color = '#2ecc71';
+                    feedbackBox.innerText = data.message;
+                }
+
+                if (data.new_item && window.notifyNewItem) {
+                    window.notifyNewItem(data.new_item);
+                }
+
+                setTimeout(() => {
+                    if (successPanel) successPanel.style.display = 'block';
+                }, 800);
+
+            } else {
+                if (window.soundFX) window.soundFX.playWhoosh();
+
+                const box = document.querySelector('.cryptex-box');
+                box.style.transform = 'translateX(-8px)';
+                setTimeout(() => box.style.transform = 'translateX(8px)', 80);
+                setTimeout(() => box.style.transform = 'translateX(-4px)', 160);
+                setTimeout(() => box.style.transform = 'translateX(0)', 240);
+
+                if (feedbackBox) {
+                    feedbackBox.style.display = 'block';
+                    feedbackBox.style.background = 'rgba(231, 76, 60, 0.25)';
+                    feedbackBox.style.border = '1px solid #e74c3c';
+                    feedbackBox.style.color = '#e74c3c';
+                    feedbackBox.innerText = data.message;
+                }
+            }
+        } catch (e) {
+            console.error("Cryptex check error:", e);
+        }
+    };
+})();
@@ -156,6 +156,18 @@
        } else if (action === 'broom_polish') {
            if (window.soundFX) window.soundFX.playWhoosh();
            showFloatingToast("🧹 Der Nimbus 2000 glänzt wie neu. Die Zweige sind perfekt gestutzt!");
+        } else if (action === 'spark_wand') {
+            if (window.soundFX) window.soundFX.playWhoosh();
+            showFloatingToast("⚡ Magische Funken sprühen aus deiner Zauberstabspitze!");
+        } else if (action === 'lucky_aura') {
+            if (window.soundFX) window.soundFX.playMagicSuccess();
+            showFloatingToast("🍀 Ein Tropfen Felix Felicis! Eine Welle goldenen Glücks erfüllt deine Adern!");
+        } else if (action === 'inspect_key') {
+            if (window.soundFX) window.soundFX.playKeyChime();
+            showFloatingToast("🗝️ Die Gravur der vier Gründer leuchtet warm auf: 'Hogwarts, Hogwarts, warzenschweinig alt...'");
+        } else if (action === 'poke_jar') {
+            if (window.soundFX) window.soundFX.playWhoosh();
+            showFloatingToast("🧚 *Klopf-Klopf!* Der blaue Wichtel im Glas verzieht frech das Gesicht!");
        } else if (action === 'examine_key') {
            if (window.soundFX) window.soundFX.playKeyChime();
            showFloatingToast("🗝️ Der alte Silberschlüssel ist schwer und trägt Spuren vergangener Kämpfe.");
@@ -0,0 +1,188 @@
+// Wichtel-Panik / Cornish Pixies Arcade Engine
+(function() {
+    let score = 0;
+    const targetScore = 10;
+    let timeLeft = 35;
+    let gameRunning = false;
+    let timerInterval = null;
+    let spawnTimeout = null;
+
+    // DOM Elements
+    const scoreEl = document.getElementById('pixieScore');
+    const timerEl = document.getElementById('pixieTimer');
+    const startBtn = document.getElementById('startPixieBtn');
+    const startOverlay = document.getElementById('startOverlay');
+    const successPanel = document.getElementById('pixieSuccess');
+    const holes = document.querySelectorAll('.pixie-hole');
+
+    const activeTargets = new Map(); // holeIndex -> { type: 'pixie'|'neville', timer: id }
+
+    window.startPixieHunt = function() {
+        if (gameRunning) return;
+        gameRunning = true;
+        score = 0;
+        timeLeft = 35;
+
+        scoreEl.innerText = score;
+        timerEl.innerText = timeLeft;
+        startOverlay.style.display = 'none';
+        if (successPanel) successPanel.style.display = 'none';
+
+        if (window.soundFX) window.soundFX.playWhoosh();
+
+        // Start countdown
+        timerInterval = setInterval(() => {
+            timeLeft--;
+            timerEl.innerText = timeLeft;
+
+            if (timeLeft <= 0) {
+                endGame(false);
+            }
+        }, 1000);
+
+        scheduleNextSpawn();
+    };
+
+    function scheduleNextSpawn() {
+        if (!gameRunning) return;
+        const delay = Math.random() * 400 + 400; // 400ms - 800ms
+        spawnTimeout = setTimeout(() => {
+            spawnTarget();
+            scheduleNextSpawn();
+        }, delay);
+    }
+
+    function spawnTarget() {
+        if (!gameRunning) return;
+
+        // Find available holes
+        const available = [];
+        for (let i = 0; i < 9; i++) {
+            if (!activeTargets.has(i)) available.push(i);
+        }
+        if (available.length === 0) return;
+
+        const holeIdx = available[Math.floor(Math.random() * available.length)];
+        const targetEl = document.getElementById(`target${holeIdx}`);
+        if (!targetEl) return;
+
+        // 15% chance Neville, 85% chance Pixie
+        const isNeville = Math.random() < 0.15;
+        targetEl.className = 'pixie-target active';
+        targetEl.innerText = isNeville ? '👦' : '🧚';
+        if (isNeville) targetEl.classList.add('neville');
+
+        const stayTime = Math.random() * 400 + 850; // 850ms - 1250ms
+
+        const hideTimer = setTimeout(() => {
+            hideTarget(holeIdx);
+        }, stayTime);
+
+        activeTargets.set(holeIdx, {
+            isNeville: isNeville,
+            timer: hideTimer,
+            clicked: false
+        });
+    }
+
+    function hideTarget(holeIdx) {
+        const targetEl = document.getElementById(`target${holeIdx}`);
+        if (targetEl) {
+            targetEl.classList.remove('active');
+            targetEl.classList.remove('frozen');
+            targetEl.classList.remove('neville');
+        }
+        activeTargets.delete(holeIdx);
+    }
+
+    // Touch / Click Handler on holes
+    holes.forEach(hole => {
+        const idx = parseInt(hole.dataset.idx, 10);
+
+        function handleTap(e) {
+            if (!gameRunning) return;
+            e.preventDefault();
+
+            if (!activeTargets.has(idx)) return;
+            const targetData = activeTargets.get(idx);
+            if (targetData.clicked) return;
+            targetData.clicked = true;
+
+            const targetEl = document.getElementById(`target${idx}`);
+
+            if (targetData.isNeville) {
+                // Clicked Neville -> Penalty!
+                if (window.soundFX) window.soundFX.playWhoosh();
+                score = Math.max(0, score - 2);
+                scoreEl.innerText = score;
+
+                targetEl.style.transform = 'scale(1.3) rotate(15deg)';
+                if (window.showFloatingToast) {
+                    window.showFloatingToast("🤕 <strong>Neville:</strong> »Aua! Ich bin doch kein Wichtel!« (-2 Pkt)");
+                }
+
+                setTimeout(() => hideTarget(idx), 350);
+
+            } else {
+                // Clicked Pixie -> Immobilus!
+                clearTimeout(targetData.timer);
+                targetEl.classList.add('frozen');
+                targetEl.innerText = '❄️';
+
+                if (window.soundFX) {
+                    window.soundFX.playKeyChime();
+                }
+
+                score++;
+                scoreEl.innerText = score;
+
+                if (score >= targetScore) {
+                    endGame(true);
+                } else {
+                    setTimeout(() => hideTarget(idx), 400);
+                }
+            }
+        }
+
+        hole.addEventListener('click', handleTap);
+        hole.addEventListener('touchstart', handleTap, { passive: false });
+    });
+
+    async function endGame(won) {
+        gameRunning = false;
+        clearInterval(timerInterval);
+        clearTimeout(spawnTimeout);
+
+        // Hide all active
+        activeTargets.forEach((val, idx) => hideTarget(idx));
+        activeTargets.clear();
+
+        if (won) {
+            if (window.soundFX) window.soundFX.playMagicSuccess();
+
+            try {
+                const res = await fetch('/api/pixies/complete', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ caught: score })
+                });
+                const data = await res.json();
+                if (data.new_item && window.notifyNewItem) {
+                    window.notifyNewItem(data.new_item);
+                }
+            } catch (e) {
+                console.error("Pixies complete error:", e);
+            }
+
+            if (successPanel) successPanel.style.display = 'block';
+
+        } else {
+            if (window.soundFX) window.soundFX.playWhoosh();
+            startOverlay.style.display = 'block';
+            startBtn.innerText = "Erneut versuchen 🔄";
+            if (window.showFloatingToast) {
+                window.showFloatingToast("⏰ Die Zeit ist abgelaufen! Die Wichtel haben gewonnen. Versuch es noch einmal!");
+            }
+        }
+    }
+})();