Overhaul: Golden ring flight course and magic spell dueling mini-game with mobile gestures

app/static/js/duel.js

@@ -0,0 +1,454 @@
+// Wand Spell Tracing & Dueling Mini-Game (Das Zauberspruch-Duell)
+(function() {
+    const canvas = document.getElementById('spellCanvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+
+    const spellNameEl = document.getElementById('spellName');
+    const spellDescEl = document.getElementById('spellDesc');
+    const spellProgressEl = document.getElementById('spellProgress');
+    const dummyHpEl = document.getElementById('dummyHp');
+    const modalBackdrop = document.getElementById('modalBackdrop');
+    const modalTitle = document.getElementById('modalTitle');
+    const modalText = document.getElementById('modalText');
+    const modalBtn = document.getElementById('modalBtn');
+
+    let width = 700, height = 440;
+    function resize() {
+        const rect = canvas.getBoundingClientRect();
+        width = Math.round(rect.width || canvas.parentElement.clientWidth || 700);
+        height = Math.round(Math.min(480, Math.max(280, width * 0.62)));
+        canvas.width = width;
+        canvas.height = height;
+        canvas.style.height = height + 'px';
+        setupSpellNodes();
+    }
+
+    // 3 Sequential Spells with distinct gestures
+    const SPELLS = [
+        {
+            id: 'flipendo',
+            name: 'Flipendo ⚡',
+            incantation: '"Flipendo!" (Ruck-Schockzauber)',
+            desc: 'Verbinde die 4 Runensterne im Zickzack-Muster, um den Schockzauber zu entfesseln!',
+            color: '#00f2fe',
+            beamColor: '#4facfe',
+            // Relative coordinates (0 to 1) for responsive scaling
+            points: [
+                { x: 0.22, y: 0.28 },
+                { x: 0.52, y: 0.28 },
+                { x: 0.25, y: 0.72 },
+                { x: 0.55, y: 0.72 }
+            ]
+        },
+        {
+            id: 'incendio',
+            name: 'Incendio 🔥',
+            incantation: '"Incendio!" (Feuer-Zauber)',
+            desc: 'Zeichne das lodernde Flammendreieck, um die Zielattrappe in Brand zu setzen!',
+            color: '#ff4500',
+            beamColor: '#ff8c00',
+            points: [
+                { x: 0.38, y: 0.22 },
+                { x: 0.55, y: 0.74 },
+                { x: 0.22, y: 0.74 },
+                { x: 0.38, y: 0.22 }
+            ]
+        },
+        {
+            id: 'alohomora',
+            name: 'Alohomora 🗝️',
+            incantation: '"Alohomora!" (Entriegelungszauber)',
+            desc: 'Zeichne die magische Schlüsselloch-Kurve, um das verzauberte Siegel zu sprengen!',
+            color: '#ffd700',
+            beamColor: '#fff275',
+            points: [
+                { x: 0.38, y: 0.25 },
+                { x: 0.48, y: 0.38 },
+                { x: 0.42, y: 0.52 },
+                { x: 0.42, y: 0.78 }
+            ]
+        }
+    ];
+
+    let currentSpellIdx = 0;
+    let spellNodes = [];
+    let nextNodeIdx = 0;
+    let isDrawing = false;
+    let userPath = [];
+    let wandParticles = [];
+    let blastParticles = [];
+    let dummyShake = 0;
+    let spellCastAnim = 0;
+    let gameWon = false;
+
+    function setupSpellNodes() {
+        const spell = SPELLS[currentSpellIdx];
+        if (!spell) return;
+        spellNodes = spell.points.map((pt, idx) => ({
+            x: Math.round(pt.x * width),
+            y: Math.round(pt.y * height),
+            radius: 20,
+            hit: idx < nextNodeIdx
+        }));
+    }
+
+    window.addEventListener('resize', resize);
+    resize();
+
+    function updateSpellUI() {
+        const spell = SPELLS[currentSpellIdx];
+        if (!spell) return;
+        if (spellNameEl) spellNameEl.innerText = spell.name;
+        if (spellDescEl) spellDescEl.innerText = spell.desc;
+        if (spellProgressEl) spellProgressEl.innerText = `Zauberspruch ${currentSpellIdx + 1} von ${SPELLS.length}`;
+        if (dummyHpEl) dummyHpEl.innerText = `${SPELLS.length - currentSpellIdx} Zauber übrig`;
+        setupSpellNodes();
+    }
+    updateSpellUI();
+
+    // Touch & Pointer Coordinates
+    function getCanvasCoords(clientX, clientY) {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            x: (clientX - rect.left) * (canvas.width / rect.width),
+            y: (clientY - rect.top) * (canvas.height / rect.height)
+        };
+    }
+
+    function addWandSpark(x, y, color) {
+        for (let i = 0; i < 4; i++) {
+            wandParticles.push({
+                x: x,
+                y: y,
+                vx: (Math.random() - 0.5) * 3,
+                vy: (Math.random() - 0.5) * 3,
+                color: color || '#fff',
+                size: Math.random() * 4 + 2,
+                alpha: 1.0
+            });
+        }
+    }
+
+    function handleInputStart(x, y) {
+        if (gameWon) return;
+        isDrawing = true;
+        userPath = [{ x, y }];
+        checkNodeHit(x, y);
+    }
+
+    function handleInputMove(x, y) {
+        if (!isDrawing || gameWon) return;
+        userPath.push({ x, y });
+        addWandSpark(x, y, SPELLS[currentSpellIdx].color);
+        checkNodeHit(x, y);
+    }
+
+    function handleInputEnd() {
+        isDrawing = false;
+        // If not all nodes hit, reset progress for this spell
+        if (nextNodeIdx < spellNodes.length) {
+            nextNodeIdx = 0;
+            userPath = [];
+            setupSpellNodes();
+        }
+    }
+
+    function checkNodeHit(x, y) {
+        if (nextNodeIdx >= spellNodes.length) return;
+        const targetNode = spellNodes[nextNodeIdx];
+        const dist = Math.hypot(x - targetNode.x, y - targetNode.y);
+
+        // Tolerant hit radius for easy finger play: 36px
+        if (dist < 36) {
+            targetNode.hit = true;
+            nextNodeIdx++;
+            if (window.soundFX) window.soundFX.playKeyChime();
+            addWandSpark(targetNode.x, targetNode.y, '#ffd700');
+
+            // All nodes connected for this spell!
+            if (nextNodeIdx >= spellNodes.length) {
+                castSpellSuccess();
+            }
+        }
+    }
+
+    // Touch events with touch-action none
+    canvas.addEventListener('touchstart', e => {
+        e.preventDefault();
+        if (e.touches.length > 0) {
+            const p = getCanvasCoords(e.touches[0].clientX, e.touches[0].clientY);
+            handleInputStart(p.x, p.y);
+        }
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', e => {
+        e.preventDefault();
+        if (e.touches.length > 0) {
+            const p = getCanvasCoords(e.touches[0].clientX, e.touches[0].clientY);
+            handleInputMove(p.x, p.y);
+        }
+    }, { passive: false });
+
+    canvas.addEventListener('touchend', e => {
+        e.preventDefault();
+        handleInputEnd();
+    }, { passive: false });
+
+    // Pointer events for desktop
+    canvas.addEventListener('pointerdown', e => {
+        if (e.pointerType === 'mouse') {
+            const p = getCanvasCoords(e.clientX, e.clientY);
+            handleInputStart(p.x, p.y);
+        }
+    });
+
+    canvas.addEventListener('pointermove', e => {
+        if (e.pointerType === 'mouse' && isDrawing) {
+            const p = getCanvasCoords(e.clientX, e.clientY);
+            handleInputMove(p.x, p.y);
+        }
+    });
+
+    canvas.addEventListener('pointerup', () => {
+        handleInputEnd();
+    });
+
+    function castSpellSuccess() {
+        const spell = SPELLS[currentSpellIdx];
+        spellCastAnim = 1.0;
+        dummyShake = 18;
+        if (window.soundFX) window.soundFX.playMagicSuccess();
+
+        // Explosion on target dummy
+        const dummyX = width * 0.78;
+        const dummyY = height * 0.5;
+        for (let i = 0; i < 40; i++) {
+            const angle = Math.random() * Math.PI * 2;
+            const spd = Math.random() * 8 + 3;
+            blastParticles.push({
+                x: dummyX,
+                y: dummyY,
+                vx: Math.cos(angle) * spd,
+                vy: Math.sin(angle) * spd,
+                color: spell.color,
+                size: Math.random() * 5 + 3,
+                alpha: 1.0
+            });
+        }
+
+        setTimeout(() => {
+            currentSpellIdx++;
+            nextNodeIdx = 0;
+            userPath = [];
+
+            if (currentSpellIdx >= SPELLS.length) {
+                gameWon = true;
+                onDuelWon();
+            } else {
+                updateSpellUI();
+            }
+        }, 800);
+    }
+
+    async function onDuelWon() {
+        if (window.soundFX) window.soundFX.playMagicSuccess();
+        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);
+            }
+        } 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>
+            Professor Flitwick applaudiert begeistert. Das uralte Schlosstor schwingt auf... 
+            Dahinter flackern die unheimlichen Flammen von <strong>Snapes Flammenkammer</strong>!<br><br>
+            🎒 <em>Das goldene Duellanten-Abzeichen wurde deinem Zauberbeutel hinzugefügt!</em>
+        `;
+        modalBtn.innerText = "Weiter zu Snapes Flaschenrätsel 🧪";
+        modalBtn.onclick = () => { window.location.href = '/bottles'; };
+        modalBackdrop.classList.add('show');
+    }
+
+    function render() {
+        ctx.clearRect(0, 0, width, height);
+
+        // Dungeon stone chamber background
+        const bgGrad = ctx.createRadialGradient(width * 0.5, height * 0.5, 30, width * 0.5, height * 0.5, width * 0.6);
+        bgGrad.addColorStop(0, '#1c172e');
+        bgGrad.addColorStop(1, '#0c0a14');
+        ctx.fillStyle = bgGrad;
+        ctx.fillRect(0, 0, width, height);
+
+        // Stone floor tiles
+        ctx.strokeStyle = '#2d253d';
+        ctx.lineWidth = 1;
+        for (let y = height * 0.75; y < height; y += 25) {
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(width, y);
+            ctx.stroke();
+        }
+
+        const spell = SPELLS[currentSpellIdx] || SPELLS[SPELLS.length - 1];
+
+        // Draw Spell Beam if casting
+        if (spellCastAnim > 0) {
+            ctx.save();
+            ctx.strokeStyle = spell.beamColor;
+            ctx.lineWidth = 14 * spellCastAnim;
+            ctx.shadowColor = spell.color;
+            ctx.shadowBlur = 30;
+            ctx.beginPath();
+            ctx.moveTo(width * 0.45, height * 0.5);
+            ctx.lineTo(width * 0.78, height * 0.5);
+            ctx.stroke();
+            ctx.restore();
+            spellCastAnim -= 0.05;
+        }
+
+        // Draw Enchanted Target Dummy (Right side)
+        ctx.save();
+        const dummyBaseX = width * 0.78 + (dummyShake > 0 ? (Math.random() - 0.5) * dummyShake : 0);
+        const dummyBaseY = height * 0.5;
+        if (dummyShake > 0) dummyShake *= 0.85;
+
+        // Dummy wooden post & shield
+        ctx.fillStyle = '#4a3319';
+        ctx.fillRect(dummyBaseX - 8, dummyBaseY - 60, 16, 120);
+
+        // Armor Breastplate
+        ctx.fillStyle = '#6c757d';
+        ctx.strokeStyle = '#e5b948';
+        ctx.lineWidth = 3;
+        ctx.beginPath();
+        ctx.arc(dummyBaseX, dummyBaseY - 10, 32, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+
+        // Armor Helmet
+        ctx.fillStyle = '#495057';
+        ctx.beginPath();
+        ctx.arc(dummyBaseX, dummyBaseY - 50, 20, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+
+        // Glowing Rune Shield Aura on Dummy
+        ctx.strokeStyle = spell.color;
+        ctx.shadowColor = spell.color;
+        ctx.shadowBlur = 15;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.arc(dummyBaseX, dummyBaseY - 10, 42 + Math.sin(Date.now() * 0.008) * 4, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.restore();
+
+        // Draw Spell Tracing Guide Lines (Left / Center side)
+        if (spellNodes.length > 1 && !gameWon) {
+            ctx.save();
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
+            ctx.setLineDash([8, 8]);
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.moveTo(spellNodes[0].x, spellNodes[0].y);
+            for (let i = 1; i < spellNodes.length; i++) {
+                ctx.lineTo(spellNodes[i].x, spellNodes[i].y);
+            }
+            ctx.stroke();
+            ctx.restore();
+        }
+
+        // Draw Player's Drawn Line
+        if (userPath.length > 1) {
+            ctx.save();
+            ctx.strokeStyle = spell.color;
+            ctx.lineWidth = 6;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.shadowColor = spell.color;
+            ctx.shadowBlur = 18;
+            ctx.beginPath();
+            ctx.moveTo(userPath[0].x, userPath[0].y);
+            for (let i = 1; i < userPath.length; i++) {
+                ctx.lineTo(userPath[i].x, userPath[i].y);
+            }
+            ctx.stroke();
+            ctx.restore();
+        }
+
+        // Draw Spell Nodes (Rune Stars to connect)
+        if (!gameWon) {
+            spellNodes.forEach((node, idx) => {
+                ctx.save();
+                const isNext = (idx === nextNodeIdx);
+                const isHit = node.hit;
+
+                ctx.shadowColor = isHit ? '#2ecc71' : (isNext ? spell.color : '#888');
+                ctx.shadowBlur = isNext ? 20 : 8;
+
+                ctx.fillStyle = isHit ? '#2ecc71' : (isNext ? '#ffffff' : '#332a42');
+                ctx.strokeStyle = isNext ? spell.color : '#e5b948';
+                ctx.lineWidth = isNext ? 4 : 2;
+
+                const r = node.radius + (isNext ? Math.sin(Date.now() * 0.01) * 3 : 0);
+                ctx.beginPath();
+                ctx.arc(node.x, node.y, r, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+
+                // Number label
+                ctx.fillStyle = isHit ? '#000' : (isNext ? '#000' : '#e5b948');
+                ctx.font = 'bold 14px sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(idx + 1, node.x, node.y);
+
+                ctx.restore();
+            });
+        }
+
+        // Update & Render Wand Sparks
+        for (let i = wandParticles.length - 1; i >= 0; i--) {
+            const p = wandParticles[i];
+            p.x += p.vx;
+            p.y += p.vy;
+            p.alpha *= 0.90;
+            if (p.alpha <= 0.02) {
+                wandParticles.splice(i, 1);
+                continue;
+            }
+            ctx.fillStyle = p.color;
+            ctx.globalAlpha = p.alpha;
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+
+        // Update & Render Blast Particles
+        for (let i = blastParticles.length - 1; i >= 0; i--) {
+            const p = blastParticles[i];
+            p.x += p.vx;
+            p.y += p.vy;
+            p.alpha *= 0.92;
+            if (p.alpha <= 0.02) {
+                blastParticles.splice(i, 1);
+                continue;
+            }
+            ctx.fillStyle = p.color;
+            ctx.globalAlpha = p.alpha;
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        ctx.globalAlpha = 1.0;
+
+        requestAnimationFrame(render);
+    }
+    requestAnimationFrame(render);
+})();