blacktrigram 0.7.2

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

@@ -0,0 +1,298 @@
+import { PlayerArchetype, TrigramStance } from "../../../../types/common.js";
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import KOREAN_VITAL_POINTS from "../../../../systems/vitalpoint/KoreanVitalPoints.js";
+import SkeletalPlayer3D from "../../../shared/three/models/SkeletalPlayer3D.js";
+import VitalPointMarker3D from "./VitalPointMarker3D.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+//#region src/components/screens/training/components/TrainingDummy3D.tsx
+/**
+* TrainingDummy3D - 3D training dummy with vital points
+*
+* Provides anatomically accurate training dummy using SkeletalPlayer3D
+* for Korean martial arts practice. Supports anatomy overlays and difficulty modes.
+*
+* Refactored to extend SkeletalPlayer3D for visual consistency with player characters.
+*
+* @module components/screens/training/TrainingDummy3D
+* @category 3D Components
+* @korean 훈련인형3D컴포넌트
+*/
+/**
+* Map body region to 3D position on dummy
+*
+* Positions are calibrated for SkeletalPlayer3D bone structure.
+*
+* @param pointId - Unique identifier for the vital point
+* @param category - Anatomical category (head, neck, torso, etc.)
+* @returns 3D coordinates [x, y, z] relative to dummy center
+* @korean 급소위치계산
+*/
+var getVitalPointPosition = (pointId, category) => {
+	const basePos = {
+		head: [
+			0,
+			1.75,
+			.12
+		],
+		neck: [
+			0,
+			1.5,
+			.1
+		],
+		torso: [
+			0,
+			1.15,
+			.18
+		],
+		chest: [
+			0,
+			1.2,
+			.2
+		],
+		abdomen: [
+			0,
+			.85,
+			.18
+		],
+		back: [
+			0,
+			1.1,
+			-.15
+		],
+		arm: [
+			-.45,
+			1.15,
+			0
+		],
+		leg: [
+			-.18,
+			.4,
+			.05
+		],
+		neurological: [
+			0,
+			1.7,
+			.08
+		],
+		vascular: [
+			0,
+			1.45,
+			.12
+		],
+		muscular: [
+			0,
+			1.1,
+			.2
+		],
+		skeletal: [
+			0,
+			.9,
+			.15
+		]
+	}[category.toLowerCase()] ?? [
+		0,
+		1.1,
+		.15
+	];
+	const hash = pointId.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) * .001;
+	return [
+		basePos[0] + Math.sin(hash * 7.3) * .08,
+		basePos[1] + Math.cos(hash * 5.1) * .08,
+		basePos[2] + Math.sin(hash * 3.7) * .03
+	];
+};
+/**
+* Health bar component for training dummy
+*
+* Displays above the dummy with Korean cyberpunk styling.
+* @korean 훈련인형체력바
+*/
+var HEALTH_BAR_WIDTH = 1.2;
+var HEALTH_BAR_HEIGHT = .1;
+var DummyHealthBar = ({ health, maxHealth, position }) => {
+	const healthPercent = Math.max(0, Math.min(100, health / maxHealth * 100));
+	const bgGeometry = useMemo(() => new THREE.BoxGeometry(HEALTH_BAR_WIDTH, HEALTH_BAR_HEIGHT, .02), []);
+	const healthGeometry = useMemo(() => new THREE.BoxGeometry(HEALTH_BAR_WIDTH, HEALTH_BAR_HEIGHT, .02), []);
+	const borderGeometry = useMemo(() => new THREE.BoxGeometry(HEALTH_BAR_WIDTH + .04, HEALTH_BAR_HEIGHT + .04, .01), []);
+	const healthColor = useMemo(() => {
+		if (healthPercent > 70) return KOREAN_COLORS.HEALTH_FULL;
+		if (healthPercent > 40) return KOREAN_COLORS.HEALTH_MEDIUM;
+		if (healthPercent > 20) return KOREAN_COLORS.HEALTH_LOW;
+		return KOREAN_COLORS.HEALTH_CRITICAL;
+	}, [healthPercent]);
+	const healthScale = useMemo(() => [
+		healthPercent / 100,
+		1,
+		1
+	], [healthPercent]);
+	useEffect(() => {
+		return () => {
+			bgGeometry.dispose();
+			healthGeometry.dispose();
+			borderGeometry.dispose();
+		};
+	}, [
+		bgGeometry,
+		healthGeometry,
+		borderGeometry
+	]);
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		name: "dummy-health-bar",
+		children: [
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("primitive", { object: bgGeometry }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: KOREAN_COLORS.UI_BACKGROUND_DARK,
+				transparent: true,
+				opacity: .7
+			})] }),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					-(HEALTH_BAR_WIDTH * (1 - healthPercent / 100)) / 2,
+					0,
+					.01
+				],
+				scale: healthScale,
+				children: [/* @__PURE__ */ jsx("primitive", { object: healthGeometry }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color: healthColor,
+					transparent: true,
+					opacity: .9
+				})]
+			}),
+			/* @__PURE__ */ jsxs("lineSegments", { children: [/* @__PURE__ */ jsx("edgesGeometry", { args: [borderGeometry] }), /* @__PURE__ */ jsx("lineBasicMaterial", {
+				color: KOREAN_COLORS.PRIMARY_CYAN,
+				transparent: true,
+				opacity: .8
+			})] })
+		]
+	});
+};
+/**
+* TrainingDummy3D Component
+*
+* Main training dummy using SkeletalPlayer3D for consistent visual appearance.
+* Displays vital points for martial arts practice with difficulty-based sizing.
+*
+* @example
+* ```tsx
+* <TrainingDummy3D
+*   position={[0, 0, 5]}
+*   selectedVitalPoint="temple"
+*   isTraining={true}
+*   health={75}
+*   difficulty="normal"
+*   onVitalPointHit={(id) => console.log(`Hit ${id}`)}
+* />
+* ```
+*
+* @korean 훈련인형3D컴포넌트
+*/
+var TrainingDummy3D = ({ position, selectedVitalPoint, isTraining, health = 100, maxHealth = 100, onVitalPointHit, onDefeated, difficulty = "normal", vitalPointCount = 12, isMobile = false, archetype = PlayerArchetype.MUSA, stance = TrigramStance.GEON }) => {
+	const groupRef = useRef(null);
+	const [isStunned, setIsStunned] = useState(false);
+	const vitalPoints = useMemo(() => KOREAN_VITAL_POINTS.slice(0, Math.min(vitalPointCount, KOREAN_VITAL_POINTS.length)), [vitalPointCount]);
+	const sizeMultiplier = useMemo(() => {
+		switch (difficulty) {
+			case "easy": return 1.5;
+			case "normal": return 1;
+			case "hard": return .7;
+			default: return 1;
+		}
+	}, [difficulty]);
+	const prevHealthRef = useRef(health);
+	const onDefeatedRef = useRef(onDefeated);
+	useEffect(() => {
+		onDefeatedRef.current = onDefeated;
+	}, [onDefeated]);
+	useEffect(() => {
+		if (prevHealthRef.current > 0 && health <= 0) onDefeatedRef.current?.();
+		if (prevHealthRef.current - health > 20) {
+			setIsStunned(true);
+			const timer = setTimeout(() => setIsStunned(false), 500);
+			return () => clearTimeout(timer);
+		}
+		prevHealthRef.current = health;
+	}, [health]);
+	useFrame((state) => {
+		if (!groupRef.current) return;
+		const time = state.clock.elapsedTime;
+		const breathScale = Math.sin(time * 1.5) * .01 + 1;
+		groupRef.current.scale.y = breathScale;
+		groupRef.current.rotation.y = Math.sin(time * .5) * .02;
+	});
+	const handlePointHit = useCallback((pointId) => {
+		onVitalPointHit?.(pointId);
+	}, [onVitalPointHit]);
+	return /* @__PURE__ */ jsxs("group", {
+		ref: groupRef,
+		position,
+		name: "training-dummy-3d",
+		children: [
+			/* @__PURE__ */ jsx(SkeletalPlayer3D, {
+				playerId: "training-dummy",
+				archetype,
+				stance,
+				position: [
+					0,
+					0,
+					0
+				],
+				rotation: Math.PI,
+				facing: "left",
+				health,
+				maxHealth,
+				stamina: 100,
+				ki: 50,
+				balance: "READY",
+				pain: 0,
+				consciousness: 100,
+				isMobile,
+				currentAnimation: "idle",
+				isBlocking: false,
+				isStunned,
+				showHealthBar: false,
+				showStanceIndicator: false,
+				enableFacialExpressions: true,
+				enableEyeTracking: true
+			}),
+			vitalPoints.map((point) => /* @__PURE__ */ jsx("group", {
+				position: getVitalPointPosition(point.id, point.category),
+				children: /* @__PURE__ */ jsx(VitalPointMarker3D, {
+					vitalPoint: point,
+					isSelected: point.id === selectedVitalPoint,
+					isTraining,
+					isMobile,
+					onHit: handlePointHit,
+					sizeMultiplier
+				})
+			}, point.id)),
+			isTraining && /* @__PURE__ */ jsx(DummyHealthBar, {
+				health,
+				maxHealth,
+				position: [
+					0,
+					2.3,
+					0
+				]
+			}),
+			isTraining && /* @__PURE__ */ jsx("pointLight", {
+				position: [
+					0,
+					1.2,
+					.5
+				],
+				color: KOREAN_COLORS.PRIMARY_CYAN,
+				intensity: .3,
+				distance: 3,
+				decay: 2
+			})
+		]
+	});
+};
+//#endregion
+export { TrainingDummy3D as default };
+
+//# sourceMappingURL=TrainingDummy3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingDummy3D.js","names":[],"sources":["../../../../../src/components/screens/training/components/TrainingDummy3D.tsx"],"sourcesContent":["/**\n * TrainingDummy3D - 3D training dummy with vital points\n *\n * Provides anatomically accurate training dummy using SkeletalPlayer3D\n * for Korean martial arts practice. Supports anatomy overlays and difficulty modes.\n *\n * Refactored to extend SkeletalPlayer3D for visual consistency with player characters.\n *\n * @module components/screens/training/TrainingDummy3D\n * @category 3D Components\n * @korean 훈련인형3D컴포넌트\n */\n\nimport { useFrame } from \"@react-three/fiber\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_VITAL_POINTS } from \"../../../../systems/vitalpoint/KoreanVitalPoints\";\nimport { PlayerArchetype, TrigramStance } from \"../../../../types/common\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport SkeletalPlayer3D from \"../../../shared/three/models/SkeletalPlayer3D\";\nimport VitalPointMarker3D from \"./VitalPointMarker3D\";\n\n/**\n * Difficulty mode for training\n * @korean 난이도모드\n */\nexport type DifficultyMode = \"easy\" | \"normal\" | \"hard\";\n\n/**\n * Props for TrainingDummy3D component\n * @korean 훈련인형3D속성\n */\nexport interface TrainingDummy3DProps {\n  /** 3D world position of the dummy */\n  readonly position: [number, number, number];\n  /** Currently selected vital point for targeting */\n  readonly selectedVitalPoint: string | null;\n  /** Whether training is active */\n  readonly isTraining: boolean;\n  /** Current health of dummy (0-100) */\n  readonly health?: number;\n  /** Maximum health of dummy */\n  readonly maxHealth?: number;\n  /** Callback when vital point is hit */\n  readonly onVitalPointHit?: (vitalPointId: string) => void;\n  /** Callback when dummy is defeated */\n  readonly onDefeated?: () => void;\n  /** Difficulty mode (affects marker sizes) */\n  readonly difficulty?: DifficultyMode;\n  /** Number of vital points to display (3-70) */\n  readonly vitalPointCount?: number;\n  /** Whether on mobile device */\n  readonly isMobile?: boolean;\n  /** Archetype to display (affects body type and appearance) */\n  readonly archetype?: PlayerArchetype;\n  /** Current stance for the dummy */\n  readonly stance?: TrigramStance;\n}\n\n/**\n * Map body region to 3D position on dummy\n *\n * Positions are calibrated for SkeletalPlayer3D bone structure.\n *\n * @param pointId - Unique identifier for the vital point\n * @param category - Anatomical category (head, neck, torso, etc.)\n * @returns 3D coordinates [x, y, z] relative to dummy center\n * @korean 급소위치계산\n */\nconst getVitalPointPosition = (\n  pointId: string,\n  category: string,\n): [number, number, number] => {\n  // Base positions calibrated for SkeletalPlayer3D skeletal rig\n  // These align with the 28-bone humanoid rig structure\n  const positions: Record<string, [number, number, number]> = {\n    head: [0, 1.75, 0.12], // Head bone + offset\n    neck: [0, 1.5, 0.1], // Neck bone\n    torso: [0, 1.15, 0.18], // Chest/spine area\n    chest: [0, 1.2, 0.2], // Upper chest\n    abdomen: [0, 0.85, 0.18], // Lower torso\n    back: [0, 1.1, -0.15], // Spine back\n    arm: [-0.45, 1.15, 0], // Upper arm area\n    leg: [-0.18, 0.4, 0.05], // Thigh area\n    neurological: [0, 1.7, 0.08], // Temple/head neural points\n    vascular: [0, 1.45, 0.12], // Neck vascular points\n    muscular: [0, 1.1, 0.2], // Muscle groups\n    skeletal: [0, 0.9, 0.15], // Joints/bones\n  };\n\n  // Get base position or default to center torso\n  const basePos = positions[category.toLowerCase()] ?? [0, 1.1, 0.15];\n\n  // Add deterministic offset for multiple points in same region\n  // Uses character code of pointId for consistent positioning\n  const hash =\n    pointId.split(\"\").reduce((acc, char) => acc + char.charCodeAt(0), 0) *\n    0.001;\n  return [\n    basePos[0] + Math.sin(hash * 7.3) * 0.08,\n    basePos[1] + Math.cos(hash * 5.1) * 0.08,\n    basePos[2] + Math.sin(hash * 3.7) * 0.03,\n  ];\n};\n\n/**\n * Health bar component for training dummy\n *\n * Displays above the dummy with Korean cyberpunk styling.\n * @korean 훈련인형체력바\n */\n\n// Constants defined outside component to avoid recreation\nconst HEALTH_BAR_WIDTH = 1.2;\nconst HEALTH_BAR_HEIGHT = 0.1;\n\nconst DummyHealthBar: React.FC<{\n  readonly health: number;\n  readonly maxHealth: number;\n  readonly position: [number, number, number];\n}> = ({ health, maxHealth, position }) => {\n  // Health percentage\n  const healthPercent = Math.max(0, Math.min(100, (health / maxHealth) * 100));\n\n  // Memoize geometries to avoid recreating on every render\n  const bgGeometry = useMemo(\n    () => new THREE.BoxGeometry(HEALTH_BAR_WIDTH, HEALTH_BAR_HEIGHT, 0.02),\n    [],\n  );\n  const healthGeometry = useMemo(\n    () => new THREE.BoxGeometry(HEALTH_BAR_WIDTH, HEALTH_BAR_HEIGHT, 0.02),\n    [],\n  );\n  const borderGeometry = useMemo(\n    () =>\n      new THREE.BoxGeometry(\n        HEALTH_BAR_WIDTH + 0.04,\n        HEALTH_BAR_HEIGHT + 0.04,\n        0.01,\n      ),\n    [],\n  );\n\n  // Determine health bar color based on health percentage\n  const healthColor = useMemo(() => {\n    if (healthPercent > 70) return KOREAN_COLORS.HEALTH_FULL;\n    if (healthPercent > 40) return KOREAN_COLORS.HEALTH_MEDIUM;\n    if (healthPercent > 20) return KOREAN_COLORS.HEALTH_LOW;\n    return KOREAN_COLORS.HEALTH_CRITICAL;\n  }, [healthPercent]);\n\n  // Use scale instead of recreating geometry\n  const healthScale: [number, number, number] = useMemo(\n    () => [healthPercent / 100, 1, 1],\n    [healthPercent],\n  );\n\n  // Cleanup geometries on unmount\n  useEffect(() => {\n    return () => {\n      bgGeometry.dispose();\n      healthGeometry.dispose();\n      borderGeometry.dispose();\n    };\n  }, [bgGeometry, healthGeometry, borderGeometry]);\n\n  return (\n    <group position={position} name=\"dummy-health-bar\">\n      {/* Background bar */}\n      <mesh>\n        <primitive object={bgGeometry} />\n        <meshBasicMaterial\n          color={KOREAN_COLORS.UI_BACKGROUND_DARK}\n          transparent\n          opacity={0.7}\n        />\n      </mesh>\n\n      {/* Health bar (scaled based on health, anchored to left edge) */}\n      <mesh\n        position={[\n          -(HEALTH_BAR_WIDTH * (1 - healthPercent / 100)) / 2,\n          0,\n          0.01,\n        ]}\n        scale={healthScale}\n      >\n        <primitive object={healthGeometry} />\n        <meshBasicMaterial color={healthColor} transparent opacity={0.9} />\n      </mesh>\n\n      {/* Border frame - outline using EdgesGeometry for crisp border */}\n      <lineSegments>\n        <edgesGeometry args={[borderGeometry]} />\n        <lineBasicMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          transparent\n          opacity={0.8}\n        />\n      </lineSegments>\n    </group>\n  );\n};\n\n/**\n * TrainingDummy3D Component\n *\n * Main training dummy using SkeletalPlayer3D for consistent visual appearance.\n * Displays vital points for martial arts practice with difficulty-based sizing.\n *\n * @example\n * ```tsx\n * <TrainingDummy3D\n *   position={[0, 0, 5]}\n *   selectedVitalPoint=\"temple\"\n *   isTraining={true}\n *   health={75}\n *   difficulty=\"normal\"\n *   onVitalPointHit={(id) => console.log(`Hit ${id}`)}\n * />\n * ```\n *\n * @korean 훈련인형3D컴포넌트\n */\nexport const TrainingDummy3D: React.FC<TrainingDummy3DProps> = ({\n  position,\n  selectedVitalPoint,\n  isTraining,\n  health = 100,\n  maxHealth = 100,\n  onVitalPointHit,\n  onDefeated,\n  difficulty = \"normal\",\n  vitalPointCount = 12,\n  isMobile = false,\n  archetype = PlayerArchetype.MUSA,\n  stance = TrigramStance.GEON,\n}) => {\n  const groupRef = useRef<THREE.Group>(null);\n  const [isStunned, setIsStunned] = useState(false);\n\n  // Select vital points to display based on count (expandable to 70)\n  const vitalPoints = useMemo(\n    () =>\n      KOREAN_VITAL_POINTS.slice(\n        0,\n        Math.min(vitalPointCount, KOREAN_VITAL_POINTS.length),\n      ),\n    [vitalPointCount],\n  );\n\n  // Calculate size multiplier based on difficulty\n  const sizeMultiplier = useMemo(() => {\n    switch (difficulty) {\n      case \"easy\":\n        return 1.5; // Larger targets\n      case \"normal\":\n        return 1.0; // Standard size\n      case \"hard\":\n        return 0.7; // Smaller targets\n      default:\n        return 1.0;\n    }\n  }, [difficulty]);\n\n  // Track previous health to detect defeat\n  const prevHealthRef = useRef(health);\n\n  // Store latest onDefeated callback in a ref to avoid stale closure\n  const onDefeatedRef = useRef(onDefeated);\n  useEffect(() => {\n    onDefeatedRef.current = onDefeated;\n  }, [onDefeated]);\n\n  // Check for defeat and trigger stun effect on significant damage\n  useEffect(() => {\n    // Defeated check\n    if (prevHealthRef.current > 0 && health <= 0) {\n      onDefeatedRef.current?.();\n    }\n\n    // Stun on significant damage (more than 20 points)\n    if (prevHealthRef.current - health > 20) {\n      setIsStunned(true);\n      const timer = setTimeout(() => setIsStunned(false), 500);\n      return () => clearTimeout(timer);\n    }\n\n    prevHealthRef.current = health;\n    return undefined;\n  }, [health]);\n\n  // Subtle idle animation for training dummy\n  useFrame((state) => {\n    if (!groupRef.current) return;\n\n    // Gentle breathing/swaying motion\n    const time = state.clock.elapsedTime;\n    const breathScale = Math.sin(time * 1.5) * 0.01 + 1;\n    groupRef.current.scale.y = breathScale;\n\n    // Subtle rotation as if waiting for attack\n    groupRef.current.rotation.y = Math.sin(time * 0.5) * 0.02;\n  });\n\n  // Handle vital point hit\n  const handlePointHit = useCallback(\n    (pointId: string) => {\n      onVitalPointHit?.(pointId);\n    },\n    [onVitalPointHit],\n  );\n\n  return (\n    <group ref={groupRef} position={position} name=\"training-dummy-3d\">\n      {/* SkeletalPlayer3D as the base character model */}\n      <SkeletalPlayer3D\n        playerId=\"training-dummy\"\n        archetype={archetype}\n        stance={stance}\n        position={[0, 0, 0]}\n        rotation={Math.PI} // Face the player\n        facing=\"left\"\n        health={health}\n        maxHealth={maxHealth}\n        stamina={100}\n        ki={50}\n        balance=\"READY\"\n        pain={0}\n        consciousness={100}\n        isMobile={isMobile}\n        currentAnimation=\"idle\"\n        isBlocking={false}\n        isStunned={isStunned}\n        showHealthBar={false} // We use custom health bar\n        showStanceIndicator={false}\n        enableFacialExpressions={true}\n        enableEyeTracking={true}\n      />\n\n      {/* Vital point markers overlaid on the skeletal model */}\n      {vitalPoints.map((point) => (\n        <group\n          key={point.id}\n          position={getVitalPointPosition(point.id, point.category)}\n        >\n          <VitalPointMarker3D\n            vitalPoint={point}\n            isSelected={point.id === selectedVitalPoint}\n            isTraining={isTraining}\n            isMobile={isMobile}\n            onHit={handlePointHit}\n            sizeMultiplier={sizeMultiplier}\n          />\n        </group>\n      ))}\n\n      {/* Health bar above dummy */}\n      {isTraining && (\n        <DummyHealthBar\n          health={health}\n          maxHealth={maxHealth}\n          position={[0, 2.3, 0]}\n        />\n      )}\n\n      {/* Training mode indicator glow */}\n      {isTraining && (\n        <pointLight\n          position={[0, 1.2, 0.5]}\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          intensity={0.3}\n          distance={3}\n          decay={2}\n        />\n      )}\n    </group>\n  );\n};\n\nexport default TrainingDummy3D;\n"],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+/**
+ * TrainingFeedbackOverlayHtml - Html overlay for training feedback messages
+ *
+ * Displays temporary feedback messages for hits, misses, and achievements
+ * with consistent Korean martial arts cyberpunk theming.
+ *
+ * @module components/screens/training/components/TrainingFeedbackOverlayHtml
+ * @category Training UI
+ * @korean 훈련피드백오버레이
+ */
+import React from "react";
+import "../training.css";
+/**
+ * Props for TrainingFeedbackOverlayHtml component
+ */
+export interface TrainingFeedbackOverlayHtmlProps {
+    /** Feedback message to display */
+    readonly message: string;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * TrainingFeedbackOverlayHtml Component
+ * Html overlay for displaying training feedback with Korean theming
+ *
+ * @korean 훈련피드백오버레이컴포넌트
+ */
+export declare const TrainingFeedbackOverlayHtml: React.NamedExoticComponent<TrainingFeedbackOverlayHtmlProps>;
+export default TrainingFeedbackOverlayHtml;
+//# sourceMappingURL=TrainingFeedbackOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingFeedbackOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingFeedbackOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,kCAAkC;IAClC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,2BAA2B,8DA0BtC,CAAC;AAIH,eAAe,2BAA2B,CAAC"}

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

@@ -0,0 +1,44 @@
+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";
+/* empty css          */
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/screens/training/components/TrainingFeedbackOverlayHtml.tsx
+/**
+* TrainingFeedbackOverlayHtml - Html overlay for training feedback messages
+* 
+* Displays temporary feedback messages for hits, misses, and achievements
+* with consistent Korean martial arts cyberpunk theming.
+* 
+* @module components/screens/training/components/TrainingFeedbackOverlayHtml
+* @category Training UI
+* @korean 훈련피드백오버레이
+*/
+/**
+* TrainingFeedbackOverlayHtml Component
+* Html overlay for displaying training feedback with Korean theming
+* 
+* @korean 훈련피드백오버레이컴포넌트
+*/
+var TrainingFeedbackOverlayHtml = React.memo(({ message, isMobile }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: `training-feedback ${isMobile ? "mobile" : "desktop"}`,
+		style: {
+			fontFamily: FONT_FAMILY.KOREAN,
+			fontWeight: "bold",
+			color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),
+			textShadow: `0 2px 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .5)}`
+		},
+		"data-testid": "training-feedback-html",
+		children: message
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.message === nextProps.message && prevProps.isMobile === nextProps.isMobile;
+});
+TrainingFeedbackOverlayHtml.displayName = "TrainingFeedbackOverlayHtml";
+//#endregion
+export { TrainingFeedbackOverlayHtml as default };
+
+//# sourceMappingURL=TrainingFeedbackOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingFeedbackOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/TrainingFeedbackOverlayHtml.tsx"],"sourcesContent":["/**\n * TrainingFeedbackOverlayHtml - Html overlay for training feedback messages\n * \n * Displays temporary feedback messages for hits, misses, and achievements\n * with consistent Korean martial arts cyberpunk theming.\n * \n * @module components/screens/training/components/TrainingFeedbackOverlayHtml\n * @category Training UI\n * @korean 훈련피드백오버레이\n */\n\nimport React from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"../training.css\";\n\n/**\n * Props for TrainingFeedbackOverlayHtml component\n */\nexport interface TrainingFeedbackOverlayHtmlProps {\n  /** Feedback message to display */\n  readonly message: string;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * TrainingFeedbackOverlayHtml Component\n * Html overlay for displaying training feedback with Korean theming\n * \n * @korean 훈련피드백오버레이컴포넌트\n */\nexport const TrainingFeedbackOverlayHtml = React.memo<TrainingFeedbackOverlayHtmlProps>(\n  ({\n    message,\n    isMobile,\n  }) => {\n  return (\n    <div\n      className={`training-feedback ${isMobile ? \"mobile\" : \"desktop\"}`}\n      style={{\n        fontFamily: FONT_FAMILY.KOREAN,\n        fontWeight: \"bold\",\n        color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n        textShadow: `0 2px 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.5)}`,\n      }}\n      data-testid=\"training-feedback-html\"\n    >\n      {message}\n    </div>\n  );\n},\n(prevProps, nextProps) => {\n  // Only re-render if message or mobile state changes\n  return (\n    prevProps.message === nextProps.message &&\n    prevProps.isMobile === nextProps.isMobile\n  );\n});\n\nTrainingFeedbackOverlayHtml.displayName = \"TrainingFeedbackOverlayHtml\";\n\nexport default TrainingFeedbackOverlayHtml;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,8BAA8B,MAAM,MAC9C,EACC,SACA,eACI;AACN,QACE,oBAAC,OAAD;EACE,WAAW,qBAAqB,WAAW,WAAW;EACtD,OAAO;GACL,YAAY,YAAY;GACxB,YAAY;GACZ,OAAO,gBAAgB,cAAc,YAAY;GACjD,YAAY,cAAc,gBAAgB,cAAc,aAAa,GAAI;GAC1E;EACD,eAAY;YAEX;EACG,CAAA;IAGT,WAAW,cAAc;AAExB,QACE,UAAU,YAAY,UAAU,WAChC,UAAU,aAAa,UAAU;EAEnC;AAEF,4BAA4B,cAAc"}

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

@@ -0,0 +1,27 @@
+/**
+ * TrainingHitEffects3D - Optimized particle effects using InstancedMesh
+ *
+ * Provides visual feedback for successful and missed strikes
+ * Uses InstancedMesh for better performance with many particles
+ */
+import React from "react";
+/**
+ * Props for TrainingHitEffects3D component
+ */
+export interface TrainingHitEffects3DProps {
+    /** Position where the hit occurred */
+    readonly position: [number, number, number];
+    /** Type of hit effect */
+    readonly type: "success" | "perfect" | "miss";
+    /** Whether to show the effect */
+    readonly visible: boolean;
+    /** Callback when effect completes */
+    readonly onComplete?: () => void;
+}
+/**
+ * TrainingHitEffects3D Component
+ * Optimized particle burst effect using InstancedMesh for better performance
+ */
+export declare const TrainingHitEffects3D: React.FC<TrainingHitEffects3DProps>;
+export default TrainingHitEffects3D;
+//# sourceMappingURL=TrainingHitEffects3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingHitEffects3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingHitEffects3D.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAKpE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,yBAAyB;IACzB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9C,iCAAiC;IACjC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AA6CD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAgLpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,6 @@
+import "../../../../types/constants/index.js";
+import "../../../../utils/threeObjectPool.js";
+import "react";
+import "react/jsx-runtime";
+import "@react-three/fiber";
+import "three";

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

