Spaces:

PaulMartrenchar
/

Random

Sleeping

App Files Files Community

PaulMartrenchar commited on Jun 11, 2025

Commit

55cdcd7

1 Parent(s): d564cda

Improve the canvas

Browse files

Files changed (1) hide show

index.html +65 -55

index.html CHANGED Viewed

@@ -17,43 +17,53 @@
             background-color: lightblue;
         }
-        #canvas {
             width: 100%;
             height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            background-color: lightblue;
         }
-        h1, p {
-            color: white;
-            text-align: center;
         }
-        .circle {
             position: absolute;
-            width: 50px;
-            height: 50px;
-            background-color: white;
-            border-radius: 50%;
             transform: translate(-50%, -50%);
             pointer-events: none;
         }
     </style>
 </head>
 <body>
-    <div id="canvas">
-        <h1>Randomizer</h1>
-        <p>put your finger to decide</p>
     </div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            const canvas = document.getElementById('canvas');
             let circles = [];
             let timer = null;
             function resetTimer() {
                 if (timer) {
@@ -68,31 +78,43 @@
                 const winnerIndex = Math.floor(Math.random() * circles.length);
                 const winnerCircle = circles[winnerIndex];
-                // Remove all circles
                 circles.forEach(circle => {
-                    if (circle.element && circle.element.parentNode) {
-                        circle.element.parentNode.removeChild(circle.element);
-                    }
                 });
-                // Change the winner's circle to green
-                if (winnerCircle.element) {
-                    winnerCircle.element.style.backgroundColor = 'green';
-                    canvas.appendChild(winnerCircle.element);
-                }
-                circles = [winnerCircle];
             }
-            function createCircle(x, y, id) {
-                const circle = document.createElement('div');
-                circle.className = 'circle';
-                circle.style.left = `${x}px`;
-                circle.style.top = `${y}px`;
-                circle.id = `circle-${id}`;
-                canvas.appendChild(circle);
-                return circle;
             }
             canvas.addEventListener('touchstart', (event) => {
@@ -100,10 +122,8 @@
                 const touches = event.touches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];
-                    const circle = createCircle(touch.clientX, touch.clientY, touch.identifier);
-                    circles.push({ id: touch.identifier, element: circle, x: touch.clientX, y: touch.clientY });
                 }
-                resetTimer();
             });
             canvas.addEventListener('touchmove', (event) => {
@@ -111,13 +131,7 @@
                 const touches = event.touches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];
-                    const circleIndex = circles.findIndex(c => c.id === touch.identifier);
-                    if (circleIndex !== -1) {
-                        circles[circleIndex].x = touch.clientX;
-                        circles[circleIndex].y = touch.clientY;
-                        circles[circleIndex].element.style.left = `${touch.clientX}px`;
-                        circles[circleIndex].element.style.top = `${touch.clientY}px`;
-                    }
                 }
             });
@@ -126,16 +140,12 @@
                 const touches = event.changedTouches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];
-                    const circleIndex = circles.findIndex(c => c.id === touch.identifier);
-                    if (circleIndex !== -1) {
-                        if (circles[circleIndex].element && circles[circleIndex].element.parentNode) {
-                            circles[circleIndex].element.parentNode.removeChild(circles[circleIndex].element);
-                        }
-                        circles.splice(circleIndex, 1);
-                    }
                 }
-                resetTimer();
             });
         });
     </script>
 </body>

             background-color: lightblue;
         }
+        #canvas-container {
+            position: relative;
             width: 100%;
             height: 100%;
         }
+        #drawing-canvas {
+            width: 100%;
+            height: 100%;
+            background-color: lightblue;
         }
+        #text-container {
             position: absolute;
+            top: 50%;
+            left: 50%;
             transform: translate(-50%, -50%);
+            text-align: center;
+            color: white;
             pointer-events: none;
         }
     </style>
 </head>
 <body>
+    <div id="canvas-container">
+        <canvas id="drawing-canvas"></canvas>
+        <div id="text-container">
+            <h1>Randomizer</h1>
+            <p>put your finger to decide</p>
+        </div>
     </div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
+            const canvas = document.getElementById('drawing-canvas');
+            const ctx = canvas.getContext('2d');
             let circles = [];
             let timer = null;
+            let animationId = null;
+            // Set canvas dimensions to full window size
+            function resizeCanvas() {
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+            }
+            window.addEventListener('resize', resizeCanvas);
+            resizeCanvas();
             function resetTimer() {
                 if (timer) {
                 const winnerIndex = Math.floor(Math.random() * circles.length);
                 const winnerCircle = circles[winnerIndex];
+                // Clear all circles
+                circles = [winnerCircle];
+                winnerCircle.color = 'green';
+            }
+            function draw() {
+                // Clear the canvas
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw all circles
                 circles.forEach(circle => {
+                    ctx.beginPath();
+                    ctx.arc(circle.x, circle.y, 50, 0, 2 * Math.PI); // Increased radius to 50
+                    ctx.fillStyle = circle.color || 'white';
+                    ctx.fill();
+                    ctx.closePath();
                 });
+                animationId = requestAnimationFrame(draw);
+            }
+            function addCircle(x, y, id) {
+                circles.push({ id, x, y, color: 'white' });
+                resetTimer();
             }
+            function updateCircle(id, x, y) {
+                const circle = circles.find(c => c.id === id);
+                if (circle) {
+                    circle.x = x;
+                    circle.y = y;
+                }
+            }
+            function removeCircle(id) {
+                circles = circles.filter(c => c.id !== id);
+                resetTimer();
             }
             canvas.addEventListener('touchstart', (event) => {
                 const touches = event.touches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];
+                    addCircle(touch.clientX, touch.clientY, touch.identifier);
                 }
             });
             canvas.addEventListener('touchmove', (event) => {
                 const touches = event.touches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];
+                    updateCircle(touch.identifier, touch.clientX, touch.clientY);
                 }
             });
                 const touches = event.changedTouches;
                 for (let i = 0; i < touches.length; i++) {
                     const touch = touches[i];
+                    removeCircle(touch.identifier);
                 }
             });
+            // Start the drawing loop
+            draw();
         });
     </script>
 </body>