npm - blacktrigram - Versions diffs - 0.7.2 - Mend

blacktrigram 0.7.2

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 (1853) hide show

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

@@ -0,0 +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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"}

package/lib/components/screens/controls/components/ControlBindingsOverlayHtml.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+/**
+ * ControlBindingsOverlayHtml - Display control bindings filtered by selected category
+ *
+ * Shows key bindings in a clean, organized list with Korean-English bilingual labels.
+ * Uses responsive grid/list layout based on device type.
+ *
+ * @module components/screens/controls/components
+ */
+import React from "react";
+/**
+ * Props for ControlBindingsOverlayHtml component
+ */
+export interface ControlBindingsOverlayHtmlProps {
+    /** Selected control category to filter and display */
+    readonly selectedTab: 'combat' | 'movement' | 'system';
+    /** Whether on mobile device (list layout vs grid) */
+    readonly isMobile: boolean;
+}
+/**
+ * ControlBindingsOverlayHtml Component
+ *
+ * Displays control bindings filtered by selected category.
+ * Uses grid layout on desktop and list layout on mobile.
+ *
+ * @example
+ * ```tsx
+ * <ControlBindingsOverlayHtml
+ *   selectedTab="combat"
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const ControlBindingsOverlayHtml: React.FC<ControlBindingsOverlayHtmlProps>;
+export default ControlBindingsOverlayHtml;
+//# sourceMappingURL=ControlBindingsOverlayHtml.d.ts.map

package/lib/components/screens/controls/components/ControlBindingsOverlayHtml.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ControlBindingsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAWvC;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,sDAAsD;IACtD,QAAQ,CAAC,WAAW,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;IACvD,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CA0IhF,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/lib/components/screens/controls/components/ControlBindingsOverlayHtml.js ADDED Viewed

@@ -0,0 +1,155 @@
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../shared/base/useKoreanTheme.js";
+import { KEYBOARD_LAYOUT, filterKeysByCategory, getKeyCategoryColor } from "../constants/ControlsConstants.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx
+/**
+* ControlBindingsOverlayHtml - Display control bindings filtered by selected category
+*
+* Shows key bindings in a clean, organized list with Korean-English bilingual labels.
+* Uses responsive grid/list layout based on device type.
+*
+* @module components/screens/controls/components
+*/
+/**
+* ControlBindingsOverlayHtml Component
+*
+* Displays control bindings filtered by selected category.
+* Uses grid layout on desktop and list layout on mobile.
+*
+* @example
+* ```tsx
+* <ControlBindingsOverlayHtml
+*   selectedTab="combat"
+*   isMobile={false}
+* />
+* ```
+*/
+var ControlBindingsOverlayHtml = ({ selectedTab, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const filteredKeys = useMemo(() => {
+		return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);
+	}, [selectedTab]);
+	const containerStyle = useMemo(() => ({
+		display: "grid",
+		gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(280px, 1fr))",
+		gap: isMobile ? "12px" : "16px",
+		padding: isMobile ? "15px" : "20px",
+		maxHeight: isMobile ? "60vh" : "70vh",
+		overflowY: "auto",
+		overflowX: "hidden",
+		background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .9),
+		borderRadius: "12px",
+		border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, .6)}`,
+		boxShadow: `0 4px 15px ${hexToRgbaString(theme.colors.BLACK_SOLID, .5)}`
+	}), [isMobile, theme]);
+	const getBindingCardStyle = (keyData) => ({
+		display: "flex",
+		flexDirection: "column",
+		gap: "8px",
+		padding: isMobile ? "12px" : "14px",
+		background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .8),
+		border: `2px solid ${hexToRgbaString(getKeyCategoryColor(keyData.category), .6)}`,
+		borderRadius: "8px",
+		transition: "all 0.2s ease",
+		cursor: "default"
+	});
+	const keyLabelStyle = (keyData) => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "16px" : "18px",
+		fontWeight: "bold",
+		color: hexToRgbaString(getKeyCategoryColor(keyData.category)),
+		textShadow: `0 0 10px ${hexToRgbaString(getKeyCategoryColor(keyData.category), .5)}`,
+		display: "flex",
+		alignItems: "center",
+		gap: "8px"
+	});
+	const koreanLabelStyle = {
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "13px" : "14px",
+		fontWeight: "bold",
+		color: hexToRgbaString(theme.colors.ACCENT_GOLD)
+	};
+	const descriptionStyle = {
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "11px" : "12px",
+		color: hexToRgbaString(theme.colors.TEXT_SECONDARY),
+		lineHeight: 1.4
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: containerStyle,
+		"data-testid": "control-bindings",
+		children: [filteredKeys.map((keyData) => /* @__PURE__ */ jsxs("div", {
+			style: getBindingCardStyle(keyData),
+			"data-testid": `binding-${keyData.code}`,
+			onMouseEnter: (e) => {
+				e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1);
+				e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 1);
+				e.currentTarget.style.transform = "translateY(-2px)";
+				e.currentTarget.style.boxShadow = `0 4px 15px ${hexToRgbaString(getKeyCategoryColor(keyData.category), .4)}`;
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .8);
+				e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), .6);
+				e.currentTarget.style.transform = "translateY(0)";
+				e.currentTarget.style.boxShadow = "none";
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: keyLabelStyle(keyData),
+					children: [/* @__PURE__ */ jsx("span", {
+						style: {
+							padding: "4px 8px",
+							background: hexToRgbaString(getKeyCategoryColor(keyData.category), .2),
+							borderRadius: "4px",
+							minWidth: isMobile ? "40px" : "50px",
+							textAlign: "center"
+						},
+						children: keyData.label
+					}), keyData.labelKorean && /* @__PURE__ */ jsx("span", {
+						style: koreanLabelStyle,
+						children: keyData.labelKorean
+					})]
+				}),
+				keyData.description && keyData.descriptionKorean && /* @__PURE__ */ jsxs("div", {
+					style: descriptionStyle,
+					children: [
+						keyData.descriptionKorean,
+						" | ",
+						keyData.description
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? "9px" : "10px",
+						color: hexToRgbaString(theme.colors.TEXT_TERTIARY),
+						textTransform: "uppercase",
+						letterSpacing: "0.5px"
+					},
+					children: keyData.category
+				})
+			]
+		}, keyData.code)), filteredKeys.length === 0 && /* @__PURE__ */ jsx("div", {
+			style: {
+				gridColumn: "1 / -1",
+				textAlign: "center",
+				padding: "40px 20px",
+				fontFamily: FONT_FAMILY.KOREAN,
+				fontSize: isMobile ? "14px" : "16px",
+				color: hexToRgbaString(theme.colors.TEXT_SECONDARY)
+			},
+			children: "선택한 카테고리에 컨트롤이 없습니다 | No controls in selected category"
+		})]
+	});
+};
+//#endregion
+export { ControlBindingsOverlayHtml as default };
+//# sourceMappingURL=ControlBindingsOverlayHtml.js.map

package/lib/components/screens/controls/components/ControlBindingsOverlayHtml.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ControlBindingsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlBindingsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlBindingsOverlayHtml - Display control bindings filtered by selected category\n * \n * Shows key bindings in a clean, organized list with Korean-English bilingual labels.\n * Uses responsive grid/list layout based on device type.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport {\n filterKeysByCategory,\n getKeyCategoryColor,\n KEYBOARD_LAYOUT,\n type KeyData,\n} from \"../constants/ControlsConstants\";\n\n/**\n * Props for ControlBindingsOverlayHtml component\n */\nexport interface ControlBindingsOverlayHtmlProps {\n /** Selected control category to filter and display */\n readonly selectedTab: 'combat' | 'movement' | 'system';\n /** Whether on mobile device (list layout vs grid) */\n readonly isMobile: boolean;\n}\n\n/**\n * ControlBindingsOverlayHtml Component\n * \n * Displays control bindings filtered by selected category.\n * Uses grid layout on desktop and list layout on mobile.\n * \n * @example\n * ```tsx\n * <ControlBindingsOverlayHtml\n * selectedTab=\"combat\"\n * isMobile={false}\n * />\n * ```\n */\nexport const ControlBindingsOverlayHtml: React.FC<ControlBindingsOverlayHtmlProps> = ({\n selectedTab,\n isMobile,\n}) => {\n const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n // Filter keys by selected category\n const filteredKeys = useMemo<readonly KeyData[]>(() => {\n return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);\n }, [selectedTab]);\n\n // Container styles - grid for desktop, list for mobile\n const containerStyle = useMemo(() => ({\n display: 'grid',\n gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fill, minmax(280px, 1fr))',\n gap: isMobile ? '12px' : '16px',\n padding: isMobile ? '15px' : '20px',\n maxHeight: isMobile ? '60vh' : '70vh',\n overflowY: 'auto' as const,\n overflowX: 'hidden' as const,\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n borderRadius: '12px',\n border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n boxShadow: `0 4px 15px ${hexToRgbaString(theme.colors.BLACK_SOLID, 0.5)}`,\n }), [isMobile, theme]);\n\n // Individual binding card style\n const getBindingCardStyle = (keyData: KeyData) => ({\n display: 'flex',\n flexDirection: 'column' as const,\n gap: '8px',\n padding: isMobile ? '12px' : '14px',\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),\n border: `2px solid ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6)}`,\n borderRadius: '8px',\n transition: 'all 0.2s ease',\n cursor: 'default',\n });\n\n // Key label style (the actual key)\n const keyLabelStyle = (keyData: KeyData) => ({\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '16px' : '18px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(getKeyCategoryColor(keyData.category)),\n textShadow: `0 0 10px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.5)}`,\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n });\n\n // Korean label style\n const koreanLabelStyle = {\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '13px' : '14px',\n fontWeight: 'bold' as const,\n color: hexToRgbaString(theme.colors.ACCENT_GOLD),\n };\n\n // Description style\n const descriptionStyle = {\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '11px' : '12px',\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n lineHeight: 1.4,\n };\n\n return (\n <div style={containerStyle} data-testid=\"control-bindings\">\n {filteredKeys.map((keyData) => (\n <div\n key={keyData.code}\n style={getBindingCardStyle(keyData)}\n data-testid={`binding-${keyData.code}`}\n onMouseEnter={(e) => {\n e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1);\n e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 1);\n e.currentTarget.style.transform = 'translateY(-2px)';\n e.currentTarget.style.boxShadow = `0 4px 15px ${hexToRgbaString(getKeyCategoryColor(keyData.category), 0.4)}`;\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8);\n e.currentTarget.style.borderColor = hexToRgbaString(getKeyCategoryColor(keyData.category), 0.6);\n e.currentTarget.style.transform = 'translateY(0)';\n e.currentTarget.style.boxShadow = 'none';\n }}\n >\n {/* Key label */}\n <div style={keyLabelStyle(keyData)}>\n <span style={{ \n padding: '4px 8px', \n background: hexToRgbaString(getKeyCategoryColor(keyData.category), 0.2),\n borderRadius: '4px',\n minWidth: isMobile ? '40px' : '50px',\n textAlign: 'center' as const,\n }}>\n {keyData.label}\n </span>\n {keyData.labelKorean && (\n <span style={koreanLabelStyle}>\n {keyData.labelKorean}\n </span>\n )}\n </div>\n\n {/* Description (Korean | English) */}\n {keyData.description && keyData.descriptionKorean && (\n <div style={descriptionStyle}>\n {keyData.descriptionKorean} | {keyData.description}\n </div>\n )}\n\n {/* Category badge */}\n <div style={{\n fontSize: isMobile ? '9px' : '10px',\n color: hexToRgbaString(theme.colors.TEXT_TERTIARY),\n textTransform: 'uppercase' as const,\n letterSpacing: '0.5px',\n }}>\n {keyData.category}\n </div>\n </div>\n ))}\n\n {filteredKeys.length === 0 && (\n <div style={{\n gridColumn: '1 / -1',\n textAlign: 'center' as const,\n padding: '40px 20px',\n fontFamily: FONT_FAMILY.KOREAN,\n fontSize: isMobile ? '14px' : '16px',\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY),\n }}>\n 선택한 카테고리에 컨트롤이 없습니다 | No controls in selected category\n </div>\n )}\n </div>\n );\n};\n\nexport default ControlBindingsOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+/**
+ * ControlCategoryTabs - Tab navigation for control categories
+ *
+ * Allows switching between Combat, Movement, and System control views
+ * Uses BaseButtonOverlayHtml for consistent styling
+ *
+ * @module components/screens/controls/components
+ */
+import React from "react";
+export interface ControlCategoryTabsProps {
+    readonly selectedTab: 'combat' | 'movement' | 'system';
+    readonly onTabChange: (tab: 'combat' | 'movement' | 'system') => void;
+    readonly isMobile: boolean;
+}
+/**
+ * ControlCategoryTabs Component
+ *
+ * Displays tabs for switching between control categories.
+ * Uses Korean theming and responsive sizing.
+ *
+ * @example
+ * ```tsx
+ * <ControlCategoryTabs
+ *   selectedTab="combat"
+ *   onTabChange={(tab) => setSelectedTab(tab)}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const ControlCategoryTabs: React.FC<ControlCategoryTabsProps>;
+//# sourceMappingURL=ControlCategoryTabsOverlayHtml.d.ts.map

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ControlCategoryTabsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,WAAW,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;IACvD,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2ElE,CAAC"}

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.js ADDED Viewed

@@ -0,0 +1,100 @@
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../shared/base/useKoreanTheme.js";
+import { CONTROL_CATEGORIES } from "../constants/ControlsConstants.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx
+/**
+* ControlCategoryTabs - Tab navigation for control categories
+*
+* Allows switching between Combat, Movement, and System control views
+* Uses BaseButtonOverlayHtml for consistent styling
+*
+* @module components/screens/controls/components
+*/
+/**
+* ControlCategoryTabs Component
+*
+* Displays tabs for switching between control categories.
+* Uses Korean theming and responsive sizing.
+*
+* @example
+* ```tsx
+* <ControlCategoryTabs
+*   selectedTab="combat"
+*   onTabChange={(tab) => setSelectedTab(tab)}
+*   isMobile={false}
+* />
+* ```
+*/
+var ControlCategoryTabs = ({ selectedTab, onTabChange, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const tabStyle = useMemo(() => ({
+		display: "flex",
+		flexDirection: "row",
+		gap: isMobile ? "8px" : "12px",
+		justifyContent: "center",
+		alignItems: "center",
+		padding: isMobile ? "10px" : "15px",
+		flexWrap: "wrap"
+	}), [isMobile]);
+	const buttonBaseStyle = useMemo(() => ({
+		padding: isMobile ? "8px 16px" : "12px 24px",
+		borderRadius: "8px",
+		border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, .6)}`,
+		cursor: "pointer",
+		transition: "all 0.2s ease",
+		fontFamily: "inherit",
+		fontSize: isMobile ? "14px" : "16px",
+		fontWeight: "bold",
+		display: "flex",
+		alignItems: "center",
+		gap: "8px"
+	}), [isMobile, theme]);
+	return /* @__PURE__ */ jsx("div", {
+		style: tabStyle,
+		"data-testid": "control-category-tabs",
+		children: CONTROL_CATEGORIES.map((category) => {
+			const isSelected = selectedTab === category.id;
+			return /* @__PURE__ */ jsxs("button", {
+				style: {
+					...buttonBaseStyle,
+					background: isSelected ? hexToRgbaString(category.color, .3) : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
+					borderColor: isSelected ? hexToRgbaString(category.color, 1) : hexToRgbaString(theme.colors.UI_BORDER, .6),
+					color: isSelected ? `#${category.color.toString(16).padStart(6, "0")}` : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`
+				},
+				onClick: () => onTabChange(category.id),
+				"data-testid": `tab-${category.id}`,
+				onMouseEnter: (e) => {
+					if (!isSelected) {
+						e.currentTarget.style.background = hexToRgbaString(category.color, .1);
+						e.currentTarget.style.borderColor = hexToRgbaString(category.color, .8);
+					}
+				},
+				onMouseLeave: (e) => {
+					if (!isSelected) {
+						e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8);
+						e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.UI_BORDER, .6);
+					}
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					role: "img",
+					"aria-label": category.english,
+					children: category.icon
+				}), /* @__PURE__ */ jsxs("span", { children: [
+					category.korean,
+					" | ",
+					category.english
+				] })]
+			}, category.id);
+		})
+	});
+};
+//#endregion
+export { ControlCategoryTabs };
+//# sourceMappingURL=ControlCategoryTabsOverlayHtml.js.map

