var __AppModules = (() => { var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // virtual:App.jsx var App_exports = {}; __export(App_exports, { default: () => App_default }); var PLANETS = [ { name: "Mercury", color: "#b5b5b5", radius: 3.2, au: 0.387, period: 0.241, eccentricity: 0.206, facts: { diameter: "4,879 km", distance: "0.387 AU (57.9M km)", orbital_period: "88 days" }, moons: [] }, { name: "Venus", color: "#e8cda0", radius: 5.5, au: 0.723, period: 0.615, eccentricity: 7e-3, facts: { diameter: "12,104 km", distance: "0.723 AU (108.2M km)", orbital_period: "225 days" }, moons: [] }, { name: "Earth", color: "#4fa3e0", radius: 6, au: 1, period: 1, eccentricity: 0.017, facts: { diameter: "12,742 km", distance: "1.0 AU (149.6M km)", orbital_period: "365.25 days" }, moons: [ { name: "Moon", color: "#d4d4d4", radius: 2, orbitR: 18, period: 0.0748, retrograde: false, facts: { diameter: "3,474 km", distance: "384,400 km from Earth", orbital_period: "27.3 days" } } ] }, { name: "Mars", color: "#c1440e", radius: 4.2, au: 1.524, period: 1.881, eccentricity: 0.093, facts: { diameter: "6,779 km", distance: "1.524 AU (227.9M km)", orbital_period: "687 days" }, moons: [ { name: "Phobos", color: "#a0856a", radius: 1.4, orbitR: 11, period: 876e-5, retrograde: false, facts: { diameter: "22.4 km", distance: "9,376 km from Mars", orbital_period: "7.6 hours" } }, { name: "Deimos", color: "#b09078", radius: 1.2, orbitR: 16, period: 0.0186, retrograde: false, facts: { diameter: "12.4 km", distance: "23,463 km from Mars", orbital_period: "30.3 hours" } } ] }, { name: "Jupiter", color: "#c88b3a", radius: 18, au: 5.203, period: 11.86, eccentricity: 0.049, facts: { diameter: "139,820 km", distance: "5.2 AU (778.5M km)", orbital_period: "11.86 years" }, moons: [ { name: "Io", color: "#f0d060", radius: 2.2, orbitR: 28, period: 484e-5, retrograde: false, facts: { diameter: "3,643 km", distance: "421,700 km from Jupiter", orbital_period: "1.77 days" } }, { name: "Europa", color: "#d0c0b0", radius: 2, orbitR: 36, period: 971e-5, retrograde: false, facts: { diameter: "3,122 km", distance: "671,034 km from Jupiter", orbital_period: "3.55 days" } }, { name: "Ganymede", color: "#8090a0", radius: 2.8, orbitR: 46, period: 0.0196, retrograde: false, facts: { diameter: "5,268 km", distance: "1,070,400 km from Jupiter", orbital_period: "7.15 days" } }, { name: "Callisto", color: "#606878", radius: 2.5, orbitR: 58, period: 0.0456, retrograde: false, facts: { diameter: "4,821 km", distance: "1,882,700 km from Jupiter", orbital_period: "16.7 days" } } ] }, { name: "Saturn", color: "#e4d191", radius: 15, au: 9.537, period: 29.46, eccentricity: 0.057, hasRings: true, facts: { diameter: "116,460 km", distance: "9.54 AU (1.43B km)", orbital_period: "29.46 years" }, moons: [ { name: "Enceladus", color: "#eeeeff", radius: 1.5, orbitR: 28, period: 499e-5, retrograde: false, facts: { diameter: "504 km", distance: "237,948 km from Saturn", orbital_period: "1.37 days" } }, { name: "Titan", color: "#d4900a", radius: 3, orbitR: 42, period: 0.0437, retrograde: false, facts: { diameter: "5,150 km", distance: "1,221,870 km from Saturn", orbital_period: "15.95 days" } } ] }, { name: "Uranus", color: "#7de8e8", radius: 11, au: 19.191, period: 84.01, eccentricity: 0.046, facts: { diameter: "50,724 km", distance: "19.2 AU (2.87B km)", orbital_period: "84.01 years" }, moons: [ { name: "Titania", color: "#aacccc", radius: 1.8, orbitR: 24, period: 0.0238, retrograde: false, facts: { diameter: "1,578 km", distance: "435,910 km from Uranus", orbital_period: "8.71 days" } }, { name: "Oberon", color: "#9999aa", radius: 1.7, orbitR: 32, period: 0.0369, retrograde: false, facts: { diameter: "1,523 km", distance: "583,520 km from Uranus", orbital_period: "13.46 days" } } ] }, { name: "Neptune", color: "#3f54ba", radius: 10, au: 30.069, period: 164.8, eccentricity: 0.01, facts: { diameter: "49,244 km", distance: "30.1 AU (4.50B km)", orbital_period: "164.8 years" }, moons: [ { name: "Triton", color: "#aaccdd", radius: 2, orbitR: 26, period: 0.0163, retrograde: true, facts: { diameter: "2,707 km", distance: "354,759 km from Neptune", orbital_period: "5.88 days (retrograde)" } } ] } ]; var SUN_FACTS = { name: "The Sun", facts: { diameter: "1,391,016 km", distance: "Center of Solar System", orbital_period: "~225M years (galactic orbit)" } }; function auToDisplay(au, maxR) { const MAX_AU_POW = Math.pow(30.069, 0.42); return Math.pow(au, 0.42) / MAX_AU_POW * maxR; } var TILT = 0.42; function project(cx, cy, wx, wy) { return { x: cx + wx, y: cy + wy * TILT }; } function angularSpeed(period) { return 1 / Math.pow(period, 0.15); } function generateStars(count) { const stars = []; for (let i = 0; i < count; i++) { stars.push({ x: Math.random(), y: Math.random(), r: Math.random() * 1.4 + 0.3, alpha: Math.random() * 0.7 + 0.3, twinkle: Math.random() * Math.PI * 2 }); } return stars; } var STARS = generateStars(280); function midiToFreq(midi) { return 440 * Math.pow(2, (midi - 69) / 12); } var NOTE = { C1: 24, C3: 48, C4: 60, E4: 64, G4: 67, E3: 52, G3: 55, D4: 62, A2: 45, A4: 69, E2: 40, B3: 59 }; var CHORDS = [ { start: 0, notes: [NOTE.C3, NOTE.C4, NOTE.E4, NOTE.G4] }, { start: 2, notes: [NOTE.E3, NOTE.G3, NOTE.D4] }, { start: 4, notes: [NOTE.C3, NOTE.C4, NOTE.E4, NOTE.G4] }, { start: 6, notes: [NOTE.A2, NOTE.C4, NOTE.E4, NOTE.A4] }, { start: 8, notes: [NOTE.E2, NOTE.B3, NOTE.D4] } ]; var AudioEngine = class { constructor() { this.ctx = null; this.masterGain = null; this.reverbNode = null; this.droneOsc = null; this.droneGain = null; this.lfoOsc = null; this.lfoGain = null; this.chordTimeout = null; this.running = false; this.muted = false; this.volume = 0.33; this.currentChords = []; this.loopStartTime = 0; } init() { if (this.ctx) return; this.ctx = new (window.AudioContext || window.webkitAudioContext)(); this.masterGain = this.ctx.createGain(); this.masterGain.gain.value = 0; this.masterGain.connect(this.ctx.destination); this.reverbNode = this._makeReverb(3.5); this.reverbNode.connect(this.masterGain); this.dryGain = this.ctx.createGain(); this.dryGain.gain.value = 0.35; this.dryGain.connect(this.masterGain); this.lfoOsc = this.ctx.createOscillator(); this.lfoOsc.frequency.value = 0.18; this.lfoOsc.type = "sine"; this.lfoGain = this.ctx.createGain(); this.lfoGain.gain.value = 0.12; this.lfoOsc.connect(this.lfoGain); this.lfoOsc.start(); this.droneOsc = this.ctx.createOscillator(); this.droneOsc.type = "sine"; this.droneOsc.frequency.value = midiToFreq(NOTE.C1); this.droneGain = this.ctx.createGain(); this.droneGain.gain.value = 0; this.droneOsc.connect(this.droneGain); this.droneGain.connect(this.masterGain); this.droneOsc.start(); } _makeReverb(duration) { const convolver = this.ctx.createConvolver(); const rate = this.ctx.sampleRate; const length = rate * duration; const buffer = this.ctx.createBuffer(2, length, rate); for (let ch = 0; ch < 2; ch++) { const data = buffer.getChannelData(ch); for (let i = 0; i < length; i++) { data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2.5); } } convolver.buffer = buffer; const reverbGain = this.ctx.createGain(); reverbGain.gain.value = 0.55; convolver.connect(reverbGain); reverbGain.connect(this.masterGain); return convolver; } _playChord(notes, gain = 0.09) { const t = this.ctx.currentTime; const attack = 0.35; const release = 0.6; const hold = 1.9; notes.forEach((midi) => { const freq = midiToFreq(midi); const sine = this.ctx.createOscillator(); sine.type = "sine"; sine.frequency.value = freq; const tri = this.ctx.createOscillator(); tri.type = "triangle"; tri.frequency.value = freq * 2; const env = this.ctx.createGain(); env.gain.setValueAtTime(0, t); env.gain.linearRampToValueAtTime(gain, t + attack); env.gain.setValueAtTime(gain, t + hold); env.gain.linearRampToValueAtTime(0, t + hold + release); this.lfoGain.connect(env.gain); sine.connect(env); tri.connect(env); env.connect(this.dryGain); env.connect(this.reverbNode); const stop = t + hold + release + 0.1; sine.start(t); sine.stop(stop); tri.start(t); tri.stop(stop); }); } _scheduleLoop() { if (!this.running) return; const now = this.ctx.currentTime; this.loopStartTime = now; CHORDS.forEach((chord) => { const when = now + chord.start; const delay = chord.start * 1e3; const id = setTimeout(() => { if (this.running) this._playChord(chord.notes); }, delay); this.currentChords.push(id); }); this.loopTimeout = setTimeout(() => { if (this.running) this._scheduleLoop(); }, 1e4); } start() { this.init(); if (this.running) return; this.running = true; const t = this.ctx.currentTime; this.masterGain.gain.cancelScheduledValues(t); this.masterGain.gain.setValueAtTime(this.masterGain.gain.value, t); const gStart = this._gain(this.volume); this.masterGain.gain.linearRampToValueAtTime(this.muted ? 0 : gStart, t + 0.8); this.droneGain.gain.cancelScheduledValues(t); this.droneGain.gain.setValueAtTime(this.droneGain.gain.value, t); this.droneGain.gain.linearRampToValueAtTime(this.muted ? 0 : 0.07 * gStart, t + 1.2); this._scheduleLoop(); } pause() { this.running = false; clearTimeout(this.loopTimeout); this.currentChords.forEach((id) => clearTimeout(id)); this.currentChords = []; if (!this.ctx) return; const t = this.ctx.currentTime; this.masterGain.gain.cancelScheduledValues(t); this.masterGain.gain.setValueAtTime(this.masterGain.gain.value, t); this.masterGain.gain.linearRampToValueAtTime(0, t + 0.6); this.droneGain.gain.cancelScheduledValues(t); this.droneGain.gain.setValueAtTime(this.droneGain.gain.value, t); this.droneGain.gain.linearRampToValueAtTime(0, t + 0.6); } setMuted(muted) { this.muted = muted; if (!this.ctx || !this.running) return; const t = this.ctx.currentTime; this.masterGain.gain.cancelScheduledValues(t); this.masterGain.gain.setValueAtTime(this.masterGain.gain.value, t); const gMute = this._gain(this.volume); this.masterGain.gain.linearRampToValueAtTime(muted ? 0 : gMute, t + 0.3); this.droneGain.gain.cancelScheduledValues(t); this.droneGain.gain.setValueAtTime(this.droneGain.gain.value, t); this.droneGain.gain.linearRampToValueAtTime(muted ? 0 : 0.07 * gMute, t + 0.3); } _gain(vol) { return vol * vol; } setVolume(vol) { this.volume = vol; if (!this.ctx || !this.running || this.muted) return; const g = this._gain(vol); const t = this.ctx.currentTime; this.masterGain.gain.cancelScheduledValues(t); this.masterGain.gain.setValueAtTime(this.masterGain.gain.value, t); this.masterGain.gain.linearRampToValueAtTime(g, t + 0.1); this.droneGain.gain.cancelScheduledValues(t); this.droneGain.gain.setValueAtTime(this.droneGain.gain.value, t); this.droneGain.gain.linearRampToValueAtTime(0.07 * g, t + 0.1); } }; var audioEngine = new AudioEngine(); function drawGlowCircle(ctx, x, y, r, color, glowColor, glowSize) { const grad = ctx.createRadialGradient(x, y, 0, x, y, r + glowSize); grad.addColorStop(0, color); grad.addColorStop(r / (r + glowSize), color); grad.addColorStop(1, "transparent"); ctx.beginPath(); ctx.arc(x, y, r + glowSize, 0, Math.PI * 2); ctx.fillStyle = grad; ctx.fill(); ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); } function drawSun(ctx, cx, cy, time) { const SUN_R = 16; const NUM_SPIKES = 24; for (let i = 0; i < NUM_SPIKES; i++) { const baseAngle = i / NUM_SPIKES * Math.PI * 2; const flicker1 = Math.sin(time * 2.3 + i * 1.7) * 0.5 + 0.5; const flicker2 = Math.sin(time * 3.1 + i * 2.9) * 0.5 + 0.5; const flicker3 = Math.sin(time * 1.7 + i * 0.8) * 0.5 + 0.5; const combined = flicker1 * 0.5 + flicker2 * 0.3 + flicker3 * 0.2; const spikeLen = SUN_R * (0.2 + combined * 0.7); const spikeWidth = SUN_R * (0.1 + flicker2 * 0.1); const angle = baseAngle + Math.sin(time * 1.1 + i * 3.3) * 0.12; const tipDist = SUN_R + spikeLen; const tipX = cx + Math.cos(angle) * tipDist; const tipY = cy + Math.sin(angle) * tipDist; const perp = angle + Math.PI / 2; const bx1 = cx + Math.cos(angle) * SUN_R + Math.cos(perp) * spikeWidth; const by1 = cy + Math.sin(angle) * SUN_R + Math.sin(perp) * spikeWidth; const bx2 = cx + Math.cos(angle) * SUN_R - Math.cos(perp) * spikeWidth; const by2 = cy + Math.sin(angle) * SUN_R - Math.sin(perp) * spikeWidth; const grad = ctx.createLinearGradient( cx + Math.cos(angle) * SUN_R, cy + Math.sin(angle) * SUN_R, tipX, tipY ); const alpha = 0.45 + combined * 0.25; grad.addColorStop(0, `rgba(255,180,40,${alpha})`); grad.addColorStop(0.4, `rgba(255,100,20,${alpha * 0.6})`); grad.addColorStop(0.75, `rgba(255,60,0,${alpha * 0.2})`); grad.addColorStop(1, "rgba(255,20,0,0)"); ctx.beginPath(); ctx.moveTo(bx1, by1); ctx.lineTo(tipX, tipY); ctx.lineTo(bx2, by2); ctx.closePath(); ctx.fillStyle = grad; ctx.fill(); } [80, 55, 38, 24].forEach((size, i) => { const alpha = [0.04, 0.08, 0.15, 0.25][i]; const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, size); grad.addColorStop(0, `rgba(255,240,100,${alpha})`); grad.addColorStop(1, "transparent"); ctx.beginPath(); ctx.arc(cx, cy, size, 0, Math.PI * 2); ctx.fillStyle = grad; ctx.fill(); }); const coreGrad = ctx.createRadialGradient(cx - 3, cy - 3, 1, cx, cy, SUN_R); coreGrad.addColorStop(0, "#fffde0"); coreGrad.addColorStop(0.3, "#ffe040"); coreGrad.addColorStop(0.7, "#ffaa00"); coreGrad.addColorStop(1, "#ff7700"); ctx.beginPath(); ctx.arc(cx, cy, SUN_R, 0, Math.PI * 2); ctx.fillStyle = coreGrad; ctx.fill(); } function drawSaturnRings(ctx, x, y, r) { ctx.save(); ctx.translate(x, y); ctx.scale(1, TILT); const rings = [ { inner: r + 4, outer: r + 8, color: "rgba(210,195,140,0.60)" }, { inner: r + 9, outer: r + 15, color: "rgba(200,185,130,0.50)" }, { inner: r + 16, outer: r + 20, color: "rgba(180,165,110,0.32)" } ]; rings.forEach((ring) => { const grad = ctx.createRadialGradient(0, 0, ring.inner, 0, 0, ring.outer); grad.addColorStop(0, "transparent"); grad.addColorStop(0.15, ring.color); grad.addColorStop(0.85, ring.color); grad.addColorStop(1, "transparent"); ctx.beginPath(); ctx.arc(0, 0, ring.outer, 0, Math.PI * 2); ctx.arc(0, 0, ring.inner, 0, Math.PI * 2, true); ctx.fillStyle = grad; ctx.fill("evenodd"); }); ctx.restore(); } function drawOrbitPath(ctx, cx, cy, rx) { ctx.beginPath(); ctx.ellipse(cx, cy, rx, rx * TILT, 0, 0, Math.PI * 2); ctx.strokeStyle = "rgba(255,255,255,0.09)"; ctx.lineWidth = 0.7; ctx.stroke(); } function App() { const canvasRef = React.useRef(null); const [playing, setPlaying] = React.useState(false); const [muted, setMuted] = React.useState(false); const [volume, setVolume] = React.useState(0.33); const [speed, setSpeed] = React.useState(1); const [hovered, setHovered] = React.useState(null); const hideTimerRef = React.useRef(null); const liveCardPosRef = React.useRef({ x: 0, y: 0 }); const trackedBodyRef = React.useRef(null); const stateRef = React.useRef({ angles: PLANETS.map(() => Math.random() * Math.PI * 2), moonAngles: PLANETS.map((p) => p.moons.map(() => Math.random() * Math.PI * 2)), time: 0, speed: 1, playing: false, hovered: null, mouseX: 0, mouseY: 0 }); const speedRef = React.useRef(speed); const playingRef = React.useRef(playing); React.useEffect(() => { speedRef.current = speed; stateRef.current.speed = speed; }, [speed]); React.useEffect(() => { playingRef.current = playing; stateRef.current.playing = playing; }, [playing]); React.useEffect(() => { const canvas = canvasRef.current; const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener("resize", resize); return () => window.removeEventListener("resize", resize); }, []); React.useEffect(() => { const canvas = canvasRef.current; const onMove = (e) => { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; stateRef.current.mouseX = (e.clientX - rect.left) * scaleX; stateRef.current.mouseY = (e.clientY - rect.top) * scaleY; }; const onLeave = () => { stateRef.current.mouseX = -9999; stateRef.current.mouseY = -9999; }; canvas.addEventListener("mousemove", onMove); canvas.addEventListener("mouseleave", onLeave); return () => { canvas.removeEventListener("mousemove", onMove); canvas.removeEventListener("mouseleave", onLeave); }; }, []); React.useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let rafId; let lastTime = null; const loop = (ts) => { rafId = requestAnimationFrame(loop); const s = stateRef.current; const dt = lastTime ? Math.min((ts - lastTime) / 1e3, 0.05) : 0; lastTime = ts; const W = canvas.width; const H = canvas.height; const cx = W / 2; const cy = H / 2 + H * 0.04; const maxR = W * 0.47; if (s.playing) { s.time += dt * s.speed; const BASE_SPEED = 0.675; PLANETS.forEach((planet, pi) => { const omega = BASE_SPEED * angularSpeed(planet.period); s.angles[pi] += omega * dt * s.speed; planet.moons.forEach((moon, mi) => { const dir = moon.retrograde ? -1 : 1; const moonOmega = BASE_SPEED * angularSpeed(moon.period) * 6; s.moonAngles[pi][mi] += dir * moonOmega * dt * s.speed; }); }); } const bgGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(W, H) * 0.7); bgGrad.addColorStop(0, "#0a0e1a"); bgGrad.addColorStop(0.5, "#07091a"); bgGrad.addColorStop(1, "#040610"); ctx.fillStyle = bgGrad; ctx.fillRect(0, 0, W, H); STARS.forEach((star) => { const twinkle = 0.7 + 0.3 * Math.sin(s.time * 1.5 + star.twinkle); ctx.beginPath(); ctx.arc(star.x * W, star.y * H, star.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(255,255,255,${star.alpha * twinkle})`; ctx.fill(); }); PLANETS.forEach((planet, pi) => { const orR = auToDisplay(planet.au, maxR); drawOrbitPath(ctx, cx, cy, orR); }); drawSun(ctx, cx, cy, s.time); const planetPositions = []; const moonPositions = []; PLANETS.forEach((planet, pi) => { const orR = auToDisplay(planet.au, maxR); const angle = s.angles[pi]; const worldX = orR * Math.cos(angle); const worldY = orR * Math.sin(angle); const pp = project(cx, cy, worldX, worldY); const px = pp.x, py = pp.y; planetPositions.push({ x: px, y: py, r: planet.radius }); if (planet.hasRings) { drawSaturnRings(ctx, px, py, planet.radius); } const moonPos = []; planet.moons.forEach((moon, mi) => { const ma = s.moonAngles[pi][mi]; const mwx = moon.orbitR * Math.cos(ma); const mwy = moon.orbitR * Math.sin(ma); const mp = project(px, py, mwx, mwy); const mx2 = mp.x, my2 = mp.y; moonPos.push({ x: mx2, y: my2, r: moon.radius }); ctx.save(); ctx.translate(px, py); ctx.scale(1, TILT); ctx.beginPath(); ctx.arc(0, 0, moon.orbitR, 0, Math.PI * 2); ctx.strokeStyle = "rgba(255,255,255,0.06)"; ctx.lineWidth = 0.5; ctx.stroke(); ctx.restore(); const mGrad = ctx.createRadialGradient( mx2 - moon.radius * 0.3, my2 - moon.radius * 0.3, moon.radius * 0.05, mx2, my2, moon.radius ); mGrad.addColorStop(0, lighten(moon.color, 40)); mGrad.addColorStop(0.6, moon.color); mGrad.addColorStop(1, darken(moon.color, 30)); ctx.beginPath(); ctx.arc(mx2, my2, moon.radius, 0, Math.PI * 2); ctx.fillStyle = mGrad; ctx.fill(); }); moonPositions.push(moonPos); const pGrad = ctx.createRadialGradient( px - planet.radius * 0.35, py - planet.radius * 0.35, planet.radius * 0.1, px, py, planet.radius ); pGrad.addColorStop(0, lighten(planet.color, 60)); pGrad.addColorStop(0.45, planet.color); pGrad.addColorStop(1, darken(planet.color, 50)); ctx.beginPath(); ctx.arc(px, py, planet.radius, 0, Math.PI * 2); ctx.fillStyle = pGrad; ctx.fill(); if (planet.name === "Jupiter") { ctx.save(); ctx.beginPath(); ctx.arc(px, py, planet.radius, 0, Math.PI * 2); ctx.clip(); [[-6, 3], [-1, 2], [4, 2.5]].forEach(([dy, thickness]) => { ctx.fillStyle = "rgba(180,120,60,0.3)"; ctx.fillRect(px - planet.radius, py + dy, planet.radius * 2, thickness); }); ctx.restore(); } }); const tracked = trackedBodyRef.current; if (tracked) { let lx = 0, ly = 0, lr = 0; if (tracked.type === "sun") { lx = cx; ly = cy; lr = 16; } else if (tracked.type === "planet") { const pp = planetPositions[tracked.pi]; const planet = PLANETS[tracked.pi]; lx = pp.x; ly = pp.y; lr = planet.radius; } else if (tracked.type === "moon") { const mp = moonPositions[tracked.pi][tracked.mi]; const moon = PLANETS[tracked.pi].moons[tracked.mi]; lx = mp.x; ly = mp.y; lr = moon.radius; } liveCardPosRef.current = { x: lx, y: ly - lr - 8 }; } const mx = s.mouseX, my = s.mouseY; let newHovered = null; let newTracked = null; const dSun = Math.hypot(mx - cx, my - cy); if (dSun < 22) { newHovered = { ...SUN_FACTS, x: cx, y: cy - 30 }; newTracked = { type: "sun" }; } if (!newHovered) { outer: for (let pi = 0; pi < PLANETS.length; pi++) { const planet = PLANETS[pi]; const pp = planetPositions[pi]; const hitR = Math.max(planet.radius + 5, 10); if (Math.hypot(mx - pp.x, my - pp.y) < hitR) { newHovered = { name: planet.name, facts: planet.facts, x: pp.x, y: pp.y - planet.radius - 8 }; newTracked = { type: "planet", pi }; break outer; } for (let mi = 0; mi < planet.moons.length; mi++) { const moon = planet.moons[mi]; const mp = moonPositions[pi][mi]; if (Math.hypot(mx - mp.x, my - mp.y) < Math.max(moon.radius + 4, 7)) { newHovered = { name: moon.name, facts: moon.facts, x: mp.x, y: mp.y - moon.radius - 8 }; newTracked = { type: "planet", pi }; break outer; } } } } if (JSON.stringify(newHovered) !== JSON.stringify(s.hovered)) { s.hovered = newHovered; if (newHovered) { if (hideTimerRef.current) { clearTimeout(hideTimerRef.current); hideTimerRef.current = null; } trackedBodyRef.current = newTracked; liveCardPosRef.current = { x: newHovered.x, y: newHovered.y }; setHovered(newHovered); } else { if (!hideTimerRef.current) { hideTimerRef.current = setTimeout(() => { setHovered(null); trackedBodyRef.current = null; hideTimerRef.current = null; }, 3e3); } } } }; rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(rafId); }, []); const handlePlayPause = () => { const next = !playing; setPlaying(next); if (next) audioEngine.start(); else audioEngine.pause(); }; const handleMute = () => { const next = !muted; setMuted(next); audioEngine.setMuted(next); }; const handleVolume = (e) => { const val = parseFloat(e.target.value); setVolume(val); audioEngine.setVolume(val); if (muted && val > 0) { setMuted(false); audioEngine.setMuted(false); } }; return /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: "100%", height: "100vh", background: "#040610", overflow: "hidden", fontFamily: "sans-serif" } }, /* @__PURE__ */ React.createElement( "canvas", { ref: canvasRef, style: { display: "block", width: "100%", height: "100%", cursor: hovered ? "pointer" : "default" } } ), !playing && /* @__PURE__ */ React.createElement( "div", { onClick: handlePlayPause, style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", cursor: "pointer", background: "rgba(0,0,0,0.45)" } }, /* @__PURE__ */ React.createElement("div", { style: { width: 72, height: 72, borderRadius: "50%", border: "3px solid rgba(255,255,255,0.7)", display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,0.08)", marginBottom: 14, boxShadow: "0 0 28px rgba(255,220,80,0.25)" } }, /* @__PURE__ */ React.createElement("span", { style: { fontSize: 28, marginLeft: 5, color: "rgba(255,255,255,0.9)" } }, "\u25B6")), /* @__PURE__ */ React.createElement("div", { style: { color: "rgba(255,255,255,0.8)", fontSize: 15, letterSpacing: 2, textTransform: "uppercase" } }, "Begin Journey") ), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", bottom: 18, left: "50%", transform: "translateX(-50%)", display: "flex", alignItems: "center", gap: 14, background: "rgba(10,14,30,0.82)", backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 32, padding: "8px 20px", boxShadow: "0 4px 24px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ React.createElement("button", { onClick: handlePlayPause, style: btnStyle("#4a90d9") }, playing ? "\u23F8" : "\u25B6"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement("span", { style: { color: "rgba(255,255,255,0.5)", fontSize: 11 } }, "SPEED"), /* @__PURE__ */ React.createElement( "input", { type: "range", min: Math.log(0.1), max: Math.log(6), step: "0.01", value: Math.log(speed), onChange: (e) => setSpeed(Math.exp(parseFloat(e.target.value))), style: { width: 110, accentColor: "#4a90d9", cursor: "pointer" } } ), /* @__PURE__ */ React.createElement("span", { style: { color: "rgba(255,255,255,0.7)", fontSize: 12, minWidth: 32 } }, speed < 10 ? speed.toFixed(1) : speed.toFixed(0), "\xD7")), /* @__PURE__ */ React.createElement("button", { onClick: handleMute, style: btnStyle(muted ? "#e05050" : "#50a050") }, muted ? "\u{1F507}" : "\u{1F50A}"), /* @__PURE__ */ React.createElement( "input", { type: "range", min: "0", max: "1", step: "0.01", value: muted ? 0 : volume, onChange: handleVolume, style: { width: 80, accentColor: "#50a050", cursor: "pointer" }, title: "Volume" } )), hovered && /* @__PURE__ */ React.createElement(FactCard, { data: hovered, liveCardPosRef }), /* @__PURE__ */ React.createElement("div", { style: { position: "absolute", top: 16, left: 20, color: "rgba(255,255,255,0.6)", fontSize: 13, letterSpacing: 2, textTransform: "uppercase" } }, "\u2600 Solar System")); } function FactCard({ data, liveCardPosRef }) { const cardRef = React.useRef(null); React.useEffect(() => { let rafId; const update = () => { rafId = requestAnimationFrame(update); const el = cardRef.current; if (!el || !liveCardPosRef) return; const { x, y } = liveCardPosRef.current; const w = el.offsetWidth; const h = el.offsetHeight; const vw = window.innerWidth; const vh = window.innerHeight; let left = x - w / 2; let top = y - h - 12; left = Math.max(8, Math.min(left, vw - w - 8)); top = Math.max(8, Math.min(top, vh - h - 8)); el.style.left = left + "px"; el.style.top = top + "px"; }; rafId = requestAnimationFrame(update); return () => cancelAnimationFrame(rafId); }, [liveCardPosRef]); return /* @__PURE__ */ React.createElement("div", { ref: cardRef, style: { position: "absolute", left: 0, top: 0, background: "rgba(8,14,35,0.92)", backdropFilter: "blur(12px)", border: "1px solid rgba(100,160,255,0.25)", borderRadius: 12, padding: "12px 16px", color: "white", fontSize: 13, minWidth: 190, boxShadow: "0 4px 24px rgba(0,0,0,0.6), 0 0 12px rgba(80,140,255,0.1)", pointerEvents: "none", zIndex: 10 } }, /* @__PURE__ */ React.createElement("div", { style: { fontWeight: 700, fontSize: 15, marginBottom: 8, color: "#aad4ff" } }, data.name), Object.entries(data.facts).map(([k, v]) => /* @__PURE__ */ React.createElement("div", { key: k, style: { display: "flex", justifyContent: "space-between", gap: 12, marginBottom: 4 } }, /* @__PURE__ */ React.createElement("span", { style: { color: "rgba(255,255,255,0.45)", textTransform: "capitalize", fontSize: 11 } }, k.replace(/_/g, " ")), /* @__PURE__ */ React.createElement("span", { style: { color: "rgba(255,255,255,0.85)", fontSize: 11, textAlign: "right" } }, v)))); } function btnStyle(accent) { return { background: "transparent", border: `1px solid ${accent}44`, borderRadius: 8, color: accent, fontSize: 16, cursor: "pointer", padding: "4px 10px", lineHeight: 1.4, transition: "background 0.15s" }; } function hexToRgba(hex, alpha) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgba(${r},${g},${b},${alpha})`; } function lighten(hex, amount) { let r = parseInt(hex.slice(1, 3), 16); let g = parseInt(hex.slice(3, 5), 16); let b = parseInt(hex.slice(5, 7), 16); r = Math.min(255, r + amount); g = Math.min(255, g + amount); b = Math.min(255, b + amount); return `rgb(${r},${g},${b})`; } function darken(hex, amount) { let r = parseInt(hex.slice(1, 3), 16); let g = parseInt(hex.slice(3, 5), 16); let b = parseInt(hex.slice(5, 7), 16); r = Math.max(0, r - amount); g = Math.max(0, g - amount); b = Math.max(0, b - amount); return `rgb(${r},${g},${b})`; } var App_default = App; return __toCommonJS(App_exports); })();

Solar System Explorer