Add effect on win

index.html

@@ -57,6 +57,8 @@
             let timer = null;
             let animationId = null;
             let winnerDecided = false;
+            let pulseScale = 1.0;
+            let pulseDirection = 0.05;
 
             // Set canvas dimensions to full window size
             function resizeCanvas() {
@@ -67,7 +69,7 @@
 
             function resetTimer(touches) {
                 clearTimeout(timer);
-                if (touches >=1){
+                if (touches >= 1) {
                     timer = setTimeout(decideWinner, 4000);
                 }
             }
@@ -96,6 +98,24 @@
                     ctx.fillStyle = circle.color || '#fff';
                     ctx.fill();
                     ctx.closePath();
+
+                    // Draw pulsing glow effect around the winning circle
+                    if (winnerDecided && circle.color === '#228B22') {
+                        ctx.beginPath();
+                        ctx.arc(circle.x, circle.y, 60 * pulseScale, 0, Math.PI * 2);
+                        const gradient = ctx.createRadialGradient(circle.x, circle.y, 60, circle.x, circle.y, 60 * pulseScale);
+                        gradient.addColorStop(0, 'rgba(34, 139, 34, 0.5)');
+                        gradient.addColorStop(1, 'rgba(34, 139, 34, 0)');
+                        ctx.fillStyle = gradient;
+                        ctx.fill();
+                        ctx.closePath();
+
+                        // Update pulse scale for animation
+                        pulseScale += pulseDirection;
+                        if (pulseScale > 1.5 || pulseScale < 1.0) {
+                            pulseDirection *= -1;
+                        }
+                    }
                 });
 
                 animationId = requestAnimationFrame(draw);
@@ -118,6 +138,7 @@
                 circles = circles.filter(c => c.id !== id);
                 if (circles.length === 0 && winnerDecided) {
                     winnerDecided = false;
+                    pulseScale = 1.0; // Reset pulse scale
                 }
             }
 
@@ -128,8 +149,8 @@
                 }
                 const touches = event.touches;
                 updateCircles(touches);
-                
-                resetTimer(touches);
+
+                resetTimer(touches.length);
             });
 
             canvas.addEventListener('touchmove', (event) => {
@@ -143,20 +164,23 @@
 
             canvas.addEventListener('touchend', (event) => {
                 const touches = event.touches;
-                if (touches.length == 0) { winnerDecided = false; }
+                if (touches.length == 0) {
+                    winnerDecided = false;
+                    pulseScale = 1.0; // Reset pulse scale
+                }
                 if (winnerDecided) {
                     event.preventDefault();
                     return;
                 }
                 updateCircles(touches);
-                resetTimer(touches);
+                resetTimer(touches.length);
             });
 
             window.addEventListener('resize', resizeCanvas);
 
             setTimeout(() => {
                 resizeCanvas();
-            }, "100");
+            }, 100);
         });
     </script>
 </body>