npm - blacktrigram - Versions diffs - 0.7.12 → 0.7.13 - Mend

blacktrigram 0.7.12 → 0.7.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/lib/components/screens/combat/components/indicators/InputBufferDisplay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputBufferDisplay.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/indicators/InputBufferDisplay.tsx"],"sourcesContent":["/*\n InputBufferDisplay - Input queue visualization\n * Shows queued combat actions for player feedback\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/combat/components/InputBufferDisplay\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 { QueuedInput } from \"../../../../../hooks/useKeyboardControls\";\n\n/\n Props for InputBufferDisplay component\n /\nexport interface InputBufferDisplayProps {\n /* Queued inputs to display /\n readonly queuedInputs: readonly QueuedInput[];\n /* Mobile layout flag /\n readonly isMobile?: boolean;\n}\n\n/\n InputBufferDisplay Component\n * \n * Displays a list of recently queued combat inputs in the top-right corner.\n * Useful for showing input confirmation and debugging input lag issues.\n * Uses useKoreanTheme for consistent styling.\n * \n * Features:\n * - Displays up to 3 recent inputs\n * - Fades older inputs with reduced opacity\n * - Shows action name and key pressed\n * - Responsive mobile layout\n * - Korean cyberpunk styling via theme\n * - Automatically clears after 2 seconds\n * \n * @example\n * ```tsx\n * <InputBufferDisplay\n * queuedInputs={queuedInputs}\n * isMobile={isMobile}\n * />\n * ```\n * \n * @public\n * @korean 입력버퍼표시\n /\nexport const InputBufferDisplay: React.FC<InputBufferDisplayProps> = ({\n queuedInputs,\n isMobile = false,\n}) => {\n const theme = useKoreanTheme({ variant: \"primary\", size: \"sm\", isMobile });\n \n // Memoize animation styles to prevent redefinition on every render\n const animationStyles = useMemo(() => (\n <style>\n {`\n @keyframes slideIn {\n 0% {\n opacity: 0;\n transform: translateX(10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n }\n `}\n </style>\n ), []);\n\n if (queuedInputs.length === 0) return null;\n\n const fontSize = isMobile ? 10 : 12;\n const labelFontSize = isMobile ? 8 : 10;\n const top = isMobile ? \"10px\" : \"20px\";\n const right = isMobile ? \"10px\" : \"20px\";\n\n return (\n <Html fullscreen>\n <div\n data-testid=\"input-buffer-display\"\n role=\"log\"\n aria-live=\"polite\"\n aria-label=\"Input queue\"\n style={{\n position: \"absolute\",\n top,\n right,\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.6)}`,\n borderRadius: \"4px\",\n padding: isMobile ? \"4px\" : \"8px\",\n minWidth: isMobile ? \"100px\" : \"150px\",\n pointerEvents: \"none\",\n zIndex: 998,\n boxShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.2)}`,\n }}\n >\n {/ Title /}\n <div\n style={{\n fontSize: `${labelFontSize}px`,\n color: hexToRgbaString(theme.colors.ACCENT_BLUE, 0.9),\n fontFamily: theme.fontFamily.KOREAN,\n marginBottom: \"4px\",\n fontWeight: \"bold\",\n textTransform: \"uppercase\",\n }}\n >\n Input Queue\n </div>\n\n {/ Input list /}\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"2px\" }}>\n {queuedInputs.map((input, index) => {\n // Calculate opacity based on age (newer = more opaque)\n const opacity = 1 - index 0.3;\n\n return (\n <div\n key={`${input.timestamp}-${input.key}`}\n data-testid={`queued-input-${index}`}\n style={{\n fontSize: `${fontSize}px`,\n color: hexToRgbaString(theme.colors.TEXT_PRIMARY, opacity),\n fontFamily: theme.fontFamily.KOREAN,\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"8px\",\n animation: index === 0 ? \"slideIn 0.2s ease-out\" : \"none\",\n }}\n >\n {/* Action name /}\n <span\n style={{\n flex: 1,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {input.action}\n </span>\n\n {/ Key badge /}\n <span\n style={{\n padding: \"2px 4px\",\n background: hexToRgbaString(\n theme.colors.ACCENT_BLUE,\n 0.2 opacity\n ),\n border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.5 * opacity)}`,\n borderRadius: \"2px\",\n fontSize: `${fontSize - 2}px`,\n fontWeight: \"bold\",\n minWidth: isMobile ? \"20px\" : \"24px\",\n textAlign: \"center\",\n }}\n >\n {input.key.toUpperCase()}\n </span>\n </div>\n );\n })}\n </div>\n\n {/* CSS Animation - Memoized to prevent redefinition */}\n {animationStyles}\n </div>\n </Html>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAa,sBAAyD,EACpE,cACA,WAAW,YACP;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAG1E,MAAM,kBAAkB,cACtB,oBAAC,SAAD,EAAA,UACG;;;;;;;;;;;SAYK,CAAA,EACP,EAAE,CAAC;AAEN,KAAI,aAAa,WAAW,EAAG,QAAO;CAEtC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,gBAAgB,WAAW,IAAI;~~CACrC~~,~~MAAM,MAAM,WAAW,SAAS;CAChC,MAAM,QAAQ,WAAW,SAAS;AAElC,~~QACE,oBAAC,MAAD;EAAM,YAAA;YACJ,qBAAC,OAAD;GACE,eAAY;GACZ,MAAK;GACL,aAAU;GACV,cAAW;GACX,OAAO;IACL,UAAU;IACV;~~IACA~~;~~IACA~~,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;IACjE,QAAQ,aAAa,gBAAgB,MAAM,OAAO,aAAa,GAAI;IACnE,cAAc;IACd,SAAS,WAAW,QAAQ;IAC5B,UAAU,WAAW,UAAU;IAC/B,eAAe;IACf,QAAQ;IACR,WAAW,YAAY,gBAAgB,MAAM,OAAO,aAAa,GAAI;IACtE;aAjBH;IAoBE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,GAAG,cAAc;MAC3B,OAAO,gBAAgB,MAAM,OAAO,aAAa,GAAI;MACrD,YAAY,MAAM,WAAW;MAC7B,cAAc;MACd,YAAY;MACZ,eAAe;MAChB;eACF;KAEK,CAAA;IAGN,oBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,eAAe;MAAU,KAAK;MAAO;eACjE,aAAa,KAAK,OAAO,UAAU;MAElC,MAAM,UAAU,IAAI,QAAQ;AAE5B,aACE,qBAAC,OAAD;OAEE,eAAa,gBAAgB;OAC7B,OAAO;QACL,UAAU,GAAG,SAAS;QACtB,OAAO,gBAAgB,MAAM,OAAO,cAAc,QAAQ;QAC1D,YAAY,MAAM,WAAW;QAC7B,SAAS;QACT,gBAAgB;QAChB,YAAY;QACZ,KAAK;QACL,WAAW,UAAU,IAAI,0BAA0B;QACpD;iBAZH,CAeE,oBAAC,QAAD;QACE,OAAO;SACL,MAAM;SACN,UAAU;SACV,cAAc;SACd,YAAY;SACb;kBAEA,MAAM;QACF,CAAA,EAGP,oBAAC,QAAD;QACE,OAAO;SACL,SAAS;SACT,YAAY,gBACV,MAAM,OAAO,aACb,KAAM,QACP;SACD,QAAQ,aAAa,gBAAgB,MAAM,OAAO,aAAa,KAAM,QAAQ;SAC7E,cAAc;SACd,UAAU,GAAG,WAAW,EAAE;SAC1B,YAAY;SACZ,UAAU,WAAW,SAAS;SAC9B,WAAW;SACZ;kBAEA,MAAM,IAAI,aAAa;QACnB,CAAA,CACH;SA3CC,GAAG,MAAM,UAAU,GAAG,MAAM,MA2C7B;OAER;KACE,CAAA;IAGL;IACG;;EACD,CAAA"}
1	+ {"version":3,"file":"InputBufferDisplay.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/indicators/InputBufferDisplay.tsx"],"sourcesContent":["/*\n InputBufferDisplay - Input queue visualization\n * Shows queued combat actions for player feedback\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/combat/components/InputBufferDisplay\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 { QueuedInput } from \"../../../../../hooks/useKeyboardControls\";\n\n/\n Props for InputBufferDisplay component\n /\nexport interface InputBufferDisplayProps {\n /* Queued inputs to display /\n readonly queuedInputs: readonly QueuedInput[];\n /* Mobile layout flag /\n readonly isMobile?: boolean;\n}\n\n/\n InputBufferDisplay Component\n * \n * Displays a list of recently queued combat inputs in the top-right corner.\n * Useful for showing input confirmation and debugging input lag issues.\n * Uses useKoreanTheme for consistent styling.\n * \n * Features:\n * - Displays up to 3 recent inputs\n * - Fades older inputs with reduced opacity\n * - Shows action name and key pressed\n * - Responsive mobile layout\n * - Korean cyberpunk styling via theme\n * - Automatically clears after 2 seconds\n * \n * @example\n * ```tsx\n * <InputBufferDisplay\n * queuedInputs={queuedInputs}\n * isMobile={isMobile}\n * />\n * ```\n * \n * @public\n * @korean 입력버퍼표시\n /\nexport const InputBufferDisplay: React.FC<InputBufferDisplayProps> = ({\n queuedInputs,\n isMobile = false,\n}) => {\n const theme = useKoreanTheme({ variant: \"primary\", size: \"sm\", isMobile });\n \n // Memoize animation styles to prevent redefinition on every render\n const animationStyles = useMemo(() => (\n <style>\n {`\n @keyframes slideIn {\n 0% {\n opacity: 0;\n transform: translateX(10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n }\n `}\n </style>\n ), []);\n\n if (queuedInputs.length === 0) return null;\n\n const fontSize = isMobile ? 10 : 12;\n const labelFontSize = isMobile ? 8 : 10;\n const top = isMobile ? \"10px\" : \"20px\";\n const right = isMobile ? \"10px\" : \"20px\";\n\n return (\n <Html fullscreen>\n <div\n data-testid=\"input-buffer-display\"\n role=\"log\"\n aria-live=\"polite\"\n aria-label=\"Input queue\"\n style={{\n position: \"absolute\",\n top,\n right,\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.6)}`,\n borderRadius: \"4px\",\n padding: isMobile ? \"4px\" : \"8px\",\n minWidth: isMobile ? \"100px\" : \"150px\",\n pointerEvents: \"none\",\n zIndex: 998,\n boxShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.2)}`,\n }}\n >\n {/ Title /}\n <div\n style={{\n fontSize: `${labelFontSize}px`,\n color: hexToRgbaString(theme.colors.ACCENT_BLUE, 0.9),\n fontFamily: theme.fontFamily.KOREAN,\n marginBottom: \"4px\",\n fontWeight: \"bold\",\n textTransform: \"uppercase\",\n }}\n >\n Input Queue\n </div>\n\n {/ Input list /}\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"2px\" }}>\n {queuedInputs.map((input, index) => {\n // Calculate opacity based on age (newer = more opaque)\n const opacity = 1 - index 0.3;\n\n return (\n <div\n key={`${input.timestamp}-${input.key}`}\n data-testid={`queued-input-${index}`}\n style={{\n fontSize: `${fontSize}px`,\n color: hexToRgbaString(theme.colors.TEXT_PRIMARY, opacity),\n fontFamily: theme.fontFamily.KOREAN,\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"8px\",\n animation: index === 0 ? \"slideIn 0.2s ease-out\" : \"none\",\n }}\n >\n {/* Action name /}\n <span\n style={{\n flex: 1,\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n }}\n >\n {input.action}\n </span>\n\n {/ Key badge /}\n <span\n style={{\n padding: \"2px 4px\",\n background: hexToRgbaString(\n theme.colors.ACCENT_BLUE,\n 0.2 opacity\n ),\n border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.5 * opacity)}`,\n borderRadius: \"2px\",\n fontSize: `${fontSize - 2}px`,\n fontWeight: \"bold\",\n minWidth: isMobile ? \"20px\" : \"24px\",\n textAlign: \"center\",\n }}\n >\n {input.key.toUpperCase()}\n </span>\n </div>\n );\n })}\n </div>\n\n {/* CSS Animation - Memoized to prevent redefinition */}\n {animationStyles}\n </div>\n </Html>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAa,sBAAyD,EACpE,cACA,WAAW,YACP;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAG1E,MAAM,kBAAkB,cACtB,oBAAC,SAAD,EAAA,UACG;;;;;;;;;;;SAYK,CAAA,EACP,EAAE,CAAC;AAEN,KAAI,aAAa,WAAW,EAAG,QAAO;CAEtC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,gBAAgB,WAAW,IAAI;AAIrC,QACE,oBAAC,MAAD;EAAM,YAAA;YACJ,qBAAC,OAAD;GACE,eAAY;GACZ,MAAK;GACL,aAAU;GACV,cAAW;GACX,OAAO;IACL,UAAU;IACV,KAZI,WAAW,SAAS;IAaxB,OAZM,WAAW,SAAS;IAa1B,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;IACjE,QAAQ,aAAa,gBAAgB,MAAM,OAAO,aAAa,GAAI;IACnE,cAAc;IACd,SAAS,WAAW,QAAQ;IAC5B,UAAU,WAAW,UAAU;IAC/B,eAAe;IACf,QAAQ;IACR,WAAW,YAAY,gBAAgB,MAAM,OAAO,aAAa,GAAI;IACtE;aAjBH;IAoBE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,GAAG,cAAc;MAC3B,OAAO,gBAAgB,MAAM,OAAO,aAAa,GAAI;MACrD,YAAY,MAAM,WAAW;MAC7B,cAAc;MACd,YAAY;MACZ,eAAe;MAChB;eACF;KAEK,CAAA;IAGN,oBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,eAAe;MAAU,KAAK;MAAO;eACjE,aAAa,KAAK,OAAO,UAAU;MAElC,MAAM,UAAU,IAAI,QAAQ;AAE5B,aACE,qBAAC,OAAD;OAEE,eAAa,gBAAgB;OAC7B,OAAO;QACL,UAAU,GAAG,SAAS;QACtB,OAAO,gBAAgB,MAAM,OAAO,cAAc,QAAQ;QAC1D,YAAY,MAAM,WAAW;QAC7B,SAAS;QACT,gBAAgB;QAChB,YAAY;QACZ,KAAK;QACL,WAAW,UAAU,IAAI,0BAA0B;QACpD;iBAZH,CAeE,oBAAC,QAAD;QACE,OAAO;SACL,MAAM;SACN,UAAU;SACV,cAAc;SACd,YAAY;SACb;kBAEA,MAAM;QACF,CAAA,EAGP,oBAAC,QAAD;QACE,OAAO;SACL,SAAS;SACT,YAAY,gBACV,MAAM,OAAO,aACb,KAAM,QACP;SACD,QAAQ,aAAa,gBAAgB,MAAM,OAAO,aAAa,KAAM,QAAQ;SAC7E,cAAc;SACd,UAAU,GAAG,WAAW,EAAE;SAC1B,YAAY;SACZ,UAAU,WAAW,SAAS;SAC9B,WAAW;SACZ;kBAEA,MAAM,IAAI,aAAa;QACnB,CAAA,CACH;SA3CC,GAAG,MAAM,UAAU,GAAG,MAAM,MA2C7B;OAER;KACE,CAAA;IAGL;IACG;;EACD,CAAA"}

