From 0aca2bf3eebcf1ab368c40f2ec2e6a2878098374 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 12:25:35 +0100
Subject: [PATCH] docs: Add ISO 8601 week to HippieClock

---
 source/screens/demo/examples/clock.liquid | 32 +++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 34be2ef..812b92e 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -18,7 +18,6 @@ tags:
 {{ block.super -}}
 
 <script>
-	// TODO: Kalenderwoche ergänzen
 	// TODO: Mondphase ergänzen
 	class HippieClock {
 		constructor(element, date, options) {
@@ -42,7 +41,8 @@ tags:
 			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)`);
+			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
+			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
 
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
@@ -138,6 +138,7 @@ tags:
 			this.updateShape('dotweek', this.getTime().dayWeek);
 			this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
 			this.updateShape('dotyear', this.getTime().dayYear);
+			this.updateShape('week', this.getTime().week);
 			this.updateShape('month', this.getTime().month);
 			this.draw();
 		}
@@ -171,6 +172,31 @@ tags:
 			return new Date(year, month, 0).getDate();
 		}
 
+		// ISO 8601
+		getISOWeek(date) {
+			const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+			const dayNum = d.getUTCDay() || 7;
+			d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+			const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+
+			return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+		}
+
+		getISOWeeksInYear(year) {
+			// Check if Dec 28 is in week 53
+			return this.getISOWeek(new Date(year, 11, 28)) === 53 ? 53 : 52;
+		}
+
+		getISOWeekInfo(date) {
+			const current = this.getISOWeek(date);
+			const weeksYear = this.getISOWeeksInYear(date.getFullYear());
+
+			return {
+				current,
+				weeksYear
+			};
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -191,6 +217,8 @@ tags:
 				dayWeek: this.getNumericWeekday(this.date),
 				dayMonth: this.date.getDate(),
 				dayYear: this.getNumericYearDay(this.date),
+				week: this.getISOWeekInfo(this.date).current,
+				weeksYear: this.getISOWeekInfo(this.date).weeksYear,
 				month: this.date.getMonth() + 1, // Get current month (0-11)
 				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
 			};