package/lib/components/screens/controls/components/ControlCategoryTabsOverlayHtml.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ControlCategoryTabsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/controls/components/ControlCategoryTabsOverlayHtml.tsx"],"sourcesContent":["/**\n * ControlCategoryTabs - Tab navigation for control categories\n * \n * Allows switching between Combat, Movement, and System control views\n * Uses BaseButtonOverlayHtml for consistent styling\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { CONTROL_CATEGORIES } from \"../constants/ControlsConstants\";\n\nexport interface ControlCategoryTabsProps {\n readonly selectedTab: 'combat' | 'movement' | 'system';\n readonly onTabChange: (tab: 'combat' | 'movement' | 'system') => void;\n readonly isMobile: boolean;\n}\n\n/**\n * ControlCategoryTabs Component\n * \n * Displays tabs for switching between control categories.\n * Uses Korean theming and responsive sizing.\n * \n * @example\n * ```tsx\n * <ControlCategoryTabs\n * selectedTab=\"combat\"\n * onTabChange={(tab) => setSelectedTab(tab)}\n * isMobile={false}\n * />\n * ```\n */\nexport const ControlCategoryTabs: React.FC<ControlCategoryTabsProps> = ({\n selectedTab,\n onTabChange,\n isMobile,\n}) => {\n const theme = useKoreanTheme({ variant: 'primary', size: 'md', isMobile });\n\n const tabStyle = useMemo(() => ({\n display: 'flex',\n flexDirection: 'row' as const,\n gap: isMobile ? '8px' : '12px',\n justifyContent: 'center',\n alignItems: 'center',\n padding: isMobile ? '10px' : '15px',\n flexWrap: 'wrap' as const,\n }), [isMobile]);\n\n const buttonBaseStyle = useMemo(() => ({\n padding: isMobile ? '8px 16px' : '12px 24px',\n borderRadius: '8px',\n border: `2px solid ${hexToRgbaString(theme.colors.UI_BORDER, 0.6)}`,\n cursor: 'pointer',\n transition: 'all 0.2s ease',\n fontFamily: 'inherit',\n fontSize: isMobile ? '14px' : '16px',\n fontWeight: 'bold' as const,\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n }), [isMobile, theme]);\n\n return (\n <div style={tabStyle} data-testid=\"control-category-tabs\">\n {CONTROL_CATEGORIES.map((category) => {\n const isSelected = selectedTab === category.id;\n \n const buttonStyle = {\n ...buttonBaseStyle,\n background: isSelected\n ? hexToRgbaString(category.color, 0.3)\n : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n borderColor: isSelected\n ? hexToRgbaString(category.color, 1)\n : hexToRgbaString(theme.colors.UI_BORDER, 0.6),\n color: isSelected\n ? `#${category.color.toString(16).padStart(6, '0')}`\n : `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, '0')}`,\n };\n\n return (\n <button\n key={category.id}\n style={buttonStyle}\n onClick={() => onTabChange(category.id as 'combat' | 'movement' | 'system')}\n data-testid={`tab-${category.id}`}\n onMouseEnter={(e) => {\n if (!isSelected) {\n e.currentTarget.style.background = hexToRgbaString(category.color, 0.1);\n e.currentTarget.style.borderColor = hexToRgbaString(category.color, 0.8);\n }\n }}\n onMouseLeave={(e) => {\n if (!isSelected) {\n e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8);\n e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.UI_BORDER, 0.6);\n }\n }}\n >\n <span role=\"img\" aria-label={category.english}>{category.icon}</span>\n <span>{category.korean} | {category.english}</span>\n </button>\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,uBAA2D,EACtE,aACA,aACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,MAAM,WAAW,eAAe;EAC9B,SAAS;EACT,eAAe;EACf,KAAK,WAAW,QAAQ;EACxB,gBAAgB;EAChB,YAAY;EACZ,SAAS,WAAW,SAAS;EAC7B,UAAU;EACX,GAAG,CAAC,SAAS,CAAC;CAEf,MAAM,kBAAkB,eAAe;EACrC,SAAS,WAAW,aAAa;EACjC,cAAc;EACd,QAAQ,aAAa,gBAAgB,MAAM,OAAO,WAAW,GAAI;EACjE,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,UAAU,WAAW,SAAS;EAC9B,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,KAAK;EACN,GAAG,CAAC,UAAU,MAAM,CAAC;AAEtB,QACE,oBAAC,OAAD;EAAK,OAAO;EAAU,eAAY;YAC/B,mBAAmB,KAAK,aAAa;GACpC,MAAM,aAAa,gBAAgB,SAAS;AAe5C,UACE,qBAAC,UAAD;IAEE,OAhBgB;KAClB,GAAG;KACH,YAAY,aACR,gBAAgB,SAAS,OAAO,GAAI,GACpC,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;KACzD,aAAa,aACT,gBAAgB,SAAS,OAAO,EAAE,GAClC,gBAAgB,MAAM,OAAO,WAAW,GAAI;KAChD,OAAO,aACH,IAAI,SAAS,MAAM,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,KAChD,IAAI,MAAM,OAAO,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;KAClE;IAMG,eAAe,YAAY,SAAS,GAAuC;IAC3E,eAAa,OAAO,SAAS;IAC7B,eAAe,MAAM;AACnB,SAAI,CAAC,YAAY;AACf,QAAE,cAAc,MAAM,aAAa,gBAAgB,SAAS,OAAO,GAAI;AACvE,QAAE,cAAc,MAAM,cAAc,gBAAgB,SAAS,OAAO,GAAI;;;IAG5E,eAAe,MAAM;AACnB,SAAI,CAAC,YAAY;AACf,QAAE,cAAc,MAAM,aAAa,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;AACxF,QAAE,cAAc,MAAM,cAAc,gBAAgB,MAAM,OAAO,WAAW,GAAI;;;cAdtF,CAkBE,oBAAC,QAAD;KAAM,MAAK;KAAM,cAAY,SAAS;eAAU,SAAS;KAAY,CAAA,EACrE,qBAAC,QAAD,EAAA,UAAA;KAAO,SAAS;KAAO;KAAI,SAAS;KAAe,EAAA,CAAA,CAC5C;MAnBF,SAAS,GAmBP;IAEX;EACE,CAAA"}

package/lib/components/screens/controls/components/GamepadVisualization3D.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * GamepadVisualization3D - 3D gamepad visualization with button labels
+ *
+ * Renders a simplified 3D gamepad shape with colored buttons and
+ * bilingual Korean-English labels for each button.
+ *
+ * @module components/screens/controls/components
+ */
+import React from "react";
+/**
+ * Props for GamepadVisualization3D component
+ */
+export interface GamepadVisualization3DProps {
+    /** Whether on mobile device (affects sizing) */
+    readonly isMobile: boolean;
+}
+/**
+ * GamepadVisualization3D Component
+ *
+ * 3D visualization of a gamepad with labeled buttons.
+ * Displays simplified gamepad shape with colored circles for buttons.
+ *
+ * @example
+ * ```tsx
+ * <Canvas>
+ *   <GamepadVisualization3D isMobile={false} />
+ * </Canvas>
+ * ```
+ */
+export declare const GamepadVisualization3D: React.FC<GamepadVisualization3DProps>;
+export default GamepadVisualization3D;
+//# sourceMappingURL=GamepadVisualization3D.d.ts.map

package/lib/components/screens/controls/components/GamepadVisualization3D.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GamepadVisualization3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/GamepadVisualization3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+IxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}