blacktrigram 0.7.2

package/lib/components/shared/three/ui/BodyPartHealthDisplay.js

@@ -0,0 +1,206 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { BodyPart } from "../../../../systems/bodypart/types.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/BodyPartHealthDisplay.tsx
+/**
+* BodyPartHealthDisplay Component - Individual body part health visualization
+*
+* Displays health bars for all 8 body parts:
+* - Head (두부)
+* - Neck (경부)
+* - Torso Upper (상부 몸통)
+* - Torso Lower (하부 몸통)
+* - Left Arm (좌팔)
+* - Right Arm (우팔)
+* - Left Leg (좌다리)
+* - Right Leg (우다리)
+*
+* @module components/shared/three/ui/BodyPartHealthDisplay
+* @category Shared UI
+* @korean 신체부위체력표시
+*/
+/**
+* Body part names in Korean and English
+*/
+var BODY_PART_NAMES = {
+	[BodyPart.HEAD]: {
+		korean: "두부",
+		english: "Head"
+	},
+	[BodyPart.NECK]: {
+		korean: "경부",
+		english: "Neck"
+	},
+	[BodyPart.TORSO_UPPER]: {
+		korean: "상부",
+		english: "Upper"
+	},
+	[BodyPart.TORSO_LOWER]: {
+		korean: "하부",
+		english: "Lower"
+	},
+	[BodyPart.ARM_LEFT]: {
+		korean: "좌팔",
+		english: "L.Arm"
+	},
+	[BodyPart.ARM_RIGHT]: {
+		korean: "우팔",
+		english: "R.Arm"
+	},
+	[BodyPart.LEG_LEFT]: {
+		korean: "좌다리",
+		english: "L.Leg"
+	},
+	[BodyPart.LEG_RIGHT]: {
+		korean: "우다리",
+		english: "R.Leg"
+	}
+};
+/**
+* Get health bar color based on health percentage
+*/
+var getHealthColor = (health) => {
+	if (health >= 80) return 65280;
+	if (health >= 60) return 16766720;
+	if (health >= 40) return 16753920;
+	if (health >= 20) return 16739179;
+	return 9109504;
+};
+/**
+* BodyPartHealthDisplay - Shows health bars for all 8 body parts
+*
+* @example
+* ```tsx
+* <BodyPartHealthDisplay
+*   bodyPartHealth={player.bodyPartHealth}
+*   playerId="player-1"
+*   position="left"
+*   isMobile={false}
+* />
+* ```
+*/
+var BodyPartHealthDisplay = ({ bodyPartHealth, playerId, position, isMobile }) => {
+	const isLeft = position === "left";
+	const barWidth = isMobile ? 100 : 140;
+	const barHeight = isMobile ? 8 : 10;
+	const fontSize = isMobile ? 9 : 10;
+	const gap = isMobile ? "4px" : "5px";
+	const bodyPartGroups = useMemo(() => [
+		{
+			label: "상체 | Upper",
+			parts: [
+				BodyPart.HEAD,
+				BodyPart.NECK,
+				BodyPart.TORSO_UPPER,
+				BodyPart.TORSO_LOWER
+			]
+		},
+		{
+			label: "팔 | Arms",
+			parts: [BodyPart.ARM_LEFT, BodyPart.ARM_RIGHT]
+		},
+		{
+			label: "다리 | Legs",
+			parts: [BodyPart.LEG_LEFT, BodyPart.LEG_RIGHT]
+		}
+	], []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `body-part-health-${playerId}`,
+		style: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			gap,
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9),
+			borderRadius: "8px",
+			padding: isMobile ? "6px" : "8px",
+			border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .7)}`,
+			boxShadow: `0 0 12px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .3)}`,
+			pointerEvents: "none",
+			width: "100%",
+			boxSizing: "border-box",
+			fontSize: isMobile ? "9px" : "10px"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: isMobile ? "10px" : "11px",
+				fontWeight: "bold",
+				fontFamily: FONT_FAMILY.KOREAN,
+				color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),
+				textAlign: isLeft ? "left" : "right",
+				marginBottom: "2px"
+			},
+			children: "신체 | Body Parts"
+		}), bodyPartGroups.map((group) => /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "3px"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: `${fontSize - 1}px`,
+					fontFamily: FONT_FAMILY.KOREAN,
+					color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, .8),
+					textAlign: isLeft ? "left" : "right",
+					marginTop: group.label === bodyPartGroups[0].label ? "0" : "4px"
+				},
+				children: group.label
+			}), group.parts.map((part) => {
+				const health = bodyPartHealth[part];
+				const names = BODY_PART_NAMES[part];
+				const healthColor = getHealthColor(health);
+				const shouldPulse = health < 20;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-testid": `body-part-${playerId}-${part}`,
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "2px"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							fontSize: `${fontSize}px`,
+							fontFamily: FONT_FAMILY.KOREAN,
+							color: hexToRgbaString(healthColor, 1)
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: { fontWeight: health < 40 ? "bold" : "normal" },
+							children: isMobile ? names.korean : `${names.korean} | ${names.english}`
+						}), /* @__PURE__ */ jsxs("span", {
+							style: { fontSize: `${fontSize - 1}px` },
+							children: [Math.round(health), "%"]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							width: `${barWidth}px`,
+							height: `${barHeight}px`,
+							backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),
+							borderRadius: "2px",
+							overflow: "hidden",
+							animation: shouldPulse ? "healthPulse 0.8s infinite" : "none"
+						},
+						children: /* @__PURE__ */ jsx("div", { style: {
+							width: `${health}%`,
+							height: "100%",
+							backgroundColor: hexToRgbaString(healthColor, 1),
+							transition: "width 0.3s ease-in-out, background-color 0.3s ease-in-out",
+							boxShadow: `0 0 8px ${hexToRgbaString(healthColor, .4)}`
+						} })
+					})]
+				}, part);
+			})]
+		}, group.label))]
+	});
+};
+//#endregion
+export { BodyPartHealthDisplay as default };
+
+//# sourceMappingURL=BodyPartHealthDisplay.js.map

package/lib/components/shared/three/ui/BodyPartHealthDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyPartHealthDisplay.js","names":[],"sources":["../../../../../src/components/shared/three/ui/BodyPartHealthDisplay.tsx"],"sourcesContent":["/**\n * BodyPartHealthDisplay Component - Individual body part health visualization\n *\n * Displays health bars for all 8 body parts:\n * - Head (두부)\n * - Neck (경부)\n * - Torso Upper (상부 몸통)\n * - Torso Lower (하부 몸통)\n * - Left Arm (좌팔)\n * - Right Arm (우팔)\n * - Left Leg (좌다리)\n * - Right Leg (우다리)\n *\n * @module components/shared/three/ui/BodyPartHealthDisplay\n * @category Shared UI\n * @korean 신체부위체력표시\n */\n\nimport React, { useMemo } from \"react\";\nimport { BodyPart, BodyPartHealth } from \"../../../../systems/bodypart/types\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface BodyPartHealthDisplayProps {\n  /** Body part health data */\n  readonly bodyPartHealth: BodyPartHealth;\n  /** Player identifier for test IDs */\n  readonly playerId: string;\n  /** Position: 'left' for player 1, 'right' for player 2 */\n  readonly position: \"left\" | \"right\";\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * Body part names in Korean and English\n */\nconst BODY_PART_NAMES: Record<BodyPart, { korean: string; english: string }> = {\n  [BodyPart.HEAD]: { korean: \"두부\", english: \"Head\" },\n  [BodyPart.NECK]: { korean: \"경부\", english: \"Neck\" },\n  [BodyPart.TORSO_UPPER]: { korean: \"상부\", english: \"Upper\" },\n  [BodyPart.TORSO_LOWER]: { korean: \"하부\", english: \"Lower\" },\n  [BodyPart.ARM_LEFT]: { korean: \"좌팔\", english: \"L.Arm\" },\n  [BodyPart.ARM_RIGHT]: { korean: \"우팔\", english: \"R.Arm\" },\n  [BodyPart.LEG_LEFT]: { korean: \"좌다리\", english: \"L.Leg\" },\n  [BodyPart.LEG_RIGHT]: { korean: \"우다리\", english: \"R.Leg\" },\n};\n\n/**\n * Get health bar color based on health percentage\n */\nconst getHealthColor = (health: number): number => {\n  if (health >= 80) return 0x00ff00; // Green\n  if (health >= 60) return 0xffd700; // Yellow\n  if (health >= 40) return 0xffa500; // Orange\n  if (health >= 20) return 0xff6b6b; // Red\n  return 0x8b0000; // Dark red\n};\n\n/**\n * BodyPartHealthDisplay - Shows health bars for all 8 body parts\n *\n * @example\n * ```tsx\n * <BodyPartHealthDisplay\n *   bodyPartHealth={player.bodyPartHealth}\n *   playerId=\"player-1\"\n *   position=\"left\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const BodyPartHealthDisplay: React.FC<BodyPartHealthDisplayProps> = ({\n  bodyPartHealth,\n  playerId,\n  position,\n  isMobile,\n}) => {\n  const isLeft = position === \"left\";\n\n  // Responsive sizing\n  const barWidth = isMobile ? 100 : 140;\n  const barHeight = isMobile ? 8 : 10;\n  const fontSize = isMobile ? 9 : 10;\n  const gap = isMobile ? \"4px\" : \"5px\";\n\n  // Group body parts for display\n  const bodyPartGroups = useMemo(\n    () => [\n      {\n        label: \"상체 | Upper\",\n        parts: [\n          BodyPart.HEAD,\n          BodyPart.NECK,\n          BodyPart.TORSO_UPPER,\n          BodyPart.TORSO_LOWER,\n        ],\n      },\n      { label: \"팔 | Arms\", parts: [BodyPart.ARM_LEFT, BodyPart.ARM_RIGHT] },\n      { label: \"다리 | Legs\", parts: [BodyPart.LEG_LEFT, BodyPart.LEG_RIGHT] },\n    ],\n    [],\n  );\n\n  return (\n    <div\n      data-testid={`body-part-health-${playerId}`}\n      style={{\n        position: \"relative\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        borderRadius: \"8px\",\n        padding: isMobile ? \"6px\" : \"8px\",\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7)}`,\n        boxShadow: `0 0 12px ${hexToRgbaString(\n          KOREAN_COLORS.PRIMARY_CYAN,\n          0.3,\n        )}`,\n        pointerEvents: \"none\",\n        width: \"100%\",\n        boxSizing: \"border-box\" as const,\n        fontSize: isMobile ? \"9px\" : \"10px\",\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: isMobile ? \"10px\" : \"11px\",\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          textAlign: isLeft ? \"left\" : \"right\",\n          marginBottom: \"2px\",\n        }}\n      >\n        신체 | Body Parts\n      </div>\n\n      {/* Body part groups */}\n      {bodyPartGroups.map((group) => (\n        <div\n          key={group.label}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"3px\",\n          }}\n        >\n          {/* Group label - optional, can be hidden for compact display */}\n          <div\n            style={{\n              fontSize: `${fontSize - 1}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 0.8),\n              textAlign: isLeft ? \"left\" : \"right\",\n              marginTop: group.label === bodyPartGroups[0].label ? \"0\" : \"4px\",\n            }}\n          >\n            {group.label}\n          </div>\n\n          {/* Body parts in group */}\n          {group.parts.map((part) => {\n            const health = bodyPartHealth[part];\n            const names = BODY_PART_NAMES[part];\n            const healthColor = getHealthColor(health);\n            const shouldPulse = health < 20;\n\n            return (\n              <div\n                key={part}\n                data-testid={`body-part-${playerId}-${part}`}\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  gap: \"2px\",\n                }}\n              >\n                {/* Body part name and value */}\n                <div\n                  style={{\n                    display: \"flex\",\n                    justifyContent: \"space-between\",\n                    alignItems: \"center\",\n                    fontSize: `${fontSize}px`,\n                    fontFamily: FONT_FAMILY.KOREAN,\n                    color: hexToRgbaString(healthColor, 1),\n                  }}\n                >\n                  <span style={{ fontWeight: health < 40 ? \"bold\" : \"normal\" }}>\n                    {isMobile\n                      ? names.korean\n                      : `${names.korean} | ${names.english}`}\n                  </span>\n                  <span style={{ fontSize: `${fontSize - 1}px` }}>\n                    {Math.round(health)}%\n                  </span>\n                </div>\n\n                {/* Health bar */}\n                <div\n                  style={{\n                    width: `${barWidth}px`,\n                    height: `${barHeight}px`,\n                    backgroundColor: hexToRgbaString(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n                      1,\n                    ),\n                    borderRadius: \"2px\",\n                    overflow: \"hidden\",\n                    animation: shouldPulse\n                      ? \"healthPulse 0.8s infinite\"\n                      : \"none\",\n                  }}\n                >\n                  <div\n                    style={{\n                      width: `${health}%`,\n                      height: \"100%\",\n                      backgroundColor: hexToRgbaString(healthColor, 1),\n                      transition:\n                        \"width 0.3s ease-in-out, background-color 0.3s ease-in-out\",\n                      boxShadow: `0 0 8px ${hexToRgbaString(healthColor, 0.4)}`,\n                    }}\n                  />\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default BodyPartHealthDisplay;\n"],"mappings":"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"}