package/lib/components/screens/controls/ControlsScreen3D.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlsScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAqB/D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,~~CA6gD5D~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"ControlsScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAqB/D,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8gD5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/screens/controls/ControlsScreen3D.js CHANGED Viewed

@@ -76,7 +76,8 @@ var ControlsScreen3D = ({ onReturnToMenu, width: propWidth, height: propHeight }
 		textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, "0")}`,
 		textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
 		accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, "0")}`,
-		accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, "0")}`
+		accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, "0")}`,
+		koreanBlack: `#${theme.colors.KOREAN_BLACK.toString(16).padStart(6, "0")}`
 	}), [theme]);
 	useEffect(() => {
 		const handleKeyDown = (event) => {
@@ -352,7 +353,7 @@ var ControlsScreen3D = ({ onReturnToMenu, width: propWidth, height: propHeight }
 															justifyContent: "center",
 															fontSize: isMobile ? "14px" : "16px",
 															fontWeight: "bold",
-															color: "#000"
+															color: colors.koreanBlack
 														},
 														children: key
 													}),

package/lib/components/screens/controls/ControlsScreen3D.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ControlsScreen3D.js","names":[],"sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"sourcesContent":["// UI renders outside Canvas in absolute-positioned div - no Html needed\nimport { Canvas } from \"@react-three/fiber\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { COMBAT_CONTROLS } from \"../../../systems\";\nimport { FONT_FAMILY } from \"@/types/constants\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\nimport { getLayoutConstants } from \"../../../utils/responsiveLayoutHelpers\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { BackgroundScene3D } from \"../../shared/three\";\nimport { BackButton } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ControlBindingsOverlayHtml } from \"./components/ControlBindingsOverlayHtml\";\nimport { ControlCategoryTabs } from \"./components/ControlCategoryTabsOverlayHtml\";\nimport { GamepadVisualization3D } from \"./components/GamepadVisualization3D\";\nimport { InteractiveControlDemo } from \"./components/InteractiveControlDemoOverlayHtml\";\nimport { VisualKeyboard3D } from \"./components/VisualKeyboard3D\";\nimport { useControlsState } from \"./hooks/useControlsState\";\n\nexport interface ControlsScreen3DProps {\n readonly onReturnToMenu: () => void;\n readonly width?: number;\n readonly height?: number;\n}\n\n/*\n Three.js-based ControlsScreen Component\n /\nexport const ControlsScreen3D: React.FC<ControlsScreen3DProps> = ({\n onReturnToMenu,\n width: propWidth,\n height: propHeight,\n}) => {\n // UI now renders outside Canvas - no mount state needed\n\n // Use controls state hook for keyboard/gamepad tracking\n const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } =\n useControlsState();\n\n // Handle WebGL context loss and restoration (for 3D background only)\n useWebGLContextLossHandler({\n onContextLost: () => {\n console.warn(\"⚠️ WebGL context lost in ControlsScreen\");\n },\n onContextRestored: () => {\n console.log(\"✓ WebGL context restored in ControlsScreen\");\n },\n autoRestore: true,\n });\n\n const audio = useAudio();\n const { width, height } = useWindowSize();\n\n // Use prop dimensions if provided, otherwise use window size\n const screenWidth = propWidth ?? width;\n const screenHeight = propHeight ?? height;\n\n // Responsive layout calculations with large desktop support\n // Use device detection instead of width-only breakpoint to correctly identify high-res mobile devices\n const isMobile = shouldUseMobileControls();\n // Only use width for tablet/desktop distinction when NOT mobile\n const isTablet = useMemo(\n () => !isMobile && screenWidth >= 768 && screenWidth < 1024,\n [isMobile, screenWidth],\n );\n const isLargeDesktop = useMemo(\n () => !isMobile && screenWidth >= 1920,\n [isMobile, screenWidth],\n ); // 4K/2K displays\n\n // Use centralized responsive layout helper for consistent scaling\n const layoutConstants = useMemo(\n () => getLayoutConstants(screenWidth),\n [screenWidth],\n );\n\n // Use Korean theme hook for consistent theming\n const theme = useKoreanTheme({\n variant: \"primary\",\n size: \"md\",\n isMobile,\n });\n\n // Memoize scrollbar style to prevent re-creating style tag on every render\n const scrollbarStyle = useMemo(\n () => ({\n __html: `\n .korean-scrollbar::-webkit-scrollbar {\n width: 12px !important;\n display: block !important;\n }\n .korean-scrollbar::-webkit-scrollbar-track {\n background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n border-radius: 6px;\n }\n .korean-scrollbar::-webkit-scrollbar-thumb {\n background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};\n border-radius: 6px;\n border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n }\n .korean-scrollbar::-webkit-scrollbar-thumb:hover {\n background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n }\n `,\n }),\n [theme],\n );\n\n // Memoize colors from theme for performance\n const colors = useMemo(\n () => ({\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5),\n borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.8),\n textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, \"0\")}`,\n }),\n [theme],\n );\n\n // Enhanced keyboard handling for screen-level navigation\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" \|\| event.key.toLowerCase() === \"m\") {\n event.preventDefault();\n audio.playSFX(\"menu_back\");\n onReturnToMenu();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown, { passive: false });\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [onReturnToMenu, audio]);\n\n // Handle back button click\n const handleBackClick = useCallback(() => {\n audio.playSFX(\"menu_back\");\n onReturnToMenu();\n }, [audio, onReturnToMenu]);\n\n // Mode toggle button hover handlers (extracted for DRY)\n const handleModeButtonEnter = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n if (!isActive) {\n e.currentTarget.style.background = hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.1,\n );\n e.currentTarget.style.borderColor = hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.8,\n );\n }\n },\n [theme],\n );\n\n const handleModeButtonLeave = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n if (!isActive) {\n e.currentTarget.style.background = hexToRgbaString(\n theme.colors.UI_BACKGROUND_DARK,\n 0.8,\n );\n e.currentTarget.style.borderColor = hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.6,\n );\n }\n },\n [theme],\n );\n\n // Stance controls data\n const stanceControls = useMemo(\n () => Object.entries(COMBAT_CONTROLS.stanceControls),\n [],\n );\n\n // Combat controls data\n const combatControls = useMemo(\n () => Object.entries(COMBAT_CONTROLS.combat),\n [],\n );\n\n // Grid layout calculations\n const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n const buttonHeight = isMobile\n ? 120\n : isTablet\n ? 130\n : isLargeDesktop\n ? 120\n : 140;\n\n return (\n <div\n style={{\n width: screenWidth,\n height: screenHeight,\n position: \"relative\",\n overflow: \"hidden\",\n }}\n data-testid=\"controls-screen\"\n >\n {/ Volume Control - outside Canvas to maintain AudioProvider context /}\n <VolumeControl position=\"top-right\" compact={isMobile} />\n\n {/ Three.js Canvas for 3D background and visualization /}\n <Canvas\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: Z_INDEX.ARENA,\n }}\n gl={{\n antialias: true,\n alpha: false,\n powerPreference: \"high-performance\",\n }}\n dpr={[1, 2]}\n camera={{ position: [0, 5, 10], fov: 75 }}\n onCreated={({ gl }) => {\n gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n }}\n >\n {/ 3D Background Scene /}\n <BackgroundScene3D theme=\"controls\" />\n\n {/ Conditional 3D Visualization based on category /}\n {category === \"keyboard\" ? (\n <VisualKeyboard3D\n pressedKeys={pressedKeys}\n selectedTab={selectedTab}\n />\n ) : (\n <GamepadVisualization3D isMobile={isMobile} />\n )}\n </Canvas>\n\n {/ UI Overlay (positioned absolutely over Canvas) - matches CombatScreen pattern /}\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n pointerEvents: \"none\",\n zIndex: Z_INDEX.HUD,\n }}\n data-testid=\"controls-hud-overlay\"\n >\n {/ WebKit Scrollbar Styling - Using !important to override global hide /}\n <style dangerouslySetInnerHTML={scrollbarStyle} />\n\n <div\n style={{\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n color: colors.textPrimary,\n fontFamily: theme.koreanTypography.fontFamily,\n lineHeight: theme.koreanTypography.lineHeight,\n pointerEvents: \"auto\",\n }}\n >\n {/ Header /}\n <div\n style={{\n height: `${layoutConstants.headerHeight}px`,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: colors.headerBg,\n borderBottom: `3px solid ${colors.borderRed}`,\n padding: `${layoutConstants.padding}px`,\n }}\n data-testid=\"controls-header\"\n >\n <h1\n style={{\n fontSize: isMobile ? \"20px\" : \"24px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: 0,\n textShadow: `0 0 10px ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.5,\n )}`,\n }}\n >\n 조작법 안내 - Controls Guide\n </h1>\n <p\n style={{\n fontSize: isMobile ? \"12px\" : \"16px\",\n color: colors.accentCyan,\n margin: \"8px 0 0 0\",\n fontStyle: \"italic\",\n }}\n >\n ☯ 팔괘 철학과 급소술의 융합 \| Eight Trigrams Philosophy & Vital\n Point Arts ☯\n </p>\n </div>\n\n {/ Mode Toggle (Keyboard/Gamepad) /}\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n gap: isMobile ? \"10px\" : \"15px\",\n padding: `${layoutConstants.padding}px`,\n background: colors.headerBg,\n borderBottom: `2px solid ${colors.borderGold}`,\n }}\n data-testid=\"mode-toggle\"\n >\n <button\n onClick={() => {\n audio.playSFX(\"menu_select\");\n setCategory(\"keyboard\");\n }}\n style={{\n padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n borderRadius: \"8px\",\n border: `2px solid ${category === \"keyboard\" ? colors.accentCyan : colors.borderGold}`,\n background:\n category === \"keyboard\"\n ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n color:\n category === \"keyboard\"\n ? colors.accentCyan\n : colors.textSecondary,\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n }}\n data-testid=\"keyboard-mode-button\"\n onMouseEnter={(e) =>\n handleModeButtonEnter(e, category === \"keyboard\")\n }\n onMouseLeave={(e) =>\n handleModeButtonLeave(e, category === \"keyboard\")\n }\n >\n ⌨️ 키보드 \| Keyboard\n </button>\n <button\n onClick={() => {\n audio.playSFX(\"menu_select\");\n setCategory(\"gamepad\");\n }}\n style={{\n padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n borderRadius: \"8px\",\n border: `2px solid ${category === \"gamepad\" ? colors.accentCyan : colors.borderGold}`,\n background:\n category === \"gamepad\"\n ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n color:\n category === \"gamepad\"\n ? colors.accentCyan\n : colors.textSecondary,\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n }}\n data-testid=\"gamepad-mode-button\"\n onMouseEnter={(e) =>\n handleModeButtonEnter(e, category === \"gamepad\")\n }\n onMouseLeave={(e) =>\n handleModeButtonLeave(e, category === \"gamepad\")\n }\n >\n 🎮 게임패드 \| Gamepad\n </button>\n </div>\n\n {/ Control Category Tabs /}\n <div\n style={{\n background: colors.headerBg,\n borderBottom: `2px solid ${colors.borderCyan}`,\n }}\n >\n <ControlCategoryTabs\n selectedTab={selectedTab}\n onTabChange={(tab) => {\n audio.playSFX(\"menu_select\");\n setSelectedTab(tab);\n }}\n isMobile={isMobile}\n />\n </div>\n\n {/ Content Area - Scrollable /}\n <div\n style={{\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n padding: `${layoutConstants.padding}px`,\n // Custom scrollbar styling for Korean aesthetic (Firefox)\n scrollbarWidth: \"thin\",\n scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`,\n }}\n className=\"korean-scrollbar\"\n data-testid=\"controls-content\"\n >\n {/ Control Bindings Display /}\n <ControlBindingsOverlayHtml\n selectedTab={selectedTab}\n isMobile={isMobile}\n />\n\n {/ Legacy Content - Keeping for backward compatibility and additional info /}\n {/ Trigram Stances Section - Additional context beyond key bindings /}\n <div\n style={{\n marginTop: `${layoutConstants.sectionSpacing}px`,\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${colors.borderGold}`,\n padding: \"20px\",\n }}\n data-testid=\"trigram-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: \"0 0 10px 0\",\n }}\n >\n 팔괘 무술 자세 - Eight Trigram Combat Stances\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"11px\" : \"14px\",\n color: colors.accentCyan,\n fontStyle: \"italic\",\n margin: \"0 0 20px 0\",\n }}\n >\n 🗡️ 전통 한국 무예의 8가지 핵심 자세 \| 8 Core Stances of\n Traditional Korean Martial Arts 🗡️\n </p>\n\n {/ Stance Controls Grid /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,\n gap: \"15px\",\n }}\n data-testid=\"stance-controls-grid\"\n >\n {stanceControls.map(([key, value]) => (\n <div\n key={key}\n style={{\n background: `linear-gradient(135deg, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n )}, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.9,\n )})`,\n borderRadius: \"10px\",\n border: `2px solid ${colors.borderGold}`,\n padding: \"12px\",\n position: \"relative\",\n minHeight: `${buttonHeight}px`,\n }}\n data-testid={`stance-control-${key}`}\n >\n {/ Key Badge /}\n <div\n style={{\n position: \"absolute\",\n top: \"8px\",\n left: \"8px\",\n background: colors.accentGold,\n borderRadius: \"6px\",\n width: \"25px\",\n height: \"25px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: \"#000\",\n }}\n >\n {key}\n </div>\n\n {/ Trigram Symbol /}\n <div\n style={{\n position: \"absolute\",\n top: \"8px\",\n right: \"8px\",\n fontSize: isMobile ? \"18px\" : \"22px\",\n color: colors.accentGold,\n fontWeight: \"bold\",\n }}\n >\n {value.symbol}\n </div>\n\n {/ Stance Name /}\n <div style={{ marginTop: \"35px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"12px\" : \"14px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n }}\n >\n {value.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {value.english}\n </div>\n </div>\n\n {/ Technique /}\n <div style={{ marginTop: \"8px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n }}\n >\n 🥋 {value.technique.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.accentCyan,\n fontStyle: \"italic\",\n }}\n >\n {value.technique.english}\n </div>\n </div>\n\n {/ Combat Focus /}\n <div style={{ marginTop: \"6px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n 16,\n ).padStart(6, \"0\")}`,\n }}\n >\n ⚔️ {value.combatFocus.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n 16,\n ).padStart(6, \"0\")}`,\n fontStyle: \"italic\",\n }}\n >\n {value.combatFocus.english}\n </div>\n </div>\n\n {/ Combat Effects /}\n <div\n style={{\n marginTop: \"6px\",\n fontSize: isMobile ? \"7px\" : \"8px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.NEGATIVE_RED.toString(\n 16,\n ).padStart(6, \"0\")}`,\n }}\n >\n 💥 {value.combatEffects.korean}\n </div>\n\n {/ Effectiveness Indicator /}\n <div\n style={{\n position: \"absolute\",\n bottom: \"8px\",\n right: \"8px\",\n fontSize: isMobile ? \"7px\" : \"8px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.KOREAN_RED.toString(\n 16,\n ).padStart(6, \"0\")}`,\n }}\n >\n 급소술\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Combat Controls Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${colors.borderCyan}`,\n padding: \"20px\",\n }}\n data-testid=\"combat-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n margin: \"0 0 20px 0\",\n }}\n >\n 실전 격투 조작 - Combat Actions\n </h2>\n\n {/ Combat Controls List /}\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n data-testid=\"combat-controls-list\"\n >\n {combatControls.map(([key, description]) => (\n <div\n key={key}\n style={{\n background: `linear-gradient(90deg, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.9,\n )}, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n )})`,\n borderRadius: \"8px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"12px\",\n display: \"flex\",\n alignItems: \"center\",\n gap: \"15px\",\n }}\n data-testid={`combat-control-${key}`}\n >\n {/ Key Badge /}\n <div\n style={{\n background: hexToRgbaString(\n theme.colors.ACCENT_CYAN,\n 0.3,\n ),\n borderRadius: \"6px\",\n padding: \"4px 12px\",\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n minWidth: \"60px\",\n textAlign: \"center\",\n }}\n >\n {key}\n </div>\n\n {/ Description /}\n <div style={{ flex: 1 }}>\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"13px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n }}\n >\n {description.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"11px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {description.english}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Movement Controls Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.SECONDARY_MAGENTA,\n 0.5,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"movement-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n 16,\n ).padStart(6, \"0\")}`,\n margin: \"0 0 20px 0\",\n }}\n >\n 이동 조작 - Movement Controls\n </h2>\n\n {/ Movement Keys /}\n <div style={{ marginBottom: \"15px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"12px\" : \"14px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"10px\",\n }}\n >\n WASD 또는 방향키 \| WASD or Arrow Keys\n </div>\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: isMobile\n ? \"1fr 1fr\"\n : \"1fr 1fr 1fr 1fr\",\n gap: \"8px\",\n }}\n >\n {[\n { key: \"W/↑\", korean: \"전진\", english: \"Forward\" },\n { key: \"S/↓\", korean: \"후퇴\", english: \"Backward\" },\n { key: \"A/←\", korean: \"좌\", english: \"Left\" },\n { key: \"D/→\", korean: \"우\", english: \"Right\" },\n ].map((move) => (\n <div\n key={move.key}\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.8,\n ),\n borderRadius: \"6px\",\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"13px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n }}\n >\n {move.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textSecondary,\n }}\n >\n {move.korean} \| {move.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Advanced Footwork Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.5,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"advanced-footwork\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n margin: \"0 0 10px 0\",\n }}\n >\n 고급 보법 - Advanced Footwork\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n margin: \"0 0 15px 0\",\n }}\n >\n 🥋 전통 한국 무예 발놀림 기법 \| Traditional Korean martial arts\n footwork techniques\n </p>\n\n {/ Tactical Steps /}\n <div style={{ marginBottom: \"20px\" }}>\n <h3\n style={{\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"10px\",\n }}\n >\n ✅ 전술보법 (Shift + WASD) \| Tactical Steps - IMPLEMENTED\n </h3>\n <p\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n marginBottom: \"10px\",\n fontStyle: \"italic\",\n }}\n >\n Precise 30cm repositioning • 300ms duration •\n Non-interruptible • 5 stamina cost\n </p>\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: isMobile\n ? \"1fr 1fr\"\n : \"repeat(4, 1fr)\",\n gap: \"8px\",\n }}\n >\n {[\n {\n key: \"Shift+W\",\n korean: \"전진보법\",\n english: \"Forward Step\",\n },\n {\n key: \"Shift+S\",\n korean: \"후퇴보법\",\n english: \"Retreat Step\",\n },\n {\n key: \"Shift+A\",\n korean: \"좌측면보법\",\n english: \"Left Step\",\n },\n {\n key: \"Shift+D\",\n korean: \"우측면보법\",\n english: \"Right Step\",\n },\n {\n key: \"Shift+W+A\",\n korean: \"전좌측보법\",\n english: \"Forward-Left\",\n },\n {\n key: \"Shift+W+D\",\n korean: \"전우측보법\",\n english: \"Forward-Right\",\n },\n {\n key: \"Shift+S+A\",\n korean: \"후좌측보법\",\n english: \"Back-Left\",\n },\n {\n key: \"Shift+S+D\",\n korean: \"후우측보법\",\n english: \"Back-Right\",\n },\n ].map((step) => (\n <div\n key={step.key}\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.8,\n ),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"4px\",\n }}\n >\n {step.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textPrimary,\n }}\n >\n {step.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"6px\" : \"7px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {step.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Footwork Patterns /}\n <div>\n <h3\n style={{\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"10px\",\n }}\n >\n 보법 패턴 (Ctrl + WASD) \| Footwork Patterns\n </h3>\n\n {/ Circular Steps /}\n <div style={{ marginBottom: \"12px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"12px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n marginBottom: \"6px\",\n }}\n >\n ✅ 원형보 (Wonhyeongbo) \| Circular Step - IMPLEMENTED\n </div>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textSecondary,\n marginBottom: \"8px\",\n fontStyle: \"italic\",\n }}\n >\n Lateral movement while maintaining guard • 30cm distance •\n 300ms\n </p>\n <div style={{ display: \"flex\", gap: \"8px\" }}>\n {[\n {\n key: \"Ctrl+A\",\n korean: \"원형보 좌\",\n english: \"Circular Left\",\n },\n {\n key: \"Ctrl+D\",\n korean: \"원형보 우\",\n english: \"Circular Right\",\n },\n ].map((move) => (\n <div\n key={move.key}\n style={{\n flex: 1,\n background: hexToRgbaString(\n theme.colors.ACCENT_CYAN,\n 0.2,\n ),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n }}\n >\n {move.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n }}\n >\n {move.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {move.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Slide Steps /}\n <div style={{ marginBottom: \"12px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"12px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n marginBottom: \"6px\",\n }}\n >\n ✅ 미끄럼보 (Mikkeureombo) \| Slide Step - IMPLEMENTED\n </div>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textSecondary,\n marginBottom: \"8px\",\n fontStyle: \"italic\",\n }}\n >\n Both feet move together • 30cm distance • 200ms (faster!)\n </p>\n <div style={{ display: \"flex\", gap: \"8px\" }}>\n {[\n {\n key: \"Ctrl+W\",\n korean: \"미끄럼보 전\",\n english: \"Slide Forward\",\n },\n {\n key: \"Ctrl+S\",\n korean: \"미끄럼보 후\",\n english: \"Slide Back\",\n },\n ].map((move) => (\n <div\n key={move.key}\n style={{\n flex: 1,\n background: hexToRgbaString(\n theme.colors.ACCENT_CYAN,\n 0.2,\n ),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n }}\n >\n {move.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n }}\n >\n {move.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {move.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Pending Footwork /}\n <div\n style={{\n marginTop: \"15px\",\n padding: \"10px\",\n background: hexToRgbaString(theme.colors.ACCENT_CYAN, 0.2),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"6px\",\n }}\n >\n ✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED\n </div>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n margin: \"0 0 6px 0\",\n }}\n >\n <strong>축족회전 (Chukjok Hoejeon) \| Pivot</strong>:\n Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on\n planted foot • 250ms\n </p>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n margin: 0,\n }}\n >\n <strong>섞음보 (Seokkeumbo) \| Shuffle</strong>: Shift+Ctrl+W\n or Shift+Ctrl+S • 15cm micro-adjustment • 100ms\n </p>\n </div>\n </div>\n </div>\n\n {/ Stance Side Switch Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.5,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"stance-side-switch\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: \"0 0 10px 0\",\n }}\n >\n 자세 발 바꿈 - Stance Side Switch\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n margin: \"0 0 15px 0\",\n }}\n >\n ✅ 전방 발 전환 \| Switch front foot position - IMPLEMENTED\n </p>\n\n <div\n style={{\n background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderGold}`,\n padding: \"12px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"16px\" : \"18px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"8px\",\n }}\n >\n H\n </div>\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n color: colors.textPrimary,\n marginBottom: \"4px\",\n }}\n >\n 발 바꿈 (Bal Bakkum)\n </div>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n Switch Front Foot\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n marginTop: \"6px\",\n fontStyle: \"italic\",\n }}\n >\n Mirrors your stance (left ↔ right) • 400ms duration\n </div>\n </div>\n </div>\n\n {/ Technique Controls Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.6,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"technique-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: \"0 0 10px 0\",\n }}\n >\n 기술 실행 - Technique Execution\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n margin: \"0 0 15px 0\",\n }}\n >\n ⚡ 원형별 고유 기술 (최대 10개) \| Archetype-specific techniques\n (up to 10)\n </p>\n\n {/ Technique Keys Grid /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: isMobile\n ? \"repeat(5, 1fr)\"\n : \"repeat(10, 1fr)\",\n gap: isMobile ? \"6px\" : \"8px\",\n }}\n >\n {[\"Q\", \"E\", \"R\", \"T\", \"Y\", \"F\", \"G\", \"Z\", \"X\", \"C\"].map(\n (key, index) => (\n <div\n key={key}\n style={{\n background: `linear-gradient(135deg, ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.3,\n )}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.1)})`,\n borderRadius: \"6px\",\n border: `2px solid ${colors.borderGold}`,\n padding: isMobile ? \"8px 4px\" : \"10px 6px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n }}\n >\n {key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n marginTop: \"2px\",\n }}\n >\n 기술 {index + 1}\n </div>\n </div>\n ),\n )}\n </div>\n\n {/ Technique Notes /}\n <div\n style={{\n marginTop: \"15px\",\n padding: \"10px\",\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_DARK,\n 0.6,\n ),\n borderRadius: \"6px\",\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n 💡 <strong>Tip</strong>: Keys positioned around WASD for easy\n access without interfering with movement. Each archetype has\n unique techniques.\n </div>\n </div>\n\n {/ Special Features Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${colors.borderRed}`,\n padding: \"20px\",\n }}\n data-testid=\"special-features\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.KOREAN_RED.toString(16).padStart(\n 6,\n \"0\",\n )}`,\n margin: \"0 0 20px 0\",\n }}\n >\n 특수 기능 - Special Features\n </h2>\n\n {/ Special Keys List /}\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n >\n {[\n {\n key: \"V\",\n korean: \"급소 표시 전환\",\n english: \"Toggle vital points overlay (70 points)\",\n },\n {\n key: \"B\",\n korean: \"방어 자세\",\n english: \"Defensive guard position\",\n },\n {\n key: \"F1\",\n korean: \"조작법 힌트\",\n english: \"Show control hints\",\n },\n {\n key: \"ESC / M\",\n korean: \"일시정지 / 메뉴\",\n english: \"Pause menu / Return to menu\",\n },\n ].map((special) => (\n <div\n key={special.key}\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.8,\n ),\n borderRadius: \"8px\",\n border: `1px solid ${colors.borderRed}`,\n padding: \"10px\",\n display: \"flex\",\n alignItems: \"center\",\n gap: \"12px\",\n }}\n >\n <div\n style={{\n background: hexToRgbaString(\n theme.colors.KOREAN_RED,\n 0.3,\n ),\n borderRadius: \"6px\",\n padding: \"4px 10px\",\n fontSize: isMobile ? \"12px\" : \"14px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n minWidth: \"50px\",\n textAlign: \"center\",\n }}\n >\n {special.key}\n </div>\n <div style={{ flex: 1 }}>\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n }}\n >\n {special.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {special.english}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Interactive Control Demo - Shows recently pressed keys /}\n <InteractiveControlDemo\n pressedKeys={pressedKeys}\n isMobile={isMobile}\n />\n\n {/ Footer /}\n <div\n style={{\n height: `${layoutConstants.footerHeight}px`,\n background: colors.headerBg,\n borderTop: `3px solid ${colors.borderRed}`,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: `0 ${layoutConstants.padding}px`,\n }}\n data-testid=\"controls-footer\"\n >\n {/ Philosophy Text /}\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.accentGold,\n fontStyle: \"italic\",\n }}\n >\n 🥋 흑괘의 길을 걸어라 \| Walk the Path of the Black Trigram 🥋\n </div>\n\n {/ Back Button /}\n <BackButton\n onClick={handleBackClick}\n korean=\"무도장 복귀\"\n english=\"Return to Dojang\"\n isMobile={isMobile}\n testId=\"controls-back-button\"\n />\n\n {/ Keyboard Hint /}\n <div\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n ),\n borderRadius: \"6px\",\n padding: \"8px 12px\",\n fontSize: isMobile ? \"11px\" : \"12px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(\n 6,\n \"0\",\n )}`,\n border: `1px solid ${colors.borderGold}`,\n }}\n data-testid=\"keyboard-shortcuts\"\n >\n ESC \| M\n </div>\n </div>\n\n {/ Footer Instruction */}\n <div\n style={{\n textAlign: \"center\",\n padding: \"10px\",\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.7),\n }}\n >\n ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default ControlsScreen3D;\n"],"mappings":"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"}
1	+ {"version":3,"file":"ControlsScreen3D.js","names":[],"sources":["../../../../src/components/screens/controls/ControlsScreen3D.tsx"],"sourcesContent":["// UI renders outside Canvas in absolute-positioned div - no Html needed\nimport { Canvas } from \"@react-three/fiber\";\nimport React, { useCallback, useEffect, useMemo } from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { COMBAT_CONTROLS } from \"../../../systems\";\nimport { FONT_FAMILY } from \"@/types/constants\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\nimport { getLayoutConstants } from \"../../../utils/responsiveLayoutHelpers\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { BackgroundScene3D } from \"../../shared/three\";\nimport { BackButton } from \"../../shared/ui/BackButton\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ControlBindingsOverlayHtml } from \"./components/ControlBindingsOverlayHtml\";\nimport { ControlCategoryTabs } from \"./components/ControlCategoryTabsOverlayHtml\";\nimport { GamepadVisualization3D } from \"./components/GamepadVisualization3D\";\nimport { InteractiveControlDemo } from \"./components/InteractiveControlDemoOverlayHtml\";\nimport { VisualKeyboard3D } from \"./components/VisualKeyboard3D\";\nimport { useControlsState } from \"./hooks/useControlsState\";\n\nexport interface ControlsScreen3DProps {\n readonly onReturnToMenu: () => void;\n readonly width?: number;\n readonly height?: number;\n}\n\n/*\n Three.js-based ControlsScreen Component\n /\nexport const ControlsScreen3D: React.FC<ControlsScreen3DProps> = ({\n onReturnToMenu,\n width: propWidth,\n height: propHeight,\n}) => {\n // UI now renders outside Canvas - no mount state needed\n\n // Use controls state hook for keyboard/gamepad tracking\n const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } =\n useControlsState();\n\n // Handle WebGL context loss and restoration (for 3D background only)\n useWebGLContextLossHandler({\n onContextLost: () => {\n console.warn(\"⚠️ WebGL context lost in ControlsScreen\");\n },\n onContextRestored: () => {\n console.log(\"✓ WebGL context restored in ControlsScreen\");\n },\n autoRestore: true,\n });\n\n const audio = useAudio();\n const { width, height } = useWindowSize();\n\n // Use prop dimensions if provided, otherwise use window size\n const screenWidth = propWidth ?? width;\n const screenHeight = propHeight ?? height;\n\n // Responsive layout calculations with large desktop support\n // Use device detection instead of width-only breakpoint to correctly identify high-res mobile devices\n const isMobile = shouldUseMobileControls();\n // Only use width for tablet/desktop distinction when NOT mobile\n const isTablet = useMemo(\n () => !isMobile && screenWidth >= 768 && screenWidth < 1024,\n [isMobile, screenWidth],\n );\n const isLargeDesktop = useMemo(\n () => !isMobile && screenWidth >= 1920,\n [isMobile, screenWidth],\n ); // 4K/2K displays\n\n // Use centralized responsive layout helper for consistent scaling\n const layoutConstants = useMemo(\n () => getLayoutConstants(screenWidth),\n [screenWidth],\n );\n\n // Use Korean theme hook for consistent theming\n const theme = useKoreanTheme({\n variant: \"primary\",\n size: \"md\",\n isMobile,\n });\n\n // Memoize scrollbar style to prevent re-creating style tag on every render\n const scrollbarStyle = useMemo(\n () => ({\n __html: `\n .korean-scrollbar::-webkit-scrollbar {\n width: 12px !important;\n display: block !important;\n }\n .korean-scrollbar::-webkit-scrollbar-track {\n background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n border-radius: 6px;\n }\n .korean-scrollbar::-webkit-scrollbar-thumb {\n background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};\n border-radius: 6px;\n border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8)};\n }\n .korean-scrollbar::-webkit-scrollbar-thumb:hover {\n background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};\n }\n `,\n }),\n [theme],\n );\n\n // Memoize colors from theme for performance\n const colors = useMemo(\n () => ({\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.6),\n borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5),\n borderRed: hexToRgbaString(theme.colors.KOREAN_RED, 0.8),\n textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, \"0\")}`,\n koreanBlack: `#${theme.colors.KOREAN_BLACK.toString(16).padStart(6, \"0\")}`,\n }),\n [theme],\n );\n\n // Enhanced keyboard handling for screen-level navigation\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" \|\| event.key.toLowerCase() === \"m\") {\n event.preventDefault();\n audio.playSFX(\"menu_back\");\n onReturnToMenu();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown, { passive: false });\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [onReturnToMenu, audio]);\n\n // Handle back button click\n const handleBackClick = useCallback(() => {\n audio.playSFX(\"menu_back\");\n onReturnToMenu();\n }, [audio, onReturnToMenu]);\n\n // Mode toggle button hover handlers (extracted for DRY)\n const handleModeButtonEnter = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n if (!isActive) {\n e.currentTarget.style.background = hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.1,\n );\n e.currentTarget.style.borderColor = hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.8,\n );\n }\n },\n [theme],\n );\n\n const handleModeButtonLeave = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>, isActive: boolean) => {\n if (!isActive) {\n e.currentTarget.style.background = hexToRgbaString(\n theme.colors.UI_BACKGROUND_DARK,\n 0.8,\n );\n e.currentTarget.style.borderColor = hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.6,\n );\n }\n },\n [theme],\n );\n\n // Stance controls data\n const stanceControls = useMemo(\n () => Object.entries(COMBAT_CONTROLS.stanceControls),\n [],\n );\n\n // Combat controls data\n const combatControls = useMemo(\n () => Object.entries(COMBAT_CONTROLS.combat),\n [],\n );\n\n // Grid layout calculations\n const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;\n const buttonHeight = isMobile\n ? 120\n : isTablet\n ? 130\n : isLargeDesktop\n ? 120\n : 140;\n\n return (\n <div\n style={{\n width: screenWidth,\n height: screenHeight,\n position: \"relative\",\n overflow: \"hidden\",\n }}\n data-testid=\"controls-screen\"\n >\n {/ Volume Control - outside Canvas to maintain AudioProvider context /}\n <VolumeControl position=\"top-right\" compact={isMobile} />\n\n {/ Three.js Canvas for 3D background and visualization /}\n <Canvas\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n zIndex: Z_INDEX.ARENA,\n }}\n gl={{\n antialias: true,\n alpha: false,\n powerPreference: \"high-performance\",\n }}\n dpr={[1, 2]}\n camera={{ position: [0, 5, 10], fov: 75 }}\n onCreated={({ gl }) => {\n gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n }}\n >\n {/ 3D Background Scene /}\n <BackgroundScene3D theme=\"controls\" />\n\n {/ Conditional 3D Visualization based on category /}\n {category === \"keyboard\" ? (\n <VisualKeyboard3D\n pressedKeys={pressedKeys}\n selectedTab={selectedTab}\n />\n ) : (\n <GamepadVisualization3D isMobile={isMobile} />\n )}\n </Canvas>\n\n {/ UI Overlay (positioned absolutely over Canvas) - matches CombatScreen pattern /}\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n pointerEvents: \"none\",\n zIndex: Z_INDEX.HUD,\n }}\n data-testid=\"controls-hud-overlay\"\n >\n {/ WebKit Scrollbar Styling - Using !important to override global hide /}\n <style dangerouslySetInnerHTML={scrollbarStyle} />\n\n <div\n style={{\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n color: colors.textPrimary,\n fontFamily: theme.koreanTypography.fontFamily,\n lineHeight: theme.koreanTypography.lineHeight,\n pointerEvents: \"auto\",\n }}\n >\n {/ Header /}\n <div\n style={{\n height: `${layoutConstants.headerHeight}px`,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: colors.headerBg,\n borderBottom: `3px solid ${colors.borderRed}`,\n padding: `${layoutConstants.padding}px`,\n }}\n data-testid=\"controls-header\"\n >\n <h1\n style={{\n fontSize: isMobile ? \"20px\" : \"24px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: 0,\n textShadow: `0 0 10px ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.5,\n )}`,\n }}\n >\n 조작법 안내 - Controls Guide\n </h1>\n <p\n style={{\n fontSize: isMobile ? \"12px\" : \"16px\",\n color: colors.accentCyan,\n margin: \"8px 0 0 0\",\n fontStyle: \"italic\",\n }}\n >\n ☯ 팔괘 철학과 급소술의 융합 \| Eight Trigrams Philosophy & Vital\n Point Arts ☯\n </p>\n </div>\n\n {/ Mode Toggle (Keyboard/Gamepad) /}\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n gap: isMobile ? \"10px\" : \"15px\",\n padding: `${layoutConstants.padding}px`,\n background: colors.headerBg,\n borderBottom: `2px solid ${colors.borderGold}`,\n }}\n data-testid=\"mode-toggle\"\n >\n <button\n onClick={() => {\n audio.playSFX(\"menu_select\");\n setCategory(\"keyboard\");\n }}\n style={{\n padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n borderRadius: \"8px\",\n border: `2px solid ${category === \"keyboard\" ? colors.accentCyan : colors.borderGold}`,\n background:\n category === \"keyboard\"\n ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n color:\n category === \"keyboard\"\n ? colors.accentCyan\n : colors.textSecondary,\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n }}\n data-testid=\"keyboard-mode-button\"\n onMouseEnter={(e) =>\n handleModeButtonEnter(e, category === \"keyboard\")\n }\n onMouseLeave={(e) =>\n handleModeButtonLeave(e, category === \"keyboard\")\n }\n >\n ⌨️ 키보드 \| Keyboard\n </button>\n <button\n onClick={() => {\n audio.playSFX(\"menu_select\");\n setCategory(\"gamepad\");\n }}\n style={{\n padding: isMobile ? \"10px 20px\" : \"12px 30px\",\n borderRadius: \"8px\",\n border: `2px solid ${category === \"gamepad\" ? colors.accentCyan : colors.borderGold}`,\n background:\n category === \"gamepad\"\n ? hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)\n : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n color:\n category === \"gamepad\"\n ? colors.accentCyan\n : colors.textSecondary,\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n }}\n data-testid=\"gamepad-mode-button\"\n onMouseEnter={(e) =>\n handleModeButtonEnter(e, category === \"gamepad\")\n }\n onMouseLeave={(e) =>\n handleModeButtonLeave(e, category === \"gamepad\")\n }\n >\n 🎮 게임패드 \| Gamepad\n </button>\n </div>\n\n {/ Control Category Tabs /}\n <div\n style={{\n background: colors.headerBg,\n borderBottom: `2px solid ${colors.borderCyan}`,\n }}\n >\n <ControlCategoryTabs\n selectedTab={selectedTab}\n onTabChange={(tab) => {\n audio.playSFX(\"menu_select\");\n setSelectedTab(tab);\n }}\n isMobile={isMobile}\n />\n </div>\n\n {/ Content Area - Scrollable /}\n <div\n style={{\n flex: 1,\n overflowY: \"auto\",\n overflowX: \"hidden\",\n padding: `${layoutConstants.padding}px`,\n // Custom scrollbar styling for Korean aesthetic (Firefox)\n scrollbarWidth: \"thin\",\n scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`,\n }}\n className=\"korean-scrollbar\"\n data-testid=\"controls-content\"\n >\n {/ Control Bindings Display /}\n <ControlBindingsOverlayHtml\n selectedTab={selectedTab}\n isMobile={isMobile}\n />\n\n {/ Legacy Content - Keeping for backward compatibility and additional info /}\n {/ Trigram Stances Section - Additional context beyond key bindings /}\n <div\n style={{\n marginTop: `${layoutConstants.sectionSpacing}px`,\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${colors.borderGold}`,\n padding: \"20px\",\n }}\n data-testid=\"trigram-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: \"0 0 10px 0\",\n }}\n >\n 팔괘 무술 자세 - Eight Trigram Combat Stances\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"11px\" : \"14px\",\n color: colors.accentCyan,\n fontStyle: \"italic\",\n margin: \"0 0 20px 0\",\n }}\n >\n 🗡️ 전통 한국 무예의 8가지 핵심 자세 \| 8 Core Stances of\n Traditional Korean Martial Arts 🗡️\n </p>\n\n {/ Stance Controls Grid /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,\n gap: \"15px\",\n }}\n data-testid=\"stance-controls-grid\"\n >\n {stanceControls.map(([key, value]) => (\n <div\n key={key}\n style={{\n background: `linear-gradient(135deg, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n )}, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.9,\n )})`,\n borderRadius: \"10px\",\n border: `2px solid ${colors.borderGold}`,\n padding: \"12px\",\n position: \"relative\",\n minHeight: `${buttonHeight}px`,\n }}\n data-testid={`stance-control-${key}`}\n >\n {/ Key Badge /}\n <div\n style={{\n position: \"absolute\",\n top: \"8px\",\n left: \"8px\",\n background: colors.accentGold,\n borderRadius: \"6px\",\n width: \"25px\",\n height: \"25px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.koreanBlack,\n }}\n >\n {key}\n </div>\n\n {/ Trigram Symbol /}\n <div\n style={{\n position: \"absolute\",\n top: \"8px\",\n right: \"8px\",\n fontSize: isMobile ? \"18px\" : \"22px\",\n color: colors.accentGold,\n fontWeight: \"bold\",\n }}\n >\n {value.symbol}\n </div>\n\n {/ Stance Name /}\n <div style={{ marginTop: \"35px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"12px\" : \"14px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n }}\n >\n {value.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {value.english}\n </div>\n </div>\n\n {/ Technique /}\n <div style={{ marginTop: \"8px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n }}\n >\n 🥋 {value.technique.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.accentCyan,\n fontStyle: \"italic\",\n }}\n >\n {value.technique.english}\n </div>\n </div>\n\n {/ Combat Focus /}\n <div style={{ marginTop: \"6px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n 16,\n ).padStart(6, \"0\")}`,\n }}\n >\n ⚔️ {value.combatFocus.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n 16,\n ).padStart(6, \"0\")}`,\n fontStyle: \"italic\",\n }}\n >\n {value.combatFocus.english}\n </div>\n </div>\n\n {/ Combat Effects /}\n <div\n style={{\n marginTop: \"6px\",\n fontSize: isMobile ? \"7px\" : \"8px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.NEGATIVE_RED.toString(\n 16,\n ).padStart(6, \"0\")}`,\n }}\n >\n 💥 {value.combatEffects.korean}\n </div>\n\n {/ Effectiveness Indicator /}\n <div\n style={{\n position: \"absolute\",\n bottom: \"8px\",\n right: \"8px\",\n fontSize: isMobile ? \"7px\" : \"8px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.KOREAN_RED.toString(\n 16,\n ).padStart(6, \"0\")}`,\n }}\n >\n 급소술\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Combat Controls Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${colors.borderCyan}`,\n padding: \"20px\",\n }}\n data-testid=\"combat-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n margin: \"0 0 20px 0\",\n }}\n >\n 실전 격투 조작 - Combat Actions\n </h2>\n\n {/ Combat Controls List /}\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n data-testid=\"combat-controls-list\"\n >\n {combatControls.map(([key, description]) => (\n <div\n key={key}\n style={{\n background: `linear-gradient(90deg, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.9,\n )}, ${hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n )})`,\n borderRadius: \"8px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"12px\",\n display: \"flex\",\n alignItems: \"center\",\n gap: \"15px\",\n }}\n data-testid={`combat-control-${key}`}\n >\n {/ Key Badge /}\n <div\n style={{\n background: hexToRgbaString(\n theme.colors.ACCENT_CYAN,\n 0.3,\n ),\n borderRadius: \"6px\",\n padding: \"4px 12px\",\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n minWidth: \"60px\",\n textAlign: \"center\",\n }}\n >\n {key}\n </div>\n\n {/ Description /}\n <div style={{ flex: 1 }}>\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"13px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n }}\n >\n {description.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"11px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {description.english}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Movement Controls Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.SECONDARY_MAGENTA,\n 0.5,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"movement-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(\n 16,\n ).padStart(6, \"0\")}`,\n margin: \"0 0 20px 0\",\n }}\n >\n 이동 조작 - Movement Controls\n </h2>\n\n {/ Movement Keys /}\n <div style={{ marginBottom: \"15px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"12px\" : \"14px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"10px\",\n }}\n >\n WASD 또는 방향키 \| WASD or Arrow Keys\n </div>\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: isMobile\n ? \"1fr 1fr\"\n : \"1fr 1fr 1fr 1fr\",\n gap: \"8px\",\n }}\n >\n {[\n { key: \"W/↑\", korean: \"전진\", english: \"Forward\" },\n { key: \"S/↓\", korean: \"후퇴\", english: \"Backward\" },\n { key: \"A/←\", korean: \"좌\", english: \"Left\" },\n { key: \"D/→\", korean: \"우\", english: \"Right\" },\n ].map((move) => (\n <div\n key={move.key}\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.8,\n ),\n borderRadius: \"6px\",\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"13px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n }}\n >\n {move.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textSecondary,\n }}\n >\n {move.korean} \| {move.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Advanced Footwork Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.5,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"advanced-footwork\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentCyan,\n margin: \"0 0 10px 0\",\n }}\n >\n 고급 보법 - Advanced Footwork\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n margin: \"0 0 15px 0\",\n }}\n >\n 🥋 전통 한국 무예 발놀림 기법 \| Traditional Korean martial arts\n footwork techniques\n </p>\n\n {/ Tactical Steps /}\n <div style={{ marginBottom: \"20px\" }}>\n <h3\n style={{\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"10px\",\n }}\n >\n ✅ 전술보법 (Shift + WASD) \| Tactical Steps - IMPLEMENTED\n </h3>\n <p\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n marginBottom: \"10px\",\n fontStyle: \"italic\",\n }}\n >\n Precise 30cm repositioning • 300ms duration •\n Non-interruptible • 5 stamina cost\n </p>\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: isMobile\n ? \"1fr 1fr\"\n : \"repeat(4, 1fr)\",\n gap: \"8px\",\n }}\n >\n {[\n {\n key: \"Shift+W\",\n korean: \"전진보법\",\n english: \"Forward Step\",\n },\n {\n key: \"Shift+S\",\n korean: \"후퇴보법\",\n english: \"Retreat Step\",\n },\n {\n key: \"Shift+A\",\n korean: \"좌측면보법\",\n english: \"Left Step\",\n },\n {\n key: \"Shift+D\",\n korean: \"우측면보법\",\n english: \"Right Step\",\n },\n {\n key: \"Shift+W+A\",\n korean: \"전좌측보법\",\n english: \"Forward-Left\",\n },\n {\n key: \"Shift+W+D\",\n korean: \"전우측보법\",\n english: \"Forward-Right\",\n },\n {\n key: \"Shift+S+A\",\n korean: \"후좌측보법\",\n english: \"Back-Left\",\n },\n {\n key: \"Shift+S+D\",\n korean: \"후우측보법\",\n english: \"Back-Right\",\n },\n ].map((step) => (\n <div\n key={step.key}\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.8,\n ),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"4px\",\n }}\n >\n {step.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textPrimary,\n }}\n >\n {step.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"6px\" : \"7px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {step.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Footwork Patterns /}\n <div>\n <h3\n style={{\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"10px\",\n }}\n >\n 보법 패턴 (Ctrl + WASD) \| Footwork Patterns\n </h3>\n\n {/ Circular Steps /}\n <div style={{ marginBottom: \"12px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"12px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n marginBottom: \"6px\",\n }}\n >\n ✅ 원형보 (Wonhyeongbo) \| Circular Step - IMPLEMENTED\n </div>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textSecondary,\n marginBottom: \"8px\",\n fontStyle: \"italic\",\n }}\n >\n Lateral movement while maintaining guard • 30cm distance •\n 300ms\n </p>\n <div style={{ display: \"flex\", gap: \"8px\" }}>\n {[\n {\n key: \"Ctrl+A\",\n korean: \"원형보 좌\",\n english: \"Circular Left\",\n },\n {\n key: \"Ctrl+D\",\n korean: \"원형보 우\",\n english: \"Circular Right\",\n },\n ].map((move) => (\n <div\n key={move.key}\n style={{\n flex: 1,\n background: hexToRgbaString(\n theme.colors.ACCENT_CYAN,\n 0.2,\n ),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n }}\n >\n {move.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n }}\n >\n {move.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {move.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Slide Steps /}\n <div style={{ marginBottom: \"12px\" }}>\n <div\n style={{\n fontSize: isMobile ? \"11px\" : \"12px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n marginBottom: \"6px\",\n }}\n >\n ✅ 미끄럼보 (Mikkeureombo) \| Slide Step - IMPLEMENTED\n </div>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textSecondary,\n marginBottom: \"8px\",\n fontStyle: \"italic\",\n }}\n >\n Both feet move together • 30cm distance • 200ms (faster!)\n </p>\n <div style={{ display: \"flex\", gap: \"8px\" }}>\n {[\n {\n key: \"Ctrl+W\",\n korean: \"미끄럼보 전\",\n english: \"Slide Forward\",\n },\n {\n key: \"Ctrl+S\",\n korean: \"미끄럼보 후\",\n english: \"Slide Back\",\n },\n ].map((move) => (\n <div\n key={move.key}\n style={{\n flex: 1,\n background: hexToRgbaString(\n theme.colors.ACCENT_CYAN,\n 0.2,\n ),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n padding: \"8px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n }}\n >\n {move.key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n }}\n >\n {move.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {move.english}\n </div>\n </div>\n ))}\n </div>\n </div>\n\n {/ Pending Footwork /}\n <div\n style={{\n marginTop: \"15px\",\n padding: \"10px\",\n background: hexToRgbaString(theme.colors.ACCENT_CYAN, 0.2),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderCyan}`,\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"6px\",\n }}\n >\n ✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED\n </div>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n margin: \"0 0 6px 0\",\n }}\n >\n <strong>축족회전 (Chukjok Hoejeon) \| Pivot</strong>:\n Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on\n planted foot • 250ms\n </p>\n <p\n style={{\n fontSize: isMobile ? \"8px\" : \"9px\",\n color: colors.textPrimary,\n margin: 0,\n }}\n >\n <strong>섞음보 (Seokkeumbo) \| Shuffle</strong>: Shift+Ctrl+W\n or Shift+Ctrl+S • 15cm micro-adjustment • 100ms\n </p>\n </div>\n </div>\n </div>\n\n {/ Stance Side Switch Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.5,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"stance-side-switch\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: \"0 0 10px 0\",\n }}\n >\n 자세 발 바꿈 - Stance Side Switch\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n margin: \"0 0 15px 0\",\n }}\n >\n ✅ 전방 발 전환 \| Switch front foot position - IMPLEMENTED\n </p>\n\n <div\n style={{\n background: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2),\n borderRadius: \"6px\",\n border: `1px solid ${colors.borderGold}`,\n padding: \"12px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"16px\" : \"18px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n marginBottom: \"8px\",\n }}\n >\n H\n </div>\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"11px\",\n color: colors.textPrimary,\n marginBottom: \"4px\",\n }}\n >\n 발 바꿈 (Bal Bakkum)\n </div>\n <div\n style={{\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n Switch Front Foot\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n marginTop: \"6px\",\n fontStyle: \"italic\",\n }}\n >\n Mirrors your stance (left ↔ right) • 400ms duration\n </div>\n </div>\n </div>\n\n {/ Technique Controls Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.6,\n )}`,\n padding: \"20px\",\n }}\n data-testid=\"technique-controls\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n margin: \"0 0 10px 0\",\n }}\n >\n 기술 실행 - Technique Execution\n </h2>\n <p\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n margin: \"0 0 15px 0\",\n }}\n >\n ⚡ 원형별 고유 기술 (최대 10개) \| Archetype-specific techniques\n (up to 10)\n </p>\n\n {/ Technique Keys Grid /}\n <div\n style={{\n display: \"grid\",\n gridTemplateColumns: isMobile\n ? \"repeat(5, 1fr)\"\n : \"repeat(10, 1fr)\",\n gap: isMobile ? \"6px\" : \"8px\",\n }}\n >\n {[\"Q\", \"E\", \"R\", \"T\", \"Y\", \"F\", \"G\", \"Z\", \"X\", \"C\"].map(\n (key, index) => (\n <div\n key={key}\n style={{\n background: `linear-gradient(135deg, ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.3,\n )}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.1)})`,\n borderRadius: \"6px\",\n border: `2px solid ${colors.borderGold}`,\n padding: isMobile ? \"8px 4px\" : \"10px 6px\",\n textAlign: \"center\",\n }}\n >\n <div\n style={{\n fontSize: isMobile ? \"14px\" : \"16px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n }}\n >\n {key}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"7px\" : \"8px\",\n color: colors.textSecondary,\n marginTop: \"2px\",\n }}\n >\n 기술 {index + 1}\n </div>\n </div>\n ),\n )}\n </div>\n\n {/ Technique Notes /}\n <div\n style={{\n marginTop: \"15px\",\n padding: \"10px\",\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_DARK,\n 0.6,\n ),\n borderRadius: \"6px\",\n fontSize: isMobile ? \"9px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n 💡 <strong>Tip</strong>: Keys positioned around WASD for easy\n access without interfering with movement. Each archetype has\n unique techniques.\n </div>\n </div>\n\n {/ Special Features Section /}\n <div\n style={{\n marginBottom: `${layoutConstants.sectionSpacing}px`,\n background: colors.sectionBg,\n borderRadius: \"12px\",\n border: `2px solid ${colors.borderRed}`,\n padding: \"20px\",\n }}\n data-testid=\"special-features\"\n >\n <h2\n style={{\n fontSize: isMobile ? \"18px\" : \"22px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.KOREAN_RED.toString(16).padStart(\n 6,\n \"0\",\n )}`,\n margin: \"0 0 20px 0\",\n }}\n >\n 특수 기능 - Special Features\n </h2>\n\n {/ Special Keys List /}\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"10px\",\n }}\n >\n {[\n {\n key: \"V\",\n korean: \"급소 표시 전환\",\n english: \"Toggle vital points overlay (70 points)\",\n },\n {\n key: \"B\",\n korean: \"방어 자세\",\n english: \"Defensive guard position\",\n },\n {\n key: \"F1\",\n korean: \"조작법 힌트\",\n english: \"Show control hints\",\n },\n {\n key: \"ESC / M\",\n korean: \"일시정지 / 메뉴\",\n english: \"Pause menu / Return to menu\",\n },\n ].map((special) => (\n <div\n key={special.key}\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_LIGHT,\n 0.8,\n ),\n borderRadius: \"8px\",\n border: `1px solid ${colors.borderRed}`,\n padding: \"10px\",\n display: \"flex\",\n alignItems: \"center\",\n gap: \"12px\",\n }}\n >\n <div\n style={{\n background: hexToRgbaString(\n theme.colors.KOREAN_RED,\n 0.3,\n ),\n borderRadius: \"6px\",\n padding: \"4px 10px\",\n fontSize: isMobile ? \"12px\" : \"14px\",\n fontWeight: \"bold\",\n color: colors.accentGold,\n minWidth: \"50px\",\n textAlign: \"center\",\n }}\n >\n {special.key}\n </div>\n <div style={{ flex: 1 }}>\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n fontWeight: \"bold\",\n color: colors.textPrimary,\n }}\n >\n {special.korean}\n </div>\n <div\n style={{\n fontSize: isMobile ? \"8px\" : \"10px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n }}\n >\n {special.english}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n\n {/ Interactive Control Demo - Shows recently pressed keys /}\n <InteractiveControlDemo\n pressedKeys={pressedKeys}\n isMobile={isMobile}\n />\n\n {/ Footer /}\n <div\n style={{\n height: `${layoutConstants.footerHeight}px`,\n background: colors.headerBg,\n borderTop: `3px solid ${colors.borderRed}`,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: `0 ${layoutConstants.padding}px`,\n }}\n data-testid=\"controls-footer\"\n >\n {/ Philosophy Text /}\n <div\n style={{\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.accentGold,\n fontStyle: \"italic\",\n }}\n >\n 🥋 흑괘의 길을 걸어라 \| Walk the Path of the Black Trigram 🥋\n </div>\n\n {/ Back Button /}\n <BackButton\n onClick={handleBackClick}\n korean=\"무도장 복귀\"\n english=\"Return to Dojang\"\n isMobile={isMobile}\n testId=\"controls-back-button\"\n />\n\n {/ Keyboard Hint /}\n <div\n style={{\n background: hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n ),\n borderRadius: \"6px\",\n padding: \"8px 12px\",\n fontSize: isMobile ? \"11px\" : \"12px\",\n fontWeight: \"bold\",\n color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(\n 6,\n \"0\",\n )}`,\n border: `1px solid ${colors.borderGold}`,\n }}\n data-testid=\"keyboard-shortcuts\"\n >\n ESC \| M\n </div>\n </div>\n\n {/ Footer Instruction */}\n <div\n style={{\n textAlign: \"center\",\n padding: \"10px\",\n fontSize: isMobile ? \"10px\" : \"12px\",\n color: colors.textSecondary,\n fontStyle: \"italic\",\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.7),\n }}\n >\n ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default ControlsScreen3D;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/InteractiveControlDemoOverlayHtml.js CHANGED Viewed

@@ -155,42 +155,40 @@ var InteractiveControlDemo = ({ pressedKeys, isMobile }) => {
 		const age = currentTime - timestamp;
 		return Math.max(0, 1 - age / 2e3);
 	};
-	const containerStyle = useMemo(() => ({
-		position: "fixed",
-		bottom: isMobile ? "15px" : "20px",
-		left: "50%",
-		transform: "translateX(-50%)",
-		display: "flex",
-		flexDirection: "column",
-		gap: isMobile ? "8px" : "10px",
-		maxWidth: isMobile ? "90%" : "600px",
-		width: "100%",
-		padding: isMobile ? "12px" : "15px",
-		background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .95),
-		borderRadius: "12px",
-		border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .6)}`,
-		boxShadow: `
+	return /* @__PURE__ */ jsxs("div", {
+		style: useMemo(() => ({
+			position: "fixed",
+			bottom: isMobile ? "15px" : "20px",
+			left: "50%",
+			transform: "translateX(-50%)",
+			display: "flex",
+			flexDirection: "column",
+			gap: isMobile ? "8px" : "10px",
+			maxWidth: isMobile ? "90%" : "600px",
+			width: "100%",
+			padding: isMobile ? "12px" : "15px",
+			background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .95),
+			borderRadius: "12px",
+			border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .6)}`,
+			boxShadow: `
       0 4px 20px ${hexToRgbaString(theme.colors.BLACK_SOLID, .5)},
       0 0 15px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}
     `,
-		pointerEvents: "none",
-		zIndex: 1e3
-	}), [isMobile, theme]);
-	const titleStyle = useMemo(() => ({
-		fontFamily: FONT_FAMILY.KOREAN,
-		fontSize: isMobile ? "12px" : "13px",
-		fontWeight: "bold",
-		color: hexToRgbaString(theme.colors.ACCENT_GOLD),
-		textAlign: "center",
-		marginBottom: "4px",
-		textShadow: `0 0 8px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .5)}`
-	}), [isMobile, theme]);
-	return /* @__PURE__ */ jsxs("div", {
-		style: containerStyle,
+			pointerEvents: "none",
+			zIndex: 1e3
+		}), [isMobile, theme]),
 		"data-testid": "interactive-demo",
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				style: titleStyle,
+				style: useMemo(() => ({
+					fontFamily: FONT_FAMILY.KOREAN,
+					fontSize: isMobile ? "12px" : "13px",
+					fontWeight: "bold",
+					color: hexToRgbaString(theme.colors.ACCENT_GOLD),
+					textAlign: "center",
+					marginBottom: "4px",
+					textShadow: `0 0 8px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .5)}`
+				}), [isMobile, theme]),
 				children: "최근 입력 | Recent Input"
 			}),
 			keyPresses.map((entry) => {

package/lib/components/screens/controls/components/InteractiveControlDemoOverlayHtml.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InteractiveControlDemoOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/InteractiveControlDemoOverlayHtml.tsx"],"sourcesContent":["/*\n InteractiveControlDemo - Display recently pressed keys and their actions\n * \n * Shows the last 5 pressed keys with their descriptions in a bottom overlay.\n * Keys auto-fade after 2 seconds for a clean, non-intrusive display.\n * \n * @module components/screens/controls/components\n /\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { getKeyCategoryColor, KEYBOARD_LAYOUT, type KeyData } from \"../constants/ControlsConstants\";\n\n/\n Props for InteractiveControlDemo component\n /\nexport interface InteractiveControlDemoProps {\n /* Set of currently pressed key codes /\n readonly pressedKeys: Set<string>;\n /* Whether on mobile device /\n readonly isMobile: boolean;\n}\n\n/\n Key press entry with timestamp\n /\ninterface KeyPressEntry {\n readonly keyData: KeyData;\n readonly timestamp: number;\n readonly id: string;\n}\n\n/\n Props for KeyPressEntryDisplay component\n /\ninterface KeyPressEntryDisplayProps {\n readonly entry: KeyPressEntry;\n readonly opacity: number;\n readonly categoryColor: number;\n readonly isMobile: boolean;\n readonly theme: ReturnType<typeof useKoreanTheme>;\n}\n\n/\n Memoized KeyPressEntryDisplay Component\n * \n * Displays a single key press entry with optimized inline styles.\n /\nconst KeyPressEntryDisplay = React.memo<KeyPressEntryDisplayProps>(({\n entry,\n opacity,\n categoryColor,\n isMobile,\n theme,\n}) => {\n // Memoize styles based on props\n const containerStyle = useMemo(() => ({\n display: 'flex',\n alignItems: 'center',\n gap: isMobile ? '8px' : '12px',\n padding: isMobile ? '8px' : '10px',\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, opacity 0.9),\n borderRadius: '8px',\n border: `2px solid ${hexToRgbaString(categoryColor, opacity * 0.7)}`,\n transition: 'opacity 0.3s ease',\n opacity,\n }), [isMobile, theme.colors.UI_BACKGROUND_MEDIUM, opacity, categoryColor]);\n\n const keyLabelStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '16px' : '18px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(categoryColor),\n padding: '6px 12px',\n background: hexToRgbaString(categoryColor, 0.2),\n borderRadius: '6px',\n minWidth: isMobile ? '50px' : '60px',\n textAlign: 'center' as const,\n boxShadow: `0 0 10px ${hexToRgbaString(categoryColor, opacity * 0.5)}`,\n }), [isMobile, categoryColor, opacity]);\n\n const koreanLabelStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '13px' : '14px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, opacity),\n marginBottom: '2px',\n }), [isMobile, theme.colors.ACCENT_GOLD, opacity]);\n\n const descriptionStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '11px' : '12px',\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, opacity),\n lineHeight: 1.3,\n }), [isMobile, theme.colors.TEXT_SECONDARY, opacity]);\n\n return (\n <div\n style={containerStyle}\n data-testid={`key-press-${entry.keyData.code}`}\n >\n {/* Key label /}\n <div style={keyLabelStyle}>\n {entry.keyData.label}\n </div>\n\n {/ Key description /}\n <div style={{ flex: 1 }}>\n {/ Korean label /}\n {entry.keyData.labelKorean && (\n <div style={koreanLabelStyle}>\n {entry.keyData.labelKorean}\n </div>\n )}\n\n {/ Description (Korean \| English) /}\n {entry.keyData.descriptionKorean && entry.keyData.description && (\n <div style={descriptionStyle}>\n {entry.keyData.descriptionKorean} \| {entry.keyData.description}\n </div>\n )}\n </div>\n </div>\n );\n});\n\nKeyPressEntryDisplay.displayName = 'KeyPressEntryDisplay';\n\n/\n InteractiveControlDemo Component\n * \n * Displays recently pressed keys with their actions.\n * Auto-fades entries after 2 seconds and maintains last 5 keys.\n * \n * @example\n * ```tsx\n * <InteractiveControlDemo\n * pressedKeys={new Set(['Space', 'KeyW'])}\n * isMobile={false}\n * />\n * ```\n /\nexport const InteractiveControlDemo: React.FC<InteractiveControlDemoProps> = ({\n pressedKeys,\n isMobile,\n}) => {\n const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n const [keyPresses, setKeyPresses] = useState<KeyPressEntry[]>([]);\n const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n // Update current time for opacity calculations using requestAnimationFrame\n useEffect(() => {\n let frameId: number;\n\n const updateTime = () => {\n setCurrentTime(Date.now());\n frameId = window.requestAnimationFrame(updateTime);\n };\n\n frameId = window.requestAnimationFrame(updateTime);\n\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, []);\n\n // Track pressed keys and add to history\n useEffect(() => {\n // Find newly pressed keys\n const currentCodes = Array.from(pressedKeys);\n\n if (currentCodes.length === 0) {\n return;\n }\n\n const now = Date.now();\n\n setKeyPresses((prev) => {\n let updated = prev;\n\n currentCodes.forEach((code) => {\n // Check if key is not already in the recent list\n const alreadyRecorded = updated.some(\n (entry) => entry.keyData.code === code && now - entry.timestamp < 100\n );\n\n if (!alreadyRecorded) {\n // Find key data\n const keyData = KEYBOARD_LAYOUT.find((k) => k.code === code);\n if (keyData) {\n const newEntry: KeyPressEntry = {\n keyData,\n timestamp: now,\n id: `${code}-${now}`,\n };\n updated = [newEntry, ...updated];\n }\n }\n });\n\n // Keep only last 5 entries\n if (updated.length > 5) {\n updated = updated.slice(0, 5);\n }\n\n return updated === prev ? prev : updated;\n });\n }, [pressedKeys]);\n\n // Auto-remove entries after 2 seconds\n useEffect(() => {\n setKeyPresses((prev) =>\n prev.filter((entry) => currentTime - entry.timestamp < 2000)\n );\n }, [currentTime]);\n\n // Calculate opacity based on age\n const getOpacity = (timestamp: number): number => {\n const age = currentTime - timestamp;\n const maxAge = 2000;\n return Math.max(0, 1 - age / maxAge);\n };\n\n // Container style\n const containerStyle = useMemo(() => ({\n position: 'fixed' as const,\n bottom: isMobile ? '15px' : '20px',\n left: '50%',\n transform: 'translateX(-50%)',\n display: 'flex',\n flexDirection: 'column' as const,\n gap: isMobile ? '8px' : '10px',\n maxWidth: isMobile ? '90%' : '600px',\n width: '100%',\n padding: isMobile ? '12px' : '15px',\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n borderRadius: '12px',\n border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n boxShadow: `\n 0 4px 20px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)},\n 0 0 15px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}\n `,\n pointerEvents: 'none' as const,\n zIndex: 1000,\n }), [isMobile, theme]);\n\n // Title style\n const titleStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '12px' : '13px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n textAlign: 'center' as const,\n marginBottom: '4px',\n textShadow: `0 0 8px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`,\n }), [isMobile, theme]);\n\n return (\n <div style={containerStyle} data-testid=\"interactive-demo\">\n {/ Title /}\n <div style={titleStyle}>\n 최근 입력 \| Recent Input\n </div>\n\n {/ Key press entries /}\n {keyPresses.map((entry) => {\n const opacity = getOpacity(entry.timestamp);\n const categoryColor = getKeyCategoryColor(entry.keyData.category);\n\n return (\n <KeyPressEntryDisplay\n key={entry.id}\n entry={entry}\n opacity={opacity}\n categoryColor={categoryColor}\n isMobile={isMobile}\n theme={theme}\n />\n );\n })}\n\n {/ Empty state */}\n {keyPresses.length === 0 && (\n <div\n style={{\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '12px' : '13px',\n color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n textAlign: 'center' as const,\n padding: '15px',\n }}\n >\n 키를 눌러서 액션을 확인하세요 \| Press keys to see actions\n </div>\n )}\n </div>\n );\n};\n\nexport default InteractiveControlDemo;\n"],"mappings":"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"}
1	+ {"version":3,"file":"InteractiveControlDemoOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/InteractiveControlDemoOverlayHtml.tsx"],"sourcesContent":["/*\n InteractiveControlDemo - Display recently pressed keys and their actions\n * \n * Shows the last 5 pressed keys with their descriptions in a bottom overlay.\n * Keys auto-fade after 2 seconds for a clean, non-intrusive display.\n * \n * @module components/screens/controls/components\n /\n\nimport React, { useEffect, useMemo, useState } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { getKeyCategoryColor, KEYBOARD_LAYOUT, type KeyData } from \"../constants/ControlsConstants\";\n\n/\n Props for InteractiveControlDemo component\n /\nexport interface InteractiveControlDemoProps {\n /* Set of currently pressed key codes /\n readonly pressedKeys: Set<string>;\n /* Whether on mobile device /\n readonly isMobile: boolean;\n}\n\n/\n Key press entry with timestamp\n /\ninterface KeyPressEntry {\n readonly keyData: KeyData;\n readonly timestamp: number;\n readonly id: string;\n}\n\n/\n Props for KeyPressEntryDisplay component\n /\ninterface KeyPressEntryDisplayProps {\n readonly entry: KeyPressEntry;\n readonly opacity: number;\n readonly categoryColor: number;\n readonly isMobile: boolean;\n readonly theme: ReturnType<typeof useKoreanTheme>;\n}\n\n/\n Memoized KeyPressEntryDisplay Component\n * \n * Displays a single key press entry with optimized inline styles.\n /\nconst KeyPressEntryDisplay = React.memo<KeyPressEntryDisplayProps>(({\n entry,\n opacity,\n categoryColor,\n isMobile,\n theme,\n}) => {\n // Memoize styles based on props\n const containerStyle = useMemo(() => ({\n display: 'flex',\n alignItems: 'center',\n gap: isMobile ? '8px' : '12px',\n padding: isMobile ? '8px' : '10px',\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, opacity 0.9),\n borderRadius: '8px',\n border: `2px solid ${hexToRgbaString(categoryColor, opacity * 0.7)}`,\n transition: 'opacity 0.3s ease',\n opacity,\n }), [isMobile, theme.colors.UI_BACKGROUND_MEDIUM, opacity, categoryColor]);\n\n const keyLabelStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '16px' : '18px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(categoryColor),\n padding: '6px 12px',\n background: hexToRgbaString(categoryColor, 0.2),\n borderRadius: '6px',\n minWidth: isMobile ? '50px' : '60px',\n textAlign: 'center' as const,\n boxShadow: `0 0 10px ${hexToRgbaString(categoryColor, opacity * 0.5)}`,\n }), [isMobile, categoryColor, opacity]);\n\n const koreanLabelStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '13px' : '14px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, opacity),\n marginBottom: '2px',\n }), [isMobile, theme.colors.ACCENT_GOLD, opacity]);\n\n const descriptionStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '11px' : '12px',\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, opacity),\n lineHeight: 1.3,\n }), [isMobile, theme.colors.TEXT_SECONDARY, opacity]);\n\n return (\n <div\n style={containerStyle}\n data-testid={`key-press-${entry.keyData.code}`}\n >\n {/* Key label /}\n <div style={keyLabelStyle}>\n {entry.keyData.label}\n </div>\n\n {/ Key description /}\n <div style={{ flex: 1 }}>\n {/ Korean label /}\n {entry.keyData.labelKorean && (\n <div style={koreanLabelStyle}>\n {entry.keyData.labelKorean}\n </div>\n )}\n\n {/ Description (Korean \| English) /}\n {entry.keyData.descriptionKorean && entry.keyData.description && (\n <div style={descriptionStyle}>\n {entry.keyData.descriptionKorean} \| {entry.keyData.description}\n </div>\n )}\n </div>\n </div>\n );\n});\n\nKeyPressEntryDisplay.displayName = 'KeyPressEntryDisplay';\n\n/\n InteractiveControlDemo Component\n * \n * Displays recently pressed keys with their actions.\n * Auto-fades entries after 2 seconds and maintains last 5 keys.\n * \n * @example\n * ```tsx\n * <InteractiveControlDemo\n * pressedKeys={new Set(['Space', 'KeyW'])}\n * isMobile={false}\n * />\n * ```\n /\nexport const InteractiveControlDemo: React.FC<InteractiveControlDemoProps> = ({\n pressedKeys,\n isMobile,\n}) => {\n const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n const [keyPresses, setKeyPresses] = useState<KeyPressEntry[]>([]);\n const [currentTime, setCurrentTime] = useState(() => Date.now());\n\n // Update current time for opacity calculations using requestAnimationFrame\n useEffect(() => {\n let frameId: number;\n\n const updateTime = () => {\n setCurrentTime(Date.now());\n frameId = window.requestAnimationFrame(updateTime);\n };\n\n frameId = window.requestAnimationFrame(updateTime);\n\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, []);\n\n // Track pressed keys and add to history\n useEffect(() => {\n // Find newly pressed keys\n const currentCodes = Array.from(pressedKeys);\n\n if (currentCodes.length === 0) {\n return;\n }\n\n const now = Date.now();\n\n setKeyPresses((prev) => {\n let updated = prev;\n\n currentCodes.forEach((code) => {\n // Check if key is not already in the recent list\n const alreadyRecorded = updated.some(\n (entry) => entry.keyData.code === code && now - entry.timestamp < 100\n );\n\n if (!alreadyRecorded) {\n // Find key data\n const keyData = KEYBOARD_LAYOUT.find((k) => k.code === code);\n if (keyData) {\n const newEntry: KeyPressEntry = {\n keyData,\n timestamp: now,\n id: `${code}-${now}`,\n };\n updated = [newEntry, ...updated];\n }\n }\n });\n\n // Keep only last 5 entries\n if (updated.length > 5) {\n updated = updated.slice(0, 5);\n }\n\n return updated === prev ? prev : updated;\n });\n }, [pressedKeys]);\n\n // Auto-remove entries after 2 seconds\n useEffect(() => {\n setKeyPresses((prev) =>\n prev.filter((entry) => currentTime - entry.timestamp < 2000)\n );\n }, [currentTime]);\n\n // Calculate opacity based on age\n const getOpacity = (timestamp: number): number => {\n const age = currentTime - timestamp;\n const maxAge = 2000;\n return Math.max(0, 1 - age / maxAge);\n };\n\n // Container style\n const containerStyle = useMemo(() => ({\n position: 'fixed' as const,\n bottom: isMobile ? '15px' : '20px',\n left: '50%',\n transform: 'translateX(-50%)',\n display: 'flex',\n flexDirection: 'column' as const,\n gap: isMobile ? '8px' : '10px',\n maxWidth: isMobile ? '90%' : '600px',\n width: '100%',\n padding: isMobile ? '12px' : '15px',\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n borderRadius: '12px',\n border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n boxShadow: `\n 0 4px 20px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)},\n 0 0 15px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}\n `,\n pointerEvents: 'none' as const,\n zIndex: 1000,\n }), [isMobile, theme]);\n\n // Title style\n const titleStyle = useMemo(() => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '12px' : '13px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n textAlign: 'center' as const,\n marginBottom: '4px',\n textShadow: `0 0 8px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`,\n }), [isMobile, theme]);\n\n return (\n <div style={containerStyle} data-testid=\"interactive-demo\">\n {/ Title /}\n <div style={titleStyle}>\n 최근 입력 \| Recent Input\n </div>\n\n {/ Key press entries /}\n {keyPresses.map((entry) => {\n const opacity = getOpacity(entry.timestamp);\n const categoryColor = getKeyCategoryColor(entry.keyData.category);\n\n return (\n <KeyPressEntryDisplay\n key={entry.id}\n entry={entry}\n opacity={opacity}\n categoryColor={categoryColor}\n isMobile={isMobile}\n theme={theme}\n />\n );\n })}\n\n {/ Empty state */}\n {keyPresses.length === 0 && (\n <div\n style={{\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '12px' : '13px',\n color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n textAlign: 'center' as const,\n padding: '15px',\n }}\n >\n 키를 눌러서 액션을 확인하세요 \| Press keys to see actions\n </div>\n )}\n </div>\n );\n};\n\nexport default InteractiveControlDemo;\n"],"mappings":"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"}