blacktrigram 0.7.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointOverlayControlsHtml.js","names":[],"sources":["../../../../../src/components/shared/three/ui/VitalPointOverlayControlsHtml.tsx"],"sourcesContent":["/**\n * VitalPointOverlayControlsHtml - UI controls for vital point visualization\n *\n * Provides comprehensive controls for the 70-point vital point overlay system:\n * - Toggle overlay visibility\n * - Filter by severity level\n * - Filter by body region\n * - Search vital points\n * - Adjust marker scale\n * - Toggle labels\n * - Toggle animations\n *\n * @module components/shared/three/ui/VitalPointOverlayControlsHtml\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport {\n  KOREAN_VITAL_POINTS,\n  getVitalPointsStats,\n} from \"../../../../systems/vitalpoint/KoreanVitalPoints\";\nimport { VitalPointSeverity } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport type { BodyRegionFilter } from \"../effects/VitalPointMarkers3D\";\n\nexport type { BodyRegionFilter } from \"../effects/VitalPointMarkers3D\";\n\n/**\n * Props for VitalPointOverlayControlsHtml component\n */\nexport interface VitalPointOverlayControlsProps {\n  /** Whether overlay is currently visible */\n  readonly visible: boolean;\n  /** Callback when visibility changes */\n  readonly onVisibleChange: (visible: boolean) => void;\n  /** Current severity filters */\n  readonly severityFilters: VitalPointSeverity[];\n  /** Callback when severity filters change */\n  readonly onSeverityFiltersChange: (filters: VitalPointSeverity[]) => void;\n  /** Current region filter */\n  readonly regionFilter: BodyRegionFilter;\n  /** Callback when region filter changes */\n  readonly onRegionFilterChange: (filter: BodyRegionFilter) => void;\n  /** Current search query */\n  readonly searchQuery?: string;\n  /** Callback when search query changes */\n  readonly onSearchQueryChange?: (query: string) => void;\n  /** Whether labels are shown */\n  readonly showLabels: boolean;\n  /** Callback when label visibility changes */\n  readonly onShowLabelsChange: (show: boolean) => void;\n  /** Whether animations are enabled */\n  readonly animated: boolean;\n  /** Callback when animation state changes */\n  readonly onAnimatedChange: (animated: boolean) => void;\n  /** Marker scale multiplier */\n  readonly scale: number;\n  /** Callback when scale changes */\n  readonly onScaleChange: (scale: number) => void;\n  /** Whether on mobile device */\n  readonly isMobile?: boolean;\n  /**\n   * Screen position for the control panel.\n   *\n   * All values must be valid CSS position values, such as `\"20px\"`, `\"10%\"`, `\"1rem\"`, or `\"auto\"`.\n   * These are applied directly to the `style` of the Html overlay container.\n   */\n  readonly screenPosition?: {\n    /** CSS `top` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    top?: string;\n    /** CSS `left` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    left?: string;\n    /** CSS `right` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    right?: string;\n    /** CSS `bottom` position (e.g., \"20px\", \"10%\", \"1rem\", \"auto\") */\n    bottom?: string;\n  };\n}\n\n/**\n * Convert numeric color to CSS hex string\n */\nconst colorToHex = (color: number): string => {\n  return `#${color.toString(16).padStart(6, \"0\")}`;\n};\n\n/**\n * Get color for severity level\n */\nconst getSeverityColor = (severity: VitalPointSeverity): string => {\n  switch (severity) {\n    case VitalPointSeverity.LETHAL:\n      return \"#ff0000\"; // Red\n    case VitalPointSeverity.CRITICAL:\n      return \"#ff6600\"; // Orange\n    case VitalPointSeverity.MAJOR:\n      return \"#ffaa00\"; // Gold\n    case VitalPointSeverity.MODERATE:\n      return \"#ffd700\"; // Yellow\n    case VitalPointSeverity.MINOR:\n      return \"#00ff88\"; // Green\n    default:\n      return \"#00ffff\"; // Cyan\n  }\n};\n\n/**\n * VitalPointOverlayControlsHtml Component\n * Provides comprehensive UI for vital point visualization control\n */\nexport const VitalPointOverlayControlsHtml: React.FC<\n  VitalPointOverlayControlsProps\n> = ({\n  visible,\n  onVisibleChange,\n  severityFilters,\n  onSeverityFiltersChange,\n  regionFilter,\n  onRegionFilterChange,\n  searchQuery: externalSearchQuery,\n  onSearchQueryChange,\n  showLabels,\n  onShowLabelsChange,\n  animated,\n  onAnimatedChange,\n  scale,\n  onScaleChange,\n  isMobile = false,\n  screenPosition,\n}) => {\n  const [expanded, setExpanded] = useState(false);\n\n  // Use internal state if no external control provided\n  const [internalSearchQuery, setInternalSearchQuery] = useState(\"\");\n  const searchQuery = externalSearchQuery ?? internalSearchQuery;\n  const setSearchQuery = onSearchQueryChange ?? setInternalSearchQuery;\n\n  // Get system statistics\n  const stats = useMemo(() => getVitalPointsStats(), []);\n\n  // Default screen position - left side, below player 1 status (accounting for stance indicator)\n  const defaultPosition: {\n    top?: string;\n    left?: string;\n    right?: string;\n    bottom?: string;\n  } = useMemo(\n    () => ({\n      top: isMobile ? \"180px\" : \"220px\",\n      left: isMobile ? \"10px\" : \"20px\",\n    }),\n    [isMobile]\n  );\n\n  const finalPosition = screenPosition ?? defaultPosition;\n\n  // Get filtered count\n  const filteredCount = useMemo(() => {\n    let points = [...KOREAN_VITAL_POINTS];\n\n    // Filter by severity\n    if (severityFilters.length > 0) {\n      points = points.filter((vp) => severityFilters.includes(vp.severity));\n    }\n\n    // Filter by region\n    if (regionFilter !== \"all\") {\n      if (regionFilter === \"arms\") {\n        // Match both left and right arm vital points\n        points = points.filter(\n          (vp) =>\n            vp.id.startsWith(\"arm_left_\") || vp.id.startsWith(\"arm_right_\")\n        );\n      } else if (regionFilter === \"legs\") {\n        // Match both left and right leg vital points\n        points = points.filter(\n          (vp) =>\n            vp.id.startsWith(\"leg_left_\") || vp.id.startsWith(\"leg_right_\")\n        );\n      } else {\n        // Simple prefix match for head_ or torso_\n        const prefix = `${regionFilter}_`;\n        points = points.filter((vp) => vp.id.startsWith(prefix));\n      }\n    }\n\n    // Filter by search query\n    if (searchQuery) {\n      const query = searchQuery.toLowerCase();\n      points = points.filter(\n        (vp) =>\n          vp.names.korean.toLowerCase().includes(query) ||\n          vp.names.english.toLowerCase().includes(query) ||\n          vp.names.romanized.toLowerCase().includes(query) ||\n          vp.id.toLowerCase().includes(query)\n      );\n    }\n\n    return points.length;\n  }, [severityFilters, regionFilter, searchQuery]);\n\n  // Toggle severity filter\n  const toggleSeverityFilter = useCallback(\n    (severity: VitalPointSeverity) => {\n      const newFilters = severityFilters.includes(severity)\n        ? severityFilters.filter((s) => s !== severity)\n        : [...severityFilters, severity];\n      onSeverityFiltersChange(newFilters);\n    },\n    [severityFilters, onSeverityFiltersChange]\n  );\n\n  // Severity options\n  const severityOptions: VitalPointSeverity[] = [\n    VitalPointSeverity.LETHAL,\n    VitalPointSeverity.CRITICAL,\n    VitalPointSeverity.MAJOR,\n    VitalPointSeverity.MODERATE,\n    VitalPointSeverity.MINOR,\n  ];\n\n  // Region options\n  const regionOptions: {\n    value: BodyRegionFilter;\n    label: string;\n    korean: string;\n  }[] = [\n    { value: \"all\", label: \"All Regions\", korean: \"전체\" },\n    { value: \"head\", label: \"Head\", korean: \"머리\" },\n    { value: \"torso\", label: \"Torso\", korean: \"몸통\" },\n    { value: \"arms\", label: \"Arms\", korean: \"팔\" },\n    { value: \"legs\", label: \"Legs\", korean: \"다리\" },\n  ];\n\n  // Panel styles\n  const panelWidth = isMobile ? 280 : 350;\n  const buttonHeight = isMobile ? 32 : 36;\n  const fontSize = isMobile ? 11 : 13;\n  const smallFontSize = isMobile ? 9 : 10;\n\n  return (\n    <Html fullscreen style={{ pointerEvents: \"none\" }}>\n      <div\n        style={{\n          position: \"absolute\",\n          top: finalPosition.top,\n          left: finalPosition.left,\n          right: finalPosition.right,\n          bottom: finalPosition.bottom,\n          width: panelWidth,\n          background: `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}f0`,\n          border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          borderRadius: \"12px\",\n          padding: isMobile ? \"12px\" : \"16px\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          color: \"#ffffff\",\n          boxShadow: `0 0 30px ${colorToHex(\n            KOREAN_COLORS.PRIMARY_CYAN\n          )}40, inset 0 0 20px ${colorToHex(\n            KOREAN_COLORS.UI_BACKGROUND_DARK\n          )}80`,\n          transition: \"all 0.3s ease\",\n          pointerEvents: \"all\",\n          zIndex: 200,\n        }}\n        data-testid=\"vital-point-overlay-controls\"\n      >\n        {/* Header with toggle */}\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"center\",\n            marginBottom: \"12px\",\n            paddingBottom: \"12px\",\n            borderBottom: `1px solid ${colorToHex(\n              KOREAN_COLORS.PRIMARY_CYAN\n            )}40`,\n            background: `linear-gradient(90deg, ${colorToHex(\n              KOREAN_COLORS.UI_BACKGROUND_DARK\n            )}00 0%, ${colorToHex(\n              KOREAN_COLORS.PRIMARY_CYAN\n            )}10 50%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)}00 100%)`,\n          }}\n        >\n          <div>\n            <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: \"bold\" }}>\n              급소 오버레이 | Vital Points\n            </div>\n            <div\n              style={{\n                fontSize: smallFontSize,\n                color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),\n                marginTop: \"2px\",\n              }}\n            >\n              {filteredCount} / {stats.total} 표시 | Showing\n            </div>\n          </div>\n          <button\n            onClick={() => setExpanded(!expanded)}\n            style={{\n              background: `linear-gradient(135deg, ${colorToHex(\n                KOREAN_COLORS.UI_BACKGROUND_MEDIUM\n              )} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,\n              border: `2px solid ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n              borderRadius: \"6px\",\n              padding: \"8px 14px\",\n              color: \"#ffffff\",\n              fontSize,\n              cursor: \"pointer\",\n              transition: \"all 0.2s ease\",\n              boxShadow: `0 2px 8px ${colorToHex(\n                KOREAN_COLORS.PRIMARY_CYAN\n              )}30`,\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.transform = \"scale(1.05)\";\n              e.currentTarget.style.boxShadow = `0 4px 12px ${colorToHex(\n                KOREAN_COLORS.PRIMARY_CYAN\n              )}50`;\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.transform = \"scale(1)\";\n              e.currentTarget.style.boxShadow = `0 2px 8px ${colorToHex(\n                KOREAN_COLORS.PRIMARY_CYAN\n              )}30`;\n            }}\n            data-testid=\"toggle-expand-button\"\n          >\n            {expanded ? \"▼\" : \"▶\"}\n          </button>\n        </div>\n\n        {/* Main toggle */}\n        <div style={{ marginBottom: \"14px\" }}>\n          <button\n            onClick={() => onVisibleChange(!visible)}\n            style={{\n              width: \"100%\",\n              height: buttonHeight,\n              background: visible\n                ? `linear-gradient(135deg, ${colorToHex(\n                    KOREAN_COLORS.ACCENT_GOLD\n                  )} 0%, ${colorToHex(KOREAN_COLORS.SECONDARY_YELLOW)} 100%)`\n                : `linear-gradient(135deg, ${colorToHex(\n                    KOREAN_COLORS.UI_BACKGROUND_MEDIUM\n                  )} 0%, ${colorToHex(KOREAN_COLORS.UI_BACKGROUND_DARK)} 100%)`,\n              border: `2px solid ${\n                visible\n                  ? colorToHex(KOREAN_COLORS.ACCENT_GOLD)\n                  : colorToHex(KOREAN_COLORS.PRIMARY_CYAN)\n              }`,\n              borderRadius: \"8px\",\n              color: visible ? \"#1a1a1a\" : \"#ffffff\",\n              fontSize: isMobile ? 13 : 15,\n              fontWeight: \"bold\",\n              cursor: \"pointer\",\n              transition: \"all 0.3s ease\",\n              boxShadow: visible\n                ? `0 4px 16px ${colorToHex(\n                    KOREAN_COLORS.ACCENT_GOLD\n                  )}60, inset 0 2px 4px rgba(255,255,255,0.2)`\n                : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`,\n              textTransform: \"uppercase\",\n              letterSpacing: \"0.5px\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.transform = \"translateY(-2px)\";\n              e.currentTarget.style.boxShadow = visible\n                ? `0 6px 20px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}80`\n                : `0 4px 12px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}50`;\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.transform = \"translateY(0)\";\n              e.currentTarget.style.boxShadow = visible\n                ? `0 4px 16px ${colorToHex(KOREAN_COLORS.ACCENT_GOLD)}60`\n                : `0 2px 8px ${colorToHex(KOREAN_COLORS.PRIMARY_CYAN)}30`;\n            }}\n            data-testid=\"toggle-visibility-button\"\n          >\n            {visible ? \"✓ 활성화 | Enabled\" : \"비활성화 | Disabled\"}\n          </button>\n        </div>\n\n        {/* Expanded controls */}\n        {expanded && visible && (\n          <>\n            {/* Severity filters */}\n            <div style={{ marginBottom: \"14px\" }}>\n              <div\n                style={{\n                  fontSize,\n                  marginBottom: \"8px\",\n                  color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                  fontWeight: \"600\",\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"1px\",\n                }}\n              >\n                심각도 필터 | Severity Filter\n              </div>\n              <div\n                style={{\n                  display: \"flex\",\n                  flexWrap: \"wrap\",\n                  gap: \"8px\",\n                }}\n              >\n                {severityOptions.map((severity) => {\n                  const isActive = severityFilters.includes(severity);\n                  const severityColor = getSeverityColor(severity);\n                  return (\n                    <button\n                      key={severity}\n                      onClick={() => toggleSeverityFilter(severity)}\n                      style={{\n                        background: isActive\n                          ? `linear-gradient(135deg, ${severityColor} 0%, ${severityColor}cc 100%)`\n                          : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,\n                        border: `2px solid ${severityColor}`,\n                        borderRadius: \"6px\",\n                        padding: \"6px 12px\",\n                        color: \"#ffffff\",\n                        fontSize: smallFontSize,\n                        cursor: \"pointer\",\n                        opacity: isActive ? 1 : 0.6,\n                        transition: \"all 0.2s ease\",\n                        fontWeight: isActive ? \"bold\" : \"normal\",\n                        boxShadow: isActive\n                          ? `0 2px 8px ${severityColor}50`\n                          : \"none\",\n                      }}\n                      onMouseEnter={(e) => {\n                        e.currentTarget.style.opacity = \"1\";\n                        e.currentTarget.style.transform = \"scale(1.05)\";\n                      }}\n                      onMouseLeave={(e) => {\n                        e.currentTarget.style.opacity = isActive ? \"1\" : \"0.6\";\n                        e.currentTarget.style.transform = \"scale(1)\";\n                      }}\n                      data-testid={`severity-filter-${severity}`}\n                    >\n                      {severity}\n                    </button>\n                  );\n                })}\n              </div>\n            </div>\n\n            {/* Region filter */}\n            <div style={{ marginBottom: \"14px\" }}>\n              <div\n                style={{\n                  fontSize,\n                  marginBottom: \"8px\",\n                  color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                  fontWeight: \"600\",\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"1px\",\n                }}\n              >\n                부위 필터 | Region Filter\n              </div>\n              <div\n                style={{\n                  display: \"flex\",\n                  flexWrap: \"wrap\",\n                  gap: \"8px\",\n                }}\n              >\n                {regionOptions.map((option) => {\n                  const isActive = regionFilter === option.value;\n                  return (\n                    <button\n                      key={option.value}\n                      onClick={() => onRegionFilterChange(option.value)}\n                      style={{\n                        background: isActive\n                          ? `linear-gradient(135deg, ${colorToHex(\n                              KOREAN_COLORS.PRIMARY_CYAN\n                            )} 0%, ${colorToHex(\n                              KOREAN_COLORS.ACCENT_BLUE\n                            )} 100%)`\n                          : `${colorToHex(KOREAN_COLORS.UI_BACKGROUND_MEDIUM)}`,\n                        border: `2px solid ${colorToHex(\n                          KOREAN_COLORS.PRIMARY_CYAN\n                        )}`,\n                        borderRadius: \"6px\",\n                        padding: \"6px 12px\",\n                        color: \"#ffffff\",\n                        fontSize: smallFontSize,\n                        cursor: \"pointer\",\n                        opacity: isActive ? 1 : 0.6,\n                        transition: \"all 0.2s ease\",\n                        fontWeight: isActive ? \"bold\" : \"normal\",\n                        boxShadow: isActive\n                          ? `0 2px 8px ${colorToHex(\n                              KOREAN_COLORS.PRIMARY_CYAN\n                            )}50`\n                          : \"none\",\n                      }}\n                      onMouseEnter={(e) => {\n                        e.currentTarget.style.opacity = \"1\";\n                        e.currentTarget.style.transform = \"scale(1.05)\";\n                      }}\n                      onMouseLeave={(e) => {\n                        e.currentTarget.style.opacity = isActive ? \"1\" : \"0.6\";\n                        e.currentTarget.style.transform = \"scale(1)\";\n                      }}\n                      data-testid={`region-filter-${option.value}`}\n                    >\n                      {option.korean} | {option.label}\n                    </button>\n                  );\n                })}\n              </div>\n            </div>\n\n            {/* Search box with clear button */}\n            <div style={{ marginBottom: \"14px\" }}>\n              <div\n                style={{\n                  fontSize,\n                  marginBottom: \"8px\",\n                  color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                  fontWeight: \"600\",\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"1px\",\n                }}\n              >\n                검색 | Search\n              </div>\n              <div style={{ position: \"relative\" }}>\n                <input\n                  type=\"text\"\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  placeholder=\"급소 이름... | Point name...\"\n                  style={{\n                    width: \"100%\",\n                    height: buttonHeight,\n                    background: `${colorToHex(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM\n                    )}`,\n                    border: `2px solid ${colorToHex(\n                      KOREAN_COLORS.PRIMARY_CYAN\n                    )}40`,\n                    borderRadius: \"8px\",\n                    padding: \"0 40px 0 14px\", // Add right padding for clear button\n                    color: \"#ffffff\",\n                    fontSize,\n                    fontFamily: FONT_FAMILY.KOREAN,\n                    transition: \"all 0.2s ease\",\n                    outline: \"none\",\n                  }}\n                  onFocus={(e) => {\n                    e.currentTarget.style.borderColor = colorToHex(\n                      KOREAN_COLORS.PRIMARY_CYAN\n                    );\n                    e.currentTarget.style.boxShadow = `0 0 12px ${colorToHex(\n                      KOREAN_COLORS.PRIMARY_CYAN\n                    )}40`;\n                  }}\n                  onBlur={(e) => {\n                    e.currentTarget.style.borderColor = `${colorToHex(\n                      KOREAN_COLORS.PRIMARY_CYAN\n                    )}40`;\n                    e.currentTarget.style.boxShadow = \"none\";\n                  }}\n                  data-testid=\"search-input\"\n                />\n                {/* Clear button */}\n                {searchQuery && (\n                  <button\n                    onClick={() => setSearchQuery(\"\")}\n                    style={{\n                      position: \"absolute\",\n                      right: \"8px\",\n                      top: \"50%\",\n                      transform: \"translateY(-50%)\",\n                      background: \"transparent\",\n                      border: \"none\",\n                      color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),\n                      cursor: \"pointer\",\n                      fontSize: \"16px\",\n                      padding: \"4px\",\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"center\",\n                      borderRadius: \"4px\",\n                      transition: \"all 0.2s ease\",\n                    }}\n                    onMouseEnter={(e) => {\n                      e.currentTarget.style.color = colorToHex(\n                        KOREAN_COLORS.ACCENT_RED\n                      );\n                      e.currentTarget.style.background = `${colorToHex(\n                        KOREAN_COLORS.UI_BACKGROUND_MEDIUM\n                      )}`;\n                    }}\n                    onMouseLeave={(e) => {\n                      e.currentTarget.style.color = colorToHex(\n                        KOREAN_COLORS.TEXT_SECONDARY\n                      );\n                      e.currentTarget.style.background = \"transparent\";\n                    }}\n                    data-testid=\"search-clear-button\"\n                    title=\"Clear search\"\n                  >\n                    ✕\n                  </button>\n                )}\n              </div>\n            </div>\n\n            {/* Display options */}\n            <div style={{ marginBottom: \"14px\" }}>\n              <div\n                style={{\n                  fontSize,\n                  marginBottom: \"8px\",\n                  color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                  fontWeight: \"600\",\n                  textTransform: \"uppercase\",\n                  letterSpacing: \"1px\",\n                }}\n              >\n                표시 옵션 | Display Options\n              </div>\n              <div\n                style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}\n              >\n                <label\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: \"8px\",\n                    cursor: \"pointer\",\n                  }}\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={showLabels}\n                    onChange={(e) => onShowLabelsChange(e.target.checked)}\n                    style={{\n                      width: \"16px\",\n                      height: \"16px\",\n                      accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN),\n                    }}\n                    data-testid=\"show-labels-checkbox\"\n                  />\n                  <span style={{ fontSize }}>라벨 표시 | Show Labels</span>\n                </label>\n                <label\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: \"8px\",\n                    cursor: \"pointer\",\n                  }}\n                >\n                  <input\n                    type=\"checkbox\"\n                    checked={animated}\n                    onChange={(e) => onAnimatedChange(e.target.checked)}\n                    style={{\n                      width: \"16px\",\n                      height: \"16px\",\n                      accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN),\n                    }}\n                    data-testid=\"animated-checkbox\"\n                  />\n                  <span style={{ fontSize }}>애니메이션 | Animations</span>\n                </label>\n              </div>\n            </div>\n\n            {/* Reset filters button */}\n            {(severityFilters.length > 0 ||\n              regionFilter !== \"all\" ||\n              searchQuery !== \"\") && (\n              <div style={{ marginBottom: \"14px\" }}>\n                <button\n                  onClick={() => {\n                    onSeverityFiltersChange([]);\n                    onRegionFilterChange(\"all\");\n                    setSearchQuery(\"\");\n                  }}\n                  style={{\n                    width: \"100%\",\n                    height: buttonHeight - 4,\n                    background: `${colorToHex(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM\n                    )}`,\n                    border: `2px solid ${colorToHex(\n                      KOREAN_COLORS.ACCENT_ORANGE\n                    )}`,\n                    borderRadius: \"6px\",\n                    color: colorToHex(KOREAN_COLORS.ACCENT_ORANGE),\n                    fontSize: smallFontSize,\n                    cursor: \"pointer\",\n                    transition: \"all 0.2s ease\",\n                    fontWeight: \"bold\",\n                  }}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.background = `${colorToHex(\n                      KOREAN_COLORS.ACCENT_ORANGE\n                    )}20`;\n                    e.currentTarget.style.transform = \"translateY(-1px)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.background = `${colorToHex(\n                      KOREAN_COLORS.UI_BACKGROUND_MEDIUM\n                    )}`;\n                    e.currentTarget.style.transform = \"translateY(0)\";\n                  }}\n                  data-testid=\"reset-filters-button\"\n                >\n                  🔄 필터 초기화 | Reset Filters\n                </button>\n              </div>\n            )}\n\n            {/* Scale slider */}\n            <div>\n              <div\n                style={{\n                  fontSize,\n                  marginBottom: \"6px\",\n                  color: colorToHex(KOREAN_COLORS.ACCENT_CYAN),\n                }}\n              >\n                크기 | Scale: {scale.toFixed(1)}x\n              </div>\n              <input\n                type=\"range\"\n                min=\"0.5\"\n                max=\"2.0\"\n                step=\"0.1\"\n                value={scale}\n                onChange={(e) => onScaleChange(parseFloat(e.target.value))}\n                style={{\n                  width: \"100%\",\n                  accentColor: colorToHex(KOREAN_COLORS.PRIMARY_CYAN),\n                }}\n                data-testid=\"scale-slider\"\n              />\n            </div>\n\n            {/* Statistics */}\n            <div\n              style={{\n                marginTop: \"12px\",\n                paddingTop: \"12px\",\n                borderTop: `1px solid ${colorToHex(\n                  KOREAN_COLORS.PRIMARY_CYAN\n                )}44`,\n                fontSize: smallFontSize,\n                color: colorToHex(KOREAN_COLORS.TEXT_SECONDARY),\n              }}\n            >\n              <div>\n                머리: {stats.byRegion.head} | 몸통: {stats.byRegion.torso}\n              </div>\n              <div>\n                팔: {stats.byRegion.arms} | 다리: {stats.byRegion.legs}\n              </div>\n            </div>\n          </>\n        )}\n      </div>\n    </Html>\n  );\n};\n\nexport default VitalPointOverlayControlsHtml;\n"],"mappings":"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"}

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

