blacktrigram 0.7.19 → 0.7.20

package/README.md

@@ -184,7 +184,7 @@ Built for **combat realism** and **authentic simulation**:
 
 ### 🎮 Rendering Engine
 
-![Three.js](https://img.shields.io/badge/Three.js-0.183-000000?style=for-the-badge&logo=three.js)
+![Three.js](https://img.shields.io/badge/Three.js-0.184-000000?style=for-the-badge&logo=three.js)
 ![React Three Fiber](https://img.shields.io/badge/R3F-9.5-00ffff?style=for-the-badge&logo=react)
 ![React](https://img.shields.io/badge/React-19-61dafb?style=for-the-badge&logo=react)
 ![TypeScript](https://img.shields.io/badge/TypeScript-Strict-3178c6?style=for-the-badge&logo=typescript)
@@ -380,7 +380,7 @@ George Dorn provides detailed repository deep-dives based on actual code inspect
 
 **[Repository Deep-Dive](https://hack23.com/blog-george-dorn-trigram-code.html)**
 
-**Stack:** TypeScript 6.0, React 19, Three.js 0.183, Vite 8  
+**Stack:** TypeScript 6.0, React 19, Three.js 0.184, Vite 8  
 **Metrics:** 132 TypeScript files, 70 vital points system, 5 fighter archetypes
 
 Examined package.json dependencies, explored src/ structure, verified combat system implementation, and reviewed AI integrations.

package/lib/components/screens/combat/CombatScreen3D.d.ts

@@ -65,10 +65,6 @@ export interface CombatScreen3DProps {
      */
     readonly showPerformanceOverlay?: boolean;
 }
-/**
- * CombatScreen3D Component
- * Three.js-based combat screen with 3D characters and effects
- */
 export declare const CombatScreen3D: React.FC<CombatScreen3DProps>;
 export default CombatScreen3D;
 //# sourceMappingURL=CombatScreen3D.d.ts.map

package/lib/components/screens/combat/CombatScreen3D.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CombatScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/combat/CombatScreen3D.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAa,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAsB1D,OAAO,EAEL,QAAQ,EAIT,MAAM,gBAAgB,CAAC;AAkFxB;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,EAAE,CACvB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAC1B,IAAI,CAAC;IACV;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAC3C;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsgGxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CombatScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/combat/CombatScreen3D.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAa,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAsB1D,OAAO,EAEL,QAAQ,EAIT,MAAM,gBAAgB,CAAC;AAkFxB;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,cAAc,EAAE,CACvB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAC1B,IAAI,CAAC;IACV;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAC3C;AAgCD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0+FxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/screens/combat/CombatScreen3D.js

@@ -90,6 +90,18 @@ import { Bloom, EffectComposer, Noise, Vignette } from "@react-three/postprocess
 * CombatScreen3D Component
 * Three.js-based combat screen with 3D characters and effects
 */
+/**
+* AdaptiveQualityWrapper - Internal component to use adaptive quality hook
+* Must be inside Canvas to use useFrame from @react-three/fiber
+*
+* Hoisted outside CombatScreen3D to avoid "Cannot create components during render"
+* warnings from react-hooks/component-creation. Keeps the component type stable
+* across renders of the parent.
+*/
+var AdaptiveQualityWrapper = ({ enabled, isMobile, children }) => {
+	useAdaptiveQuality(enabled, isMobile, (newQuality) => {});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
 var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, isPaused, onReturnToMenu, onGameEnd, width = 1200, height = 800, enableAdaptiveQuality, showPerformanceOverlay = false }) => {
 	const [contentReady, setContentReady] = useState(false);
 	const contextLossCountRef = useRef(0);
@@ -150,22 +162,6 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		};
 	}, [isMobile, width]);
 	const shouldEnableAdaptiveQuality = enableAdaptiveQuality ?? isMobile;
-	/**
-	* AdaptiveQualityWrapper - Internal component to use adaptive quality hook
-	* Must be inside Canvas to use useFrame from @react-three/fiber
-	*
-	* Memoized with useMemo so the component type is stable across renders.
-	* Note: renderConfig is intentionally NOT in dependencies to prevent
-	* component recreation when performance settings change, which would
-	* reset the internal state of useAdaptiveQuality hook.
-	*/
-	const AdaptiveQualityWrapper = useMemo(() => {
-		const Component = ({ children }) => {
-			useAdaptiveQuality(shouldEnableAdaptiveQuality, isMobile, (newQuality) => {});
-			return /* @__PURE__ */ jsx(Fragment, { children });
-		};
-		return Component;
-	}, [shouldEnableAdaptiveQuality, isMobile]);
 	const { state: combatState, actions: combatActions } = useCombatState();
 	const [overlayVisible, setOverlayVisible] = useState(false);
 	const [severityFilters, setSeverityFilters] = useState([]);
@@ -210,7 +206,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		setTimeout(() => setMatchScore(newScore), 0);
 	}, []);
 	const [internalRound, setInternalRound] = useState(currentRound);
-	const [currentTime, setCurrentTime] = useState(Date.now());
+	const [currentTime, setCurrentTime] = useState(() => Date.now());
 	const [hasShownMatchCountdown, setHasShownMatchCountdown] = useState(true);
 	const [showMatchCountdown, setShowMatchCountdown] = useState(false);
 	const [showRoundStart, setShowRoundStart] = useState(false);
@@ -361,7 +357,6 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			playerPositions[1].y
 		];
 	}, [playerPositions]);
