blacktrigram 0.7.2

package/lib/utils/playerUtils.js

@@ -0,0 +1,296 @@
+import { CombatState } from "../types/common.js";
+import { ARCHETYPE_ASSETS } from "../types/constants/index.js";
+import { BodyPart } from "../systems/bodypart/types.js";
+import { calculateAngleToTarget, createDefaultBodyFacing } from "../systems/animation/systems/BodyFacingSystem.js";
+import "../systems/animation/index.js";
+import { PLAYER_ARCHETYPES_DATA } from "../systems/types.js";
+import { getArchetypePhysicalAttributes } from "../data/archetypePhysicalAttributes.js";
+import "../systems/index.js";
+//#region src/utils/playerUtils.ts
+/**
+* Player state utilities and helper functions
+*/
+/**
+* Default body part health values (100 HP each)
+* @korean 기본 신체부위 체력
+*/
+var DEFAULT_BODY_PART_HEALTH = {
+	[BodyPart.HEAD]: 100,
+	[BodyPart.NECK]: 100,
+	[BodyPart.TORSO_UPPER]: 100,
+	[BodyPart.TORSO_LOWER]: 100,
+	[BodyPart.ARM_LEFT]: 100,
+	[BodyPart.ARM_RIGHT]: 100,
+	[BodyPart.LEG_LEFT]: 100,
+	[BodyPart.LEG_RIGHT]: 100
+};
+/**
+* Default body part max health values
+* @korean 기본 신체부위 최대체력
+*/
+var DEFAULT_BODY_PART_MAX_HEALTH = {
+	[BodyPart.HEAD]: 100,
+	[BodyPart.NECK]: 100,
+	[BodyPart.TORSO_UPPER]: 100,
+	[BodyPart.TORSO_LOWER]: 100,
+	[BodyPart.ARM_LEFT]: 100,
+	[BodyPart.ARM_RIGHT]: 100,
+	[BodyPart.LEG_LEFT]: 100,
+	[BodyPart.LEG_RIGHT]: 100
+};
+/**
+* Create a complete PlayerState from archetype and player index
+*/
+function createPlayerFromArchetype(archetype, playerIndex) {
+	const archetypeData = PLAYER_ARCHETYPES_DATA[archetype];
+	const basePosition = {
+		x: playerIndex === 0 ? 300 : 500,
+		y: 400
+	};
+	return {
+		id: `player_${playerIndex + 1}`,
+		name: archetypeData.name,
+		archetype,
+		physicalAttributes: getArchetypePhysicalAttributes(archetype),
+		health: archetypeData.baseHealth,
+		maxHealth: archetypeData.baseHealth,
+		bodyPartHealth: { ...DEFAULT_BODY_PART_HEALTH },
+		bodyPartMaxHealth: { ...DEFAULT_BODY_PART_MAX_HEALTH },
+		ki: archetypeData.baseKi,
+		maxKi: archetypeData.baseKi,
+		stamina: archetypeData.baseStamina,
+		maxStamina: archetypeData.baseStamina,
+		energy: 100,
+		maxEnergy: 100,
+		attackPower: archetypeData.stats.attackPower,
+		defense: archetypeData.stats.defense,
+		speed: archetypeData.stats.speed,
+		technique: archetypeData.stats.technique,
+		pain: 0,
+		consciousness: 100,
+		balance: 100,
+		momentum: 0,
+		currentStance: archetypeData.coreStance,
+		combatState: CombatState.IDLE,
+		position: basePosition,
+		stanceSide: playerIndex === 0 ? "orthodox" : "southpaw",
+		isBlocking: false,
+		isStunned: false,
+		isCountering: false,
+		lastActionTime: 0,
+		recoveryTime: 0,
+		lastStanceChangeTime: 0,
+		statusEffects: [],
+		activeEffects: [],
+		vitalPoints: [],
+		totalDamageReceived: 0,
+		totalDamageDealt: 0,
+		hitsTaken: 0,
+		hitsLanded: 0,
+		perfectStrikes: 0,
+		vitalPointHits: 0
+	};
+}
+/**
+* Update player state with partial updates
+*/
+function updatePlayerState(player, updates) {
+	return {
+		...player,
+		...updates,
+		health: Math.max(0, Math.min(updates.health ?? player.health, player.maxHealth)),
+		ki: Math.max(0, Math.min(updates.ki ?? player.ki, player.maxKi)),
+		stamina: Math.max(0, Math.min(updates.stamina ?? player.stamina, player.maxStamina)),
+		consciousness: Math.max(0, Math.min(updates.consciousness ?? player.consciousness, 100)),
+		balance: Math.max(0, Math.min(updates.balance ?? player.balance, 100))
+	};
+}
+/**
+* Apply damage to player
+*/
+function applyDamage(player, damage, _damageType) {
+	const newHealth = Math.max(0, player.health - damage);
+	const isKnockedOut = newHealth <= 0;
+	return updatePlayerState(player, {
+		health: newHealth,
+		totalDamageReceived: player.totalDamageReceived + damage,
+		hitsTaken: player.hitsTaken + 1,
+		combatState: isKnockedOut ? CombatState.STUNNED : player.combatState,
+		consciousness: isKnockedOut ? 0 : player.consciousness
+	});
+}
+/**
+* Apply status effect to player
+*/
+function applyStatusEffect(player, effect) {
+	const existingEffectIndex = player.statusEffects.findIndex((e) => e.type === effect.type && !e.stackable);
+	let newEffects;
+	if (existingEffectIndex >= 0 && !effect.stackable) {
+		newEffects = [...player.statusEffects];
+		newEffects[existingEffectIndex] = effect;
+	} else newEffects = [...player.statusEffects, effect];
+	return updatePlayerState(player, {
+		statusEffects: newEffects,
+		activeEffects: [...player.activeEffects, effect.type]
+	});
+}
+/**
+* Get vital point by ID (fix return type)
+*/
+function getVitalPointByOnPlayerId(player, vitalPointId) {
+	return player.vitalPoints.find((vp) => vp.id === vitalPointId) ?? null;
+}
+/**
+* Check if player can act
+*/
+function canPlayerAct(player) {
+	if (player.health <= 0) return false;
+	if (player.consciousness <= 0) return false;
+	if (player.combatState === CombatState.STUNNED) return false;
+	if (player.isStunned) return false;
+	return true;
+}
+/**
+* Get player's current stance effectiveness against opponent
+*/
+function getStanceEffectiveness(_playerStance, _opponentStance) {
+	return 1;
+}
+/**
+* Check if player has enough resources for action
+*/
+function hasEnoughResources(player, kiCost, staminaCost) {
+	return player.ki >= kiCost && player.stamina >= staminaCost;
+}
+/**
+* Get player archetype bonuses
+*/
+function getArchetypeBonuses(archetype) {
+	const data = PLAYER_ARCHETYPES_DATA[archetype];
+	return {
+		attackBonus: data.stats.attackPower * .1,
+		defenseBonus: data.stats.defense * .1,
+		speedBonus: data.stats.speed * .1,
+		techniqueBonus: data.stats.technique * .1
+	};
+}
+/**
+* Calculate player's current combat effectiveness
+*/
+function calculateCombatEffectiveness(player) {
+	const healthFactor = player.health / player.maxHealth;
+	const staminaFactor = player.stamina / player.maxStamina;
+	const consciousnessFactor = player.consciousness / 100;
+	const balanceFactor = player.balance / 100;
+	return (healthFactor + staminaFactor + consciousnessFactor + balanceFactor) / 4;
+}
+/**
+* Remove expired status effects
+*/
+function updateStatusEffects(player, currentTime) {
+	const activeEffects = player.statusEffects.filter((effect) => effect.endTime > currentTime);
+	return updatePlayerState(player, {
+		statusEffects: activeEffects,
+		activeEffects: activeEffects.map((e) => e.type)
+	});
+}
+/**
+* Reset player to starting state
+*/
+function resetPlayerState(archetype, playerIndex) {
+	return createPlayerFromArchetype(archetype, playerIndex);
+}
+/**
+* Get archetype asset paths (image, theme music, etc.)
+*
+* Note: PlayerArchetype enum values are already lowercase (e.g., MUSA = "musa"),
+* so the toLowerCase() call is defensive programming for type safety.
+*/
+function getArchetypeAssets(archetype) {
+	const asset = ARCHETYPE_ASSETS[archetype.toLowerCase()];
+	if (!asset) {
+		console.warn(`No assets found for archetype: ${archetype}`);
+		return {
+			id: "unknown",
+			image: "/assets/visual/logo/black-trigram-256.png",
+			theme: "/assets/audio/music/intro_theme.mp3",
+			themeId: "intro_theme",
+			name_korean: "알 수 없음",
+			name_english: "Unknown",
+			textureKey: archetype
+		};
+	}
+	return asset;
+}
+/**
+* Initialize body facing for a player based on opponent position
+*
+* Calculates initial facing angle to point toward opponent.
+*
+* @param playerPosition - Player's position
+* @param opponentPosition - Opponent's position
+* @returns Initial BodyFacing state
+* @korean 몸향하기초기화
+*
+* @example
+* ```typescript
+* const player = {
+*   ...basePlayer,
+*   bodyFacing: initializeBodyFacing(
+*     { x: 300, y: 400 },
+*     { x: 500, y: 400 }
+*   ),
+* };
+* ```
+*/
+function initializeBodyFacing(playerPosition, opponentPosition) {
+	return createDefaultBodyFacing(calculateAngleToTarget(playerPosition, opponentPosition));
+}
+/**
+* Toggle the player's stance side (orthodox ↔ southpaw)
+*
+* Switches between orthodox (left foot forward) and southpaw (right foot forward).
+* This is used when executing stance switches or certain techniques.
+*
+* @param player - Current player state
+* @returns Updated player state with toggled stance side
+* @korean 자세측면전환
+*
+* @example
+* ```typescript
+* // Switch from orthodox to southpaw
+* const newState = toggleStanceSide(player);
+* // newState.stanceSide === 'southpaw'
+* ```
+*/
+function toggleStanceSide(player) {
+	const newStanceSide = player.stanceSide === "orthodox" ? "southpaw" : "orthodox";
+	return {
+		...player,
+		stanceSide: newStanceSide
+	};
+}
+/**
+* Get the lead foot from stance side, defaulting to orthodox if not set
+*
+* @param player - Player state
+* @returns Lead foot ('left' for orthodox, 'right' for southpaw)
+* @korean 자세측면에서선발발가져오기
+*/
+function getPlayerLeadFoot(player) {
+	return player.stanceSide === "southpaw" ? "right" : "left";
+}
+/**
+* Get the rear (power) foot for a player
+*
+* @param player - Player state
+* @returns Rear foot ('right' for orthodox, 'left' for southpaw)
+* @korean 후발발가져오기
+*/
+function getPlayerRearFoot(player) {
+	return player.stanceSide === "southpaw" ? "left" : "right";
+}
+//#endregion
+export { applyDamage, applyStatusEffect, calculateCombatEffectiveness, canPlayerAct, createPlayerFromArchetype, getArchetypeAssets, getArchetypeBonuses, getPlayerLeadFoot, getPlayerRearFoot, getStanceEffectiveness, getVitalPointByOnPlayerId, hasEnoughResources, initializeBodyFacing, resetPlayerState, toggleStanceSide, updatePlayerState, updateStatusEffects };
+
+//# sourceMappingURL=playerUtils.js.map

package/lib/utils/playerUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playerUtils.js","names":[],"sources":["../../src/utils/playerUtils.ts"],"sourcesContent":["/**\n * Player state utilities and helper functions\n */\n\nimport { getArchetypePhysicalAttributes } from \"../data/archetypePhysicalAttributes\";\nimport { PLAYER_ARCHETYPES_DATA, PlayerState, StatusEffect } from \"../systems\";\nimport {\n  calculateAngleToTarget,\n  createDefaultBodyFacing,\n} from \"../systems/animation\";\nimport type { BodyFacing } from \"../systems/animation/core/types\";\nimport {\n  BodyPart,\n  BodyPartHealth,\n  BodyPartMaxHealth,\n} from \"../systems/bodypart/types\";\nimport { PlayerArchetype, Position, TrigramStance } from \"../types\";\nimport { CombatState } from \"../types/common\";\nimport { ARCHETYPE_ASSETS } from \"../types/constants\";\n\n/**\n * Default body part health values (100 HP each)\n * @korean 기본 신체부위 체력\n */\nconst DEFAULT_BODY_PART_HEALTH: BodyPartHealth = {\n  [BodyPart.HEAD]: 100,\n  [BodyPart.NECK]: 100,\n  [BodyPart.TORSO_UPPER]: 100,\n  [BodyPart.TORSO_LOWER]: 100,\n  [BodyPart.ARM_LEFT]: 100,\n  [BodyPart.ARM_RIGHT]: 100,\n  [BodyPart.LEG_LEFT]: 100,\n  [BodyPart.LEG_RIGHT]: 100,\n};\n\n/**\n * Default body part max health values\n * @korean 기본 신체부위 최대체력\n */\nconst DEFAULT_BODY_PART_MAX_HEALTH: BodyPartMaxHealth = {\n  [BodyPart.HEAD]: 100,\n  [BodyPart.NECK]: 100,\n  [BodyPart.TORSO_UPPER]: 100,\n  [BodyPart.TORSO_LOWER]: 100,\n  [BodyPart.ARM_LEFT]: 100,\n  [BodyPart.ARM_RIGHT]: 100,\n  [BodyPart.LEG_LEFT]: 100,\n  [BodyPart.LEG_RIGHT]: 100,\n};\n\n/**\n * Create a complete PlayerState from archetype and player index\n */\nexport function createPlayerFromArchetype(\n  archetype: PlayerArchetype,\n  playerIndex: number,\n): PlayerState {\n  const archetypeData = PLAYER_ARCHETYPES_DATA[archetype];\n\n  const basePosition: Position = {\n    x: playerIndex === 0 ? 300 : 500,\n    y: 400,\n  };\n\n  return {\n    id: `player_${playerIndex + 1}`,\n    name: archetypeData.name,\n    archetype,\n\n    // Physical attributes loaded from archetype defaults\n    physicalAttributes: getArchetypePhysicalAttributes(archetype),\n\n    // Combat stats\n    health: archetypeData.baseHealth,\n    maxHealth: archetypeData.baseHealth,\n    bodyPartHealth: { ...DEFAULT_BODY_PART_HEALTH },\n    bodyPartMaxHealth: { ...DEFAULT_BODY_PART_MAX_HEALTH },\n    ki: archetypeData.baseKi,\n    maxKi: archetypeData.baseKi,\n    stamina: archetypeData.baseStamina,\n    maxStamina: archetypeData.baseStamina,\n    energy: 100,\n    maxEnergy: 100,\n\n    // Combat attributes\n    attackPower: archetypeData.stats.attackPower,\n    defense: archetypeData.stats.defense,\n    speed: archetypeData.stats.speed,\n    technique: archetypeData.stats.technique,\n    pain: 0,\n    consciousness: 100,\n    balance: 100,\n    momentum: 0,\n\n    // Combat state\n    currentStance: archetypeData.coreStance,\n    combatState: CombatState.IDLE,\n    position: basePosition,\n    // Default to orthodox/southpaw stance\n    // Player 1 starts orthodox, Player 2 starts southpaw for facing each other\n    stanceSide: playerIndex === 0 ? \"orthodox\" : \"southpaw\",\n    isBlocking: false,\n    isStunned: false,\n    isCountering: false,\n    lastActionTime: 0,\n    recoveryTime: 0,\n    lastStanceChangeTime: 0,\n\n    // Status and effects\n    statusEffects: [],\n    activeEffects: [],\n\n    // Vital points state\n    vitalPoints: [],\n\n    // Match statistics\n    totalDamageReceived: 0,\n    totalDamageDealt: 0,\n    hitsTaken: 0,\n    hitsLanded: 0,\n    perfectStrikes: 0,\n    vitalPointHits: 0,\n  };\n}\n\n/**\n * Update player state with partial updates\n */\nexport function updatePlayerState(\n  player: PlayerState,\n  updates: Partial<PlayerState>,\n): PlayerState {\n  return {\n    ...player,\n    ...updates,\n    // Ensure vital constraints\n    health: Math.max(\n      0,\n      Math.min(updates.health ?? player.health, player.maxHealth),\n    ),\n    ki: Math.max(0, Math.min(updates.ki ?? player.ki, player.maxKi)),\n    stamina: Math.max(\n      0,\n      Math.min(updates.stamina ?? player.stamina, player.maxStamina),\n    ),\n    consciousness: Math.max(\n      0,\n      Math.min(updates.consciousness ?? player.consciousness, 100),\n    ),\n    balance: Math.max(0, Math.min(updates.balance ?? player.balance, 100)),\n  };\n}\n\n/**\n * Apply damage to player\n */\nexport function applyDamage(\n  player: PlayerState,\n  damage: number,\n  _damageType?: string, // Fix: Add underscore for unused parameter\n): PlayerState {\n  const newHealth = Math.max(0, player.health - damage);\n  const isKnockedOut = newHealth <= 0;\n\n  return updatePlayerState(player, {\n    health: newHealth,\n    totalDamageReceived: player.totalDamageReceived + damage,\n    hitsTaken: player.hitsTaken + 1,\n    combatState: isKnockedOut ? CombatState.STUNNED : player.combatState,\n    consciousness: isKnockedOut ? 0 : player.consciousness,\n  });\n}\n\n/**\n * Apply status effect to player\n */\nexport function applyStatusEffect(\n  player: PlayerState,\n  effect: StatusEffect,\n): PlayerState {\n  const existingEffectIndex = player.statusEffects.findIndex(\n    (e) => e.type === effect.type && !e.stackable,\n  );\n\n  let newEffects: StatusEffect[];\n  if (existingEffectIndex >= 0 && !effect.stackable) {\n    // Replace existing non-stackable effect\n    newEffects = [...player.statusEffects];\n    newEffects[existingEffectIndex] = effect;\n  } else {\n    // Add new effect\n    newEffects = [...player.statusEffects, effect];\n  }\n\n  return updatePlayerState(player, {\n    statusEffects: newEffects,\n    activeEffects: [...player.activeEffects, effect.type],\n  });\n}\n\n/**\n * Get vital point by ID (fix return type)\n */\nexport function getVitalPointByOnPlayerId(\n  player: PlayerState,\n  vitalPointId: string,\n): {\n  readonly id: string;\n  readonly isHit: boolean;\n  readonly damage: number;\n  readonly lastHitTime: number;\n} | null {\n  return player.vitalPoints.find((vp) => vp.id === vitalPointId) ?? null;\n}\n\n/**\n * Check if player can act\n */\nexport function canPlayerAct(player: PlayerState): boolean {\n  if (player.health <= 0) return false;\n  if (player.consciousness <= 0) return false;\n  if (player.combatState === CombatState.STUNNED) return false;\n  if (player.isStunned) return false;\n  return true;\n}\n\n/**\n * Get player's current stance effectiveness against opponent\n */\nexport function getStanceEffectiveness(\n  _playerStance: TrigramStance, // Fix: Add underscore to unused parameter\n  _opponentStance: TrigramStance, // Fix: Add underscore to unused parameter\n): number {\n  // Basic implementation - could be enhanced with stance matrix\n  return 1.0;\n}\n\n/**\n * Check if player has enough resources for action\n */\nexport function hasEnoughResources(\n  player: PlayerState,\n  kiCost: number,\n  staminaCost: number,\n): boolean {\n  return player.ki >= kiCost && player.stamina >= staminaCost;\n}\n\n/**\n * Get player archetype bonuses\n */\nexport function getArchetypeBonuses(archetype: PlayerArchetype): {\n  attackBonus: number;\n  defenseBonus: number;\n  speedBonus: number;\n  techniqueBonus: number;\n} {\n  const data = PLAYER_ARCHETYPES_DATA[archetype];\n  return {\n    attackBonus: data.stats.attackPower * 0.1,\n    defenseBonus: data.stats.defense * 0.1,\n    speedBonus: data.stats.speed * 0.1,\n    techniqueBonus: data.stats.technique * 0.1,\n  };\n}\n\n/**\n * Calculate player's current combat effectiveness\n */\nexport function calculateCombatEffectiveness(player: PlayerState): number {\n  const healthFactor = player.health / player.maxHealth;\n  const staminaFactor = player.stamina / player.maxStamina;\n  const consciousnessFactor = player.consciousness / 100;\n  const balanceFactor = player.balance / 100;\n\n  return (\n    (healthFactor + staminaFactor + consciousnessFactor + balanceFactor) / 4\n  );\n}\n\n/**\n * Remove expired status effects\n */\nexport function updateStatusEffects(\n  player: PlayerState,\n  currentTime: number,\n): PlayerState {\n  const activeEffects = player.statusEffects.filter(\n    (effect) => effect.endTime > currentTime,\n  );\n\n  return updatePlayerState(player, {\n    statusEffects: activeEffects,\n    activeEffects: activeEffects.map((e) => e.type),\n  });\n}\n\n/**\n * Reset player to starting state\n */\nexport function resetPlayerState(\n  archetype: PlayerArchetype,\n  playerIndex: number,\n): PlayerState {\n  return createPlayerFromArchetype(archetype, playerIndex);\n}\n\n/**\n * Get archetype asset paths (image, theme music, etc.)\n *\n * Note: PlayerArchetype enum values are already lowercase (e.g., MUSA = \"musa\"),\n * so the toLowerCase() call is defensive programming for type safety.\n */\nexport function getArchetypeAssets(archetype: PlayerArchetype): {\n  readonly id: string;\n  readonly image: string;\n  readonly theme: string;\n  readonly themeId: string;\n  readonly name_korean: string;\n  readonly name_english: string;\n  readonly textureKey: string;\n} {\n  const archetypeId = archetype.toLowerCase();\n  const asset = ARCHETYPE_ASSETS[archetypeId as keyof typeof ARCHETYPE_ASSETS];\n\n  if (!asset) {\n    console.warn(`No assets found for archetype: ${archetype}`);\n    return {\n      id: \"unknown\",\n      image: \"/assets/visual/logo/black-trigram-256.png\",\n      theme: \"/assets/audio/music/intro_theme.mp3\",\n      themeId: \"intro_theme\",\n      name_korean: \"알 수 없음\",\n      name_english: \"Unknown\",\n      textureKey: archetype,\n    };\n  }\n\n  return asset;\n}\n\n/**\n * Initialize body facing for a player based on opponent position\n *\n * Calculates initial facing angle to point toward opponent.\n *\n * @param playerPosition - Player's position\n * @param opponentPosition - Opponent's position\n * @returns Initial BodyFacing state\n * @korean 몸향하기초기화\n *\n * @example\n * ```typescript\n * const player = {\n *   ...basePlayer,\n *   bodyFacing: initializeBodyFacing(\n *     { x: 300, y: 400 },\n *     { x: 500, y: 400 }\n *   ),\n * };\n * ```\n */\nexport function initializeBodyFacing(\n  playerPosition: Position,\n  opponentPosition: Position,\n): BodyFacing {\n  // Calculate initial angle to face opponent\n  const initialAngle = calculateAngleToTarget(playerPosition, opponentPosition);\n\n  return createDefaultBodyFacing(initialAngle);\n}\n\n/**\n * Toggle the player's stance side (orthodox ↔ southpaw)\n *\n * Switches between orthodox (left foot forward) and southpaw (right foot forward).\n * This is used when executing stance switches or certain techniques.\n *\n * @param player - Current player state\n * @returns Updated player state with toggled stance side\n * @korean 자세측면전환\n *\n * @example\n * ```typescript\n * // Switch from orthodox to southpaw\n * const newState = toggleStanceSide(player);\n * // newState.stanceSide === 'southpaw'\n * ```\n */\nexport function toggleStanceSide(player: PlayerState): PlayerState {\n  const newStanceSide = player.stanceSide === \"orthodox\" ? \"southpaw\" : \"orthodox\";\n\n  return {\n    ...player,\n    stanceSide: newStanceSide,\n  };\n}\n\n/**\n * Get the lead foot from stance side, defaulting to orthodox if not set\n *\n * @param player - Player state\n * @returns Lead foot ('left' for orthodox, 'right' for southpaw)\n * @korean 자세측면에서선발발가져오기\n */\nexport function getPlayerLeadFoot(player: PlayerState): \"left\" | \"right\" {\n  return player.stanceSide === \"southpaw\" ? \"right\" : \"left\"; // Default to orthodox\n}\n\n/**\n * Get the rear (power) foot for a player\n *\n * @param player - Player state\n * @returns Rear foot ('right' for orthodox, 'left' for southpaw)\n * @korean 후발발가져오기\n */\nexport function getPlayerRearFoot(player: PlayerState): \"left\" | \"right\" {\n  return player.stanceSide === \"southpaw\" ? \"left\" : \"right\";\n}\n"],"mappings":"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"}