package/lib/components/shared/three/ui/BreathingIndicator.d.ts

@@ -0,0 +1,25 @@
+/**
+ * BreathingIndicator Component - Visual feedback for breathing disruption status
+ *
+ * **Korean**: 호흡곤란 표시기
+ *
+ * Displays breathing difficulty with:
+ * - Color-coded lungs icon (🫁)
+ * - Bilingual label (Korean | English)
+ * - Time remaining until recovery
+ * - Pulsing animation based on severity
+ */
+import React from "react";
+import { PlayerState } from "../../../../systems/player";
+import "./BreathingIndicator.css";
+export interface BreathingIndicatorProps {
+    /** Player state to check for breathing disruption */
+    readonly player: PlayerState;
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile?: boolean;
+}
+/**
+ * BreathingIndicator - Shows breathing disruption status with Korean-English labels
+ */
+export declare const BreathingIndicator: React.FC<BreathingIndicatorProps>;
+//# sourceMappingURL=BreathingIndicator.d.ts.map

package/lib/components/shared/three/ui/BreathingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreathingIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/BreathingIndicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGzD,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,uBAAuB;IACtC,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA8GhE,CAAC"}

package/lib/components/shared/three/ui/BreathingIndicator2.js

@@ -0,0 +1,104 @@
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { BreathingDisruptionSystem } from "../../../../systems/breathing/BreathingDisruptionSystem.js";
+import { createBreathingIndicator } from "../../../../systems/breathing/feedback.js";
+import "../../../../systems/breathing/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+/* empty css                   */
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/BreathingIndicator.tsx
+/**
+* BreathingIndicator Component - Visual feedback for breathing disruption status
+* 
+* **Korean**: 호흡곤란 표시기
+* 
+* Displays breathing difficulty with:
+* - Color-coded lungs icon (🫁)
+* - Bilingual label (Korean | English)
+* - Time remaining until recovery
+* - Pulsing animation based on severity
+*/
+/**
+* BreathingIndicator - Shows breathing disruption status with Korean-English labels
+*/
+var BreathingIndicator = ({ player, isMobile = false }) => {
+	const [currentTime, setCurrentTime] = useState(() => Date.now());
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setCurrentTime(Date.now());
+		}, 100);
+		return () => clearInterval(interval);
+	}, []);
+	const breathingState = useMemo(() => {
+		const level = BreathingDisruptionSystem.getCurrentLevel(player);
+		const activeEffect = BreathingDisruptionSystem.getActiveEffect(player);
+		return createBreathingIndicator(level, activeEffect ? Math.max(0, activeEffect.endTime - currentTime) : 0, BreathingDisruptionSystem.canRecover(player));
+	}, [player, currentTime]);
+	if (!breathingState.visible) return null;
+	const iconSize = isMobile ? 24 : 32;
+	const fontSize = isMobile ? 10 : 12;
+	const padding = isMobile ? "4px 8px" : "6px 12px";
+	const secondsRemaining = Math.ceil(breathingState.timeRemaining / 1e3);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "breathing-indicator",
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: isMobile ? "6px" : "8px",
+			padding,
+			backgroundColor: "rgba(0, 0, 0, 0.7)",
+			borderRadius: "8px",
+			border: `2px solid ${hexToRgbaString(breathingState.color, breathingState.opacity)}`,
+			boxShadow: `0 0 10px ${hexToRgbaString(breathingState.color, .5)}`,
+			animation: "breathing-pulse 1s ease-in-out infinite",
+			pointerEvents: "none"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-testid": "breathing-icon",
+			style: {
+				fontSize: `${iconSize}px`,
+				lineHeight: 1,
+				transform: `scale(${breathingState.scale})`,
+				filter: `drop-shadow(0 0 6px ${hexToRgbaString(breathingState.color, .6)})`
+			},
+			children: breathingState.icon
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "2px"
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				"data-testid": "breathing-label",
+				style: {
+					fontSize: `${fontSize}px`,
+					fontFamily: FONT_FAMILY.KOREAN,
+					fontWeight: "bold",
+					color: hexToRgbaString(breathingState.color, 1),
+					textShadow: `0 0 4px ${hexToRgbaString(breathingState.color, .8)}`,
+					whiteSpace: "nowrap"
+				},
+				children: [
+					breathingState.label.korean,
+					" | ",
+					breathingState.label.english
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				"data-testid": "breathing-timer",
+				style: {
+					fontSize: `${fontSize - 2}px`,
+					fontFamily: FONT_FAMILY.KOREAN,
+					color: breathingState.isRecovering ? hexToRgbaString(65280, .8) : hexToRgbaString(16777215, .6),
+					whiteSpace: "nowrap"
+				},
+				children: breathingState.isRecovering ? "회복중 | Recovering" : `${secondsRemaining}s`
+			})]
+		})]
+	});
+};
+BreathingIndicator.displayName = "BreathingIndicator";
+//#endregion
+export { BreathingIndicator };
+
+//# sourceMappingURL=BreathingIndicator2.js.map

