- {bgmUrl &&
}
-
- {/* Absolute Background Visualizer */}
-
-
- {/* Top Left: Logo / Mission Info Overlay */}
-
-
-
-
-
-
- {t.appTitle}
-
-
- {t.appSub}
-
-
-
-
-
- {/* Top Right: Preset Selector & Lang Toggle */}
-
-
- {
- const p = PRESETS.find((x) => x.id === e.target.value);
- if (p) changePreset(p);
- }}
- className="bg-transparent text-white/90 text-xs font-bold uppercase tracking-widest outline-none px-3 py-1 cursor-pointer appearance-none"
- >
- {PRESETS.map((p) => (
-
- {p.name}
-
- ))}
-
-
-
{
- setAudioOn((v) => !v);
- }}
- className="p-2 bg-black/30 backdrop-blur-md border border-white/10 rounded-lg text-white/70 hover:bg-white/10 hover:text-white transition-all shadow-lg flex items-center justify-center"
- title="Toggle Global Audio (Mutes/Unmutes BGM)"
- >
- {audioOn ? (
-
-
setLang((l) => (l === "en" ? "zh" : "en"))}
- className="p-2 bg-black/30 backdrop-blur-md border border-white/10 rounded-lg text-white/70 hover:bg-white/10 hover:text-white transition-all shadow-lg flex items-center justify-center"
- title="Toggle Language"
- >
-
-
-
- {/* Control Panel (Floating Glass Panel Left) */}
-
-
-
-
- setCameraMode((m) => (m === "dynamic" ? "follow" : "dynamic"))
- }
- className="px-2 py-1 bg-white/5 border border-white/10 rounded-md text-white/60 hover:bg-white/10 hover:text-white transition-all flex items-center justify-center gap-1.5"
- title="Toggle Camera Mode"
- >
-
- {cameraMode === "dynamic" ? t.cameraDynamic : t.cameraFollow}
-
-
-
-
- {/* Rocket Info */}
-
-
- {t.vehicleParams}
-
-
-
{t.dryMass}
-
- {formatNumber(totalDryMass / 1000, 1)} t
-
-
{t.fuelMass}
-
- {formatNumber(totalFuelMass / 1000, 1)} t
-
-
{t.maxThrust}
-
- {formatNumber(maxPossibleThrust / 1000000, 1)} MN
-
-
{t.isp}
-
- {rocket.stages[0].isp} s
-
-
{t.engines}
-
- {rocket.stages[0].engines}
-
-
-
-
-
-
{
- toggleSimulation();
- }}
- disabled={isFinished}
- className={`flex-1 flex items-center justify-center gap-2 py-3.5 rounded-xl font-bold tracking-widest text-xs transition-all border ${
- isFinished
- ? "bg-red-500/20 text-red-500 border-red-500/30 opacity-70 cursor-not-allowed"
- : state.isRunning
- ? "bg-amber-500/20 text-amber-400 border-amber-500/30 hover:bg-amber-500/30"
- : "bg-emerald-500/20 text-emerald-400 border-emerald-500/30 hover:bg-emerald-500/30"
- }`}
- >
- {isFinished ? (
-
-
- {t.ended}
-
- ) : state.isRunning ? (
- <>
-
-
-
-
-
-
{
- const file = e.target.files?.[0];
- if (file) {
- const url = URL.createObjectURL(file);
- setBgmUrl(url);
- setAudioOn(true); // Automatically turn on global audio so they can hear it
- }
- }}
- />
-
-
- Load BGM (Controlled by global audio button)
-
-
-
-
-
-
-
- {t.throttle}
-
-
- {Math.round(state.throttle * 100)}%
-
-
-
-
setThrottle(parseFloat(e.target.value))}
- className="w-full h-2 bg-white/10 rounded-full appearance-none cursor-pointer accent-white"
- />
-
-
-
-
-
- {t.twr}
-
- 1 ? "text-emerald-400 drop-shadow-md" : "text-white/80"
- }
- >
- {formatNumber(tWR, 2)}
-
-
-
-
- {t.mach}
-
- 1 ? "text-sky-400 drop-shadow-md" : "text-white/80"
- }
- >
- {formatNumber(mach, 1)}
-
-
-
-
- {t.gforce}
-
- 3 ? "text-rose-400 drop-shadow-md" : "text-white/80"
- }
- >
- {formatNumber(gForce, 1)}
-
-
-
-
- {t.maxT}
-
-
- {formatNumber(
- rocket.stages[state.currentStage].maxThrust / 1000000,
- 1,
- )}
- MN
-
-
-
-
-
- {/* Dashboards (Floating Glass Panel Right) */}
-
-
- {/* Timeline (Top Center) */}
-
- {["liftoff", "maxq", "stageSep1", "karman", "orbit"].map(
- (evName, idx, arr) => {
- const ev = state.events.find((e) => e.name === evName);
- const isReached = !!ev;
- return (
-
-
- {/* Light */}
-
- {/* Label */}
-
- {t[evName as keyof typeof t]}
-
- {/* Time */}
-
- {isReached ? formatTime(ev.time) : "--:--"}
-
-
- {idx < arr.length - 1 && (
-
- )}
-
- );
- },
- )}
-
-
- {/* Bottom Center: Broadcast Telemetry Style HUD */}
-
- {/* Speed */}
-
-
- {/* Center Stage Info */}
-
-
- {formatTime(state.time)}
-
-
-
- {/* Throttle Bar */}
-
-
- {t.hudThrottle}
-
- {Math.round(state.throttle * 100)}%
-
-
-
-
-
- {/* Fuel Bar */}
-
-
-
- {t.hudProp} (S{state.currentStage + 1})
-
-
- {Math.round(
- (state.fuel / rocket.stages[state.currentStage].fuelMass) *
- 100,
- )}
- %
-
-
-
-
-
-
-
- {/* Altitude */}
-
-
- {/* Navball */}
-
-
-
-
- {title}
-
-
-
-
- `${t.toFixed(0)}s`}
- stroke="rgba(255,255,255,0.4)"
- fontSize={10}
- tickMargin={8}
- tickLine={false}
- axisLine={false}
- />
- [
- `${value.toFixed(1)} ${unit}`,
- title,
- ]}
- labelFormatter={(label: number) => `T+ ${label.toFixed(1)}s`}
- />
-
-
-
-
- {/* Atmosphere background */}
-
-
- {/* Stars - Deep layer */}
-
- {/* Stars - Mid layer */}
-
- {/* Stars - Close layer */}
-
-
- {/* Screen Effects (Cinematic Vignette) */}
-
-
-
- {/* Ground */}
-
- {/* Engine Flame */}
- {state.throttle > 0 && state.fuel > 0 && (
-
- {/* Outer Glow */}
-
-
- )}
-
- )}
-
- {/* Render Detailed Rocket Specific to Model with Active Engine aligned to (0,0) */}
- {nodes}
-
-
-
-
-
-
-
-
-
-
-
- {/* Horizontal reference line */}
-
- {/* Vertical reference line */}
-
-
- {/* Rocket outline rotating */}
-
- {/* Simple rocket silhouette */}
-
- {/* Rocket body */}
-
-
-
-
- PITCH {Math.round(pitch)}°
-
-
-