Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Randomizer</title> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #add8e6; /* Light blue background */ | |
| } | |
| #canvas-container { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #drawing-canvas { | |
| width: 100%; | |
| height: 100%; | |
| z-index: 10; | |
| } | |
| #text-container { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| text-align: center; | |
| color: white; | |
| pointer-events: none; | |
| z-index: 20; /* Ensure text is above the canvas */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="canvas-container"> | |
| <canvas id="drawing-canvas"></canvas> | |
| <div id="text-container"> | |
| <h1>Randomizer</h1> | |
| <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'); | |
| let circles = []; | |
| 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() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| draw(); // Redraw the canvas after resizing | |
| } | |
| function resetTimer(touches) { | |
| clearTimeout(timer); | |
| if (touches >= 1) { | |
| timer = setTimeout(decideWinner, 4000); | |
| } | |
| } | |
| function decideWinner() { | |
| if (circles.length === 0) return; | |
| const winnerIndex = Math.floor(Math.random() * circles.length); | |
| const winnerCircle = circles[winnerIndex]; | |
| // Clear all circles | |
| circles = [winnerCircle]; | |
| winnerCircle.color = '#228B22'; | |
| winnerDecided = true; | |
| } | |
| function draw() { | |
| // Clear the canvas and fill with background color | |
| ctx.fillStyle = '#add8e6'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| // Draw all circles | |
| circles.forEach(circle => { | |
| ctx.beginPath(); | |
| ctx.arc(circle.x, circle.y, 60, 0, Math.PI * 2); // Radius of 60 | |
| 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); | |
| } | |
| function updateCircles(touches) { | |
| if (winnerDecided) return; | |
| // Clear existing circles | |
| circles = []; | |
| // 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' }); | |
| } | |
| } | |
| function removeCircle(id) { | |
| circles = circles.filter(c => c.id !== id); | |
| if (circles.length === 0 && winnerDecided) { | |
| winnerDecided = false; | |
| pulseScale = 1.0; // Reset pulse scale | |
| } | |
| } | |
| canvas.addEventListener('touchstart', (event) => { | |
| if (winnerDecided) { | |
| event.preventDefault(); | |
| return; | |
| } | |
| const touches = event.touches; | |
| updateCircles(touches); | |
| resetTimer(touches.length); | |
| }); | |
| canvas.addEventListener('touchmove', (event) => { | |
| if (winnerDecided) { | |
| event.preventDefault(); | |
| return; | |
| } | |
| const touches = event.touches; | |
| updateCircles(touches); | |
| }); | |
| canvas.addEventListener('touchend', (event) => { | |
| const touches = event.touches; | |
| if (touches.length == 0) { | |
| winnerDecided = false; | |
| pulseScale = 1.0; // Reset pulse scale | |
| } | |
| if (winnerDecided) { | |
| event.preventDefault(); | |
| return; | |
| } | |
| updateCircles(touches); | |
| resetTimer(touches.length); | |
| }); | |
| window.addEventListener('resize', resizeCanvas); | |
| setTimeout(() => { | |
| resizeCanvas(); | |
| }, 100); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |