blacktrigram 0.7.2

package/lib/components/screens/training/TrainingScreen3D.js

@@ -0,0 +1,947 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import { AnimationState } from "../../../systems/animation/core/types.js";
+import { CombatState, PlayerArchetype } from "../../../types/common.js";
+import { getPerformanceSettings } from "../../../types/constants/performance.js";
+import "../../../types/constants/index.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import "../../../types/index.js";
+import { TRIGRAM_STANCES_ORDER } from "../../../systems/trigram/types.js";
+import { AnimationType } from "../../../systems/animation/builders/MartialArtsConstants.js";
+import { calculateDistance3D } from "../../../utils/math.js";
+import { getAnimationForTechniqueOrDefault } from "../../../systems/animation/core/TechniqueAnimationMapping.js";
+import { getAnimationForTechnique } from "../../../systems/animation/core/AnimationRegistry.js";
+import "../../../systems/animation/index.js";
+import { usePlayerAnimation } from "../../../hooks/usePlayerAnimation.js";
+import useTechniqueSelection from "../../../hooks/useTechniqueSelection.js";
+import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import { DEFAULT_BODY_RADIUS_METERS } from "../../../types/physicsConstants.js";
+import { MovementType, SpeedModifierSystem } from "../../../systems/physics/SpeedModifierSystem.js";
+import { physicalReachCalculator } from "../../../systems/physics/PhysicalReachCalculator.js";
+import "../../../systems/physics/index.js";
+import { getArchetypePhysicalAttributes } from "../../../data/archetypePhysicalAttributes.js";
+import { usePlayerMovement } from "../../../utils/inputSystem.js";
+import { createCameraConfig } from "../../../utils/sharedPhysicsConfig.js";
+import { useKoreanTheme } from "../../shared/base/useKoreanTheme.js";
+import VitalPointMarkers3D from "../../shared/three/effects/VitalPointMarkers3D.js";
+import { StanceChangeIndicator } from "../../shared/three/indicators/StanceChangeIndicator.js";
+import CombatArena3D from "../../shared/three/scene/CombatArena3D.js";
+import { animationStateToPlayerAnimation, convertPlayerStateToProps } from "../../../utils/player3DHelpers.js";
+import MobileControlsOverlay from "../../shared/mobile/MobileControlsPure.js";
+import { StanceWheelPure } from "../../shared/mobile/StanceWheelPure.js";
+import { GestureRecognizerPure } from "../../shared/mobile/GestureRecognizerPure.js";
+import "../../shared/mobile/index.js";
+import Player3DWithTransitions from "../../shared/three/models/Player3DWithTransitions.js";
+import { STEP_DISTANCE_THRESHOLDS, isRunningSpeed } from "../../../systems/movement/helpers/accelerationUtils.js";
+import AccelerationUpdater from "../../../systems/movement/helpers/AccelerationUpdater.js";
+import useCombatAudio from "../combat/hooks/useCombatAudio.js";
+import { getMobileControlsBottom } from "../../../types/constants/layout.js";
+import "../../shared/three/index.js";
+import VitalPointOverlayControlsPure from "../../shared/ui/VitalPointOverlayControlsPure.js";
+import AnatomyOverlay3D from "./components/AnatomyOverlay3D.js";
+import FootPlacementMarkers3D from "./components/FootPlacementMarkers3D.js";
+import HitFeedbackEffect3D from "./components/HitFeedbackEffect3D.js";
+import TrainingDummy3D from "./components/TrainingDummy3D.js";
+import TrainingBottomHUD from "./components/hud/TrainingBottomHUD.js";
+import TrainingLeftHUD from "./components/hud/TrainingLeftHUD.js";
+import TrainingRightHUD from "./components/hud/TrainingRightHUD.js";
+import TrainingTopHUD from "./components/hud/TrainingTopHUD.js";
+import "./components/hud/index.js";
+import useAttackMovement from "./hooks/useAttackMovement.js";
+import useTrainingActions from "./hooks/useTrainingActions.js";
+import { useTrainingLayout } from "./hooks/useTrainingLayout.js";
+import useTrainingState from "./hooks/useTrainingState.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Bloom, EffectComposer, Noise, Vignette } from "@react-three/postprocessing";
+import * as THREE from "three";
+//#region src/components/screens/training/TrainingScreen3D.tsx
+/**
+* TrainingScreen3D - Three.js-based training screen
+*
+* Refactored to use consolidated hooks matching CombatScreen architecture.
+* Provides 3D training dummy with vital point targeting and UI overlays.
+*
+* UI Rendering: All HUD elements are rendered in an absolute-positioned div
+* OUTSIDE the Canvas, matching CombatScreen's reliable rendering pattern.
+* This eliminates the need for Html overlays inside Three.js and ensures
+* HUDs appear immediately without waiting for Canvas initialization.
+*
+* Architecture (Consolidated in PR #1394 + Issue #1398):
+* - TrainingLeftHUD: Anatomy controls, guard indicator
+* - TrainingRightHUD: Training stats, mode selector, vital point selection
+* - TrainingTopHUD: Training controls, archetype selector, return button
+* - TrainingBottomHUD: Technique bar, feedback messages, mobile controls
+* - VitalPointOverlayControlsPure: Vital point overlay controls (pure DOM)
+*
+* All UI components render as pure DOM in the HUD overlay div (lines 1230+).
+* NO Html components from @react-three/drei are used inside the Canvas.
+* This ensures clean separation of 3D rendering and UI layers.
+*
+* @korean 훈련화면3D - 훈련 상태 훅을 사용한 리팩토링된 3D 훈련 화면
+*/
+var TrainingAnimationUpdater = ({ playerAnimation }) => {
+	useFrame((_state, delta) => {
+		playerAnimation.update(delta);
+	});
+	return null;
+};
+/**
+* TrainingScreen3D Component
+* Three.js-based training screen with 3D dummy and Html UI
+*
+* Uses consolidated hooks for state management matching CombatScreen architecture.
+*/
+var TrainingScreen3D = ({ onPlayerUpdate, onReturnToMenu, width = 1200, height = 800, initialArchetype = PlayerArchetype.MUSA }) => {
+	const { state: trainingState, actions: trainingActions } = useTrainingState();
+	const audio = useAudio();
+	const { playBoneImpactSound, playAttackSound, playStanceChangeSound } = useCombatAudio();
+	const { trainingAreaBounds, isMobile, screenSize } = useTrainingLayout(width, height);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const positionScale = React.useMemo(() => {
+		switch (screenSize) {
+			case "mobile": return 1;
+			case "tablet": return 1;
+			case "desktop": return 1;
+			case "large": return 1.25;
+			case "xlarge": return 1.5;
+			default: return 1;
+		}
+	}, [screenSize]);
+	const difficulty = "normal";
+	const vitalPointCount = 70;
+	const [selectedArchetype, setSelectedArchetype] = React.useState(initialArchetype);
+	const [overlayVisible, setOverlayVisible] = React.useState(false);
+	const [severityFilters, setSeverityFilters] = React.useState([]);
+	const [regionFilter, setRegionFilter] = React.useState("all");
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [showLabels, setShowLabels] = React.useState(true);
+	const [animated, setAnimated] = React.useState(true);
+	const [scale, setScale] = React.useState(1.2);
+	const [attackAnimation, setAttackAnimation] = React.useState(void 0);
+	React.useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "v" || e.key === "V") {
+				setOverlayVisible((prev) => !prev);
+				audio.playSFX("menu_select");
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [audio]);
+	const contextLossCountRef = useRef(0);
+	useWebGLContextLossHandler({
+		onContextLost: () => {
+			console.warn("⚠️ WebGL context lost in TrainingScreen");
+			contextLossCountRef.current += 1;
+		},
+		onContextRestored: () => {
+			console.log("✓ WebGL context restored in TrainingScreen");
+		},
+		autoRestore: true
+	});
+	const speedModifierSystem = useMemo(() => new SpeedModifierSystem(), []);
+	const [speedModifiers, setSpeedModifiers] = useState({
+		finalSpeed: 6,
+		baseSpeed: 6,
+		finalAcceleration: 12
+	});
+	const [walkRunSpeeds, setWalkRunSpeeds] = useState({
+		walkSpeed: 6,
+		runSpeed: 10
+	});
+	const initialPositionMeters = useMemo(() => ({
+		x: trainingAreaBounds.worldWidthMeters * 0,
+		y: 0
+	}), [trainingAreaBounds]);
+	const handlePositionChange = useCallback((newPosition) => {
+		onPlayerUpdate({ position: newPosition });
+	}, [onPlayerUpdate]);
+	const movementBounds = useMemo(() => ({
+		worldWidthMeters: trainingAreaBounds.worldWidthMeters,
+		worldDepthMeters: trainingAreaBounds.worldDepthMeters
+	}), [trainingAreaBounds.worldWidthMeters, trainingAreaBounds.worldDepthMeters]);
+	const movementTimeRef = useRef(0);
+	const lastDirectionRef = useRef({
+		x: 0,
+		y: 0
+	});
+	const [accelerationBasedSpeed, setAccelerationBasedSpeed] = useState(walkRunSpeeds.walkSpeed);
+	const isRunning = isRunningSpeed(accelerationBasedSpeed, walkRunSpeeds.runSpeed);
+	const { playerPosition, isMoving, velocity } = usePlayerMovement({
+		enabled: true,
+		bounds: movementBounds,
+		onPositionChange: handlePositionChange,
+		initialPositionMeters,
+		currentStance: TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex],
+		legInjuryFactor: 0,
+		isRunning,
+		maxSpeedOverride: accelerationBasedSpeed,
+		accelerationOverride: speedModifiers.finalAcceleration
+	});
+	const player3DPosition = useMemo(() => {
+		return [
+			playerPosition.x,
+			0,
+			playerPosition.y
+		];
+	}, [playerPosition]);
+	const dummyPosition = useMemo(() => [
+		trainingAreaBounds.worldWidthMeters * .15,
+		0,
+		0
+	], [trainingAreaBounds.worldWidthMeters]);
+	const centerToCenterDistance = useMemo(() => calculateDistance3D(player3DPosition, dummyPosition), [player3DPosition, dummyPosition]);
+	const distanceToDummy = useMemo(() => Math.max(0, centerToCenterDistance - DEFAULT_BODY_RADIUS_METERS), [centerToCenterDistance]);
+	const lastFacingRotationRef = useRef(0);
+	const playerRotation = useMemo(() => {
+		if (isMoving && velocity && (velocity.x !== 0 || velocity.y !== 0)) return Math.atan2(velocity.x, velocity.y);
+		else {
+			const dx = dummyPosition[0] - player3DPosition[0];
+			const dz = dummyPosition[2] - player3DPosition[2];
+			return Math.atan2(dx, dz);
+		}
+	}, [
+		isMoving,
+		velocity,
+		player3DPosition,
+		dummyPosition
+	]);
+	useEffect(() => {
+		lastFacingRotationRef.current = playerRotation;
+	}, [playerRotation]);
+	const [currentLaterality, setCurrentLaterality] = useState("right");
+	const stepCounterRef = useRef(0);
+	const lastPositionRef = useRef(playerPosition);
+	useEffect(() => {
+		if (!isMoving) {
+			stepCounterRef.current = 0;
+			lastPositionRef.current = playerPosition;
+			return;
+		}
+		const dx = playerPosition.x - lastPositionRef.current.x;
+		const dy = playerPosition.y - lastPositionRef.current.y;
+		const distanceMoved = Math.sqrt(dx * dx + dy * dy);
+		const stepThreshold = isRunning ? STEP_DISTANCE_THRESHOLDS.RUN : STEP_DISTANCE_THRESHOLDS.WALK;
+		stepCounterRef.current += distanceMoved;
+		const stepsCrossed = Math.floor(stepCounterRef.current / stepThreshold);
+		if (stepsCrossed > 0) {
+			if (stepsCrossed % 2 === 1) setCurrentLaterality((prev) => prev === "right" ? "left" : "right");
+			stepCounterRef.current -= stepsCrossed * stepThreshold;
+		}
+		lastPositionRef.current = playerPosition;
+	}, [
+		playerPosition,
+		isMoving,
+		isRunning
+	]);
+	const pendingAttackRef = useRef(null);
+	const handleDummyHitRef = useRef(() => false);
+	const playerAnimationRef = useRef(null);
+	const playerAnimation = usePlayerAnimation({ events: useMemo(() => ({
+		onFrame: (frame, state) => {
+			if (state === "attack" && frame === 6 && pendingAttackRef.current) {
+				const attackData = pendingAttackRef.current;
+				handleDummyHitRef.current(attackData.vitalPoint, {
+					animationType: attackData.animationType,
+					techniqueId: attackData.techniqueId
+				});
+				pendingAttackRef.current = null;
+			}
+		},
+		onAnimationComplete: (state) => {
+			if (state === "stance_change") {
+				playStanceChangeSound();
+				const currentStance = TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex];
+				if (currentStance && playerAnimationRef.current) playerAnimationRef.current.transitionToStanceGuard(currentStance);
+			}
+		}
+	}), [playStanceChangeSound, trainingState.currentStanceIndex]) });
+	useEffect(() => {
+		playerAnimationRef.current = playerAnimation;
+	}, [playerAnimation]);
+	const currentStance = useMemo(() => TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex], [trainingState.currentStanceIndex]);
+	const [previousStanceIndex, setPreviousStanceIndex] = useState(0);
+	const currentTechniqueAnimationTypeRef = useRef(AnimationType.JAB);
+	const trainingPlayerState = useMemo(() => {
+		return {
+			id: "training-player",
+			name: {
+				korean: "훈련생",
+				english: "Trainee"
+			},
+			archetype: selectedArchetype,
+			health: 100,
+			maxHealth: 100,
+			ki: 100,
+			maxKi: 100,
+			stamina: 100,
+			maxStamina: 100,
+			energy: 100,
+			maxEnergy: 100,
+			attackPower: 10,
+			defense: 10,
+			speed: 10,
+			technique: 10,
+			pain: 0,
+			consciousness: 100,
+			balance: 100,
+			momentum: 0,
+			currentStance: TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex],
+			combatState: CombatState.IDLE,
+			position: playerPosition,
+			isBlocking: false,
+			isStunned: false,
+			isCountering: false,
+			lastActionTime: 0,
+			recoveryTime: 0,
+			lastStanceChangeTime: 0,
+			statusEffects: [],
+			activeEffects: [],
+			vitalPoints: [],
+			totalDamageReceived: 0,
+			totalDamageDealt: 0,
+			hitsTaken: 0,
+			hitsLanded: trainingState.stats.hits,
+			perfectStrikes: trainingState.perfectStrikes,
+			vitalPointHits: 0,
+			misses: trainingState.stats.misses,
+			accuracy: trainingState.stats.accuracy,
+			comboCount: trainingState.stats.combo
+		};
+	}, [
+		playerPosition,
+		trainingState,
+		selectedArchetype
+	]);
+	useEffect(() => {
+		const updateSpeedModifiers = () => {
+			const walkModifiers = speedModifierSystem.calculateSpeedModifiers(trainingPlayerState, MovementType.WALKING, false);
+			const runModifiers = speedModifierSystem.calculateSpeedModifiers(trainingPlayerState, MovementType.RUNNING, false);
+			setSpeedModifiers({
+				finalSpeed: walkModifiers.finalSpeed,
+				baseSpeed: walkModifiers.baseSpeed,
+				finalAcceleration: walkModifiers.finalAcceleration
+			});
+			setWalkRunSpeeds({
+				walkSpeed: walkModifiers.finalSpeed,
+				runSpeed: runModifiers.finalSpeed
+			});
+		};
+		updateSpeedModifiers();
+		const intervalId = setInterval(updateSpeedModifiers, 200);
+		return () => clearInterval(intervalId);
+	}, [trainingPlayerState]);
+	const isPlayerAttacking = useMemo(() => playerAnimation?.currentState === "attack", [playerAnimation]);
+	const attackDirection = useMemo(() => {
+		if (!isPlayerAttacking) return new THREE.Vector3(0, 0, 1);
+		const dx = dummyPosition[0] - player3DPosition[0];
+		const dz = dummyPosition[2] - player3DPosition[2];
+		return new THREE.Vector3(dx, 0, dz).normalize();
+	}, [
+		dummyPosition,
+		player3DPosition,
+		isPlayerAttacking
+	]);
+	const { currentPosition: player3DPositionWithAttackMovement } = useAttackMovement({
+		isAttacking: isPlayerAttacking,
+		animationType: currentTechniqueAnimationTypeRef.current,
+		currentStance: trainingPlayerState.currentStance,
+		basePosition: player3DPosition,
+		attackDirection,
+		animationDuration: .4
+	});
+	const finalPlayer3DPosition = isPlayerAttacking ? player3DPositionWithAttackMovement : player3DPosition;
+	const handleAttackRef = useRef(null);
+	const techniqueSelection = useTechniqueSelection({
+		player: trainingPlayerState,
+		enabled: trainingState.isTraining,
+		onTechniqueExecute: useCallback((technique) => {
+			trainingActions.setFeedback(`${technique.name.korean} 사용! | Used ${technique.name.english}!`);
+			setAttackAnimation(getAnimationForTechnique(technique.name.english || technique.id));
+			handleAttackRef.current?.();
+		}, [trainingActions])
+	});
+	const { handleStartTraining, handleStopTraining, handleDummyHit, handleDummyDefeated, handleStanceChange, handleAttack } = useTrainingActions({
+		state: trainingState,
+		actions: trainingActions,
+		playerPosition,
+		player3DPosition,
+		dummyPosition,
+		playerArchetype: selectedArchetype,
+		playerStance: currentStance,
+		currentTechniqueAnimationTypeRef,
+		audio,
+		playBoneImpactSound,
+		playAttackSound,
+		selectedTechniqueId: useMemo(() => {
+			const techniques = techniqueSelection.availableTechniques;
+			const selectedIdx = techniqueSelection.selectedIndex;
+			if (techniques.length === 0 || selectedIdx < 0 || selectedIdx >= techniques.length) return;
+			return techniques[selectedIdx]?.id;
+		}, [techniqueSelection.availableTechniques, techniqueSelection.selectedIndex]),
+		onPlayerUpdate: (updates) => {
+			onPlayerUpdate(updates);
+		},
+		playerAnimation: {
+			transitionTo: playerAnimation.transitionTo,
+			transitionToStanceGuard: playerAnimation.transitionToStanceGuard,
+			currentState: playerAnimation.currentState
+		},
+		pendingAttackRef
+	});
+	useEffect(() => {
+		handleAttackRef.current = handleAttack;
+	}, [handleAttack]);
+	useEffect(() => {
+		handleDummyHitRef.current = handleDummyHit;
+	}, [handleDummyHit]);
+	const handleStanceChangeWithVisualFeedback = useCallback((stanceIndex) => {
+		setPreviousStanceIndex(trainingState.currentStanceIndex);
+		handleStanceChange(stanceIndex);
+	}, [handleStanceChange, trainingState.currentStanceIndex]);
+	const prevIsMovingRef = useRef(isMoving);
+	const prevIsRunningRef = useRef(isRunning);
+	const prevStanceRef = useRef(currentStance);
+	useEffect(() => {
+		const isMovingChanged = prevIsMovingRef.current !== isMoving;
+		const isRunningChanged = prevIsRunningRef.current !== isRunning;
+		const stanceChanged = prevStanceRef.current !== currentStance;
+		if (isMovingChanged || isRunningChanged) {
+			if (isMoving) if (isRunning) playerAnimation.transitionTo(AnimationState.RUN);
+			else playerAnimation.transitionTo(AnimationState.WALK);
+			else if (playerAnimation.currentState === AnimationState.WALK || playerAnimation.currentState === AnimationState.RUN) playerAnimation.transitionToStanceGuard(currentStance);
+			prevIsMovingRef.current = isMoving;
+			prevIsRunningRef.current = isRunning;
+		}
+		if (stanceChanged && !isMoving) {
+			if (playerAnimation.currentState === AnimationState.IDLE || playerAnimation.isInStanceGuard()) playerAnimation.transitionToStanceGuard(currentStance);
+			prevStanceRef.current = currentStance;
+		}
+	}, [
+		isMoving,
+		isRunning,
+		currentStance,
+		playerAnimation
+	]);
+	const cooldownsMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		techniqueSelection.activeCooldowns.forEach((cd) => {
+			map.set(cd.techniqueId, cd.remaining);
+		});
+		return map;
+	}, [techniqueSelection.activeCooldowns]);
+	const { currentTechniqueReach, currentAnimationType } = useMemo(() => {
+		const techniques = techniqueSelection.availableTechniques;
+		const selectedIdx = techniqueSelection.selectedIndex;
+		if (techniques.length === 0) return {
+			currentTechniqueReach: .7,
+			currentAnimationType: AnimationType.JAB
+		};
+		const currentTechnique = techniques[Math.min(selectedIdx, techniques.length - 1)];
+		if (!currentTechnique) return {
+			currentTechniqueReach: .7,
+			currentAnimationType: AnimationType.JAB
+		};
+		const animConfig = getAnimationForTechniqueOrDefault(currentTechnique.id);
+		const physicalAttributes = getArchetypePhysicalAttributes(selectedArchetype);
+		return {
+			currentTechniqueReach: physicalReachCalculator.calculateMaxReach(physicalAttributes, animConfig.type, currentStance),
+			currentAnimationType: animConfig.type
+		};
+	}, [
+		techniqueSelection.availableTechniques,
+		techniqueSelection.selectedIndex,
+		selectedArchetype,
+		currentStance
+	]);
+	useEffect(() => {
+		currentTechniqueAnimationTypeRef.current = currentAnimationType;
+	}, [currentAnimationType]);
+	const activeMobileKeyRef = useRef(null);
+	const mobileControlsEnabled = isMobile;
+	const handleMobileMove = useCallback((direction, eventType) => {
+		const directionMap = {
+			up: "w",
+			"up-right": "w",
+			right: "d",
+			"down-right": "s",
+			down: "s",
+			"down-left": "s",
+			left: "a",
+			"up-left": "w"
+		};
+		if (eventType === "start" && direction) {
+			if (activeMobileKeyRef.current && activeMobileKeyRef.current !== directionMap[direction]) {
+				const prevKey = activeMobileKeyRef.current;
+				window.dispatchEvent(new KeyboardEvent("keyup", {
+					key: prevKey,
+					code: `Key${prevKey.toUpperCase()}`,
+					bubbles: true,
+					cancelable: true
+				}));
+			}
+			const key = directionMap[direction];
+			activeMobileKeyRef.current = key;
+			window.dispatchEvent(new KeyboardEvent("keydown", {
+				key,
+				code: `Key${key.toUpperCase()}`,
+				bubbles: true,
+				cancelable: true
+			}));
+		} else if (eventType === "end") {
+			if (activeMobileKeyRef.current) {
+				const key = activeMobileKeyRef.current;
+				window.dispatchEvent(new KeyboardEvent("keyup", {
+					key,
+					code: `Key${key.toUpperCase()}`,
+					bubbles: true,
+					cancelable: true
+				}));
+				activeMobileKeyRef.current = null;
+			}
+		}
+	}, []);
+	const handleMobileAttack = useCallback(() => {
+		handleAttack();
+	}, [handleAttack]);
+	const handleMobileBlock = useCallback((eventType) => {
+		if (eventType === "start") audio.playSFX("block");
+	}, [audio]);
+	const handleMobileGesture = useCallback((gesture) => {
+		switch (gesture.type) {
+			case "swipe-right":
+				window.dispatchEvent(new KeyboardEvent("keydown", { key: "d" }));
+				break;
+			case "swipe-left":
+				window.dispatchEvent(new KeyboardEvent("keydown", { key: "a" }));
+				break;
+			case "swipe-up":
+				if (trainingState.isTraining) window.dispatchEvent(new KeyboardEvent("keydown", { key: " " }));
+				break;
+			case "swipe-down":
+				trainingActions.resetDummy();
+				break;
+			case "two-finger-tap":
+				trainingActions.setTrainingMode(trainingState.trainingMode === "vital_point" ? "basics" : "vital_point");
+				audio.playSFX("menu_select");
+				break;
+		}
+	}, [
+		trainingState,
+		trainingActions,
+		audio
+	]);
+	const handleMobileStanceChange = useCallback((stanceIndex) => {
+		handleStanceChangeWithVisualFeedback(stanceIndex);
+	}, [handleStanceChangeWithVisualFeedback]);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			const key = event.key.toLowerCase();
+			if (key === "escape") {
+				onReturnToMenu();
+				return;
+			}
+			if (key >= "1" && key <= "8") {
+				handleStanceChangeWithVisualFeedback(parseInt(key) - 1);
+				event.preventDefault();
+				return;
+			}
+			if (key === " ") {
+				handleAttack();
+				event.preventDefault();
+				return;
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		onReturnToMenu,
+		handleStanceChangeWithVisualFeedback,
+		handleAttack
+	]);
+	const hasMountedRef = useRef(false);
+	useEffect(() => {
+		let audioStarted = false;
+		const startMusic = async () => {
+			try {
+				await audio.fadeIn("cyberpunk_fusion", 2e3);
+				audioStarted = true;
+			} catch (err) {
+				console.warn("Failed to start training music:", err);
+				trainingActions.setFeedback("오디오 초기화 실패 | Audio initialization failed");
+			}
+		};
+		startMusic();
+		return () => {
+			if (audioStarted) audio.fadeOut(2e3).then(() => audio.stopMusic()).catch((err) => console.warn("Failed to stop training music:", err));
+		};
+	}, [audio, trainingActions]);
+	useEffect(() => {
+		if (!hasMountedRef.current) {
+			hasMountedRef.current = true;
+			handleStartTraining();
+		}
+	}, [handleStartTraining]);
+	useEffect(() => {
+		if (trainingState.showFeedback) {
+			const timer = setTimeout(() => trainingActions.hideFeedback(), 1500);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		trainingState.showFeedback,
+		trainingState.feedback,
+		trainingActions
+	]);
+	useEffect(() => {
+		if (!trainingState.isTraining || !trainingState.sessionStartTime) return;
+		const interval = setInterval(() => {
+			trainingActions.updateSessionDuration(Math.floor((Date.now() - (trainingState.sessionStartTime ?? 0)) / 1e3));
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, [
+		trainingState.isTraining,
+		trainingState.sessionStartTime,
+		trainingActions
+	]);
+	const prevTrainingModeRef = useRef(trainingState.trainingMode);
+	const isFirstModeEffectRef = useRef(true);
+	const isTrainingRef = useRef(trainingState.isTraining);
+	const modeChangeTimerRef = useRef(null);
+	useEffect(() => {
+		isTrainingRef.current = trainingState.isTraining;
+	}, [trainingState.isTraining]);
+	const handleStartTrainingRef = useRef(handleStartTraining);
+	const handleStopTrainingRef = useRef(handleStopTraining);
+	useEffect(() => {
+		handleStartTrainingRef.current = handleStartTraining;
+		handleStopTrainingRef.current = handleStopTraining;
+	}, [handleStartTraining, handleStopTraining]);
+	useEffect(() => {
+		if (isFirstModeEffectRef.current) {
+			isFirstModeEffectRef.current = false;
+			prevTrainingModeRef.current = trainingState.trainingMode;
+			return;
+		}
+		if (!(prevTrainingModeRef.current !== trainingState.trainingMode)) return;
+		prevTrainingModeRef.current = trainingState.trainingMode;
+		if (modeChangeTimerRef.current) {
+			clearTimeout(modeChangeTimerRef.current);
+			modeChangeTimerRef.current = null;
+		}
+		if (isTrainingRef.current) handleStopTrainingRef.current();
+		modeChangeTimerRef.current = setTimeout(() => {
+			handleStartTrainingRef.current();
+			modeChangeTimerRef.current = null;
+		}, 100);
+		return () => {
+			if (modeChangeTimerRef.current) {
+				clearTimeout(modeChangeTimerRef.current);
+				modeChangeTimerRef.current = null;
+			}
+		};
+	}, [trainingState.trainingMode]);
+	const handleEffectComplete = useCallback((effectId) => {
+		trainingActions.removeHitEffect(effectId);
+	}, [trainingActions]);
+	const handleAnatomyLayerToggle = useCallback((layer) => {
+		trainingActions.toggleAnatomyLayer(layer);
+		audio.playSFX("menu_click");
+	}, [trainingActions, audio]);
+	const handleVitalPointClick = useCallback((pointId) => {
+		trainingActions.setSelectedVitalPoint(pointId);
+		audio.playSFX("menu_select");
+	}, [trainingActions, audio]);
+	const cameraConfig = useMemo(() => createCameraConfig(isMobile), [isMobile]);
+	const performanceSettings = useMemo(() => {
+		return getPerformanceSettings(width, isMobile);
+	}, [width, isMobile]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: `${width}px`,
+			height: `${height}px`,
+			position: "relative",
+			overflow: "hidden"
+		},
+		"data-testid": "training-screen-3d",
+		children: [/* @__PURE__ */ jsxs(Canvas, {
+			style: {
+				width: `${width}px`,
+				height: `${height}px`
+			},
+			gl: {
+				antialias: performanceSettings.antialias,
+				alpha: false,
+				powerPreference: "high-performance",
+				failIfMajorPerformanceCaveat: false,
+				preserveDrawingBuffer: true
+			},
+			dpr: performanceSettings.dpr,
+			shadows: false,
+			onCreated: ({ gl }) => {
+				gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);
+			},
+			camera: cameraConfig,
+			children: [
+				/* @__PURE__ */ jsx("ambientLight", { intensity: .6 }),
+				/* @__PURE__ */ jsx("directionalLight", {
+					position: [
+						10,
+						10,
+						5
+					],
+					intensity: 1.2
+				}),
+				/* @__PURE__ */ jsx(CombatArena3D, {
+					lighting: "cyberpunk",
+					scale: trainingAreaBounds.scale,
+					worldWidthMeters: trainingAreaBounds.worldWidthMeters,
+					worldDepthMeters: trainingAreaBounds.worldDepthMeters
+				}),
+				/* @__PURE__ */ jsx(TrainingAnimationUpdater, { playerAnimation }),
+				/* @__PURE__ */ jsx(AccelerationUpdater, {
+					isMoving,
+					velocity,
+					movementTimeRef,
+					lastDirectionRef,
+					onSpeedUpdate: setAccelerationBasedSpeed,
+					walkSpeed: walkRunSpeeds.walkSpeed,
+					runSpeed: walkRunSpeeds.runSpeed
+				}),
+				/* @__PURE__ */ jsx(TrainingDummy3D, {
+					position: dummyPosition,
+					selectedVitalPoint: trainingState.selectedVitalPoint,
+					isTraining: trainingState.isTraining,
+					health: trainingState.dummyHealth,
+					onVitalPointHit: handleDummyHit,
+					onDefeated: handleDummyDefeated,
+					difficulty,
+					vitalPointCount,
+					isMobile
+				}),
+				trainingState.visibleAnatomyLayers.length > 0 && /* @__PURE__ */ jsx(AnatomyOverlay3D, {
+					position: dummyPosition,
+					visibleLayers: trainingState.visibleAnatomyLayers,
+					opacity: .6,
+					isMobile
+				}),
+				overlayVisible && /* @__PURE__ */ jsx(VitalPointMarkers3D, {
+					position: dummyPosition,
+					visible: overlayVisible,
+					severityFilter: severityFilters,
+					regionFilter,
+					searchQuery,
+					showLabels,
+					scale,
+					animated,
+					selectedPoint: trainingState.selectedVitalPoint,
+					onPointClick: handleVitalPointClick
+				}),
+				/* @__PURE__ */ jsx(Player3DWithTransitions, {
+					...convertPlayerStateToProps(trainingPlayerState, finalPlayer3DPosition, playerRotation, {
+						isMobile,
+						facing: "right",
+						enableFacialExpressions: true,
+						enableEyeTracking: true,
+						opponentPosition: dummyPosition
+					}),
+					currentAnimation: animationStateToPlayerAnimation(playerAnimation.currentState),
+					attackAnimation,
+					laterality: currentLaterality,
+					enableTransitionEffects: !isMobile,
+					enableStanceSymbol: true,
+					enableStanceAudio: true
+				}),
+				trainingState.trainingMode === "footwork" && trainingState.footworkDrillActive && /* @__PURE__ */ jsx(FootPlacementMarkers3D, {
+					centerPosition: dummyPosition,
+					pattern: trainingState.footworkDrillType === "free_practice" ? "none" : trainingState.footworkDrillType,
+					currentStep: trainingState.footworkDrillStep,
+					visible: true,
+					scale: 1,
+					animated: true
+				}),
+				trainingState.hitEffects.map((effect) => /* @__PURE__ */ jsx(HitFeedbackEffect3D, {
+					position: effect.position,
+					type: effect.type,
+					damage: effect.damage,
+					visible: effect.visible,
+					onComplete: () => handleEffectComplete(effect.id),
+					isMobile
+				}, effect.id)),
+				/* @__PURE__ */ jsx(StanceChangeIndicator, {
+					currentStance: trainingState.currentStanceIndex,
+					previousStance: previousStanceIndex,
+					isMobile
+				}),
+				isMobile ? /* @__PURE__ */ jsxs(EffectComposer, {
+					multisampling: 0,
+					children: [
+						/* @__PURE__ */ jsx(Bloom, {
+							luminanceThreshold: .9,
+							luminanceSmoothing: .9,
+							mipmapBlur: true,
+							intensity: .8,
+							radius: .4
+						}),
+						/* @__PURE__ */ jsx(Noise, { opacity: .03 }),
+						/* @__PURE__ */ jsx(Vignette, {
+							eskil: false,
+							offset: .1,
+							darkness: .3
+						})
+					]
+				}) : /* @__PURE__ */ jsxs(EffectComposer, {
+					multisampling: 4,
+					children: [
+						/* @__PURE__ */ jsx(Bloom, {
+							luminanceThreshold: .9,
+							luminanceSmoothing: .9,
+							mipmapBlur: true,
+							intensity: .8,
+							radius: .4
+						}),
+						/* @__PURE__ */ jsx(Noise, { opacity: .03 }),
+						/* @__PURE__ */ jsx(Vignette, {
+							eskil: false,
+							offset: .1,
+							darkness: .3
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				pointerEvents: "none",
+				zIndex: Z_INDEX.HUD,
+				overflow: "clip"
+			},
+			"data-testid": "training-hud-overlay",
+			children: [
+				/* @__PURE__ */ jsx(TrainingLeftHUD, {
+					width,
+					height,
+					isMobile,
+					positionScale,
+					visibleAnatomyLayers: trainingState.visibleAnatomyLayers,
+					onAnatomyLayerToggle: handleAnatomyLayerToggle,
+					currentStanceIndex: trainingState.currentStanceIndex,
+					isInGuard: playerAnimation.isInStanceGuard()
+				}),
+				/* @__PURE__ */ jsx(TrainingTopHUD, {
+					width,
+					height,
+					isMobile,
+					positionScale,
+					isTraining: trainingState.isTraining,
+					onStartTraining: handleStartTraining,
+					onStopTraining: handleStopTraining,
+					selectedArchetype,
+					onArchetypeSelect: setSelectedArchetype,
+					overlayVisible,
+					onReturnToMenu,
+					onPlaySFX: (sound) => audio.playSFX(sound)
+				}),
+				/* @__PURE__ */ jsx(TrainingRightHUD, {
+					width,
+					height,
+					isMobile,
+					positionScale,
+					trainingMode: trainingState.trainingMode,
+					onModeChange: trainingActions.setTrainingMode,
+					stats: {
+						...trainingState.stats,
+						sessionDuration: trainingState.sessionDuration,
+						bestCombo: trainingState.bestCombo,
+						perfectStrikes: trainingState.perfectStrikes
+					},
+					distanceToDummy,
+					effectiveReach: currentTechniqueReach,
+					selectedVitalPoint: trainingState.selectedVitalPoint,
+					onVitalPointSelect: trainingActions.setSelectedVitalPoint,
+					footworkDrillType: trainingState.footworkDrillType,
+					footworkDrillStep: trainingState.footworkDrillStep,
+					footworkDrillActive: trainingState.footworkDrillActive,
+					onStartFootworkDrill: trainingActions.startFootworkDrill,
+					onStopFootworkDrill: trainingActions.stopFootworkDrill,
+					onAdvanceFootworkStep: trainingActions.advanceFootworkStep
+				}),
+				/* @__PURE__ */ jsx(TrainingBottomHUD, {
+					width,
+					height,
+					isMobile,
+					positionScale,
+					techniques: techniqueSelection.availableTechniques,
+					player: trainingPlayerState,
+					selectedIndex: techniqueSelection.selectedIndex,
+					cooldowns: cooldownsMap,
+					onTechniqueSelect: techniqueSelection.selectTechnique,
+					showFeedback: trainingState.showFeedback,
+					feedbackMessage: trainingState.feedback,
+					selectedArchetype,
+					onArchetypeSelect: setSelectedArchetype,
+					onPlaySFX: (sound) => audio.playSFX(sound)
+				}),
+				overlayVisible && /* @__PURE__ */ jsx(VitalPointOverlayControlsPure, {
+					visible: overlayVisible,
+					onVisibleChange: setOverlayVisible,
+					severityFilters,
+					onSeverityFiltersChange: setSeverityFilters,
+					regionFilter,
+					onRegionFilterChange: setRegionFilter,
+					searchQuery,
+					onSearchQueryChange: setSearchQuery,
+					showLabels,
+					onShowLabelsChange: setShowLabels,
+					animated,
+					onAnimatedChange: setAnimated,
+					scale,
+					onScaleChange: setScale,
+					screenPosition: {
+						top: "180px",
+						left: "20px"
+					},
+					isMobile
+				}),
+				isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(MobileControlsOverlay, {
+						onMove: handleMobileMove,
+						onAttack: handleMobileAttack,
+						onBlock: handleMobileBlock,
+						disabled: !mobileControlsEnabled,
+						bottom: getMobileControlsBottom(),
+						opacity: .85
+					}),
+					/* @__PURE__ */ jsx(StanceWheelPure, {
+						currentStance: trainingState.currentStanceIndex,
+						onStanceChange: handleMobileStanceChange,
+						expanded: trainingState.stanceWheelExpanded,
+						onToggle: trainingActions.toggleStanceWheel,
+						disabled: !mobileControlsEnabled,
+						opacity: .8
+					}),
+					/* @__PURE__ */ jsx(GestureRecognizerPure, {
+						onGesture: handleMobileGesture,
+						enabled: mobileControlsEnabled,
+						showFeedback: true,
+						minSwipeDistance: 50
+					})
+				] })
+			]
+		})]
+	});
+};
+//#endregion
+export { TrainingScreen3D };
+
+//# sourceMappingURL=TrainingScreen3D.js.map