fixes

2026-09-03 17:25:35 +02:00
parent 5d9194e14f
commit 00aa94ea7c
8 changed files with 323 additions and 18 deletions
@@ -461,6 +461,130 @@ window.FaraonFx = (function () {
        }
    }

+    // --- TURN TRANSITION ANIMATION ---
+    function getSlotElement(pos) {
+        if (!pos) return null;
+        const normalized = pos.replace('slot-', '');
+        if (normalized === 'bottom') {
+            return document.querySelector('.slot-bottom .avatar-badge') || document.querySelector('.slot-bottom');
+        }
+        return document.querySelector('.slot-' + normalized + ' .avatar-badge') || document.querySelector('.slot-' + normalized);
+    }
+
+    function playTurnPassSound() {
+        if (isMuted) return;
+        const ctx = getAudioContext();
+        if (!ctx) return;
+        const now = ctx.currentTime;
+
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.type = 'sine';
+        osc.frequency.setValueAtTime(540, now);
+        osc.frequency.exponentialRampToValueAtTime(820, now + 0.11);
+
+        gain.gain.setValueAtTime(0.07, now);
+        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.13);
+
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.start(now);
+        osc.stop(now + 0.14);
+    }
+
+    function animateTurnTransition(fromPosition, toPosition) {
+        if (!fromPosition || !toPosition || fromPosition === toPosition) return Promise.resolve();
+
+        return new Promise((resolve) => {
+            const fromElem = getSlotElement(fromPosition);
+            const toElem = getSlotElement(toPosition);
+
+            const startPos = fromElem ? getElementCenter(fromElem) : getPositionCoords(fromPosition);
+            const endPos = toElem ? getElementCenter(toElem) : getPositionCoords(toPosition);
+
+            const container = document.getElementById('game-table-container') || document.body;
+
+            const orb = document.createElement('div');
+            orb.className = 'turn-transfer-orb';
+            orb.style.left = `${startPos.x}px`;
+            orb.style.top = `${startPos.y}px`;
+            container.appendChild(orb);
+
+            const midX = (startPos.x + endPos.x) / 2;
+            const midY = Math.min(startPos.y, endPos.y) - 35;
+
+            const duration = 380;
+            const startTime = performance.now();
+
+            function step(currentTime) {
+                const elapsed = currentTime - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const t = 1 - Math.pow(1 - progress, 3); // Ease out cubic
+
+                // Quadratic Bezier curve
+                const currentX = (1 - t) * (1 - t) * startPos.x + 2 * (1 - t) * t * midX + t * t * endPos.x;
+                const currentY = (1 - t) * (1 - t) * startPos.y + 2 * (1 - t) * t * midY + t * t * endPos.y;
+
+                orb.style.left = `${currentX}px`;
+                orb.style.top = `${currentY}px`;
+
+                if (particleCanvas && Math.random() < 0.4) {
+                    particles.push({
+                        x: currentX,
+                        y: currentY,
+                        vx: (Math.random() - 0.5) * 1.5,
+                        vy: (Math.random() - 0.5) * 1.5,
+                        gravity: 0,
+                        size: 3 + Math.random() * 3,
+                        color: Math.random() > 0.4 ? '#ffd700' : '#f5b041',
+                        shape: 'spark',
+                        life: 0.6,
+                        decay: 0.04,
+                        rotation: Math.random() * Math.PI
+                    });
+                }
+
+                if (progress < 1) {
+                    requestAnimationFrame(step);
+                } else {
+                    orb.remove();
+
+                    if (toElem) {
+                        toElem.classList.remove('turn-arrived-pulse');
+                        void toElem.offsetWidth;
+                        toElem.classList.add('turn-arrived-pulse');
+                        setTimeout(() => toElem.classList.remove('turn-arrived-pulse'), 600);
+                    }
+
+                    if (particleCanvas) {
+                        for (let i = 0; i < 8; i++) {
+                            const angle = Math.random() * Math.PI * 2;
+                            const spd = 1.5 + Math.random() * 2.5;
+                            particles.push({
+                                x: endPos.x,
+                                y: endPos.y,
+                                vx: Math.cos(angle) * spd,
+                                vy: Math.sin(angle) * spd,
+                                gravity: 0.02,
+                                size: 3 + Math.random() * 3,
+                                color: '#ffd700',
+                                shape: 'spark',
+                                life: 0.7,
+                                decay: 0.035,
+                                rotation: Math.random() * Math.PI
+                            });
+                        }
+                    }
+
+                    playTurnPassSound();
+                    resolve();
+                }
+            }
+
+            requestAnimationFrame(step);
+        });
+    }
+
    // --- PARTICLE ENGINE ---
    function initParticles(canvasId) {
        particleCanvas = document.getElementById(canvasId);
@@ -912,6 +1036,7 @@ window.FaraonFx = (function () {
        triggerGoldStarExplosion,
        animateCardPlay,
        animateCardDraw,
+        animateTurnTransition,
        toggleMute
    };
 })();