@@ -0,0 +1,63 @@
+/**
+ * VulnerabilityWindowHUD - Timing indicator for counter-attack opportunities
+ *
+ * **Korean**: 취약성 타이밍 표시기 (Chwiyakseong Timing Pyosigi)
+ *
+ * Displays a bilingual timing indicator when the opponent is vulnerable,
+ * showing the remaining window duration for executing counter-attacks.
+ *
+ * Features:
+ * - Korean-English bilingual text ("반격 기회" / "Counter Opportunity")
+ * - Circular progress timer showing remaining window
+ * - Only visible during vulnerability windows (300-400ms)
+ * - Gold accent with Korean cyberpunk aesthetic
+ * - Mobile and desktop optimized layouts
+ *
+ * @module components/shared/three/ui/VulnerabilityWindowHUD
+ * @category Combat UI
+ * @korean 취약성창표시기
+ */
+import React from "react";
+import type { CounterOpportunity } from "../../../../types/physics";
+/**
+ * Props for VulnerabilityWindowHUD component
+ */
+export interface VulnerabilityWindowHUDProps {
+    /** Counter-attack opportunity with timing data */
+    readonly opportunity: CounterOpportunity | undefined;
+    /** Current time in technique execution (ms) */
+    readonly currentTime: number;
+    /** Whether to use mobile-optimized layout */
+    readonly isMobile?: boolean;
+    /** Test ID for component testing */
+    readonly "data-testid"?: string;
+}
+/**
+ * VulnerabilityWindowHUD Component
+ *
+ * Displays a timing indicator at the top-center of the screen during
+ * vulnerability windows, showing the player when to execute counter-attacks.
+ *
+ * Layout:
+ * - Mobile: Compact design, smaller text, 60px circle
+ * - Desktop: Full size, larger text, 80px circle
+ *
+ * Performance:
+ * - Uses GPU-accelerated transforms
+ * - Memoized calculations
+ * - Updates only during active windows
+ * - Minimal DOM updates
+ *
+ * @example
+ * ```tsx
+ * <VulnerabilityWindowHUD
+ *   opportunity={counterOpportunity}
+ *   currentTime={450}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const VulnerabilityWindowHUD: React.FC<VulnerabilityWindowHUDProps>;
+declare const _default: React.NamedExoticComponent<VulnerabilityWindowHUDProps>;
+export default _default;
+//# sourceMappingURL=VulnerabilityWindowHUD.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VulnerabilityWindowHUD.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/VulnerabilityWindowHUD.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAIpE;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,kDAAkD;IAClD,QAAQ,CAAC,WAAW,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACrD,+CAA+C;IAC/C,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACjC;AA6ID;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAC3C,2BAA2B,CAkM5B,CAAC;;AAMF,wBAWE"}

package/lib/components/shared/ui/BackButton.d.ts

@@ -0,0 +1,82 @@
+/**
+ * BackButton - Shared back/return button for screens
+ *
+ * Provides a consistent bilingual button for returning to menu or previous screen.
+ * Uses BaseButtonOverlayHtml for consistency and maintainability.
+ *
+ * @module components/shared/ui
+ * @category UI Components
+ * @korean 뒤로가기버튼
+ */
+import React from "react";
+export interface BackButtonProps {
+    /** Callback when button is clicked */
+    readonly onClick: () => void;
+    /** Korean text for the button */
+    readonly korean?: string;
+    /** English text for the button */
+    readonly english?: string;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+    /** Test ID for the button */
+    readonly testId?: string;
+}
+/**
+ * BackButton Component
+ *
+ * Reusable bilingual back/return button using BaseButtonOverlayHtml.
+ * Provides consistent Korean theming and responsive sizing.
+ *
+ * Refactored to use BaseButtonOverlayHtml for better consistency.
+ *
+ * @example
+ * ```tsx
+ * <BackButton
+ *   onClick={() => navigate('/menu')}
+ *   korean="돌아가기"
+ *   english="Return"
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const BackButton: React.FC<BackButtonProps>;
+export interface LinkButtonProps {
+    /** Callback when button is clicked */
+    readonly onClick: () => void;
+    /** Korean text for the button */
+    readonly korean: string;
+    /** English text for the button */
+    readonly english: string;
+    /** Icon/emoji to display */
+    readonly icon?: string;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+    /** Test ID for the button */
+    readonly testId?: string;
+}
+/**
+ * LinkButton Component
+ *
+ * Secondary action button using BaseButtonOverlayHtml with secondary variant.
+ * Used for links and secondary actions like ISMS policy links.
+ *
+ * Refactored to use BaseButtonOverlayHtml for better consistency.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton
+ *   onClick={() => window.open(url)}
+ *   korean="보안 정책"
+ *   english="Security Policy"
+ *   icon="🔐"
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const LinkButton: React.FC<LinkButtonProps>;
+declare const _default: {
+    BackButton: React.FC<BackButtonProps>;
+    LinkButton: React.FC<LinkButtonProps>;
+};
+export default _default;
+//# sourceMappingURL=BackButton.d.ts.map

package/lib/components/shared/ui/BackButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/BackButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkBhD,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqBhD,CAAC;;;;;AAEF,wBAA0C"}

package/lib/components/shared/ui/BackButton.js

@@ -0,0 +1,67 @@
+import { BaseButtonOverlayHtml } from "../base/BaseButtonOverlayHtml.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shared/ui/BackButton.tsx
+/**
+* BackButton Component
+* 
+* Reusable bilingual back/return button using BaseButtonOverlayHtml.
+* Provides consistent Korean theming and responsive sizing.
+* 
+* Refactored to use BaseButtonOverlayHtml for better consistency.
+* 
+* @example
+* ```tsx
+* <BackButton
+*   onClick={() => navigate('/menu')}
+*   korean="돌아가기"
+*   english="Return"
+*   isMobile={false}
+* />
+* ```
+*/
+var BackButton = ({ onClick, korean = "돌아가기", english = "Return", isMobile, testId = "back-button" }) => {
+	return /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+		korean,
+		english,
+		onClick,
+		variant: "primary",
+		size: "md",
+		isMobile,
+		testId
+	});
+};
+/**
+* LinkButton Component
+* 
+* Secondary action button using BaseButtonOverlayHtml with secondary variant.
+* Used for links and secondary actions like ISMS policy links.
+* 
+* Refactored to use BaseButtonOverlayHtml for better consistency.
+* 
+* @example
+* ```tsx
+* <LinkButton
+*   onClick={() => window.open(url)}
+*   korean="보안 정책"
+*   english="Security Policy"
+*   icon="🔐"
+*   isMobile={false}
+* />
+* ```
+*/
+var LinkButton = ({ onClick, korean, english, icon, isMobile, testId = "link-button" }) => {
+	return /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+		korean: icon ? `${icon} ${korean}` : korean,
+		english,
+		onClick,
+		variant: "secondary",
+		size: "sm",
+		isMobile,
+		testId
+	});
+};
+//#endregion
+export { BackButton, LinkButton };
+
+//# sourceMappingURL=BackButton.js.map

