blacktrigram 0.7.2

package/lib/components/screens/controls/components/GamepadVisualization3D.js

@@ -0,0 +1,250 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { GAMEPAD_BUTTONS } from "../constants/ControlsConstants.js";
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/screens/controls/components/GamepadVisualization3D.tsx
+/**
+* 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
+*/
+/**
+* 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>
+* ```
+*/
+var GamepadVisualization3D = ({ isMobile }) => {
+	const bodyMaterial = useMemo(() => new THREE.MeshStandardMaterial({
+		color: KOREAN_COLORS.UI_STEEL_GRAY_DARK,
+		metalness: .7,
+		roughness: .3,
+		transparent: true,
+		opacity: .95
+	}), []);
+	useEffect(() => {
+		return () => {
+			bodyMaterial.dispose();
+		};
+	}, [bodyMaterial]);
+	const buttonPositions = useMemo(() => ({
+		0: {
+			x: 1.5,
+			y: .5,
+			z: .15
+		},
+		1: {
+			x: 2,
+			y: 0,
+			z: .15
+		},
+		2: {
+			x: 1,
+			y: 0,
+			z: .15
+		},
+		3: {
+			x: 1.5,
+			y: -.5,
+			z: .15
+		},
+		4: {
+			x: -2,
+			y: 1,
+			z: .2
+		},
+		5: {
+			x: 2,
+			y: 1,
+			z: .2
+		},
+		6: {
+			x: -2,
+			y: 1.4,
+			z: .2
+		},
+		7: {
+			x: 2,
+			y: 1.4,
+			z: .2
+		},
+		8: {
+			x: -.6,
+			y: 0,
+			z: .15
+		},
+		9: {
+			x: .6,
+			y: 0,
+			z: .15
+		},
+		10: {
+			x: -1.5,
+			y: -.8,
+			z: .15
+		},
+		11: {
+			x: 1.5,
+			y: -.8,
+			z: .15
+		}
+	}), []);
+	return /* @__PURE__ */ jsxs("group", {
+		position: [
+			0,
+			0,
+			0
+		],
+		"data-testid": "gamepad-visualization",
+		children: [
+			/* @__PURE__ */ jsx("ambientLight", { intensity: .5 }),
+			/* @__PURE__ */ jsx("directionalLight", {
+				position: [
+					3,
+					3,
+					3
+				],
+				intensity: .8
+			}),
+			/* @__PURE__ */ jsx("directionalLight", {
+				position: [
+					-3,
+					2,
+					2
+				],
+				intensity: .4
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					-1.5,
+					0,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+					2.5,
+					2.5,
+					.4
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: bodyMaterial,
+					attach: "material"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					1.5,
+					0,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+					2.5,
+					2.5,
+					.4
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: bodyMaterial,
+					attach: "material"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					0,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+					1.5,
+					1.5,
+					.35
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: bodyMaterial,
+					attach: "material"
+				})]
+			}),
+			GAMEPAD_BUTTONS.map((button) => {
+				const pos = buttonPositions[button.index];
+				if (!pos) return null;
+				return /* @__PURE__ */ jsxs("group", {
+					position: [
+						pos.x,
+						pos.y,
+						pos.z
+					],
+					children: [/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+						.15,
+						16,
+						16
+					] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+						color: button.color,
+						emissive: button.color,
+						emissiveIntensity: 1.5,
+						metalness: .5,
+						roughness: .3
+					})] }), /* @__PURE__ */ jsx(Html, {
+						position: [
+							0,
+							.3,
+							0
+						],
+						center: true,
+						distanceFactor: isMobile ? 3 : 2.5,
+						style: { pointerEvents: "none" },
+						children: /* @__PURE__ */ jsxs("div", {
+							style: {
+								fontFamily: FONT_FAMILY.KOREAN,
+								fontSize: isMobile ? "10px" : "11px",
+								fontWeight: "bold",
+								color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+								textAlign: "center",
+								whiteSpace: "nowrap",
+								background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .8),
+								padding: "4px 6px",
+								borderRadius: "4px",
+								border: `1px solid ${hexToRgbaString(button.color, .6)}`,
+								boxShadow: `0 0 8px ${hexToRgbaString(button.color, .4)}`
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									color: hexToRgbaString(button.color),
+									marginBottom: "2px"
+								},
+								children: [
+									button.korean,
+									" | ",
+									button.english
+								]
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: isMobile ? "9px" : "10px",
+									color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY)
+								},
+								children: [
+									button.actionKorean,
+									" | ",
+									button.action
+								]
+							})]
+						})
+					})]
+				}, button.index);
+			})
+		]
+	});
+};
+//#endregion
+export { GamepadVisualization3D as default };
+
+//# sourceMappingURL=GamepadVisualization3D.js.map

