'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // ============================================================================ // SOLAR SYSTEM VIEW (New High Fidelity) // ============================================================================ interface PlanetConfig { name: string; radius: number; // size of the planet distance: number; // distance from sun speed: number; // orbital speed factor color: string; color2: string; // Gradient end ring?: boolean; } const PLANETS: PlanetConfig[] = [ { name: 'Mercury', radius: 5, distance: 60, speed: 1.5, color: '#a1a1a1', color2: '#666' }, { name: 'Venus', radius: 9, distance: 90, speed: 1.1, color: '#e6be8a', color2: '#c79454' }, { name: 'Earth', radius: 9.5, distance: 130, speed: 0.9, color: '#2c82c9', color2: '#155187' }, { name: 'Mars', radius: 7, distance: 170, speed: 0.7, color: '#e27b58', color2: '#a64021' }, { name: 'Jupiter', radius: 22, distance: 230, speed: 0.4, color: '#d4a373', color2: '#8c6441' }, { name: 'Saturn', radius: 18, distance: 300, speed: 0.3, color: '#f4d58d', color2: '#bf9e54', ring: true }, { name: 'Uranus', radius: 12, distance: 360, speed: 0.2, color: '#7de2f2', color2: '#3a9db0' }, { name: 'Neptune', radius: 11, distance: 410, speed: 0.15, color: '#5b7cf7', color2: '#2a429e' } ]; export const SolarSystemView = () => { const [time, setTime] = useState(0); const reqRef = useRef(0); // Center of the universe (view) const CX = VIEW_WIDTH / 2; const CY = VIEW_HEIGHT / 2; // Generate Stars Once const stars = useMemo(() => { return Array.from({ length: 100 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5, opacity: Math.random() * 0.8 + 0.2 })); }, []); useEffect(() => { const animate = (t: number) => { setTime(t * 0.001); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, []); return ( ); };