package/lib/components/shared/ui/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/shared/ui/BackButton.tsx"],"sourcesContent":["/**\n * BackButton - Shared back/return button for screens\n * \n * Provides a consistent bilingual button for returning to menu or previous screen.\n * Uses BaseButtonOverlayHtml for consistency and maintainability.\n * \n * @module components/shared/ui\n * @category UI Components\n * @korean 뒤로가기버튼\n */\n\nimport React from \"react\";\nimport { BaseButtonOverlayHtml } from \"../../shared/base/BaseButtonOverlayHtml\";\n\nexport interface BackButtonProps {\n  /** Callback when button is clicked */\n  readonly onClick: () => void;\n  /** Korean text for the button */\n  readonly korean?: string;\n  /** English text for the button */\n  readonly english?: string;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n  /** Test ID for the button */\n  readonly testId?: string;\n}\n\n/**\n * BackButton Component\n * \n * Reusable bilingual back/return button using BaseButtonOverlayHtml.\n * Provides consistent Korean theming and responsive sizing.\n * \n * Refactored to use BaseButtonOverlayHtml for better consistency.\n * \n * @example\n * ```tsx\n * <BackButton\n *   onClick={() => navigate('/menu')}\n *   korean=\"돌아가기\"\n *   english=\"Return\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const BackButton: React.FC<BackButtonProps> = ({\n  onClick,\n  korean = \"돌아가기\",\n  english = \"Return\",\n  isMobile,\n  testId = \"back-button\",\n}) => {\n  return (\n    <BaseButtonOverlayHtml\n      korean={korean}\n      english={english}\n      onClick={onClick}\n      variant=\"primary\"\n      size=\"md\"\n      isMobile={isMobile}\n      testId={testId}\n    />\n  );\n};\n\nexport interface LinkButtonProps {\n  /** Callback when button is clicked */\n  readonly onClick: () => void;\n  /** Korean text for the button */\n  readonly korean: string;\n  /** English text for the button */\n  readonly english: string;\n  /** Icon/emoji to display */\n  readonly icon?: string;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n  /** Test ID for the button */\n  readonly testId?: string;\n}\n\n/**\n * LinkButton Component\n * \n * Secondary action button using BaseButtonOverlayHtml with secondary variant.\n * Used for links and secondary actions like ISMS policy links.\n * \n * Refactored to use BaseButtonOverlayHtml for better consistency.\n * \n * @example\n * ```tsx\n * <LinkButton\n *   onClick={() => window.open(url)}\n *   korean=\"보안 정책\"\n *   english=\"Security Policy\"\n *   icon=\"🔐\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const LinkButton: React.FC<LinkButtonProps> = ({\n  onClick,\n  korean,\n  english,\n  icon,\n  isMobile,\n  testId = \"link-button\",\n}) => {\n  const labelKorean = icon ? `${icon} ${korean}` : korean;\n  \n  return (\n    <BaseButtonOverlayHtml\n      korean={labelKorean}\n      english={english}\n      onClick={onClick}\n      variant=\"secondary\"\n      size=\"sm\"\n      isMobile={isMobile}\n      testId={testId}\n    />\n  );\n};\n\nexport default { BackButton, LinkButton };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,cAAyC,EACpD,SACA,SAAS,QACT,UAAU,UACV,UACA,SAAS,oBACL;AACJ,QACE,oBAAC,uBAAD;EACU;EACC;EACA;EACT,SAAQ;EACR,MAAK;EACK;EACF;EACR,CAAA;;;;;;;;;;;;;;;;;;;;;AAsCN,IAAa,cAAyC,EACpD,SACA,QACA,SACA,MACA,UACA,SAAS,oBACL;AAGJ,QACE,oBAAC,uBAAD;EACE,QAJgB,OAAO,GAAG,KAAK,GAAG,WAAW;EAKpC;EACA;EACT,SAAQ;EACR,MAAK;EACK;EACF;EACR,CAAA"}

