feat: increase fireball size and speed

static/main.js

@@ -121,6 +121,9 @@ let prevHands = null;
 let chargeFrames = 0;
 let throwCooldown = 0;
 const fireballs = [];
+let chargeAmount = 0;
+let fullGrownFrames = 0;
+let pendingFireballPos = null;
 
 // Heart State
 const hearts = [];
@@ -331,31 +334,63 @@ function processFireball(hands) {
     let chargeRadius = 0;
     let chargePos = null;
 
+    let isCharging = false;
+    let v1 = {vx:0, vy:0, speed:0}, v2 = {vx:0, vy:0, speed:0};
+
     if (hands.length === 2 && prevHands && prevHands.length === 2) {
         const c1 = palmCenter(hands[0]), c2 = palmCenter(hands[1]);
         const d = Math.hypot(c1.x - c2.x, c1.y - c2.y);
-        if (d < 0.3) {
-            chargeFrames++;
-            // Grow fireball up to 300px radius to engulf hands in 5 seconds (300 frames)
-            chargeRadius = Math.min(300, chargeFrames * 1.0);
-            chargePos = { x: (c1.x + c2.x) / 2 * W, y: (c1.y + c2.y) / 2 * H };
-
-            if (chargeFrames > 30 && throwCooldown === 0) {
-                const v1 = getVelocity(c1, palmCenter(prevHands[0]));
-                const v2 = getVelocity(c2, palmCenter(prevHands[1]));
-                if (v1.speed > 0.02 && v2.speed > 0.02) {
-                    audio.play('fireball');
-                    fireballs.push(new Fireball(chargePos.x, chargePos.y, (v1.vx+v2.vx)*W*0.5, (v1.vy+v2.vy)*H*0.5, Math.max(40, chargeRadius)));
-                    chargeFrames = 0; throwCooldown = 30; chargeRadius = 0;
-                    actionText = "🔥 MASSIVE FIREBALL";
-                }
+        if (d < 0.4) {
+            isCharging = true;
+            v1 = getVelocity(c1, palmCenter(prevHands[0]));
+            v2 = getVelocity(c2, palmCenter(prevHands[1]));
+            pendingFireballPos = { x: (c1.x + c2.x) / 2 * W, y: (c1.y + c2.y) / 2 * H };
+        }
+    }
+
+    if (isCharging || chargeAmount >= 500) {
+        if (isCharging) {
+            const rubSpeed = v1.speed + v2.speed;
+            chargeAmount += 1.0 + (rubSpeed * 30.0);
+        }
+        
+        chargeRadius = Math.min(500, chargeAmount * 1.5);
+        chargePos = pendingFireballPos || { x: W/2, y: H/2 };
+
+        if (chargeRadius >= 500) {
+            fullGrownFrames++;
+            if (fullGrownFrames > 180) { // 3 seconds at 60fps
+                audio.play('fireball');
+                const angle = Math.random() * Math.PI * 2;
+                fireballs.push(new Fireball(chargePos.x, chargePos.y, Math.cos(angle)*15, Math.sin(angle)*15, chargeRadius));
+                chargeAmount = 0; fullGrownFrames = 0; pendingFireballPos = null; throwCooldown = 30; chargeRadius = 0;
+                actionText = "🔥 AUTO THROW";
+            } else {
+                actionText = "🔥 FULLY CHARGED";
             }
-            if (chargeFrames > 10 && !actionText) actionText = "🔥 CHARGING";
         } else {
-            chargeFrames = 0;
+            fullGrownFrames = 0;
+            actionText = "🔥 CHARGING";
         }
-    } else if (hands.length === 1 && prevHands && prevHands.length === 1) {
-        chargeFrames = 0;
+
+        if (isCharging && chargeAmount > 30 && throwCooldown === 0) {
+            if (v1.speed > 0.05 && v2.speed > 0.05) {
+                audio.play('fireball');
+                let dx = (v1.vx + v2.vx) * W * 0.5;
+                let dy = (v1.vy + v2.vy) * H * 0.5;
+                if (Math.hypot(dx, dy) < 5) { dx = 0; dy = -15; }
+                fireballs.push(new Fireball(chargePos.x, chargePos.y, dx, dy, Math.max(40, chargeRadius)));
+                chargeAmount = 0; fullGrownFrames = 0; pendingFireballPos = null; throwCooldown = 30; chargeRadius = 0;
+                actionText = "🔥 MASSIVE FIREBALL";
+            }
+        }
+    } else {
+        chargeAmount = 0;
+        fullGrownFrames = 0;
+        pendingFireballPos = null;
+    }
+
+    if (chargeAmount === 0 && hands.length === 1 && prevHands && prevHands.length === 1) {
         const c = palmCenter(hands[0]);
         const v = getVelocity(c, palmCenter(prevHands[0]));
         if (v.speed > 0.04 && throwCooldown === 0) {
@@ -364,9 +399,8 @@ function processFireball(hands) {
             throwCooldown = 20;
             actionText = "🔥 THROW";
         }
-    } else {
-        chargeFrames = 0;
     }
+
     return { actionText, chargeRadius, chargePos };
 }
 
@@ -401,11 +435,12 @@ function detectLoop() {
         ctx.fillRect(0, 0, canvas.width, canvas.height);
 
         const hands = results.landmarks || [];
-        document.getElementById('handCount').textContent = hands.length;
+        const mirroredHands = hands.map(hand => hand.map(lm => ({...lm, x: 1 - lm.x})));
+        document.getElementById('handCount').textContent = mirroredHands.length;
+
+        const fbData = processFireball(mirroredHands);
 
-        if (hands.length > 0) {
-            // Mirror X coords
-            const mirroredHands = hands.map(hand => hand.map(lm => ({...lm, x: 1 - lm.x})));
+        if (mirroredHands.length > 0) {
 
             // Draw Particles
             for (let i = particles.length - 1; i >= 0; i--) {
@@ -446,33 +481,6 @@ function detectLoop() {
                 drawMultiverseConnections(mirroredHands[0], mirroredHands[1]);
             }
 
-            // Stats
-            const fbData = processFireball(mirroredHands);
-            
-            // Draw Charging Fireball
-            if (fbData.chargeRadius > 0 && fbData.chargePos) {
-                const r = fbData.chargeRadius;
-                ctx.save();
-                ctx.globalAlpha = 0.8 + Math.random() * 0.2; // Flicker
-                const g = ctx.createRadialGradient(fbData.chargePos.x, fbData.chargePos.y, 0, fbData.chargePos.x, fbData.chargePos.y, r);
-                g.addColorStop(0, '#fff'); 
-                g.addColorStop(0.3, '#ffaa00'); 
-                g.addColorStop(1, 'rgba(255,0,0,0)');
-                ctx.fillStyle = g;
-                ctx.beginPath(); 
-                ctx.arc(fbData.chargePos.x, fbData.chargePos.y, r, 0, Math.PI*2); 
-                ctx.fill();
-                
-                // Add some spark particles while charging
-                if (Math.random() > 0.5) {
-                    ctx.fillStyle = `hsl(${20 + Math.random()*30}, 100%, 50%)`;
-                    ctx.beginPath();
-                    ctx.arc(fbData.chargePos.x + (Math.random()-0.5)*r, fbData.chargePos.y + (Math.random()-0.5)*r, 1.5, 0, Math.PI*2);
-                    ctx.fill();
-                }
-                ctx.restore();
-            }
-
             const g = fbData.actionText || detectGesture(mirroredHands[0]);
             const s = calcSpread(mirroredHands[0]);
             audio.updateSound(s, mirroredHands.length);
@@ -510,6 +518,28 @@ function detectLoop() {
             }
         }
 
+        // Draw Charging Fireball (global so it persists if hands drop)
+        if (fbData.chargeRadius > 0 && fbData.chargePos) {
+            const r = fbData.chargeRadius;
+            ctx.save();
+            ctx.globalAlpha = 0.8 + Math.random() * 0.2;
+            const grad = ctx.createRadialGradient(fbData.chargePos.x, fbData.chargePos.y, 0, fbData.chargePos.x, fbData.chargePos.y, r);
+            grad.addColorStop(0, '#fff'); 
+            grad.addColorStop(0.3, '#ffaa00'); 
+            grad.addColorStop(1, 'rgba(255,0,0,0)');
+            ctx.fillStyle = grad;
+            ctx.beginPath(); 
+            ctx.arc(fbData.chargePos.x, fbData.chargePos.y, r, 0, Math.PI*2); 
+            ctx.fill();
+            if (Math.random() > 0.5) {
+                ctx.fillStyle = `hsl(${20 + Math.random()*30}, 100%, 50%)`;
+                ctx.beginPath();
+                ctx.arc(fbData.chargePos.x + (Math.random()-0.5)*r, fbData.chargePos.y + (Math.random()-0.5)*r, 1.5, 0, Math.PI*2);
+                ctx.fill();
+            }
+            ctx.restore();
+        }
+
         animFrameId = requestAnimationFrame(detectLoop);
     } catch (err) {
         console.error("Error in detectLoop:", err);