blacktrigram 0.7.2

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

@@ -0,0 +1,210 @@
+import { VitalPointSeverity } from "../../../../types/common.js";
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { UI_DIMENSIONS } from "../../../../types/constants/ui.js";
+import "../../../../types/constants/index.js";
+import { applyHtmlOverlayStyles, calculateDistanceFactor } from "../../../../utils/htmlOverlayHelpers.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/VitalPointMarker3D.tsx
+/**
+* VitalPointMarker3D - Individual vital point marker with hover labels
+*
+* Provides interactive 3D markers for vital points with Korean-English bilingual labels
+*/
+/**
+* Get color based on vital point severity
+*/
+var getSeverityColor = (severity) => {
+	switch (severity) {
+		case VitalPointSeverity.MINOR: return KOREAN_COLORS.POSITIVE_GREEN;
+		case VitalPointSeverity.MODERATE: return KOREAN_COLORS.WARNING_YELLOW;
+		case VitalPointSeverity.MAJOR: return KOREAN_COLORS.ACCENT_GOLD;
+		case VitalPointSeverity.CRITICAL: return KOREAN_COLORS.ACCENT_RED;
+		case VitalPointSeverity.LETHAL: return KOREAN_COLORS.NEGATIVE_RED;
+		default: return KOREAN_COLORS.TEXT_SECONDARY;
+	}
+};
+/**
+* Base scale offset for pulsing animation
+* This value (1.15) ensures the marker pulses around a slightly enlarged baseline,
+* making the pulsing effect more visible without excessive size variation.
+* Used in useFrame hook for scale calculation (see line ~180).
+*/
+var PULSE_BASE_SCALE = 1.15;
+/**
+* VitalPointMarker3D Component
+* Individual 3D marker with hover tooltip
+*/
+var VitalPointMarker3D = ({ vitalPoint, isSelected, isTraining, isMobile = false, onHit, sizeMultiplier = 1, pulseFrequency, pulseAmplitude, maxEmissiveIntensity = 3.5 }) => {
+	const defaultPulseFrequency = isTraining && !isSelected ? 4 : 6;
+	const defaultPulseAmplitude = isTraining && !isSelected ? .15 : .25;
+	const activePulseFrequency = pulseFrequency ?? defaultPulseFrequency;
+	const activePulseAmplitude = pulseAmplitude ?? defaultPulseAmplitude;
+	const meshRef = useRef(null);
+	const [hovered, setHovered] = useState(false);
+	const markerSize = (isMobile ? .15 : .1) * sizeMultiplier;
+	const targetScale = useMemo(() => new THREE.Vector3(1, 1, 1), []);
+	useFrame((state) => {
+		if (!meshRef.current) return;
+		if (isSelected || hovered) {
+			const pulse = Math.sin(state.clock.elapsedTime * activePulseFrequency) * activePulseAmplitude + PULSE_BASE_SCALE;
+			meshRef.current.scale.setScalar(pulse);
+		} else {
+			targetScale.set(1, 1, 1);
+			meshRef.current.scale.lerp(targetScale, .1);
+		}
+	});
+	const color = useMemo(() => getSeverityColor(vitalPoint.severity), [vitalPoint.severity]);
+	const markerMaterial = useMemo(() => new THREE.MeshPhysicalMaterial({
+		color: isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,
+		emissive: isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,
+		emissiveIntensity: isSelected || hovered ? maxEmissiveIntensity : 2,
+		metalness: .9,
+		roughness: .1,
+		clearcoat: 1,
+		clearcoatRoughness: .05,
+		transparent: true,
+		opacity: isTraining ? .9 : .6,
+		transmission: .1,
+		thickness: .2,
+		ior: 2.4,
+		sheen: .3,
+		sheenRoughness: .1
+	}), [
+		isSelected,
+		hovered,
+		color,
+		maxEmissiveIntensity,
+		isTraining
+	]);
+	useEffect(() => {
+		return () => {
+			markerMaterial.dispose();
+		};
+	}, [markerMaterial]);
+	const [screenWidth, setScreenWidth] = useState(() => typeof window !== "undefined" ? window.innerWidth : UI_DIMENSIONS.DEFAULT_SCREEN_WIDTH);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handleResize = () => {
+			setScreenWidth(window.innerWidth);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	const tooltipDistanceFactor = useMemo(() => {
+		return calculateDistanceFactor(screenWidth, "text", isMobile);
+	}, [screenWidth, isMobile]);
+	const tooltipOverlayStyle = useMemo(() => {
+		return applyHtmlOverlayStyles("tooltip", false, tooltipDistanceFactor, true, false);
+	}, [tooltipDistanceFactor]);
+	return /* @__PURE__ */ jsxs("group", { children: [
+		/* @__PURE__ */ jsxs("mesh", {
+			ref: meshRef,
+			onClick: useCallback(() => {
+				if (isTraining && onHit) onHit(vitalPoint.id);
+			}, [
+				isTraining,
+				onHit,
+				vitalPoint.id
+			]),
+			onPointerOver: () => setHovered(true),
+			onPointerOut: () => setHovered(false),
+			name: `vital-point-marker-${vitalPoint.id}`,
+			children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				markerSize,
+				16,
+				16
+			] }), /* @__PURE__ */ jsx("primitive", {
+				object: markerMaterial,
+				attach: "material"
+			})]
+		}),
+		isSelected && /* @__PURE__ */ jsxs("mesh", {
+			rotation: [
+				Math.PI / 2,
+				0,
+				0
+			],
+			children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+				markerSize * 1.2,
+				markerSize * 1.5,
+				32
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: KOREAN_COLORS.ACCENT_GOLD,
+				transparent: true,
+				opacity: .6,
+				side: THREE.DoubleSide
+			})]
+		}),
+		hovered && /* @__PURE__ */ jsx(Html, {
+			position: [
+				0,
+				markerSize + .2,
+				0
+			],
+			center: tooltipOverlayStyle.center,
+			distanceFactor: tooltipOverlayStyle.distanceFactor,
+			occlude: tooltipOverlayStyle.occlude,
+			style: { pointerEvents: tooltipOverlayStyle.pointerEvents },
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					background: "rgba(0, 0, 0, 0.9)",
+					border: `2px solid ${isSelected ? "#ffd700" : "#00ffff"}`,
+					borderRadius: "8px",
+					padding: isMobile ? "6px 10px" : "8px 12px",
+					fontFamily: FONT_FAMILY.KOREAN,
+					whiteSpace: "nowrap",
+					boxShadow: "0 0 15px rgba(0, 255, 255, 0.5)",
+					transform: tooltipOverlayStyle.transform,
+					zIndex: tooltipOverlayStyle.zIndex
+				},
+				"data-testid": `vital-point-tooltip-${vitalPoint.id}`,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: isMobile ? "12px" : "14px",
+							fontWeight: "bold",
+							color: "#ffd700",
+							marginBottom: "4px"
+						},
+						children: vitalPoint.names.korean
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: isMobile ? "10px" : "11px",
+							color: "#00ffff",
+							marginBottom: "4px"
+						},
+						children: vitalPoint.names.english
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: isMobile ? "9px" : "10px",
+							color: "#999999",
+							fontStyle: "italic"
+						},
+						children: vitalPoint.names.romanized
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							fontSize: isMobile ? "9px" : "10px",
+							color: `#${new THREE.Color(color).getHexString()}`,
+							marginTop: "6px",
+							borderTop: "1px solid rgba(255, 255, 255, 0.2)",
+							paddingTop: "4px"
+						},
+						children: ["심각도 | ", vitalPoint.severity]
+					})
+				]
+			})
+		})
+	] });
+};
+//#endregion
+export { VitalPointMarker3D as default };
+
+//# sourceMappingURL=VitalPointMarker3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointMarker3D.js","names":[],"sources":["../../../../../src/components/screens/training/components/VitalPointMarker3D.tsx"],"sourcesContent":["/**\n * VitalPointMarker3D - Individual vital point marker with hover labels\n *\n * Provides interactive 3D markers for vital points with Korean-English bilingual labels\n */\n\nimport { Html } from \"@react-three/drei\";\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 { VitalPoint } from \"../../../../systems/vitalpoint/types\";\nimport { VitalPointSeverity } from \"../../../../types/common\";\nimport {\n  FONT_FAMILY,\n  KOREAN_COLORS,\n  UI_DIMENSIONS,\n} from \"../../../../types/constants\";\nimport {\n  applyHtmlOverlayStyles,\n  calculateDistanceFactor,\n} from \"../../../../utils/htmlOverlayHelpers\";\n\n/**\n * Props for VitalPointMarker3D component\n */\nexport interface VitalPointMarker3DProps {\n  /** The vital point data to visualize */\n  readonly vitalPoint: VitalPoint;\n  /** Whether this vital point is currently selected */\n  readonly isSelected: boolean;\n  /** Whether training mode is active */\n  readonly isTraining: boolean;\n  /** Whether on mobile device (larger hit targets) */\n  readonly isMobile?: boolean;\n  /** Callback when vital point is clicked/hit */\n  readonly onHit?: (vitalPointId: string) => void;\n  /** Base size multiplier (for difficulty modes) */\n  readonly sizeMultiplier?: number;\n  /** Pulse frequency in Hz (default: 6Hz for selected, 4Hz for training mode) */\n  readonly pulseFrequency?: number;\n  /** Pulse amplitude (default: 0.25 for selected, 0.15 for training mode) */\n  readonly pulseAmplitude?: number;\n  /** Maximum emissive intensity for selected/hovered state (default: 3.5) */\n  readonly maxEmissiveIntensity?: number;\n}\n\n/**\n * Get color based on vital point severity\n */\nconst getSeverityColor = (severity: VitalPointSeverity): number => {\n  switch (severity) {\n    case VitalPointSeverity.MINOR:\n      return KOREAN_COLORS.POSITIVE_GREEN;\n    case VitalPointSeverity.MODERATE:\n      return KOREAN_COLORS.WARNING_YELLOW;\n    case VitalPointSeverity.MAJOR:\n      return KOREAN_COLORS.ACCENT_GOLD;\n    case VitalPointSeverity.CRITICAL:\n      return KOREAN_COLORS.ACCENT_RED;\n    case VitalPointSeverity.LETHAL:\n      return KOREAN_COLORS.NEGATIVE_RED; // Most severe - red for lethal vital points\n    default:\n      return KOREAN_COLORS.TEXT_SECONDARY;\n  }\n};\n\n/**\n * Base scale offset for pulsing animation\n * This value (1.15) ensures the marker pulses around a slightly enlarged baseline,\n * making the pulsing effect more visible without excessive size variation.\n * Used in useFrame hook for scale calculation (see line ~180).\n */\nconst PULSE_BASE_SCALE = 1.15;\n\n/**\n * VitalPointMarker3D Component\n * Individual 3D marker with hover tooltip\n */\nexport const VitalPointMarker3D: React.FC<VitalPointMarker3DProps> = ({\n  vitalPoint,\n  isSelected,\n  isTraining,\n  isMobile = false,\n  onHit,\n  sizeMultiplier = 1.0,\n  pulseFrequency,\n  pulseAmplitude,\n  maxEmissiveIntensity = 3.5,\n}) => {\n  // Default pulse settings: higher frequency/amplitude for selected, lower for training mode\n  const defaultPulseFrequency = isTraining && !isSelected ? 4 : 6;\n  const defaultPulseAmplitude = isTraining && !isSelected ? 0.15 : 0.25;\n  \n  const activePulseFrequency = pulseFrequency ?? defaultPulseFrequency;\n  const activePulseAmplitude = pulseAmplitude ?? defaultPulseAmplitude;\n  const meshRef = useRef<THREE.Mesh>(null);\n  const [hovered, setHovered] = useState(false);\n\n  // Calculate marker size (larger on mobile, adjustable by difficulty)\n  const baseSize = isMobile ? 0.15 : 0.1;\n  const markerSize = baseSize * sizeMultiplier;\n\n  // Reusable vector for scale animation\n  const targetScale = useMemo(() => new THREE.Vector3(1, 1, 1), []);\n\n  // Animate selected and hovered markers\n  // Note: Pulse frequency and amplitude are configurable via props to allow adjustment\n  // for extended training sessions where high frequency may cause visual fatigue.\n  useFrame((state) => {\n    if (!meshRef.current) return;\n\n    if (isSelected || hovered) {\n      // Pulsing animation with configurable frequency and amplitude\n      const pulse = Math.sin(state.clock.elapsedTime * activePulseFrequency) * activePulseAmplitude + PULSE_BASE_SCALE;\n      meshRef.current.scale.setScalar(pulse);\n    } else {\n      // Smooth return to normal scale\n      targetScale.set(1, 1, 1);\n      meshRef.current.scale.lerp(targetScale, 0.1);\n    }\n  });\n\n  const color = useMemo(\n    () => getSeverityColor(vitalPoint.severity),\n    [vitalPoint.severity]\n  );\n\n  // Memoize marker material to avoid recreating on every render\n  const markerMaterial = useMemo(\n    () =>\n      new THREE.MeshPhysicalMaterial({\n        color: isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,\n        emissive: isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,\n        emissiveIntensity: isSelected || hovered ? maxEmissiveIntensity : 2.0,\n        // Note: High emissive intensity (default 3.5 for selected) is optimized for\n        // a small number of simultaneously highlighted markers. When many markers are\n        // active (e.g., displaying all 70 vital points), reduce maxEmissiveIntensity\n        // via props or implement LOD to cap total high-intensity markers at ~10-15.\n        // See AnatomyOverlay3D.tsx for consistent guidance on emissive thresholds.\n        metalness: 0.9, // Increased metalness for more reflective appearance (was 0.8)\n        roughness: 0.1, // Reduced roughness for stronger reflections (was 0.2)\n        clearcoat: 1.0,\n        clearcoatRoughness: 0.05, // Reduced for sharper clearcoat (was 0.1)\n        transparent: true,\n        opacity: isTraining ? 0.9 : 0.6,\n        // Enhanced PBR properties\n        transmission: 0.1, // Slight transmission for glass-like effect\n        thickness: 0.2,\n        ior: 2.4, // High IOR for gem-like appearance\n        sheen: 0.3, // Increased sheen\n        sheenRoughness: 0.1,\n      }),\n    [isSelected, hovered, color, maxEmissiveIntensity, isTraining]\n  );\n\n  // Dispose marker material on unmount or when a new material is created\n  useEffect(() => {\n    return () => {\n      markerMaterial.dispose();\n    };\n  }, [markerMaterial]);\n\n  // Track screen width for responsive distance factor updates on resize\n  const [screenWidth, setScreenWidth] = useState(() =>\n    typeof window !== \"undefined\"\n      ? window.innerWidth\n      : UI_DIMENSIONS.DEFAULT_SCREEN_WIDTH\n  );\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleResize = () => {\n      setScreenWidth(window.innerWidth);\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  // Calculate optimal distance factor for tooltip overlay\n  const tooltipDistanceFactor = useMemo(() => {\n    return calculateDistanceFactor(screenWidth, \"text\", isMobile);\n  }, [screenWidth, isMobile]);\n\n  // Apply Html overlay styles for tooltip\n  const tooltipOverlayStyle = useMemo(() => {\n    return applyHtmlOverlayStyles(\n      \"tooltip\",\n      false,\n      tooltipDistanceFactor,\n      true,\n      false\n    );\n  }, [tooltipDistanceFactor]);\n\n  const handleClick = useCallback(() => {\n    if (isTraining && onHit) {\n      onHit(vitalPoint.id);\n    }\n  }, [isTraining, onHit, vitalPoint.id]);\n\n  return (\n    <group>\n      {/* Hit target sphere\n          Note: Three.js 3D objects lack standard DOM accessibility (aria-label, role, etc.).\n          For accessible alternatives, see keyboard shortcuts documented in the UI and\n          consider future enhancements for screen reader support via Html overlays. */}\n      <mesh\n        ref={meshRef}\n        onClick={handleClick}\n        onPointerOver={() => setHovered(true)}\n        onPointerOut={() => setHovered(false)}\n        name={`vital-point-marker-${vitalPoint.id}`}\n      >\n        <sphereGeometry args={[markerSize, 16, 16]} />\n        <primitive object={markerMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Ring indicator for selected marker */}\n      {isSelected && (\n        <mesh rotation={[Math.PI / 2, 0, 0]}>\n          <ringGeometry args={[markerSize * 1.2, markerSize * 1.5, 32]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.ACCENT_GOLD}\n            transparent\n            opacity={0.6}\n            side={THREE.DoubleSide}\n          />\n        </mesh>\n      )}\n\n      {/* Hover tooltip with Korean-English labels */}\n      {hovered && (\n        <Html\n          position={[0, markerSize + 0.2, 0]}\n          center={tooltipOverlayStyle.center}\n          distanceFactor={tooltipOverlayStyle.distanceFactor}\n          occlude={tooltipOverlayStyle.occlude}\n          style={{ pointerEvents: tooltipOverlayStyle.pointerEvents }}\n        >\n          <div\n            style={{\n              background: \"rgba(0, 0, 0, 0.9)\",\n              border: `2px solid ${isSelected ? \"#ffd700\" : \"#00ffff\"}`,\n              borderRadius: \"8px\",\n              padding: isMobile ? \"6px 10px\" : \"8px 12px\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              whiteSpace: \"nowrap\",\n              boxShadow: \"0 0 15px rgba(0, 255, 255, 0.5)\",\n              transform: tooltipOverlayStyle.transform,\n              zIndex: tooltipOverlayStyle.zIndex,\n            }}\n            data-testid={`vital-point-tooltip-${vitalPoint.id}`}\n          >\n            {/* Korean name */}\n            <div\n              style={{\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                fontWeight: \"bold\",\n                color: \"#ffd700\",\n                marginBottom: \"4px\",\n              }}\n            >\n              {vitalPoint.names.korean}\n            </div>\n\n            {/* English name */}\n            <div\n              style={{\n                fontSize: isMobile ? \"10px\" : \"11px\",\n                color: \"#00ffff\",\n                marginBottom: \"4px\",\n              }}\n            >\n              {vitalPoint.names.english}\n            </div>\n\n            {/* Romanized name */}\n            <div\n              style={{\n                fontSize: isMobile ? \"9px\" : \"10px\",\n                color: \"#999999\",\n                fontStyle: \"italic\",\n              }}\n            >\n              {vitalPoint.names.romanized}\n            </div>\n\n            {/* Severity indicator */}\n            <div\n              style={{\n                fontSize: isMobile ? \"9px\" : \"10px\",\n                color: `#${new THREE.Color(color).getHexString()}`,\n                marginTop: \"6px\",\n                borderTop: \"1px solid rgba(255, 255, 255, 0.2)\",\n                paddingTop: \"4px\",\n              }}\n            >\n              심각도 | {vitalPoint.severity}\n            </div>\n          </div>\n        </Html>\n      )}\n    </group>\n  );\n};\n\nexport default VitalPointMarker3D;\n"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+/**
+ * VitalPointTrainingOverlayHtml - Html overlay for vital point selection
+ *
+ * Provides vital point selection interface with consistent Korean martial arts theming.
+ *
+ * @module components/screens/training/components/VitalPointTrainingOverlayHtml
+ * @category Training UI
+ * @korean 급소훈련오버레이
+ */
+import React from "react";
+import "../training.css";
+/**
+ * Props for VitalPointTrainingOverlayHtml component
+ */
+export interface VitalPointTrainingOverlayHtmlProps {
+    /** Currently selected vital point ID */
+    readonly selectedVitalPoint: string | null;
+    /** Callback when vital point is selected */
+    readonly onVitalPointSelect: (vitalPointId: string) => void;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * VitalPointTrainingOverlayHtml Component
+ * Html overlay for vital point selection and information
+ */
+export declare const VitalPointTrainingOverlayHtml: React.NamedExoticComponent<VitalPointTrainingOverlayHtmlProps>;
+export default VitalPointTrainingOverlayHtml;
+//# sourceMappingURL=VitalPointTrainingOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointTrainingOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/VitalPointTrainingOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAgBvC,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,kCAAkC;IACjD,wCAAwC;IACxC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,QAAQ,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AA2BD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,gEAqMvC,CAAC;AAIJ,eAAe,6BAA6B,CAAC"}

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

@@ -0,0 +1,195 @@
+import { VitalPointSeverity } from "../../../../types/common.js";
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { SPACING } from "../../../../types/constants/ui.js";
+import "../../../../types/constants/index.js";
+import KOREAN_VITAL_POINTS from "../../../../systems/vitalpoint/KoreanVitalPoints.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getNeonGlowEffect, getNeonTextShadow, getSmoothTransition } from "../../../../utils/visualEffects.js";
+import { formatBilingualText, getEnhancedKoreanOverlayStyles, getResponsiveSpacing } from "../../../../utils/koreanThemeHelpers.js";
+/* empty css          */
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/training/components/VitalPointTrainingOverlayHtml.tsx
+/**
+* VitalPointTrainingOverlayHtml - Html overlay for vital point selection
+*
+* Provides vital point selection interface with consistent Korean martial arts theming.
+*
+* @module components/screens/training/components/VitalPointTrainingOverlayHtml
+* @category Training UI
+* @korean 급소훈련오버레이
+*/
+/**
+* Get Korean color from severity
+* Maps vital point severity to KOREAN_COLORS constants
+*
+* @korean 심각도별색상
+*/
+var getSeverityColor = (severity) => {
+	return {
+		[VitalPointSeverity.MINOR]: KOREAN_COLORS.POSITIVE_GREEN,
+		[VitalPointSeverity.MODERATE]: KOREAN_COLORS.WARNING_ORANGE,
+		[VitalPointSeverity.MAJOR]: KOREAN_COLORS.ACCENT_GOLD,
+		[VitalPointSeverity.CRITICAL]: KOREAN_COLORS.ACCENT_RED,
+		[VitalPointSeverity.LETHAL]: KOREAN_COLORS.PRIMARY_RED
+	}[severity] ?? KOREAN_COLORS.TEXT_TERTIARY;
+};
+/**
+* Get difficulty stars
+*/
+var getDifficultyStars = (difficulty) => {
+	const stars = Math.ceil(difficulty * 5);
+	return "★".repeat(Math.min(stars, 5)) + "☆".repeat(5 - Math.min(stars, 5));
+};
+/**
+* VitalPointTrainingOverlayHtml Component
+* Html overlay for vital point selection and information
+*/
+var VitalPointTrainingOverlayHtml = React.memo(({ selectedVitalPoint, onVitalPointSelect, isMobile }) => {
+	const availableVitalPoints = useMemo(() => KOREAN_VITAL_POINTS.slice(0, isMobile ? 4 : 6), [isMobile]);
+	const selectedPoint = useMemo(() => availableVitalPoints.find((p) => p.id === selectedVitalPoint), [availableVitalPoints, selectedVitalPoint]);
+	const selectedVitalPointGlow = React.useMemo(() => getNeonGlowEffect(KOREAN_COLORS.ACCENT_GOLD, "strong", true), []);
+	const panelWidth = isMobile ? 200 : 240;
+	const padding = getResponsiveSpacing("sm", isMobile);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			...getEnhancedKoreanOverlayStyles({
+				opacity: .88,
+				glowIntensity: "medium",
+				includeGradient: false,
+				includeBackdropBlur: true,
+				depthLayers: 3
+			}),
+			width: `${panelWidth}px`,
+			padding: `${padding}px`,
+			border: `1px solid ${hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA, .7)}`
+		},
+		"data-testid": "vital-point-training-html",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: { marginBottom: `${SPACING.XS}px` },
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? "12px" : "13px",
+						fontWeight: "bold",
+						color: hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA),
+						textShadow: getNeonTextShadow(KOREAN_COLORS.SECONDARY_MAGENTA, "subtle")
+					},
+					children: formatBilingualText("급소 선택", "Vital Point", "pipe")
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: `${SPACING.SM}px`
+				},
+				children: availableVitalPoints.map((point) => {
+					const isSelected = point.id === selectedVitalPoint;
+					const severityColorRgba = hexToRgbaString(getSeverityColor(point.severity));
+					const glowEffect = isSelected ? selectedVitalPointGlow : void 0;
+					return /* @__PURE__ */ jsxs("button", {
+						onClick: () => onVitalPointSelect(point.id),
+						className: `vital-point-button ${isSelected ? "selected" : ""}`,
+						style: {
+							borderColor: isSelected ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD) : severityColorRgba,
+							fontFamily: FONT_FAMILY.KOREAN,
+							boxShadow: glowEffect,
+							transition: getSmoothTransition("all", "normal")
+						},
+						"data-testid": `vital-point-${point.id}`,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: isMobile ? "11px" : "12px",
+									fontWeight: "bold",
+									color: severityColorRgba
+								},
+								children: point.names.korean
+							}),
+							/* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: isMobile ? "9px" : "10px",
+									color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY)
+								},
+								children: point.names.english
+							}),
+							/* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: isMobile ? "8px" : "9px",
+									color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),
+									marginTop: `${SPACING.XS}px`
+								},
+								children: getDifficultyStars(point.targetingDifficulty ?? .5)
+							})
+						]
+					}, point.id);
+				})
+			}),
+			selectedPoint && /* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: `${SPACING.MD}px`,
+					paddingTop: `${SPACING.MD}px`,
+					borderTop: `1px solid ${hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, .2)}`
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? "11px" : "12px",
+						fontWeight: "bold",
+						color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),
+						marginBottom: `${SPACING.SM}px`,
+						fontFamily: FONT_FAMILY.KOREAN
+					},
+					children: formatBilingualText("선택된 급소", "Selected Point", "pipe")
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: isMobile ? "10px" : "11px",
+						color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+						lineHeight: "1.4",
+						fontFamily: FONT_FAMILY.KOREAN
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: { marginBottom: `${SPACING.XS}px` },
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									style: { color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD) },
+									children: [formatBilingualText("위치", "Location", "parentheses"), ":"]
+								}),
+								" ",
+								selectedPoint.category
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: { marginBottom: `${SPACING.XS}px` },
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									style: { color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD) },
+									children: [formatBilingualText("심각도", "Severity", "parentheses"), ":"]
+								}),
+								" ",
+								selectedPoint.severity
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: isMobile ? "9px" : "10px",
+								color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),
+								marginTop: `${SPACING.SM}px`
+							},
+							children: formatBilingualText(selectedPoint.description.korean, selectedPoint.description.english, "pipe")
+						})
+					]
+				})]
+			})
+		]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.selectedVitalPoint === nextProps.selectedVitalPoint && prevProps.isMobile === nextProps.isMobile && prevProps.onVitalPointSelect === nextProps.onVitalPointSelect;
+});
+VitalPointTrainingOverlayHtml.displayName = "VitalPointTrainingOverlayHtml";
+//#endregion
+export { VitalPointTrainingOverlayHtml as default };
+
+//# sourceMappingURL=VitalPointTrainingOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointTrainingOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/VitalPointTrainingOverlayHtml.tsx"],"sourcesContent":["/**\n * VitalPointTrainingOverlayHtml - Html overlay for vital point selection\n *\n * Provides vital point selection interface with consistent Korean martial arts theming.\n *\n * @module components/screens/training/components/VitalPointTrainingOverlayHtml\n * @category Training UI\n * @korean 급소훈련오버레이\n */\n\nimport React, { useMemo } from \"react\";\nimport { KOREAN_VITAL_POINTS } from \"../../../../systems/vitalpoint/KoreanVitalPoints\";\nimport { VitalPointSeverity } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { SPACING } from \"../../../../types/constants/ui\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport {\n  formatBilingualText,\n  getEnhancedKoreanOverlayStyles,\n  getResponsiveSpacing,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getNeonGlowEffect,\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\nimport \"../training.css\";\n\n/**\n * Props for VitalPointTrainingOverlayHtml component\n */\nexport interface VitalPointTrainingOverlayHtmlProps {\n  /** Currently selected vital point ID */\n  readonly selectedVitalPoint: string | null;\n  /** Callback when vital point is selected */\n  readonly onVitalPointSelect: (vitalPointId: string) => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * Get Korean color from severity\n * Maps vital point severity to KOREAN_COLORS constants\n *\n * @korean 심각도별색상\n */\nconst getSeverityColor = (severity: VitalPointSeverity): number => {\n  const colorMap: Record<VitalPointSeverity, number> = {\n    [VitalPointSeverity.MINOR]: KOREAN_COLORS.POSITIVE_GREEN,\n    [VitalPointSeverity.MODERATE]: KOREAN_COLORS.WARNING_ORANGE,\n    [VitalPointSeverity.MAJOR]: KOREAN_COLORS.ACCENT_GOLD,\n    [VitalPointSeverity.CRITICAL]: KOREAN_COLORS.ACCENT_RED,\n    [VitalPointSeverity.LETHAL]: KOREAN_COLORS.PRIMARY_RED,\n  };\n  return colorMap[severity] ?? KOREAN_COLORS.TEXT_TERTIARY;\n};\n\n/**\n * Get difficulty stars\n */\nconst getDifficultyStars = (difficulty: number): string => {\n  const stars = Math.ceil(difficulty * 5);\n  return \"★\".repeat(Math.min(stars, 5)) + \"☆\".repeat(5 - Math.min(stars, 5));\n};\n\n/**\n * VitalPointTrainingOverlayHtml Component\n * Html overlay for vital point selection and information\n */\nexport const VitalPointTrainingOverlayHtml =\n  React.memo<VitalPointTrainingOverlayHtmlProps>(\n    ({ selectedVitalPoint, onVitalPointSelect, isMobile }) => {\n      // Use first 6 vital points for training panel (compact)\n      const availableVitalPoints = useMemo(\n        () => KOREAN_VITAL_POINTS.slice(0, isMobile ? 4 : 6),\n        [isMobile],\n      );\n\n      const selectedPoint = useMemo(\n        () => availableVitalPoints.find((p) => p.id === selectedVitalPoint),\n        [availableVitalPoints, selectedVitalPoint],\n      );\n\n      // Memoize glow effect for selected vital points to avoid repeated calculations\n      const selectedVitalPointGlow = React.useMemo(\n        () => getNeonGlowEffect(KOREAN_COLORS.ACCENT_GOLD, \"strong\", true),\n        [],\n      );\n\n      const panelWidth = isMobile ? 200 : 240;\n      const padding = getResponsiveSpacing(\"sm\", isMobile);\n\n      // Compact panel styles\n      const panelStyle: React.CSSProperties = {\n        ...getEnhancedKoreanOverlayStyles({\n          opacity: 0.88,\n          glowIntensity: \"medium\",\n          includeGradient: false,\n          includeBackdropBlur: true,\n          depthLayers: 3,\n        }),\n        width: `${panelWidth}px`,\n        padding: `${padding}px`,\n        border: `1px solid ${hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA, 0.7)}`,\n      };\n\n      return (\n        <div style={panelStyle} data-testid=\"vital-point-training-html\">\n          {/* Compact header */}\n          <div style={{ marginBottom: `${SPACING.XS}px` }}>\n            <div\n              style={{\n                fontSize: isMobile ? \"12px\" : \"13px\",\n                fontWeight: \"bold\",\n                color: hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA),\n                textShadow: getNeonTextShadow(\n                  KOREAN_COLORS.SECONDARY_MAGENTA,\n                  \"subtle\",\n                ),\n              }}\n            >\n              {formatBilingualText(\"급소 선택\", \"Vital Point\", \"pipe\")}\n            </div>\n          </div>\n\n          {/* Vital Points List */}\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: `${SPACING.SM}px`,\n            }}\n          >\n            {availableVitalPoints.map((point) => {\n              const isSelected = point.id === selectedVitalPoint;\n              const severityColor = getSeverityColor(point.severity);\n              const severityColorRgba = hexToRgbaString(severityColor);\n\n              // Enhanced glow effect for selected vital points (memoized to avoid recalculation)\n              const glowEffect = isSelected\n                ? selectedVitalPointGlow\n                : undefined;\n\n              return (\n                <button\n                  key={point.id}\n                  onClick={() => onVitalPointSelect(point.id)}\n                  className={`vital-point-button ${isSelected ? \"selected\" : \"\"}`}\n                  style={{\n                    borderColor: isSelected\n                      ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)\n                      : severityColorRgba,\n                    fontFamily: FONT_FAMILY.KOREAN,\n                    boxShadow: glowEffect,\n                    transition: getSmoothTransition(\"all\", \"normal\"),\n                  }}\n                  data-testid={`vital-point-${point.id}`}\n                >\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"11px\" : \"12px\",\n                      fontWeight: \"bold\",\n                      color: severityColorRgba,\n                    }}\n                  >\n                    {point.names.korean}\n                  </div>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"9px\" : \"10px\",\n                      color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n                    }}\n                  >\n                    {point.names.english}\n                  </div>\n                  <div\n                    style={{\n                      fontSize: isMobile ? \"8px\" : \"9px\",\n                      color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n                      marginTop: `${SPACING.XS}px`,\n                    }}\n                  >\n                    {getDifficultyStars(point.targetingDifficulty ?? 0.5)}\n                  </div>\n                </button>\n              );\n            })}\n          </div>\n\n          {/* Selected Point Details */}\n          {selectedPoint && (\n            <div\n              style={{\n                marginTop: `${SPACING.MD}px`,\n                paddingTop: `${SPACING.MD}px`,\n                borderTop: `1px solid ${hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, 0.2)}`,\n              }}\n            >\n              <div\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"12px\",\n                  fontWeight: \"bold\",\n                  color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),\n                  marginBottom: `${SPACING.SM}px`,\n                  fontFamily: FONT_FAMILY.KOREAN,\n                }}\n              >\n                {formatBilingualText(\"선택된 급소\", \"Selected Point\", \"pipe\")}\n              </div>\n              <div\n                style={{\n                  fontSize: isMobile ? \"10px\" : \"11px\",\n                  color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                  lineHeight: \"1.4\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                }}\n              >\n                <div style={{ marginBottom: `${SPACING.XS}px` }}>\n                  <span\n                    style={{\n                      color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n                    }}\n                  >\n                    {formatBilingualText(\"위치\", \"Location\", \"parentheses\")}:\n                  </span>{\" \"}\n                  {selectedPoint.category}\n                </div>\n                <div style={{ marginBottom: `${SPACING.XS}px` }}>\n                  <span\n                    style={{\n                      color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n                    }}\n                  >\n                    {formatBilingualText(\"심각도\", \"Severity\", \"parentheses\")}:\n                  </span>{\" \"}\n                  {selectedPoint.severity}\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n                    marginTop: `${SPACING.SM}px`,\n                  }}\n                >\n                  {formatBilingualText(\n                    selectedPoint.description.korean,\n                    selectedPoint.description.english,\n                    \"pipe\",\n                  )}\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      );\n    },\n    (prevProps, nextProps) => {\n      // Re-render when vital point selection, mobile state, or callback changes\n      // Including callback prop prevents stale closures when parent provides\n      // a new function that captures updated state.\n      return (\n        prevProps.selectedVitalPoint === nextProps.selectedVitalPoint &&\n        prevProps.isMobile === nextProps.isMobile &&\n        prevProps.onVitalPointSelect === nextProps.onVitalPointSelect\n      );\n    },\n  );\n\nVitalPointTrainingOverlayHtml.displayName = \"VitalPointTrainingOverlayHtml\";\n\nexport default VitalPointTrainingOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/training/components/hud/TrainingBottomHUD.d.ts

@@ -0,0 +1,59 @@
+/**
+ * TrainingBottomHUD - Bottom bar for training screen
+ *
+ * Contains:
+ * - Technique Bar (centered)
+ * - Volume Control (bottom-right, compact)
+ * - Feedback Message (centered overlay)
+ * - Archetype Selector (mobile only - bottom-left)
+ *
+ * Gaming Layout Best Practice:
+ * - Width: 100% of screen
+ * - Height: Resolution-based ~11% of screen height (40-120px range)
+ * - On mobile, consolidates controls from TopHUD
+ *
+ * @korean 훈련화면 하단 바 - 기술 바, 음량, 피드백, 모바일 원형선택
+ */
+import React from "react";
+import { PlayerState } from "../../../../../systems";
+import { Technique } from "../../../../../types";
+import { PlayerArchetype } from "../../../../../types/common";
+export interface TrainingBottomHUDProps {
+    /** Screen width for layout calculations */
+    readonly width: number;
+    /** Screen height for layout calculations */
+    readonly height: number;
+    /** Whether mobile controls should be shown (NOT for sizing) */
+    readonly isMobile?: boolean;
+    /** Position scale multiplier for large displays */
+    readonly positionScale: number;
+    /** Available techniques for the technique bar */
+    readonly techniques: readonly Technique[];
+    /** Player state for technique availability checks */
+    readonly player: PlayerState;
+    /** Currently selected technique index */
+    readonly selectedIndex: number;
+    /** Active technique cooldowns */
+    readonly cooldowns: Map<string, number>;
+    /** Handler for technique selection */
+    readonly onTechniqueSelect: (index: number) => void;
+    /** Whether to show feedback message */
+    readonly showFeedback: boolean;
+    /** Feedback message to display */
+    readonly feedbackMessage: string;
+    /** Currently selected archetype (for mobile) */
+    readonly selectedArchetype?: PlayerArchetype;
+    /** Handler for archetype selection (for mobile) */
+    readonly onArchetypeSelect?: (archetype: PlayerArchetype) => void;
+    /** Handler for playing sound effects (for mobile) */
+    readonly onPlaySFX?: (sound: string) => void;
+}
+/**
+ * TrainingBottomHUD Component
+ *
+ * Compact bottom bar with centered technique bar, volume control,
+ * and archetype selector on mobile. Uses resolution-based sizing.
+ */
+export declare const TrainingBottomHUD: React.FC<TrainingBottomHUDProps>;
+export default TrainingBottomHUD;
+//# sourceMappingURL=TrainingBottomHUD.d.ts.map

package/lib/components/screens/training/components/hud/TrainingBottomHUD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingBottomHUD.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/training/components/hud/TrainingBottomHUD.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAe9D,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,mDAAmD;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,iDAAiD;IACjD,QAAQ,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;IAC1C,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,iCAAiC;IACjC,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,sCAAsC;IACtC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,uCAAuC;IACvC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,kCAAkC;IAClC,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,gDAAgD;IAChD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IAC7C,mDAAmD;IACnD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2I9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}