blacktrigram 0.7.10 → 0.7.12

package/lib/App2.js

@@ -3,12 +3,11 @@ import { GameMode, PlayerArchetype } from "./types/common.js";
 import { createPlayerFromArchetype } from "./utils/playerUtils.js";
 import { clearPlatformCache, detectPlatform } from "./utils/deviceDetection.js";
 import CombatScreen3D from "./components/screens/combat/CombatScreen3D.js";
-/* empty css    */
-import ControlsScreen3D from "./components/screens/controls/ControlsScreen3D.js";
 import { EndScreen3D } from "./components/screens/endscreen/EndScreen3D.js";
-import "./components/screens/endscreen/index.js";
+import ControlsScreen3D from "./components/screens/controls/ControlsScreen3D.js";
 import IntroScreen3D from "./components/screens/intro/IntroScreen3D.js";
 import PhilosophyScreen3D from "./components/screens/philosophy/PhilosophyScreen3D.js";
+/* empty css    */
 import { PerformanceDebugOverlayHtml } from "./components/shared/debug/PerformanceDebugOverlayHtml.js";
 import ErrorModal from "./components/shared/ui/ErrorModal.js";
 import { LoadingState } from "./components/shared/ui/LoadingState.js";

package/lib/App2.js.map

@@ -1 +1 @@
-{"version":3,"file":"App2.js","names":[],"sources":["../src/App.tsx"],"sourcesContent":["import {\n  lazy,\n  Suspense,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport \"./App.css\";\n// Main application component - manages game state and screen navigation\nimport { useAudio } from \"./audio/AudioProvider\";\nimport { CombatScreen3D as CombatScreen } from \"./components/screens/combat/CombatScreen3D\";\nimport { ControlsScreen3D as ControlsScreen } from \"./components/screens/controls/ControlsScreen3D\";\nimport { EndScreen3D } from \"./components/screens/endscreen\";\nimport { IntroScreen3D as IntroScreen } from \"./components/screens/intro/IntroScreen3D\";\nimport { PhilosophyScreen3D as PhilosophyScreen } from \"./components/screens/philosophy/PhilosophyScreen3D\";\nimport { PerformanceDebugOverlayHtml } from \"./components/shared/debug/PerformanceDebugOverlayHtml\";\nimport { ErrorModal } from \"./components/shared/ui/ErrorModal\";\nimport { LoadingState } from \"./components/shared/ui/LoadingState\";\nimport { SplashScreen } from \"./components/shared/ui/SplashScreen\";\nimport { PlayerState } from \"./systems\";\nimport { MatchStatistics } from \"./systems/combat\";\nimport { GameMode, PlayerArchetype } from \"./types/common\";\nimport { clearPlatformCache, detectPlatform } from \"./utils/deviceDetection\";\nimport { createPlayerFromArchetype } from \"./utils/playerUtils\";\n\n// Lazy load heavy screens\nconst TrainingScreen = lazy(() =>\n  import(\"./components/screens/training/TrainingScreen3D\").then((m) => ({\n    default: m.TrainingScreen3D,\n  })),\n);\n\n// 150ms delay to allow WebGL context cleanup between full-screen 3D scene transitions\nconst SCREEN_TRANSITION_DELAY_MS = 150;\n// 100ms delay for lighter menu/UI transitions where WebGL teardown/re-init cost is lower\nconst MENU_TRANSITION_DELAY_MS = 100;\n\nfunction App() {\n  const [gameMode, setGameMode] = useState<GameMode | null>(null);\n  const [selectedArchetype, setSelectedArchetype] = useState<PlayerArchetype>(\n    PlayerArchetype.MUSA,\n  );\n  const [isGameActive, setIsGameActive] = useState(false);\n  const [gameWinner, setGameWinner] = useState<PlayerState | null>(null);\n  const [matchStats, setMatchStats] = useState<MatchStatistics | null>(null);\n  const [appReady, setAppReady] = useState(false);\n  const [showSplash, setShowSplash] = useState(true);\n  const [showAudioError, setShowAudioError] = useState(false);\n  // Performance debug overlay toggle (P key in dev mode)\n  const [showPerformanceDebug, setShowPerformanceDebug] = useState(false);\n  // Transition state to allow WebGL cleanup between screens\n  const [isTransitioning, setIsTransitioning] = useState(false);\n  const pendingModeRef = useRef<{\n    mode: GameMode;\n    archetype?: PlayerArchetype;\n  } | null>(null);\n\n  // Combat players state - managed here so updates persist\n  const [combatPlayers, setCombatPlayers] = useState<PlayerState[]>([]);\n\n  const audio = useAudio();\n\n  // Add responsive screen size detection with proper device detection\n  // Uses user-agent detection first for high-res mobile devices\n  const [screenSize, setScreenSize] = useState(() => {\n    const platform = detectPlatform();\n    return {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      isMobile: platform.isMobile,\n      isTablet: platform.isTablet,\n      isDesktop: platform.isDesktop,\n    };\n  });\n\n  useEffect(() => {\n    // Define handlers outside async function for proper cleanup\n    const handleGlobalError = (e: ErrorEvent) => {\n      console.error(\"Global error:\", e.error);\n    };\n\n    const handleUnhandledRejection = (e: PromiseRejectionEvent) => {\n      console.error(\"Unhandled promise rejection:\", e.reason);\n      if (\n        e.reason?.message?.includes(\"Failed to load\") ||\n        e.reason?.message?.includes(\"no supported source\")\n      ) {\n        e.preventDefault();\n      }\n    };\n\n    const initializeApp = async () => {\n      try {\n        window.focus();\n\n        window.addEventListener(\"error\", handleGlobalError);\n        window.addEventListener(\"unhandledrejection\", handleUnhandledRejection);\n\n        // PHASE 2: Performance optimization initialization\n        console.log(\"🔧 Initializing animation performance optimizations...\");\n\n        // 1. Prewarm object pools for animation optimization\n        // This eliminates GC pressure from ~1,344 allocations per frame\n        const { ThreeObjectPools } = await import(\"./utils/threeObjectPool\");\n        ThreeObjectPools.prewarmAll();\n        const poolStatus = ThreeObjectPools.getStatus();\n        console.log(\"  ✓ Object pools prewarmed:\", poolStatus);\n\n        // 2. Precompute all animations for 90%+ cache hit rate\n        const { precomputeAnimation } =\n          await import(\"./systems/animation/core/AnimationOptimizations\");\n        const { ALL_ANIMATIONS } =\n          await import(\"./systems/animation/core/AnimationRegistry\");\n\n        let precomputedCount = 0;\n        ALL_ANIMATIONS.forEach((animation) => {\n          // Precompute at 60fps for smooth playback\n          // Use animation.name as the unique identifier\n          precomputeAnimation(animation.name, animation, 60);\n          precomputedCount++;\n        });\n        console.log(`  ✓ Precomputed ${precomputedCount} animations at 60fps`);\n\n        console.log(\n          \"✅ Animation optimizations ready (expect <5ms frame time, 90%+ cache hit)\",\n        );\n\n        setAppReady(true);\n        console.log(\"🎯 Black Trigram app initialized\");\n      } catch (error) {\n        console.error(\"Failed to initialize app:\", error);\n        setAppReady(true);\n      }\n    };\n\n    initializeApp();\n\n    // Cleanup global event handlers to prevent memory leaks\n    return () => {\n      window.removeEventListener(\"error\", handleGlobalError);\n      window.removeEventListener(\n        \"unhandledrejection\",\n        handleUnhandledRejection,\n      );\n    };\n  }, []);\n\n  // Shared audio initialization logic for splash and retry\n  const initializeAudioWithRetry = useCallback(async () => {\n    if (!appReady) {\n      console.warn(\"App not ready yet, please wait...\");\n      return false;\n    }\n    try {\n      await audio.initializeAudio();\n      console.log(\"🎵 Audio initialized\");\n      return true;\n    } catch (error) {\n      console.error(\"Failed to initialize audio:\", error);\n      return false;\n    }\n  }, [audio, appReady]);\n\n  // Handle splash screen start - initialize audio on user gesture\n  const handleSplashStart = useCallback(async () => {\n    setShowAudioError(false);\n    const success = await initializeAudioWithRetry();\n    if (success) {\n      setShowSplash(false);\n    } else {\n      setShowAudioError(true);\n    }\n  }, [initializeAudioWithRetry]);\n\n  const handleAudioErrorRetry = useCallback(async () => {\n    setShowAudioError(false);\n    const success = await initializeAudioWithRetry();\n    if (success) {\n      setShowSplash(false);\n    } else {\n      setShowAudioError(true);\n    }\n  }, [initializeAudioWithRetry]);\n\n  const handleAudioErrorContinue = useCallback(() => {\n    // Continue without sound\n    setShowAudioError(false);\n    setShowSplash(false);\n    console.log(\"Continuing without audio (silent mode)\");\n  }, []);\n\n  // ✅ SIMPLIFIED: Handle game mode selection directly\n  const handleGameStart = useCallback(\n    (mode: GameMode, archetype?: PlayerArchetype) => {\n      console.log(\"🎮 Starting game mode:\", mode, \"with archetype:\", archetype);\n\n      // Store pending mode and start transition to allow WebGL cleanup\n      pendingModeRef.current = { mode, archetype };\n      setIsTransitioning(true);\n\n      // Clear current mode first (unmounts Canvas)\n      setGameMode(null);\n      setIsGameActive(false);\n\n      // After brief delay, mount new screen\n      // Increased delay to allow proper WebGL context cleanup\n      setTimeout(() => {\n        const pending = pendingModeRef.current;\n        if (!pending) return;\n\n        // ✅ NEW: Handle controls and philosophy as separate modes\n        if (\n          pending.mode === GameMode.CONTROLS ||\n          pending.mode === GameMode.PHILOSOPHY\n        ) {\n          setGameMode(pending.mode);\n          setIsGameActive(false); // These are not game modes, just screens\n        } else {\n          setGameMode(pending.mode);\n          setIsGameActive(true);\n        }\n\n        setGameWinner(null);\n        setMatchStats(null);\n        if (pending.archetype) {\n          setSelectedArchetype(pending.archetype);\n        }\n\n        setIsTransitioning(false);\n        pendingModeRef.current = null;\n      }, SCREEN_TRANSITION_DELAY_MS); // Delay for WebGL cleanup\n    },\n    [],\n  );\n\n  const handleGameEnd = useCallback(\n    (winner: number) => {\n      setIsGameActive(false);\n      setGameWinner(createPlayerFromArchetype(selectedArchetype, winner));\n      // Reset combat players for next match\n      setCombatPlayers([]);\n\n      setMatchStats({\n        totalDamageDealt: 150,\n        totalDamageTaken: 100,\n        criticalHits: 3,\n        vitalPointHits: 2,\n        techniquesUsed: 8,\n        perfectStrikes: 1,\n        consecutiveWins: 1,\n        matchDuration: 120,\n        totalMatches: 1,\n        maxRounds: 3,\n        winner: winner,\n        totalRounds: 2,\n        currentRound: 2,\n        timeRemaining: 0,\n        combatEvents: [],\n        finalScore: {\n          player1: winner === 0 ? 2 : 0,\n          player2: winner === 1 ? 2 : 0,\n        },\n        roundsWon: {\n          player1: winner === 0 ? 2 : 0,\n          player2: winner === 1 ? 2 : 0,\n        },\n        player1: {\n          wins: winner === 0 ? 1 : 0,\n          losses: winner === 0 ? 0 : 1,\n          hitsTaken: 5,\n          hitsLanded: 8,\n          totalDamageDealt: winner === 0 ? 150 : 100,\n          totalDamageReceived: winner === 0 ? 100 : 150,\n          techniques: [\"천둥벽력\", \"유수연타\"],\n          perfectStrikes: winner === 0 ? 1 : 0,\n          vitalPointHits: winner === 0 ? 2 : 1,\n          consecutiveWins: winner === 0 ? 1 : 0,\n          matchDuration: 120,\n        },\n        player2: {\n          wins: winner === 1 ? 1 : 0,\n          losses: winner === 1 ? 0 : 1,\n          hitsTaken: 8,\n          hitsLanded: 5,\n          totalDamageDealt: winner === 1 ? 150 : 100,\n          totalDamageReceived: winner === 1 ? 100 : 150,\n          techniques: [\"화염지창\", \"벽력일섬\"],\n          perfectStrikes: winner === 1 ? 1 : 0,\n          vitalPointHits: winner === 1 ? 2 : 1,\n          consecutiveWins: winner === 1 ? 1 : 0,\n          matchDuration: 120,\n        },\n      });\n    },\n    [selectedArchetype],\n  );\n\n  const handleReturnToMenu = useCallback(() => {\n    // Use same transition logic for return to menu\n    setIsTransitioning(true);\n    setGameMode(null);\n    setIsGameActive(false);\n    setGameWinner(null);\n    setMatchStats(null);\n    // Reset combat players so they reinitialize next combat\n    setCombatPlayers([]);\n    setTimeout(() => setIsTransitioning(false), MENU_TRANSITION_DELAY_MS);\n  }, []);\n\n  const handleRematch = useCallback(() => {\n    // Restart combat with same settings\n    if (!gameMode) {\n      console.error(\n        \"Cannot rematch: gameMode is not set. This should not happen - EndScreen only renders when gameMode is set.\",\n        { gameMode, isGameActive, gameWinner, matchStats }\n      );\n      return;\n    }\n    \n    setIsTransitioning(true);\n    setGameWinner(null);\n    setMatchStats(null);\n    // Reset combat players so they reinitialize for rematch\n    setCombatPlayers([]);\n    \n    setTimeout(() => {\n      setIsGameActive(true);\n      setIsTransitioning(false);\n    }, SCREEN_TRANSITION_DELAY_MS);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- isGameActive, gameWinner, matchStats only used in error logging, not function logic\n  }, [gameMode]);\n\n  const handleViewTraining = useCallback(() => {\n    // Navigate to training mode\n    setIsTransitioning(true);\n    setGameWinner(null);\n    setMatchStats(null);\n    setCombatPlayers([]);\n    \n    setTimeout(() => {\n      setGameMode(GameMode.TRAINING);\n      setIsGameActive(true);\n      setIsTransitioning(false);\n    }, SCREEN_TRANSITION_DELAY_MS);\n  }, []);\n\n  const renderCurrentScreen = () => {\n    // Show loading during screen transitions\n    if (isTransitioning) {\n      return (\n        <LoadingState\n          progress={undefined}\n          message=\"전환 중... | Transitioning...\"\n          stage=\"assets\"\n        />\n      );\n    }\n\n    if (gameWinner && matchStats) {\n      // ✅ NEW: Use EndScreen3D component\n      return (\n        <EndScreen3D\n          winner={gameWinner}\n          matchStats={matchStats}\n          onReturnToMenu={handleReturnToMenu}\n          onRematch={handleRematch}\n          onViewReplay={handleViewTraining}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n      );\n    }\n\n    // ✅ NEW: Handle standalone screens first\n    if (gameMode === GameMode.CONTROLS) {\n      return (\n        <ControlsScreen\n          onReturnToMenu={handleReturnToMenu}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n      );\n    }\n\n    if (gameMode === GameMode.PHILOSOPHY) {\n      return (\n        <PhilosophyScreen\n          onReturnToMenu={handleReturnToMenu}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n      );\n    }\n\n    // ✅ SIMPLIFIED: Only active game modes use isGameActive\n    if (isGameActive && gameMode) {\n      switch (gameMode) {\n        case GameMode.TRAINING:\n          return (\n            <Suspense\n              fallback={\n                <LoadingState\n                  progress={undefined}\n                  message=\"훈련장 로딩 중... | Loading Training...\"\n                  stage=\"assets\"\n                />\n              }\n            >\n              <TrainingScreen\n                onPlayerUpdate={(updates) => {\n                  console.log(\"Training player updated:\", updates);\n                }}\n                onReturnToMenu={handleReturnToMenu}\n                width={screenSize.width}\n                height={screenSize.height}\n                initialArchetype={selectedArchetype}\n              />\n            </Suspense>\n          );\n        case GameMode.VERSUS:\n        case GameMode.PRACTICE:\n          // Initialize players if not already set\n          if (combatPlayers.length === 0) {\n            const player1 = createPlayerFromArchetype(selectedArchetype, 0);\n            const player2 = createPlayerFromArchetype(\n              PlayerArchetype.AMSALJA,\n              1,\n            );\n            // Use setTimeout to defer state update and avoid render-during-render\n            setTimeout(() => setCombatPlayers([player1, player2]), 0);\n            // Return loading state while players initialize\n            return (\n              <LoadingState\n                progress={undefined}\n                message=\"전투 준비 중... | Preparing Combat...\"\n                stage=\"assets\"\n              />\n            );\n          }\n\n          return (\n            <CombatScreen\n              players={combatPlayers}\n              currentRound={1}\n              timeRemaining={180}\n              isPaused={false}\n              onPlayerUpdate={(playerIndex, updates) => {\n                // Actually update the player state so damage persists!\n                setCombatPlayers((prevPlayers) => {\n                  const newPlayers = [...prevPlayers];\n                  if (newPlayers[playerIndex]) {\n                    newPlayers[playerIndex] = {\n                      ...newPlayers[playerIndex],\n                      ...updates,\n                    };\n                  }\n                  return newPlayers;\n                });\n              }}\n              onReturnToMenu={handleReturnToMenu}\n              onGameEnd={handleGameEnd}\n              gameMode={gameMode}\n              width={screenSize.width}\n              height={screenSize.height}\n            />\n          );\n        default:\n          return (\n            <IntroScreen\n              onMenuSelect={handleGameStart}\n              onArchetypeSelect={setSelectedArchetype}\n              selectedArchetype={selectedArchetype}\n              width={screenSize.width}\n              height={screenSize.height}\n            />\n          );\n      }\n    }\n\n    // ✅ SIMPLIFIED: Default to intro screen\n    return (\n      <IntroScreen\n        onMenuSelect={handleGameStart}\n        onArchetypeSelect={setSelectedArchetype}\n        selectedArchetype={selectedArchetype}\n        width={screenSize.width}\n        height={screenSize.height}\n      />\n    );\n  };\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, [appReady]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      // Clear cached platform info to get fresh detection on resize\n      clearPlatformCache();\n      const platform = detectPlatform();\n      setScreenSize({\n        width: platform.screenWidth,\n        height: platform.screenHeight,\n        isMobile: platform.isMobile,\n        isTablet: platform.isTablet,\n        isDesktop: platform.isDesktop,\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  // F9 key toggle for performance debug overlay (dev mode only)\n  // Note: P key is reserved for Philosophy screen\n  useEffect(() => {\n    if (!import.meta.env.DEV) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"F9\") {\n        e.preventDefault();\n        setShowPerformanceDebug((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, []);\n\n  if (!appReady) {\n    return (\n      <div className=\"app loading\" data-testid=\"app-container\">\n        <LoadingState\n          progress={undefined}\n          message=\"앱 초기화 중 | Initializing app...\"\n          stage=\"initialization\"\n        />\n      </div>\n    );\n  }\n\n  // Show splash screen first to get user gesture for audio\n  if (showSplash) {\n    return (\n      <div className=\"app\" data-testid=\"app-container\">\n        <SplashScreen\n          onStart={handleSplashStart}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n        {showAudioError && (\n          <ErrorModal\n            message=\"오디오 초기화에 실패했습니다. 재시도하거나 소리 없이 계속할 수 있습니다. | Audio initialization failed. You can retry or continue without sound.\"\n            onRetry={handleAudioErrorRetry}\n            onContinue={handleAudioErrorContinue}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"app\"\n      tabIndex={0}\n      ref={containerRef}\n      style={{\n        outline: \"none\",\n        width: \"100vw\",\n        height: \"100vh\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"app-container\"\n    >\n      {/* All screens now use Three.js or pure React/HTML */}\n      {renderCurrentScreen()}\n\n      {/* Performance debug overlay (dev mode only, toggle with P key) */}\n      {showPerformanceDebug && <PerformanceDebugOverlayHtml />}\n    </div>\n  );\n}\n\nexport default App;\n"],"mappings":"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"}
+{"version":3,"file":"App2.js","names":[],"sources":["../src/App.tsx"],"sourcesContent":["import {\n  lazy,\n  Suspense,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport \"./App.css\";\n// Main application component - manages game state and screen navigation\nimport { useAudio } from \"./audio/AudioProvider\";\nimport { CombatScreen3D as CombatScreen } from \"./components/screens/combat/CombatScreen3D\";\nimport { ControlsScreen3D as ControlsScreen } from \"./components/screens/controls/ControlsScreen3D\";\nimport { EndScreen3D } from \"./components/screens/endscreen\";\nimport { IntroScreen3D as IntroScreen } from \"./components/screens/intro/IntroScreen3D\";\nimport { PhilosophyScreen3D as PhilosophyScreen } from \"./components/screens/philosophy/PhilosophyScreen3D\";\nimport { PerformanceDebugOverlayHtml } from \"./components/shared/debug/PerformanceDebugOverlayHtml\";\nimport { ErrorModal } from \"./components/shared/ui/ErrorModal\";\nimport { LoadingState } from \"./components/shared/ui/LoadingState\";\nimport { SplashScreen } from \"./components/shared/ui/SplashScreen\";\nimport { PlayerState } from \"./systems\";\nimport { MatchStatistics } from \"./systems/combat\";\nimport { GameMode, PlayerArchetype } from \"./types/common\";\nimport { clearPlatformCache, detectPlatform } from \"./utils/deviceDetection\";\nimport { createPlayerFromArchetype } from \"./utils/playerUtils\";\n\n// Lazy load heavy screens\nconst TrainingScreen = lazy(() =>\n  import(\"./components/screens/training/TrainingScreen3D\").then((m) => ({\n    default: m.TrainingScreen3D,\n  })),\n);\n\n// 150ms delay to allow WebGL context cleanup between full-screen 3D scene transitions\nconst SCREEN_TRANSITION_DELAY_MS = 150;\n// 100ms delay for lighter menu/UI transitions where WebGL teardown/re-init cost is lower\nconst MENU_TRANSITION_DELAY_MS = 100;\n\nfunction App() {\n  const [gameMode, setGameMode] = useState<GameMode | null>(null);\n  const [selectedArchetype, setSelectedArchetype] = useState<PlayerArchetype>(\n    PlayerArchetype.MUSA,\n  );\n  const [isGameActive, setIsGameActive] = useState(false);\n  const [gameWinner, setGameWinner] = useState<PlayerState | null>(null);\n  const [matchStats, setMatchStats] = useState<MatchStatistics | null>(null);\n  const [appReady, setAppReady] = useState(false);\n  const [showSplash, setShowSplash] = useState(true);\n  const [showAudioError, setShowAudioError] = useState(false);\n  // Performance debug overlay toggle (P key in dev mode)\n  const [showPerformanceDebug, setShowPerformanceDebug] = useState(false);\n  // Transition state to allow WebGL cleanup between screens\n  const [isTransitioning, setIsTransitioning] = useState(false);\n  const pendingModeRef = useRef<{\n    mode: GameMode;\n    archetype?: PlayerArchetype;\n  } | null>(null);\n\n  // Combat players state - managed here so updates persist\n  const [combatPlayers, setCombatPlayers] = useState<PlayerState[]>([]);\n\n  const audio = useAudio();\n\n  // Add responsive screen size detection with proper device detection\n  // Uses user-agent detection first for high-res mobile devices\n  const [screenSize, setScreenSize] = useState(() => {\n    const platform = detectPlatform();\n    return {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      isMobile: platform.isMobile,\n      isTablet: platform.isTablet,\n      isDesktop: platform.isDesktop,\n    };\n  });\n\n  useEffect(() => {\n    // Define handlers outside async function for proper cleanup\n    const handleGlobalError = (e: ErrorEvent) => {\n      console.error(\"Global error:\", e.error);\n    };\n\n    const handleUnhandledRejection = (e: PromiseRejectionEvent) => {\n      console.error(\"Unhandled promise rejection:\", e.reason);\n      if (\n        e.reason?.message?.includes(\"Failed to load\") ||\n        e.reason?.message?.includes(\"no supported source\")\n      ) {\n        e.preventDefault();\n      }\n    };\n\n    const initializeApp = async () => {\n      try {\n        window.focus();\n\n        window.addEventListener(\"error\", handleGlobalError);\n        window.addEventListener(\"unhandledrejection\", handleUnhandledRejection);\n\n        // PHASE 2: Performance optimization initialization\n        console.log(\"🔧 Initializing animation performance optimizations...\");\n\n        // 1. Prewarm object pools for animation optimization\n        // This eliminates GC pressure from ~1,344 allocations per frame\n        const { ThreeObjectPools } = await import(\"./utils/threeObjectPool\");\n        ThreeObjectPools.prewarmAll();\n        const poolStatus = ThreeObjectPools.getStatus();\n        console.log(\"  ✓ Object pools prewarmed:\", poolStatus);\n\n        // 2. Precompute all animations for 90%+ cache hit rate\n        const { precomputeAnimation } =\n          await import(\"./systems/animation/core/AnimationOptimizations\");\n        const { ALL_ANIMATIONS } =\n          await import(\"./systems/animation/core/AnimationRegistry\");\n\n        let precomputedCount = 0;\n        ALL_ANIMATIONS.forEach((animation) => {\n          // Precompute at 60fps for smooth playback\n          // Use animation.name as the unique identifier\n          precomputeAnimation(animation.name, animation, 60);\n          precomputedCount++;\n        });\n        console.log(`  ✓ Precomputed ${precomputedCount} animations at 60fps`);\n\n        console.log(\n          \"✅ Animation optimizations ready (expect <5ms frame time, 90%+ cache hit)\",\n        );\n\n        setAppReady(true);\n        console.log(\"🎯 Black Trigram app initialized\");\n      } catch (error) {\n        console.error(\"Failed to initialize app:\", error);\n        setAppReady(true);\n      }\n    };\n\n    initializeApp();\n\n    // Cleanup global event handlers to prevent memory leaks\n    return () => {\n      window.removeEventListener(\"error\", handleGlobalError);\n      window.removeEventListener(\n        \"unhandledrejection\",\n        handleUnhandledRejection,\n      );\n    };\n  }, []);\n\n  // Shared audio initialization logic for splash and retry\n  const initializeAudioWithRetry = useCallback(async () => {\n    if (!appReady) {\n      console.warn(\"App not ready yet, please wait...\");\n      return false;\n    }\n    try {\n      await audio.initializeAudio();\n      console.log(\"🎵 Audio initialized\");\n      return true;\n    } catch (error) {\n      console.error(\"Failed to initialize audio:\", error);\n      return false;\n    }\n  }, [audio, appReady]);\n\n  // Handle splash screen start - initialize audio on user gesture\n  const handleSplashStart = useCallback(async () => {\n    setShowAudioError(false);\n    const success = await initializeAudioWithRetry();\n    if (success) {\n      setShowSplash(false);\n    } else {\n      setShowAudioError(true);\n    }\n  }, [initializeAudioWithRetry]);\n\n  const handleAudioErrorRetry = useCallback(async () => {\n    setShowAudioError(false);\n    const success = await initializeAudioWithRetry();\n    if (success) {\n      setShowSplash(false);\n    } else {\n      setShowAudioError(true);\n    }\n  }, [initializeAudioWithRetry]);\n\n  const handleAudioErrorContinue = useCallback(() => {\n    // Continue without sound\n    setShowAudioError(false);\n    setShowSplash(false);\n    console.log(\"Continuing without audio (silent mode)\");\n  }, []);\n\n  // ✅ SIMPLIFIED: Handle game mode selection directly\n  const handleGameStart = useCallback(\n    (mode: GameMode, archetype?: PlayerArchetype) => {\n      console.log(\"🎮 Starting game mode:\", mode, \"with archetype:\", archetype);\n\n      // Store pending mode and start transition to allow WebGL cleanup\n      pendingModeRef.current = { mode, archetype };\n      setIsTransitioning(true);\n\n      // Clear current mode first (unmounts Canvas)\n      setGameMode(null);\n      setIsGameActive(false);\n\n      // After brief delay, mount new screen\n      // Increased delay to allow proper WebGL context cleanup\n      setTimeout(() => {\n        const pending = pendingModeRef.current;\n        if (!pending) return;\n\n        // ✅ NEW: Handle controls and philosophy as separate modes\n        if (\n          pending.mode === GameMode.CONTROLS ||\n          pending.mode === GameMode.PHILOSOPHY\n        ) {\n          setGameMode(pending.mode);\n          setIsGameActive(false); // These are not game modes, just screens\n        } else {\n          setGameMode(pending.mode);\n          setIsGameActive(true);\n        }\n\n        setGameWinner(null);\n        setMatchStats(null);\n        if (pending.archetype) {\n          setSelectedArchetype(pending.archetype);\n        }\n\n        setIsTransitioning(false);\n        pendingModeRef.current = null;\n      }, SCREEN_TRANSITION_DELAY_MS); // Delay for WebGL cleanup\n    },\n    [],\n  );\n\n  const handleGameEnd = useCallback(\n    (winner: number) => {\n      setIsGameActive(false);\n      setGameWinner(createPlayerFromArchetype(selectedArchetype, winner));\n      // Reset combat players for next match\n      setCombatPlayers([]);\n\n      setMatchStats({\n        totalDamageDealt: 150,\n        totalDamageTaken: 100,\n        criticalHits: 3,\n        vitalPointHits: 2,\n        techniquesUsed: 8,\n        perfectStrikes: 1,\n        consecutiveWins: 1,\n        matchDuration: 120,\n        totalMatches: 1,\n        maxRounds: 3,\n        winner: winner,\n        totalRounds: 2,\n        currentRound: 2,\n        timeRemaining: 0,\n        combatEvents: [],\n        finalScore: {\n          player1: winner === 0 ? 2 : 0,\n          player2: winner === 1 ? 2 : 0,\n        },\n        roundsWon: {\n          player1: winner === 0 ? 2 : 0,\n          player2: winner === 1 ? 2 : 0,\n        },\n        player1: {\n          wins: winner === 0 ? 1 : 0,\n          losses: winner === 0 ? 0 : 1,\n          hitsTaken: 5,\n          hitsLanded: 8,\n          totalDamageDealt: winner === 0 ? 150 : 100,\n          totalDamageReceived: winner === 0 ? 100 : 150,\n          techniques: [\"천둥벽력\", \"유수연타\"],\n          perfectStrikes: winner === 0 ? 1 : 0,\n          vitalPointHits: winner === 0 ? 2 : 1,\n          consecutiveWins: winner === 0 ? 1 : 0,\n          matchDuration: 120,\n        },\n        player2: {\n          wins: winner === 1 ? 1 : 0,\n          losses: winner === 1 ? 0 : 1,\n          hitsTaken: 8,\n          hitsLanded: 5,\n          totalDamageDealt: winner === 1 ? 150 : 100,\n          totalDamageReceived: winner === 1 ? 100 : 150,\n          techniques: [\"화염지창\", \"벽력일섬\"],\n          perfectStrikes: winner === 1 ? 1 : 0,\n          vitalPointHits: winner === 1 ? 2 : 1,\n          consecutiveWins: winner === 1 ? 1 : 0,\n          matchDuration: 120,\n        },\n      });\n    },\n    [selectedArchetype],\n  );\n\n  const handleReturnToMenu = useCallback(() => {\n    // Use same transition logic for return to menu\n    setIsTransitioning(true);\n    setGameMode(null);\n    setIsGameActive(false);\n    setGameWinner(null);\n    setMatchStats(null);\n    // Reset combat players so they reinitialize next combat\n    setCombatPlayers([]);\n    setTimeout(() => setIsTransitioning(false), MENU_TRANSITION_DELAY_MS);\n  }, []);\n\n  const handleRematch = useCallback(() => {\n    // Restart combat with same settings\n    if (!gameMode) {\n      console.error(\n        \"Cannot rematch: gameMode is not set. This should not happen - EndScreen only renders when gameMode is set.\",\n        { gameMode, isGameActive, gameWinner, matchStats }\n      );\n      return;\n    }\n    \n    setIsTransitioning(true);\n    setGameWinner(null);\n    setMatchStats(null);\n    // Reset combat players so they reinitialize for rematch\n    setCombatPlayers([]);\n    \n    setTimeout(() => {\n      setIsGameActive(true);\n      setIsTransitioning(false);\n    }, SCREEN_TRANSITION_DELAY_MS);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- isGameActive, gameWinner, matchStats only used in error logging, not function logic\n  }, [gameMode]);\n\n  const handleViewTraining = useCallback(() => {\n    // Navigate to training mode\n    setIsTransitioning(true);\n    setGameWinner(null);\n    setMatchStats(null);\n    setCombatPlayers([]);\n    \n    setTimeout(() => {\n      setGameMode(GameMode.TRAINING);\n      setIsGameActive(true);\n      setIsTransitioning(false);\n    }, SCREEN_TRANSITION_DELAY_MS);\n  }, []);\n\n  const renderCurrentScreen = () => {\n    // Show loading during screen transitions\n    if (isTransitioning) {\n      return (\n        <LoadingState\n          progress={undefined}\n          message=\"전환 중... | Transitioning...\"\n          stage=\"assets\"\n        />\n      );\n    }\n\n    if (gameWinner && matchStats) {\n      // ✅ NEW: Use EndScreen3D component\n      return (\n        <EndScreen3D\n          winner={gameWinner}\n          matchStats={matchStats}\n          onReturnToMenu={handleReturnToMenu}\n          onRematch={handleRematch}\n          onViewReplay={handleViewTraining}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n      );\n    }\n\n    // ✅ NEW: Handle standalone screens first\n    if (gameMode === GameMode.CONTROLS) {\n      return (\n        <ControlsScreen\n          onReturnToMenu={handleReturnToMenu}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n      );\n    }\n\n    if (gameMode === GameMode.PHILOSOPHY) {\n      return (\n        <PhilosophyScreen\n          onReturnToMenu={handleReturnToMenu}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n      );\n    }\n\n    // ✅ SIMPLIFIED: Only active game modes use isGameActive\n    if (isGameActive && gameMode) {\n      switch (gameMode) {\n        case GameMode.TRAINING:\n          return (\n            <Suspense\n              fallback={\n                <LoadingState\n                  progress={undefined}\n                  message=\"훈련장 로딩 중... | Loading Training...\"\n                  stage=\"assets\"\n                />\n              }\n            >\n              <TrainingScreen\n                onPlayerUpdate={(updates) => {\n                  console.log(\"Training player updated:\", updates);\n                }}\n                onReturnToMenu={handleReturnToMenu}\n                width={screenSize.width}\n                height={screenSize.height}\n                initialArchetype={selectedArchetype}\n              />\n            </Suspense>\n          );\n        case GameMode.VERSUS:\n        case GameMode.PRACTICE:\n          // Initialize players if not already set\n          if (combatPlayers.length === 0) {\n            const player1 = createPlayerFromArchetype(selectedArchetype, 0);\n            const player2 = createPlayerFromArchetype(\n              PlayerArchetype.AMSALJA,\n              1,\n            );\n            // Use setTimeout to defer state update and avoid render-during-render\n            setTimeout(() => setCombatPlayers([player1, player2]), 0);\n            // Return loading state while players initialize\n            return (\n              <LoadingState\n                progress={undefined}\n                message=\"전투 준비 중... | Preparing Combat...\"\n                stage=\"assets\"\n              />\n            );\n          }\n\n          return (\n            <CombatScreen\n              players={combatPlayers}\n              currentRound={1}\n              timeRemaining={180}\n              isPaused={false}\n              onPlayerUpdate={(playerIndex, updates) => {\n                // Actually update the player state so damage persists!\n                setCombatPlayers((prevPlayers) => {\n                  const newPlayers = [...prevPlayers];\n                  if (newPlayers[playerIndex]) {\n                    newPlayers[playerIndex] = {\n                      ...newPlayers[playerIndex],\n                      ...updates,\n                    };\n                  }\n                  return newPlayers;\n                });\n              }}\n              onReturnToMenu={handleReturnToMenu}\n              onGameEnd={handleGameEnd}\n              gameMode={gameMode}\n              width={screenSize.width}\n              height={screenSize.height}\n            />\n          );\n        default:\n          return (\n            <IntroScreen\n              onMenuSelect={handleGameStart}\n              onArchetypeSelect={setSelectedArchetype}\n              selectedArchetype={selectedArchetype}\n              width={screenSize.width}\n              height={screenSize.height}\n            />\n          );\n      }\n    }\n\n    // ✅ SIMPLIFIED: Default to intro screen\n    return (\n      <IntroScreen\n        onMenuSelect={handleGameStart}\n        onArchetypeSelect={setSelectedArchetype}\n        selectedArchetype={selectedArchetype}\n        width={screenSize.width}\n        height={screenSize.height}\n      />\n    );\n  };\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, [appReady]);\n\n  useEffect(() => {\n    const handleResize = () => {\n      // Clear cached platform info to get fresh detection on resize\n      clearPlatformCache();\n      const platform = detectPlatform();\n      setScreenSize({\n        width: platform.screenWidth,\n        height: platform.screenHeight,\n        isMobile: platform.isMobile,\n        isTablet: platform.isTablet,\n        isDesktop: platform.isDesktop,\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  // F9 key toggle for performance debug overlay (dev mode only)\n  // Note: P key is reserved for Philosophy screen\n  useEffect(() => {\n    if (!import.meta.env.DEV) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"F9\") {\n        e.preventDefault();\n        setShowPerformanceDebug((prev) => !prev);\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, []);\n\n  if (!appReady) {\n    return (\n      <div className=\"app loading\" data-testid=\"app-container\">\n        <LoadingState\n          progress={undefined}\n          message=\"앱 초기화 중 | Initializing app...\"\n          stage=\"initialization\"\n        />\n      </div>\n    );\n  }\n\n  // Show splash screen first to get user gesture for audio\n  if (showSplash) {\n    return (\n      <div className=\"app\" data-testid=\"app-container\">\n        <SplashScreen\n          onStart={handleSplashStart}\n          width={screenSize.width}\n          height={screenSize.height}\n        />\n        {showAudioError && (\n          <ErrorModal\n            message=\"오디오 초기화에 실패했습니다. 재시도하거나 소리 없이 계속할 수 있습니다. | Audio initialization failed. You can retry or continue without sound.\"\n            onRetry={handleAudioErrorRetry}\n            onContinue={handleAudioErrorContinue}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"app\"\n      tabIndex={0}\n      ref={containerRef}\n      style={{\n        outline: \"none\",\n        width: \"100vw\",\n        height: \"100vh\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"app-container\"\n    >\n      {/* All screens now use Three.js or pure React/HTML */}\n      {renderCurrentScreen()}\n\n      {/* Performance debug overlay (dev mode only, toggle with P key) */}\n      {showPerformanceDebug && <PerformanceDebugOverlayHtml />}\n    </div>\n  );\n}\n\nexport default App;\n"],"mappings":"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"}