package/lib/components/shared/ui/BaseHUDContainer.d.ts

@@ -0,0 +1,71 @@
+/**
+ * BaseHUDContainer - Reusable HUD container with common patterns
+ *
+ * Provides consistent container styling and positioning for all HUD components.
+ * Eliminates code duplication across Training and Combat HUDs.
+ *
+ * Features:
+ * - Responsive positioning based on HUD position (left, right, top, bottom)
+ * - Korean cyberpunk theming with gradients and borders
+ * - Pointer events handling
+ * - Backdrop blur effects
+ *
+ * @module components/shared/ui
+ * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너
+ */
+import React from "react";
+/**
+ * HUD position type
+ */
+export type HUDPosition = "left" | "right" | "top" | "bottom";
+/**
+ * Props for BaseHUDContainer component
+ */
+export interface BaseHUDContainerProps {
+    /** Position of the HUD (left, right, top, bottom) */
+    readonly position: HUDPosition;
+    /** Width in pixels (used for left/right positions; top/bottom use 100% width) */
+    readonly width: number;
+    /** Height in pixels */
+    readonly height: number;
+    /** Top offset in pixels (for left/right HUDs) */
+    readonly topOffset?: number;
+    /** Internal padding in pixels */
+    readonly padding?: number;
+    /** Gap between sections in pixels */
+    readonly gap?: number;
+    /** Z-index for layering */
+    readonly zIndex?: number;
+    /** Additional CSS styles */
+    readonly style?: React.CSSProperties;
+    /** Child elements */
+    readonly children: React.ReactNode;
+    /** Test ID for testing */
+    readonly dataTestId?: string;
+}
+/**
+ * BaseHUDContainer Component
+ *
+ * Reusable container for HUD elements with consistent styling and positioning.
+ * Handles left, right, top, and bottom positions with appropriate borders,
+ * gradients, and responsive behavior.
+ *
+ * @example
+ * ```tsx
+ * <BaseHUDContainer
+ *   position="left"
+ *   width={268}
+ *   height={940}
+ *   topOffset={70}
+ *   padding={12}
+ *   gap={14}
+ *   dataTestId="combat-left-hud"
+ * >
+ *   <PlayerHUD player={player} />
+ *   <SpeedIndicator speed={speed} />
+ * </BaseHUDContainer>
+ * ```
+ */
+export declare const BaseHUDContainer: React.FC<BaseHUDContainerProps>;
+export default BaseHUDContainer;
+//# sourceMappingURL=BaseHUDContainer.d.ts.map

