Add debug traces

index.html

@@ -43,13 +43,14 @@
         <canvas id="drawing-canvas"></canvas>
         <div id="text-container">
             <h1>Randomizer</h1>
-            <p>put your finger to decide</p>
+            <p id="status-text">put your finger to decide</p>
         </div>
     </div>
     <script>
         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;
@@ -66,6 +67,7 @@
             function resetTimer() {
                 clearTimeout(timer);
                 timer = setTimeout(decideWinner, 5000);
+                updateStatusText('Timer reset');
             }
 
             function decideWinner() {
@@ -77,6 +79,11 @@
                 // Clear all circles
                 circles = [winnerCircle];
                 winnerCircle.color = 'green';
+                updateStatusText(`Winner decided: Circle ${winnerCircle.id}`);
+            }
+
+            function updateStatusText(text) {
+                statusText.textContent = text;
             }
 
             function draw() {
@@ -99,6 +106,7 @@
             function addCircle(x, y, id) {
                 circles.push({ id, x, y, color: 'white' });
                 resetTimer();
+                updateStatusText(`Circle added: ${id}`);
             }
 
             function updateCircle(id, x, y) {
@@ -106,12 +114,14 @@
                 if (circle) {
                     circle.x = x;
                     circle.y = y;
+                    updateStatusText(`Circle updated: ${id}`);
                 }
             }
 
             function removeCircle(id) {
                 circles = circles.filter(c => c.id !== id);
                 resetTimer();
+                updateStatusText(`Circle removed: ${id}`);
             }
 
             canvas.addEventListener('touchstart', (event) => {
@@ -143,6 +153,7 @@
 
             // Start the drawing loop
             draw();
+            updateStatusText('Drawing loop started');
         });
     </script>
 </body>