bootle/app/static/js/brew.js

// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine - Mobile First)
(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 stirPanel = document.getElementById('stirPanel');
    const stirCountSpan = document.getElementById('stirCount');
    const stirBtn = document.getElementById('stirBtn');
    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();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(25);

        // 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.12)';
        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, 500);
        }
    };

    // Step 2: Stirring
    let completedStirs = 0;

    function startStep2() {
        currentStep = 2;
        stepBadge.innerText = "Schritt 2: Gleichmäßig rühren";
        stepInstruction.innerText = "Rühre den Kessel 3-mal um!";
        stepSubtext.innerText = "Tippe auf den großen Rühr-Button oder wische über den Kessel.";
        ingredientsShelf.style.display = 'none';
        stirPanel.style.display = 'flex';
        stirCircle.classList.add('active');
        potionSurface.className = 'potion-surface state-stir';

        if (window.soundFX) window.soundFX.playStoneSlide();
    }

    window.doStir = function() {
        if (currentStep !== 2) return;
        completedStirs++;
        stirCountSpan.innerText = completedStirs;
        if (stirBtn) stirBtn.innerHTML = `🥄 Kessel umrühren! (<span>${completedStirs}</span> / 3)`;

        if (window.soundFX) window.soundFX.playBottleClink();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(35);

        // Spin animation on surface
        potionSurface.style.transform = 'rotate(' + (completedStirs * 180) + 'deg) scale(1.1)';
        setTimeout(() => potionSurface.style.transform = 'rotate(' + (completedStirs * 180) + 'deg) scale(1)', 250);

        if (completedStirs >= 3) {
            stirCircle.classList.remove('active');
            stirPanel.style.display = 'none';
            setTimeout(startStep3, 500);
        }
    };

    // Cauldron tap / swipe to stir as well
    let touchStartX = 0;
    cauldronZone.addEventListener('pointerdown', (e) => {
        if (currentStep === 2) {
            touchStartX = e.clientX;
        }
    });

    cauldronZone.addEventListener('pointerup', (e) => {
        if (currentStep === 2) {
            window.doStir();
        }
    });

    // 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 Anzeige für 3 Sekunden im grünen Idealbereich (50% - 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 + 18);
        if (window.soundFX) window.soundFX.playWhoosh();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(20);

        const bellows = document.getElementById('bellowsBtn');
        if (bellows) {
            bellows.style.transform = 'scale(0.92)';
            setTimeout(() => bellows.style.transform = 'scale(1)', 100);
        }
    };

    function updateHeatLoop() {
        if (currentStep !== 3) return;

        // Slow cooling down
        currentTemp = Math.max(0, currentTemp - 0.45);
        tempIndicator.style.width = currentTemp + '%';

        // Check ideal zone (50% to 85%) - forgiving on mobile!
        if (currentTemp >= 50 && 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 >= 3.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();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate([50, 100, 150]);

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