blacktrigram 0.7.2

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

@@ -0,0 +1,292 @@
+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 React, { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/training/components/FootworkDrillsOverlayHtml.tsx
+/**
+* FootworkDrillsOverlayHtml - Training component for footwork drills
+* 
+* Provides specialized footwork training exercises for Korean martial arts
+* footwork patterns (보법, Bobeop).
+* 
+* @module components/screens/training/components/FootworkDrillsOverlayHtml
+* @category Training Components
+* @korean 보법훈련컴포넌트
+*/
+/**
+* Drill information with Korean terminology
+* 
+* @korean 훈련정보
+*/
+var DRILL_INFO = {
+	circular_left: {
+		korean: "원형보 좌회전",
+		english: "Circular Left",
+		description: "원형보 좌측 | Circle stepping left",
+		pattern: [
+			"Ctrl+A",
+			"Ctrl+A",
+			"Ctrl+A",
+			"Ctrl+A"
+		],
+		keyHints: "Hold Ctrl+A to circle left"
+	},
+	circular_right: {
+		korean: "원형보 우회전",
+		english: "Circular Right",
+		description: "원형보 우측 | Circle stepping right",
+		pattern: [
+			"Ctrl+D",
+			"Ctrl+D",
+			"Ctrl+D",
+			"Ctrl+D"
+		],
+		keyHints: "Hold Ctrl+D to circle right"
+	},
+	pivot_combo: {
+		korean: "축족회전 연속",
+		english: "Pivot Combo",
+		description: "좌우 연속 회전 | Continuous pivot rotations",
+		pattern: [
+			"Shift+Ctrl+A",
+			"Shift+Ctrl+D",
+			"Shift+Ctrl+A",
+			"Shift+Ctrl+D"
+		],
+		keyHints: "Alternate Shift+Ctrl+A/D"
+	},
+	triangle_step: {
+		korean: "삼각보법",
+		english: "Triangle Step",
+		description: "삼각형 발놀림 | Triangle footwork pattern",
+		pattern: [
+			"Ctrl+W",
+			"Shift+Ctrl+D",
+			"Ctrl+S",
+			"Shift+Ctrl+A"
+		],
+		keyHints: "Forward → Pivot → Back → Pivot"
+	},
+	slide_drill: {
+		korean: "미끄럼보 사방",
+		english: "Slide Drill",
+		description: "사방 미끄럼 | Four-direction slides",
+		pattern: [
+			"Ctrl+W",
+			"Alt+D",
+			"Ctrl+S",
+			"Alt+A"
+		],
+		keyHints: "Slide in all four directions"
+	},
+	shuffle_practice: {
+		korean: "섞음보 연습",
+		english: "Shuffle Practice",
+		description: "빠른 조정 | Quick micro-adjustments",
+		pattern: [
+			"Shift+Ctrl+W",
+			"Shift+Ctrl+W",
+			"Shift+Ctrl+W"
+		],
+		keyHints: "Rapid Shift+Ctrl+W/S"
+	},
+	free_practice: {
+		korean: "자유 연습",
+		english: "Free Practice",
+		description: "자유 보법 | Free footwork exploration",
+		pattern: [],
+		keyHints: "Use any footwork combination"
+	}
+};
+/**
+* FootworkDrillsOverlayHtml Component
+* 
+* Provides UI for footwork training drills with step-by-step guidance
+* and Korean martial arts terminology.
+* 
+* @korean 보법훈련UI컴포넌트
+*/
+var FootworkDrillsOverlayHtml = React.memo(({ currentDrill, onDrillChange, currentStep, isActive, onToggleActive, isMobile }) => {
+	const drillInfo = DRILL_INFO[currentDrill];
+	const [showInstructions, setShowInstructions] = useState(true);
+	useEffect(() => {
+		if (isActive && showInstructions) {
+			const timer = setTimeout(() => setShowInstructions(false), 5e3);
+			return () => clearTimeout(timer);
+		}
+	}, [isActive, showInstructions]);
+	const handleDrillSelect = useCallback((drill) => {
+		onDrillChange(drill);
+		setShowInstructions(true);
+	}, [onDrillChange]);
+	const panelWidth = isMobile ? 280 : 340;
+	const buttonFontSize = isMobile ? "10px" : "11px";
+	const titleFontSize = isMobile ? "13px" : "15px";
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: `${panelWidth}px`,
+			background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .95),
+			border: `2px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .9)}`,
+			borderRadius: "12px",
+			padding: isMobile ? "10px" : "12px",
+			fontFamily: FONT_FAMILY.KOREAN,
+			color: "#ffffff",
+			boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)"
+		},
+		"data-testid": "footwork-drills-html",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginBottom: "12px",
+					textAlign: "center"
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: titleFontSize,
+						fontWeight: "bold",
+						color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),
+						marginBottom: "4px"
+					},
+					children: "보법 훈련 | Footwork Drills"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: isMobile ? "10px" : "11px",
+						color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 1)
+					},
+					children: [
+						drillInfo.korean,
+						" | ",
+						drillInfo.english
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: isMobile ? "1fr 1fr" : "1fr 1fr 1fr",
+					gap: "6px",
+					marginBottom: "12px"
+				},
+				children: Object.keys(DRILL_INFO).map((drill) => /* @__PURE__ */ jsx("button", {
+					onClick: () => handleDrillSelect(drill),
+					style: {
+						padding: isMobile ? "6px 4px" : "8px 6px",
+						fontSize: buttonFontSize,
+						fontFamily: FONT_FAMILY.KOREAN,
+						fontWeight: currentDrill === drill ? "bold" : "normal",
+						background: currentDrill === drill ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .9) : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .8),
+						color: currentDrill === drill ? hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1) : hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, 1),
+						border: `1px solid ${hexToRgbaString(currentDrill === drill ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.UI_BORDER, .6)}`,
+						borderRadius: "6px",
+						cursor: "pointer",
+						transition: "all 0.2s ease",
+						textAlign: "center",
+						lineHeight: 1.2
+					},
+					onMouseEnter: (e) => {
+						e.currentTarget.style.transform = "scale(1.05)";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.transform = "scale(1)";
+					},
+					children: DRILL_INFO[drill].korean.split(" ")[0]
+				}, drill))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					padding: "8px",
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .6),
+					borderRadius: "6px",
+					marginBottom: "10px",
+					fontSize: isMobile ? "10px" : "11px",
+					textAlign: "center"
+				},
+				children: drillInfo.description
+			}),
+			drillInfo.pattern.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: { marginBottom: "10px" },
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? "10px" : "11px",
+						fontWeight: "bold",
+						color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),
+						marginBottom: "6px",
+						textAlign: "center"
+					},
+					children: "Pattern Steps:"
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						justifyContent: "center",
+						gap: "4px",
+						flexWrap: "wrap"
+					},
+					children: drillInfo.pattern.map((step, index) => /* @__PURE__ */ jsxs("div", {
+						style: {
+							padding: "4px 8px",
+							fontSize: isMobile ? "9px" : "10px",
+							fontFamily: FONT_FAMILY.KOREAN,
+							background: isActive && index === currentStep ? hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .9) : index < currentStep ? hexToRgbaString(KOREAN_COLORS.ACCENT_GREEN, .6) : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .7),
+							color: isActive && index === currentStep ? hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1) : "#ffffff",
+							border: `1px solid ${hexToRgbaString(isActive && index === currentStep ? KOREAN_COLORS.PRIMARY_CYAN : KOREAN_COLORS.UI_BORDER, .8)}`,
+							borderRadius: "4px",
+							fontWeight: isActive && index === currentStep ? "bold" : "normal"
+						},
+						children: [
+							index + 1,
+							". ",
+							step
+						]
+					}, index))
+				})]
+			}),
+			showInstructions && /* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: "8px",
+					background: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2),
+					border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .6)}`,
+					borderRadius: "6px",
+					marginBottom: "10px",
+					fontSize: isMobile ? "9px" : "10px",
+					textAlign: "center",
+					color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)
+				},
+				children: ["💡 ", drillInfo.keyHints]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onToggleActive,
+				style: {
+					width: "100%",
+					padding: isMobile ? "10px" : "12px",
+					fontSize: isMobile ? "12px" : "14px",
+					fontFamily: FONT_FAMILY.KOREAN,
+					fontWeight: "bold",
+					background: isActive ? hexToRgbaString(KOREAN_COLORS.ACCENT_RED, .9) : hexToRgbaString(KOREAN_COLORS.ACCENT_GREEN, .9),
+					color: "#ffffff",
+					border: "none",
+					borderRadius: "8px",
+					cursor: "pointer",
+					transition: "all 0.2s ease"
+				},
+				onMouseEnter: (e) => {
+					e.currentTarget.style.transform = "scale(1.05)";
+					e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(isActive ? KOREAN_COLORS.ACCENT_RED : KOREAN_COLORS.ACCENT_GREEN, .8)}`;
+				},
+				onMouseLeave: (e) => {
+					e.currentTarget.style.transform = "scale(1)";
+					e.currentTarget.style.boxShadow = "none";
+				},
+				children: isActive ? "훈련 중지 | Stop Drill" : "훈련 시작 | Start Drill"
+			})
+		]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.currentDrill === nextProps.currentDrill && prevProps.currentStep === nextProps.currentStep && prevProps.isActive === nextProps.isActive && prevProps.isMobile === nextProps.isMobile && prevProps.onDrillChange === nextProps.onDrillChange && prevProps.onToggleActive === nextProps.onToggleActive;
+});
+FootworkDrillsOverlayHtml.displayName = "FootworkDrillsOverlayHtml";
+//#endregion
+export { FootworkDrillsOverlayHtml as default };
+
+//# sourceMappingURL=FootworkDrillsOverlayHtml.js.map

package/lib/components/screens/training/components/FootworkDrillsOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FootworkDrillsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/FootworkDrillsOverlayHtml.tsx"],"sourcesContent":["/**\n * FootworkDrillsOverlayHtml - Training component for footwork drills\n * \n * Provides specialized footwork training exercises for Korean martial arts\n * footwork patterns (보법, Bobeop).\n * \n * @module components/screens/training/components/FootworkDrillsOverlayHtml\n * @category Training Components\n * @korean 보법훈련컴포넌트\n */\n\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\n/**\n * Footwork drill types for training\n * \n * @korean 보법훈련타입\n */\nexport type FootworkDrill = \n  | \"circular_left\"      // 원형보 좌 - Circle left around target\n  | \"circular_right\"     // 원형보 우 - Circle right around target\n  | \"pivot_combo\"        // 축족회전 - Pivot left-right combo\n  | \"triangle_step\"      // 삼각보법 - Triangle stepping pattern\n  | \"slide_drill\"        // 미끄럼보 - Four-direction slide drill\n  | \"shuffle_practice\"   // 섞음보 - Quick shuffle adjustments\n  | \"free_practice\";     // 자유 연습 - Free practice mode\n\n/**\n * Drill information with Korean terminology\n * \n * @korean 훈련정보\n */\nconst DRILL_INFO: Record<FootworkDrill, { \n  korean: string; \n  english: string; \n  description: string;\n  pattern: string[];\n  keyHints: string;\n}> = {\n  circular_left: {\n    korean: \"원형보 좌회전\",\n    english: \"Circular Left\",\n    description: \"원형보 좌측 | Circle stepping left\",\n    pattern: [\"Ctrl+A\", \"Ctrl+A\", \"Ctrl+A\", \"Ctrl+A\"],\n    keyHints: \"Hold Ctrl+A to circle left\",\n  },\n  circular_right: {\n    korean: \"원형보 우회전\",\n    english: \"Circular Right\",\n    description: \"원형보 우측 | Circle stepping right\",\n    pattern: [\"Ctrl+D\", \"Ctrl+D\", \"Ctrl+D\", \"Ctrl+D\"],\n    keyHints: \"Hold Ctrl+D to circle right\",\n  },\n  pivot_combo: {\n    korean: \"축족회전 연속\",\n    english: \"Pivot Combo\",\n    description: \"좌우 연속 회전 | Continuous pivot rotations\",\n    pattern: [\"Shift+Ctrl+A\", \"Shift+Ctrl+D\", \"Shift+Ctrl+A\", \"Shift+Ctrl+D\"],\n    keyHints: \"Alternate Shift+Ctrl+A/D\",\n  },\n  triangle_step: {\n    korean: \"삼각보법\",\n    english: \"Triangle Step\",\n    description: \"삼각형 발놀림 | Triangle footwork pattern\",\n    pattern: [\"Ctrl+W\", \"Shift+Ctrl+D\", \"Ctrl+S\", \"Shift+Ctrl+A\"],\n    keyHints: \"Forward → Pivot → Back → Pivot\",\n  },\n  slide_drill: {\n    korean: \"미끄럼보 사방\",\n    english: \"Slide Drill\",\n    description: \"사방 미끄럼 | Four-direction slides\",\n    pattern: [\"Ctrl+W\", \"Alt+D\", \"Ctrl+S\", \"Alt+A\"],\n    keyHints: \"Slide in all four directions\",\n  },\n  shuffle_practice: {\n    korean: \"섞음보 연습\",\n    english: \"Shuffle Practice\",\n    description: \"빠른 조정 | Quick micro-adjustments\",\n    pattern: [\"Shift+Ctrl+W\", \"Shift+Ctrl+W\", \"Shift+Ctrl+W\"],\n    keyHints: \"Rapid Shift+Ctrl+W/S\",\n  },\n  free_practice: {\n    korean: \"자유 연습\",\n    english: \"Free Practice\",\n    description: \"자유 보법 | Free footwork exploration\",\n    pattern: [],\n    keyHints: \"Use any footwork combination\",\n  },\n};\n\n/**\n * Props for FootworkDrillsOverlayHtml component\n */\nexport interface FootworkDrillsOverlayHtmlProps {\n  /** Currently selected drill */\n  readonly currentDrill: FootworkDrill;\n  /** Callback when drill changes */\n  readonly onDrillChange: (drill: FootworkDrill) => void;\n  /** Current step in drill pattern (0-based) */\n  readonly currentStep: number;\n  /** Callback when drill step completes (optional, not yet implemented) */\n  readonly onStepComplete?: () => void;\n  /** Whether drill is currently active */\n  readonly isActive: boolean;\n  /** Callback to start/stop drill */\n  readonly onToggleActive: () => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * FootworkDrillsOverlayHtml Component\n * \n * Provides UI for footwork training drills with step-by-step guidance\n * and Korean martial arts terminology.\n * \n * @korean 보법훈련UI컴포넌트\n */\nexport const FootworkDrillsOverlayHtml = React.memo<FootworkDrillsOverlayHtmlProps>(\n  ({\n    currentDrill,\n    onDrillChange,\n    currentStep,\n    // onStepComplete, // TODO: Use this for drill pattern validation\n    isActive,\n    onToggleActive,\n    isMobile,\n  }) => {\n  const drillInfo = DRILL_INFO[currentDrill];\n  const [showInstructions, setShowInstructions] = useState(true);\n\n  // Auto-hide instructions after 5 seconds when drill is active\n  useEffect(() => {\n    if (isActive && showInstructions) {\n      const timer = setTimeout(() => setShowInstructions(false), 5000);\n      return () => clearTimeout(timer);\n    }\n  }, [isActive, showInstructions]);\n\n  const handleDrillSelect = useCallback((drill: FootworkDrill) => {\n    onDrillChange(drill);\n    setShowInstructions(true);\n  }, [onDrillChange]);\n\n  const panelWidth = isMobile ? 280 : 340;\n  const buttonFontSize = isMobile ? \"10px\" : \"11px\";\n  const titleFontSize = isMobile ? \"13px\" : \"15px\";\n\n  return (\n    <div\n      style={{\n        width: `${panelWidth}px`,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9)}`,\n        borderRadius: \"12px\",\n        padding: isMobile ? \"10px\" : \"12px\",\n        fontFamily: FONT_FAMILY.KOREAN,\n        color: \"#ffffff\",\n        boxShadow: \"0 4px 20px rgba(0, 0, 0, 0.5)\",\n      }}\n      data-testid=\"footwork-drills-html\"\n    >\n      {/* Header */}\n      <div style={{ marginBottom: \"12px\", textAlign: \"center\" }}>\n        <div\n          style={{\n            fontSize: titleFontSize,\n            fontWeight: \"bold\",\n            color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),\n            marginBottom: \"4px\",\n          }}\n        >\n          보법 훈련 | Footwork Drills\n        </div>\n        <div\n          style={{\n            fontSize: isMobile ? \"10px\" : \"11px\",\n            color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY, 1),\n          }}\n        >\n          {drillInfo.korean} | {drillInfo.english}\n        </div>\n      </div>\n\n      {/* Drill Selection Grid */}\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: isMobile ? \"1fr 1fr\" : \"1fr 1fr 1fr\",\n          gap: \"6px\",\n          marginBottom: \"12px\",\n        }}\n      >\n        {(Object.keys(DRILL_INFO) as FootworkDrill[]).map((drill) => (\n          <button\n            key={drill}\n            onClick={() => handleDrillSelect(drill)}\n            style={{\n              padding: isMobile ? \"6px 4px\" : \"8px 6px\",\n              fontSize: buttonFontSize,\n              fontFamily: FONT_FAMILY.KOREAN,\n              fontWeight: currentDrill === drill ? \"bold\" : \"normal\",\n              background: \n                currentDrill === drill\n                  ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9)\n                  : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.8),\n              color: \n                currentDrill === drill\n                  ? hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1)\n                  : hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, 1),\n              border: `1px solid ${hexToRgbaString(\n                currentDrill === drill\n                  ? KOREAN_COLORS.ACCENT_GOLD\n                  : KOREAN_COLORS.UI_BORDER,\n                0.6\n              )}`,\n              borderRadius: \"6px\",\n              cursor: \"pointer\",\n              transition: \"all 0.2s ease\",\n              textAlign: \"center\",\n              lineHeight: 1.2,\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.transform = \"scale(1.05)\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.transform = \"scale(1)\";\n            }}\n          >\n            {DRILL_INFO[drill].korean.split(\" \")[0]}\n          </button>\n        ))}\n      </div>\n\n      {/* Drill Description */}\n      <div\n        style={{\n          padding: \"8px\",\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.6),\n          borderRadius: \"6px\",\n          marginBottom: \"10px\",\n          fontSize: isMobile ? \"10px\" : \"11px\",\n          textAlign: \"center\",\n        }}\n      >\n        {drillInfo.description}\n      </div>\n\n      {/* Pattern Steps (if drill has pattern) */}\n      {drillInfo.pattern.length > 0 && (\n        <div style={{ marginBottom: \"10px\" }}>\n          <div\n            style={{\n              fontSize: isMobile ? \"10px\" : \"11px\",\n              fontWeight: \"bold\",\n              color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n              marginBottom: \"6px\",\n              textAlign: \"center\",\n            }}\n          >\n            Pattern Steps:\n          </div>\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"center\",\n              gap: \"4px\",\n              flexWrap: \"wrap\",\n            }}\n          >\n            {drillInfo.pattern.map((step, index) => (\n              <div\n                key={index}\n                style={{\n                  padding: \"4px 8px\",\n                  fontSize: isMobile ? \"9px\" : \"10px\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  background: \n                    isActive && index === currentStep\n                      ? hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.9)\n                      : index < currentStep\n                      ? hexToRgbaString(KOREAN_COLORS.ACCENT_GREEN, 0.6)\n                      : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.7),\n                  color: \n                    isActive && index === currentStep\n                      ? hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1)\n                      : \"#ffffff\",\n                  border: `1px solid ${hexToRgbaString(\n                    isActive && index === currentStep\n                      ? KOREAN_COLORS.PRIMARY_CYAN\n                      : KOREAN_COLORS.UI_BORDER,\n                    0.8\n                  )}`,\n                  borderRadius: \"4px\",\n                  fontWeight: isActive && index === currentStep ? \"bold\" : \"normal\",\n                }}\n              >\n                {index + 1}. {step}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Key Hints */}\n      {showInstructions && (\n        <div\n          style={{\n            padding: \"8px\",\n            background: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n            border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n            borderRadius: \"6px\",\n            marginBottom: \"10px\",\n            fontSize: isMobile ? \"9px\" : \"10px\",\n            textAlign: \"center\",\n            color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          }}\n        >\n          💡 {drillInfo.keyHints}\n        </div>\n      )}\n\n      {/* Start/Stop Button */}\n      <button\n        onClick={onToggleActive}\n        style={{\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"12px\" : \"14px\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          fontWeight: \"bold\",\n          background: isActive\n            ? hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.9)\n            : hexToRgbaString(KOREAN_COLORS.ACCENT_GREEN, 0.9),\n          color: \"#ffffff\",\n          border: \"none\",\n          borderRadius: \"8px\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.transform = \"scale(1.05)\";\n          e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(\n            isActive ? KOREAN_COLORS.ACCENT_RED : KOREAN_COLORS.ACCENT_GREEN,\n            0.8\n          )}`;\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.transform = \"scale(1)\";\n          e.currentTarget.style.boxShadow = \"none\";\n        }}\n      >\n        {isActive ? \"훈련 중지 | Stop Drill\" : \"훈련 시작 | Start Drill\"}\n      </button>\n    </div>\n  );\n},\n(prevProps, nextProps) => {\n  // Re-render when drill state, mobile state, or callbacks change\n  // Including callback props prevents stale closures when parent provides\n  // new functions that capture updated state.\n  return (\n    prevProps.currentDrill === nextProps.currentDrill &&\n    prevProps.currentStep === nextProps.currentStep &&\n    prevProps.isActive === nextProps.isActive &&\n    prevProps.isMobile === nextProps.isMobile &&\n    prevProps.onDrillChange === nextProps.onDrillChange &&\n    prevProps.onToggleActive === nextProps.onToggleActive\n  );\n});\n\nFootworkDrillsOverlayHtml.displayName = \"FootworkDrillsOverlayHtml\";\n\nexport default FootworkDrillsOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/training/components/HitFeedbackEffect3D.d.ts

