'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = 400; // Earth Center X const CENTER_Y = 300; // Earth Center Y const ORBIT_RADIUS = 180; const SUN_X = -100; // Sun is far left const SUN_Y = 300; // Phase Data Configuration const PHASES = [ { id: 0, name: '新月 (朔)', label: '农历初一', angle: 0, type: 'New Moon' }, { id: 1, name: '蛾眉月', label: '农历初三', angle: 45, type: 'Waxing Crescent' }, { id: 2, name: '上弦月', label: '农历初七', angle: 90, type: 'First Quarter' }, { id: 3, name: '满月 (望)', label: '农历十五', angle: 180, type: 'Full Moon' }, { id: 4, name: '亏凸月', label: '农历十八', angle: 225, type: 'Waning Gibbous' }, { id: 5, name: '下弦月', label: '农历二十二', angle: 270, type: 'Last Quarter' }, { id: 6, name: '残月', label: '农历二十七', angle: 315, type: 'Waning Crescent' }, ]; export const LunarPhaseSimulator = () => { const [activePhaseIndex, setActivePhaseIndex] = useState(0); const [currentAngle, setCurrentAngle] = useState(0); const animationRef = useRef(); const lastTimeRef = useRef(0); // Auto-play logic useEffect(() => { const timer = setInterval(() => { setActivePhaseIndex((prev) => (prev + 1) % PHASES.length); }, 4000); // Change phase every 4 seconds return () => clearInterval(timer); }, []); // Smooth animation loop for angle interpolation useEffect(() => { const animate = (time: number) => { if (!lastTimeRef.current) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; const targetAngle = PHASES[activePhaseIndex].angle; setCurrentAngle((prevAngle) => { // Handle wrapping from 315 to 0 smoothly let diff = targetAngle - prevAngle; if (Math.abs(diff) > 180) { if (diff > 0) diff -= 360; else diff += 360; } // Spring-like interpolation const speed = 0.05; const nextAngle = prevAngle + diff * speed; // Normalize return (nextAngle + 360) % 360; }); lastTimeRef.current = time; animationRef.current = requestAnimationFrame(animate); }; animationRef.current = requestAnimationFrame(animate); return () => { if (animationRef.current) cancelAnimationFrame(animationRef.current); }; }, [activePhaseIndex]); // Calculations for Moon Position in Orrery const moonX = CENTER_X + ORBIT_RADIUS * Math.cos((currentAngle + 180) * (Math.PI / 180)); // +180 because 0deg is New Moon (between Earth and Sun) const moonY = CENTER_Y + ORBIT_RADIUS * Math.sin((currentAngle + 180) * (Math.PI / 180)); // Generate Moon Phase Shape (Top Right View) const renderPhaseShape = (angle: number) => { // Convert angle to phase ratio (0 to 1 to 0) // 0 = New Moon, 0.5 = Quarter, 1 = Full const rad = angle * (Math.PI / 180); // Determine the curve of the shadow // We visualize this by drawing a circle and masking it or using path arcs const r = 40; const cx = 850; const cy = 150; // Simple visual approximation using SVG paths // Left side is illuminated when angle > 180 (Waning) // Right side is illuminated when angle < 180 (Waxing) const isWaxing = angle <= 180; const illumination = (1 - Math.cos(rad)) / 2; // 0 to 1 // Path logic is complex, using a mask approach is cleaner for SVG // Mask logic: // Base: Black Circle. // Overlay: White Semi-Circle (Light side). // Overlay: Ellipse that adds or subtracts light. return ( {/* The lit base hemisphere */} {/* The dynamic ellipse part */} 90 && angle < 270)) ? "white" : "black"} /> {/* Dark Side */} {/* Lit Side (Masked) */} {/* Glow effect for lit part */} ); }; return ( ); };