package/lib/components/shared/three/ui/BreathingIndicator2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreathingIndicator2.js","names":[],"sources":["../../../../../src/components/shared/three/ui/BreathingIndicator.tsx"],"sourcesContent":["/**\n * BreathingIndicator Component - Visual feedback for breathing disruption status\n * \n * **Korean**: 호흡곤란 표시기\n * \n * Displays breathing difficulty with:\n * - Color-coded lungs icon (🫁)\n * - Bilingual label (Korean | English)\n * - Time remaining until recovery\n * - Pulsing animation based on severity\n */\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport {\n  BreathingDisruptionSystem,\n  createBreathingIndicator,\n} from \"../../../../systems/breathing\";\nimport { PlayerState } from \"../../../../systems/player\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"./BreathingIndicator.css\";\n\nexport interface BreathingIndicatorProps {\n  /** Player state to check for breathing disruption */\n  readonly player: PlayerState;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile?: boolean;\n}\n\n/**\n * BreathingIndicator - Shows breathing disruption status with Korean-English labels\n */\nexport const BreathingIndicator: React.FC<BreathingIndicatorProps> = ({\n  player,\n  isMobile = false,\n}) => {\n  // Use state to trigger re-renders for timer updates\n  const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n  // Update current time every 100ms to keep the timer accurate\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setCurrentTime(Date.now());\n    }, 100);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  // Get current breathing disruption state\n  const breathingState = useMemo(() => {\n    const level = BreathingDisruptionSystem.getCurrentLevel(player);\n    const activeEffect = BreathingDisruptionSystem.getActiveEffect(player);\n    const timeRemaining = activeEffect\n      ? Math.max(0, activeEffect.endTime - currentTime)\n      : 0;\n    const isRecovering = BreathingDisruptionSystem.canRecover(player);\n\n    return createBreathingIndicator(level, timeRemaining, isRecovering);\n  }, [player, currentTime]);\n\n  // Don't render if no breathing disruption\n  if (!breathingState.visible) {\n    return null;\n  }\n\n  // Responsive sizing\n  const iconSize = isMobile ? 24 : 32;\n  const fontSize = isMobile ? 10 : 12;\n  const padding = isMobile ? \"4px 8px\" : \"6px 12px\";\n\n  // Format time remaining\n  const secondsRemaining = Math.ceil(breathingState.timeRemaining / 1000);\n\n  return (\n    <div\n      data-testid=\"breathing-indicator\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: isMobile ? \"6px\" : \"8px\",\n        padding,\n        backgroundColor: \"rgba(0, 0, 0, 0.7)\",\n        borderRadius: \"8px\",\n        border: `2px solid ${hexToRgbaString(breathingState.color, breathingState.opacity)}`,\n        boxShadow: `0 0 10px ${hexToRgbaString(breathingState.color, 0.5)}`,\n        animation: \"breathing-pulse 1s ease-in-out infinite\",\n        pointerEvents: \"none\",\n      }}\n    >\n        {/* Lungs icon */}\n        <div\n          data-testid=\"breathing-icon\"\n          style={{\n            fontSize: `${iconSize}px`,\n            lineHeight: 1,\n            transform: `scale(${breathingState.scale})`,\n            filter: `drop-shadow(0 0 6px ${hexToRgbaString(breathingState.color, 0.6)})`,\n          }}\n        >\n          {breathingState.icon}\n        </div>\n\n        {/* Label and time */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n          }}\n        >\n          {/* Bilingual label */}\n          <div\n            data-testid=\"breathing-label\"\n            style={{\n              fontSize: `${fontSize}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              fontWeight: \"bold\",\n              color: hexToRgbaString(breathingState.color, 1),\n              textShadow: `0 0 4px ${hexToRgbaString(breathingState.color, 0.8)}`,\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {breathingState.label.korean} | {breathingState.label.english}\n          </div>\n\n          {/* Time remaining */}\n          <div\n            data-testid=\"breathing-timer\"\n            style={{\n              fontSize: `${fontSize - 2}px`,\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: breathingState.isRecovering\n                ? hexToRgbaString(0x00ff00, 0.8)\n                : hexToRgbaString(0xffffff, 0.6),\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {breathingState.isRecovering ? \"회복중 | Recovering\" : `${secondsRemaining}s`}\n          </div>\n        </div>\n      </div>\n  );\n};\n\nBreathingIndicator.displayName = \"BreathingIndicator\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,sBAAyD,EACpE,QACA,WAAW,YACP;CAEJ,MAAM,CAAC,aAAa,kBAAkB,eAAe,KAAK,KAAK,CAAC;AAGhE,iBAAgB;EACd,MAAM,WAAW,kBAAkB;AACjC,kBAAe,KAAK,KAAK,CAAC;KACzB,IAAI;AAEP,eAAa,cAAc,SAAS;IACnC,EAAE,CAAC;CAGN,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,0BAA0B,gBAAgB,OAAO;EAC/D,MAAM,eAAe,0BAA0B,gBAAgB,OAAO;AAMtE,SAAO,yBAAyB,OALV,eAClB,KAAK,IAAI,GAAG,aAAa,UAAU,YAAY,GAC/C,GACiB,0BAA0B,WAAW,OAAO,CAEE;IAClE,CAAC,QAAQ,YAAY,CAAC;AAGzB,KAAI,CAAC,eAAe,QAClB,QAAO;CAIT,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,YAAY;CAGvC,MAAM,mBAAmB,KAAK,KAAK,eAAe,gBAAgB,IAAK;AAEvE,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,WAAW,QAAQ;GACxB;GACA,iBAAiB;GACjB,cAAc;GACd,QAAQ,aAAa,gBAAgB,eAAe,OAAO,eAAe,QAAQ;GAClF,WAAW,YAAY,gBAAgB,eAAe,OAAO,GAAI;GACjE,WAAW;GACX,eAAe;GAChB;YAbH,CAgBI,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,UAAU,GAAG,SAAS;IACtB,YAAY;IACZ,WAAW,SAAS,eAAe,MAAM;IACzC,QAAQ,uBAAuB,gBAAgB,eAAe,OAAO,GAAI,CAAC;IAC3E;aAEA,eAAe;GACZ,CAAA,EAGN,qBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,eAAe;IACf,KAAK;IACN;aALH,CAQE,qBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU,GAAG,SAAS;KACtB,YAAY,YAAY;KACxB,YAAY;KACZ,OAAO,gBAAgB,eAAe,OAAO,EAAE;KAC/C,YAAY,WAAW,gBAAgB,eAAe,OAAO,GAAI;KACjE,YAAY;KACb;cATH;KAWG,eAAe,MAAM;KAAO;KAAI,eAAe,MAAM;KAClD;OAGN,oBAAC,OAAD;IACE,eAAY;IACZ,OAAO;KACL,UAAU,GAAG,WAAW,EAAE;KAC1B,YAAY,YAAY;KACxB,OAAO,eAAe,eAClB,gBAAgB,OAAU,GAAI,GAC9B,gBAAgB,UAAU,GAAI;KAClC,YAAY;KACb;cAEA,eAAe,eAAe,qBAAqB,GAAG,iBAAiB;IACpE,CAAA,CACF;KACF;;;AAIZ,mBAAmB,cAAc"}

