Fix bug of duplicate circles

index.html

@@ -14,6 +14,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            background-color: #add8e6; /* Light blue background */
         }
 
         #canvas-container {
@@ -25,7 +26,7 @@
         #drawing-canvas {
             width: 100%;
             height: 100%;
-            z-index:10;
+            z-index: 10;
         }
 
         #text-container {
@@ -36,6 +37,7 @@
             text-align: center;
             color: white;
             pointer-events: none;
+            z-index: 20; /* Ensure text is above the canvas */
         }
     </style>
 </head>
@@ -51,10 +53,10 @@
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('drawing-canvas');
             const ctx = canvas.getContext('2d');
-            const statusText = document.getElementById('status-text');
             let circles = [];
             let timer = null;
             let animationId = null;
+            let winnerDecided = false;
 
             // Set canvas dimensions to full window size
             function resizeCanvas() {
@@ -80,6 +82,7 @@
                 // Clear all circles
                 circles = [winnerCircle];
                 winnerCircle.color = '#228B22';
+                winnerDecided = true;
             }
 
             function draw() {
@@ -90,7 +93,7 @@
                 // Draw all circles
                 circles.forEach(circle => {
                     ctx.beginPath();
-                    ctx.arc(circle.x, circle.y, 120, 0, Math.PI * 2); // Radius of 50
+                    ctx.arc(circle.x, circle.y, 120, 0, Math.PI * 2); // Radius of 120
                     ctx.fillStyle = circle.color || '#fff';
                     ctx.fill();
                     ctx.closePath();
@@ -99,44 +102,52 @@
                 animationId = requestAnimationFrame(draw);
             }
 
-            function addCircle(x, y, id) {
-                circles.push({ id, x, y, color: '#fff' });
-                resetTimer();
-            }
+            function updateCircles(touches) {
+                if (winnerDecided) return;
+
+                // Clear existing circles
+                circles = [];
 
-            function updateCircle(id, x, y) {
-                const circle = circles.find(c => c.id === id);
-                if (circle) {
-                    circle.x = x;
-                    circle.y = y;
+                // Add circles for current touches
+                for (let i = 0; i < touches.length; i++) {
+                    const touch = touches[i];
+                    circles.push({ id: touch.identifier, x: touch.clientX, y: touch.clientY, color: '#fff' });
                 }
+
+                resetTimer();
             }
 
             function removeCircle(id) {
                 circles = circles.filter(c => c.id !== id);
+                if (circles.length === 0 && winnerDecided) {
+                    winnerDecided = false;
+                }
                 resetTimer();
             }
 
             canvas.addEventListener('touchstart', (event) => {
-                event.preventDefault();
-                const touches = event.touches;
-                for (let i = 0; i < touches.length; i++) {
-                    const touch = touches[i];
-                    addCircle(touch.clientX, touch.clientY, touch.identifier);
+                if (winnerDecided) {
+                    event.preventDefault();
+                    return;
                 }
+                const touches = event.touches;
+                updateCircles(touches);
             });
 
             canvas.addEventListener('touchmove', (event) => {
-                event.preventDefault();
-                const touches = event.touches;
-                for (let i = 0; i < touches.length; i++) {
-                    const touch = touches[i];
-                    updateCircle(touch.identifier, touch.clientX, touch.clientY);
+                if (winnerDecided) {
+                    event.preventDefault();
+                    return;
                 }
+                const touches = event.touches;
+                updateCircles(touches);
             });
 
             canvas.addEventListener('touchend', (event) => {
-                event.preventDefault();
+                if (winnerDecided) {
+                    event.preventDefault();
+                    return;
+                }
                 const touches = event.changedTouches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];