package/lib/assets/index.css

@@ -13,10 +13,10 @@ body {
   font-family: var(--font-korean);
   background: linear-gradient(
     135deg,
-    var(--korean-bg-dark) 0%,
-    var(--korean-bg-medium) 100%
+    var(--color-bg-dark) 0%,
+    var(--color-bg-medium) 100%
   );
-  color: var(--korean-text-primary);
+  color: var(--color-text-primary);
   overflow: hidden;
   user-select: none;
 }
@@ -28,15 +28,15 @@ body {
   align-items: center;
   background: radial-gradient(
     ellipse at center,
-    var(--korean-bg-medium) 0%,
-    var(--korean-bg-dark) 100%
+    var(--color-bg-medium) 0%,
+    var(--color-bg-dark) 100%
   );
 }
 /* Korean Text Enhancement */
 .korean-text {
   font-family: var(--font-korean);
   font-weight: 400;
-  text-shadow: 0 0 8px var(--korean-glow);
+  text-shadow: 0 0 8px var(--color-korean-east);
   letter-spacing: 0.02em;
 }
 .korean-title {
@@ -45,42 +45,42 @@ body {
   font-size: 3rem;
   background: linear-gradient(
     45deg,
-    var(--korean-primary),
-    var(--korean-accent)
+    var(--color-accent-cyan),
+    var(--color-warning)
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  text-shadow: 0 0 20px var(--korean-primary);
+  text-shadow: 0 0 20px var(--color-accent-cyan);
 }
 .cyber-text {
   font-family: var(--font-cyber);
-  color: var(--korean-primary);
+  color: var(--color-accent-cyan);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   text-shadow: 0 0 10px currentColor;
 }
 /* Cyberpunk UI Elements */
 .cyberpunk-border {
-  border: 2px solid var(--korean-primary);
+  border: 2px solid var(--color-accent-cyan);
   border-image: linear-gradient(
       45deg,
-      var(--korean-primary),
-      var(--korean-accent),
-      var(--korean-primary)
+      var(--color-accent-cyan),
+      var(--color-warning),
+      var(--color-accent-cyan)
     )
     1;
-  box-shadow: 0 0 10px var(--korean-primary),
-    inset 0 0 10px rgba(0, 212, 255, 0.1);
+  box-shadow: 0 0 10px var(--color-accent-cyan),
+    inset 0 0 10px color-mix(in srgb, var(--color-accent-cyan) 10%, transparent);
 }
 .cyberpunk-button {
   background: linear-gradient(
     135deg,
-    rgba(0, 212, 255, 0.1),
-    rgba(255, 183, 0, 0.1)
+    color-mix(in srgb, var(--color-accent-cyan) 10%, transparent),
+    color-mix(in srgb, var(--color-warning) 10%, transparent)
   );
-  border: 1px solid var(--korean-primary);
-  color: var(--korean-text-primary);
+  border: 1px solid var(--color-accent-cyan);
+  color: var(--color-text-primary);
   padding: 0.8rem 1.5rem;
   cursor: pointer;
   transition: all 0.3s ease;
@@ -92,10 +92,10 @@ body {
 .cyberpunk-button:hover {
   background: linear-gradient(
     135deg,
-    rgba(0, 212, 255, 0.2),
-    rgba(255, 183, 0, 0.2)
+    color-mix(in srgb, var(--color-accent-cyan) 20%, transparent),
+    color-mix(in srgb, var(--color-warning) 20%, transparent)
   );
-  box-shadow: 0 0 20px var(--korean-primary);
+  box-shadow: 0 0 20px var(--color-accent-cyan);
   transform: translateY(-2px);
 }
 .cyberpunk-button:before {
@@ -108,7 +108,7 @@ body {
   background: linear-gradient(
     90deg,
     transparent,
-    rgba(255, 255, 255, 0.2),
+    color-mix(in srgb, var(--color-text-primary) 20%, transparent),
     transparent
   );
   transition: left 0.5s;
@@ -124,15 +124,15 @@ body {
   right: 0;
   background: linear-gradient(
     180deg,
-    rgba(10, 10, 15, 0.9) 0%,
+    color-mix(in srgb, var(--color-bg-dark) 90%, transparent) 0%,
     transparent 100%
   );
   padding: 1rem;
-  border-bottom: 1px solid var(--korean-primary);
+  border-bottom: 1px solid var(--color-accent-cyan);
 }
 .health-bar {
-  background: var(--korean-bg-dark);
-  border: 1px solid var(--korean-primary);
+  background: var(--color-bg-dark);
+  border: 1px solid var(--color-accent-cyan);
   height: 8px;
   border-radius: 4px;
   overflow: hidden;
@@ -141,9 +141,9 @@ body {
 .health-bar-fill {
   background: linear-gradient(
     90deg,
-    var(--korean-danger) 0%,
-    var(--korean-accent) 50%,
-    var(--korean-glow) 100%
+    var(--color-danger) 0%,
+    var(--color-warning) 50%,
+    var(--color-korean-east) 100%
   );
   height: 100%;
   transition: width 0.3s ease;
@@ -153,10 +153,10 @@ body {
 @keyframes korean-glow {
   0%,
   100% {
-    text-shadow: 0 0 5px var(--korean-glow);
+    text-shadow: 0 0 5px var(--color-korean-east);
   }
   50% {
-    text-shadow: 0 0 20px var(--korean-glow);
+    text-shadow: 0 0 20px var(--color-korean-east);
   }
 }
 .animate-glow {
@@ -164,13 +164,13 @@ body {
 }
 @keyframes combat-flash {
   0% {
-    background-color: rgba(255, 51, 102, 0.1);
+    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
   }
   50% {
-    background-color: rgba(255, 51, 102, 0.3);
+    background-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
   }
   100% {
-    background-color: rgba(255, 51, 102, 0.1);
+    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
   }
 }
 .combat-flash {
@@ -232,8 +232,8 @@ body {
 }
 /* Loading and Error States */
 .loading-spinner {
-  border: 2px solid var(--korean-bg-medium);
-  border-top: 2px solid var(--korean-primary);
+  border: 2px solid var(--color-bg-medium);
+  border-top: 2px solid var(--color-accent-cyan);
   border-radius: 50%;
   width: 40px;
   height: 40px;
@@ -249,9 +249,9 @@ body {
   }
 }
 .error-message {
-  color: var(--korean-danger);
-  background: rgba(255, 51, 102, 0.1);
-  border: 1px solid var(--korean-danger);
+  color: var(--color-danger);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
+  border: 1px solid var(--color-danger);
   padding: 1rem;
   border-radius: 4px;
   margin: 1rem 0;
@@ -368,8 +368,8 @@ body {
   bottom: 0;
   background: radial-gradient(
     circle at center,
-    rgba(139, 0, 0, 0.1) 0%,
-    rgba(0, 0, 0, 1) 70%
+    color-mix(in srgb, var(--color-korean-south) 10%, transparent) 0%,
+    var(--color-primary-black) 70%
   );
   pointer-events: none;
   z-index: -1;
@@ -444,12 +444,12 @@ body {
 }
 .app-header {
   padding: 1rem 2rem;
-  background: rgba(0, 10, 18, 0.9);
-  border-bottom: 2px solid #ffd700;
+  background: color-mix(in srgb, var(--color-bg-dark) 90%, transparent);
+  border-bottom: 2px solid var(--color-primary-gold);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary-gold) 30%, transparent);
 }
 .app-title {
   margin: 0;
@@ -460,14 +460,14 @@ body {
 .korean-title {
   font-size: 1.8rem;
   font-weight: bold;
-  color: #ffd700;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  color: var(--color-primary-gold);
+  text-shadow: 2px 2px 4px color-mix(in srgb, var(--color-primary-black) 80%, transparent);
 }
 .english-title {
   font-size: 1rem;
-  color: #87ceeb;
+  color: var(--color-info);
   font-style: italic;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
+  text-shadow: 1px 1px 2px color-mix(in srgb, var(--color-primary-black) 60%, transparent);
 }
 .app-status {
   display: flex;
@@ -483,14 +483,14 @@ body {
   font-weight: bold;
 }
 .phase-indicator {
-  background: rgba(255, 215, 0, 0.2);
-  color: #ffd700;
-  border: 1px solid #ffd700;
+  background: color-mix(in srgb, var(--color-primary-gold) 20%, transparent);
+  color: var(--color-primary-gold);
+  border: 1px solid var(--color-primary-gold);
 }
 .time-indicator {
-  background: rgba(135, 206, 235, 0.2);
-  color: #87ceeb;
-  border: 1px solid #87ceeb;
+  background: color-mix(in srgb, var(--color-info) 20%, transparent);
+  color: var(--color-info);
+  border: 1px solid var(--color-info);
 }
 .app-main {
   flex: 1;
@@ -500,7 +500,7 @@ body {
   overflow: hidden;
 }
 .app-debug {
-  background: rgba(0, 0, 0, 0.8);
+  background: color-mix(in srgb, var(--color-primary-black) 80%, transparent);
   color: #00ff00;
   font-family: "Courier New", monospace;
   font-size: 0.8rem;
@@ -510,7 +510,7 @@ body {
 .app-debug summary {
   padding: 0.5rem;
   cursor: pointer;
-  background: rgba(0, 255, 0, 0.1);
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
   border-bottom: 1px solid #00ff00;
 }
 .app-debug pre {
@@ -550,12 +550,12 @@ body {
   bottom: 0;
   background-image: radial-gradient(
       circle at 20% 20%,
-      rgba(255, 215, 0, 0.05) 0%,
+      color-mix(in srgb, var(--color-primary-gold) 5%, transparent) 0%,
       transparent 50%
     ),
     radial-gradient(
       circle at 80% 80%,
-      rgba(135, 206, 235, 0.05) 0%,
+      color-mix(in srgb, var(--color-info) 5%, transparent) 0%,
       transparent 50%
     );
   pointer-events: none;
@@ -580,7 +580,7 @@ body {
   font-weight: 700;
   color: #ffd700;
   margin-bottom: 1rem;
-  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
+  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary-gold) 50%, transparent);
 }
 .english-subtitle {
   font-size: 1.2rem;
@@ -644,7 +644,7 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  color: var(--primary-cyan);
+  color: var(--color-primary-cyan);
 }
 .error-screen {
   position: absolute;
@@ -655,7 +655,7 @@ body {
   color: #ff4136;
   padding: 2rem;
   border: 1px solid #ff4136;
-  background: rgba(255, 65, 54, 0.1);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
 }
 /* Fix UI overlay positioning to not interfere with canvas visibility */
 .test-overlay {
@@ -823,14 +823,14 @@ body {
 /* Timer Flash - Final seconds warning */
 @keyframes timerFlash {
   0%, 100% {
-    color: #ff4444;
-    text-shadow: 0 0 10px rgba(255, 68, 68, 0.8),
-                 0 0 20px rgba(255, 68, 68, 0.5);
+    color: var(--color-korean-south);
+    text-shadow: 0 0 10px color-mix(in srgb, var(--color-korean-south) 80%, transparent),
+                 0 0 20px color-mix(in srgb, var(--color-korean-south) 50%, transparent);
   }
   50% {
-    color: #ffaa00;
-    text-shadow: 0 0 15px rgba(255, 170, 0, 1),
-                 0 0 30px rgba(255, 170, 0, 0.7);
+    color: var(--color-korean-center);
+    text-shadow: 0 0 15px var(--color-korean-center),
+                 0 0 30px color-mix(in srgb, var(--color-korean-center) 70%, transparent);
   }
 }
 
@@ -1006,9 +1006,9 @@ body {
 .training-button {
   width: 100%;
   height: 40px;
-  border: 2px solid rgba(255, 255, 255, 0.8);
+  border: 2px solid color-mix(in srgb, var(--color-text-primary) 80%, transparent);
   border-radius: 8px;
-  color: #ffffff;
+  color: var(--color-text-primary);
   font-weight: bold;
   cursor: pointer;
   display: flex;
@@ -1019,11 +1019,11 @@ body {
 }
 
 .training-button-start {
-  background: #00ff88;
+  background: var(--color-success);
 }
 
 .training-button-stop {
-  background: #ff4444;
+  background: var(--color-korean-south);
 }
 
 .training-button:hover {
@@ -1033,52 +1033,52 @@ body {
 
 /* Training Mode Selector */
 .mode-button {
-  background: rgba(45, 45, 45, 0.5);
-  border: 2px solid rgba(0, 255, 255, 0.4);
+  background: color-mix(in srgb, var(--color-bg-light) 50%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-primary-cyan) 40%, transparent);
   border-radius: 8px;
   padding: 10px;
   cursor: pointer;
   text-align: left;
-  color: #ffffff;
+  color: var(--color-text-primary);
   transition: all 0.2s ease;
 }
 
 .mode-button.selected {
-  background: rgba(0, 255, 255, 0.25);
-  border-color: #00ffff;
-  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
+  background: color-mix(in srgb, var(--color-primary-cyan) 25%, transparent);
+  border-color: var(--color-primary-cyan);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-cyan) 50%, transparent);
 }
 
 .mode-button:not(.selected):hover {
-  background: rgba(64, 64, 64, 0.7);
-  border-color: #00ffff;
+  background: color-mix(in srgb, var(--color-gray-300) 70%, transparent);
+  border-color: var(--color-primary-cyan);
   transform: scale(1.02);
 }
 
 .mode-button:focus-visible {
-  outline: 2px solid #00ffff;
+  outline: 2px solid var(--color-primary-cyan);
   outline-offset: 2px;
-  box-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-cyan) 80%, transparent);
 }
 
 /* Vital Point Button */
 .vital-point-button {
-  background: rgba(45, 45, 45, 0.5);
-  border: 2px solid rgba(255, 170, 0, 0.5);
+  background: color-mix(in srgb, var(--color-bg-light) 50%, transparent);
+  border: 2px solid color-mix(in srgb, var(--color-korean-center) 50%, transparent);
   border-radius: 8px;
   padding: 8px;
   cursor: pointer;
   text-align: left;
-  color: #ffffff;
+  color: var(--color-text-primary);
   transition: all 0.2s ease;
 }
 
 .vital-point-button.selected {
-  background: rgba(255, 170, 0, 0.3);
+  background: color-mix(in srgb, var(--color-korean-center) 30%, transparent);
 }
 
 .vital-point-button:not(.selected):hover {
-  background: rgba(64, 64, 64, 0.7);
+  background: color-mix(in srgb, var(--color-gray-300) 70%, transparent);
 }
 
 /* Training Feedback Animation - Fast and snappy */
@@ -1097,12 +1097,12 @@ body {
 }
 
 .training-feedback {
-  background: rgba(0, 0, 0, 0.9);
-  border: 3px solid #ffd700;
+  background: color-mix(in srgb, var(--color-primary-black) 90%, transparent);
+  border: 3px solid var(--color-primary-gold);
   border-radius: 16px;
-  color: #ffd700;
+  color: var(--color-primary-gold);
   text-align: center;
-  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
+  box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary-gold) 50%, transparent);
   animation: feedbackPulse 0.4s ease-out;
   min-width: 200px;
 }
@@ -1133,7 +1133,7 @@ body {
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: #00ff88;
+  background: var(--color-success);
 }
 
 .status-indicator.active {
@@ -1141,6 +1141,6 @@ body {
 }
 
 .status-indicator.inactive {
-  background: #888888;
+  background: var(--color-gray-500);
 }
 /*$vite$:1*/

package/lib/components/index.d.ts

@@ -1,5 +1,14 @@
 export * from "./screens/combat";
 export { TrainingScreen3D } from "./screens/training";
+export type { TrainingScreen3DProps } from "./screens/training";
+export { EndScreen3D } from "./screens/endscreen";
+export type { EndScreen3DProps } from "./screens/endscreen";
+export { ControlsScreen3D } from "./screens/controls/ControlsScreen3D";
+export type { ControlsScreen3DProps } from "./screens/controls/ControlsScreen3D";
+export { IntroScreen3D } from "./screens/intro/IntroScreen3D";
+export type { IntroScreen3DProps } from "./screens/intro/IntroScreen3D";
+export { PhilosophyScreen3D } from "./screens/philosophy/PhilosophyScreen3D";
+export type { PhilosophyScreen3DProps } from "./screens/philosophy/PhilosophyScreen3D";
 export { ArchetypeCard, KoreanButton, KoreanPanel, KoreanText as KoreanText3D, MenuList, ProgressBar, } from "./shared/three";
 export type { ArchetypeCardProps, KoreanButtonProps, KoreanPanelProps, KoreanTextProps, MenuItem, MenuListProps, ProgressBarProps, ProgressBarType, } from "./shared/three";
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EACL,aAAa,EACb,YAAY,EACZ,WAAW,EACX,UAAU,IAAI,YAAY,EAC1B,QAAQ,EACR,WAAW,GACZ,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,YAAY,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAGvF,OAAO,EACL,aAAa,EACb,YAAY,EACZ,WAAW,EACX,UAAU,IAAI,YAAY,EAC1B,QAAQ,EACR,WAAW,GACZ,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,eAAe,GAChB,MAAM,gBAAgB,CAAC"}