-	const player1LastRotationRef = useRef(0);
 	const player2Rotation = useMemo(() => {
 		const dx = player1Position3D[0] - player2Position3D[0];
 		const dz = player1Position3D[2] - player2Position3D[2];
@@ -483,16 +478,11 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		accelerationOverride: player1SpeedModifiers.finalAcceleration
 	});
 	const player1Rotation = useMemo(() => {
-		if (player1IsMoving && player1Velocity && (player1Velocity.x !== 0 || player1Velocity.y !== 0)) {
-			const movementRotation = Math.atan2(player1Velocity.x, player1Velocity.y);
-			player1LastRotationRef.current = movementRotation;
-			return movementRotation;
-		} else {
+		if (player1IsMoving && player1Velocity && (player1Velocity.x !== 0 || player1Velocity.y !== 0)) return Math.atan2(player1Velocity.x, player1Velocity.y);
+		else {
 			const dx = player2Position3D[0] - player1Position3D[0];
 			const dz = player2Position3D[2] - player1Position3D[2];
-			const targetRotation = Math.atan2(dx, dz);
-			player1LastRotationRef.current = targetRotation;
-			return targetRotation;
+			return Math.atan2(dx, dz);
 		}
 	}, [
 		player1IsMoving,
@@ -505,8 +495,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 	const validPlayersRefForAnimation = useRef(null);
 	const player1HitTriggerFrameRef = useRef(6);
 	const player1AttackHitFiredRef = useRef(false);
-	const player1AttackDurationRef = useRef(.55);
-	const player2AttackDurationRef = useRef(.55);
+	const [player1AttackDuration, setPlayer1AttackDuration] = useState(.55);
+	const [player2AttackDuration, setPlayer2AttackDuration] = useState(.55);
 	const clearPlayer1AttackAnimation = useRef(() => {
 		setPlayer1AttackAnimation(void 0);
 		setPlayer1TechniqueId(void 0);
@@ -616,12 +606,12 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		player1AnimationType: getTechniqueAnimationType(player1TechniqueId),
 		player1Stance: player1Data.currentStance,
 		player1BasePosition: player1Position3D,
-		player1AnimationDuration: player1AttackDurationRef.current,
+		player1AnimationDuration: player1AttackDuration,
 		player2Attacking: player2Animation.currentState === AnimationState.ATTACK,
 		player2AnimationType: getTechniqueAnimationType(player2TechniqueId),
 		player2Stance: validPlayers[1].currentStance,
 		player2BasePosition: player2Position3D,
-		player2AnimationDuration: player2AttackDurationRef.current
+		player2AnimationDuration: player2AttackDuration
 	});
 	const [player1LocalStance, setPlayer1LocalStance] = useState(validPlayers[0].currentStance);
 	useEffect(() => {
@@ -818,7 +808,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			const attackFrames = Math.max(1, Math.round(attackDuration * 60));
 			player1HitTriggerFrameRef.current = Math.round(attackFrames * .4);
 			player1AttackHitFiredRef.current = false;
-			player1AttackDurationRef.current = attackDuration;
+			setPlayer1AttackDuration(attackDuration);
 			player1Animation.transitionToAttack(attackDuration);
 			combatActions.setExecutingTechnique(true);
 			onPlayerUpdate(0, {
@@ -1193,13 +1183,13 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 					setPlayer2AttackAnimation(p2AttackAnimName);
 					if (selectedTechnique.id) setPlayer2TechniqueId(selectedTechnique.id);
 					const p2AttackDur = getAnimation(p2AttackAnimName)?.duration ?? .55;
-					player2AttackDurationRef.current = p2AttackDur;
+					setPlayer2AttackDuration(p2AttackDur);
 					player2Animation.transitionToAttack(p2AttackDur);
 				} else {
 					setPlayer2AttackAnimation(aiFallbackAnim);
 					if (aiFallbackTechnique?.id) setPlayer2TechniqueId(aiFallbackTechnique.id);
 					const p2FallbackDur = getAnimation(aiFallbackAnim)?.duration ?? .55;
-					player2AttackDurationRef.current = p2FallbackDur;
+					setPlayer2AttackDuration(p2FallbackDur);
 					player2Animation.transitionToAttack(p2FallbackDur);
 				}
 				handleAIAttack(selectedTechnique, targetVitalPoint);
@@ -1215,13 +1205,13 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 					setPlayer2AttackAnimation(p2TechAnimName);
 					if (selectedTechnique.id) setPlayer2TechniqueId(selectedTechnique.id);
 					const p2TechDur = getAnimation(p2TechAnimName)?.duration ?? .6;
-					player2AttackDurationRef.current = p2TechDur;
+					setPlayer2AttackDuration(p2TechDur);
 					player2Animation.transitionToAttack(p2TechDur);
 				} else {
 					setPlayer2AttackAnimation(aiFallbackAnim);
 					if (aiFallbackTechnique?.id) setPlayer2TechniqueId(aiFallbackTechnique.id);
 					const p2FallbackDur = getAnimation(aiFallbackAnim)?.duration ?? .6;
-					player2AttackDurationRef.current = p2FallbackDur;
+					setPlayer2AttackDuration(p2FallbackDur);
 					player2Animation.transitionToAttack(p2FallbackDur);
 				}
 				handleAITechnique(selectedTechnique, targetVitalPoint);
@@ -1264,13 +1254,13 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 					setPlayer2AttackAnimation(p2CounterAnimName);
 					if (selectedTechnique.id) setPlayer2TechniqueId(selectedTechnique.id);
 					const p2CounterDur = getAnimation(p2CounterAnimName)?.duration ?? .6;
-					player2AttackDurationRef.current = p2CounterDur;
+					setPlayer2AttackDuration(p2CounterDur);
 					player2Animation.transitionToAttack(p2CounterDur);
 				} else {
 					setPlayer2AttackAnimation(aiFallbackAnim);
 					if (aiFallbackTechnique?.id) setPlayer2TechniqueId(aiFallbackTechnique.id);
 					const p2FallbackDur = getAnimation(aiFallbackAnim)?.duration ?? .6;
-					player2AttackDurationRef.current = p2FallbackDur;
+					setPlayer2AttackDuration(p2FallbackDur);
 					player2Animation.transitionToAttack(p2FallbackDur);
 				}
 				handleAIAttack(selectedTechnique, targetVitalPoint);
@@ -1478,245 +1468,249 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						],
 						intensity: 1.2
 					}),
-					/* @__PURE__ */ jsxs(AdaptiveQualityWrapper, { children: [
-						showPerformanceOverlay && !showPerformanceMonitor && /* @__PURE__ */ jsx(PerformanceOverlay3D, {}),
-						/* @__PURE__ */ jsx(CombatArena3D, {
-							lighting: "cyberpunk",
-							scale: arenaBounds.scale,
-							worldWidthMeters: arenaBounds.worldWidthMeters,
-							worldDepthMeters: arenaBounds.worldDepthMeters
-						}),
-						/* @__PURE__ */ jsx(AnimationUpdater, {
-							player1Animation,
-							player2Animation
-						}),
-						/* @__PURE__ */ jsx(AccelerationUpdater, {
-							isMoving: player1IsMoving,
-							velocity: player1Velocity,
-							movementTimeRef: player1MovementTimeRef,
-							lastDirectionRef: player1LastDirectionRef,
-							onSpeedUpdate: setPlayer1AccelerationBasedSpeed,
-							walkSpeed: player1WalkRunSpeeds.walkSpeed,
-							runSpeed: player1WalkRunSpeeds.runSpeed
-						}),
-						/* @__PURE__ */ jsx(Player3DWithTransitions, {
-							...convertPlayerStateToProps(validPlayers[0], player1PositionWithAttackMovement, player1Rotation, {
+					/* @__PURE__ */ jsxs(AdaptiveQualityWrapper, {
+						enabled: shouldEnableAdaptiveQuality,
+						isMobile,
+						children: [
+							showPerformanceOverlay && !showPerformanceMonitor && /* @__PURE__ */ jsx(PerformanceOverlay3D, {}),
+							/* @__PURE__ */ jsx(CombatArena3D, {
+								lighting: "cyberpunk",
+								scale: arenaBounds.scale,
+								worldWidthMeters: arenaBounds.worldWidthMeters,
+								worldDepthMeters: arenaBounds.worldDepthMeters
+							}),
+							/* @__PURE__ */ jsx(AnimationUpdater, {
+								player1Animation,
+								player2Animation
+							}),
+							/* @__PURE__ */ jsx(AccelerationUpdater, {
+								isMoving: player1IsMoving,
+								velocity: player1Velocity,
+								movementTimeRef: player1MovementTimeRef,
+								lastDirectionRef: player1LastDirectionRef,
+								onSpeedUpdate: setPlayer1AccelerationBasedSpeed,
+								walkSpeed: player1WalkRunSpeeds.walkSpeed,
+								runSpeed: player1WalkRunSpeeds.runSpeed
+							}),
+							/* @__PURE__ */ jsx(Player3DWithTransitions, {
+								...convertPlayerStateToProps(validPlayers[0], player1PositionWithAttackMovement, player1Rotation, {
+									isMobile,
+									facing: "right",
+									enableFacialExpressions: true,
+									enableEyeTracking: true,
+									opponentPosition: player2PositionWithAttackMovement
+								}),
+								currentAnimation: animationStateToPlayerAnimation(player1Animation.currentState),
+								attackAnimation: player1AttackAnimation,
+								laterality: combatState.playerLaterality[0],
+								enableTransitionEffects: !isMobile,
+								enableStanceSymbol: !isMobile,
+								enableStanceAudio: true
+							}),
+							/* @__PURE__ */ jsx(Player3DWithTransitions, {
+								...convertPlayerStateToProps(validPlayers[1], player2PositionWithAttackMovement, player2Rotation, {
+									isMobile,
+									facing: "right",
+									enableFacialExpressions: true,
+									enableEyeTracking: true,
+									opponentPosition: player1PositionWithAttackMovement
+								}),
+								currentAnimation: animationStateToPlayerAnimation(player2Animation.currentState),
+								attackAnimation: player2AttackAnimation,
+								laterality: combatState.playerLaterality[1],
+								enableTransitionEffects: !isMobile,
+								enableStanceSymbol: !isMobile,
+								enableStanceAudio: true
+							}),
+							(player1MovementState.isLimping || player1MovementState.isSevereLimp) && /* @__PURE__ */ jsx(Html, {
+								position: [
+									player1Position3D[0],
+									player1Position3D[1] + 2.5,
+									player1Position3D[2]
+								],
+								center: true,
+								"data-testid": "player1-movement-status",
+								children: /* @__PURE__ */ jsxs("div", {
+									style: {
+										fontSize: isMobile ? "12px" : "14px",
+										color: player1MovementState.isSevereLimp ? toHexColor(KOREAN_COLORS.TEXT_ERROR) : toHexColor(KOREAN_COLORS.ACCENT_GOLD),
+										fontFamily: FONT_FAMILY.KOREAN,
+										fontWeight: "bold",
+										textShadow: "0 0 4px rgba(0,0,0,0.8)",
+										background: "rgba(0, 0, 0, 0.6)",
+										padding: "4px 8px",
+										borderRadius: "4px",
+										whiteSpace: "nowrap"
+									},
+									children: [
+										player1MovementState.statusText.korean,
+										" |",
+										" ",
+										player1MovementState.statusText.english
+									]
+								})
+							}),
+							(player2MovementState.isLimping || player2MovementState.isSevereLimp) && /* @__PURE__ */ jsx(Html, {
+								position: [
+									player2Position3D[0],
+									player2Position3D[1] + 2.5,
+									player2Position3D[2]
+								],
+								center: true,
+								"data-testid": "player2-movement-status",
+								children: /* @__PURE__ */ jsxs("div", {
+									style: {
+										fontSize: isMobile ? "12px" : "14px",
+										color: player2MovementState.isSevereLimp ? toHexColor(KOREAN_COLORS.TEXT_ERROR) : toHexColor(KOREAN_COLORS.ACCENT_GOLD),
+										fontFamily: FONT_FAMILY.KOREAN,
+										fontWeight: "bold",
+										textShadow: "0 0 4px rgba(0,0,0,0.8)",
+										background: "rgba(0, 0, 0, 0.6)",
+										padding: "4px 8px",
+										borderRadius: "4px",
+										whiteSpace: "nowrap"
+									},
+									children: [
+										player2MovementState.statusText.korean,
+										" |",
+										" ",
+										player2MovementState.statusText.english
+									]
+								})
+							}),
+							/* @__PURE__ */ jsx(TraumaOverlay3D, {
+								playerId: "player",
+								health: validPlayers[0].health,
+								injuries: player1Injuries,
+								characterPosition: player1Position3D,
 								isMobile,
-								facing: "right",
-								enableFacialExpressions: true,
-								enableEyeTracking: true,
-								opponentPosition: player2PositionWithAttackMovement
+								showFractures: true
 							}),
-							currentAnimation: animationStateToPlayerAnimation(player1Animation.currentState),
-							attackAnimation: player1AttackAnimation,
-							laterality: combatState.playerLaterality[0],
-							enableTransitionEffects: !isMobile,
-							enableStanceSymbol: !isMobile,
-							enableStanceAudio: true
-						}),
-						/* @__PURE__ */ jsx(Player3DWithTransitions, {
-							...convertPlayerStateToProps(validPlayers[1], player2PositionWithAttackMovement, player2Rotation, {
+							/* @__PURE__ */ jsx(TraumaOverlay3D, {
+								playerId: "enemy",
+								health: validPlayers[1].health,
+								injuries: player2Injuries,
+								characterPosition: player2Position3D,
 								isMobile,
-								facing: "right",
-								enableFacialExpressions: true,
-								enableEyeTracking: true,
-								opponentPosition: player1PositionWithAttackMovement
+								showFractures: true
 							}),
-							currentAnimation: animationStateToPlayerAnimation(player2Animation.currentState),
-							attackAnimation: player2AttackAnimation,
-							laterality: combatState.playerLaterality[1],
-							enableTransitionEffects: !isMobile,
-							enableStanceSymbol: !isMobile,
-							enableStanceAudio: true
-						}),
-						(player1MovementState.isLimping || player1MovementState.isSevereLimp) && /* @__PURE__ */ jsx(Html, {
-							position: [
-								player1Position3D[0],
-								player1Position3D[1] + 2.5,
-								player1Position3D[2]
-							],
-							center: true,
-							"data-testid": "player1-movement-status",
-							children: /* @__PURE__ */ jsxs("div", {
-								style: {
-									fontSize: isMobile ? "12px" : "14px",
-									color: player1MovementState.isSevereLimp ? toHexColor(KOREAN_COLORS.TEXT_ERROR) : toHexColor(KOREAN_COLORS.ACCENT_GOLD),
-									fontFamily: FONT_FAMILY.KOREAN,
-									fontWeight: "bold",
-									textShadow: "0 0 4px rgba(0,0,0,0.8)",
-									background: "rgba(0, 0, 0, 0.6)",
-									padding: "4px 8px",
-									borderRadius: "4px",
-									whiteSpace: "nowrap"
-								},
-								children: [
-									player1MovementState.statusText.korean,
-									" |",
-									" ",
-									player1MovementState.statusText.english
-								]
-							})
-						}),
-						(player2MovementState.isLimping || player2MovementState.isSevereLimp) && /* @__PURE__ */ jsx(Html, {
-							position: [
-								player2Position3D[0],
-								player2Position3D[1] + 2.5,
-								player2Position3D[2]
-							],
-							center: true,
-							"data-testid": "player2-movement-status",
-							children: /* @__PURE__ */ jsxs("div", {
-								style: {
-									fontSize: isMobile ? "12px" : "14px",
-									color: player2MovementState.isSevereLimp ? toHexColor(KOREAN_COLORS.TEXT_ERROR) : toHexColor(KOREAN_COLORS.ACCENT_GOLD),
-									fontFamily: FONT_FAMILY.KOREAN,
-									fontWeight: "bold",
-									textShadow: "0 0 4px rgba(0,0,0,0.8)",
-									background: "rgba(0, 0, 0, 0.6)",
-									padding: "4px 8px",
-									borderRadius: "4px",
-									whiteSpace: "nowrap"
-								},
-								children: [
-									player2MovementState.statusText.korean,
-									" |",
-									" ",
-									player2MovementState.statusText.english
-								]
-							})
-						}),
-						/* @__PURE__ */ jsx(TraumaOverlay3D, {
-							playerId: "player",
-							health: validPlayers[0].health,
-							injuries: player1Injuries,
-							characterPosition: player1Position3D,
-							isMobile,
-							showFractures: true
-						}),
-						/* @__PURE__ */ jsx(TraumaOverlay3D, {
-							playerId: "enemy",
-							health: validPlayers[1].health,
-							injuries: player2Injuries,
-							characterPosition: player2Position3D,
-							isMobile,
-							showFractures: true
-						}),
-						/* @__PURE__ */ jsx(HitEffects3D, {
-							effects: combatState.hitEffects,
-							onEffectComplete: handleEffectComplete,
-							arenaBounds
-						}),
-						/* @__PURE__ */ jsx(CombatParticleEffects3D, {
-							hitEffects: combatState.hitEffects,
-							enabled: true,
-							isMobile
-						}),
-						overlayVisible && /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsx(VitalPointMarkers3D, {
-								position: player1Position3D,
-								visible: overlayVisible,
-								severityFilter: severityFilters,
-								regionFilter,
-								searchQuery,
-								showLabels,
-								scale,
-								animated,
-								onPointClick: () => {}
+							/* @__PURE__ */ jsx(HitEffects3D, {
+								effects: combatState.hitEffects,
+								onEffectComplete: handleEffectComplete,
+								arenaBounds
+							}),
+							/* @__PURE__ */ jsx(CombatParticleEffects3D, {
+								hitEffects: combatState.hitEffects,
+								enabled: true,
+								isMobile
 							}),
-							/* @__PURE__ */ jsx(VitalPointMarkers3D, {
-								position: player2Position3D,
-								visible: overlayVisible,
-								severityFilter: severityFilters,
-								regionFilter,
-								searchQuery,
-								showLabels,
-								scale,
-								animated,
-								onPointClick: () => {}
+							overlayVisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx(VitalPointMarkers3D, {
+									position: player1Position3D,
+									visible: overlayVisible,
+									severityFilter: severityFilters,
+									regionFilter,
+									searchQuery,
+									showLabels,
+									scale,
+									animated,
+									onPointClick: () => {}
+								}),
+								/* @__PURE__ */ jsx(VitalPointMarkers3D, {
+									position: player2Position3D,
+									visible: overlayVisible,
+									severityFilter: severityFilters,
+									regionFilter,
+									searchQuery,
+									showLabels,
+									scale,
+									animated,
+									onPointClick: () => {}
+								}),
+								/* @__PURE__ */ jsx(VitalPointOverlayControlsHtml, {
+									screenPosition: {
+										top: `${layoutConstants.hudHeight + layoutConstants.padding}px`,
+										left: `${layoutConstants.padding}px`
+									},
+									visible: overlayVisible,
+									onVisibleChange: setOverlayVisible,
+									severityFilters,
+									onSeverityFiltersChange: setSeverityFilters,
+									regionFilter,
+									onRegionFilterChange: setRegionFilter,
+									searchQuery,
+									onSearchQueryChange: setSearchQuery,
+									showLabels,
+									onShowLabelsChange: setShowLabels,
+									animated,
+									onAnimatedChange: setAnimated,
+									scale,
+									onScaleChange: setScale,
+									isMobile
+								})
+							] }),
+							/* @__PURE__ */ jsx(DamageNumbers, {
+								damages: feedbackState.damageNumbers,
+								isMobile,
+								arenaBounds
 							}),
-							/* @__PURE__ */ jsx(VitalPointOverlayControlsHtml, {
-								screenPosition: {
-									top: `${layoutConstants.hudHeight + layoutConstants.padding}px`,
-									left: `${layoutConstants.padding}px`
-								},
-								visible: overlayVisible,
-								onVisibleChange: setOverlayVisible,
-								severityFilters,
-								onSeverityFiltersChange: setSeverityFilters,
-								regionFilter,
-								onRegionFilterChange: setRegionFilter,
-								searchQuery,
-								onSearchQueryChange: setSearchQuery,
-								showLabels,
-								onShowLabelsChange: setShowLabels,
-								animated,
-								onAnimatedChange: setAnimated,
-								scale,
-								onScaleChange: setScale,
+							/* @__PURE__ */ jsx(ActionFeedback, {
+								feedbacks: feedbackState.actionFeedbacks,
+								isMobile,
+								arenaBounds
+							}),
+							/* @__PURE__ */ jsx(ComboCounter, {
+								combo: feedbackState.comboCount,
+								isMobile
+							}),
+							feedbackState.currentTechnique && /* @__PURE__ */ jsx(TechniqueName, {
+								korean: feedbackState.currentTechnique.korean,
+								english: feedbackState.currentTechnique.english,
+								isMobile,
+								onComplete: () => feedbackActions.hideTechnique()
+							}),
+							false,
+							/* @__PURE__ */ jsx(StanceChangeIndicator, {
+								currentStance: currentStanceIndex,
+								previousStance,
+								isMobile
+							}),
+							/* @__PURE__ */ jsx(KeyboardHints, {
+								visible: showHints,
+								currentStance: currentStanceIndex,
+								isMobile
+							}),
+							/* @__PURE__ */ jsx(InputBufferDisplay, {
+								queuedInputs,
+								isMobile
+							}),
+							validPlayers[0] && /* @__PURE__ */ jsx(BalanceIndicatorOverlayHtml, {
+								player: validPlayers[0],
+								currentTime,
+								position: [
+									-2.5,
+									2.5,
+									-1
+								],
+								isMobile
+							}),
+							validPlayers[1] && /* @__PURE__ */ jsx(BalanceIndicatorOverlayHtml, {
+								player: validPlayers[1],
+								currentTime,
+								position: [
+									2.5,
+									2.5,
+									-1
+								],
 								isMobile
+							}),
+							process.env.NODE_ENV === "development" && showPerformanceMonitor && /* @__PURE__ */ jsx(FPSMonitor, {
+								enabled: true,
+								warningThreshold: 50,
+								criticalThreshold: 30
 							})
-						] }),
-						/* @__PURE__ */ jsx(DamageNumbers, {
-							damages: feedbackState.damageNumbers,
-							isMobile,
-							arenaBounds
-						}),
-						/* @__PURE__ */ jsx(ActionFeedback, {
-							feedbacks: feedbackState.actionFeedbacks,
-							isMobile,
-							arenaBounds
-						}),
-						/* @__PURE__ */ jsx(ComboCounter, {
-							combo: feedbackState.comboCount,
-							isMobile
-						}),
-						feedbackState.currentTechnique && /* @__PURE__ */ jsx(TechniqueName, {
-							korean: feedbackState.currentTechnique.korean,
-							english: feedbackState.currentTechnique.english,
-							isMobile,
-							onComplete: () => feedbackActions.hideTechnique()
-						}),
-						false,
-						/* @__PURE__ */ jsx(StanceChangeIndicator, {
-							currentStance: currentStanceIndex,
-							previousStance,
-							isMobile
-						}),
-						/* @__PURE__ */ jsx(KeyboardHints, {
-							visible: showHints,
-							currentStance: currentStanceIndex,
-							isMobile
-						}),
-						/* @__PURE__ */ jsx(InputBufferDisplay, {
-							queuedInputs,
-							isMobile
-						}),
-						validPlayers[0] && /* @__PURE__ */ jsx(BalanceIndicatorOverlayHtml, {
-							player: validPlayers[0],
-							currentTime,
-							position: [
-								-2.5,
-								2.5,
-								-1
-							],
-							isMobile
-						}),
-						validPlayers[1] && /* @__PURE__ */ jsx(BalanceIndicatorOverlayHtml, {
-							player: validPlayers[1],
-							currentTime,
-							position: [
-								2.5,
-								2.5,
-								-1
-							],
-							isMobile
-						}),
-						process.env.NODE_ENV === "development" && showPerformanceMonitor && /* @__PURE__ */ jsx(FPSMonitor, {
-							enabled: true,
-							warningThreshold: 50,
-							criticalThreshold: 30
-						})
-					] }),
+						]
+					}),
 					isMobile ? /* @__PURE__ */ jsxs(EffectComposer, {
 						multisampling: 0,
 						children: [