@@ -0,0 +1,32 @@
+/**
+ * HitFeedbackEffect3D - Visual hit confirmation with damage numbers
+ *
+ * Provides particle effects, color flashes, and floating damage numbers
+ * for training hit feedback
+ */
+/**
+ * Props for HitFeedbackEffect3D component
+ */
+export interface HitFeedbackEffect3DProps {
+    /** 3D position where hit occurred */
+    readonly position: [number, number, number];
+    /** Type of hit (affects visual style) */
+    readonly type: "success" | "perfect" | "miss";
+    /** Damage dealt (if applicable) */
+    readonly damage?: number;
+    /** Whether effect is visible */
+    readonly visible?: boolean;
+    /** Callback when effect completes */
+    readonly onComplete?: () => void;
+    /** Duration in milliseconds */
+    readonly duration?: number;
+    /** Whether on mobile device */
+    readonly isMobile?: boolean;
+}
+/**
+ * HitFeedbackEffect3D Component
+ * Main hit feedback visualization
+ */
+export declare const HitFeedbackEffect3D: React.FC<HitFeedbackEffect3DProps>;
+export default HitFeedbackEffect3D;
+//# sourceMappingURL=HitFeedbackEffect3D.d.ts.map

package/lib/components/screens/training/components/HitFeedbackEffect3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HitFeedbackEffect3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/HitFeedbackEffect3D.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9C,mCAAmC;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAsPD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyGlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,258 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { ThreeObjectPools } from "../../../../utils/threeObjectPool.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/screens/training/components/HitFeedbackEffect3D.tsx
+/**
+* HitFeedbackEffect3D - Visual hit confirmation with damage numbers
+*
+* Provides particle effects, color flashes, and floating damage numbers
+* for training hit feedback
+*/
+/**
+* Impact particle system
+*/
+var ImpactParticles = ({ position, color, count }) => {
+	const pointsRef = useRef(null);
+	const velocitiesRef = useRef(null);
+	const [initialPosition] = useState(position);
+	const { positions, velocities } = useMemo(() => {
+		const pos = new Float32Array(count * 3);
+		const vel = new Float32Array(count * 3);
+		const seed = initialPosition[0] + initialPosition[1] * 10 + initialPosition[2] * 100;
+		function seededRandom(index) {
+			const x = Math.sin(seed + index) * 1e4;
+			return x - Math.floor(x);
+		}
+		const tempVel = ThreeObjectPools.vector3.acquire();
+		try {
+			for (let i = 0; i < count; i++) {
+				const i3 = i * 3;
+				pos[i3] = 0;
+				pos[i3 + 1] = 0;
+				pos[i3 + 2] = 0;
+				const theta = seededRandom(i * 3) * Math.PI * 2;
+				const phi = seededRandom(i * 3 + 1) * Math.PI;
+				const speed = .5 + seededRandom(i * 3 + 2) * 1.5;
+				tempVel.set(Math.sin(phi) * Math.cos(theta), Math.cos(phi), Math.sin(phi) * Math.sin(theta));
+				tempVel.normalize().multiplyScalar(speed);
+				vel[i3] = tempVel.x;
+				vel[i3 + 1] = tempVel.y + 1;
+				vel[i3 + 2] = tempVel.z;
+			}
+		} finally {
+			ThreeObjectPools.vector3.release(tempVel);
+		}
+		return {
+			positions: pos,
+			velocities: vel
+		};
+	}, [count, initialPosition]);
+	useEffect(() => {
+		velocitiesRef.current = velocities;
+	}, [velocities]);
+	useFrame((_, delta) => {
+		if (!pointsRef.current || !velocitiesRef.current) return;
+		const attr = pointsRef.current.geometry.attributes.position;
+		const array = attr.array;
+		const vel = velocitiesRef.current;
+		for (let i = 0; i < count; i++) {
+			const i3 = i * 3;
+			array[i3] += vel[i3] * delta * 10;
+			array[i3 + 1] += vel[i3 + 1] * delta * 10;
+			array[i3 + 2] += vel[i3 + 2] * delta * 10;
+			vel[i3 + 1] -= 9.8 * delta;
+			if (array[i3 + 1] < -2) array[i3 + 1] = -2;
+		}
+		attr.needsUpdate = true;
+	});
+	return /* @__PURE__ */ jsxs("points", {
+		ref: pointsRef,
+		position,
+		children: [/* @__PURE__ */ jsx("bufferGeometry", { children: /* @__PURE__ */ jsx("bufferAttribute", {
+			attach: "attributes-position",
+			args: [positions, 3]
+		}) }), /* @__PURE__ */ jsx("pointsMaterial", {
+			size: .08,
+			color,
+			transparent: true,
+			opacity: 1,
+			sizeAttenuation: true,
+			depthWrite: false,
+			blending: THREE.AdditiveBlending
+		})]
+	});
+};
+/**
+* Expanding ring effect
+*/
+var RingEffect = ({ position, color, maxRadius }) => {
+	const meshRef = useRef(null);
+	const startTime = useRef(0);
+	useEffect(() => {
+		if (startTime.current === 0) startTime.current = Date.now();
+	}, []);
+	useFrame(() => {
+		if (!meshRef.current) return;
+		const elapsed = (Date.now() - startTime.current) / 1e3;
+		const progress = Math.min(elapsed / .5, 1);
+		const radius = progress * maxRadius;
+		const tempScale = ThreeObjectPools.vector3.acquire();
+		try {
+			tempScale.setScalar(radius);
+			meshRef.current.scale.copy(tempScale);
+		} finally {
+			ThreeObjectPools.vector3.release(tempScale);
+		}
+		const material = meshRef.current.material;
+		material.opacity = 1 - progress;
+	});
+	return /* @__PURE__ */ jsxs("mesh", {
+		ref: meshRef,
+		position,
+		rotation: [
+			Math.PI / 2,
+			0,
+			0
+		],
+		children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+			.9,
+			1,
+			32
+		] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+			color,
+			transparent: true,
+			opacity: 1,
+			side: THREE.DoubleSide
+		})]
+	});
+};
+/**
+* Floating damage number
+*/
+var DamageNumber = ({ position, damage, type, isMobile, onComplete }) => {
+	const [offset, setOffset] = useState(0);
+	const [opacity, setOpacity] = useState(1);
+	const startTime = useRef(0);
+	const completedRef = useRef(false);
+	useEffect(() => {
+		if (startTime.current === 0) startTime.current = Date.now();
+	}, []);
+	useFrame(() => {
+		const elapsed = (Date.now() - startTime.current) / 1e3;
+		const progress = Math.min(elapsed / 1.5, 1);
+		setOffset(progress * 1);
+		setOpacity(1 - progress);
+		if (progress >= 1 && !completedRef.current && onComplete) {
+			completedRef.current = true;
+			onComplete();
+		}
+	});
+	const color = type === "perfect" ? "#ffd700" : type === "normal" ? "#00ffff" : "#ff4444";
+	const text = type === "miss" ? "빗나감 | MISS" : `${damage}`;
+	return /* @__PURE__ */ jsx(Html, {
+		position: [
+			position[0],
+			position[1] + offset,
+			position[2]
+		],
+		center: true,
+		distanceFactor: 10,
+		style: {
+			pointerEvents: "none",
+			opacity
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: isMobile ? "20px" : "28px",
+				fontWeight: "bold",
+				fontFamily: FONT_FAMILY.KOREAN,
+				color,
+				textShadow: "0 0 10px rgba(0, 0, 0, 0.8)",
+				whiteSpace: "nowrap"
+			},
+			"data-testid": "damage-number",
+			children: text
+		})
+	});
+};
+/**
+* HitFeedbackEffect3D Component
+* Main hit feedback visualization
+*/
+var HitFeedbackEffect3D = ({ position, type, damage, visible = true, onComplete, duration = 1500, isMobile = false }) => {
+	const [showEffect, setShowEffect] = useState(visible);
+	const timeoutRef = useRef(null);
+	const effectColor = useMemo(() => {
+		switch (type) {
+			case "perfect": return KOREAN_COLORS.ACCENT_GOLD;
+			case "success": return KOREAN_COLORS.PRIMARY_CYAN;
+			case "miss": return KOREAN_COLORS.TEXT_SECONDARY;
+			default: return KOREAN_COLORS.PRIMARY_CYAN;
+		}
+	}, [type]);
+	const particleCount = useMemo(() => {
+		const isPerfect = type === "perfect";
+		const isSuccess = type === "success";
+		if (isMobile) return isPerfect ? 30 : isSuccess ? 20 : 10;
+		return isPerfect ? 80 : isSuccess ? 50 : 25;
+	}, [type, isMobile]);
+	const ringRadius = type === "perfect" ? 1.5 : 1;
+	const completedRef = useRef(false);
+	const handleComplete = useCallback(() => {
+		if (completedRef.current) return;
+		completedRef.current = true;
+		setShowEffect(false);
+		onComplete?.();
+	}, [onComplete]);
+	useEffect(() => {
+		if (visible && showEffect) timeoutRef.current = setTimeout(handleComplete, duration);
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [
+		visible,
+		showEffect,
+		duration,
+		handleComplete
+	]);
+	if (!showEffect) return null;
+	return /* @__PURE__ */ jsxs("group", {
+		name: `hit-feedback-${type}`,
+		children: [
+			/* @__PURE__ */ jsx(ImpactParticles, {
+				position,
+				color: effectColor,
+				count: particleCount
+			}),
+			/* @__PURE__ */ jsx(RingEffect, {
+				position,
+				color: effectColor,
+				maxRadius: ringRadius
+			}),
+			damage !== void 0 && type !== "miss" && /* @__PURE__ */ jsx(DamageNumber, {
+				position,
+				damage,
+				type: type === "perfect" ? "perfect" : "normal",
+				isMobile,
+				onComplete: handleComplete
+			}),
+			type === "miss" && /* @__PURE__ */ jsx(DamageNumber, {
+				position,
+				damage: 0,
+				type: "miss",
+				isMobile,
+				onComplete: handleComplete
+			})
+		]
+	});
+};
+//#endregion
+export { HitFeedbackEffect3D as default };
+
+//# sourceMappingURL=HitFeedbackEffect3D.js.map

package/lib/components/screens/training/components/HitFeedbackEffect3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HitFeedbackEffect3D.js","names":[],"sources":["../../../../../src/components/screens/training/components/HitFeedbackEffect3D.tsx"],"sourcesContent":["/**\n * HitFeedbackEffect3D - Visual hit confirmation with damage numbers\n *\n * Provides particle effects, color flashes, and floating damage numbers\n * for training hit feedback\n */\n\nimport { Html } from \"@react-three/drei\";\nimport { useFrame } from \"@react-three/fiber\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { ThreeObjectPools } from \"../../../../utils/threeObjectPool\";\n\n/**\n * Props for HitFeedbackEffect3D component\n */\nexport interface HitFeedbackEffect3DProps {\n  /** 3D position where hit occurred */\n  readonly position: [number, number, number];\n  /** Type of hit (affects visual style) */\n  readonly type: \"success\" | \"perfect\" | \"miss\";\n  /** Damage dealt (if applicable) */\n  readonly damage?: number;\n  /** Whether effect is visible */\n  readonly visible?: boolean;\n  /** Callback when effect completes */\n  readonly onComplete?: () => void;\n  /** Duration in milliseconds */\n  readonly duration?: number;\n  /** Whether on mobile device */\n  readonly isMobile?: boolean;\n}\n\n/**\n * Impact particle system\n */\nconst ImpactParticles: React.FC<{\n  position: [number, number, number];\n  color: number;\n  count: number;\n}> = ({ position, color, count }) => {\n  const pointsRef = useRef<THREE.Points>(null);\n\n  // Store velocities in a ref that persists across renders\n  const velocitiesRef = useRef<Float32Array | null>(null);\n\n  // Store initial position for seeded random - use useState to capture at mount\n  // Note: This intentionally ignores position prop changes to maintain consistent\n  // particle behavior throughout the effect's lifetime. To update particles when\n  // position changes, add a key prop to the parent component to force remount.\n  const [initialPosition] = useState(position);\n\n  // Initialize particle positions and velocities - use seed based on initial position\n  const { positions, velocities } = useMemo(() => {\n    const pos = new Float32Array(count * 3);\n    const vel = new Float32Array(count * 3);\n\n    // Use initial position as seed for deterministic but varying particles\n    const seed =\n      initialPosition[0] + initialPosition[1] * 10 + initialPosition[2] * 100;\n\n    // Simple seeded random using position\n    // Large multiplier (10000) ensures sufficient entropy for randomness while keeping values deterministic\n    function seededRandom(index: number): number {\n      const x = Math.sin(seed + index) * 10000;\n      return x - Math.floor(x);\n    }\n\n    // Use pooled vector for velocity calculations to reduce allocations\n    // Pool strategy: Acquire once, reuse for all particles, release\n    const tempVel = ThreeObjectPools.vector3.acquire();\n    \n    try {\n      for (let i = 0; i < count; i++) {\n        const i3 = i * 3;\n        // Start at center\n        pos[i3] = 0;\n        pos[i3 + 1] = 0;\n        pos[i3 + 2] = 0;\n\n        // Random outward velocities using seeded random\n        const theta = seededRandom(i * 3) * Math.PI * 2;\n        const phi = seededRandom(i * 3 + 1) * Math.PI;\n        const speed = 0.5 + seededRandom(i * 3 + 2) * 1.5;\n\n        tempVel.set(\n          Math.sin(phi) * Math.cos(theta),\n          Math.cos(phi),\n          Math.sin(phi) * Math.sin(theta)\n        );\n        tempVel.normalize().multiplyScalar(speed);\n        \n        // Add upward bias\n        vel[i3] = tempVel.x;\n        vel[i3 + 1] = tempVel.y + 1;\n        vel[i3 + 2] = tempVel.z;\n      }\n    } finally {\n      // Always release pooled vector\n      ThreeObjectPools.vector3.release(tempVel);\n    }\n\n    return { positions: pos, velocities: vel };\n  }, [count, initialPosition]); // initialPosition is captured at mount and won't change\n\n  // Update velocities ref in useEffect to avoid ref access during render\n  useEffect(() => {\n    velocitiesRef.current = velocities;\n  }, [velocities]);\n\n  // Animate particles\n  useFrame((_, delta) => {\n    if (!pointsRef.current || !velocitiesRef.current) return;\n\n    const attr = pointsRef.current.geometry.attributes.position;\n    const array = attr.array as Float32Array;\n    const vel = velocitiesRef.current;\n\n    for (let i = 0; i < count; i++) {\n      const i3 = i * 3;\n\n      // Update positions\n      array[i3] += vel[i3] * delta * 10;\n      array[i3 + 1] += vel[i3 + 1] * delta * 10;\n      array[i3 + 2] += vel[i3 + 2] * delta * 10;\n\n      // Apply gravity\n      // Note: Intentionally mutating velocitiesRef.current (Float32Array) for performance.\n      // This is safe and won't trigger React re-renders since it's a ref.\n      vel[i3 + 1] -= 9.8 * delta;\n\n      // Fade out particles that go too far\n      if (array[i3 + 1] < -2) {\n        array[i3 + 1] = -2;\n      }\n    }\n\n    attr.needsUpdate = true;\n  });\n\n  return (\n    <points ref={pointsRef} position={position}>\n      <bufferGeometry>\n        <bufferAttribute attach=\"attributes-position\" args={[positions, 3]} />\n      </bufferGeometry>\n      <pointsMaterial\n        size={0.08}\n        color={color}\n        transparent\n        opacity={1.0}\n        sizeAttenuation\n        depthWrite={false}\n        blending={THREE.AdditiveBlending}\n      />\n    </points>\n  );\n};\n\n/**\n * Expanding ring effect\n */\nconst RingEffect: React.FC<{\n  position: [number, number, number];\n  color: number;\n  maxRadius: number;\n}> = ({ position, color, maxRadius }) => {\n  const meshRef = useRef<THREE.Mesh>(null);\n  const startTime = useRef<number>(0);\n\n  // Initialize start time on mount using useEffect\n  useEffect(() => {\n    if (startTime.current === 0) {\n      startTime.current = Date.now();\n    }\n  }, []);\n\n  useFrame(() => {\n    if (!meshRef.current) return;\n\n    const elapsed = (Date.now() - startTime.current) / 1000;\n    const progress = Math.min(elapsed / 0.5, 1); // 0.5 second duration\n\n    // Expand ring - use pooled vector for scale to avoid allocation\n    const radius = progress * maxRadius;\n    const tempScale = ThreeObjectPools.vector3.acquire();\n    try {\n      tempScale.setScalar(radius);\n      meshRef.current.scale.copy(tempScale);\n    } finally {\n      ThreeObjectPools.vector3.release(tempScale);\n    }\n\n    // Fade out\n    const material = meshRef.current.material as THREE.MeshBasicMaterial;\n    material.opacity = 1 - progress;\n  });\n\n  return (\n    <mesh ref={meshRef} position={position} rotation={[Math.PI / 2, 0, 0]}>\n      <ringGeometry args={[0.9, 1.0, 32]} />\n      <meshBasicMaterial\n        color={color}\n        transparent\n        opacity={1}\n        side={THREE.DoubleSide}\n      />\n    </mesh>\n  );\n};\n\n/**\n * Floating damage number\n */\nconst DamageNumber: React.FC<{\n  position: [number, number, number];\n  damage: number;\n  type: \"perfect\" | \"normal\" | \"miss\";\n  isMobile: boolean;\n  onComplete: () => void;\n}> = ({ position, damage, type, isMobile, onComplete }) => {\n  const [offset, setOffset] = useState(0);\n  const [opacity, setOpacity] = useState(1);\n  const startTime = useRef<number>(0);\n  const completedRef = useRef(false);\n\n  // Initialize start time on mount using useEffect\n  useEffect(() => {\n    if (startTime.current === 0) {\n      startTime.current = Date.now();\n    }\n  }, []);\n\n  useFrame(() => {\n    const elapsed = (Date.now() - startTime.current) / 1000;\n    const progress = Math.min(elapsed / 1.5, 1); // 1.5 second duration\n\n    // Float upward\n    setOffset(progress * 1);\n\n    // Fade out\n    setOpacity(1 - progress);\n\n    // Complete when done (only once)\n    if (progress >= 1 && !completedRef.current && onComplete) {\n      completedRef.current = true;\n      onComplete();\n    }\n  });\n\n  const color =\n    type === \"perfect\" ? \"#ffd700\" : type === \"normal\" ? \"#00ffff\" : \"#ff4444\";\n  const text = type === \"miss\" ? \"빗나감 | MISS\" : `${damage}`; // Korean: 빗나감 = miss/deflected\n\n  return (\n    <Html\n      position={[position[0], position[1] + offset, position[2]]}\n      center\n      distanceFactor={10}\n      style={{ pointerEvents: \"none\", opacity }}\n    >\n      <div\n        style={{\n          fontSize: isMobile ? \"20px\" : \"28px\",\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          color,\n          textShadow: \"0 0 10px rgba(0, 0, 0, 0.8)\",\n          whiteSpace: \"nowrap\",\n        }}\n        data-testid=\"damage-number\"\n      >\n        {text}\n      </div>\n    </Html>\n  );\n};\n\n/**\n * HitFeedbackEffect3D Component\n * Main hit feedback visualization\n */\nexport const HitFeedbackEffect3D: React.FC<HitFeedbackEffect3DProps> = ({\n  position,\n  type,\n  damage,\n  visible = true,\n  onComplete,\n  duration = 1500,\n  isMobile = false,\n}) => {\n  const [showEffect, setShowEffect] = useState(visible);\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Get colors based on hit type\n  const effectColor = useMemo(() => {\n    switch (type) {\n      case \"perfect\":\n        return KOREAN_COLORS.ACCENT_GOLD;\n      case \"success\":\n        return KOREAN_COLORS.PRIMARY_CYAN;\n      case \"miss\":\n        return KOREAN_COLORS.TEXT_SECONDARY;\n      default:\n        return KOREAN_COLORS.PRIMARY_CYAN;\n    }\n  }, [type]);\n\n  // Reduce particle counts on mobile to avoid frame drops\n  const particleCount = useMemo(() => {\n    const isPerfect = type === \"perfect\";\n    const isSuccess = type === \"success\";\n\n    if (isMobile) {\n      return isPerfect ? 30 : isSuccess ? 20 : 10;\n    }\n\n    // Higher fidelity on non-mobile devices\n    return isPerfect ? 80 : isSuccess ? 50 : 25;\n  }, [type, isMobile]);\n  const ringRadius = type === \"perfect\" ? 1.5 : 1.0;\n\n  // Track completion to prevent multiple calls\n  const completedRef = useRef(false);\n\n  // Handle effect completion (only once)\n  const handleComplete = useCallback(() => {\n    if (completedRef.current) return;\n    completedRef.current = true;\n    setShowEffect(false);\n    onComplete?.();\n  }, [onComplete]);\n\n  // Auto-complete after duration\n  useEffect(() => {\n    if (visible && showEffect) {\n      timeoutRef.current = setTimeout(handleComplete, duration);\n    }\n\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, [visible, showEffect, duration, handleComplete]);\n\n  if (!showEffect) return null;\n\n  return (\n    <group name={`hit-feedback-${type}`}>\n      {/* Particle burst */}\n      <ImpactParticles\n        position={position}\n        color={effectColor}\n        count={particleCount}\n      />\n\n      {/* Expanding ring */}\n      <RingEffect\n        position={position}\n        color={effectColor}\n        maxRadius={ringRadius}\n      />\n\n      {/* Floating damage number */}\n      {damage !== undefined && type !== \"miss\" && (\n        <DamageNumber\n          position={position}\n          damage={damage}\n          type={type === \"perfect\" ? \"perfect\" : \"normal\"}\n          isMobile={isMobile}\n          onComplete={handleComplete}\n        />\n      )}\n\n      {/* Miss indicator */}\n      {type === \"miss\" && (\n        <DamageNumber\n          position={position}\n          damage={0}\n          type=\"miss\"\n          isMobile={isMobile}\n          onComplete={handleComplete}\n        />\n      )}\n    </group>\n  );\n};\n\nexport default HitFeedbackEffect3D;\n"],"mappings":"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"}