package/lib/components/shared/ui/BaseHUDContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseHUDContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/BaseHUDContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,uBAAuB;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,qBAAqB;IACrB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,0BAA0B;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwF5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/shared/ui/BaseHUDContainer.js

@@ -0,0 +1,126 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shared/ui/BaseHUDContainer.tsx
+/**
+* BaseHUDContainer - Reusable HUD container with common patterns
+*
+* Provides consistent container styling and positioning for all HUD components.
+* Eliminates code duplication across Training and Combat HUDs.
+*
+* Features:
+* - Responsive positioning based on HUD position (left, right, top, bottom)
+* - Korean cyberpunk theming with gradients and borders
+* - Pointer events handling
+* - Backdrop blur effects
+*
+* @module components/shared/ui
+* @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너
+*/
+/**
+* BaseHUDContainer Component
+*
+* Reusable container for HUD elements with consistent styling and positioning.
+* Handles left, right, top, and bottom positions with appropriate borders,
+* gradients, and responsive behavior.
+*
+* @example
+* ```tsx
+* <BaseHUDContainer
+*   position="left"
+*   width={268}
+*   height={940}
+*   topOffset={70}
+*   padding={12}
+*   gap={14}
+*   dataTestId="combat-left-hud"
+* >
+*   <PlayerHUD player={player} />
+*   <SpeedIndicator speed={speed} />
+* </BaseHUDContainer>
+* ```
+*/
+var BaseHUDContainer = ({ position, width, height, topOffset = 0, padding = 10, gap = 12, zIndex = Z_INDEX.HUD, style = {}, children, dataTestId }) => {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...React.useMemo(() => {
+				const baseStyle = {
+					position: "absolute",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "stretch",
+					pointerEvents: "none",
+					padding: `${padding}px`,
+					boxSizing: "border-box",
+					gap: `${gap}px`,
+					zIndex,
+					backdropFilter: "blur(8px)"
+				};
+				switch (position) {
+					case "left": return {
+						...baseStyle,
+						left: 0,
+						top: `${topOffset}px`,
+						width: `${width}px`,
+						height: `${height}px`,
+						justifyContent: "flex-start",
+						borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}`,
+						background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .4)} 100%)`
+					};
+					case "right": return {
+						...baseStyle,
+						right: 0,
+						top: `${topOffset}px`,
+						width: `${width}px`,
+						height: `${height}px`,
+						justifyContent: "flex-start",
+						borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}`,
+						background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .4)} 100%)`
+					};
+					case "top": return {
+						...baseStyle,
+						top: 0,
+						left: 0,
+						width: "100%",
+						height: `${height}px`,
+						flexDirection: "row",
+						justifyContent: "space-between",
+						alignItems: "center",
+						borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}`,
+						background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .7)} 100%)`
+					};
+					case "bottom": return {
+						...baseStyle,
+						bottom: 0,
+						left: 0,
+						width: "100%",
+						height: `${height}px`,
+						flexDirection: "row",
+						justifyContent: "space-between",
+						alignItems: "center",
+						borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}`,
+						background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .7)} 100%)`
+					};
+				}
+			}, [
+				position,
+				width,
+				height,
+				topOffset,
+				padding,
+				gap,
+				zIndex
+			]),
+			...style
+		},
+		"data-testid": dataTestId,
+		children
+	});
+};
+//#endregion
+export { BaseHUDContainer as default };
+
+//# sourceMappingURL=BaseHUDContainer.js.map

