blacktrigram 0.7.47 → 0.7.49

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

@@ -11,7 +11,7 @@ import { Z_INDEX } from "../../../types/LayoutTypes.js";
 import { InjuryType } from "../../../types/injury.js";
 import { TRIGRAM_STANCES_ORDER } from "../../../systems/trigram/types.js";
 import { useKeyboardControls } from "../../../hooks/useKeyboardControls.js";
-import { getAnimation, resolveTechniqueAnimation } from "../../../systems/animation/core/AnimationRegistry.js";
+import { getAnimation, getAnimationDurationOrFallback, resolveTechniqueAnimation } from "../../../systems/animation/core/AnimationRegistry.js";
 import { determineRecoveryType, getRecoveryAnimationState } from "../../../systems/animation/catalogs/RecoveryAnimations.js";
 import { usePlayerAnimation } from "../../../hooks/usePlayerAnimation.js";
 import useRoundTransition from "../../../hooks/useRoundTransition.js";
@@ -25,11 +25,13 @@ import BalanceSystem from "../../../systems/combat/BalanceSystem.js";
 import CombatSystem from "../../../systems/CombatSystem.js";
 import { getPersonalityByArchetype } from "../../../systems/ai/AIPersonality.js";
 import { AdaptiveDifficulty } from "../../../systems/ai/AdaptiveDifficulty.js";
-import { getMobileControlsBottom } from "../../../types/constants/layout.js";
+import { COMBAT_TOP_HUD_HEIGHT_PERCENT, getMobileControlsBottom } from "../../../types/constants/layout.js";
 import { getAnimationTypeForTechnique } from "../../../data/techniqueMappings.js";
 import { toHexColor } from "../../../utils/colorHelpers.js";
 import { usePlayerMovement } from "../../../utils/inputSystem.js";
 import PerformanceOverlay3D from "../../../utils/performance/PerformanceOverlay3D.js";
+import { getHUDHeight } from "../../../utils/responsiveLayout.js";
+import { getHUDPositionScale } from "../../../utils/responsiveLayoutHelpers.js";
 import { createPlayerFromArchetype } from "../../../utils/playerUtils.js";
 import { createCameraConfig } from "../../../utils/sharedPhysicsConfig.js";
 import { useAdaptiveQuality } from "../../shared/three/optimization/AdaptiveQuality.js";
@@ -86,6 +88,7 @@ import { Bloom, EffectComposer, Noise, Vignette } from "@react-three/postprocess
 * Maintains all existing combat logic and state management
 * Uses Html overlays for UI and 3D meshes for game objects
 */
