blacktrigram 0.7.39 → 0.7.40

package/lib/components/screens/combat/components/controls/CombatButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"CombatButtons.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/CombatButtons.tsx"],"sourcesContent":["/**\n * CombatButtons - Reusable button components for CombatScreen\n * \n * Provides return-to-menu button with combat-specific styling.\n * Extracted from CombatScreen3D to reduce code duplication.\n * \n * @module components/screens/combat\n * @category Combat UI\n * @korean 전투버튼\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { BaseButtonOverlayHtml } from \"../../../../shared/base/BaseButtonOverlayHtml\";\n\nexport interface CombatReturnToMenuButtonProps {\n  /** Callback when button is clicked */\n  readonly onClick: () => void;\n  /** Callback when mouse enters button */\n  readonly onMouseEnter?: () => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * CombatReturnToMenuButton Component\n * \n * Bilingual button to return to main menu from combat screen.\n * Uses BaseButtonOverlayHtml with custom container for combat-specific styling.\n * \n * Refactored to use BaseButtonOverlayHtml for better consistency.\n * \n * @example\n * ```tsx\n * <CombatReturnToMenuButton\n *   onClick={() => navigate('/menu')}\n *   onMouseEnter={() => playSound()}\n *   isMobile={false}\n * />\n * ```\n */\nexport const CombatReturnToMenuButton: React.FC<\n  CombatReturnToMenuButtonProps\n> = ({ onClick, onMouseEnter, isMobile }) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  const containerStyle = useMemo(() => ({\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.85),\n    border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n  }), [theme.colors.UI_BACKGROUND_DARK, theme.colors.PRIMARY_CYAN]);\n\n  return (\n    <div\n      style={{\n        textAlign: \"center\",\n        background: containerStyle.background,\n        border: containerStyle.border,\n        borderRadius: \"8px\",\n        padding: isMobile ? \"6px 10px\" : \"8px 12px\",\n      }}\n    >\n      <BaseButtonOverlayHtml\n        korean={isMobile ? \"메뉴\" : \"메뉴로\"}\n        english={isMobile ? \"Menu\" : \"Return to Menu\"}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        variant=\"primary\"\n        size=\"md\"\n        isMobile={isMobile}\n        testId=\"return-to-menu-button\"\n      />\n    </div>\n  );\n};\n\nexport default CombatReturnToMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,4BAER,EAAE,SAAS,cAAc,eAAe;CAC3C,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,MAAM,iBAAiB,eAAe;EACpC,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,IAAK;EAClE,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;EACrE,GAAG,CAAC,MAAM,OAAO,oBAAoB,MAAM,OAAO,aAAa,CAAC;AAEjE,QACE,oBAAC,OAAD;EACE,OAAO;GACL,WAAW;GACX,YAAY,eAAe;GAC3B,QAAQ,eAAe;GACvB,cAAc;GACd,SAAS,WAAW,aAAa;GAClC;YAED,oBAAC,uBAAD;GACE,QAAQ,WAAW,OAAO;GAC1B,SAAS,WAAW,SAAS;GACpB;GACK;GACd,SAAQ;GACR,MAAK;GACK;GACV,QAAO;GACP,CAAA;EACE,CAAA"}
+{"version":3,"file":"CombatButtons.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/CombatButtons.tsx"],"sourcesContent":["/**\n * CombatButtons - Reusable button components for CombatScreen\n * \n * Provides return-to-menu button with combat-specific styling.\n * Extracted from CombatScreen3D to reduce code duplication.\n * \n * @module components/screens/combat\n * @category Combat UI\n * @korean 전투버튼\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { BaseButtonOverlayHtml } from \"../../../../shared/base/BaseButtonOverlayHtml\";\n\nexport interface CombatReturnToMenuButtonProps {\n  /** Callback when button is clicked */\n  readonly onClick: () => void;\n  /** Callback when mouse enters button */\n  readonly onMouseEnter?: () => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * CombatReturnToMenuButton Component\n * \n * Bilingual button to return to main menu from combat screen.\n * Uses BaseButtonOverlayHtml with custom container for combat-specific styling.\n * \n * Refactored to use BaseButtonOverlayHtml for better consistency.\n * \n * @example\n * ```tsx\n * <CombatReturnToMenuButton\n *   onClick={() => navigate('/menu')}\n *   onMouseEnter={() => playSound()}\n *   isMobile={false}\n * />\n * ```\n */\nexport const CombatReturnToMenuButton: React.FC<\n  CombatReturnToMenuButtonProps\n> = ({ onClick, onMouseEnter, isMobile }) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  const containerStyle = useMemo(() => ({\n    background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.85),\n    border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n  }), [theme.colors.UI_BACKGROUND_DARK, theme.colors.PRIMARY_CYAN]);\n\n  return (\n    <div\n      style={{\n        textAlign: \"center\",\n        background: containerStyle.background,\n        border: containerStyle.border,\n        borderRadius: \"8px\",\n        padding: isMobile ? \"6px 10px\" : \"8px 12px\",\n      }}\n    >\n      <BaseButtonOverlayHtml\n        korean={isMobile ? \"메뉴\" : \"메뉴로\"}\n        english={isMobile ? \"Menu\" : \"Return to Menu\"}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        variant=\"primary\"\n        size=\"md\"\n        isMobile={isMobile}\n        testId=\"return-to-menu-button\"\n      />\n    </div>\n  );\n};\n\nexport default CombatReturnToMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,4BAER,EAAE,SAAS,cAAc,eAAe;CAC3C,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,MAAM,iBAAiB,eAAe;EACpC,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,IAAK;EAClE,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;EACrE,GAAG,CAAC,MAAM,OAAO,oBAAoB,MAAM,OAAO,aAAa,CAAC;CAEjE,OACE,oBAAC,OAAD;EACE,OAAO;GACL,WAAW;GACX,YAAY,eAAe;GAC3B,QAAQ,eAAe;GACvB,cAAc;GACd,SAAS,WAAW,aAAa;GAClC;YAED,oBAAC,uBAAD;GACE,QAAQ,WAAW,OAAO;GAC1B,SAAS,WAAW,SAAS;GACpB;GACK;GACd,SAAQ;GACR,MAAK;GACK;GACV,QAAO;GACP,CAAA;EACE,CAAA"}

package/lib/components/screens/combat/components/controls/CombatControlsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CombatControlsPanel.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/CombatControlsPanel.tsx"],"sourcesContent":["/**\n * CombatControlsPanel - Displays controls guide and combat messages log\n *\n * Shows keyboard/touch controls on the left and scrolling combat log on the right.\n * Positioned at the bottom of the combat screen above the back button.\n *\n * Refactored to use useKoreanTheme for consistent theming.\n *\n * @module components/combat/components/CombatControlsPanel\n * @category Combat UI\n * @korean 전투컨트롤패널\n */\n\nimport React from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\n/** Ratio of screen height used for message log max height */\nconst MESSAGE_LOG_HEIGHT_RATIO = 0.18;\n\nexport interface CombatControlsPanelProps {\n  /** Combat message log (most recent messages) */\n  readonly combatMessages: readonly string[];\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n  /** Screen height for responsive sizing */\n  readonly height?: number;\n}\n\n/**\n * CombatControlsPanel - Controls guide and combat log display\n * \n * Uses useKoreanTheme for consistent styling.\n *\n * @example\n * ```tsx\n * <CombatControlsPanel\n *   combatMessages={combatState.combatMessages}\n *   isMobile={false}\n * />\n * ```\n */\nexport const CombatControlsPanel: React.FC<CombatControlsPanelProps> = ({\n  combatMessages,\n  isMobile,\n  height,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"sm\", isMobile });\n  const panelBackground = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n  \n  return (\n    <div\n      data-testid=\"combat-controls-panel\"\n      style={{\n        position: \"absolute\",\n        bottom: isMobile ? \"90px\" : \"100px\",\n        left: isMobile ? \"5px\" : \"15px\",\n        right: isMobile ? \"5px\" : \"15px\",\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        pointerEvents: \"auto\",\n        zIndex: 50,\n      }}\n    >\n      {/* Controls Guide */}\n      <div\n        data-testid=\"combat-controls-guide\"\n        style={{\n          width: isMobile ? \"45%\" : \"400px\",\n          background: panelBackground,\n          border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)}`,\n          borderRadius: \"8px\",\n          padding: \"10px\",\n          color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n        }}\n      >\n        <div style={{ fontSize: isMobile ? \"10px\" : \"12px\" }}>\n          조작법 | Controls: A/D - Attack/Defend | 1-8 - Stances\n        </div>\n      </div>\n\n      {/* Combat Message Log */}\n      <div\n        data-testid=\"combat-message-log\"\n        style={{\n          width: isMobile ? \"45%\" : \"400px\",\n          background: panelBackground,\n          border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)}`,\n          borderRadius: \"8px\",\n          padding: \"10px\",\n          color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          maxHeight: height ? `${Math.round(height * MESSAGE_LOG_HEIGHT_RATIO)}px` : \"18vh\",\n          overflow: \"auto\",\n        }}\n      >\n        {combatMessages.slice(-5).map((msg, idx) => (\n          <div\n            key={`msg-${idx}`}\n            style={{ fontSize: \"12px\", marginBottom: \"4px\" }}\n          >\n            {msg}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default CombatControlsPanel;\n"],"mappings":";;;;;;AAkBA,IAAM,2BAA2B;;;;;;;;;;;;;;AAwBjC,IAAa,uBAA2D,EACtE,gBACA,UACA,aACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAC1E,MAAM,kBAAkB,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;AAE7E,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,UAAU;GACV,QAAQ,WAAW,SAAS;GAC5B,MAAM,WAAW,QAAQ;GACzB,OAAO,WAAW,QAAQ;GAC1B,SAAS;GACT,gBAAgB;GAChB,eAAe;GACf,QAAQ;GACT;YAXH,CAcE,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,OAAO,WAAW,QAAQ;IAC1B,YAAY;IACZ,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,EAAE;IAClE,cAAc;IACd,SAAS;IACT,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;IACpD,YAAY,MAAM,WAAW;IAC9B;aAED,oBAAC,OAAD;IAAK,OAAO,EAAE,UAAU,WAAW,SAAS,QAAQ;cAAE;IAEhD,CAAA;GACF,CAAA,EAGN,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,OAAO,WAAW,QAAQ;IAC1B,YAAY;IACZ,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,EAAE;IAClE,cAAc;IACd,SAAS;IACT,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;IACpD,YAAY,MAAM,WAAW;IAC7B,WAAW,SAAS,GAAG,KAAK,MAAM,SAAS,yBAAyB,CAAC,MAAM;IAC3E,UAAU;IACX;aAEA,eAAe,MAAM,GAAG,CAAC,KAAK,KAAK,QAClC,oBAAC,OAAD;IAEE,OAAO;KAAE,UAAU;KAAQ,cAAc;KAAO;cAE/C;IACG,EAJC,OAAO,MAIR,CACN;GACE,CAAA,CACF"}
+{"version":3,"file":"CombatControlsPanel.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/CombatControlsPanel.tsx"],"sourcesContent":["/**\n * CombatControlsPanel - Displays controls guide and combat messages log\n *\n * Shows keyboard/touch controls on the left and scrolling combat log on the right.\n * Positioned at the bottom of the combat screen above the back button.\n *\n * Refactored to use useKoreanTheme for consistent theming.\n *\n * @module components/combat/components/CombatControlsPanel\n * @category Combat UI\n * @korean 전투컨트롤패널\n */\n\nimport React from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\n/** Ratio of screen height used for message log max height */\nconst MESSAGE_LOG_HEIGHT_RATIO = 0.18;\n\nexport interface CombatControlsPanelProps {\n  /** Combat message log (most recent messages) */\n  readonly combatMessages: readonly string[];\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n  /** Screen height for responsive sizing */\n  readonly height?: number;\n}\n\n/**\n * CombatControlsPanel - Controls guide and combat log display\n * \n * Uses useKoreanTheme for consistent styling.\n *\n * @example\n * ```tsx\n * <CombatControlsPanel\n *   combatMessages={combatState.combatMessages}\n *   isMobile={false}\n * />\n * ```\n */\nexport const CombatControlsPanel: React.FC<CombatControlsPanelProps> = ({\n  combatMessages,\n  isMobile,\n  height,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"sm\", isMobile });\n  const panelBackground = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n  \n  return (\n    <div\n      data-testid=\"combat-controls-panel\"\n      style={{\n        position: \"absolute\",\n        bottom: isMobile ? \"90px\" : \"100px\",\n        left: isMobile ? \"5px\" : \"15px\",\n        right: isMobile ? \"5px\" : \"15px\",\n        display: \"flex\",\n        justifyContent: \"space-between\",\n        pointerEvents: \"auto\",\n        zIndex: 50,\n      }}\n    >\n      {/* Controls Guide */}\n      <div\n        data-testid=\"combat-controls-guide\"\n        style={{\n          width: isMobile ? \"45%\" : \"400px\",\n          background: panelBackground,\n          border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)}`,\n          borderRadius: \"8px\",\n          padding: \"10px\",\n          color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n        }}\n      >\n        <div style={{ fontSize: isMobile ? \"10px\" : \"12px\" }}>\n          조작법 | Controls: A/D - Attack/Defend | 1-8 - Stances\n        </div>\n      </div>\n\n      {/* Combat Message Log */}\n      <div\n        data-testid=\"combat-message-log\"\n        style={{\n          width: isMobile ? \"45%\" : \"400px\",\n          background: panelBackground,\n          border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)}`,\n          borderRadius: \"8px\",\n          padding: \"10px\",\n          color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          maxHeight: height ? `${Math.round(height * MESSAGE_LOG_HEIGHT_RATIO)}px` : \"18vh\",\n          overflow: \"auto\",\n        }}\n      >\n        {combatMessages.slice(-5).map((msg, idx) => (\n          <div\n            key={`msg-${idx}`}\n            style={{ fontSize: \"12px\", marginBottom: \"4px\" }}\n          >\n            {msg}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default CombatControlsPanel;\n"],"mappings":";;;;;;AAkBA,IAAM,2BAA2B;;;;;;;;;;;;;;AAwBjC,IAAa,uBAA2D,EACtE,gBACA,UACA,aACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAC1E,MAAM,kBAAkB,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;CAE7E,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,UAAU;GACV,QAAQ,WAAW,SAAS;GAC5B,MAAM,WAAW,QAAQ;GACzB,OAAO,WAAW,QAAQ;GAC1B,SAAS;GACT,gBAAgB;GAChB,eAAe;GACf,QAAQ;GACT;YAXH,CAcE,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,OAAO,WAAW,QAAQ;IAC1B,YAAY;IACZ,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,EAAE;IAClE,cAAc;IACd,SAAS;IACT,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;IACpD,YAAY,MAAM,WAAW;IAC9B;aAED,oBAAC,OAAD;IAAK,OAAO,EAAE,UAAU,WAAW,SAAS,QAAQ;cAAE;IAEhD,CAAA;GACF,CAAA,EAGN,oBAAC,OAAD;GACE,eAAY;GACZ,OAAO;IACL,OAAO,WAAW,QAAQ;IAC1B,YAAY;IACZ,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,EAAE;IAClE,cAAc;IACd,SAAS;IACT,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;IACpD,YAAY,MAAM,WAAW;IAC7B,WAAW,SAAS,GAAG,KAAK,MAAM,SAAS,yBAAyB,CAAC,MAAM;IAC3E,UAAU;IACX;aAEA,eAAe,MAAM,GAAG,CAAC,KAAK,KAAK,QAClC,oBAAC,OAAD;IAEE,OAAO;KAAE,UAAU;KAAQ,cAAc;KAAO;cAE/C;IACG,EAJC,OAAO,MAIR,CACN;GACE,CAAA,CACF"}