package/lib/utils/responsiveLayout.d.ts

@@ -0,0 +1,207 @@
+/**
+ * Responsive Layout Utility Functions
+ *
+ * Helper functions for responsive layout calculations and touch target validation
+ *
+ * @module utils/responsiveLayout
+ * @category Mobile UI
+ * @korean 반응형레이아웃유틸
+ */
+/**
+ * Minimum touch target size according to iOS Human Interface Guidelines
+ */
+export declare const MIN_TOUCH_TARGET_SIZE = 44;
+/**
+ * Validate if an element meets minimum touch target requirements
+ *
+ * @param width - Element width in pixels
+ * @param height - Element height in pixels
+ * @param minSize - Minimum size (default: 44px iOS guideline)
+ * @returns True if element meets minimum requirements
+ *
+ * @example
+ * ```typescript
+ * const isValid = isValidTouchTarget(50, 50); // true
+ * const isTooSmall = isValidTouchTarget(30, 30); // false
+ * ```
+ */
+export declare function isValidTouchTarget(width: number, height: number, minSize?: number): boolean;
+/**
+ * Calculate optimal font size for given viewport width
+ * Ensures minimum readable font sizes on mobile
+ *
+ * @param viewportWidth - Viewport width in pixels
+ * @param baseSize - Base font size for desktop (default: 16)
+ * @param minSize - Minimum font size for mobile (default: 14)
+ * @returns Calculated font size in pixels
+ *
+ * @example
+ * ```typescript
+ * const fontSize = calculateFontSize(375, 16, 14); // 14px for mobile
+ * const fontSize = calculateFontSize(1920, 16, 14); // 16px for desktop
+ * ```
+ */
+export declare function calculateFontSize(viewportWidth: number, baseSize?: number, minSize?: number): number;
+/**
+ * Calculate element position within safe area
+ * Ensures elements don't overlap notch or home indicator
+ *
+ * @param value - Position value in pixels
+ * @param safeAreaInset - Safe area inset for that edge
+ * @returns Adjusted position value
+ *
+ * @example
+ * ```typescript
+ * const top = calculateSafePosition(10, 44); // 54px (10 + 44)
+ * const bottom = calculateSafePosition(20, 34); // 54px (20 + 34)
+ * ```
+ */
+export declare function calculateSafePosition(value: number, safeAreaInset: number): number;
+/**
+ * Calculate optimal HUD height for given viewport
+ * Scales based on device type and orientation
+ *
+ * @param viewportWidth - Viewport width in pixels
+ * @param isLandscape - Whether in landscape orientation
+ * @returns HUD height in pixels
+ *
+ * @example
+ * ```typescript
+ * const hudHeight = calculateHUDHeight(375, false); // ~80px for mobile portrait
+ * const hudHeight = calculateHUDHeight(667, true); // ~60px for mobile landscape
+ * ```
+ */
+export declare function calculateHUDHeight(viewportWidth: number, isLandscape: boolean): number;
+/**
+ * Calculate optimal control bar height for mobile
+ *
+ * @param isMobile - Whether on mobile device
+ * @param isLandscape - Whether in landscape orientation
+ * @returns Control bar height in pixels
+ */
+export declare function calculateControlsHeight(isMobile: boolean, isLandscape: boolean): number;
+/**
+ * Calculate spacing between HUD elements
+ * Ensures proper touch targets and visual hierarchy
+ *
+ * @param isMobile - Whether on mobile device
+ * @param density - Spacing density ('compact' | 'normal' | 'spacious')
+ * @returns Spacing value in pixels
+ */
+export declare function calculateSpacing(isMobile: boolean, density?: 'compact' | 'normal' | 'spacious'): number;
+/**
+ * Calculate optimal progress bar dimensions
+ * Ensures bars are touch-friendly on mobile
+ *
+ * @param isMobile - Whether on mobile device
+ * @param type - Bar type ('health' | 'ki' | 'stamina')
+ * @returns Bar dimensions { width, height }
+ */
+export declare function calculateProgressBarSize(isMobile: boolean, type: 'health' | 'ki' | 'stamina'): {
+    width: number;
+    height: number;
+};
+/**
+ * Get optimal grid layout for trigram stance selector
+ *
+ * @param isMobile - Whether on mobile device
+ * @param isLandscape - Whether in landscape orientation
+ * @returns Grid configuration { columns, rows, gap }
+ */
+export declare function getStanceSelectorLayout(isMobile: boolean, isLandscape: boolean): {
+    columns: number;
+    rows: number;
+    gap: number;
+};
+/**
+ * Resolution breakpoints for responsive design
+ * @korean 반응형 중단점
+ */
+export interface ResolutionBreakpoints {
+    readonly mobile: number;
+    readonly tablet: number;
+    readonly desktop: number;
+    readonly ultrawide: number;
+}
+/**
+ * Standard breakpoints for responsive sizing
+ */
+export declare const BREAKPOINTS: ResolutionBreakpoints;
+/**
+ * Get responsive size based on screen width
+ * Scales linearly between breakpoints
+ *
+ * @param width - Screen width in pixels
+ * @param sizes - Size values at each breakpoint
+ * @returns Interpolated size value
+ *
+ * @example
+ * ```typescript
+ * const fontSize = getResponsiveSize(1024, { mobile: 12, tablet: 14, desktop: 16 });
+ * // Returns ~13.3 (interpolated between mobile and tablet)
+ * ```
+ */
+export declare function getResponsiveSize(width: number, sizes: {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+}): number;
+/**
+ * Calculate HUD height as percentage of screen height
+ * Ensures minimum and maximum bounds for usability
+ *
+ * @param height - Screen height in pixels
+ * @param percentage - Target percentage (0.0 - 1.0)
+ * @returns Calculated HUD height with bounds applied
+ *
+ * @example
+ * ```typescript
+ * const hudHeight = getHUDHeight(1080, 0.08); // ~86px (8% of 1080)
+ * const tooSmall = getHUDHeight(400, 0.08);   // 40px (minimum applied)
+ * const tooLarge = getHUDHeight(3000, 0.08);  // 120px (maximum applied)
+ * ```
+ */
+export declare function getHUDHeight(height: number, percentage: number): number;
+/**
+ * Calculate padding based on resolution
+ *
+ * @param width - Screen width in pixels
+ * @returns Padding value in pixels
+ *
+ * @example
+ * ```typescript
+ * const padding = getResponsivePadding(375);  // 8px (mobile)
+ * const padding = getResponsivePadding(1920); // 16px (desktop)
+ * ```
+ */
+export declare function getResponsivePadding(width: number): number;
+/**
+ * Calculate font size based on resolution
+ *
+ * @param width - Screen width in pixels
+ * @returns Font size in pixels
+ *
+ * @example
+ * ```typescript
+ * const fontSize = getResponsiveFontSize(375);  // 12px (mobile)
+ * const fontSize = getResponsiveFontSize(1920); // 16px (desktop)
+ * ```
+ */
+export declare function getResponsiveFontSize(width: number): number;
+/**
+ * Determine if mobile controls should be shown
+ * NOTE: This is the ONLY valid use of isMobile prop
+ *
+ * @param width - Screen width in pixels
+ * @param isMobile - Optional mobile device flag
+ * @returns Whether to show mobile controls
+ *
+ * @example
+ * ```typescript
+ * const showControls = shouldShowMobileControls(500, false); // true (narrow screen)
+ * const showControls = shouldShowMobileControls(1920, false); // false (wide screen)
+ * const showControls = shouldShowMobileControls(1920, true); // true (mobile device)
+ * ```
+ */
+export declare function shouldShowMobileControls(width: number, isMobile?: boolean): boolean;
+//# sourceMappingURL=responsiveLayout.d.ts.map

