feat: Update clock

- Change how the arc is drawn
- Update the ring according to seconds

source/screens/demo/examples/clock.liquid

@@ -20,15 +20,29 @@ tags:
 	const canvas = document.getElementById('clock');
 	const ctx = canvas.getContext('2d');
 
-	function drawRing(x, y, outerRadius, innerRadius, color) {
+	function drawRing(seconds) {
+		const centerX = canvas.width / 2;
+		const centerY = canvas.height / 2;
+		const radius = 128;
+
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		const startAngle = -0.5 * Math.PI; // Start at the top
+		const endAngle = startAngle + (2 * Math.PI * (seconds / 60));
+
 		ctx.beginPath();
-		ctx.arc(x, y, outerRadius, 0, Math.PI * 2);
-		ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
-		ctx.closePath();
-		ctx.fillStyle = color;
-		ctx.fill();
+		ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
+		ctx.lineWidth = 16;
+		ctx.strokeStyle = 'black';
+		ctx.stroke();
 	}
 
-	drawRing(256, 256, 128, 96, 'black');
+	function updateCircle() {
+		const currentSeconds = new Date().getSeconds();
+		drawRing(currentSeconds);
+	}
+
+	updateCircle();
+	setInterval(updateCircle, 1000);
 </script>
 {% endblock %}