Mondphase eingebaut

public/sternenhimmel.php

@@ -827,6 +827,70 @@ function computeSunMoon(date) {
   } catch(e) { console.warn('Sun/Moon error:', e); }
 }
 
+function drawMoonPhase(pt, r, moon) {
+  const phaseDeg = ((Number(moon.moon_phase) % 360) + 360) % 360;
+  const phaseRad = phaseDeg * Math.PI / 180;
+  const waxing = phaseDeg < 180;
+  const cosPhase = Math.cos(phaseRad);
+
+  // Dunkle Grundscheibe
+  const darkDisk = createSafeRadialGradient(pt.x, pt.y, 0, pt.x, pt.y, r);
+  if (darkDisk) {
+    darkDisk.addColorStop(0, 'rgba(58, 62, 74, 0.98)');
+    darkDisk.addColorStop(0.75, 'rgba(36, 40, 50, 0.98)');
+    darkDisk.addColorStop(1, 'rgba(18, 22, 30, 0.98)');
+    ctx.fillStyle = darkDisk;
+  } else {
+    ctx.fillStyle = 'rgba(34, 38, 46, 0.98)';
+  }
+  ctx.beginPath();
+  ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Beleuchteten Bereich als Fläche zwischen Terminator und sichtbarem Rand zeichnen
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
+  ctx.clip();
+
+  const moonLight = createSafeRadialGradient(pt.x - r * 0.22, pt.y - r * 0.28, r * 0.2, pt.x, pt.y, r * 1.08);
+  if (moonLight) {
+    moonLight.addColorStop(0, 'rgba(245, 241, 228, 0.98)');
+    moonLight.addColorStop(0.6, 'rgba(214, 207, 188, 0.98)');
+    moonLight.addColorStop(1, 'rgba(158, 152, 138, 0.98)');
+    ctx.fillStyle = moonLight;
+  } else {
+    ctx.fillStyle = 'rgba(214, 207, 188, 0.98)';
+  }
+
+  if (moon.phase_fraction >= 0.999) {
+    ctx.beginPath();
+    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
+    ctx.fill();
+  } else if (moon.phase_fraction > 0.001) {
+    ctx.beginPath();
+    for (let i = 0; i <= 72; i++) {
+      const t = -r + (2 * r * i / 72);
+      const xr = Math.sqrt(Math.max(0, r * r - t * t));
+      const xt = (waxing ? cosPhase : -cosPhase) * xr;
+      const px = pt.x + xt;
+      const py = pt.y + t;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    for (let i = 72; i >= 0; i--) {
+      const t = -r + (2 * r * i / 72);
+      const xr = Math.sqrt(Math.max(0, r * r - t * t));
+      const px = pt.x + (waxing ? xr : -xr);
+      const py = pt.y + t;
+      ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+    ctx.fill();
+  }
+  ctx.restore();
+}
+
 function drawSunMoon(date) {
   computeSunMoon(date);
 
@@ -883,19 +947,12 @@ function drawSunMoon(date) {
         ctx.beginPath(); ctx.arc(pt.x, pt.y, r * 3.5, 0, Math.PI * 2); ctx.fill();
       }
 
-      const moonDisk = createSafeRadialGradient(pt.x, pt.y, 0, pt.x, pt.y, r);
-      if (moonDisk) {
-        moonDisk.addColorStop(0,   M.colorCenter);
-        moonDisk.addColorStop(0.7, M.colorMid);
-        moonDisk.addColorStop(1,   M.colorEdge);
-        ctx.fillStyle = moonDisk;
-      } else {
-        ctx.fillStyle = M.colorMid;
-      }
-      ctx.beginPath(); ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2); ctx.fill();
+      drawMoonPhase(pt, r, moonCache);
 
       ctx.strokeStyle = 'rgba(200,190,160,0.45)';
       ctx.lineWidth = 0.8;
+      ctx.beginPath();
+      ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);
       ctx.stroke();
 
       const pct = Math.round(moonCache.phase_fraction * 100);