package/lib/components/shared/ui/BaseHUDContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseHUDContainer.js","names":[],"sources":["../../../../src/components/shared/ui/BaseHUDContainer.tsx"],"sourcesContent":["/**\n * BaseHUDContainer - Reusable HUD container with common patterns\n *\n * Provides consistent container styling and positioning for all HUD components.\n * Eliminates code duplication across Training and Combat HUDs.\n *\n * Features:\n * - Responsive positioning based on HUD position (left, right, top, bottom)\n * - Korean cyberpunk theming with gradients and borders\n * - Pointer events handling\n * - Backdrop blur effects\n *\n * @module components/shared/ui\n * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너\n */\n\nimport React from \"react\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * HUD position type\n */\nexport type HUDPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * Props for BaseHUDContainer component\n */\nexport interface BaseHUDContainerProps {\n  /** Position of the HUD (left, right, top, bottom) */\n  readonly position: HUDPosition;\n  /** Width in pixels (used for left/right positions; top/bottom use 100% width) */\n  readonly width: number;\n  /** Height in pixels */\n  readonly height: number;\n  /** Top offset in pixels (for left/right HUDs) */\n  readonly topOffset?: number;\n  /** Internal padding in pixels */\n  readonly padding?: number;\n  /** Gap between sections in pixels */\n  readonly gap?: number;\n  /** Z-index for layering */\n  readonly zIndex?: number;\n  /** Additional CSS styles */\n  readonly style?: React.CSSProperties;\n  /** Child elements */\n  readonly children: React.ReactNode;\n  /** Test ID for testing */\n  readonly dataTestId?: string;\n}\n\n/**\n * BaseHUDContainer Component\n *\n * Reusable container for HUD elements with consistent styling and positioning.\n * Handles left, right, top, and bottom positions with appropriate borders,\n * gradients, and responsive behavior.\n *\n * @example\n * ```tsx\n * <BaseHUDContainer\n *   position=\"left\"\n *   width={268}\n *   height={940}\n *   topOffset={70}\n *   padding={12}\n *   gap={14}\n *   dataTestId=\"combat-left-hud\"\n * >\n *   <PlayerHUD player={player} />\n *   <SpeedIndicator speed={speed} />\n * </BaseHUDContainer>\n * ```\n */\nexport const BaseHUDContainer: React.FC<BaseHUDContainerProps> = ({\n  position,\n  width,\n  height,\n  topOffset = 0,\n  padding = 10,\n  gap = 12,\n  zIndex = Z_INDEX.HUD,\n  style = {},\n  children,\n  dataTestId,\n}) => {\n  // Calculate position-specific styles\n  // Using KOREAN_COLORS directly for stable memoization instead of useKoreanTheme\n  const containerStyle = React.useMemo<React.CSSProperties>(() => {\n    const baseStyle: React.CSSProperties = {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      pointerEvents: \"none\",\n      padding: `${padding}px`,\n      boxSizing: \"border-box\",\n      gap: `${gap}px`,\n      zIndex,\n      backdropFilter: \"blur(8px)\",\n    };\n\n    switch (position) {\n      case \"left\":\n        return {\n          ...baseStyle,\n          left: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"right\":\n        return {\n          ...baseStyle,\n          right: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"top\":\n        return {\n          ...baseStyle,\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n\n      case \"bottom\":\n        return {\n          ...baseStyle,\n          bottom: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n    }\n  }, [position, width, height, topOffset, padding, gap, zIndex]);\n\n  return (\n    <div style={{ ...containerStyle, ...style }} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n};\n\nexport default BaseHUDContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,IAAa,oBAAqD,EAChE,UACA,OACA,QACA,YAAY,GACZ,UAAU,IACV,MAAM,IACN,SAAS,QAAQ,KACjB,QAAQ,EAAE,EACV,UACA,iBACI;AAwEJ,QACE,oBAAC,OAAD;EAAK,OAAO;GAAE,GAtEO,MAAM,cAAmC;IAC9D,MAAM,YAAiC;KACrC,UAAU;KACV,SAAS;KACT,eAAe;KACf,YAAY;KACZ,eAAe;KACf,SAAS,GAAG,QAAQ;KACpB,WAAW;KACX,KAAK,GAAG,IAAI;KACZ;KACA,gBAAgB;KACjB;AAED,YAAQ,UAAR;KACE,KAAK,OACH,QAAO;MACL,GAAG;MACH,MAAM;MACN,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,aAAa,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC1E,YAAY,0BAA0B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,QACH,QAAO;MACL,GAAG;MACH,OAAO;MACP,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,YAAY,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACzE,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC9J;KAEH,KAAK,MACH,QAAO;MACL,GAAG;MACH,KAAK;MACL,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,cAAc,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC3E,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,SACH,QAAO;MACL,GAAG;MACH,QAAQ;MACR,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,WAAW,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACxE,YAAY,yBAAyB,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC3J;;MAEJ;IAAC;IAAU;IAAO;IAAQ;IAAW;IAAS;IAAK;IAAO,CAAC;GAG3B,GAAG;GAAO;EAAE,eAAa;EACvD;EACG,CAAA"}