package/lib/components/shared/three/ui/CombatReadinessBar.d.ts

@@ -0,0 +1,43 @@
+/**
+ * CombatReadinessBar Component - 10-bar segmented combat readiness display
+ *
+ * Displays comprehensive combat readiness with:
+ * - 10 segmented bars representing 10% each
+ * - Color transitions: Green (>80%), Yellow (60-79%), Orange (40-59%), Red (20-39%), Dark Red (<20%)
+ * - Smooth 0.3s transition animations
+ * - Korean/English bilingual labels
+ * - Numeric percentage display
+ * - Responsive sizing for mobile/tablet/desktop
+ * - Real-time calculation from body health, pain, consciousness, and balance
+ */
+import React from "react";
+import type { PlayerState } from "../../../../systems/player";
+export interface CombatReadinessBarProps {
+    /** Player state containing all combat factors */
+    readonly player: PlayerState;
+    /** Player identifier for test ID */
+    readonly playerId: string;
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile: boolean;
+}
+/**
+ * CombatReadinessBar - 10-bar segmented combat readiness display with Korean theming
+ *
+ * Calculates and displays overall combat readiness from multiple factors:
+ * - Body part health (40% weight)
+ * - Pain level (20% weight)
+ * - Consciousness (20% weight)
+ * - Balance state (20% weight)
+ *
+ * @example
+ * ```tsx
+ * <CombatReadinessBar
+ *   player={playerState}
+ *   playerId="player-1"
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const CombatReadinessBar: React.FC<CombatReadinessBarProps>;
+export default CombatReadinessBar;
+//# sourceMappingURL=CombatReadinessBar.d.ts.map

package/lib/components/shared/three/ui/CombatReadinessBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombatReadinessBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/CombatReadinessBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AASvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,iDAAiD;IACjD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+GhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/shared/three/ui/CombatReadinessBar.js

@@ -0,0 +1,135 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { calculateCombatReadiness, getCombatReadinessBars, getCombatReadinessColor, getCombatReadinessLabel } from "../../../../utils/combatReadiness.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/CombatReadinessBar.tsx
+/**
+* CombatReadinessBar Component - 10-bar segmented combat readiness display
+* 
+* Displays comprehensive combat readiness with:
+* - 10 segmented bars representing 10% each
+* - Color transitions: Green (>80%), Yellow (60-79%), Orange (40-59%), Red (20-39%), Dark Red (<20%)
+* - Smooth 0.3s transition animations
+* - Korean/English bilingual labels
+* - Numeric percentage display
+* - Responsive sizing for mobile/tablet/desktop
+* - Real-time calculation from body health, pain, consciousness, and balance
+*/
+/**
+* CombatReadinessBar - 10-bar segmented combat readiness display with Korean theming
+* 
+* Calculates and displays overall combat readiness from multiple factors:
+* - Body part health (40% weight)
+* - Pain level (20% weight)
+* - Consciousness (20% weight)
+* - Balance state (20% weight)
+* 
+* @example
+* ```tsx
+* <CombatReadinessBar 
+*   player={playerState} 
+*   playerId="player-1"
+*   isMobile={false}
+* />
+* ```
+*/
+var CombatReadinessBar = ({ player, playerId, isMobile }) => {
+	const readiness = useMemo(() => calculateCombatReadiness(player), [player]);
+	const segments = 10;
+	const filledSegments = getCombatReadinessBars(readiness, segments);
+	const readinessColor = getCombatReadinessColor(readiness);
+	const readinessLabel = getCombatReadinessLabel(readiness);
+	const shouldPulse = readiness < 20;
+	const barWidth = isMobile ? 180 : 250;
+	const barHeight = isMobile ? 16 : 20;
+	const fontSize = isMobile ? 11 : 13;
+	const padding = isMobile ? "8px 12px" : "12px 16px";
+	const statusText = `${readiness}% ${readinessLabel.korean}`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `combat-readiness-bar-${playerId}`,
+		role: "progressbar",
+		"aria-label": "전투 준비도 | Combat Readiness",
+		"aria-valuenow": readiness,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuetext": `${readiness}% Combat Readiness - ${readinessLabel.english}`,
+		style: {
+			width: `${barWidth}px`,
+			padding,
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),
+			borderRadius: "8px",
+			border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)}`,
+			boxShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2)}`
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: `${fontSize}px`,
+					color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),
+					fontFamily: FONT_FAMILY.KOREAN,
+					marginBottom: "4px",
+					display: "flex",
+					justifyContent: "space-between",
+					fontWeight: "bold"
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: "전투 준비도 | Combat Readiness" }), /* @__PURE__ */ jsx("span", {
+					"data-testid": `combat-readiness-value-${playerId}`,
+					children: statusText
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: "3px",
+					height: `${barHeight}px`,
+					animation: shouldPulse ? "healthPulse 0.8s infinite" : "none"
+				},
+				children: Array.from({ length: segments }).map((_, index) => /* @__PURE__ */ jsx("div", {
+					"data-testid": `combat-readiness-segment-${playerId}-${index}`,
+					style: {
+						flex: 1,
+						backgroundColor: index < filledSegments ? hexToRgbaString(readinessColor, 1) : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),
+						borderRadius: "2px",
+						transition: "background-color 0.3s ease-in-out",
+						boxShadow: index < filledSegments ? `0 0 8px ${hexToRgbaString(readinessColor, .4)}` : "none"
+					}
+				}, index))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-testid": `combat-readiness-breakdown-${playerId}`,
+				style: {
+					display: "none",
+					fontSize: `${fontSize - 2}px`,
+					color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 1),
+					marginTop: "4px",
+					fontFamily: FONT_FAMILY.KOREAN
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: ["Body: ", player.bodyPartHealth ? "tracked" : "aggregate"] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						"Pain: ",
+						Math.round(player.pain),
+						"%"
+					] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						"Consciousness: ",
+						Math.round(player.consciousness),
+						"%"
+					] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						"Balance: ",
+						Math.round(player.balance),
+						"%"
+					] })
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { CombatReadinessBar as default };
+
+//# sourceMappingURL=CombatReadinessBar.js.map

