From dfa315310f011d499eb509a4cde8950bc048971a Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 16 Nov 2025 12:35:39 +0100
Subject: [PATCH] feat: Update clock

- Change how the arc is drawn
- Update the ring according to seconds
---
 source/screens/demo/examples/clock.liquid | 28 +++++++++++++++++------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 4541525..1ef49bc 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/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 %}
\ No newline at end of file