package/lib/components/screens/combat/components/controls/ControlsGuide.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlsGuide.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/ControlsGuide.tsx"],"sourcesContent":["/**\n * ControlsGuide Component - In-game controls reference\n * \n * Features:\n * - Complete combat controls listing\n * - Korean/English bilingual labels\n * - Cyberpunk Korean theming via useKoreanTheme\n * - Organized by action type\n * \n * Refactored to use useKoreanTheme for consistent theming.\n */\n\nimport React from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface ControlsGuideProps {\n  readonly onClose: () => void;\n  readonly isMobile: boolean;\n}\n\ninterface ControlMapping {\n  readonly key: string;\n  readonly actionKorean: string;\n  readonly actionEnglish: string;\n}\n\nconst CONTROL_MAPPINGS: ControlMapping[] = [\n  { key: \"WASD / ←↑↓→\", actionKorean: \"이동\", actionEnglish: \"Movement\" },\n  { key: \"1-8\", actionKorean: \"팔괘 자세\", actionEnglish: \"Trigram Stances\" },\n  { key: \"Space\", actionKorean: \"공격\", actionEnglish: \"Attack\" },\n  { key: \"Shift\", actionKorean: \"방어\", actionEnglish: \"Defend\" },\n  { key: \"Tab\", actionKorean: \"원형 전환\", actionEnglish: \"Switch Archetype\" },\n  { key: \"ESC\", actionKorean: \"일시정지\", actionEnglish: \"Pause\" },\n  { key: \"M\", actionKorean: \"음소거\", actionEnglish: \"Mute\" },\n];\n\n/**\n * ControlsGuide - In-game controls reference overlay\n * Uses useKoreanTheme for consistent styling.\n */\nexport const ControlsGuide: React.FC<ControlsGuideProps> = ({\n  onClose,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  return (\n    <div\n      data-testid=\"controls-guide\"\n      style={{\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        padding: isMobile ? \"24px\" : \"32px\",\n        backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n        borderRadius: \"12px\",\n        minWidth: isMobile ? \"280px\" : \"400px\",\n        maxHeight: isMobile ? \"70vh\" : \"80vh\",\n        overflow: \"auto\",\n        boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n        zIndex: 1000,\n      }}\n    >\n      {/* Title */}\n      <h2\n        data-testid=\"controls-title\"\n        style={{\n          fontSize: isMobile ? \"20px\" : \"24px\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: \"0 0 24px 0\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.4)}`,\n        }}\n      >\n        조작법 | Controls\n      </h2>\n\n      {/* Controls List */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isMobile ? \"12px\" : \"16px\",\n        }}\n      >\n        {CONTROL_MAPPINGS.map((control, index) => (\n          <div\n            key={index}\n            data-testid={`control-item-${index}`}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: isMobile ? \"10px\" : \"12px\",\n              backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.5),\n              border: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              borderRadius: \"6px\",\n            }}\n          >\n            <div\n              style={{\n                flex: 1,\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontWeight: \"bold\",\n              }}\n            >\n              {control.actionKorean}\n              <br />\n              <span\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"13px\",\n                  color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n                  fontWeight: \"normal\",\n                }}\n              >\n                {control.actionEnglish}\n              </span>\n            </div>\n            <div\n              style={{\n                padding: isMobile ? \"6px 12px\" : \"8px 16px\",\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n                backgroundColor: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                fontFamily: theme.fontFamily.MONO,\n                fontWeight: \"bold\",\n                borderRadius: \"4px\",\n                textAlign: \"center\",\n                minWidth: isMobile ? \"80px\" : \"100px\",\n              }}\n            >\n              {control.key}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Additional Tips */}\n      <div\n        data-testid=\"controls-tips\"\n        style={{\n          marginTop: isMobile ? \"20px\" : \"24px\",\n          padding: isMobile ? \"12px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.3),\n          border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.3)}`,\n          borderRadius: \"6px\",\n        }}\n      >\n        <h3\n          style={{\n            fontSize: isMobile ? \"14px\" : \"16px\",\n            color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n            fontFamily: theme.fontFamily.KOREAN,\n            fontWeight: \"bold\",\n            margin: \"0 0 8px 0\",\n          }}\n        >\n          💡 팁 | Tips\n        </h3>\n        <p\n          style={{\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n            fontFamily: theme.fontFamily.KOREAN,\n            margin: 0,\n            lineHeight: \"1.6\",\n          }}\n        >\n          • 각 팔괘 자세는 고유한 기술과 장점이 있습니다\n          <br />\n          • Each trigram stance has unique techniques and advantages\n          <br />\n          <br />\n          • 적절한 타이밍에 방어하면 반격 기회를 얻습니다\n          <br />\n          • Perfect timing on defense creates counter opportunities\n        </p>\n      </div>\n\n      {/* Close Button */}\n      <button\n        onClick={() => {\n          audio.playSFX(\"menu_back\");\n          onClose();\n        }}\n        onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n        data-testid=\"controls-close-button\"\n        style={{\n          marginTop: isMobile ? \"20px\" : \"24px\",\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n          border: \"none\",\n          borderRadius: \"6px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.ACCENT_GOLD,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n        }}\n      >\n        닫기 | Close\n      </button>\n    </div>\n  );\n};\n\nexport default ControlsGuide;\n"],"mappings":"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"}
+{"version":3,"file":"ControlsGuide.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/ControlsGuide.tsx"],"sourcesContent":["/**\n * ControlsGuide Component - In-game controls reference\n * \n * Features:\n * - Complete combat controls listing\n * - Korean/English bilingual labels\n * - Cyberpunk Korean theming via useKoreanTheme\n * - Organized by action type\n * \n * Refactored to use useKoreanTheme for consistent theming.\n */\n\nimport React from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface ControlsGuideProps {\n  readonly onClose: () => void;\n  readonly isMobile: boolean;\n}\n\ninterface ControlMapping {\n  readonly key: string;\n  readonly actionKorean: string;\n  readonly actionEnglish: string;\n}\n\nconst CONTROL_MAPPINGS: ControlMapping[] = [\n  { key: \"WASD / ←↑↓→\", actionKorean: \"이동\", actionEnglish: \"Movement\" },\n  { key: \"1-8\", actionKorean: \"팔괘 자세\", actionEnglish: \"Trigram Stances\" },\n  { key: \"Space\", actionKorean: \"공격\", actionEnglish: \"Attack\" },\n  { key: \"Shift\", actionKorean: \"방어\", actionEnglish: \"Defend\" },\n  { key: \"Tab\", actionKorean: \"원형 전환\", actionEnglish: \"Switch Archetype\" },\n  { key: \"ESC\", actionKorean: \"일시정지\", actionEnglish: \"Pause\" },\n  { key: \"M\", actionKorean: \"음소거\", actionEnglish: \"Mute\" },\n];\n\n/**\n * ControlsGuide - In-game controls reference overlay\n * Uses useKoreanTheme for consistent styling.\n */\nexport const ControlsGuide: React.FC<ControlsGuideProps> = ({\n  onClose,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  return (\n    <div\n      data-testid=\"controls-guide\"\n      style={{\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        padding: isMobile ? \"24px\" : \"32px\",\n        backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n        borderRadius: \"12px\",\n        minWidth: isMobile ? \"280px\" : \"400px\",\n        maxHeight: isMobile ? \"70vh\" : \"80vh\",\n        overflow: \"auto\",\n        boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n        zIndex: 1000,\n      }}\n    >\n      {/* Title */}\n      <h2\n        data-testid=\"controls-title\"\n        style={{\n          fontSize: isMobile ? \"20px\" : \"24px\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: \"0 0 24px 0\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.4)}`,\n        }}\n      >\n        조작법 | Controls\n      </h2>\n\n      {/* Controls List */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isMobile ? \"12px\" : \"16px\",\n        }}\n      >\n        {CONTROL_MAPPINGS.map((control, index) => (\n          <div\n            key={index}\n            data-testid={`control-item-${index}`}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              padding: isMobile ? \"10px\" : \"12px\",\n              backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.5),\n              border: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              borderRadius: \"6px\",\n            }}\n          >\n            <div\n              style={{\n                flex: 1,\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontWeight: \"bold\",\n              }}\n            >\n              {control.actionKorean}\n              <br />\n              <span\n                style={{\n                  fontSize: isMobile ? \"11px\" : \"13px\",\n                  color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n                  fontWeight: \"normal\",\n                }}\n              >\n                {control.actionEnglish}\n              </span>\n            </div>\n            <div\n              style={{\n                padding: isMobile ? \"6px 12px\" : \"8px 16px\",\n                fontSize: isMobile ? \"12px\" : \"14px\",\n                color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n                backgroundColor: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                fontFamily: theme.fontFamily.MONO,\n                fontWeight: \"bold\",\n                borderRadius: \"4px\",\n                textAlign: \"center\",\n                minWidth: isMobile ? \"80px\" : \"100px\",\n              }}\n            >\n              {control.key}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Additional Tips */}\n      <div\n        data-testid=\"controls-tips\"\n        style={{\n          marginTop: isMobile ? \"20px\" : \"24px\",\n          padding: isMobile ? \"12px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.3),\n          border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.3)}`,\n          borderRadius: \"6px\",\n        }}\n      >\n        <h3\n          style={{\n            fontSize: isMobile ? \"14px\" : \"16px\",\n            color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n            fontFamily: theme.fontFamily.KOREAN,\n            fontWeight: \"bold\",\n            margin: \"0 0 8px 0\",\n          }}\n        >\n          💡 팁 | Tips\n        </h3>\n        <p\n          style={{\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n            fontFamily: theme.fontFamily.KOREAN,\n            margin: 0,\n            lineHeight: \"1.6\",\n          }}\n        >\n          • 각 팔괘 자세는 고유한 기술과 장점이 있습니다\n          <br />\n          • Each trigram stance has unique techniques and advantages\n          <br />\n          <br />\n          • 적절한 타이밍에 방어하면 반격 기회를 얻습니다\n          <br />\n          • Perfect timing on defense creates counter opportunities\n        </p>\n      </div>\n\n      {/* Close Button */}\n      <button\n        onClick={() => {\n          audio.playSFX(\"menu_back\");\n          onClose();\n        }}\n        onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n        data-testid=\"controls-close-button\"\n        style={{\n          marginTop: isMobile ? \"20px\" : \"24px\",\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n          border: \"none\",\n          borderRadius: \"6px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.ACCENT_GOLD,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n        }}\n      >\n        닫기 | Close\n      </button>\n    </div>\n  );\n};\n\nexport default ControlsGuide;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/controls/KeyboardHints.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardHints.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/KeyboardHints.tsx"],"sourcesContent":["/**\n * KeyboardHints - On-screen control overlay\n * Displays keyboard bindings for trigram stances and combat actions\n * \n * Refactored to use useKoreanTheme for consistent theming\n * \n * @module components/combat/components/KeyboardHints\n * @category Combat UI\n * @korean 키보드힌트\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { ControlBinding } from \"../../../../../utils/controlMapping\";\n\n/**\n * Props for KeyboardHints component\n */\nexport interface KeyboardHintsProps {\n  /** Whether hints are visible */\n  readonly visible: boolean;\n  /** Current stance index (0-7) for highlighting */\n  readonly currentStance: number;\n  /** Mobile layout flag */\n  readonly isMobile?: boolean;\n  /** Custom key bindings */\n  readonly customBindings?: ControlBinding;\n}\n\n/**\n * KeyboardHints Component\n * \n * Displays an overlay of keyboard controls for stance switching and combat actions.\n * Highlights the currently active stance and adapts layout for mobile devices.\n * \n * Features:\n * - 8 trigram stance keys displayed in a grid\n * - Current stance highlighted in gold\n * - Combat action keys (attack, block, movement)\n * - Responsive mobile layout\n * - Korean cyberpunk styling\n * - Toggle with F1 key\n * \n * @example\n * ```tsx\n * <KeyboardHints\n *   visible={showHints}\n *   currentStance={player.stance}\n *   isMobile={isMobile}\n *   customBindings={controlMapper.getBindings()}\n * />\n * ```\n * \n * @public\n * @korean 키보드힌트\n */\nexport const KeyboardHints: React.FC<KeyboardHintsProps> = ({\n  visible,\n  currentStance,\n  isMobile = false,\n  customBindings,\n}) => {\n  const theme = useKoreanTheme({ variant: \"bordered\", size: \"md\", isMobile });\n  \n  // Get stance keys (default or custom)\n  const stanceKeys = useMemo(() => {\n    if (customBindings?.stances) {\n      return customBindings.stances;\n    }\n    return [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\"];\n  }, [customBindings]);\n\n  // Layout calculations\n  const layout = useMemo(() => {\n    const keySize = isMobile ? 32 : 48;\n    const gap = isMobile ? 4 : 8;\n    const fontSize = isMobile ? 12 : 16;\n    const labelFontSize = isMobile ? 10 : 12;\n    const padding = isMobile ? 8 : 12;\n\n    return { keySize, gap, fontSize, labelFontSize, padding };\n  }, [isMobile]);\n\n  if (!visible) return null;\n\n  return (\n    <Html fullscreen>\n      <div\n        data-testid=\"keyboard-hints\"\n        role=\"dialog\"\n        aria-label=\"Keyboard control hints\"\n        aria-describedby=\"hints-description\"\n        style={{\n          position: \"absolute\",\n          bottom: isMobile ? \"20px\" : \"40px\",\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          pointerEvents: \"none\",\n          zIndex: 999,\n        }}\n      >\n        {/* Hidden description for screen readers */}\n        <div\n          id=\"hints-description\"\n          style={{\n            position: \"absolute\",\n            left: \"-9999px\",\n            width: \"1px\",\n            height: \"1px\",\n            overflow: \"hidden\",\n          }}\n        >\n          Keyboard controls for combat. Press F1 to toggle this overlay.\n        </div>\n\n        {/* Main hints container */}\n        <div\n          style={{\n            background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n            border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n            borderRadius: \"8px\",\n            padding: `${layout.padding}px`,\n            boxShadow: `0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n          }}\n        >\n          {/* Section title */}\n          <div\n            style={{\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontSize: `${layout.labelFontSize}px`,\n              textAlign: \"center\",\n              marginBottom: \"8px\",\n              fontWeight: \"bold\",\n            }}\n          >\n            Trigram Stances (1-8)\n          </div>\n\n          {/* Stance keys grid */}\n          <div\n            style={{\n              display: \"flex\",\n              gap: `${layout.gap}px`,\n              marginBottom: \"12px\",\n            }}\n          >\n            {stanceKeys.map((key, index) => {\n              const isActive = index === currentStance;\n              const keyColor = isActive\n                ? theme.colors.ACCENT_GOLD\n                : theme.colors.UI_STEEL_GRAY;\n              const bgColor = isActive\n                ? hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2)\n                : \"transparent\";\n\n              return (\n                <div\n                  key={index}\n                  data-testid={`stance-key-${index}`}\n                  style={{\n                    width: `${layout.keySize}px`,\n                    height: `${layout.keySize}px`,\n                    border: `2px solid ${hexToRgbaString(keyColor, isActive ? 1 : 0.6)}`,\n                    borderRadius: \"4px\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    fontSize: `${layout.fontSize}px`,\n                    color: hexToRgbaString(keyColor, 1),\n                    background: bgColor,\n                    fontFamily: theme.fontFamily.KOREAN,\n                    fontWeight: isActive ? \"bold\" : \"normal\",\n                    boxShadow: isActive\n                      ? `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`\n                      : \"none\",\n                    transition: \"all 0.2s ease\",\n                  }}\n                >\n                  {key.toUpperCase()}\n                </div>\n              );\n            })}\n          </div>\n\n          {/* Combat actions */}\n          <div\n            style={{\n              borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              paddingTop: \"8px\",\n              marginBottom: \"8px\",\n              display: \"grid\",\n              gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr\",\n              gap: \"4px\",\n              fontSize: `${layout.labelFontSize}px`,\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n              fontFamily: theme.fontFamily.KOREAN,\n            }}\n          >\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                Space\n              </span>{\" \"}\n              - Attack\n            </div>\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                B\n              </span>{\" \"}\n              - Block\n            </div>\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                V\n              </span>{\" \"}\n              - Toggle vital points overlay\n            </div>\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                WASD/Arrows\n              </span>{\" \"}\n              - Move\n            </div>\n          </div>\n\n          {/* Technique keys section */}\n          <div\n            style={{\n              borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              paddingTop: \"8px\",\n              marginBottom: \"8px\",\n            }}\n          >\n            <div\n              style={{\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontSize: `${layout.labelFontSize}px`,\n                textAlign: \"center\",\n                marginBottom: \"6px\",\n                fontWeight: \"bold\",\n              }}\n            >\n              Techniques (기술)\n            </div>\n            <div\n              style={{\n                fontSize: `${layout.labelFontSize}px`,\n                color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n                fontFamily: theme.fontFamily.KOREAN,\n                textAlign: \"center\",\n              }}\n            >\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                Q-E-R-T-Y-F-G-Z-X-C\n              </span>\n              {\" \"}\n              - Execute techniques\n            </div>\n          </div>\n\n          {/* Advanced footwork section */}\n          <div\n            style={{\n              borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              paddingTop: \"8px\",\n            }}\n          >\n            <div\n              style={{\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontSize: `${layout.labelFontSize}px`,\n                textAlign: \"center\",\n                marginBottom: \"6px\",\n                fontWeight: \"bold\",\n              }}\n            >\n              Advanced Footwork (보법)\n            </div>\n            <div\n              style={{\n                fontSize: `${layout.labelFontSize - 1}px`,\n                color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n                fontFamily: theme.fontFamily.KOREAN,\n                textAlign: \"center\",\n                lineHeight: 1.4,\n              }}\n            >\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Shift+WASD\n                </span>\n                {\" \"}\n                - Tactical steps (30cm)\n              </div>\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Ctrl+WASD\n                </span>\n                {\" \"}\n                - Footwork patterns\n              </div>\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Shift+Ctrl+A/D\n                </span>\n                {\" \"}\n                - Pivot rotation\n              </div>\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Shift+Ctrl+W/S\n                </span>\n                {\" \"}\n                - Shuffle step\n              </div>\n              <div>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  H\n                </span>\n                {\" \"}\n                - Switch front foot\n              </div>\n            </div>\n          </div>\n\n          {/* Toggle hint */}\n          <div\n            style={{\n              marginTop: \"8px\",\n              textAlign: \"center\",\n              fontSize: `${layout.labelFontSize - 2}px`,\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.7),\n              fontStyle: \"italic\",\n            }}\n          >\n            Press F1 to toggle • ESC/M for pause\n          </div>\n        </div>\n      </div>\n    </Html>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"KeyboardHints.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/KeyboardHints.tsx"],"sourcesContent":["/**\n * KeyboardHints - On-screen control overlay\n * Displays keyboard bindings for trigram stances and combat actions\n * \n * Refactored to use useKoreanTheme for consistent theming\n * \n * @module components/combat/components/KeyboardHints\n * @category Combat UI\n * @korean 키보드힌트\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { ControlBinding } from \"../../../../../utils/controlMapping\";\n\n/**\n * Props for KeyboardHints component\n */\nexport interface KeyboardHintsProps {\n  /** Whether hints are visible */\n  readonly visible: boolean;\n  /** Current stance index (0-7) for highlighting */\n  readonly currentStance: number;\n  /** Mobile layout flag */\n  readonly isMobile?: boolean;\n  /** Custom key bindings */\n  readonly customBindings?: ControlBinding;\n}\n\n/**\n * KeyboardHints Component\n * \n * Displays an overlay of keyboard controls for stance switching and combat actions.\n * Highlights the currently active stance and adapts layout for mobile devices.\n * \n * Features:\n * - 8 trigram stance keys displayed in a grid\n * - Current stance highlighted in gold\n * - Combat action keys (attack, block, movement)\n * - Responsive mobile layout\n * - Korean cyberpunk styling\n * - Toggle with F1 key\n * \n * @example\n * ```tsx\n * <KeyboardHints\n *   visible={showHints}\n *   currentStance={player.stance}\n *   isMobile={isMobile}\n *   customBindings={controlMapper.getBindings()}\n * />\n * ```\n * \n * @public\n * @korean 키보드힌트\n */\nexport const KeyboardHints: React.FC<KeyboardHintsProps> = ({\n  visible,\n  currentStance,\n  isMobile = false,\n  customBindings,\n}) => {\n  const theme = useKoreanTheme({ variant: \"bordered\", size: \"md\", isMobile });\n  \n  // Get stance keys (default or custom)\n  const stanceKeys = useMemo(() => {\n    if (customBindings?.stances) {\n      return customBindings.stances;\n    }\n    return [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\"];\n  }, [customBindings]);\n\n  // Layout calculations\n  const layout = useMemo(() => {\n    const keySize = isMobile ? 32 : 48;\n    const gap = isMobile ? 4 : 8;\n    const fontSize = isMobile ? 12 : 16;\n    const labelFontSize = isMobile ? 10 : 12;\n    const padding = isMobile ? 8 : 12;\n\n    return { keySize, gap, fontSize, labelFontSize, padding };\n  }, [isMobile]);\n\n  if (!visible) return null;\n\n  return (\n    <Html fullscreen>\n      <div\n        data-testid=\"keyboard-hints\"\n        role=\"dialog\"\n        aria-label=\"Keyboard control hints\"\n        aria-describedby=\"hints-description\"\n        style={{\n          position: \"absolute\",\n          bottom: isMobile ? \"20px\" : \"40px\",\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          pointerEvents: \"none\",\n          zIndex: 999,\n        }}\n      >\n        {/* Hidden description for screen readers */}\n        <div\n          id=\"hints-description\"\n          style={{\n            position: \"absolute\",\n            left: \"-9999px\",\n            width: \"1px\",\n            height: \"1px\",\n            overflow: \"hidden\",\n          }}\n        >\n          Keyboard controls for combat. Press F1 to toggle this overlay.\n        </div>\n\n        {/* Main hints container */}\n        <div\n          style={{\n            background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n            border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n            borderRadius: \"8px\",\n            padding: `${layout.padding}px`,\n            boxShadow: `0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n          }}\n        >\n          {/* Section title */}\n          <div\n            style={{\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontSize: `${layout.labelFontSize}px`,\n              textAlign: \"center\",\n              marginBottom: \"8px\",\n              fontWeight: \"bold\",\n            }}\n          >\n            Trigram Stances (1-8)\n          </div>\n\n          {/* Stance keys grid */}\n          <div\n            style={{\n              display: \"flex\",\n              gap: `${layout.gap}px`,\n              marginBottom: \"12px\",\n            }}\n          >\n            {stanceKeys.map((key, index) => {\n              const isActive = index === currentStance;\n              const keyColor = isActive\n                ? theme.colors.ACCENT_GOLD\n                : theme.colors.UI_STEEL_GRAY;\n              const bgColor = isActive\n                ? hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2)\n                : \"transparent\";\n\n              return (\n                <div\n                  key={index}\n                  data-testid={`stance-key-${index}`}\n                  style={{\n                    width: `${layout.keySize}px`,\n                    height: `${layout.keySize}px`,\n                    border: `2px solid ${hexToRgbaString(keyColor, isActive ? 1 : 0.6)}`,\n                    borderRadius: \"4px\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    fontSize: `${layout.fontSize}px`,\n                    color: hexToRgbaString(keyColor, 1),\n                    background: bgColor,\n                    fontFamily: theme.fontFamily.KOREAN,\n                    fontWeight: isActive ? \"bold\" : \"normal\",\n                    boxShadow: isActive\n                      ? `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`\n                      : \"none\",\n                    transition: \"all 0.2s ease\",\n                  }}\n                >\n                  {key.toUpperCase()}\n                </div>\n              );\n            })}\n          </div>\n\n          {/* Combat actions */}\n          <div\n            style={{\n              borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              paddingTop: \"8px\",\n              marginBottom: \"8px\",\n              display: \"grid\",\n              gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr\",\n              gap: \"4px\",\n              fontSize: `${layout.labelFontSize}px`,\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n              fontFamily: theme.fontFamily.KOREAN,\n            }}\n          >\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                Space\n              </span>{\" \"}\n              - Attack\n            </div>\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                B\n              </span>{\" \"}\n              - Block\n            </div>\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                V\n              </span>{\" \"}\n              - Toggle vital points overlay\n            </div>\n            <div>\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                WASD/Arrows\n              </span>{\" \"}\n              - Move\n            </div>\n          </div>\n\n          {/* Technique keys section */}\n          <div\n            style={{\n              borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              paddingTop: \"8px\",\n              marginBottom: \"8px\",\n            }}\n          >\n            <div\n              style={{\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontSize: `${layout.labelFontSize}px`,\n                textAlign: \"center\",\n                marginBottom: \"6px\",\n                fontWeight: \"bold\",\n              }}\n            >\n              Techniques (기술)\n            </div>\n            <div\n              style={{\n                fontSize: `${layout.labelFontSize}px`,\n                color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n                fontFamily: theme.fontFamily.KOREAN,\n                textAlign: \"center\",\n              }}\n            >\n              <span\n                style={{\n                  color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                  fontWeight: \"bold\",\n                }}\n              >\n                Q-E-R-T-Y-F-G-Z-X-C\n              </span>\n              {\" \"}\n              - Execute techniques\n            </div>\n          </div>\n\n          {/* Advanced footwork section */}\n          <div\n            style={{\n              borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n              paddingTop: \"8px\",\n            }}\n          >\n            <div\n              style={{\n                color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n                fontFamily: theme.fontFamily.KOREAN,\n                fontSize: `${layout.labelFontSize}px`,\n                textAlign: \"center\",\n                marginBottom: \"6px\",\n                fontWeight: \"bold\",\n              }}\n            >\n              Advanced Footwork (보법)\n            </div>\n            <div\n              style={{\n                fontSize: `${layout.labelFontSize - 1}px`,\n                color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n                fontFamily: theme.fontFamily.KOREAN,\n                textAlign: \"center\",\n                lineHeight: 1.4,\n              }}\n            >\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Shift+WASD\n                </span>\n                {\" \"}\n                - Tactical steps (30cm)\n              </div>\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Ctrl+WASD\n                </span>\n                {\" \"}\n                - Footwork patterns\n              </div>\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Shift+Ctrl+A/D\n                </span>\n                {\" \"}\n                - Pivot rotation\n              </div>\n              <div style={{ marginBottom: \"4px\" }}>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  Shift+Ctrl+W/S\n                </span>\n                {\" \"}\n                - Shuffle step\n              </div>\n              <div>\n                <span\n                  style={{\n                    color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  H\n                </span>\n                {\" \"}\n                - Switch front foot\n              </div>\n            </div>\n          </div>\n\n          {/* Toggle hint */}\n          <div\n            style={{\n              marginTop: \"8px\",\n              textAlign: \"center\",\n              fontSize: `${layout.labelFontSize - 2}px`,\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.7),\n              fontStyle: \"italic\",\n            }}\n          >\n            Press F1 to toggle • ESC/M for pause\n          </div>\n        </div>\n      </div>\n    </Html>\n  );\n};\n"],"mappings":"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"}

package/lib/components/screens/combat/components/controls/PauseMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PauseMenu.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenu.tsx"],"sourcesContent":["/**\n * PauseMenu Component - Main pause menu overlay\n *\n * Features:\n * - Resume combat\n * - Restart match\n * - View controls\n * - Adjust settings\n * - Return to menu (with confirmation)\n * - Korean/English bilingual text\n * - Cyberpunk Korean theming\n * - Backdrop blur effect\n * - WCAG 2.1 Level AA compliant\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Focus indicators with high contrast\n * - ARIA labels for screen readers\n * \n * Refactored to use useKoreanTheme for consistent theming\n */\n\nimport React, { useCallback, useMemo, useState, useEffect, useRef } from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport ConfirmDialog from \"../../../../shared/ui/shared/ConfirmDialog\";\nimport ControlsGuide from \"./ControlsGuide\";\nimport QuickSettings from \"./QuickSettings\";\nimport { handleKeyboardNav } from \"../../../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../../../types/AccessibilityTypes\";\nimport { PauseMenuButton } from \"./PauseMenuButton\";\n\nexport interface PauseMenuProps {\n  readonly onResume: () => void;\n  readonly onRestart: () => void;\n  readonly onReturnToMenu: () => void;\n  readonly isMobile: boolean;\n}\n\ninterface MenuItem {\n  readonly key: string;\n  readonly labelKorean: string;\n  readonly labelEnglish: string;\n  readonly testId: string;\n  readonly onClick: () => void;\n  readonly icon?: string;\n}\n\n/**\n * PauseMenu - Main pause menu with options and submenus\n */\nexport const PauseMenu: React.FC<PauseMenuProps> = ({\n  onResume,\n  onRestart,\n  onReturnToMenu,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"lg\", isMobile });\n  const themeColors = useMemo(() => ({\n    overlayBg: hexToRgbaString(theme.colors.BLACK_SOLID, 0.85),\n    accentGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n    accentGoldGlow: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n    textSecondary: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.8),\n  }), [theme.colors.BLACK_SOLID, theme.colors.ACCENT_GOLD, theme.colors.TEXT_SECONDARY]);\n  const [activeSubmenu, setActiveSubmenu] = useState<\n    \"controls\" | \"settings\" | null\n  >(null);\n  const [showConfirm, setShowConfirm] = useState<\n    \"restart\" | \"menu\" | null\n  >(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(0);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Memoize menuItems to prevent recreation on every render\n  const menuItems: MenuItem[] = React.useMemo(\n    () => [\n      {\n        key: \"resume\",\n        labelKorean: \"계속\",\n        labelEnglish: \"Resume\",\n        testId: \"pause-resume-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          onResume();\n        },\n        icon: \"▶️\",\n      },\n      {\n        key: \"restart\",\n        labelKorean: \"재시작\",\n        labelEnglish: \"Restart Match\",\n        testId: \"pause-restart-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setShowConfirm(\"restart\");\n        },\n        icon: \"🔄\",\n      },\n      {\n        key: \"controls\",\n        labelKorean: \"조작법\",\n        labelEnglish: \"Controls\",\n        testId: \"pause-controls-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setActiveSubmenu(\"controls\");\n        },\n        icon: \"🎮\",\n      },\n      {\n        key: \"settings\",\n        labelKorean: \"설정\",\n        labelEnglish: \"Settings\",\n        testId: \"pause-settings-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setActiveSubmenu(\"settings\");\n        },\n        icon: \"⚙️\",\n      },\n      {\n        key: \"menu\",\n        labelKorean: \"메인 메뉴\",\n        labelEnglish: \"Return to Menu\",\n        testId: \"pause-menu-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setShowConfirm(\"menu\");\n        },\n        icon: \"🏠\",\n      },\n    ],\n    [audio, onResume]\n  );\n\n  // Focus first button on mount\n  useEffect(() => {\n    if (buttonRefs.current[0]) {\n      buttonRefs.current[0].focus();\n    }\n  }, [menuItems]);\n\n  // Keyboard navigation handler\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, index: number) => {\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          menuItems[index].onClick();\n        },\n        onCancel: () => {\n          onResume();\n        },\n        onNavigate: (direction) => {\n          if (direction === 'up') {\n            const newIndex = (index - 1 + menuItems.length) % menuItems.length;\n            setFocusedIndex(newIndex);\n            buttonRefs.current[newIndex]?.focus();\n          } else if (direction === 'down') {\n            const newIndex = (index + 1) % menuItems.length;\n            setFocusedIndex(newIndex);\n            buttonRefs.current[newIndex]?.focus();\n          }\n        },\n      });\n    },\n    [menuItems, onResume]\n  );\n\n  // ESC key handling is now managed by the parent (CombatScreen3D) to avoid conflicts\n\n  return (\n    <>\n      {/* Main Pause Menu */}\n      <div\n        data-testid=\"pause-menu\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"pause-title\"\n        aria-describedby=\"pause-hint\"\n        style={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: themeColors.overlayBg,\n          backdropFilter: \"blur(8px)\",\n          zIndex: 1000,\n          pointerEvents: \"auto\",\n        }}\n      >\n        {/* Pause Title */}\n        <h1\n          id=\"pause-title\"\n          data-testid=\"pause-title\"\n          style={{\n            fontSize: isMobile ? \"48px\" : \"72px\",\n            color: themeColors.accentGold,\n            fontFamily: theme.fontFamily.KOREAN,\n            fontWeight: \"bold\",\n            margin: `0 0 ${isMobile ? \"40px\" : \"60px\"} 0`,\n            textShadow: `0 0 30px ${themeColors.accentGoldGlow}`,\n            textAlign: \"center\",\n          }}\n        >\n          일시정지 | Paused\n        </h1>\n\n        {/* Menu Buttons */}\n        <div\n          role=\"menu\"\n          aria-label={createBilingualLabel('일시정지 메뉴', 'Pause Menu').label}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: isMobile ? \"12px\" : \"16px\",\n            minWidth: isMobile ? \"280px\" : \"360px\",\n          }}\n        >\n          {menuItems.map((item, index) => (\n            <PauseMenuButton\n              key={item.key}\n              ref={(el) => { buttonRefs.current[index] = el; }}\n              labelKorean={item.labelKorean}\n              labelEnglish={item.labelEnglish}\n              icon={item.icon}\n              onClick={item.onClick}\n              onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              onFocus={() => setFocusedIndex(index)}\n              isFocused={focusedIndex === index}\n              isMobile={isMobile}\n              testId={item.testId}\n            />\n          ))}\n        </div>\n\n        {/* ESC hint */}\n        <div\n          id=\"pause-hint\"\n          data-testid=\"pause-hint\"\n          style={{\n            marginTop: isMobile ? \"40px\" : \"60px\",\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: themeColors.textSecondary,\n            fontFamily: theme.fontFamily.KOREAN,\n            textAlign: \"center\",\n          }}\n        >\n          ESC 키를 눌러 계속 | Press ESC to resume\n          <br />\n          ↑↓ 키로 이동 | Use ↑↓ to navigate\n        </div>\n      </div>\n\n      {/* Controls Guide Submenu */}\n      {activeSubmenu === \"controls\" && (\n        <ControlsGuide\n          onClose={() => {\n            setActiveSubmenu(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n\n      {/* Settings Submenu */}\n      {activeSubmenu === \"settings\" && (\n        <QuickSettings\n          onClose={() => {\n            setActiveSubmenu(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n\n      {/* Restart Confirmation Dialog */}\n      {showConfirm === \"restart\" && (\n        <ConfirmDialog\n          isOpen={true}\n          title=\"Restart Match?\"\n          titleKorean=\"경기를 재시작하시겠습니까?\"\n          message=\"All progress in the current match will be lost.\"\n          messageKorean=\"현재 경기의 모든 진행 상황이 초기화됩니다.\"\n          onConfirm={() => {\n            setShowConfirm(null);\n            onRestart();\n          }}\n          onCancel={() => {\n            setShowConfirm(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n\n      {/* Return to Menu Confirmation Dialog */}\n      {showConfirm === \"menu\" && (\n        <ConfirmDialog\n          isOpen={true}\n          title=\"Return to Menu?\"\n          titleKorean=\"메인 메뉴로 돌아가시겠습니까?\"\n          message=\"All progress in the current match will be lost.\"\n          messageKorean=\"현재 경기의 모든 진행 상황이 손실됩니다.\"\n          onConfirm={() => {\n            setShowConfirm(null);\n            onReturnToMenu();\n          }}\n          onCancel={() => {\n            setShowConfirm(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n    </>\n  );\n};\n\nexport default PauseMenu;\n"],"mappings":"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"}
+{"version":3,"file":"PauseMenu.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenu.tsx"],"sourcesContent":["/**\n * PauseMenu Component - Main pause menu overlay\n *\n * Features:\n * - Resume combat\n * - Restart match\n * - View controls\n * - Adjust settings\n * - Return to menu (with confirmation)\n * - Korean/English bilingual text\n * - Cyberpunk Korean theming\n * - Backdrop blur effect\n * - WCAG 2.1 Level AA compliant\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Focus indicators with high contrast\n * - ARIA labels for screen readers\n * \n * Refactored to use useKoreanTheme for consistent theming\n */\n\nimport React, { useCallback, useMemo, useState, useEffect, useRef } from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport ConfirmDialog from \"../../../../shared/ui/shared/ConfirmDialog\";\nimport ControlsGuide from \"./ControlsGuide\";\nimport QuickSettings from \"./QuickSettings\";\nimport { handleKeyboardNav } from \"../../../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../../../types/AccessibilityTypes\";\nimport { PauseMenuButton } from \"./PauseMenuButton\";\n\nexport interface PauseMenuProps {\n  readonly onResume: () => void;\n  readonly onRestart: () => void;\n  readonly onReturnToMenu: () => void;\n  readonly isMobile: boolean;\n}\n\ninterface MenuItem {\n  readonly key: string;\n  readonly labelKorean: string;\n  readonly labelEnglish: string;\n  readonly testId: string;\n  readonly onClick: () => void;\n  readonly icon?: string;\n}\n\n/**\n * PauseMenu - Main pause menu with options and submenus\n */\nexport const PauseMenu: React.FC<PauseMenuProps> = ({\n  onResume,\n  onRestart,\n  onReturnToMenu,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"lg\", isMobile });\n  const themeColors = useMemo(() => ({\n    overlayBg: hexToRgbaString(theme.colors.BLACK_SOLID, 0.85),\n    accentGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n    accentGoldGlow: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n    textSecondary: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.8),\n  }), [theme.colors.BLACK_SOLID, theme.colors.ACCENT_GOLD, theme.colors.TEXT_SECONDARY]);\n  const [activeSubmenu, setActiveSubmenu] = useState<\n    \"controls\" | \"settings\" | null\n  >(null);\n  const [showConfirm, setShowConfirm] = useState<\n    \"restart\" | \"menu\" | null\n  >(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(0);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Memoize menuItems to prevent recreation on every render\n  const menuItems: MenuItem[] = React.useMemo(\n    () => [\n      {\n        key: \"resume\",\n        labelKorean: \"계속\",\n        labelEnglish: \"Resume\",\n        testId: \"pause-resume-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          onResume();\n        },\n        icon: \"▶️\",\n      },\n      {\n        key: \"restart\",\n        labelKorean: \"재시작\",\n        labelEnglish: \"Restart Match\",\n        testId: \"pause-restart-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setShowConfirm(\"restart\");\n        },\n        icon: \"🔄\",\n      },\n      {\n        key: \"controls\",\n        labelKorean: \"조작법\",\n        labelEnglish: \"Controls\",\n        testId: \"pause-controls-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setActiveSubmenu(\"controls\");\n        },\n        icon: \"🎮\",\n      },\n      {\n        key: \"settings\",\n        labelKorean: \"설정\",\n        labelEnglish: \"Settings\",\n        testId: \"pause-settings-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setActiveSubmenu(\"settings\");\n        },\n        icon: \"⚙️\",\n      },\n      {\n        key: \"menu\",\n        labelKorean: \"메인 메뉴\",\n        labelEnglish: \"Return to Menu\",\n        testId: \"pause-menu-button\",\n        onClick: () => {\n          audio.playSFX(\"menu_select\");\n          setShowConfirm(\"menu\");\n        },\n        icon: \"🏠\",\n      },\n    ],\n    [audio, onResume]\n  );\n\n  // Focus first button on mount\n  useEffect(() => {\n    if (buttonRefs.current[0]) {\n      buttonRefs.current[0].focus();\n    }\n  }, [menuItems]);\n\n  // Keyboard navigation handler\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, index: number) => {\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          menuItems[index].onClick();\n        },\n        onCancel: () => {\n          onResume();\n        },\n        onNavigate: (direction) => {\n          if (direction === 'up') {\n            const newIndex = (index - 1 + menuItems.length) % menuItems.length;\n            setFocusedIndex(newIndex);\n            buttonRefs.current[newIndex]?.focus();\n          } else if (direction === 'down') {\n            const newIndex = (index + 1) % menuItems.length;\n            setFocusedIndex(newIndex);\n            buttonRefs.current[newIndex]?.focus();\n          }\n        },\n      });\n    },\n    [menuItems, onResume]\n  );\n\n  // ESC key handling is now managed by the parent (CombatScreen3D) to avoid conflicts\n\n  return (\n    <>\n      {/* Main Pause Menu */}\n      <div\n        data-testid=\"pause-menu\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"pause-title\"\n        aria-describedby=\"pause-hint\"\n        style={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: themeColors.overlayBg,\n          backdropFilter: \"blur(8px)\",\n          zIndex: 1000,\n          pointerEvents: \"auto\",\n        }}\n      >\n        {/* Pause Title */}\n        <h1\n          id=\"pause-title\"\n          data-testid=\"pause-title\"\n          style={{\n            fontSize: isMobile ? \"48px\" : \"72px\",\n            color: themeColors.accentGold,\n            fontFamily: theme.fontFamily.KOREAN,\n            fontWeight: \"bold\",\n            margin: `0 0 ${isMobile ? \"40px\" : \"60px\"} 0`,\n            textShadow: `0 0 30px ${themeColors.accentGoldGlow}`,\n            textAlign: \"center\",\n          }}\n        >\n          일시정지 | Paused\n        </h1>\n\n        {/* Menu Buttons */}\n        <div\n          role=\"menu\"\n          aria-label={createBilingualLabel('일시정지 메뉴', 'Pause Menu').label}\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: isMobile ? \"12px\" : \"16px\",\n            minWidth: isMobile ? \"280px\" : \"360px\",\n          }}\n        >\n          {menuItems.map((item, index) => (\n            <PauseMenuButton\n              key={item.key}\n              ref={(el) => { buttonRefs.current[index] = el; }}\n              labelKorean={item.labelKorean}\n              labelEnglish={item.labelEnglish}\n              icon={item.icon}\n              onClick={item.onClick}\n              onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              onFocus={() => setFocusedIndex(index)}\n              isFocused={focusedIndex === index}\n              isMobile={isMobile}\n              testId={item.testId}\n            />\n          ))}\n        </div>\n\n        {/* ESC hint */}\n        <div\n          id=\"pause-hint\"\n          data-testid=\"pause-hint\"\n          style={{\n            marginTop: isMobile ? \"40px\" : \"60px\",\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: themeColors.textSecondary,\n            fontFamily: theme.fontFamily.KOREAN,\n            textAlign: \"center\",\n          }}\n        >\n          ESC 키를 눌러 계속 | Press ESC to resume\n          <br />\n          ↑↓ 키로 이동 | Use ↑↓ to navigate\n        </div>\n      </div>\n\n      {/* Controls Guide Submenu */}\n      {activeSubmenu === \"controls\" && (\n        <ControlsGuide\n          onClose={() => {\n            setActiveSubmenu(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n\n      {/* Settings Submenu */}\n      {activeSubmenu === \"settings\" && (\n        <QuickSettings\n          onClose={() => {\n            setActiveSubmenu(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n\n      {/* Restart Confirmation Dialog */}\n      {showConfirm === \"restart\" && (\n        <ConfirmDialog\n          isOpen={true}\n          title=\"Restart Match?\"\n          titleKorean=\"경기를 재시작하시겠습니까?\"\n          message=\"All progress in the current match will be lost.\"\n          messageKorean=\"현재 경기의 모든 진행 상황이 초기화됩니다.\"\n          onConfirm={() => {\n            setShowConfirm(null);\n            onRestart();\n          }}\n          onCancel={() => {\n            setShowConfirm(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n\n      {/* Return to Menu Confirmation Dialog */}\n      {showConfirm === \"menu\" && (\n        <ConfirmDialog\n          isOpen={true}\n          title=\"Return to Menu?\"\n          titleKorean=\"메인 메뉴로 돌아가시겠습니까?\"\n          message=\"All progress in the current match will be lost.\"\n          messageKorean=\"현재 경기의 모든 진행 상황이 손실됩니다.\"\n          onConfirm={() => {\n            setShowConfirm(null);\n            onReturnToMenu();\n          }}\n          onCancel={() => {\n            setShowConfirm(null);\n          }}\n          isMobile={isMobile}\n        />\n      )}\n    </>\n  );\n};\n\nexport default PauseMenu;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/controls/PauseMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PauseMenuButton.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenuButton.tsx"],"sourcesContent":["/**\n * PauseMenuButton - Reusable button for pause menu items\n * \n * Provides consistent styling for pause menu action buttons with Korean theming.\n * Extracted from PauseMenu to reduce code duplication.\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/screens/combat/controls\n * @category Combat UI\n * @korean 일시정지메뉴버튼\n */\n\nimport React, { forwardRef } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { getFocusStyle } from \"../../../../../utils/accessibility\";\n\nexport interface PauseMenuButtonProps {\n  /** Korean label text */\n  readonly labelKorean: string;\n  /** English label text */\n  readonly labelEnglish: string;\n  /** Optional icon/emoji */\n  readonly icon?: string;\n  /** Click handler */\n  readonly onClick: () => void;\n  /** Mouse enter handler */\n  readonly onMouseEnter?: () => void;\n  /** Key down handler */\n  readonly onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  /** Focus handler */\n  readonly onFocus?: () => void;\n  /** Whether button is focused */\n  readonly isFocused: boolean;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n  /** Test ID */\n  readonly testId: string;\n}\n\n/**\n * PauseMenuButton Component\n * \n * Styled button for pause menu with:\n * - Korean/English bilingual text with icon support\n * - Cyan themed styling matching combat screen via useKoreanTheme\n * - Hover and focus effects with accessibility support\n * - Responsive sizing for mobile/desktop\n * \n * Reduces code duplication by ~70 lines from PauseMenu (inline button styling)\n * \n * @example\n * ```tsx\n * <PauseMenuButton\n *   ref={buttonRef}\n *   labelKorean=\"계속\"\n *   labelEnglish=\"Resume\"\n *   icon=\"▶️\"\n *   onClick={handleResume}\n *   isFocused={focusedIndex === 0}\n *   isMobile={false}\n *   testId=\"pause-resume-button\"\n * />\n * ```\n */\nexport const PauseMenuButton = forwardRef<\n  HTMLButtonElement,\n  PauseMenuButtonProps\n>(\n  (\n    {\n      labelKorean,\n      labelEnglish,\n      icon,\n      onClick,\n      onMouseEnter,\n      onKeyDown,\n      onFocus,\n      isFocused,\n      isMobile,\n      testId,\n    },\n    ref,\n  ) => {\n    const theme = useKoreanTheme({ variant: \"primary\", size: \"lg\", isMobile });\n    \n    return (\n      <button\n        ref={ref}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        data-testid={testId}\n        aria-label={`${labelKorean} | ${labelEnglish}`}\n        role=\"menuitem\"\n        tabIndex={0}\n        style={{\n          padding: isMobile ? \"12px 24px\" : \"16px 32px\",\n          fontSize: isMobile ? \"16px\" : \"20px\",\n          backgroundColor: hexToRgbaString(\n            theme.colors.UI_BACKGROUND_MEDIUM,\n            0.9,\n          ),\n          color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n          borderRadius: \"8px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n          textAlign: \"center\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: \"12px\",\n          boxShadow: \"none\",\n          ...getFocusStyle(isFocused, {\n            outlineWidth: 3,\n            boxShadow: `0 0 0 4px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}, 0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5)}`,\n          }),\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1,\n          );\n          e.currentTarget.style.color = hexToRgbaString(\n            theme.colors.UI_BACKGROUND_DARK,\n            1,\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n          e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            0.5,\n          )}`;\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.UI_BACKGROUND_MEDIUM,\n            0.9,\n          );\n          e.currentTarget.style.color = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1,\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n          e.currentTarget.style.boxShadow = \"none\";\n        }}\n      >\n        {icon && <span style={{ fontSize: \"24px\" }}>{icon}</span>}\n        <span>\n          {labelKorean} | {labelEnglish}\n        </span>\n      </button>\n    );\n  },\n);\n\nPauseMenuButton.displayName = \"PauseMenuButton\";\n\nexport default PauseMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,kBAAkB,YAK3B,EACE,aACA,cACA,MACA,SACA,cACA,WACA,SACA,WACA,UACA,UAEF,QACG;CACH,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;AAE1E,QACE,qBAAC,UAAD;EACO;EACI;EACK;EACH;EACF;EACT,eAAa;EACb,cAAY,GAAG,YAAY,KAAK;EAChC,MAAK;EACL,UAAU;EACV,OAAO;GACL,SAAS,WAAW,cAAc;GAClC,UAAU,WAAW,SAAS;GAC9B,iBAAiB,gBACf,MAAM,OAAO,sBACb,GACD;GACD,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;GACpD,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;GACpE,cAAc;GACd,YAAY,MAAM,WAAW;GAC7B,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,WAAW;GACX,GAAG,cAAc,WAAW;IAC1B,cAAc;IACd,WAAW,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI,CAAC,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;IACrI,CAAC;GACH;EACD,cAAc,MAAM;AAClB,KAAE,cAAc,MAAM,kBAAkB,gBACtC,MAAM,OAAO,cACb,EACD;AACD,KAAE,cAAc,MAAM,QAAQ,gBAC5B,MAAM,OAAO,oBACb,EACD;AACD,KAAE,cAAc,MAAM,YAAY;AAClC,KAAE,cAAc,MAAM,YAAY,YAAY,gBAC5C,MAAM,OAAO,cACb,GACD;;EAEH,aAAa,MAAM;AACjB,KAAE,cAAc,MAAM,kBAAkB,gBACtC,MAAM,OAAO,sBACb,GACD;AACD,KAAE,cAAc,MAAM,QAAQ,gBAC5B,MAAM,OAAO,cACb,EACD;AACD,KAAE,cAAc,MAAM,YAAY;AAClC,KAAE,cAAc,MAAM,YAAY;;YA5DtC,CA+DG,QAAQ,oBAAC,QAAD;GAAM,OAAO,EAAE,UAAU,QAAQ;aAAG;GAAY,CAAA,EACzD,qBAAC,QAAD,EAAA,UAAA;GACG;GAAY;GAAI;GACZ,EAAA,CAAA,CACA;;EAGd;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"PauseMenuButton.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenuButton.tsx"],"sourcesContent":["/**\n * PauseMenuButton - Reusable button for pause menu items\n * \n * Provides consistent styling for pause menu action buttons with Korean theming.\n * Extracted from PauseMenu to reduce code duplication.\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/screens/combat/controls\n * @category Combat UI\n * @korean 일시정지메뉴버튼\n */\n\nimport React, { forwardRef } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { getFocusStyle } from \"../../../../../utils/accessibility\";\n\nexport interface PauseMenuButtonProps {\n  /** Korean label text */\n  readonly labelKorean: string;\n  /** English label text */\n  readonly labelEnglish: string;\n  /** Optional icon/emoji */\n  readonly icon?: string;\n  /** Click handler */\n  readonly onClick: () => void;\n  /** Mouse enter handler */\n  readonly onMouseEnter?: () => void;\n  /** Key down handler */\n  readonly onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  /** Focus handler */\n  readonly onFocus?: () => void;\n  /** Whether button is focused */\n  readonly isFocused: boolean;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n  /** Test ID */\n  readonly testId: string;\n}\n\n/**\n * PauseMenuButton Component\n * \n * Styled button for pause menu with:\n * - Korean/English bilingual text with icon support\n * - Cyan themed styling matching combat screen via useKoreanTheme\n * - Hover and focus effects with accessibility support\n * - Responsive sizing for mobile/desktop\n * \n * Reduces code duplication by ~70 lines from PauseMenu (inline button styling)\n * \n * @example\n * ```tsx\n * <PauseMenuButton\n *   ref={buttonRef}\n *   labelKorean=\"계속\"\n *   labelEnglish=\"Resume\"\n *   icon=\"▶️\"\n *   onClick={handleResume}\n *   isFocused={focusedIndex === 0}\n *   isMobile={false}\n *   testId=\"pause-resume-button\"\n * />\n * ```\n */\nexport const PauseMenuButton = forwardRef<\n  HTMLButtonElement,\n  PauseMenuButtonProps\n>(\n  (\n    {\n      labelKorean,\n      labelEnglish,\n      icon,\n      onClick,\n      onMouseEnter,\n      onKeyDown,\n      onFocus,\n      isFocused,\n      isMobile,\n      testId,\n    },\n    ref,\n  ) => {\n    const theme = useKoreanTheme({ variant: \"primary\", size: \"lg\", isMobile });\n    \n    return (\n      <button\n        ref={ref}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        data-testid={testId}\n        aria-label={`${labelKorean} | ${labelEnglish}`}\n        role=\"menuitem\"\n        tabIndex={0}\n        style={{\n          padding: isMobile ? \"12px 24px\" : \"16px 32px\",\n          fontSize: isMobile ? \"16px\" : \"20px\",\n          backgroundColor: hexToRgbaString(\n            theme.colors.UI_BACKGROUND_MEDIUM,\n            0.9,\n          ),\n          color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n          borderRadius: \"8px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n          textAlign: \"center\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: \"12px\",\n          boxShadow: \"none\",\n          ...getFocusStyle(isFocused, {\n            outlineWidth: 3,\n            boxShadow: `0 0 0 4px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}, 0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5)}`,\n          }),\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1,\n          );\n          e.currentTarget.style.color = hexToRgbaString(\n            theme.colors.UI_BACKGROUND_DARK,\n            1,\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n          e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            0.5,\n          )}`;\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.UI_BACKGROUND_MEDIUM,\n            0.9,\n          );\n          e.currentTarget.style.color = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1,\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n          e.currentTarget.style.boxShadow = \"none\";\n        }}\n      >\n        {icon && <span style={{ fontSize: \"24px\" }}>{icon}</span>}\n        <span>\n          {labelKorean} | {labelEnglish}\n        </span>\n      </button>\n    );\n  },\n);\n\nPauseMenuButton.displayName = \"PauseMenuButton\";\n\nexport default PauseMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,kBAAkB,YAK3B,EACE,aACA,cACA,MACA,SACA,cACA,WACA,SACA,WACA,UACA,UAEF,QACG;CACH,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,OACE,qBAAC,UAAD;EACO;EACI;EACK;EACH;EACF;EACT,eAAa;EACb,cAAY,GAAG,YAAY,KAAK;EAChC,MAAK;EACL,UAAU;EACV,OAAO;GACL,SAAS,WAAW,cAAc;GAClC,UAAU,WAAW,SAAS;GAC9B,iBAAiB,gBACf,MAAM,OAAO,sBACb,GACD;GACD,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;GACpD,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;GACpE,cAAc;GACd,YAAY,MAAM,WAAW;GAC7B,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,WAAW;GACX,GAAG,cAAc,WAAW;IAC1B,cAAc;IACd,WAAW,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI,CAAC,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;IACrI,CAAC;GACH;EACD,cAAc,MAAM;GAClB,EAAE,cAAc,MAAM,kBAAkB,gBACtC,MAAM,OAAO,cACb,EACD;GACD,EAAE,cAAc,MAAM,QAAQ,gBAC5B,MAAM,OAAO,oBACb,EACD;GACD,EAAE,cAAc,MAAM,YAAY;GAClC,EAAE,cAAc,MAAM,YAAY,YAAY,gBAC5C,MAAM,OAAO,cACb,GACD;;EAEH,aAAa,MAAM;GACjB,EAAE,cAAc,MAAM,kBAAkB,gBACtC,MAAM,OAAO,sBACb,GACD;GACD,EAAE,cAAc,MAAM,QAAQ,gBAC5B,MAAM,OAAO,cACb,EACD;GACD,EAAE,cAAc,MAAM,YAAY;GAClC,EAAE,cAAc,MAAM,YAAY;;YA5DtC,CA+DG,QAAQ,oBAAC,QAAD;GAAM,OAAO,EAAE,UAAU,QAAQ;aAAG;GAAY,CAAA,EACzD,qBAAC,QAAD,EAAA,UAAA;GACG;GAAY;GAAI;GACZ,EAAA,CAAA,CACA;;EAGd;AAED,gBAAgB,cAAc"}