+var PLAYER_ONE_INDEX = 0;
 /**
 * CombatScreen3D Component
 * Three.js-based combat screen with 3D characters and effects
@@ -128,17 +131,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		size: "md",
 		isMobile
 	});
-	const positionScale = useMemo(() => {
-		if (isMobile) return 1;
-		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;
-		}
-	}, [isMobile, screenSize]);
+	const positionScale = useMemo(() => getHUDPositionScale(screenSize, isMobile), [screenSize, isMobile]);
+	const combatTopHudHeight = useMemo(() => getHUDHeight(height, COMBAT_TOP_HUD_HEIGHT_PERCENT) * positionScale, [height, positionScale]);
 	const cameraConfig = useMemo(() => {
 		const base = createCameraConfig(isMobile);
 		if (!isPortrait) return base;
@@ -506,6 +500,14 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		setPlayer2AttackAnimation(void 0);
 		setPlayer2TechniqueId(void 0);
 	});
+	const preparePlayer1AttackTiming = useCallback((animationName) => {
+		const attackDuration = getAnimationDurationOrFallback(animationName);
+		const attackFrames = Math.max(1, Math.round(attackDuration * 60));
+		player1HitTriggerFrameRef.current = Math.round(attackFrames * .4);
+		player1AttackHitFiredRef.current = false;
+		setPlayer1AttackDuration(attackDuration);
+		return attackDuration;
+	}, []);
 	const player1Animation = usePlayerAnimation({ events: useMemo(() => ({
 		onFrame: (frame, state) => {
 			if (state === AnimationState.ATTACK && frame >= player1HitTriggerFrameRef.current && !player1AttackHitFiredRef.current) {
@@ -805,11 +807,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			const animationName = resolveTechniqueAnimation(technique);
 			setPlayer1AttackAnimation(animationName);
 			setPlayer1TechniqueId(technique.id);
-			const attackDuration = getAnimation(animationName)?.duration ?? .55;
-			const attackFrames = Math.max(1, Math.round(attackDuration * 60));
-			player1HitTriggerFrameRef.current = Math.round(attackFrames * .4);
-			player1AttackHitFiredRef.current = false;
-			setPlayer1AttackDuration(attackDuration);
+			const attackDuration = preparePlayer1AttackTiming(animationName);
 			player1Animation.transitionToAttack(attackDuration);
 			combatActions.setExecutingTechnique(true);
 			onPlayerUpdate(0, {
@@ -825,7 +823,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			handleAttack,
 			addCombatMessage,
 			player1Animation,
-			combatActions
+			combatActions,
+			preparePlayer1AttackTiming
 		])
 	});
 	const cooldownsMap = useMemo(() => {
@@ -842,7 +841,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 	}, [currentPlayerStance]);
 	const handleStanceChangeWithAnimation = useCallback((newStance) => {
 		const currentStance = validPlayers[0].currentStance;
-		if (player1Animation.transitionToStanceGuard(newStance)) {
+		if (player1Animation.transitionToStanceChange(currentStance, newStance)) {
 			setPreviousStance(STANCE_INDEX_MAP.get(currentStance) ?? 0);
 			setPlayer1LocalStance(newStance);
 			handleStanceSwitch(newStance);
@@ -899,9 +898,11 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 	]);
 	const handleAttackWithFeedback = useCallback(() => {
 		const basicTechnique = techniqueSelection.availableTechniques[0];
-		setPlayer1AttackAnimation(basicTechnique ? resolveTechniqueAnimation(basicTechnique) : "jab");
+		const animationName = basicTechnique ? resolveTechniqueAnimation(basicTechnique) : "jab";
+		setPlayer1AttackAnimation(animationName);
 		if (basicTechnique?.id) setPlayer1TechniqueId(basicTechnique.id);
-		if (player1Animation.transitionTo(AnimationState.ATTACK)) combatActions.setExecutingTechnique(true);
+		const attackDuration = preparePlayer1AttackTiming(animationName);
+		if (player1Animation.transitionToAttack(attackDuration)) combatActions.setExecutingTechnique(true);
 		else {
 			console.warn("Attack animation transition failed; executing attack logic directly.");
 			handleAttack();
@@ -910,7 +911,8 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 		player1Animation,
 		combatActions,
 		handleAttack,
-		techniqueSelection.availableTechniques
+		techniqueSelection.availableTechniques,
+		preparePlayer1AttackTiming
 	]);
 	const handleDefendWithFeedback = useCallback(() => {
 		const defenderPos = playerPositions[0];
@@ -987,6 +989,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 					break;
 				case "stance_side_switch":
 					player1Animation.transitionTo(AnimationState.STANCE_SIDE_SWITCH);
+					handleStanceSideSwitch(PLAYER_ONE_INDEX);
 					break;
 			}
 		}, [
@@ -995,6 +998,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 			executeFallbackRecovery,
 			balanceSystem,
 			player1Animation,
+			handleStanceSideSwitch,
 			players,
 			onPlayerUpdate,
 			audio,
@@ -1630,7 +1634,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 								}),
 								/* @__PURE__ */ jsx(VitalPointOverlayControlsHtml, {
 									screenPosition: {
-										top: `${layoutConstants.hudHeight + layoutConstants.padding}px`,
+										top: `${combatTopHudHeight + layoutConstants.padding}px`,
 										left: `${layoutConstants.padding}px`
 									},
 									visible: overlayVisible,
@@ -1782,7 +1786,7 @@ var CombatScreen3D = ({ players, onPlayerUpdate, currentRound, timeRemaining, is
 						player1: validPlayers[0],
 						player2: validPlayers[1],
 						positionScale,
-						topOffset: layoutConstants.hudHeight
+						topOffset: combatTopHudHeight
 					}),
 					/* @__PURE__ */ jsx(CombatBottomHUD, {
 						width,