package/lib/components/shared/ui/CombatTimer.d.ts

@@ -0,0 +1,60 @@
+/**
+ * CombatTimer Component - Displays combat round timer
+ *
+ * Korean: 전투 타이머 (Combat Timer)
+ *
+ * Shows remaining time in MM:SS format with:
+ * - Color changes based on time remaining
+ * - Pulsing animation when time is critical
+ * - Korean cyberpunk aesthetic
+ * - Responsive sizing
+ *
+ * @module components/shared/ui/CombatTimer
+ * @category Shared UI
+ */
+import React from "react";
+import { TimerWarningLevel } from "../../../hooks/useCombatTimer";
+import "../three/ui/HUDAnimations.css";
+/**
+ * Props for the CombatTimer component
+ */
+export interface CombatTimerProps {
+    /** Formatted time string (MM:SS) */
+    readonly formattedTime: string;
+    /** Current warning level */
+    readonly warningLevel: TimerWarningLevel;
+    /** Whether time is up */
+    readonly isTimeUp: boolean;
+    /** Whether layout should adapt for mobile screens */
+    readonly isMobile: boolean;
+    /** Optional custom position styling */
+    readonly style?: React.CSSProperties;
+}
+/**
+ * CombatTimer Component
+ *
+ * Displays round timer with Korean cyberpunk aesthetic and responsive design.
+ *
+ * Features:
+ * - MM:SS format display
+ * - Color changes: cyan (>10s), yellow (≤10s), red (≤5s)
+ * - Pulsing animation when time ≤5s
+ * - "Time's Up!" message when timer reaches 0
+ * - Responsive sizing for mobile/tablet/desktop
+ * - Korean-English bilingual support
+ *
+ * Korean: 전투 타이머 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <CombatTimer
+ *   formattedTime="03:45"
+ *   warningLevel="none"
+ *   isTimeUp={false}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const CombatTimer: React.FC<CombatTimerProps>;
+export default CombatTimer;
+//# sourceMappingURL=CombatTimer.d.ts.map

package/lib/components/shared/ui/CombatTimer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombatTimer.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/CombatTimer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,+BAA+B,CAAC;AA8BvC;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,4BAA4B;IAC5B,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,uCAAuC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgGlD,CAAC;AAEF,eAAe,WAAW,CAAC"}