Keep sun and moon visible on orbit when below horizon, just dimmed

index.html

@@ -22,8 +22,8 @@
             min-width: 220px;
         }
         #analog-clock {
-            width: 180px;
+            width: 200px;
-            height: 180px;
+            height: 200px;
             margin: 0 auto 10px auto;
             display: block;
         }
@@ -71,48 +71,61 @@
             font-size: 11px;
             margin-left: 4px;
         }
-        .moon-icon-container {
-            width: 18px;
-            height: 18px;
-            position: relative;
-        }
     </style>
 </head>
 <body>
     <div id="vanta"></div>
     <div id="info-panel">
         <svg id="analog-clock" viewBox="0 0 200 200">
+            <!-- Clock face -->
             <circle cx="100" cy="100" r="95" fill="rgba(28,27,31,0.3)" stroke="#e6dfd1" stroke-width="2"/>
 
-            <!-- RPG day/night arc background -->
-            <path id="rpg-arc-bg" d="" fill="none" stroke="#3a383d" stroke-width="3" opacity="0.6"/>
-
-            <!-- RPG moon position (rendered first, below sun) -->
-            <circle id="rpg-moon" cx="100" cy="100" r="9" fill="#b0a89a"/>
-
-            <!-- RPG sun position (rendered after moon, so it's visible on top) -->
-            <circle id="rpg-sun-glow" cx="100" cy="100" r="14" fill="#e0914f" opacity="0.3"/>
-            <circle id="rpg-sun" cx="100" cy="100" r="9" fill="#e0914f"/>
-            <circle id="rpg-sun-core" cx="100" cy="100" r="4" fill="#f3ede1"/>
-
             <!-- Hour marks -->
             <g id="hour-marks"></g>
 
-            <!-- Sunrise/sunset markers (inside, on inner orbit) -->
+            <!-- Sun orbit (radius 55) -->
-            <g id="sun-marker" fill="#e0914f">
+            <circle cx="100" cy="100" r="55" stroke="#3a383d" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
-                <rect id="sunrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
+
-                <rect id="sunset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
+            <!-- Moon orbit (radius 75) -->
+            <circle cx="100" cy="100" r="75" stroke="#3a383d" stroke-width="1" fill="none" stroke-dasharray="2,3" opacity="0.6"/>
+
+            <!-- Sun arc (from sunrise to sunset) -->
+            <path id="sun-arc" d="" stroke="#e0914f" stroke-width="2.5" fill="none"/>
+
+            <!-- Moon arc (from moonrise to moonset) -->
+            <path id="moon-arc" d="" stroke="#b0a89a" stroke-width="2.5" fill="none"/>
+
+            <!-- Sun rise arrow (pointing in / up at sunrise) -->
+            <g id="sun-rise-arrow" fill="#e0914f">
+                <polygon points="0,-7 6,3 -6,3"/>
             </g>
 
-            <!-- Moonrise/moonset markers (inside, on inner orbit) -->
+            <!-- Sun set arrow (pointing out / down at sunset) -->
-            <g id="moon-marker" fill="#b0a89a">
+            <g id="sun-set-arrow" fill="#e0914f">
-                <rect id="moonrise-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
+                <polygon points="0,7 6,-3 -6,-3"/>
-                <rect id="moonset-marker" x="-3" y="-3" width="6" height="6" transform="translate(100, 100)"/>
             </g>
 
-            <!-- Clock hands -->
+            <!-- Moon rise arrow -->
-            <line id="hour-hand" x1="100" y1="100" x2="100" y2="35" stroke="#e6dfd1" stroke-width="4" stroke-linecap="round"/>
+            <g id="moon-rise-arrow" fill="#b0a89a">
-            <line id="minute-hand" x1="100" y1="100" x2="100" y2="20" stroke="#e6dfd1" stroke-width="3" stroke-linecap="round"/>
+                <polygon points="0,-7 6,3 -6,3"/>
+            </g>
+
+            <!-- Moon set arrow -->
+            <g id="moon-set-arrow" fill="#b0a89a">
+                <polygon points="0,7 6,-3 -6,-3"/>
+            </g>
+
+            <!-- Sun position (rendered after arcs/arrows so it's visible) -->
+            <circle id="rpg-sun-glow" cx="100" cy="100" r="12" fill="#e0914f" opacity="0.4"/>
+            <circle id="rpg-sun" cx="100" cy="100" r="7" fill="#e0914f"/>
+            <circle id="rpg-sun-core" cx="100" cy="100" r="3" fill="#f3ede1"/>
+
+            <!-- Moon position (with phase) -->
+            <g id="rpg-moon"></g>
+
+            <!-- Clock hands (on top of everything) -->
+            <line id="hour-hand" x1="100" y1="100" x2="100" y2="35" stroke="#e6dfd1" stroke-width="4" stroke-linecap="round" opacity="0.7"/>
+            <line id="minute-hand" x1="100" y1="100" x2="100" y2="20" stroke="#e6dfd1" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
             <line id="second-hand" x1="100" y1="100" x2="100" y2="14" stroke="#e0914f" stroke-width="1.5" stroke-linecap="round"/>
             <circle cx="100" cy="100" r="4" fill="#e0914f"/>
         </svg>
@@ -237,15 +250,19 @@
         var minuteHand = document.getElementById('minute-hand');
         var secondHand = document.getElementById('second-hand');
         var hourMarks = document.getElementById('hour-marks');
-        var rpgArcBg = document.getElementById('rpg-arc-bg');
+        var rpgSunArc = document.getElementById('sun-arc');
+        var rpgMoonArc = document.getElementById('moon-arc');
         var rpgSun = document.getElementById('rpg-sun');
         var rpgSunGlow = document.getElementById('rpg-sun-glow');
         var rpgSunCore = document.getElementById('rpg-sun-core');
         var rpgMoon = document.getElementById('rpg-moon');
-        var sunriseMarker = document.getElementById('sunrise-marker');
+        var sunRiseArrow = document.getElementById('sun-rise-arrow');
-        var sunsetMarker = document.getElementById('sunset-marker');
+        var sunSetArrow = document.getElementById('sun-set-arrow');
-        var moonriseMarker = document.getElementById('moonrise-marker');
+        var moonRiseArrow = document.getElementById('moon-rise-arrow');
-        var moonsetMarker = document.getElementById('moonset-marker');
+        var moonSetArrow = document.getElementById('moon-set-arrow');
+
+        var SUN_ORBIT_RADIUS = 55;
+        var MOON_ORBIT_RADIUS = 75;
 
         // Generate hour marks
         for (var i = 0; i < 12; i++) {
@@ -320,7 +337,30 @@
             return 'Abnehm. Sichel';
         }
 
-        var rpgMoonPhaseGroup = null;
+        function angleForTime(date) {
+            var hours = date.getHours() + date.getMinutes() / 60;
+            return ((hours / 24) * 360 - 90) * Math.PI / 180;
+        }
+
+        function pointOnCircle(date, radius) {
+            var angle = angleForTime(date);
+            return {
+                x: 100 + Math.cos(angle) * radius,
+                y: 100 + Math.sin(angle) * radius
+            };
+        }
+
+        function arcBetween(startDate, endDate, radius) {
+            var sp = pointOnCircle(startDate, radius);
+            var ep = pointOnCircle(endDate, radius);
+            var startA = angleForTime(startDate) * 180 / Math.PI;
+            var endA = angleForTime(endDate) * 180 / Math.PI;
+            var diff = endA - startA;
+            if (diff < 0) diff += 360;
+            // Use shorter arc (largeArc=0) unless the difference exceeds 180
+            var largeArc = diff > 180 ? 1 : 0;
+            return 'M ' + sp.x + ' ' + sp.y + ' A ' + radius + ' ' + radius + ' 0 ' + largeArc + ' 1 ' + ep.x + ' ' + ep.y;
+        }
 
         function renderMoonPhaseIcon(phase) {
             var icon = document.getElementById('moon-phase-icon');
@@ -352,17 +392,19 @@
 
         function renderRpgMoon(phase) {
             rpgMoon.innerHTML = '';
-            var r = 6;
+            var r = 9;
+            // Background
             var bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
             bg.setAttribute('cx', '100'); bg.setAttribute('cy', '100'); bg.setAttribute('r', r);
             bg.setAttribute('fill', '#1c1b1f');
             rpgMoon.appendChild(bg);
+            // Illuminated part
             if (phase < 0.5) {
                 var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                 var phaseAngle = phase * 360;
                 var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
                 var sweepFlag = phase < 0.25 ? 0 : 1;
-                lit.setAttribute('d', 'M 100 94 A 6 6 0 0 1 100 106 A ' + rx + ' 6 0 0 ' + sweepFlag + ' 100 94 Z');
+                lit.setAttribute('d', 'M 100 91 A 9 9 0 0 1 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
                 lit.setAttribute('fill', '#e6dfd1');
                 rpgMoon.appendChild(lit);
             } else {
@@ -370,7 +412,7 @@
                 var phaseAngle = (1 - phase) * 360;
                 var rx = r * Math.abs(Math.cos(phaseAngle * Math.PI / 180));
                 var sweepFlag = phase > 0.75 ? 0 : 1;
-                lit.setAttribute('d', 'M 100 94 A 6 6 0 0 0 100 106 A ' + rx + ' 6 0 0 ' + sweepFlag + ' 100 94 Z');
+                lit.setAttribute('d', 'M 100 91 A 9 9 0 0 0 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
                 lit.setAttribute('fill', '#e6dfd1');
                 rpgMoon.appendChild(lit);
             }
@@ -394,88 +436,6 @@
             minuteHand.setAttribute('transform', 'rotate(' + minuteAngle + ' 100 100)');
             secondHand.setAttribute('transform', 'rotate(' + secondAngle + ' 100 100)');
 
-            var sunTimes = SunCalc.getTimes(now, PASSAU_LAT, PASSAU_LON);
-            var sunriseNext = getNextEvent(sunTimes.sunrise, now, PASSAU_LAT, PASSAU_LON, 'sunrise');
-            var sunsetNext = getNextEvent(sunTimes.sunset, now, PASSAU_LAT, PASSAU_LON, 'sunset');
-
-            function timeToAngle(date) {
-                var hours = date.getHours() + date.getMinutes() / 60;
-                return ((hours / 24) * 360 - 90) * Math.PI / 180;
-            }
-
-            function timeToPoint(date, r) {
-                var angle = timeToAngle(date);
-                return { x: 100 + Math.cos(angle) * r, y: 100 + Math.sin(angle) * r };
-            }
-
-            var sunOrbitRadius = 62;
-            var markerRadius = 48;
-
-            var sr = sunriseNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6, 0, 0);
-            var ss = sunsetNext.date || new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0);
-            var srPoint = timeToPoint(sr, sunOrbitRadius);
-            var ssPoint = timeToPoint(ss, sunOrbitRadius);
-            rpgArcBg.setAttribute('d', 'M ' + srPoint.x + ' ' + srPoint.y + ' A ' + sunOrbitRadius + ' ' + sunOrbitRadius + ' 0 0 1 ' + ssPoint.x + ' ' + ssPoint.y);
-
-            if (now >= sunTimes.sunrise && now <= sunTimes.sunset) {
-                var sunP = timeToPoint(now, sunOrbitRadius);
-                rpgSun.setAttribute('cx', sunP.x);
-                rpgSun.setAttribute('cy', sunP.y);
-                rpgSun.setAttribute('opacity', '1');
-                rpgSunGlow.setAttribute('cx', sunP.x);
-                rpgSunGlow.setAttribute('cy', sunP.y);
-                rpgSunGlow.setAttribute('opacity', '0.4');
-                rpgSunCore.setAttribute('cx', sunP.x);
-                rpgSunCore.setAttribute('cy', sunP.y);
-                rpgSunCore.setAttribute('opacity', '1');
-            } else {
-                var sunP = timeToPoint(now, sunOrbitRadius);
-                rpgSun.setAttribute('cx', sunP.x);
-                rpgSun.setAttribute('cy', sunP.y);
-                rpgSun.setAttribute('opacity', '0.4');
-                rpgSunGlow.setAttribute('cx', sunP.x);
-                rpgSunGlow.setAttribute('cy', sunP.y);
-                rpgSunGlow.setAttribute('opacity', '0.15');
-                rpgSunCore.setAttribute('cx', sunP.x);
-                rpgSunCore.setAttribute('cy', sunP.y);
-                rpgSunCore.setAttribute('opacity', '0.4');
-            }
-
-            var moonTimes = SunCalc.getMoonTimes(now, PASSAU_LAT, PASSAU_LON);
-            var moonVisible = false;
-            if (moonTimes.rise && moonTimes.set) {
-                if (moonTimes.rise < moonTimes.set) {
-                    moonVisible = (now >= moonTimes.rise && now <= moonTimes.set);
-                } else {
-                    moonVisible = (now >= moonTimes.rise || now <= moonTimes.set);
-                }
-            }
-            var moonP = timeToPoint(now, sunOrbitRadius);
-            rpgMoon.setAttribute('cx', moonP.x);
-            rpgMoon.setAttribute('cy', moonP.y);
-            rpgMoon.setAttribute('opacity', moonVisible ? '1' : '0.25');
-
-            var srM = timeToPoint(sr, markerRadius);
-            sunriseMarker.setAttribute('transform', 'translate(' + srM.x + ', ' + srM.y + ')');
-            var ssM = timeToPoint(ss, markerRadius);
-            sunsetMarker.setAttribute('transform', 'translate(' + ssM.x + ', ' + ssM.y + ')');
-
-            if (moonTimes.rise) {
-                var mrM = timeToPoint(moonTimes.rise, markerRadius);
-                moonriseMarker.setAttribute('transform', 'translate(' + mrM.x + ', ' + mrM.y + ')');
-                moonriseMarker.setAttribute('opacity', '1');
-            } else {
-                moonriseMarker.setAttribute('opacity', '0');
-            }
-
-            if (moonTimes.set) {
-                var msM = timeToPoint(moonTimes.set, markerRadius);
-                moonsetMarker.setAttribute('transform', 'translate(' + msM.x + ', ' + msM.y + ')');
-                moonsetMarker.setAttribute('opacity', '1');
-            } else {
-                moonsetMarker.setAttribute('opacity', '0');
-            }
-
             // Sun times
             var sunTimes = SunCalc.getTimes(now, PASSAU_LAT, PASSAU_LON);
             var sunriseNext = getNextEvent(sunTimes.sunrise, now, PASSAU_LAT, PASSAU_LON, 'sunrise');
@@ -496,6 +456,66 @@
             document.getElementById('moonset-value').textContent = formatTimeHM(moonsetNext.date);
             document.getElementById('moonset-when').textContent = moonsetNext.label ? '· ' + moonsetNext.label : '';
 
+            // Sun arc
+            if (sunTimes.sunrise && sunTimes.sunset) {
+                rpgSunArc.setAttribute('d', arcBetween(sunTimes.sunrise, sunTimes.sunset, SUN_ORBIT_RADIUS));
+            }
+
+            // Moon arc
+            if (moonTimes.rise && moonTimes.set) {
+                rpgMoonArc.setAttribute('d', arcBetween(moonTimes.rise, moonTimes.set, MOON_ORBIT_RADIUS));
+            }
+
+            // Sun position
+            var sunP = pointOnCircle(now, SUN_ORBIT_RADIUS);
+            rpgSun.setAttribute('cx', sunP.x);
+            rpgSun.setAttribute('cy', sunP.y);
+            rpgSunGlow.setAttribute('cx', sunP.x);
+            rpgSunGlow.setAttribute('cy', sunP.y);
+            rpgSunCore.setAttribute('cx', sunP.x);
+            rpgSunCore.setAttribute('cy', sunP.y);
+
+            var isDaytime = now >= sunTimes.sunrise && now <= sunTimes.sunset;
+            rpgSun.setAttribute('opacity', isDaytime ? '1' : '0.35');
+            rpgSunGlow.setAttribute('opacity', isDaytime ? '0.4' : '0.15');
+            rpgSunCore.setAttribute('opacity', isDaytime ? '1' : '0.35');
+
+            // Moon position
+            var moonP = pointOnCircle(now, MOON_ORBIT_RADIUS);
+            rpgMoon.setAttribute('transform', 'translate(' + moonP.x + ', ' + moonP.y + ')');
+
+            var moonVisible = false;
+            if (moonTimes.rise && moonTimes.set) {
+                if (moonTimes.rise < moonTimes.set) {
+                    moonVisible = (now >= moonTimes.rise && now <= moonTimes.set);
+                } else {
+                    moonVisible = (now >= moonTimes.rise || now <= moonTimes.set);
+                }
+            }
+            rpgMoon.setAttribute('opacity', moonVisible ? '1' : '0.35');
+
+            // Sun rise/set arrows
+            var srP = pointOnCircle(sunTimes.sunrise, SUN_ORBIT_RADIUS);
+            sunRiseArrow.setAttribute('transform', 'translate(' + srP.x + ', ' + srP.y + ')');
+            var ssP = pointOnCircle(sunTimes.sunset, SUN_ORBIT_RADIUS);
+            sunSetArrow.setAttribute('transform', 'translate(' + ssP.x + ', ' + ssP.y + ')');
+
+            // Moon rise/set arrows
+            if (moonTimes.rise) {
+                var mrP = pointOnCircle(moonTimes.rise, MOON_ORBIT_RADIUS);
+                moonRiseArrow.setAttribute('transform', 'translate(' + mrP.x + ', ' + mrP.y + ')');
+                moonRiseArrow.setAttribute('opacity', '1');
+            } else {
+                moonRiseArrow.setAttribute('opacity', '0');
+            }
+            if (moonTimes.set) {
+                var msP = pointOnCircle(moonTimes.set, MOON_ORBIT_RADIUS);
+                moonSetArrow.setAttribute('transform', 'translate(' + msP.x + ', ' + msP.y + ')');
+                moonSetArrow.setAttribute('opacity', '1');
+            } else {
+                moonSetArrow.setAttribute('opacity', '0');
+            }
+
             // Moon phase
             var moonIllum = SunCalc.getMoonIllumination(now);
             document.getElementById('moon-phase-text').textContent =