zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix moon renderer to use static SVG elements

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 08:06:11 +02:00
1 parent e5765dd7de
commit effe203cee
1 file changed
+7 -16
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+7 -16
View File
@@ -121,7 +121,10 @@
<circle id="rpg-sun-core" cx="100" cy="100" r="3" fill="#f3ede1"/>
<!-- Moon position (with phase) -->
<g id="rpg-moon"></g>
<g id="rpg-moon">
<circle id="rpg-moon-bg" cx="100" cy="100" r="9" fill="#1c1b1f"/>
<path id="rpg-moon-lit" d="" fill="#e6dfd1"/>
</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"/>
@@ -256,6 +259,7 @@
var rpgSunGlow = document.getElementById('rpg-sun-glow');
var rpgSunCore = document.getElementById('rpg-sun-core');
var rpgMoon = document.getElementById('rpg-moon');
var rpgMoonLit = document.getElementById('rpg-moon-lit');
var sunRiseArrow = document.getElementById('sun-rise-arrow');
var sunSetArrow = document.getElementById('sun-set-arrow');
var moonRiseArrow = document.getElementById('moon-rise-arrow');
@@ -449,30 +453,17 @@
}
function renderRpgMoon(phase) {
rpgMoon.innerHTML = '';
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 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);
rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 1 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
} else {
var lit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
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 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);
rpgMoonLit.setAttribute('d', 'M 100 91 A 9 9 0 0 0 100 109 A ' + rx + ' 9 0 0 ' + sweepFlag + ' 100 91 Z');
}
}