package/lib/components/screens/combat/components/controls/QuickSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSettings.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/QuickSettings.tsx"],"sourcesContent":["/**\n * QuickSettings Component - In-game settings panel\n * \n * Features:\n * - Volume controls (SFX, Music)\n * - Audio toggle\n * - Korean/English bilingual labels\n * - Cyberpunk Korean theming\n * - Uses useKoreanTheme for consistent styling\n * - Enhanced accessibility with ARIA labels\n * \n * @module components/combat/controls\n * @category Combat UI\n * @korean 빠른설정\n */\n\nimport React from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface QuickSettingsProps {\n  readonly onClose: () => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * QuickSettings - In-game settings overlay for audio controls\n * \n * Refactored to use useKoreanTheme for consistent theming:\n * - useKoreanTheme hook for centralized color and font management\n * - Improved accessibility with ARIA labels and dialog semantics\n * - Enhanced form controls with proper ARIA attributes\n * \n * Note: Uses standard HTML button elements rather than BaseButton\n * since this is a 2D HTML overlay component, not a Three.js component.\n * \n * @example\n * ```tsx\n * <QuickSettings\n *   onClose={() => setShowSettings(false)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const QuickSettings: React.FC<QuickSettingsProps> = ({\n  onClose,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  return (\n    <div\n      data-testid=\"quick-settings\"\n      role=\"dialog\"\n      aria-labelledby=\"settings-title\"\n      aria-modal=\"true\"\n      style={{\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        padding: isMobile ? \"24px\" : \"32px\",\n        backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n        borderRadius: \"12px\",\n        minWidth: isMobile ? \"280px\" : \"360px\",\n        boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n        zIndex: 1000,\n      }}\n    >\n      {/* Title */}\n      <h2\n        id=\"settings-title\"\n        data-testid=\"settings-title\"\n        style={{\n          fontSize: isMobile ? \"20px\" : \"24px\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: \"0 0 24px 0\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.4)}`,\n        }}\n      >\n        설정 | Settings\n      </h2>\n\n      {/* Volume Controls */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isMobile ? \"16px\" : \"20px\",\n        }}\n      >\n        {/* SFX Volume */}\n        <div data-testid=\"sfx-volume-control\">\n          <label\n            htmlFor=\"sfx-volume-slider\"\n            style={{\n              display: \"block\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              marginBottom: \"8px\",\n            }}\n          >\n            효과음 | SFX Volume\n          </label>\n          <input\n            id=\"sfx-volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={audio.sfxVolume * 100}\n            onChange={(e) => {\n              const value = parseInt(e.target.value) / 100;\n              audio.setVolume(\"sfx\", value);\n            }}\n            aria-label=\"Sound effects volume\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(audio.sfxVolume * 100)}\n            data-testid=\"sfx-volume-slider\"\n            style={{\n              width: \"100%\",\n              height: \"6px\",\n              borderRadius: \"3px\",\n              outline: \"none\",\n              cursor: \"pointer\",\n            }}\n          />\n          <div\n            data-testid=\"sfx-volume-value\"\n            aria-live=\"polite\"\n            style={{\n              fontSize: isMobile ? \"12px\" : \"14px\",\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              marginTop: \"4px\",\n              textAlign: \"right\",\n            }}\n          >\n            {Math.round(audio.sfxVolume * 100)}%\n          </div>\n        </div>\n\n        {/* Music Volume */}\n        <div data-testid=\"music-volume-control\">\n          <label\n            htmlFor=\"music-volume-slider\"\n            style={{\n              display: \"block\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              marginBottom: \"8px\",\n            }}\n          >\n            음악 | Music Volume\n          </label>\n          <input\n            id=\"music-volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={audio.musicVolume * 100}\n            onChange={(e) => {\n              const value = parseInt(e.target.value) / 100;\n              audio.setVolume(\"music\", value);\n            }}\n            aria-label=\"Music volume\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(audio.musicVolume * 100)}\n            data-testid=\"music-volume-slider\"\n            style={{\n              width: \"100%\",\n              height: \"6px\",\n              borderRadius: \"3px\",\n              outline: \"none\",\n              cursor: \"pointer\",\n            }}\n          />\n          <div\n            data-testid=\"music-volume-value\"\n            aria-live=\"polite\"\n            style={{\n              fontSize: isMobile ? \"12px\" : \"14px\",\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              marginTop: \"4px\",\n              textAlign: \"right\",\n            }}\n          >\n            {Math.round(audio.musicVolume * 100)}%\n          </div>\n        </div>\n\n        {/* Mute Toggle */}\n        <div\n          data-testid=\"mute-toggle-control\"\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n          }}\n        >\n          <label\n            htmlFor=\"mute-toggle-button\"\n            style={{\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n            }}\n          >\n            음소거 | Mute All\n          </label>\n          <button\n            id=\"mute-toggle-button\"\n            onClick={() => {\n              if (audio.muted) {\n                audio.unmute();\n              } else {\n                audio.mute();\n              }\n              audio.playSFX(\"menu_click\");\n            }}\n            onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n            aria-label={audio.muted ? \"Unmute audio\" : \"Mute audio\"}\n            aria-pressed={audio.muted}\n            data-testid=\"mute-toggle-button\"\n            style={{\n              padding: isMobile ? \"8px 16px\" : \"10px 20px\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              backgroundColor: audio.muted\n                ? hexToRgbaString(theme.colors.ACCENT_GOLD, 1)\n                : hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1),\n              color: audio.muted\n                ? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1)\n                : hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              border: audio.muted\n                ? \"none\"\n                : `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n              borderRadius: \"6px\",\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              cursor: \"pointer\",\n              transition: \"all 0.2s ease\",\n            }}\n          >\n            {audio.muted ? \"🔇\" : \"🔊\"}\n          </button>\n        </div>\n      </div>\n\n      {/* Close Button */}\n      <button\n        onClick={() => {\n          audio.playSFX(\"menu_back\");\n          onClose();\n        }}\n        onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n        aria-label=\"Close settings dialog\"\n        data-testid=\"settings-close-button\"\n        style={{\n          marginTop: isMobile ? \"24px\" : \"32px\",\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n          border: \"none\",\n          borderRadius: \"6px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.ACCENT_GOLD,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n        }}\n      >\n        닫기 | Close\n      </button>\n    </div>\n  );\n};\n\nexport default QuickSettings;\n"],"mappings":"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"}
+{"version":3,"file":"QuickSettings.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/QuickSettings.tsx"],"sourcesContent":["/**\n * QuickSettings Component - In-game settings panel\n * \n * Features:\n * - Volume controls (SFX, Music)\n * - Audio toggle\n * - Korean/English bilingual labels\n * - Cyberpunk Korean theming\n * - Uses useKoreanTheme for consistent styling\n * - Enhanced accessibility with ARIA labels\n * \n * @module components/combat/controls\n * @category Combat UI\n * @korean 빠른설정\n */\n\nimport React from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface QuickSettingsProps {\n  readonly onClose: () => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * QuickSettings - In-game settings overlay for audio controls\n * \n * Refactored to use useKoreanTheme for consistent theming:\n * - useKoreanTheme hook for centralized color and font management\n * - Improved accessibility with ARIA labels and dialog semantics\n * - Enhanced form controls with proper ARIA attributes\n * \n * Note: Uses standard HTML button elements rather than BaseButton\n * since this is a 2D HTML overlay component, not a Three.js component.\n * \n * @example\n * ```tsx\n * <QuickSettings\n *   onClose={() => setShowSettings(false)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const QuickSettings: React.FC<QuickSettingsProps> = ({\n  onClose,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  return (\n    <div\n      data-testid=\"quick-settings\"\n      role=\"dialog\"\n      aria-labelledby=\"settings-title\"\n      aria-modal=\"true\"\n      style={{\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        padding: isMobile ? \"24px\" : \"32px\",\n        backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n        borderRadius: \"12px\",\n        minWidth: isMobile ? \"280px\" : \"360px\",\n        boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n        zIndex: 1000,\n      }}\n    >\n      {/* Title */}\n      <h2\n        id=\"settings-title\"\n        data-testid=\"settings-title\"\n        style={{\n          fontSize: isMobile ? \"20px\" : \"24px\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: \"0 0 24px 0\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.4)}`,\n        }}\n      >\n        설정 | Settings\n      </h2>\n\n      {/* Volume Controls */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isMobile ? \"16px\" : \"20px\",\n        }}\n      >\n        {/* SFX Volume */}\n        <div data-testid=\"sfx-volume-control\">\n          <label\n            htmlFor=\"sfx-volume-slider\"\n            style={{\n              display: \"block\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              marginBottom: \"8px\",\n            }}\n          >\n            효과음 | SFX Volume\n          </label>\n          <input\n            id=\"sfx-volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={audio.sfxVolume * 100}\n            onChange={(e) => {\n              const value = parseInt(e.target.value) / 100;\n              audio.setVolume(\"sfx\", value);\n            }}\n            aria-label=\"Sound effects volume\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(audio.sfxVolume * 100)}\n            data-testid=\"sfx-volume-slider\"\n            style={{\n              width: \"100%\",\n              height: \"6px\",\n              borderRadius: \"3px\",\n              outline: \"none\",\n              cursor: \"pointer\",\n            }}\n          />\n          <div\n            data-testid=\"sfx-volume-value\"\n            aria-live=\"polite\"\n            style={{\n              fontSize: isMobile ? \"12px\" : \"14px\",\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              marginTop: \"4px\",\n              textAlign: \"right\",\n            }}\n          >\n            {Math.round(audio.sfxVolume * 100)}%\n          </div>\n        </div>\n\n        {/* Music Volume */}\n        <div data-testid=\"music-volume-control\">\n          <label\n            htmlFor=\"music-volume-slider\"\n            style={{\n              display: \"block\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              marginBottom: \"8px\",\n            }}\n          >\n            음악 | Music Volume\n          </label>\n          <input\n            id=\"music-volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={audio.musicVolume * 100}\n            onChange={(e) => {\n              const value = parseInt(e.target.value) / 100;\n              audio.setVolume(\"music\", value);\n            }}\n            aria-label=\"Music volume\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(audio.musicVolume * 100)}\n            data-testid=\"music-volume-slider\"\n            style={{\n              width: \"100%\",\n              height: \"6px\",\n              borderRadius: \"3px\",\n              outline: \"none\",\n              cursor: \"pointer\",\n            }}\n          />\n          <div\n            data-testid=\"music-volume-value\"\n            aria-live=\"polite\"\n            style={{\n              fontSize: isMobile ? \"12px\" : \"14px\",\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              marginTop: \"4px\",\n              textAlign: \"right\",\n            }}\n          >\n            {Math.round(audio.musicVolume * 100)}%\n          </div>\n        </div>\n\n        {/* Mute Toggle */}\n        <div\n          data-testid=\"mute-toggle-control\"\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n          }}\n        >\n          <label\n            htmlFor=\"mute-toggle-button\"\n            style={{\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n            }}\n          >\n            음소거 | Mute All\n          </label>\n          <button\n            id=\"mute-toggle-button\"\n            onClick={() => {\n              if (audio.muted) {\n                audio.unmute();\n              } else {\n                audio.mute();\n              }\n              audio.playSFX(\"menu_click\");\n            }}\n            onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n            aria-label={audio.muted ? \"Unmute audio\" : \"Mute audio\"}\n            aria-pressed={audio.muted}\n            data-testid=\"mute-toggle-button\"\n            style={{\n              padding: isMobile ? \"8px 16px\" : \"10px 20px\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              backgroundColor: audio.muted\n                ? hexToRgbaString(theme.colors.ACCENT_GOLD, 1)\n                : hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1),\n              color: audio.muted\n                ? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1)\n                : hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              border: audio.muted\n                ? \"none\"\n                : `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n              borderRadius: \"6px\",\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              cursor: \"pointer\",\n              transition: \"all 0.2s ease\",\n            }}\n          >\n            {audio.muted ? \"🔇\" : \"🔊\"}\n          </button>\n        </div>\n      </div>\n\n      {/* Close Button */}\n      <button\n        onClick={() => {\n          audio.playSFX(\"menu_back\");\n          onClose();\n        }}\n        onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n        aria-label=\"Close settings dialog\"\n        data-testid=\"settings-close-button\"\n        style={{\n          marginTop: isMobile ? \"24px\" : \"32px\",\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\n          border: \"none\",\n          borderRadius: \"6px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n          transition: \"all 0.2s ease\",\n        }}\n        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.ACCENT_GOLD,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n        }}\n      >\n        닫기 | Close\n      </button>\n    </div>\n  );\n};\n\nexport default QuickSettings;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/effects/BloodDecals3D.js.map

@@ -1 +1 @@
-{"version":3,"file":"BloodDecals3D.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/effects/BloodDecals3D.tsx"],"sourcesContent":["/**\n * BloodDecals3D - Blood accumulation decal system for character models\n *\n * Projects blood decals onto 3D character surfaces using decal geometry for\n * persistent blood visualization. Decals fade over time and track injury\n * persistence across combat rounds.\n *\n * Features:\n * - Decal projection onto character meshes\n * - Blood accumulation from hits and lacerations\n * - Blood trail visualization\n * - Cross-round injury persistence\n * - Korean-themed blood visualization\n *\n * @module components/combat/BloodDecals3D\n * @category Combat Effects\n * @korean 피흔적3D\n */\n\nimport { DecalGeometry } from \"three/examples/jsm/geometries/DecalGeometry.js\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useRef, useMemo, useEffect } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../../types/constants\";\n\n/**\n * Blood decal configuration\n */\nexport interface BloodDecal {\n  /** Unique identifier */\n  readonly id: string;\n  /** Position in world space */\n  readonly position: [number, number, number];\n  /** Normal vector for surface projection */\n  readonly normal: [number, number, number];\n  /** Size of decal */\n  readonly size: [number, number, number];\n  /** Rotation around normal (radians) */\n  readonly rotation: number;\n  /** Opacity (0.0 to 1.0) */\n  readonly opacity: number;\n  /** Creation timestamp */\n  readonly timestamp: number;\n  /** Whether decal is from a laceration (adds blood trail) */\n  readonly isLaceration?: boolean;\n}\n\n/**\n * Props for BloodDecals3D component\n */\nexport interface BloodDecals3DProps {\n  /** Active blood decals to render */\n  readonly decals: readonly BloodDecal[];\n  /** Character mesh reference for decal projection */\n  readonly targetMeshRef?: React.RefObject<THREE.Mesh>;\n  /** Whether decals are enabled (violence settings) */\n  readonly enabled?: boolean;\n  /** Mobile mode (simplified decals) */\n  readonly isMobile?: boolean;\n  /** Decal fade duration in seconds */\n  readonly fadeDuration?: number;\n  /** Callback when decal fully fades */\n  readonly onDecalComplete?: (decalId: string) => void;\n}\n\n/**\n * Blood decal constants\n */\nconst DECAL_CONSTANTS = {\n  /** Default fade duration (seconds) */\n  FADE_DURATION: 15.0,\n  /** Base decal size */\n  BASE_SIZE: [0.15, 0.15, 0.05] as [number, number, number],\n  /** Laceration trail size multiplier */\n  TRAIL_MULTIPLIER: 3.0,\n  /** Maximum concurrent decals for performance */\n  MAX_DECALS: 20,\n  /** Mobile decal limit */\n  MAX_DECALS_MOBILE: 10,\n} as const;\n\n/**\n * Generate blood decal texture (procedural)\n */\n/**\n * Generate a procedural blood texture with irregular edges.\n * Note: Uses Math.random() for visual variety. Each texture will be slightly different,\n * providing natural variation in blood splatter appearance across different decals.\n * This is intentional for realism, though it does create unique textures per component.\n * For better memory efficiency in production, consider pre-generating 3-5 variations\n * and randomly selecting one.\n */\nconst createBloodTexture = (): THREE.Texture => {\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = 256;\n  canvas.height = 256;\n  const ctx = canvas.getContext(\"2d\");\n  \n  if (!ctx) {\n    // Fallback: Return a basic transparent texture with matching dimensions\n    console.warn(\"Blood decal texture generation failed: Could not get 2D context\");\n    const fallbackCanvas = document.createElement(\"canvas\");\n    fallbackCanvas.width = 256;\n    fallbackCanvas.height = 256;\n    return new THREE.CanvasTexture(fallbackCanvas);\n  }\n\n  // Background (transparent)\n  ctx.clearRect(0, 0, 256, 256);\n\n  // Blood splatter pattern\n  const centerX = 128;\n  const centerY = 128;\n\n  // Create gradient from center\n  const gradient = ctx.createRadialGradient(\n    centerX,\n    centerY,\n    0,\n    centerX,\n    centerY,\n    100\n  );\n\n  // Blood color (dark red)\n  const bloodColor = new THREE.Color(KOREAN_COLORS.BLOODLOSS_INDICATOR);\n  const r = Math.floor(bloodColor.r * 255);\n  const g = Math.floor(bloodColor.g * 255);\n  const b = Math.floor(bloodColor.b * 255);\n\n  gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1.0)`);\n  gradient.addColorStop(0.6, `rgba(${r * 0.8}, ${g * 0.6}, ${b * 0.6}, 0.8)`);\n  gradient.addColorStop(1, `rgba(${r * 0.5}, ${g * 0.3}, ${b * 0.3}, 0)`);\n\n  ctx.fillStyle = gradient;\n  ctx.fillRect(0, 0, 256, 256);\n\n  // Add irregular edges for realistic look\n  for (let i = 0; i < 30; i++) {\n    const angle = (i / 30) * Math.PI * 2;\n    const radius = 80 + Math.random() * 20;\n    const x = centerX + Math.cos(angle) * radius;\n    const y = centerY + Math.sin(angle) * radius;\n    const size = 5 + Math.random() * 10;\n\n    ctx.fillStyle = `rgba(${r * 0.7}, ${g * 0.4}, ${b * 0.4}, ${0.5 + Math.random() * 0.3})`;\n    ctx.beginPath();\n    ctx.arc(x, y, size, 0, Math.PI * 2);\n    ctx.fill();\n  }\n\n  const texture = new THREE.CanvasTexture(canvas);\n  texture.needsUpdate = true;\n  return texture;\n};\n\n/**\n * Individual decal component\n */\nconst DecalMesh: React.FC<{\n  decal: BloodDecal;\n  texture: THREE.Texture;\n  targetMesh?: THREE.Mesh;\n  fadeDuration: number;\n}> = ({ decal, texture, targetMesh, fadeDuration }) => {\n  const meshRef = useRef<THREE.Mesh>(null);\n  const materialRef = useRef<THREE.MeshBasicMaterial | null>(null);\n  const ageRef = useRef(0);\n\n  // Create decal geometry\n  useEffect(() => {\n    if (!meshRef.current || !targetMesh) return;\n\n    try {\n      const position = new THREE.Vector3(...decal.position);\n      const size = new THREE.Vector3(...decal.size);\n\n      // Create decal geometry projected onto target mesh\n      // DecalGeometry requires Euler angles for orientation\n      const orientation = new THREE.Euler();\n      orientation.copy(targetMesh.rotation);\n      \n      const decalGeometry = new DecalGeometry(\n        targetMesh,\n        position,\n        orientation,\n        size\n      );\n\n      meshRef.current.geometry = decalGeometry;\n      \n      // Apply rotation to the mesh itself\n      meshRef.current.rotation.set(0, 0, decal.rotation);\n    } catch (error) {\n      // Handle decal projection failures\n      // This can occur when target mesh geometry is complex or decal position is invalid\n      // Decal will simply not render in this case\n      if (process.env.NODE_ENV === \"development\") {\n        // In development, log a diagnostic warning to help debug decal issues\n        console.warn(\"BloodDecals3D: Failed to project blood decal onto target mesh.\", {\n          decalId: decal.id,\n          position: decal.position,\n          size: decal.size,\n          error,\n        });\n      }\n    }\n  }, [decal, targetMesh]);\n\n  // Fade animation - update material opacity in animation loop\n  useFrame((_, delta) => {\n    if (!materialRef.current) return;\n\n    // Accumulate age using delta time instead of Date.now() for better performance\n    ageRef.current += delta;\n    const fadeProgress = Math.min(ageRef.current / fadeDuration, 1);\n    materialRef.current.opacity = decal.opacity * (1 - fadeProgress);\n  });\n\n  return (\n    <mesh ref={meshRef} data-testid={`blood-decal-${decal.id}`}>\n      <meshBasicMaterial\n        ref={materialRef}\n        map={texture}\n        transparent\n        opacity={decal.opacity}\n        depthTest={true}\n        depthWrite={false}\n        polygonOffset\n        polygonOffsetFactor={-4}\n      />\n    </mesh>\n  );\n};\n\n/**\n * BloodDecals3D Component\n *\n * Renders persistent blood decals on 3D character models using decal projection.\n * Decals fade over time and can persist across combat rounds for injury tracking.\n *\n * Performance optimized:\n * - Limited concurrent decals (20 desktop, 10 mobile)\n * - Efficient decal geometry generation\n * - Texture reuse across all decals\n * - Automatic cleanup of faded decals\n *\n * @example\n * ```tsx\n * const [bloodDecals, setBloodDecals] = useState<BloodDecal[]>([]);\n * const characterMeshRef = useRef<THREE.Mesh>(null);\n *\n * // On hit event\n * const handleHit = (position: [number, number, number], normal: [number, number, number]) => {\n *   setBloodDecals([...bloodDecals, {\n *     id: generateId(),\n *     position,\n *     normal,\n *     size: [0.15, 0.15, 0.05],\n *     rotation: Math.random() * Math.PI * 2,\n *     opacity: 0.8,\n *     timestamp: Date.now(),\n *     isLaceration: false,\n *   }]);\n * };\n *\n * <mesh ref={characterMeshRef}>\n *   <capsuleGeometry args={[0.5, 1.6, 16, 32]} />\n *   <meshStandardMaterial color={0xcccccc} />\n * </mesh>\n *\n * <BloodDecals3D\n *   decals={bloodDecals}\n *   targetMeshRef={characterMeshRef}\n *   enabled={violenceSettings.blood}\n *   isMobile={isMobile}\n *   onDecalComplete={(id) => {\n *     setBloodDecals(prev => prev.filter(d => d.id !== id));\n *   }}\n * />\n * ```\n */\nexport const BloodDecals3D: React.FC<BloodDecals3DProps> = ({\n  decals,\n  targetMeshRef,\n  enabled = true,\n  isMobile = false,\n  fadeDuration = DECAL_CONSTANTS.FADE_DURATION,\n  onDecalComplete,\n}) => {\n  // Track completed decals\n  const completedDecalsRef = useRef<Set<string>>(new Set());\n\n  // Performance limits\n  const maxDecals = isMobile\n    ? DECAL_CONSTANTS.MAX_DECALS_MOBILE\n    : DECAL_CONSTANTS.MAX_DECALS;\n\n  // Create shared blood texture\n  const bloodTexture = useMemo(() => createBloodTexture(), []);\n\n  // Limit decals for performance\n  const activeDecals = useMemo(() => {\n    // Sort by timestamp (newest first) and take max count\n    const sorted = [...decals].sort((a, b) => b.timestamp - a.timestamp);\n    return sorted.slice(0, maxDecals);\n  }, [decals, maxDecals]);\n\n  // Track decal ages using delta accumulation for better performance\n  const decalAgesRef = useRef<Map<string, number>>(new Map());\n\n  // Initialize ages for new decals\n  useEffect(() => {\n    activeDecals.forEach((decal) => {\n      if (!decalAgesRef.current.has(decal.id)) {\n        decalAgesRef.current.set(decal.id, 0);\n      }\n    });\n  }, [activeDecals]);\n\n  // Check for completed decals using accumulated delta time\n  useFrame((_, delta) => {\n    activeDecals.forEach((decal) => {\n      const currentAge = (decalAgesRef.current.get(decal.id) ?? 0) + delta;\n      decalAgesRef.current.set(decal.id, currentAge);\n      \n      const isExpired = currentAge >= fadeDuration;\n\n      if (\n        isExpired &&\n        onDecalComplete &&\n        !completedDecalsRef.current.has(decal.id)\n      ) {\n        completedDecalsRef.current.add(decal.id);\n        onDecalComplete(decal.id);\n      }\n    });\n  });\n\n  // Clean up texture on unmount\n  // Note: This texture is shared across all decals for the lifetime of the component\n  // to optimize memory usage and performance\n  useEffect(() => {\n    return () => {\n      bloodTexture.dispose();\n    };\n  }, [bloodTexture]);\n\n  // Use state to track target mesh, updated via layout effect to avoid ref access during render\n  const [targetMesh, setTargetMesh] = React.useState<THREE.Mesh | undefined>();\n\n  React.useLayoutEffect(() => {\n    setTargetMesh(targetMeshRef?.current ?? undefined);\n  }, [targetMeshRef]);\n\n  // Don't render if disabled or no decals\n  if (!enabled || activeDecals.length === 0) {\n    return null;\n  }\n\n  return (\n    <group data-testid=\"blood-decals-3d\">\n      {activeDecals.map((decal) => (\n        <DecalMesh\n          key={decal.id}\n          decal={decal}\n          texture={bloodTexture}\n          targetMesh={targetMesh}\n          fadeDuration={fadeDuration}\n        />\n      ))}\n    </group>\n  );\n};\n\nexport default BloodDecals3D;\n"],"mappings":"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"}
+{"version":3,"file":"BloodDecals3D.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/effects/BloodDecals3D.tsx"],"sourcesContent":["/**\n * BloodDecals3D - Blood accumulation decal system for character models\n *\n * Projects blood decals onto 3D character surfaces using decal geometry for\n * persistent blood visualization. Decals fade over time and track injury\n * persistence across combat rounds.\n *\n * Features:\n * - Decal projection onto character meshes\n * - Blood accumulation from hits and lacerations\n * - Blood trail visualization\n * - Cross-round injury persistence\n * - Korean-themed blood visualization\n *\n * @module components/combat/BloodDecals3D\n * @category Combat Effects\n * @korean 피흔적3D\n */\n\nimport { DecalGeometry } from \"three/examples/jsm/geometries/DecalGeometry.js\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useRef, useMemo, useEffect } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../../types/constants\";\n\n/**\n * Blood decal configuration\n */\nexport interface BloodDecal {\n  /** Unique identifier */\n  readonly id: string;\n  /** Position in world space */\n  readonly position: [number, number, number];\n  /** Normal vector for surface projection */\n  readonly normal: [number, number, number];\n  /** Size of decal */\n  readonly size: [number, number, number];\n  /** Rotation around normal (radians) */\n  readonly rotation: number;\n  /** Opacity (0.0 to 1.0) */\n  readonly opacity: number;\n  /** Creation timestamp */\n  readonly timestamp: number;\n  /** Whether decal is from a laceration (adds blood trail) */\n  readonly isLaceration?: boolean;\n}\n\n/**\n * Props for BloodDecals3D component\n */\nexport interface BloodDecals3DProps {\n  /** Active blood decals to render */\n  readonly decals: readonly BloodDecal[];\n  /** Character mesh reference for decal projection */\n  readonly targetMeshRef?: React.RefObject<THREE.Mesh>;\n  /** Whether decals are enabled (violence settings) */\n  readonly enabled?: boolean;\n  /** Mobile mode (simplified decals) */\n  readonly isMobile?: boolean;\n  /** Decal fade duration in seconds */\n  readonly fadeDuration?: number;\n  /** Callback when decal fully fades */\n  readonly onDecalComplete?: (decalId: string) => void;\n}\n\n/**\n * Blood decal constants\n */\nconst DECAL_CONSTANTS = {\n  /** Default fade duration (seconds) */\n  FADE_DURATION: 15.0,\n  /** Base decal size */\n  BASE_SIZE: [0.15, 0.15, 0.05] as [number, number, number],\n  /** Laceration trail size multiplier */\n  TRAIL_MULTIPLIER: 3.0,\n  /** Maximum concurrent decals for performance */\n  MAX_DECALS: 20,\n  /** Mobile decal limit */\n  MAX_DECALS_MOBILE: 10,\n} as const;\n\n/**\n * Generate blood decal texture (procedural)\n */\n/**\n * Generate a procedural blood texture with irregular edges.\n * Note: Uses Math.random() for visual variety. Each texture will be slightly different,\n * providing natural variation in blood splatter appearance across different decals.\n * This is intentional for realism, though it does create unique textures per component.\n * For better memory efficiency in production, consider pre-generating 3-5 variations\n * and randomly selecting one.\n */\nconst createBloodTexture = (): THREE.Texture => {\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = 256;\n  canvas.height = 256;\n  const ctx = canvas.getContext(\"2d\");\n  \n  if (!ctx) {\n    // Fallback: Return a basic transparent texture with matching dimensions\n    console.warn(\"Blood decal texture generation failed: Could not get 2D context\");\n    const fallbackCanvas = document.createElement(\"canvas\");\n    fallbackCanvas.width = 256;\n    fallbackCanvas.height = 256;\n    return new THREE.CanvasTexture(fallbackCanvas);\n  }\n\n  // Background (transparent)\n  ctx.clearRect(0, 0, 256, 256);\n\n  // Blood splatter pattern\n  const centerX = 128;\n  const centerY = 128;\n\n  // Create gradient from center\n  const gradient = ctx.createRadialGradient(\n    centerX,\n    centerY,\n    0,\n    centerX,\n    centerY,\n    100\n  );\n\n  // Blood color (dark red)\n  const bloodColor = new THREE.Color(KOREAN_COLORS.BLOODLOSS_INDICATOR);\n  const r = Math.floor(bloodColor.r * 255);\n  const g = Math.floor(bloodColor.g * 255);\n  const b = Math.floor(bloodColor.b * 255);\n\n  gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1.0)`);\n  gradient.addColorStop(0.6, `rgba(${r * 0.8}, ${g * 0.6}, ${b * 0.6}, 0.8)`);\n  gradient.addColorStop(1, `rgba(${r * 0.5}, ${g * 0.3}, ${b * 0.3}, 0)`);\n\n  ctx.fillStyle = gradient;\n  ctx.fillRect(0, 0, 256, 256);\n\n  // Add irregular edges for realistic look\n  for (let i = 0; i < 30; i++) {\n    const angle = (i / 30) * Math.PI * 2;\n    const radius = 80 + Math.random() * 20;\n    const x = centerX + Math.cos(angle) * radius;\n    const y = centerY + Math.sin(angle) * radius;\n    const size = 5 + Math.random() * 10;\n\n    ctx.fillStyle = `rgba(${r * 0.7}, ${g * 0.4}, ${b * 0.4}, ${0.5 + Math.random() * 0.3})`;\n    ctx.beginPath();\n    ctx.arc(x, y, size, 0, Math.PI * 2);\n    ctx.fill();\n  }\n\n  const texture = new THREE.CanvasTexture(canvas);\n  texture.needsUpdate = true;\n  return texture;\n};\n\n/**\n * Individual decal component\n */\nconst DecalMesh: React.FC<{\n  decal: BloodDecal;\n  texture: THREE.Texture;\n  targetMesh?: THREE.Mesh;\n  fadeDuration: number;\n}> = ({ decal, texture, targetMesh, fadeDuration }) => {\n  const meshRef = useRef<THREE.Mesh>(null);\n  const materialRef = useRef<THREE.MeshBasicMaterial | null>(null);\n  const ageRef = useRef(0);\n\n  // Create decal geometry\n  useEffect(() => {\n    if (!meshRef.current || !targetMesh) return;\n\n    try {\n      const position = new THREE.Vector3(...decal.position);\n      const size = new THREE.Vector3(...decal.size);\n\n      // Create decal geometry projected onto target mesh\n      // DecalGeometry requires Euler angles for orientation\n      const orientation = new THREE.Euler();\n      orientation.copy(targetMesh.rotation);\n      \n      const decalGeometry = new DecalGeometry(\n        targetMesh,\n        position,\n        orientation,\n        size\n      );\n\n      meshRef.current.geometry = decalGeometry;\n      \n      // Apply rotation to the mesh itself\n      meshRef.current.rotation.set(0, 0, decal.rotation);\n    } catch (error) {\n      // Handle decal projection failures\n      // This can occur when target mesh geometry is complex or decal position is invalid\n      // Decal will simply not render in this case\n      if (process.env.NODE_ENV === \"development\") {\n        // In development, log a diagnostic warning to help debug decal issues\n        console.warn(\"BloodDecals3D: Failed to project blood decal onto target mesh.\", {\n          decalId: decal.id,\n          position: decal.position,\n          size: decal.size,\n          error,\n        });\n      }\n    }\n  }, [decal, targetMesh]);\n\n  // Fade animation - update material opacity in animation loop\n  useFrame((_, delta) => {\n    if (!materialRef.current) return;\n\n    // Accumulate age using delta time instead of Date.now() for better performance\n    ageRef.current += delta;\n    const fadeProgress = Math.min(ageRef.current / fadeDuration, 1);\n    materialRef.current.opacity = decal.opacity * (1 - fadeProgress);\n  });\n\n  return (\n    <mesh ref={meshRef} data-testid={`blood-decal-${decal.id}`}>\n      <meshBasicMaterial\n        ref={materialRef}\n        map={texture}\n        transparent\n        opacity={decal.opacity}\n        depthTest={true}\n        depthWrite={false}\n        polygonOffset\n        polygonOffsetFactor={-4}\n      />\n    </mesh>\n  );\n};\n\n/**\n * BloodDecals3D Component\n *\n * Renders persistent blood decals on 3D character models using decal projection.\n * Decals fade over time and can persist across combat rounds for injury tracking.\n *\n * Performance optimized:\n * - Limited concurrent decals (20 desktop, 10 mobile)\n * - Efficient decal geometry generation\n * - Texture reuse across all decals\n * - Automatic cleanup of faded decals\n *\n * @example\n * ```tsx\n * const [bloodDecals, setBloodDecals] = useState<BloodDecal[]>([]);\n * const characterMeshRef = useRef<THREE.Mesh>(null);\n *\n * // On hit event\n * const handleHit = (position: [number, number, number], normal: [number, number, number]) => {\n *   setBloodDecals([...bloodDecals, {\n *     id: generateId(),\n *     position,\n *     normal,\n *     size: [0.15, 0.15, 0.05],\n *     rotation: Math.random() * Math.PI * 2,\n *     opacity: 0.8,\n *     timestamp: Date.now(),\n *     isLaceration: false,\n *   }]);\n * };\n *\n * <mesh ref={characterMeshRef}>\n *   <capsuleGeometry args={[0.5, 1.6, 16, 32]} />\n *   <meshStandardMaterial color={0xcccccc} />\n * </mesh>\n *\n * <BloodDecals3D\n *   decals={bloodDecals}\n *   targetMeshRef={characterMeshRef}\n *   enabled={violenceSettings.blood}\n *   isMobile={isMobile}\n *   onDecalComplete={(id) => {\n *     setBloodDecals(prev => prev.filter(d => d.id !== id));\n *   }}\n * />\n * ```\n */\nexport const BloodDecals3D: React.FC<BloodDecals3DProps> = ({\n  decals,\n  targetMeshRef,\n  enabled = true,\n  isMobile = false,\n  fadeDuration = DECAL_CONSTANTS.FADE_DURATION,\n  onDecalComplete,\n}) => {\n  // Track completed decals\n  const completedDecalsRef = useRef<Set<string>>(new Set());\n\n  // Performance limits\n  const maxDecals = isMobile\n    ? DECAL_CONSTANTS.MAX_DECALS_MOBILE\n    : DECAL_CONSTANTS.MAX_DECALS;\n\n  // Create shared blood texture\n  const bloodTexture = useMemo(() => createBloodTexture(), []);\n\n  // Limit decals for performance\n  const activeDecals = useMemo(() => {\n    // Sort by timestamp (newest first) and take max count\n    const sorted = [...decals].sort((a, b) => b.timestamp - a.timestamp);\n    return sorted.slice(0, maxDecals);\n  }, [decals, maxDecals]);\n\n  // Track decal ages using delta accumulation for better performance\n  const decalAgesRef = useRef<Map<string, number>>(new Map());\n\n  // Initialize ages for new decals\n  useEffect(() => {\n    activeDecals.forEach((decal) => {\n      if (!decalAgesRef.current.has(decal.id)) {\n        decalAgesRef.current.set(decal.id, 0);\n      }\n    });\n  }, [activeDecals]);\n\n  // Check for completed decals using accumulated delta time\n  useFrame((_, delta) => {\n    activeDecals.forEach((decal) => {\n      const currentAge = (decalAgesRef.current.get(decal.id) ?? 0) + delta;\n      decalAgesRef.current.set(decal.id, currentAge);\n      \n      const isExpired = currentAge >= fadeDuration;\n\n      if (\n        isExpired &&\n        onDecalComplete &&\n        !completedDecalsRef.current.has(decal.id)\n      ) {\n        completedDecalsRef.current.add(decal.id);\n        onDecalComplete(decal.id);\n      }\n    });\n  });\n\n  // Clean up texture on unmount\n  // Note: This texture is shared across all decals for the lifetime of the component\n  // to optimize memory usage and performance\n  useEffect(() => {\n    return () => {\n      bloodTexture.dispose();\n    };\n  }, [bloodTexture]);\n\n  // Use state to track target mesh, updated via layout effect to avoid ref access during render\n  const [targetMesh, setTargetMesh] = React.useState<THREE.Mesh | undefined>();\n\n  React.useLayoutEffect(() => {\n    setTargetMesh(targetMeshRef?.current ?? undefined);\n  }, [targetMeshRef]);\n\n  // Don't render if disabled or no decals\n  if (!enabled || activeDecals.length === 0) {\n    return null;\n  }\n\n  return (\n    <group data-testid=\"blood-decals-3d\">\n      {activeDecals.map((decal) => (\n        <DecalMesh\n          key={decal.id}\n          decal={decal}\n          texture={bloodTexture}\n          targetMesh={targetMesh}\n          fadeDuration={fadeDuration}\n        />\n      ))}\n    </group>\n  );\n};\n\nexport default BloodDecals3D;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/effects/BloodLossOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"BloodLossOverlayHtml.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/effects/BloodLossOverlayHtml.tsx"],"sourcesContent":["/**\n * BloodLossOverlayHtml Component - Visual warning for blood loss\n *\n * Displays a pulsing red overlay when blood loss exceeds critical threshold (50%).\n * Uses CSS animation for smooth pulsing effect.\n *\n * NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.\n * It does NOT use Html from drei - it's a standard React component.\n *\n * @module components/combat/BloodLossOverlayHtml\n * @category Combat UI\n * @korean 출혈오버레이\n */\n\nimport React, { useMemo } from \"react\";\nimport { KOREAN_COLORS } from \"../../../../../types/constants\";\n\nexport interface BloodLossOverlayProps {\n  /**\n   * Current blood loss amount (0-100)\n   * @korean 출혈량\n   */\n  readonly bloodLoss: number;\n\n  /**\n   * Mobile responsive mode (reduced pulse intensity)\n   * @korean 모바일여부\n   */\n  readonly isMobile: boolean;\n\n  /**\n   * Multiplier applied to the effect's maximum opacity (0.0-1.0).\n   *\n   * Use this to soften the fullscreen effect when the 3D arena is already\n   * visually compressed (e.g. portrait mobile). Default is `1.0`.\n   *\n   * @korean 효과강도배수\n   */\n  readonly intensityScale?: number;\n}\n\n/**\n * BloodLossOverlayHtml - Pulsing red warning for critical blood loss\n *\n * Renders a fullscreen pulsing red overlay when blood loss is 50 or higher.\n * Only visible when bloodLoss is 50 or above; does not render for values below 50.\n * Uses CSS keyframe animation for smooth pulsing effect at 60fps.\n *\n * Optimized with React.memo for 60fps performance:\n * - Prevents re-renders when blood loss hasn't changed significantly\n * - Memoized style calculations\n * \n * Accessibility notes:\n * - Purely decorative visual effect; no ARIA role or aria-live region is defined here\n * - Typically rendered within an aria-hidden container so it is ignored by screen readers\n * - Critical status announcements should be provided by separate, semantic HUD components\n *\n * @example\n * ```tsx\n * // Overlay is rendered (bloodLoss >= 50)\n * <BloodLossOverlayHtml bloodLoss={75} isMobile={false} />\n *\n * // Overlay is not rendered (bloodLoss < 50)\n * <BloodLossOverlayHtml bloodLoss={30} isMobile={false} />\n * ```\n */\nexport const BloodLossOverlayHtml = React.memo<BloodLossOverlayProps>(\n  ({ bloodLoss, isMobile, intensityScale = 1 }) => {\n  const overlayStyle = useMemo(() => {\n    // Only show when blood loss exceeds critical threshold\n    const criticalThreshold = 50;\n    if (bloodLoss < criticalThreshold) {\n      return null;\n    }\n\n    // Clamp blood loss to 50-100 range for intensity calculation\n    const clampedBloodLoss = Math.max(\n      criticalThreshold,\n      Math.min(100, bloodLoss)\n    );\n\n    // Calculate intensity based on blood loss (50-100% -> 0-1)\n    const intensity =\n      (clampedBloodLoss - criticalThreshold) / (100 - criticalThreshold);\n\n    // Mobile uses reduced intensity, callers may further attenuate.\n    const safeScale = Math.max(0, Math.min(1, intensityScale));\n    const maxOpacity = (isMobile ? 0.15 : 0.25) * safeScale;\n    const baseOpacity = intensity * maxOpacity;\n\n    // Use KOREAN_COLORS.BLOODLOSS_INDICATOR constant\n    const rgb = KOREAN_COLORS.BLOODLOSS_INDICATOR;\n    const bloodColor = `rgb(${(rgb >> 16) & 255}, ${(rgb >> 8) & 255}, ${\n      rgb & 255\n    })`;\n\n    return {\n      position: \"fixed\" as const,\n      inset: 0,\n      pointerEvents: \"none\" as const,\n      backgroundColor: bloodColor,\n      // Use CSS variable for dynamic animation\n      [\"--base-opacity\"]: baseOpacity.toString(),\n      animation: \"bloodLossPulse 1.5s ease-in-out infinite\",\n      transition: \"opacity 0.5s ease-out\",\n      zIndex: 55, // Between pain vignette and consciousness blur\n    } as React.CSSProperties;\n  }, [bloodLoss, isMobile, intensityScale]);\n\n  // Don't render if blood loss is below threshold\n  if (bloodLoss < 50 || !overlayStyle) {\n    return null;\n  }\n\n  // Purely visual effect overlay; intentionally hidden from assistive technology via aria-hidden and does not use ARIA roles or live regions\n  return (\n    <>\n      {/* CSS keyframe animation for pulsing with CSS variables */}\n      <style>\n        {`\n          @keyframes bloodLossPulse {\n            0%, 100% {\n              opacity: var(--base-opacity);\n            }\n            50% {\n              opacity: calc(var(--base-opacity) * 1.5);\n            }\n          }\n        `}\n      </style>\n      <div\n        data-testid=\"bloodloss-overlay\"\n        style={overlayStyle}\n        aria-hidden=\"true\"\n      />\n    </>\n  );\n  },\n  (prevProps, nextProps) => {\n    // Only re-render if blood loss crosses critical threshold or changes significantly\n    const wasCritical = prevProps.bloodLoss >= 50;\n    const isCritical = nextProps.bloodLoss >= 50;\n    \n    // If neither are critical, no need to re-render\n    if (!wasCritical && !isCritical) return true;\n    \n    // If crossing threshold, need to re-render\n    if (wasCritical !== isCritical) return false;\n    \n    // If both critical, only re-render if significant change (5+ points)\n    // or if isMobile / intensityScale changes.\n    return (\n      Math.abs(prevProps.bloodLoss - nextProps.bloodLoss) < 5 &&\n      prevProps.isMobile === nextProps.isMobile &&\n      prevProps.intensityScale === nextProps.intensityScale\n    );\n  },\n);\n\nBloodLossOverlayHtml.displayName = \"BloodLossOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,uBAAuB,MAAM,MACvC,EAAE,WAAW,UAAU,iBAAiB,QAAQ;CACjD,MAAM,eAAe,cAAc;EAEjC,MAAM,oBAAoB;AAC1B,MAAI,YAAY,kBACd,QAAO;EAgBT,MAAM,eAZmB,KAAK,IAC5B,mBACA,KAAK,IAAI,KAAK,UAAU,CAKvB,GAAmB,sBAAsB,MAAM,uBAI9B,WAAW,MAAO,OADpB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,eAAe,CACX;EAI9C,MAAM,MAAM,cAAc;AAK1B,SAAO;GACL,UAAU;GACV,OAAO;GACP,eAAe;GACf,iBAAiB,OARQ,OAAO,KAAM,IAAI,IAAK,OAAO,IAAK,IAAI,IAC/D,MAAM,IACP;IAQE,mBAAmB,YAAY,UAAU;GAC1C,WAAW;GACX,YAAY;GACZ,QAAQ;GACT;IACA;EAAC;EAAW;EAAU;EAAe,CAAC;AAGzC,KAAI,YAAY,MAAM,CAAC,aACrB,QAAO;AAIT,QACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,SAAD,EAAA,UACG;;;;;;;;;WAUK,CAAA,EACR,oBAAC,OAAD;EACE,eAAY;EACZ,OAAO;EACP,eAAY;EACZ,CAAA,CACD,EAAA,CAAA;IAGJ,WAAW,cAAc;CAExB,MAAM,cAAc,UAAU,aAAa;CAC3C,MAAM,aAAa,UAAU,aAAa;AAG1C,KAAI,CAAC,eAAe,CAAC,WAAY,QAAO;AAGxC,KAAI,gBAAgB,WAAY,QAAO;AAIvC,QACE,KAAK,IAAI,UAAU,YAAY,UAAU,UAAU,GAAG,KACtD,UAAU,aAAa,UAAU,YACjC,UAAU,mBAAmB,UAAU;EAG5C;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"BloodLossOverlayHtml.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/effects/BloodLossOverlayHtml.tsx"],"sourcesContent":["/**\n * BloodLossOverlayHtml Component - Visual warning for blood loss\n *\n * Displays a pulsing red overlay when blood loss exceeds critical threshold (50%).\n * Uses CSS animation for smooth pulsing effect.\n *\n * NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.\n * It does NOT use Html from drei - it's a standard React component.\n *\n * @module components/combat/BloodLossOverlayHtml\n * @category Combat UI\n * @korean 출혈오버레이\n */\n\nimport React, { useMemo } from \"react\";\nimport { KOREAN_COLORS } from \"../../../../../types/constants\";\n\nexport interface BloodLossOverlayProps {\n  /**\n   * Current blood loss amount (0-100)\n   * @korean 출혈량\n   */\n  readonly bloodLoss: number;\n\n  /**\n   * Mobile responsive mode (reduced pulse intensity)\n   * @korean 모바일여부\n   */\n  readonly isMobile: boolean;\n\n  /**\n   * Multiplier applied to the effect's maximum opacity (0.0-1.0).\n   *\n   * Use this to soften the fullscreen effect when the 3D arena is already\n   * visually compressed (e.g. portrait mobile). Default is `1.0`.\n   *\n   * @korean 효과강도배수\n   */\n  readonly intensityScale?: number;\n}\n\n/**\n * BloodLossOverlayHtml - Pulsing red warning for critical blood loss\n *\n * Renders a fullscreen pulsing red overlay when blood loss is 50 or higher.\n * Only visible when bloodLoss is 50 or above; does not render for values below 50.\n * Uses CSS keyframe animation for smooth pulsing effect at 60fps.\n *\n * Optimized with React.memo for 60fps performance:\n * - Prevents re-renders when blood loss hasn't changed significantly\n * - Memoized style calculations\n * \n * Accessibility notes:\n * - Purely decorative visual effect; no ARIA role or aria-live region is defined here\n * - Typically rendered within an aria-hidden container so it is ignored by screen readers\n * - Critical status announcements should be provided by separate, semantic HUD components\n *\n * @example\n * ```tsx\n * // Overlay is rendered (bloodLoss >= 50)\n * <BloodLossOverlayHtml bloodLoss={75} isMobile={false} />\n *\n * // Overlay is not rendered (bloodLoss < 50)\n * <BloodLossOverlayHtml bloodLoss={30} isMobile={false} />\n * ```\n */\nexport const BloodLossOverlayHtml = React.memo<BloodLossOverlayProps>(\n  ({ bloodLoss, isMobile, intensityScale = 1 }) => {\n  const overlayStyle = useMemo(() => {\n    // Only show when blood loss exceeds critical threshold\n    const criticalThreshold = 50;\n    if (bloodLoss < criticalThreshold) {\n      return null;\n    }\n\n    // Clamp blood loss to 50-100 range for intensity calculation\n    const clampedBloodLoss = Math.max(\n      criticalThreshold,\n      Math.min(100, bloodLoss)\n    );\n\n    // Calculate intensity based on blood loss (50-100% -> 0-1)\n    const intensity =\n      (clampedBloodLoss - criticalThreshold) / (100 - criticalThreshold);\n\n    // Mobile uses reduced intensity, callers may further attenuate.\n    const safeScale = Math.max(0, Math.min(1, intensityScale));\n    const maxOpacity = (isMobile ? 0.15 : 0.25) * safeScale;\n    const baseOpacity = intensity * maxOpacity;\n\n    // Use KOREAN_COLORS.BLOODLOSS_INDICATOR constant\n    const rgb = KOREAN_COLORS.BLOODLOSS_INDICATOR;\n    const bloodColor = `rgb(${(rgb >> 16) & 255}, ${(rgb >> 8) & 255}, ${\n      rgb & 255\n    })`;\n\n    return {\n      position: \"fixed\" as const,\n      inset: 0,\n      pointerEvents: \"none\" as const,\n      backgroundColor: bloodColor,\n      // Use CSS variable for dynamic animation\n      [\"--base-opacity\"]: baseOpacity.toString(),\n      animation: \"bloodLossPulse 1.5s ease-in-out infinite\",\n      transition: \"opacity 0.5s ease-out\",\n      zIndex: 55, // Between pain vignette and consciousness blur\n    } as React.CSSProperties;\n  }, [bloodLoss, isMobile, intensityScale]);\n\n  // Don't render if blood loss is below threshold\n  if (bloodLoss < 50 || !overlayStyle) {\n    return null;\n  }\n\n  // Purely visual effect overlay; intentionally hidden from assistive technology via aria-hidden and does not use ARIA roles or live regions\n  return (\n    <>\n      {/* CSS keyframe animation for pulsing with CSS variables */}\n      <style>\n        {`\n          @keyframes bloodLossPulse {\n            0%, 100% {\n              opacity: var(--base-opacity);\n            }\n            50% {\n              opacity: calc(var(--base-opacity) * 1.5);\n            }\n          }\n        `}\n      </style>\n      <div\n        data-testid=\"bloodloss-overlay\"\n        style={overlayStyle}\n        aria-hidden=\"true\"\n      />\n    </>\n  );\n  },\n  (prevProps, nextProps) => {\n    // Only re-render if blood loss crosses critical threshold or changes significantly\n    const wasCritical = prevProps.bloodLoss >= 50;\n    const isCritical = nextProps.bloodLoss >= 50;\n    \n    // If neither are critical, no need to re-render\n    if (!wasCritical && !isCritical) return true;\n    \n    // If crossing threshold, need to re-render\n    if (wasCritical !== isCritical) return false;\n    \n    // If both critical, only re-render if significant change (5+ points)\n    // or if isMobile / intensityScale changes.\n    return (\n      Math.abs(prevProps.bloodLoss - nextProps.bloodLoss) < 5 &&\n      prevProps.isMobile === nextProps.isMobile &&\n      prevProps.intensityScale === nextProps.intensityScale\n    );\n  },\n);\n\nBloodLossOverlayHtml.displayName = \"BloodLossOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,uBAAuB,MAAM,MACvC,EAAE,WAAW,UAAU,iBAAiB,QAAQ;CACjD,MAAM,eAAe,cAAc;EAEjC,MAAM,oBAAoB;EAC1B,IAAI,YAAY,mBACd,OAAO;EAgBT,MAAM,eAZmB,KAAK,IAC5B,mBACA,KAAK,IAAI,KAAK,UAAU,CAKvB,GAAmB,sBAAsB,MAAM,uBAI9B,WAAW,MAAO,OADpB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,eAAe,CACX;EAI9C,MAAM,MAAM,cAAc;EAK1B,OAAO;GACL,UAAU;GACV,OAAO;GACP,eAAe;GACf,iBAAiB,OARQ,OAAO,KAAM,IAAI,IAAK,OAAO,IAAK,IAAI,IAC/D,MAAM,IACP;IAQE,mBAAmB,YAAY,UAAU;GAC1C,WAAW;GACX,YAAY;GACZ,QAAQ;GACT;IACA;EAAC;EAAW;EAAU;EAAe,CAAC;CAGzC,IAAI,YAAY,MAAM,CAAC,cACrB,OAAO;CAIT,OACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,SAAD,EAAA,UACG;;;;;;;;;WAUK,CAAA,EACR,oBAAC,OAAD;EACE,eAAY;EACZ,OAAO;EACP,eAAY;EACZ,CAAA,CACD,EAAA,CAAA;IAGJ,WAAW,cAAc;CAExB,MAAM,cAAc,UAAU,aAAa;CAC3C,MAAM,aAAa,UAAU,aAAa;CAG1C,IAAI,CAAC,eAAe,CAAC,YAAY,OAAO;CAGxC,IAAI,gBAAgB,YAAY,OAAO;CAIvC,OACE,KAAK,IAAI,UAAU,YAAY,UAAU,UAAU,GAAG,KACtD,UAAU,aAAa,UAAU,YACjC,UAAU,mBAAmB,UAAU;EAG5C;AAED,qBAAqB,cAAc"}