From 5261754da50321645b02ed894c2e85ee0a34aed9 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 11:46:19 +0100
Subject: [PATCH] docs: Update clock

- Screen now uses template script
- Use mapping for section stroke
---
 source/screens/demo/examples/clock.liquid | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 776c5d2..34be2ef 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -15,6 +15,8 @@ tags:
 {% endblock %}
 
 {% block script %}
+{{ block.super -}}
+
 <script>
 	// TODO: Kalenderwoche ergänzen
 	// TODO: Mondphase ergänzen
@@ -37,7 +39,7 @@ tags:
 			this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
 			this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
 			this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
-			this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`);
+			this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
 			this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
 			this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
@@ -98,8 +100,7 @@ tags:
 							const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
 
 							ctx.strokeStyle = 'black';
-							// TODO: Stärke an shape.max orientieren
-							ctx.lineWidth = 1;
+							ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
 							ctx.beginPath();
 							ctx.moveTo(outerX, outerY);
 							ctx.lineTo(innerX, innerY);
@@ -241,7 +242,7 @@ tags:
 			this.shapes.push({type: 'circle', id, center, radius, color});
 		}
 
-		addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) {
+		addRing(id, radius, angle, max, color = 'white', center = .5, stroke = 16) {
 			this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
 		}