package/lib/components/shared/three/ui/CombatReadinessBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombatReadinessBar.js","names":[],"sources":["../../../../../src/components/shared/three/ui/CombatReadinessBar.tsx"],"sourcesContent":["/**\n * CombatReadinessBar Component - 10-bar segmented combat readiness display\n * \n * Displays comprehensive combat readiness with:\n * - 10 segmented bars representing 10% each\n * - Color transitions: Green (>80%), Yellow (60-79%), Orange (40-59%), Red (20-39%), Dark Red (<20%)\n * - Smooth 0.3s transition animations\n * - Korean/English bilingual labels\n * - Numeric percentage display\n * - Responsive sizing for mobile/tablet/desktop\n * - Real-time calculation from body health, pain, consciousness, and balance\n */\n\nimport React, { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { \n  calculateCombatReadiness, \n  getCombatReadinessColor, \n  getCombatReadinessLabel,\n  getCombatReadinessBars\n} from \"../../../../utils/combatReadiness\";\nimport type { PlayerState } from \"../../../../systems/player\";\n\nexport interface CombatReadinessBarProps {\n  /** Player state containing all combat factors */\n  readonly player: PlayerState;\n  /** Player identifier for test ID */\n  readonly playerId: string;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * CombatReadinessBar - 10-bar segmented combat readiness display with Korean theming\n * \n * Calculates and displays overall combat readiness from multiple factors:\n * - Body part health (40% weight)\n * - Pain level (20% weight)\n * - Consciousness (20% weight)\n * - Balance state (20% weight)\n * \n * @example\n * ```tsx\n * <CombatReadinessBar \n *   player={playerState} \n *   playerId=\"player-1\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const CombatReadinessBar: React.FC<CombatReadinessBarProps> = ({\n  player,\n  playerId,\n  isMobile,\n}) => {\n  // Calculate combat readiness percentage\n  const readiness = useMemo(\n    () => calculateCombatReadiness(player),\n    [player]\n  );\n\n  const segments = 10;\n  const filledSegments = getCombatReadinessBars(readiness, segments);\n  const readinessColor = getCombatReadinessColor(readiness);\n  const readinessLabel = getCombatReadinessLabel(readiness);\n  const shouldPulse = readiness < 20;\n\n  // Responsive sizing\n  const barWidth = isMobile ? 180 : 250;\n  const barHeight = isMobile ? 16 : 20;\n  const fontSize = isMobile ? 11 : 13;\n  const padding = isMobile ? \"8px 12px\" : \"12px 16px\";\n\n  // Status text based on readiness level\n  const statusText = `${readiness}% ${readinessLabel.korean}`;\n\n  return (\n    <div\n      data-testid={`combat-readiness-bar-${playerId}`}\n      role=\"progressbar\"\n      aria-label=\"전투 준비도 | Combat Readiness\"\n      aria-valuenow={readiness}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuetext={`${readiness}% Combat Readiness - ${readinessLabel.english}`}\n      style={{\n        width: `${barWidth}px`,\n        padding,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),\n        borderRadius: \"8px\",\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)}`,\n        boxShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2)}`,\n      }}\n    >\n      {/* Label and numeric/status display */}\n      <div\n        style={{\n          fontSize: `${fontSize}px`,\n          color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginBottom: \"4px\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          fontWeight: \"bold\",\n        }}\n      >\n        <span>전투 준비도 | Combat Readiness</span>\n        <span data-testid={`combat-readiness-value-${playerId}`}>\n          {statusText}\n        </span>\n      </div>\n\n      {/* 10-segment combat readiness bar */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"3px\",\n          height: `${barHeight}px`,\n          animation: shouldPulse ? \"healthPulse 0.8s infinite\" : \"none\",\n        }}\n      >\n        {Array.from({ length: segments }).map((_, index) => (\n          <div\n            key={index}\n            data-testid={`combat-readiness-segment-${playerId}-${index}`}\n            style={{\n              flex: 1,\n              backgroundColor:\n                index < filledSegments\n                  ? hexToRgbaString(readinessColor, 1)\n                  : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),\n              borderRadius: \"2px\",\n              transition: \"background-color 0.3s ease-in-out\",\n              boxShadow:\n                index < filledSegments\n                  ? `0 0 8px ${hexToRgbaString(readinessColor, 0.4)}`\n                  : \"none\",\n            }}\n          />\n        ))}\n      </div>\n\n      {/* Breakdown tooltip (hover) - optional enhancement */}\n      <div\n        data-testid={`combat-readiness-breakdown-${playerId}`}\n        style={{\n          display: \"none\", // Hidden by default, can be shown on hover\n          fontSize: `${fontSize - 2}px`,\n          color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 1),\n          marginTop: \"4px\",\n          fontFamily: FONT_FAMILY.KOREAN,\n        }}\n      >\n        {/* Detailed breakdown for debugging/advanced players */}\n        <div>Body: {player.bodyPartHealth ? \"tracked\" : \"aggregate\"}</div>\n        <div>Pain: {Math.round(player.pain)}%</div>\n        <div>Consciousness: {Math.round(player.consciousness)}%</div>\n        <div>Balance: {Math.round(player.balance)}%</div>\n      </div>\n    </div>\n  );\n};\n\nexport default CombatReadinessBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAa,sBAAyD,EACpE,QACA,UACA,eACI;CAEJ,MAAM,YAAY,cACV,yBAAyB,OAAO,EACtC,CAAC,OAAO,CACT;CAED,MAAM,WAAW;CACjB,MAAM,iBAAiB,uBAAuB,WAAW,SAAS;CAClE,MAAM,iBAAiB,wBAAwB,UAAU;CACzD,MAAM,iBAAiB,wBAAwB,UAAU;CACzD,MAAM,cAAc,YAAY;CAGhC,MAAM,WAAW,WAAW,MAAM;CAClC,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,aAAa;CAGxC,MAAM,aAAa,GAAG,UAAU,IAAI,eAAe;AAEnD,QACE,qBAAC,OAAD;EACE,eAAa,wBAAwB;EACrC,MAAK;EACL,cAAW;EACX,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,UAAU,uBAAuB,eAAe;EACnE,OAAO;GACL,OAAO,GAAG,SAAS;GACnB;GACA,iBAAiB,gBAAgB,cAAc,oBAAoB,EAAE;GACrE,cAAc;GACd,QAAQ,aAAa,gBAAgB,cAAc,cAAc,EAAE;GACnE,WAAW,YAAY,gBAAgB,cAAc,cAAc,GAAI;GACxE;YAfH;GAkBE,qBAAC,OAAD;IACE,OAAO;KACL,UAAU,GAAG,SAAS;KACtB,OAAO,gBAAgB,cAAc,cAAc,EAAE;KACrD,YAAY,YAAY;KACxB,cAAc;KACd,SAAS;KACT,gBAAgB;KAChB,YAAY;KACb;cATH,CAWE,oBAAC,QAAD,EAAA,UAAM,6BAAgC,CAAA,EACtC,oBAAC,QAAD;KAAM,eAAa,0BAA0B;eAC1C;KACI,CAAA,CACH;;GAGN,oBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,KAAK;KACL,QAAQ,GAAG,UAAU;KACrB,WAAW,cAAc,8BAA8B;KACxD;cAEA,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,CAAC,KAAK,GAAG,UACxC,oBAAC,OAAD;KAEE,eAAa,4BAA4B,SAAS,GAAG;KACrD,OAAO;MACL,MAAM;MACN,iBACE,QAAQ,iBACJ,gBAAgB,gBAAgB,EAAE,GAClC,gBAAgB,cAAc,sBAAsB,EAAE;MAC5D,cAAc;MACd,YAAY;MACZ,WACE,QAAQ,iBACJ,WAAW,gBAAgB,gBAAgB,GAAI,KAC/C;MACP;KACD,EAfK,MAeL,CACF;IACE,CAAA;GAGN,qBAAC,OAAD;IACE,eAAa,8BAA8B;IAC3C,OAAO;KACL,SAAS;KACT,UAAU,GAAG,WAAW,EAAE;KAC1B,OAAO,gBAAgB,cAAc,gBAAgB,EAAE;KACvD,WAAW;KACX,YAAY,YAAY;KACzB;cARH;KAWE,qBAAC,OAAD,EAAA,UAAA,CAAK,UAAO,OAAO,iBAAiB,YAAY,YAAkB,EAAA,CAAA;KAClE,qBAAC,OAAD,EAAA,UAAA;MAAK;MAAO,KAAK,MAAM,OAAO,KAAK;MAAC;MAAO,EAAA,CAAA;KAC3C,qBAAC,OAAD,EAAA,UAAA;MAAK;MAAgB,KAAK,MAAM,OAAO,cAAc;MAAC;MAAO,EAAA,CAAA;KAC7D,qBAAC,OAAD,EAAA,UAAA;MAAK;MAAU,KAAK,MAAM,OAAO,QAAQ;MAAC;MAAO,EAAA,CAAA;KAC7C;;GACF"}

