阿尔忒弥斯二号飞行模拟

import React from 'react';
import SpaceCanvas from './SpaceCanvas';
import ControlPanel from './ControlPanel';
import MilestonePanel from './MilestonePanel';
import PhysicsCards from './PhysicsCards';
import MissionSummary from './MissionSummary';
import { PHASE } from './constants';
import { getPhaseLabel } from './app/phaseLabels';
import { appStyles as styles } from './app/appStyles';
import { useRocketAppState } from './hooks/useRocketAppState';

export default function App() {
  const {
    params, setParams,
    simState,
    running,
    showHint, setShowHint,
    timeScale, setTimeScale,
    zoomLevel, setZoomLevel,
    showGuidance, setShowGuidance,
    canvasContainerRef,
    handleLaunch, handleTLI, handleRestart,
    handleMicroThrustStart, handleMicroThrustEnd,
    handleRotateThrustStart, handleRotateThrustEnd,
    displayData, guidanceData, predictedPath,
    phase, isEnded,
    prelaunchState,
    canvasW, canvasH,
  } = useRocketAppState();

  return (
    <div style={styles.root}>
      <div style={styles.canvasArea} ref={canvasContainerRef}>
        <SpaceCanvas
          simState={simState || prelaunchState}
          width={Math.max(canvasW, 400)}
          height={canvasH}
          zoomLevel={zoomLevel}
          guidanceData={guidanceData}
          predictedPath={predictedPath}
        />

        <div style={styles.topBar}>
          <div style={styles.missionTitle}>
            <span style={styles.missionIcon}>🚀</span>
            Artemis II 月球飞越任务模拟器
          </div>
          {running && (
            <div style={styles.timeControls}>
              <span style={styles.timeLabel}>时间:</span>
              {[200, 400, 800, 1600, 3200].map(s => (
                <button
                  key={s}
                  onClick={() => setTimeScale(s)}
                  style={{
                    ...styles.timeBtn,
                    ...(timeScale === s ? styles.timeBtnActive : {}),
                  }}
                >
                  {s}x
                </button>
              ))}
              <span style={{ ...styles.timeLabel, marginLeft: 12 }}>缩放:</span>
              <button
                onClick={() => setZoomLevel(z => Math.min(z * 2, 64))}
                style={styles.timeBtn}
              >+</button>
              <span style={styles.zoomValue}>{zoomLevel}x</span>
              <button
                onClick={() => setZoomLevel(z => Math.max(z / 2, 1))}
                style={styles.timeBtn}
              >−</button>
              {zoomLevel > 1 && (
                <button
                  onClick={() => setZoomLevel(1)}
                  style={{ ...styles.timeBtn, fontSize: 10 }}
                >重置</button>
              )}
            </div>
          )}
          {simState && (
            <div style={styles.phaseIndicator}>
              <span style={styles.phaseDot} />
              {getPhaseLabel(phase)}
            </div>
          )}
        </div>

        {simState && !isEnded && (
          <div style={styles.bottomBar}>
            <MilestonePanel
              phase={phase}
              showHint={showHint}
              setShowHint={setShowHint}
            />
            <PhysicsCards phase={phase} />
          </div>
        )}

        {!simState && (
          <div style={styles.welcome}>
            <h1 style={styles.welcomeTitle}>Artemis II</h1>
            <h2 style={styles.welcomeSub}>月球飞越任务模拟器</h2>
            <p style={styles.welcomeDesc}>
              模拟 NASA 阿耳忒弥斯2号任务：乘坐 Orion 飞船，
              搭载 SLS 火箭升空，环绕月球并安全返回地球。
            </p>
            <div style={styles.welcomeStats}>
              <div style={styles.welcomeStat}>
                <div style={styles.welcomeStatVal}>384,400 km</div>
                <div style={styles.welcomeStatLabel}>地月距离</div>
              </div>
              <div style={styles.welcomeStat}>
                <div style={styles.welcomeStatVal}>~10 天</div>
                <div style={styles.welcomeStatLabel}>任务时长</div>
              </div>
              <div style={styles.welcomeStat}>
                <div style={styles.welcomeStatVal}>11.1 km/s</div>
                <div style={styles.welcomeStatLabel}>再入速度</div>
              </div>
            </div>
            <p style={styles.welcomeHint}>← 在左侧控制面板设置参数并发射</p>
          </div>
        )}
      </div>

      <div style={styles.sidebar}>
        <ControlPanel
          params={params}
          setParams={setParams}
          simState={simState || { phase: PHASE.PRELAUNCH }}
          onLaunch={handleLaunch}
          onTLI={handleTLI}
          onMicroThrustStart={handleMicroThrustStart}
          onMicroThrustEnd={handleMicroThrustEnd}
          onRotateThrustStart={handleRotateThrustStart}
          onRotateThrustEnd={handleRotateThrustEnd}
          onRestart={handleRestart}
          displayData={displayData}
          showGuidance={showGuidance}
          setShowGuidance={setShowGuidance}
          guidanceData={guidanceData}
        />
      </div>

      {isEnded && (
        <MissionSummary
          simState={simState}
          displayData={displayData}
          onRestart={handleRestart}
        />
      )}
    </div>
  );
}