package/lib/utils/responsiveLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveLayout.d.ts","sourceRoot":"","sources":["../../src/utils/responsiveLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,MAA8B,GACtC,OAAO,CAET;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,MAAM,EACrB,QAAQ,GAAE,MAAW,EACrB,OAAO,GAAE,MAAW,GACnB,MAAM,CAUR;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,GACpB,MAAM,CAER;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,OAAO,GACnB,MAAM,CAgBR;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,OAAO,GACnB,MAAM,CAUR;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,SAAS,GAAG,QAAQ,GAAG,UAAqB,GACpD,MAAM,CAYR;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAE,QAAQ,GAAG,IAAI,GAAG,SAAS,GAChC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAgBnC;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,OAAO,EACjB,WAAW,EAAE,OAAO,GACnB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAYhD;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,qBAKxB,CAAC;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACzD,MAAM,CAaR;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAEvE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAE,OAAe,GAAG,OAAO,CAE1F"}

package/lib/utils/responsiveLayout.js

@@ -0,0 +1,114 @@
+//#region src/utils/responsiveLayout.ts
+/**
+* Standard breakpoints for responsive sizing
+*/
+var BREAKPOINTS = Object.freeze({
+	mobile: 768,
+	tablet: 1280,
+	desktop: 1920,
+	ultrawide: 2560
+});
+/**
+* Get responsive size based on screen width
+* Scales linearly between breakpoints
+* 
+* @param width - Screen width in pixels
+* @param sizes - Size values at each breakpoint
+* @returns Interpolated size value
+* 
+* @example
+* ```typescript
+* const fontSize = getResponsiveSize(1024, { mobile: 12, tablet: 14, desktop: 16 });
+* // Returns ~13.3 (interpolated between mobile and tablet)
+* ```
+*/
+function getResponsiveSize(width, sizes) {
+	if (width < BREAKPOINTS.mobile) return sizes.mobile;
+	if (width < BREAKPOINTS.tablet) {
+		const ratio = (width - BREAKPOINTS.mobile) / (BREAKPOINTS.tablet - BREAKPOINTS.mobile);
+		return sizes.mobile + (sizes.tablet - sizes.mobile) * ratio;
+	}
+	if (width < BREAKPOINTS.desktop) {
+		const ratio = (width - BREAKPOINTS.tablet) / (BREAKPOINTS.desktop - BREAKPOINTS.tablet);
+		return sizes.tablet + (sizes.desktop - sizes.tablet) * ratio;
+	}
+	return sizes.desktop;
+}
+/**
+* Calculate HUD height as percentage of screen height
+* Ensures minimum and maximum bounds for usability
+* 
+* @param height - Screen height in pixels
+* @param percentage - Target percentage (0.0 - 1.0)
+* @returns Calculated HUD height with bounds applied
+* 
+* @example
+* ```typescript
+* const hudHeight = getHUDHeight(1080, 0.08); // ~86px (8% of 1080)
+* const tooSmall = getHUDHeight(400, 0.08);   // 40px (minimum applied)
+* const tooLarge = getHUDHeight(3000, 0.08);  // 120px (maximum applied)
+* ```
+*/
+function getHUDHeight(height, percentage) {
+	return Math.max(40, Math.min(120, height * percentage));
+}
+/**
+* Calculate padding based on resolution
+* 
+* @param width - Screen width in pixels
+* @returns Padding value in pixels
+* 
+* @example
+* ```typescript
+* const padding = getResponsivePadding(375);  // 8px (mobile)
+* const padding = getResponsivePadding(1920); // 16px (desktop)
+* ```
+*/
+function getResponsivePadding(width) {
+	return getResponsiveSize(width, {
+		mobile: 8,
+		tablet: 12,
+		desktop: 16
+	});
+}
+/**
+* Calculate font size based on resolution
+* 
+* @param width - Screen width in pixels
+* @returns Font size in pixels
+* 
+* @example
+* ```typescript
+* const fontSize = getResponsiveFontSize(375);  // 12px (mobile)
+* const fontSize = getResponsiveFontSize(1920); // 16px (desktop)
+* ```
+*/
+function getResponsiveFontSize(width) {
+	return getResponsiveSize(width, {
+		mobile: 12,
+		tablet: 14,
+		desktop: 16
+	});
+}
+/**
+* Determine if mobile controls should be shown
+* NOTE: This is the ONLY valid use of isMobile prop
+* 
+* @param width - Screen width in pixels
+* @param isMobile - Optional mobile device flag
+* @returns Whether to show mobile controls
+* 
+* @example
+* ```typescript
+* const showControls = shouldShowMobileControls(500, false); // true (narrow screen)
+* const showControls = shouldShowMobileControls(1920, false); // false (wide screen)
+* const showControls = shouldShowMobileControls(1920, true); // true (mobile device)
+* ```
+*/
+function shouldShowMobileControls(width, isMobile = false) {
+	return isMobile || width < BREAKPOINTS.mobile;
+}
+//#endregion
+export { BREAKPOINTS, getHUDHeight, getResponsiveFontSize, getResponsivePadding, getResponsiveSize, shouldShowMobileControls };
+
+//# sourceMappingURL=responsiveLayout.js.map