package/lib/components/shared/three/ui/ComboCounter.d.ts

@@ -0,0 +1,42 @@
+/**
+ * ComboCounter - Combo counter display component
+ *
+ * Displays the current combo count with Korean-English bilingual text.
+ * Animates on combo increment and shows milestone indicators.
+ *
+ * Uses Html overlay from @react-three/drei for rendering within 3D scenes.
+ *
+ * @module components/shared/three/ui/ComboCounter
+ * @category Shared UI
+ * @korean 콤보카운터
+ */
+import React from "react";
+import "./HUDAnimations.css";
+/**
+ * Props for the ComboCounter component
+ */
+export interface ComboCounterProps {
+    /** Current combo count */
+    readonly combo: number;
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile?: boolean;
+    /** Minimum combo to display (default: 2) */
+    readonly minDisplayCombo?: number;
+}
+/**
+ * ComboCounter Component
+ *
+ * Displays the current combo count with animations and milestone indicators.
+ * Only visible when combo >= minDisplayCombo (default: 2).
+ *
+ * @example
+ * ```tsx
+ * <ComboCounter
+ *   combo={5}
+ *   isMobile={isMobile}
+ * />
+ * ```
+ */
+export declare const ComboCounter: React.FC<ComboCounterProps>;
+export default ComboCounter;
+//# sourceMappingURL=ComboCounter.d.ts.map

package/lib/components/shared/three/ui/ComboCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboCounter.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/ComboCounter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAGpE,OAAO,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,4CAA4C;IAC5C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AAkED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2MpD,CAAC;AAEF,eAAe,YAAY,CAAC"}