From bbff9b9874477ddffddc63f8abcefbe66d51bde2 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Wed, 7 Oct 2026 13:27:04 +0200
Subject: [PATCH] Implement exact moon position based on phase (synodic month
 ~29.53d)

---
 index.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ff9508b..23828ef 100644
--- a/index.html
+++ b/index.html
@@ -960,6 +960,18 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             return ((hours / 24) * 360 + 90) * Math.PI / 180;
         }
 
+        // The Moon advances ~12.19° per day relative to the Sun (synodic month
+        // ~29.53 days). Use SunCalc.getMoonIllumination().phase as the offset.
+        // phase=0: New moon (same direction as Sun)
+        // phase=0.5: Full moon (opposite the Sun)
+        function moonAngleForTime(date) {
+            var moonIllum = SunCalc.getMoonIllumination(date);
+            var hours = date.getHours() + date.getMinutes() / 60;
+            var hourAngle = (hours / 24) * 360 + 90;
+            // Moon is roughly at hourAngle + phase * 360
+            return ((hourAngle + moonIllum.phase * 360) % 360) * Math.PI / 180;
+        }
+
         function pointOnCircle(date, radius) {
             var angle = angleForTime(date);
             return {
@@ -1181,7 +1193,11 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             rpgSunCore.setAttribute('opacity', isDaytime ? '1' : '0.35');
 
             // Moon position - based on current time on the orbit
-            var moonP = pointOnCircle(now, MOON_ORBIT_RADIUS);
+            var moonAngle = moonAngleForTime(now);
+            var moonP = {
+                x: CENTER_X + Math.cos(moonAngle) * MOON_ORBIT_RADIUS,
+                y: CENTER_Y + Math.sin(moonAngle) * MOON_ORBIT_RADIUS
+            };
             rpgMoon.setAttribute('transform', 'translate(' + moonP.x + ', ' + moonP.y + ')');
 
             var moonVisible = false;
@@ -1468,7 +1484,7 @@ window.weatherThemes = {
             if (moonTimes.set) {
                 document.getElementById('dbg-moon-set-angle').textContent = (angleForTime(moonTimes.set) * 180 / Math.PI).toFixed(1) + '°';
             }
-            document.getElementById('dbg-moon-now-angle').textContent = (angleForTime(now) * 180 / Math.PI).toFixed(1) + '°';
+            document.getElementById('dbg-moon-now-angle').textContent = (moonAngleForTime(now) * 180 / Math.PI).toFixed(1) + '°';
             document.getElementById('dbg-theme').textContent = themeName || '-';
             document.getElementById('dbg-speed').textContent = currentThemeSpeed.toFixed(2);