Reorder sun zenith between rise/set, add zenith markers to RPG clock

This commit is contained in:
Richard Zink committed 2026-10-07 11:08:34 +02:00
1 parent 5f2bdf781f
commit f08534796b
1 file changed
+41 -9
+41 -9
View File
@@ -276,6 +276,16 @@
<polygon points="0,9 8,0 -9,0"/>
</g>
<!-- Sun zenith marker (diamond shape, small) -->
<g id="sun-zenith-marker" fill="#e0914f">
<polygon points="0,-5 5,0 0,5 -5,0"/>
</g>
<!-- Moon zenith marker (diamond shape, small) -->
<g id="moon-zenith-marker" fill="#b0a89a">
<polygon points="0,-5 5,0 0,5 -5,0"/>
</g>
<!-- Sun position (rendered after arcs/arrows so it's visible) -->
<circle id="rpg-sun-glow" cx="140" cy="140" r="14" fill="#e0914f" opacity="0.4"/>
<circle id="rpg-sun" cx="140" cy="140" r="8" fill="#e0914f"/>
@@ -301,18 +311,18 @@
</div>
<div class="info-content"><span class="info-label">Aufgang</span><span><span class="info-value" id="sunrise-value">--:--</span><span class="info-sub" id="sunrise-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#e0914f" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
</div>
<div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="#e0914f"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="#e0914f" stroke-width="2"/></svg>
</div>
<div class="info-content"><span class="info-label">Zenit Sonne</span><span><span class="info-value" id="sun-zenith-value">--:--</span><span class="info-sub" id="sun-zenith-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="#e0914f" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 12 Z"/></svg>
</div>
<div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
</div>
<div class="info-row">
<div class="info-icon">
<svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#1c1b1f"/></svg>
@@ -540,6 +550,8 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
var sunRiseArrow = document.getElementById('sun-rise-arrow');
var sunSetArrow = document.getElementById('sun-set-arrow');
var moonRiseArrow = document.getElementById('moon-rise-arrow');
var sunZenithMarker = document.getElementById('sun-zenith-marker');
var moonZenithMarker = document.getElementById('moon-zenith-marker');
var moonSetArrow = document.getElementById('moon-set-arrow');
var SUN_ORBIT_RADIUS = 65;
@@ -852,6 +864,11 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
var ssP = pointOnCircle(sunTimes.sunset, SUN_ORBIT_RADIUS);
sunSetArrow.setAttribute('transform', 'translate(' + ssP.x + ', ' + ssP.y + ')');
// Sun zenith marker (next occurrence)
var sunZenithDate = sunTimes.solarNoon > now ? sunTimes.solarNoon : SunCalc.getTimes(new Date(now.getTime() + 86400000), PASSAU_LAT, PASSAU_LON).solarNoon;
var szP = pointOnCircle(sunZenithDate, SUN_ORBIT_RADIUS);
sunZenithMarker.setAttribute('transform', 'translate(' + szP.x + ', ' + szP.y + ')');
// Moon rise/set arrows
if (moonTimes.rise) {
var mrP = pointOnCircle(moonTimes.rise, MOON_ORBIT_RADIUS);
@@ -862,10 +879,19 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
}
if (moonTimes.set) {
var msP = pointOnCircle(moonTimes.set, MOON_ORBIT_RADIUS);
moonSetArrow.setAttribute('transform', 'translate(' + msP.x + ', ' + msP.y + ')');
moonSetArrow.setAttribute('opacity', '1');
moonsetArrow.setAttribute('transform', 'translate(' + msP.x + ', ' + msP.y + ')');
moonsetArrow.setAttribute('opacity', '1');
} else {
moonSetArrow.setAttribute('opacity', '0');
moonsetArrow.setAttribute('opacity', '0');
}
// Moon zenith marker
if (window._moonZenithCache && window._moonZenithCache.zenith) {
var mzP = pointOnCircle(window._moonZenithCache.zenith, MOON_ORBIT_RADIUS);
moonZenithMarker.setAttribute('transform', 'translate(' + mzP.x + ', ' + mzP.y + ')');
moonZenithMarker.setAttribute('opacity', '1');
} else {
moonZenithMarker.setAttribute('opacity', '0');
}
// Moon phase
@@ -1280,6 +1306,12 @@ var weatherThemes = {
animate();
tick();
// Initial moon zenith calculation
window._moonZenithCache = {
time: Date.now(),
zenith: findMoonZenith(new Date())
};
fetchWeather();
setInterval(fetchWeather, 15 * 60 * 1000);
tick();