@@ -0,0 +1,51 @@
+/**
+ * TrainingModeSelectorOverlayHtml - Html overlay for training mode selection
+ *
+ * Allows switching between different training modes with consistent Korean theming.
+ * Uses KOREAN_COLORS constants and bilingual formatting.
+ *
+ * @module components/screens/training
+ * @category Training UI
+ * @korean 훈련모드선택오버레이
+ */
+import React from "react";
+import "../training.css";
+/**
+ * Training mode types
+ */
+export type TrainingMode = "basics" | "advanced" | "free" | "stance_training" | "vital_point" | "combo_practice" | "footwork";
+/**
+ * Props for TrainingModeSelectorOverlayHtml component
+ */
+export interface TrainingModeSelectorOverlayHtmlProps {
+    /** Currently selected training mode */
+    readonly currentMode: TrainingMode;
+    /** Callback when mode changes */
+    readonly onModeChange: (mode: TrainingMode) => void;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * TrainingModeSelectorOverlayHtml Component
+ *
+ * Html overlay for selecting training mode with Korean theming.
+ * Compact horizontal grid layout optimized for desktop and mobile.
+ *
+ * Optimized with React.memo for 60fps performance:
+ * - Prevents re-renders when currentMode hasn't changed
+ * - Callback expected to be stable (parent should use useCallback)
+ *
+ * @example
+ * ```tsx
+ * <TrainingModeSelectorOverlayHtml
+ *   currentMode="vital_point"
+ *   onModeChange={(mode) => console.log(mode)}
+ *   isMobile={false}
+ * />
+ * ```
+ *
+ * @korean 훈련모드선택오버레이컴포넌트
+ */
+export declare const TrainingModeSelectorOverlayHtml: React.NamedExoticComponent<TrainingModeSelectorOverlayHtmlProps>;
+export default TrainingModeSelectorOverlayHtml;
+//# sourceMappingURL=TrainingModeSelectorOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingModeSelectorOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingModeSelectorOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,MAAM,YAAY,GACpB,QAAQ,GACR,UAAU,GACV,MAAM,GACN,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,UAAU,CAAC;AAEf;;GAEG;AACH,MAAM,WAAW,oCAAoC;IACnD,uCAAuC;IACvC,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC;IACnC,iCAAiC;IACjC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AA8CD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,+BAA+B,kEA2IzC,CAAC;AAIJ,eAAe,+BAA+B,CAAC"}