package/lib/components/screens/controls/components/GamepadVisualization3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GamepadVisualization3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/GamepadVisualization3D.tsx"],"sourcesContent":["/**\n * GamepadVisualization3D - 3D gamepad visualization with button labels\n *\n * Renders a simplified 3D gamepad shape with colored buttons and\n * bilingual Korean-English labels for each button.\n *\n * @module components/screens/controls/components\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { GAMEPAD_BUTTONS } from \"../constants/ControlsConstants\";\n\n/**\n * Props for GamepadVisualization3D component\n */\nexport interface GamepadVisualization3DProps {\n  /** Whether on mobile device (affects sizing) */\n  readonly isMobile: boolean;\n}\n\n/**\n * GamepadVisualization3D Component\n *\n * 3D visualization of a gamepad with labeled buttons.\n * Displays simplified gamepad shape with colored circles for buttons.\n *\n * @example\n * ```tsx\n * <Canvas>\n *   <GamepadVisualization3D isMobile={false} />\n * </Canvas>\n * ```\n */\nexport const GamepadVisualization3D: React.FC<GamepadVisualization3DProps> = ({\n  isMobile,\n}) => {\n  // Gamepad body material\n  const bodyMaterial = useMemo(\n    () =>\n      new THREE.MeshStandardMaterial({\n        color: KOREAN_COLORS.UI_STEEL_GRAY_DARK,\n        metalness: 0.7,\n        roughness: 0.3,\n        transparent: true,\n        opacity: 0.95,\n      }),\n    [],\n  );\n\n  // Cleanup material on unmount to prevent memory leaks\n  useEffect(() => {\n    return () => {\n      bodyMaterial.dispose();\n    };\n  }, [bodyMaterial]);\n\n  // Button positions (simplified layout)\n  const buttonPositions = useMemo(\n    () => ({\n      // Face buttons (right side)\n      0: { x: 1.5, y: 0.5, z: 0.15 }, // A\n      1: { x: 2.0, y: 0.0, z: 0.15 }, // B\n      2: { x: 1.0, y: 0.0, z: 0.15 }, // X\n      3: { x: 1.5, y: -0.5, z: 0.15 }, // Y\n      // Shoulder buttons (top)\n      4: { x: -2.0, y: 1.0, z: 0.2 }, // LB\n      5: { x: 2.0, y: 1.0, z: 0.2 }, // RB\n      6: { x: -2.0, y: 1.4, z: 0.2 }, // LT\n      7: { x: 2.0, y: 1.4, z: 0.2 }, // RT\n      // Menu buttons (center)\n      8: { x: -0.6, y: 0.0, z: 0.15 }, // Back\n      9: { x: 0.6, y: 0.0, z: 0.15 }, // Start\n      // Stick buttons (lower)\n      10: { x: -1.5, y: -0.8, z: 0.15 }, // L3\n      11: { x: 1.5, y: -0.8, z: 0.15 }, // R3\n    }),\n    [],\n  );\n\n  return (\n    <group position={[0, 0, 0]} data-testid=\"gamepad-visualization\">\n      {/* Ambient light */}\n      <ambientLight intensity={0.5} />\n\n      {/* Directional lights */}\n      <directionalLight position={[3, 3, 3]} intensity={0.8} />\n      <directionalLight position={[-3, 2, 2]} intensity={0.4} />\n\n      {/* Left body section (rounded rectangle) */}\n      <mesh position={[-1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Right body section (rounded rectangle) */}\n      <mesh position={[1.5, 0, 0]}>\n        <boxGeometry args={[2.5, 2.5, 0.4]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Center connector */}\n      <mesh position={[0, 0, 0]}>\n        <boxGeometry args={[1.5, 1.5, 0.35]} />\n        <primitive object={bodyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Render all buttons */}\n      {GAMEPAD_BUTTONS.map((button) => {\n        const pos =\n          buttonPositions[button.index as keyof typeof buttonPositions];\n        if (!pos) return null;\n\n        return (\n          <group key={button.index} position={[pos.x, pos.y, pos.z]}>\n            {/* Button sphere */}\n            <mesh>\n              <sphereGeometry args={[0.15, 16, 16]} />\n              <meshStandardMaterial\n                color={button.color}\n                emissive={button.color}\n                emissiveIntensity={1.5}\n                metalness={0.5}\n                roughness={0.3}\n              />\n            </mesh>\n\n            {/* Button label overlay */}\n            <Html\n              position={[0, 0.3, 0]}\n              center\n              distanceFactor={isMobile ? 3 : 2.5}\n              style={{ pointerEvents: \"none\" }}\n            >\n              <div\n                style={{\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  fontSize: isMobile ? \"10px\" : \"11px\",\n                  fontWeight: \"bold\",\n                  color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                  textAlign: \"center\",\n                  whiteSpace: \"nowrap\",\n                  background: hexToRgbaString(\n                    KOREAN_COLORS.UI_BACKGROUND_DARK,\n                    0.8,\n                  ),\n                  padding: \"4px 6px\",\n                  borderRadius: \"4px\",\n                  border: `1px solid ${hexToRgbaString(button.color, 0.6)}`,\n                  boxShadow: `0 0 8px ${hexToRgbaString(button.color, 0.4)}`,\n                }}\n              >\n                {/* Button name */}\n                <div\n                  style={{\n                    color: hexToRgbaString(button.color),\n                    marginBottom: \"2px\",\n                  }}\n                >\n                  {button.korean} | {button.english}\n                </div>\n                {/* Action */}\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n                  }}\n                >\n                  {button.actionKorean} | {button.action}\n                </div>\n              </div>\n            </Html>\n          </group>\n        );\n      })}\n    </group>\n  );\n};\n\nexport default GamepadVisualization3D;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/InteractiveControlDemoOverlayHtml.d.ts

@@ -0,0 +1,35 @@
+/**
+ * InteractiveControlDemo - Display recently pressed keys and their actions
+ *
+ * Shows the last 5 pressed keys with their descriptions in a bottom overlay.
+ * Keys auto-fade after 2 seconds for a clean, non-intrusive display.
+ *
+ * @module components/screens/controls/components
+ */
+import React from "react";
+/**
+ * Props for InteractiveControlDemo component
+ */
+export interface InteractiveControlDemoProps {
+    /** Set of currently pressed key codes */
+    readonly pressedKeys: Set<string>;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * InteractiveControlDemo Component
+ *
+ * Displays recently pressed keys with their actions.
+ * Auto-fades entries after 2 seconds and maintains last 5 keys.
+ *
+ * @example
+ * ```tsx
+ * <InteractiveControlDemo
+ *   pressedKeys={new Set(['Space', 'KeyW'])}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const InteractiveControlDemo: React.FC<InteractiveControlDemoProps>;
+export default InteractiveControlDemo;
+//# sourceMappingURL=InteractiveControlDemoOverlayHtml.d.ts.map

package/lib/components/screens/controls/components/InteractiveControlDemoOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveControlDemoOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/InteractiveControlDemoOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAM5D;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,yCAAyC;IACzC,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AA2GD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA2JxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,222 @@
+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, getKeyCategoryColor } from "../constants/ControlsConstants.js";
+import React, { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/controls/components/InteractiveControlDemoOverlayHtml.tsx
+/**
+* InteractiveControlDemo - Display recently pressed keys and their actions
+* 
+* Shows the last 5 pressed keys with their descriptions in a bottom overlay.
+* Keys auto-fade after 2 seconds for a clean, non-intrusive display.
+* 
+* @module components/screens/controls/components
+*/
+/**
+* Memoized KeyPressEntryDisplay Component
+* 
+* Displays a single key press entry with optimized inline styles.
+*/
+var KeyPressEntryDisplay = React.memo(({ entry, opacity, categoryColor, isMobile, theme }) => {
+	const containerStyle = useMemo(() => ({
+		display: "flex",
+		alignItems: "center",
+		gap: isMobile ? "8px" : "12px",
+		padding: isMobile ? "8px" : "10px",
+		background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, opacity * .9),
+		borderRadius: "8px",
+		border: `2px solid ${hexToRgbaString(categoryColor, opacity * .7)}`,
+		transition: "opacity 0.3s ease",
+		opacity
+	}), [
+		isMobile,
+		theme.colors.UI_BACKGROUND_MEDIUM,
+		opacity,
+		categoryColor
+	]);
+	const keyLabelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "16px" : "18px",
+		fontWeight: "bold",
+		color: hexToRgbaString(categoryColor),
+		padding: "6px 12px",
+		background: hexToRgbaString(categoryColor, .2),
+		borderRadius: "6px",
+		minWidth: isMobile ? "50px" : "60px",
+		textAlign: "center",
+		boxShadow: `0 0 10px ${hexToRgbaString(categoryColor, opacity * .5)}`
+	}), [
+		isMobile,
+		categoryColor,
+		opacity
+	]);
+	const koreanLabelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "13px" : "14px",
+		fontWeight: "bold",
+		color: hexToRgbaString(theme.colors.ACCENT_GOLD, opacity),
+		marginBottom: "2px"
+	}), [
+		isMobile,
+		theme.colors.ACCENT_GOLD,
+		opacity
+	]);
+	const descriptionStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "11px" : "12px",
+		color: hexToRgbaString(theme.colors.TEXT_SECONDARY, opacity),
+		lineHeight: 1.3
+	}), [
+		isMobile,
+		theme.colors.TEXT_SECONDARY,
+		opacity
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: containerStyle,
+		"data-testid": `key-press-${entry.keyData.code}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			style: keyLabelStyle,
+			children: entry.keyData.label
+		}), /* @__PURE__ */ jsxs("div", {
+			style: { flex: 1 },
+			children: [entry.keyData.labelKorean && /* @__PURE__ */ jsx("div", {
+				style: koreanLabelStyle,
+				children: entry.keyData.labelKorean
+			}), entry.keyData.descriptionKorean && entry.keyData.description && /* @__PURE__ */ jsxs("div", {
+				style: descriptionStyle,
+				children: [
+					entry.keyData.descriptionKorean,
+					" | ",
+					entry.keyData.description
+				]
+			})]
+		})]
+	});
+});
+KeyPressEntryDisplay.displayName = "KeyPressEntryDisplay";
+/**
+* InteractiveControlDemo Component
+* 
+* Displays recently pressed keys with their actions.
+* Auto-fades entries after 2 seconds and maintains last 5 keys.
+* 
+* @example
+* ```tsx
+* <InteractiveControlDemo
+*   pressedKeys={new Set(['Space', 'KeyW'])}
+*   isMobile={false}
+* />
+* ```
+*/
+var InteractiveControlDemo = ({ pressedKeys, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const [keyPresses, setKeyPresses] = useState([]);
+	const [currentTime, setCurrentTime] = useState(() => Date.now());
+	useEffect(() => {
+		let frameId;
+		const updateTime = () => {
+			setCurrentTime(Date.now());
+			frameId = window.requestAnimationFrame(updateTime);
+		};
+		frameId = window.requestAnimationFrame(updateTime);
+		return () => {
+			window.cancelAnimationFrame(frameId);
+		};
+	}, []);
+	useEffect(() => {
+		const currentCodes = Array.from(pressedKeys);
+		if (currentCodes.length === 0) return;
+		const now = Date.now();
+		setKeyPresses((prev) => {
+			let updated = prev;
+			currentCodes.forEach((code) => {
+				if (!updated.some((entry) => entry.keyData.code === code && now - entry.timestamp < 100)) {
+					const keyData = KEYBOARD_LAYOUT.find((k) => k.code === code);
+					if (keyData) updated = [{
+						keyData,
+						timestamp: now,
+						id: `${code}-${now}`
+					}, ...updated];
+				}
+			});
+			if (updated.length > 5) updated = updated.slice(0, 5);
+			return updated === prev ? prev : updated;
+		});
+	}, [pressedKeys]);
+	useEffect(() => {
+		setKeyPresses((prev) => prev.filter((entry) => currentTime - entry.timestamp < 2e3));
+	}, [currentTime]);
+	const getOpacity = (timestamp) => {
+		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: `
+      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,
+		"data-testid": "interactive-demo",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: titleStyle,
+				children: "최근 입력 | Recent Input"
+			}),
+			keyPresses.map((entry) => {
+				return /* @__PURE__ */ jsx(KeyPressEntryDisplay, {
+					entry,
+					opacity: getOpacity(entry.timestamp),
+					categoryColor: getKeyCategoryColor(entry.keyData.category),
+					isMobile,
+					theme
+				}, entry.id);
+			}),
+			keyPresses.length === 0 && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontFamily: FONT_FAMILY.KOREAN,
+					fontSize: isMobile ? "12px" : "13px",
+					color: hexToRgbaString(theme.colors.TEXT_TERTIARY),
+					textAlign: "center",
+					padding: "15px"
+				},
+				children: "키를 눌러서 액션을 확인하세요 | Press keys to see actions"
+			})
+		]
+	});
+};
+//#endregion
+export { InteractiveControlDemo as default };
+
+//# sourceMappingURL=InteractiveControlDemoOverlayHtml.js.map

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

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

package/lib/components/screens/controls/components/Key3D.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Key3D - Individual 3D keyboard key component with press animation
+ *
+ * Renders a 3D box mesh for a keyboard key with category-based coloring,
+ * press animation, and bilingual label overlay.
+ *
+ * @module components/screens/controls/components
+ */
+import React from "react";
+import { type KeyData } from "../constants/ControlsConstants";
+/**
+ * Props for Key3D component
+ */
+export interface Key3DProps {
+    /** Key data containing position, label, and category */
+    readonly keyData: KeyData;
+    /** Whether this key is currently pressed */
+    readonly isPressed: boolean;
+}
+/**
+ * Key3D Component
+ *
+ * Individual 3D keyboard key with press animation and label overlay.
+ * Uses category-based coloring and emissive glow when pressed.
+ *
+ * @example
+ * ```tsx
+ * <Key3D
+ *   keyData={{ code: 'Space', label: 'Space', row: 4, col: 2, width: 3, category: 'combat' }}
+ *   isPressed={pressedKeys.has('Space')}
+ * />
+ * ```
+ */
+export declare const Key3D: React.FC<Key3DProps>;
+export default Key3D;
+//# sourceMappingURL=Key3D.d.ts.map

package/lib/components/screens/controls/components/Key3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Key3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/Key3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D,OAAO,EAAuB,KAAK,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wDAAwD;IACxD,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqItC,CAAC;AAEF,eAAe,KAAK,CAAC"}