From 8d1d182be4146a05bde4080c044de1c93f2f2516 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Sun, 1 Mar 2026 13:01:10 +0100
Subject: [PATCH] feat: Add moon phase to HippieClock

---
 source/screens/demo/examples/clock.liquid | 31 ++++++++++++++++++++++-
 source/style/modules/_clock.scss          | 12 ---------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid
index 812b92e..827160c 100644
--- a/source/screens/demo/examples/clock.liquid
+++ b/source/screens/demo/examples/clock.liquid
@@ -43,6 +43,7 @@ tags:
 			this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
 			this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
 			this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
+			this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
 
 			this.resize();
 			window.addEventListener('resize', () => this.resize());
@@ -140,6 +141,7 @@ tags:
 			this.updateShape('dotyear', this.getTime().dayYear);
 			this.updateShape('week', this.getTime().week);
 			this.updateShape('month', this.getTime().month);
+			this.updateShape('moon', this.getTime().moon);
 			this.draw();
 		}
 
@@ -197,6 +199,32 @@ tags:
 			};
 		}
 
+		getMoonNameFrom(phase) {
+			if (phase < 0.125) return 'New Moon';
+			if (phase < 0.25) return 'Waxing Crescent';
+			if (phase < 0.375) return 'First Quarter';
+			if (phase < 0.5) return 'Waxing Gibbous';
+			if (phase < 0.625) return 'Full Moon';
+			if (phase < 0.75) return 'Waning Gibbous';
+			if (phase < 0.875) return 'Last Quarter';
+			return 'Waning Crescent';
+		}
+
+		getMoonPhase(date) {
+			// Known new moon date: January 6, 2000
+			const newMoon = new Date(2000, 0, 6);
+			const lunarCycle = 29.53058867; // days
+
+			const daysSinceNewMoon = (date - newMoon) / (1000 * 60 * 60 * 24);
+			const phase = (daysSinceNewMoon % lunarCycle) / lunarCycle;
+
+			return {
+				illumination: Math.abs(Math.cos(Math.PI * phase)),
+				phase: mapRange(phase, 0, 1, 1, 8),
+				phaseName: this.getMoonNameFrom(phase)
+			};
+		}
+
 		getSize() {
 			const height = window.innerHeight;
 			const width = window.innerWidth;
@@ -220,7 +248,8 @@ tags:
 				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())
+				daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear()),
+				moon: this.getMoonPhase(this.date).phase
 			};
 		}
 
diff --git a/source/style/modules/_clock.scss b/source/style/modules/_clock.scss
index bcc3e9a..b58fed5 100644
--- a/source/style/modules/_clock.scss
+++ b/source/style/modules/_clock.scss
@@ -1,17 +1,5 @@
 @use "../hippie-style/hippie";
 
-:root {
-	--clock-color-yellow: rgb(250, 216, 3);
-	--clock-color-orange: rgb(242, 175, 19);
-	--clock-color-pink: rgb(211, 10, 81);
-	--clock-color-purple: rgb(142, 31, 104);
-	--clock-color-blue: rgb(39, 63, 139);
-	--clock-color-pblue: rgb(60, 87, 154);
-	--clock-color-lblue: rgb(183, 224, 240);
-	--clock-color-lcyan: rgb(107, 199, 217);
-	--clock-color-cyan: rgb(82, 190, 209);
-}
-
 .body_clock {
 	main {
 		display: flex;