package/lib/utils/responsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveLayout.js","names":[],"sources":["../../src/utils/responsiveLayout.ts"],"sourcesContent":["/**\n * Responsive Layout Utility Functions\n * \n * Helper functions for responsive layout calculations and touch target validation\n * \n * @module utils/responsiveLayout\n * @category Mobile UI\n * @korean 반응형레이아웃유틸\n */\n\n/**\n * Minimum touch target size according to iOS Human Interface Guidelines\n */\nexport const MIN_TOUCH_TARGET_SIZE = 44;\n\n/**\n * Validate if an element meets minimum touch target requirements\n * \n * @param width - Element width in pixels\n * @param height - Element height in pixels\n * @param minSize - Minimum size (default: 44px iOS guideline)\n * @returns True if element meets minimum requirements\n * \n * @example\n * ```typescript\n * const isValid = isValidTouchTarget(50, 50); // true\n * const isTooSmall = isValidTouchTarget(30, 30); // false\n * ```\n */\nexport function isValidTouchTarget(\n  width: number,\n  height: number,\n  minSize: number = MIN_TOUCH_TARGET_SIZE\n): boolean {\n  return width >= minSize && height >= minSize;\n}\n\n/**\n * Calculate optimal font size for given viewport width\n * Ensures minimum readable font sizes on mobile\n * \n * @param viewportWidth - Viewport width in pixels\n * @param baseSize - Base font size for desktop (default: 16)\n * @param minSize - Minimum font size for mobile (default: 14)\n * @returns Calculated font size in pixels\n * \n * @example\n * ```typescript\n * const fontSize = calculateFontSize(375, 16, 14); // 14px for mobile\n * const fontSize = calculateFontSize(1920, 16, 14); // 16px for desktop\n * ```\n */\nexport function calculateFontSize(\n  viewportWidth: number,\n  baseSize: number = 16,\n  minSize: number = 14\n): number {\n  if (viewportWidth < 768) {\n    // Mobile: use minimum size or scale down slightly\n    return Math.max(minSize, Math.floor(baseSize * 0.875));\n  } else if (viewportWidth < 1024) {\n    // Tablet: scale proportionally\n    return Math.max(minSize, Math.floor(baseSize * 0.9375));\n  }\n  // Desktop: use base size\n  return baseSize;\n}\n\n/**\n * Calculate element position within safe area\n * Ensures elements don't overlap notch or home indicator\n * \n * @param value - Position value in pixels\n * @param safeAreaInset - Safe area inset for that edge\n * @returns Adjusted position value\n * \n * @example\n * ```typescript\n * const top = calculateSafePosition(10, 44); // 54px (10 + 44)\n * const bottom = calculateSafePosition(20, 34); // 54px (20 + 34)\n * ```\n */\nexport function calculateSafePosition(\n  value: number,\n  safeAreaInset: number\n): number {\n  return value + safeAreaInset;\n}\n\n/**\n * Calculate optimal HUD height for given viewport\n * Scales based on device type and orientation\n * \n * @param viewportWidth - Viewport width in pixels\n * @param isLandscape - Whether in landscape orientation\n * @returns HUD height in pixels\n * \n * @example\n * ```typescript\n * const hudHeight = calculateHUDHeight(375, false); // ~80px for mobile portrait\n * const hudHeight = calculateHUDHeight(667, true); // ~60px for mobile landscape\n * ```\n */\nexport function calculateHUDHeight(\n  viewportWidth: number,\n  isLandscape: boolean\n): number {\n  const isMobile = viewportWidth < 768;\n  const isSmallMobile = viewportWidth <= 375; // Changed to <= to match 375px iPhone SE\n\n  if (isLandscape && isMobile) {\n    // Landscape: minimize HUD to maximize gameplay area\n    return isSmallMobile ? 60 : 70;\n  }\n\n  if (isMobile) {\n    // Portrait mobile: compact but readable\n    return isSmallMobile ? 80 : 95;\n  }\n\n  // Desktop/tablet: larger HUD with more information\n  return 120;\n}\n\n/**\n * Calculate optimal control bar height for mobile\n * \n * @param isMobile - Whether on mobile device\n * @param isLandscape - Whether in landscape orientation\n * @returns Control bar height in pixels\n */\nexport function calculateControlsHeight(\n  isMobile: boolean,\n  isLandscape: boolean\n): number {\n  if (!isMobile) {\n    return 0; // Desktop uses keyboard\n  }\n\n  if (isLandscape) {\n    return 100; // Minimal controls in landscape\n  }\n\n  return 130; // Full touch controls in portrait\n}\n\n/**\n * Calculate spacing between HUD elements\n * Ensures proper touch targets and visual hierarchy\n * \n * @param isMobile - Whether on mobile device\n * @param density - Spacing density ('compact' | 'normal' | 'spacious')\n * @returns Spacing value in pixels\n */\nexport function calculateSpacing(\n  isMobile: boolean,\n  density: 'compact' | 'normal' | 'spacious' = 'normal'\n): number {\n  const baseSpacing = isMobile ? 8 : 12;\n\n  switch (density) {\n    case 'compact':\n      return Math.floor(baseSpacing * 0.75);\n    case 'spacious':\n      return Math.ceil(baseSpacing * 1.5);\n    case 'normal':\n    default:\n      return baseSpacing;\n  }\n}\n\n/**\n * Calculate optimal progress bar dimensions\n * Ensures bars are touch-friendly on mobile\n * \n * @param isMobile - Whether on mobile device\n * @param type - Bar type ('health' | 'ki' | 'stamina')\n * @returns Bar dimensions { width, height }\n */\nexport function calculateProgressBarSize(\n  isMobile: boolean,\n  type: 'health' | 'ki' | 'stamina'\n): { width: number; height: number } {\n  if (isMobile) {\n    // Mobile: touch-friendly sizes\n    const height = type === 'health' ? 48 : 40; // Health bar larger\n    return {\n      width: 160,\n      height,\n    };\n  }\n\n  // Desktop: more detailed display\n  const height = type === 'health' ? 55 : 45;\n  return {\n    width: 220,\n    height,\n  };\n}\n\n/**\n * Get optimal grid layout for trigram stance selector\n * \n * @param isMobile - Whether on mobile device\n * @param isLandscape - Whether in landscape orientation\n * @returns Grid configuration { columns, rows, gap }\n */\nexport function getStanceSelectorLayout(\n  isMobile: boolean,\n  isLandscape: boolean\n): { columns: number; rows: number; gap: number } {\n  if (isMobile) {\n    if (isLandscape) {\n      // Landscape: horizontal layout\n      return { columns: 4, rows: 2, gap: 8 };\n    }\n    // Portrait: compact grid\n    return { columns: 4, rows: 2, gap: 10 };\n  }\n\n  // Desktop: spacious layout\n  return { columns: 4, rows: 2, gap: 15 };\n}\n\n/**\n * Resolution breakpoints for responsive design\n * @korean 반응형 중단점\n */\nexport interface ResolutionBreakpoints {\n  readonly mobile: number;    // 768px\n  readonly tablet: number;    // 1280px\n  readonly desktop: number;   // 1920px\n  readonly ultrawide: number; // 2560px\n}\n\n/**\n * Standard breakpoints for responsive sizing\n */\nexport const BREAKPOINTS: ResolutionBreakpoints = Object.freeze({\n  mobile: 768,\n  tablet: 1280,\n  desktop: 1920,\n  ultrawide: 2560,\n});\n\n/**\n * Get responsive size based on screen width\n * Scales linearly between breakpoints\n * \n * @param width - Screen width in pixels\n * @param sizes - Size values at each breakpoint\n * @returns Interpolated size value\n * \n * @example\n * ```typescript\n * const fontSize = getResponsiveSize(1024, { mobile: 12, tablet: 14, desktop: 16 });\n * // Returns ~13.3 (interpolated between mobile and tablet)\n * ```\n */\nexport function getResponsiveSize(\n  width: number,\n  sizes: { mobile: number; tablet: number; desktop: number }\n): number {\n  if (width < BREAKPOINTS.mobile) {\n    return sizes.mobile;\n  }\n  if (width < BREAKPOINTS.tablet) {\n    const ratio = (width - BREAKPOINTS.mobile) / (BREAKPOINTS.tablet - BREAKPOINTS.mobile);\n    return sizes.mobile + (sizes.tablet - sizes.mobile) * ratio;\n  }\n  if (width < BREAKPOINTS.desktop) {\n    const ratio = (width - BREAKPOINTS.tablet) / (BREAKPOINTS.desktop - BREAKPOINTS.tablet);\n    return sizes.tablet + (sizes.desktop - sizes.tablet) * ratio;\n  }\n  return sizes.desktop;\n}\n\n/**\n * Calculate HUD height as percentage of screen height\n * Ensures minimum and maximum bounds for usability\n * \n * @param height - Screen height in pixels\n * @param percentage - Target percentage (0.0 - 1.0)\n * @returns Calculated HUD height with bounds applied\n * \n * @example\n * ```typescript\n * const hudHeight = getHUDHeight(1080, 0.08); // ~86px (8% of 1080)\n * const tooSmall = getHUDHeight(400, 0.08);   // 40px (minimum applied)\n * const tooLarge = getHUDHeight(3000, 0.08);  // 120px (maximum applied)\n * ```\n */\nexport function getHUDHeight(height: number, percentage: number): number {\n  return Math.max(40, Math.min(120, height * percentage));\n}\n\n/**\n * Calculate padding based on resolution\n * \n * @param width - Screen width in pixels\n * @returns Padding value in pixels\n * \n * @example\n * ```typescript\n * const padding = getResponsivePadding(375);  // 8px (mobile)\n * const padding = getResponsivePadding(1920); // 16px (desktop)\n * ```\n */\nexport function getResponsivePadding(width: number): number {\n  return getResponsiveSize(width, { mobile: 8, tablet: 12, desktop: 16 });\n}\n\n/**\n * Calculate font size based on resolution\n * \n * @param width - Screen width in pixels\n * @returns Font size in pixels\n * \n * @example\n * ```typescript\n * const fontSize = getResponsiveFontSize(375);  // 12px (mobile)\n * const fontSize = getResponsiveFontSize(1920); // 16px (desktop)\n * ```\n */\nexport function getResponsiveFontSize(width: number): number {\n  return getResponsiveSize(width, { mobile: 12, tablet: 14, desktop: 16 });\n}\n\n/**\n * Determine if mobile controls should be shown\n * NOTE: This is the ONLY valid use of isMobile prop\n * \n * @param width - Screen width in pixels\n * @param isMobile - Optional mobile device flag\n * @returns Whether to show mobile controls\n * \n * @example\n * ```typescript\n * const showControls = shouldShowMobileControls(500, false); // true (narrow screen)\n * const showControls = shouldShowMobileControls(1920, false); // false (wide screen)\n * const showControls = shouldShowMobileControls(1920, true); // true (mobile device)\n * ```\n */\nexport function shouldShowMobileControls(width: number, isMobile: boolean = false): boolean {\n  return isMobile || width < BREAKPOINTS.mobile;\n}\n"],"mappings":";;;;AA8OA,IAAa,cAAqC,OAAO,OAAO;CAC9D,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACZ,CAAC;;;;;;;;;;;;;;;AAgBF,SAAgB,kBACd,OACA,OACQ;AACR,KAAI,QAAQ,YAAY,OACtB,QAAO,MAAM;AAEf,KAAI,QAAQ,YAAY,QAAQ;EAC9B,MAAM,SAAS,QAAQ,YAAY,WAAW,YAAY,SAAS,YAAY;AAC/E,SAAO,MAAM,UAAU,MAAM,SAAS,MAAM,UAAU;;AAExD,KAAI,QAAQ,YAAY,SAAS;EAC/B,MAAM,SAAS,QAAQ,YAAY,WAAW,YAAY,UAAU,YAAY;AAChF,SAAO,MAAM,UAAU,MAAM,UAAU,MAAM,UAAU;;AAEzD,QAAO,MAAM;;;;;;;;;;;;;;;;;AAkBf,SAAgB,aAAa,QAAgB,YAA4B;AACvE,QAAO,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,SAAS,WAAW,CAAC;;;;;;;;;;;;;;AAezD,SAAgB,qBAAqB,OAAuB;AAC1D,QAAO,kBAAkB,OAAO;EAAE,QAAQ;EAAG,QAAQ;EAAI,SAAS;EAAI,CAAC;;;;;;;;;;;;;;AAezE,SAAgB,sBAAsB,OAAuB;AAC3D,QAAO,kBAAkB,OAAO;EAAE,QAAQ;EAAI,QAAQ;EAAI,SAAS;EAAI,CAAC;;;;;;;;;;;;;;;;;AAkB1E,SAAgB,yBAAyB,OAAe,WAAoB,OAAgB;AAC1F,QAAO,YAAY,QAAQ,YAAY"}