blacktrigram 0.7.2

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

@@ -0,0 +1,1248 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import { COMBAT_CONTROLS } from "../../../systems/types.js";
+import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import "../../../systems/index.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../shared/base/useKoreanTheme.js";
+import { VolumeControl } from "../../shared/ui/VolumeControl.js";
+import { shouldUseMobileControls } from "../../../utils/deviceDetection.js";
+import { getLayoutConstants } from "../../../utils/responsiveLayoutHelpers.js";
+import BackgroundScene3D from "../../shared/three/scene/BackgroundScene3D.js";
+import "../../shared/three/index.js";
+import useWindowSize from "../../../hooks/useWindowSize.js";
+import { BackButton } from "../../shared/ui/BackButton.js";
+import ControlBindingsOverlayHtml from "./components/ControlBindingsOverlayHtml.js";
+import { ControlCategoryTabs } from "./components/ControlCategoryTabsOverlayHtml.js";
+import GamepadVisualization3D from "./components/GamepadVisualization3D.js";
+import InteractiveControlDemo from "./components/InteractiveControlDemoOverlayHtml.js";
+import VisualKeyboard3D from "./components/VisualKeyboard3D.js";
+import { useControlsState } from "./hooks/useControlsState.js";
+import { useCallback, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas } from "@react-three/fiber";
+//#region src/components/screens/controls/ControlsScreen3D.tsx
+/**
+* Three.js-based ControlsScreen Component
+*/
+var ControlsScreen3D = ({ onReturnToMenu, width: propWidth, height: propHeight }) => {
+	const { pressedKeys, category, selectedTab, setCategory, setSelectedTab } = useControlsState();
+	useWebGLContextLossHandler({
+		onContextLost: () => {
+			console.warn("⚠️ WebGL context lost in ControlsScreen");
+		},
+		onContextRestored: () => {
+			console.log("✓ WebGL context restored in ControlsScreen");
+		},
+		autoRestore: true
+	});
+	const audio = useAudio();
+	const { width, height } = useWindowSize();
+	const screenWidth = propWidth ?? width;
+	const screenHeight = propHeight ?? height;
+	const isMobile = shouldUseMobileControls();
+	const isTablet = useMemo(() => !isMobile && screenWidth >= 768 && screenWidth < 1024, [isMobile, screenWidth]);
+	const isLargeDesktop = useMemo(() => !isMobile && screenWidth >= 1920, [isMobile, screenWidth]);
+	const layoutConstants = useMemo(() => getLayoutConstants(screenWidth), [screenWidth]);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const scrollbarStyle = useMemo(() => ({ __html: `
+      .korean-scrollbar::-webkit-scrollbar {
+        width: 12px !important;
+        display: block !important;
+      }
+      .korean-scrollbar::-webkit-scrollbar-track {
+        background: ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8)};
+        border-radius: 6px;
+      }
+      .korean-scrollbar::-webkit-scrollbar-thumb {
+        background: ${hexToRgbaString(theme.colors.ACCENT_GOLD, 1)};
+        border-radius: 6px;
+        border: 2px solid ${hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8)};
+      }
+      .korean-scrollbar::-webkit-scrollbar-thumb:hover {
+        background: ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 1)};
+      }
+    ` }), [theme]);
+	const colors = useMemo(() => ({
+		background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .95),
+		headerBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .9),
+		sectionBg: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
+		borderGold: hexToRgbaString(theme.colors.ACCENT_GOLD, .6),
+		borderCyan: hexToRgbaString(theme.colors.PRIMARY_CYAN, .5),
+		borderRed: hexToRgbaString(theme.colors.KOREAN_RED, .8),
+		textPrimary: `#${theme.colors.TEXT_PRIMARY.toString(16).padStart(6, "0")}`,
+		textSecondary: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
+		accentGold: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, "0")}`,
+		accentCyan: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, "0")}`
+	}), [theme]);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape" || event.key.toLowerCase() === "m") {
+				event.preventDefault();
+				audio.playSFX("menu_back");
+				onReturnToMenu();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown, { passive: false });
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [onReturnToMenu, audio]);
+	const handleBackClick = useCallback(() => {
+		audio.playSFX("menu_back");
+		onReturnToMenu();
+	}, [audio, onReturnToMenu]);
+	const handleModeButtonEnter = useCallback((e, isActive) => {
+		if (!isActive) {
+			e.currentTarget.style.background = hexToRgbaString(theme.colors.PRIMARY_CYAN, .1);
+			e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.PRIMARY_CYAN, .8);
+		}
+	}, [theme]);
+	const handleModeButtonLeave = useCallback((e, isActive) => {
+		if (!isActive) {
+			e.currentTarget.style.background = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8);
+			e.currentTarget.style.borderColor = hexToRgbaString(theme.colors.ACCENT_GOLD, .6);
+		}
+	}, [theme]);
+	const stanceControls = useMemo(() => Object.entries(COMBAT_CONTROLS.stanceControls), []);
+	const combatControls = useMemo(() => Object.entries(COMBAT_CONTROLS.combat), []);
+	const buttonsPerRow = isMobile ? 2 : isTablet ? 3 : isLargeDesktop ? 5 : 4;
+	const buttonHeight = isMobile ? 120 : isTablet ? 130 : isLargeDesktop ? 120 : 140;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: screenWidth,
+			height: screenHeight,
+			position: "relative",
+			overflow: "hidden"
+		},
+		"data-testid": "controls-screen",
+		children: [
+			/* @__PURE__ */ jsx(VolumeControl, {
+				position: "top-right",
+				compact: isMobile
+			}),
+			/* @__PURE__ */ jsxs(Canvas, {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					zIndex: Z_INDEX.ARENA
+				},
+				gl: {
+					antialias: true,
+					alpha: false,
+					powerPreference: "high-performance"
+				},
+				dpr: [1, 2],
+				camera: {
+					position: [
+						0,
+						5,
+						10
+					],
+					fov: 75
+				},
+				onCreated: ({ gl }) => {
+					gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);
+				},
+				children: [/* @__PURE__ */ jsx(BackgroundScene3D, { theme: "controls" }), category === "keyboard" ? /* @__PURE__ */ jsx(VisualKeyboard3D, {
+					pressedKeys,
+					selectedTab
+				}) : /* @__PURE__ */ jsx(GamepadVisualization3D, { isMobile })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					zIndex: Z_INDEX.HUD
+				},
+				"data-testid": "controls-hud-overlay",
+				children: [/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: scrollbarStyle }), /* @__PURE__ */ jsxs("div", {
+					style: {
+						width: "100%",
+						height: "100%",
+						display: "flex",
+						flexDirection: "column",
+						color: colors.textPrimary,
+						fontFamily: theme.koreanTypography.fontFamily,
+						lineHeight: theme.koreanTypography.lineHeight,
+						pointerEvents: "auto"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								height: `${layoutConstants.headerHeight}px`,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center",
+								background: colors.headerBg,
+								borderBottom: `3px solid ${colors.borderRed}`,
+								padding: `${layoutConstants.padding}px`
+							},
+							"data-testid": "controls-header",
+							children: [/* @__PURE__ */ jsx("h1", {
+								style: {
+									fontSize: isMobile ? "20px" : "24px",
+									fontWeight: "bold",
+									color: colors.accentGold,
+									margin: 0,
+									textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .5)}`
+								},
+								children: "조작법 안내 - Controls Guide"
+							}), /* @__PURE__ */ jsx("p", {
+								style: {
+									fontSize: isMobile ? "12px" : "16px",
+									color: colors.accentCyan,
+									margin: "8px 0 0 0",
+									fontStyle: "italic"
+								},
+								children: "☯ 팔괘 철학과 급소술의 융합 | Eight Trigrams Philosophy & Vital Point Arts ☯"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "center",
+								gap: isMobile ? "10px" : "15px",
+								padding: `${layoutConstants.padding}px`,
+								background: colors.headerBg,
+								borderBottom: `2px solid ${colors.borderGold}`
+							},
+							"data-testid": "mode-toggle",
+							children: [/* @__PURE__ */ jsx("button", {
+								onClick: () => {
+									audio.playSFX("menu_select");
+									setCategory("keyboard");
+								},
+								style: {
+									padding: isMobile ? "10px 20px" : "12px 30px",
+									borderRadius: "8px",
+									border: `2px solid ${category === "keyboard" ? colors.accentCyan : colors.borderGold}`,
+									background: category === "keyboard" ? hexToRgbaString(theme.colors.PRIMARY_CYAN, .3) : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
+									color: category === "keyboard" ? colors.accentCyan : colors.textSecondary,
+									fontFamily: FONT_FAMILY.KOREAN,
+									fontSize: isMobile ? "14px" : "16px",
+									fontWeight: "bold",
+									cursor: "pointer",
+									transition: "all 0.2s ease"
+								},
+								"data-testid": "keyboard-mode-button",
+								onMouseEnter: (e) => handleModeButtonEnter(e, category === "keyboard"),
+								onMouseLeave: (e) => handleModeButtonLeave(e, category === "keyboard"),
+								children: "⌨️ 키보드 | Keyboard"
+							}), /* @__PURE__ */ jsx("button", {
+								onClick: () => {
+									audio.playSFX("menu_select");
+									setCategory("gamepad");
+								},
+								style: {
+									padding: isMobile ? "10px 20px" : "12px 30px",
+									borderRadius: "8px",
+									border: `2px solid ${category === "gamepad" ? colors.accentCyan : colors.borderGold}`,
+									background: category === "gamepad" ? hexToRgbaString(theme.colors.PRIMARY_CYAN, .3) : hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
+									color: category === "gamepad" ? colors.accentCyan : colors.textSecondary,
+									fontFamily: FONT_FAMILY.KOREAN,
+									fontSize: isMobile ? "14px" : "16px",
+									fontWeight: "bold",
+									cursor: "pointer",
+									transition: "all 0.2s ease"
+								},
+								"data-testid": "gamepad-mode-button",
+								onMouseEnter: (e) => handleModeButtonEnter(e, category === "gamepad"),
+								onMouseLeave: (e) => handleModeButtonLeave(e, category === "gamepad"),
+								children: "🎮 게임패드 | Gamepad"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								background: colors.headerBg,
+								borderBottom: `2px solid ${colors.borderCyan}`
+							},
+							children: /* @__PURE__ */ jsx(ControlCategoryTabs, {
+								selectedTab,
+								onTabChange: (tab) => {
+									audio.playSFX("menu_select");
+									setSelectedTab(tab);
+								},
+								isMobile
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								flex: 1,
+								overflowY: "auto",
+								overflowX: "hidden",
+								padding: `${layoutConstants.padding}px`,
+								scrollbarWidth: "thin",
+								scrollbarColor: `${colors.accentGold} ${colors.sectionBg}`
+							},
+							className: "korean-scrollbar",
+							"data-testid": "controls-content",
+							children: [
+								/* @__PURE__ */ jsx(ControlBindingsOverlayHtml, {
+									selectedTab,
+									isMobile
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginTop: `${layoutConstants.sectionSpacing}px`,
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${colors.borderGold}`,
+										padding: "20px"
+									},
+									"data-testid": "trigram-controls",
+									children: [
+										/* @__PURE__ */ jsx("h2", {
+											style: {
+												fontSize: isMobile ? "18px" : "22px",
+												fontWeight: "bold",
+												color: colors.accentGold,
+												margin: "0 0 10px 0"
+											},
+											children: "팔괘 무술 자세 - Eight Trigram Combat Stances"
+										}),
+										/* @__PURE__ */ jsx("p", {
+											style: {
+												fontSize: isMobile ? "11px" : "14px",
+												color: colors.accentCyan,
+												fontStyle: "italic",
+												margin: "0 0 20px 0"
+											},
+											children: "🗡️ 전통 한국 무예의 8가지 핵심 자세 | 8 Core Stances of Traditional Korean Martial Arts 🗡️"
+										}),
+										/* @__PURE__ */ jsx("div", {
+											style: {
+												display: "grid",
+												gridTemplateColumns: `repeat(${buttonsPerRow}, 1fr)`,
+												gap: "15px"
+											},
+											"data-testid": "stance-controls-grid",
+											children: stanceControls.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+												style: {
+													background: `linear-gradient(135deg, ${hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .9)}, ${hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, .9)})`,
+													borderRadius: "10px",
+													border: `2px solid ${colors.borderGold}`,
+													padding: "12px",
+													position: "relative",
+													minHeight: `${buttonHeight}px`
+												},
+												"data-testid": `stance-control-${key}`,
+												children: [
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															position: "absolute",
+															top: "8px",
+															left: "8px",
+															background: colors.accentGold,
+															borderRadius: "6px",
+															width: "25px",
+															height: "25px",
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "center",
+															fontSize: isMobile ? "14px" : "16px",
+															fontWeight: "bold",
+															color: "#000"
+														},
+														children: key
+													}),
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															position: "absolute",
+															top: "8px",
+															right: "8px",
+															fontSize: isMobile ? "18px" : "22px",
+															color: colors.accentGold,
+															fontWeight: "bold"
+														},
+														children: value.symbol
+													}),
+													/* @__PURE__ */ jsxs("div", {
+														style: { marginTop: "35px" },
+														children: [/* @__PURE__ */ jsx("div", {
+															style: {
+																fontSize: isMobile ? "12px" : "14px",
+																fontWeight: "bold",
+																color: colors.textPrimary
+															},
+															children: value.korean
+														}), /* @__PURE__ */ jsx("div", {
+															style: {
+																fontSize: isMobile ? "9px" : "10px",
+																color: colors.textSecondary,
+																fontStyle: "italic"
+															},
+															children: value.english
+														})]
+													}),
+													/* @__PURE__ */ jsxs("div", {
+														style: { marginTop: "8px" },
+														children: [/* @__PURE__ */ jsxs("div", {
+															style: {
+																fontSize: isMobile ? "9px" : "10px",
+																fontWeight: "bold",
+																color: colors.accentCyan
+															},
+															children: ["🥋 ", value.technique.korean]
+														}), /* @__PURE__ */ jsx("div", {
+															style: {
+																fontSize: isMobile ? "8px" : "9px",
+																color: colors.accentCyan,
+																fontStyle: "italic"
+															},
+															children: value.technique.english
+														})]
+													}),
+													/* @__PURE__ */ jsxs("div", {
+														style: { marginTop: "6px" },
+														children: [/* @__PURE__ */ jsxs("div", {
+															style: {
+																fontSize: isMobile ? "8px" : "9px",
+																fontWeight: "bold",
+																color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(6, "0")}`
+															},
+															children: ["⚔️ ", value.combatFocus.korean]
+														}), /* @__PURE__ */ jsx("div", {
+															style: {
+																fontSize: isMobile ? "7px" : "8px",
+																color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(6, "0")}`,
+																fontStyle: "italic"
+															},
+															children: value.combatFocus.english
+														})]
+													}),
+													/* @__PURE__ */ jsxs("div", {
+														style: {
+															marginTop: "6px",
+															fontSize: isMobile ? "7px" : "8px",
+															fontWeight: "bold",
+															color: `#${theme.colors.NEGATIVE_RED.toString(16).padStart(6, "0")}`
+														},
+														children: ["💥 ", value.combatEffects.korean]
+													}),
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															position: "absolute",
+															bottom: "8px",
+															right: "8px",
+															fontSize: isMobile ? "7px" : "8px",
+															fontWeight: "bold",
+															color: `#${theme.colors.KOREAN_RED.toString(16).padStart(6, "0")}`
+														},
+														children: "급소술"
+													})
+												]
+											}, key))
+										})
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${colors.borderCyan}`,
+										padding: "20px"
+									},
+									"data-testid": "combat-controls",
+									children: [/* @__PURE__ */ jsx("h2", {
+										style: {
+											fontSize: isMobile ? "18px" : "22px",
+											fontWeight: "bold",
+											color: colors.accentCyan,
+											margin: "0 0 20px 0"
+										},
+										children: "실전 격투 조작 - Combat Actions"
+									}), /* @__PURE__ */ jsx("div", {
+										style: {
+											display: "flex",
+											flexDirection: "column",
+											gap: "10px"
+										},
+										"data-testid": "combat-controls-list",
+										children: combatControls.map(([key, description]) => /* @__PURE__ */ jsxs("div", {
+											style: {
+												background: `linear-gradient(90deg, ${hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, .9)}, ${hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .9)})`,
+												borderRadius: "8px",
+												border: `1px solid ${colors.borderCyan}`,
+												padding: "12px",
+												display: "flex",
+												alignItems: "center",
+												gap: "15px"
+											},
+											"data-testid": `combat-control-${key}`,
+											children: [/* @__PURE__ */ jsx("div", {
+												style: {
+													background: hexToRgbaString(theme.colors.ACCENT_CYAN, .3),
+													borderRadius: "6px",
+													padding: "4px 12px",
+													fontSize: isMobile ? "14px" : "16px",
+													fontWeight: "bold",
+													color: colors.accentGold,
+													minWidth: "60px",
+													textAlign: "center"
+												},
+												children: key
+											}), /* @__PURE__ */ jsxs("div", {
+												style: { flex: 1 },
+												children: [/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "11px" : "13px",
+														fontWeight: "bold",
+														color: colors.textPrimary
+													},
+													children: description.korean
+												}), /* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "9px" : "11px",
+														color: colors.textSecondary,
+														fontStyle: "italic"
+													},
+													children: description.english
+												})]
+											})]
+										}, key))
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${hexToRgbaString(theme.colors.SECONDARY_MAGENTA, .5)}`,
+										padding: "20px"
+									},
+									"data-testid": "movement-controls",
+									children: [/* @__PURE__ */ jsx("h2", {
+										style: {
+											fontSize: isMobile ? "18px" : "22px",
+											fontWeight: "bold",
+											color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(6, "0")}`,
+											margin: "0 0 20px 0"
+										},
+										children: "이동 조작 - Movement Controls"
+									}), /* @__PURE__ */ jsxs("div", {
+										style: { marginBottom: "15px" },
+										children: [/* @__PURE__ */ jsx("div", {
+											style: {
+												fontSize: isMobile ? "12px" : "14px",
+												fontWeight: "bold",
+												color: colors.accentGold,
+												marginBottom: "10px"
+											},
+											children: "WASD 또는 방향키 | WASD or Arrow Keys"
+										}), /* @__PURE__ */ jsx("div", {
+											style: {
+												display: "grid",
+												gridTemplateColumns: isMobile ? "1fr 1fr" : "1fr 1fr 1fr 1fr",
+												gap: "8px"
+											},
+											children: [
+												{
+													key: "W/↑",
+													korean: "전진",
+													english: "Forward"
+												},
+												{
+													key: "S/↓",
+													korean: "후퇴",
+													english: "Backward"
+												},
+												{
+													key: "A/←",
+													korean: "좌",
+													english: "Left"
+												},
+												{
+													key: "D/→",
+													korean: "우",
+													english: "Right"
+												}
+											].map((move) => /* @__PURE__ */ jsxs("div", {
+												style: {
+													background: hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, .8),
+													borderRadius: "6px",
+													padding: "8px",
+													textAlign: "center"
+												},
+												children: [/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "11px" : "13px",
+														fontWeight: "bold",
+														color: colors.accentCyan
+													},
+													children: move.key
+												}), /* @__PURE__ */ jsxs("div", {
+													style: {
+														fontSize: isMobile ? "8px" : "9px",
+														color: colors.textSecondary
+													},
+													children: [
+														move.korean,
+														" | ",
+														move.english
+													]
+												})]
+											}, move.key))
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .5)}`,
+										padding: "20px"
+									},
+									"data-testid": "advanced-footwork",
+									children: [
+										/* @__PURE__ */ jsx("h2", {
+											style: {
+												fontSize: isMobile ? "18px" : "22px",
+												fontWeight: "bold",
+												color: colors.accentCyan,
+												margin: "0 0 10px 0"
+											},
+											children: "고급 보법 - Advanced Footwork"
+										}),
+										/* @__PURE__ */ jsx("p", {
+											style: {
+												fontSize: isMobile ? "10px" : "12px",
+												color: colors.textSecondary,
+												fontStyle: "italic",
+												margin: "0 0 15px 0"
+											},
+											children: "🥋 전통 한국 무예 발놀림 기법 | Traditional Korean martial arts footwork techniques"
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											style: { marginBottom: "20px" },
+											children: [
+												/* @__PURE__ */ jsx("h3", {
+													style: {
+														fontSize: isMobile ? "14px" : "16px",
+														fontWeight: "bold",
+														color: colors.accentGold,
+														marginBottom: "10px"
+													},
+													children: "✅ 전술보법 (Shift + WASD) | Tactical Steps - IMPLEMENTED"
+												}),
+												/* @__PURE__ */ jsx("p", {
+													style: {
+														fontSize: isMobile ? "9px" : "10px",
+														color: colors.textSecondary,
+														marginBottom: "10px",
+														fontStyle: "italic"
+													},
+													children: "Precise 30cm repositioning • 300ms duration • Non-interruptible • 5 stamina cost"
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														display: "grid",
+														gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)",
+														gap: "8px"
+													},
+													children: [
+														{
+															key: "Shift+W",
+															korean: "전진보법",
+															english: "Forward Step"
+														},
+														{
+															key: "Shift+S",
+															korean: "후퇴보법",
+															english: "Retreat Step"
+														},
+														{
+															key: "Shift+A",
+															korean: "좌측면보법",
+															english: "Left Step"
+														},
+														{
+															key: "Shift+D",
+															korean: "우측면보법",
+															english: "Right Step"
+														},
+														{
+															key: "Shift+W+A",
+															korean: "전좌측보법",
+															english: "Forward-Left"
+														},
+														{
+															key: "Shift+W+D",
+															korean: "전우측보법",
+															english: "Forward-Right"
+														},
+														{
+															key: "Shift+S+A",
+															korean: "후좌측보법",
+															english: "Back-Left"
+														},
+														{
+															key: "Shift+S+D",
+															korean: "후우측보법",
+															english: "Back-Right"
+														}
+													].map((step) => /* @__PURE__ */ jsxs("div", {
+														style: {
+															background: hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, .8),
+															borderRadius: "6px",
+															border: `1px solid ${colors.borderCyan}`,
+															padding: "8px",
+															textAlign: "center"
+														},
+														children: [
+															/* @__PURE__ */ jsx("div", {
+																style: {
+																	fontSize: isMobile ? "9px" : "10px",
+																	fontWeight: "bold",
+																	color: colors.accentGold,
+																	marginBottom: "4px"
+																},
+																children: step.key
+															}),
+															/* @__PURE__ */ jsx("div", {
+																style: {
+																	fontSize: isMobile ? "7px" : "8px",
+																	color: colors.textPrimary
+																},
+																children: step.korean
+															}),
+															/* @__PURE__ */ jsx("div", {
+																style: {
+																	fontSize: isMobile ? "6px" : "7px",
+																	color: colors.textSecondary,
+																	fontStyle: "italic"
+																},
+																children: step.english
+															})
+														]
+													}, step.key))
+												})
+											]
+										}),
+										/* @__PURE__ */ jsxs("div", { children: [
+											/* @__PURE__ */ jsx("h3", {
+												style: {
+													fontSize: isMobile ? "14px" : "16px",
+													fontWeight: "bold",
+													color: colors.accentGold,
+													marginBottom: "10px"
+												},
+												children: "보법 패턴 (Ctrl + WASD) | Footwork Patterns"
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												style: { marginBottom: "12px" },
+												children: [
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															fontSize: isMobile ? "11px" : "12px",
+															fontWeight: "bold",
+															color: colors.textPrimary,
+															marginBottom: "6px"
+														},
+														children: "✅ 원형보 (Wonhyeongbo) | Circular Step - IMPLEMENTED"
+													}),
+													/* @__PURE__ */ jsx("p", {
+														style: {
+															fontSize: isMobile ? "8px" : "9px",
+															color: colors.textSecondary,
+															marginBottom: "8px",
+															fontStyle: "italic"
+														},
+														children: "Lateral movement while maintaining guard • 30cm distance • 300ms"
+													}),
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															display: "flex",
+															gap: "8px"
+														},
+														children: [{
+															key: "Ctrl+A",
+															korean: "원형보 좌",
+															english: "Circular Left"
+														}, {
+															key: "Ctrl+D",
+															korean: "원형보 우",
+															english: "Circular Right"
+														}].map((move) => /* @__PURE__ */ jsxs("div", {
+															style: {
+																flex: 1,
+																background: hexToRgbaString(theme.colors.ACCENT_CYAN, .2),
+																borderRadius: "6px",
+																border: `1px solid ${colors.borderCyan}`,
+																padding: "8px",
+																textAlign: "center"
+															},
+															children: [
+																/* @__PURE__ */ jsx("div", {
+																	style: {
+																		fontSize: isMobile ? "10px" : "11px",
+																		fontWeight: "bold",
+																		color: colors.accentGold
+																	},
+																	children: move.key
+																}),
+																/* @__PURE__ */ jsx("div", {
+																	style: {
+																		fontSize: isMobile ? "8px" : "9px",
+																		color: colors.textPrimary
+																	},
+																	children: move.korean
+																}),
+																/* @__PURE__ */ jsx("div", {
+																	style: {
+																		fontSize: isMobile ? "7px" : "8px",
+																		color: colors.textSecondary,
+																		fontStyle: "italic"
+																	},
+																	children: move.english
+																})
+															]
+														}, move.key))
+													})
+												]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												style: { marginBottom: "12px" },
+												children: [
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															fontSize: isMobile ? "11px" : "12px",
+															fontWeight: "bold",
+															color: colors.textPrimary,
+															marginBottom: "6px"
+														},
+														children: "✅ 미끄럼보 (Mikkeureombo) | Slide Step - IMPLEMENTED"
+													}),
+													/* @__PURE__ */ jsx("p", {
+														style: {
+															fontSize: isMobile ? "8px" : "9px",
+															color: colors.textSecondary,
+															marginBottom: "8px",
+															fontStyle: "italic"
+														},
+														children: "Both feet move together • 30cm distance • 200ms (faster!)"
+													}),
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															display: "flex",
+															gap: "8px"
+														},
+														children: [{
+															key: "Ctrl+W",
+															korean: "미끄럼보 전",
+															english: "Slide Forward"
+														}, {
+															key: "Ctrl+S",
+															korean: "미끄럼보 후",
+															english: "Slide Back"
+														}].map((move) => /* @__PURE__ */ jsxs("div", {
+															style: {
+																flex: 1,
+																background: hexToRgbaString(theme.colors.ACCENT_CYAN, .2),
+																borderRadius: "6px",
+																border: `1px solid ${colors.borderCyan}`,
+																padding: "8px",
+																textAlign: "center"
+															},
+															children: [
+																/* @__PURE__ */ jsx("div", {
+																	style: {
+																		fontSize: isMobile ? "10px" : "11px",
+																		fontWeight: "bold",
+																		color: colors.accentGold
+																	},
+																	children: move.key
+																}),
+																/* @__PURE__ */ jsx("div", {
+																	style: {
+																		fontSize: isMobile ? "8px" : "9px",
+																		color: colors.textPrimary
+																	},
+																	children: move.korean
+																}),
+																/* @__PURE__ */ jsx("div", {
+																	style: {
+																		fontSize: isMobile ? "7px" : "8px",
+																		color: colors.textSecondary,
+																		fontStyle: "italic"
+																	},
+																	children: move.english
+																})
+															]
+														}, move.key))
+													})
+												]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												style: {
+													marginTop: "15px",
+													padding: "10px",
+													background: hexToRgbaString(theme.colors.ACCENT_CYAN, .2),
+													borderRadius: "6px",
+													border: `1px solid ${colors.borderCyan}`
+												},
+												children: [
+													/* @__PURE__ */ jsx("div", {
+														style: {
+															fontSize: isMobile ? "10px" : "11px",
+															fontWeight: "bold",
+															color: colors.accentGold,
+															marginBottom: "6px"
+														},
+														children: "✅ 추가 보법 (Advanced Patterns) - IMPLEMENTED"
+													}),
+													/* @__PURE__ */ jsxs("p", {
+														style: {
+															fontSize: isMobile ? "8px" : "9px",
+															color: colors.textPrimary,
+															margin: "0 0 6px 0"
+														},
+														children: [/* @__PURE__ */ jsx("strong", { children: "축족회전 (Chukjok Hoejeon) | Pivot" }), ": Shift+Ctrl+A (left) / Shift+Ctrl+D (right) • 90° rotation on planted foot • 250ms"]
+													}),
+													/* @__PURE__ */ jsxs("p", {
+														style: {
+															fontSize: isMobile ? "8px" : "9px",
+															color: colors.textPrimary,
+															margin: 0
+														},
+														children: [/* @__PURE__ */ jsx("strong", { children: "섞음보 (Seokkeumbo) | Shuffle" }), ": Shift+Ctrl+W or Shift+Ctrl+S • 15cm micro-adjustment • 100ms"]
+													})
+												]
+											})
+										] })
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${hexToRgbaString(theme.colors.ACCENT_GOLD, .5)}`,
+										padding: "20px"
+									},
+									"data-testid": "stance-side-switch",
+									children: [
+										/* @__PURE__ */ jsx("h2", {
+											style: {
+												fontSize: isMobile ? "18px" : "22px",
+												fontWeight: "bold",
+												color: colors.accentGold,
+												margin: "0 0 10px 0"
+											},
+											children: "자세 발 바꿈 - Stance Side Switch"
+										}),
+										/* @__PURE__ */ jsx("p", {
+											style: {
+												fontSize: isMobile ? "10px" : "12px",
+												color: colors.textSecondary,
+												fontStyle: "italic",
+												margin: "0 0 15px 0"
+											},
+											children: "✅ 전방 발 전환 | Switch front foot position - IMPLEMENTED"
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											style: {
+												background: hexToRgbaString(theme.colors.ACCENT_GOLD, .2),
+												borderRadius: "6px",
+												border: `1px solid ${colors.borderGold}`,
+												padding: "12px",
+												textAlign: "center"
+											},
+											children: [
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "16px" : "18px",
+														fontWeight: "bold",
+														color: colors.accentGold,
+														marginBottom: "8px"
+													},
+													children: "H"
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "10px" : "11px",
+														color: colors.textPrimary,
+														marginBottom: "4px"
+													},
+													children: "발 바꿈 (Bal Bakkum)"
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "9px" : "10px",
+														color: colors.textSecondary,
+														fontStyle: "italic"
+													},
+													children: "Switch Front Foot"
+												}),
+												/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "7px" : "8px",
+														color: colors.textSecondary,
+														marginTop: "6px",
+														fontStyle: "italic"
+													},
+													children: "Mirrors your stance (left ↔ right) • 400ms duration"
+												})
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${hexToRgbaString(theme.colors.ACCENT_GOLD, .6)}`,
+										padding: "20px"
+									},
+									"data-testid": "technique-controls",
+									children: [
+										/* @__PURE__ */ jsx("h2", {
+											style: {
+												fontSize: isMobile ? "18px" : "22px",
+												fontWeight: "bold",
+												color: colors.accentGold,
+												margin: "0 0 10px 0"
+											},
+											children: "기술 실행 - Technique Execution"
+										}),
+										/* @__PURE__ */ jsx("p", {
+											style: {
+												fontSize: isMobile ? "10px" : "12px",
+												color: colors.textSecondary,
+												fontStyle: "italic",
+												margin: "0 0 15px 0"
+											},
+											children: "⚡ 원형별 고유 기술 (최대 10개) | Archetype-specific techniques (up to 10)"
+										}),
+										/* @__PURE__ */ jsx("div", {
+											style: {
+												display: "grid",
+												gridTemplateColumns: isMobile ? "repeat(5, 1fr)" : "repeat(10, 1fr)",
+												gap: isMobile ? "6px" : "8px"
+											},
+											children: [
+												"Q",
+												"E",
+												"R",
+												"T",
+												"Y",
+												"F",
+												"G",
+												"Z",
+												"X",
+												"C"
+											].map((key, index) => /* @__PURE__ */ jsxs("div", {
+												style: {
+													background: `linear-gradient(135deg, ${hexToRgbaString(theme.colors.ACCENT_GOLD, .3)}, ${hexToRgbaString(theme.colors.ACCENT_GOLD, .1)})`,
+													borderRadius: "6px",
+													border: `2px solid ${colors.borderGold}`,
+													padding: isMobile ? "8px 4px" : "10px 6px",
+													textAlign: "center"
+												},
+												children: [/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "14px" : "16px",
+														fontWeight: "bold",
+														color: colors.accentGold
+													},
+													children: key
+												}), /* @__PURE__ */ jsxs("div", {
+													style: {
+														fontSize: isMobile ? "7px" : "8px",
+														color: colors.textSecondary,
+														marginTop: "2px"
+													},
+													children: ["기술 ", index + 1]
+												})]
+											}, key))
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											style: {
+												marginTop: "15px",
+												padding: "10px",
+												background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .6),
+												borderRadius: "6px",
+												fontSize: isMobile ? "9px" : "10px",
+												color: colors.textSecondary,
+												fontStyle: "italic"
+											},
+											children: [
+												"💡 ",
+												/* @__PURE__ */ jsx("strong", { children: "Tip" }),
+												": Keys positioned around WASD for easy access without interfering with movement. Each archetype has unique techniques."
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										marginBottom: `${layoutConstants.sectionSpacing}px`,
+										background: colors.sectionBg,
+										borderRadius: "12px",
+										border: `2px solid ${colors.borderRed}`,
+										padding: "20px"
+									},
+									"data-testid": "special-features",
+									children: [/* @__PURE__ */ jsx("h2", {
+										style: {
+											fontSize: isMobile ? "18px" : "22px",
+											fontWeight: "bold",
+											color: `#${theme.colors.KOREAN_RED.toString(16).padStart(6, "0")}`,
+											margin: "0 0 20px 0"
+										},
+										children: "특수 기능 - Special Features"
+									}), /* @__PURE__ */ jsx("div", {
+										style: {
+											display: "flex",
+											flexDirection: "column",
+											gap: "10px"
+										},
+										children: [
+											{
+												key: "V",
+												korean: "급소 표시 전환",
+												english: "Toggle vital points overlay (70 points)"
+											},
+											{
+												key: "B",
+												korean: "방어 자세",
+												english: "Defensive guard position"
+											},
+											{
+												key: "F1",
+												korean: "조작법 힌트",
+												english: "Show control hints"
+											},
+											{
+												key: "ESC / M",
+												korean: "일시정지 / 메뉴",
+												english: "Pause menu / Return to menu"
+											}
+										].map((special) => /* @__PURE__ */ jsxs("div", {
+											style: {
+												background: hexToRgbaString(theme.colors.UI_BACKGROUND_LIGHT, .8),
+												borderRadius: "8px",
+												border: `1px solid ${colors.borderRed}`,
+												padding: "10px",
+												display: "flex",
+												alignItems: "center",
+												gap: "12px"
+											},
+											children: [/* @__PURE__ */ jsx("div", {
+												style: {
+													background: hexToRgbaString(theme.colors.KOREAN_RED, .3),
+													borderRadius: "6px",
+													padding: "4px 10px",
+													fontSize: isMobile ? "12px" : "14px",
+													fontWeight: "bold",
+													color: colors.accentGold,
+													minWidth: "50px",
+													textAlign: "center"
+												},
+												children: special.key
+											}), /* @__PURE__ */ jsxs("div", {
+												style: { flex: 1 },
+												children: [/* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "10px" : "12px",
+														fontWeight: "bold",
+														color: colors.textPrimary
+													},
+													children: special.korean
+												}), /* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: isMobile ? "8px" : "10px",
+														color: colors.textSecondary,
+														fontStyle: "italic"
+													},
+													children: special.english
+												})]
+											})]
+										}, special.key))
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx(InteractiveControlDemo, {
+							pressedKeys,
+							isMobile
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								height: `${layoutConstants.footerHeight}px`,
+								background: colors.headerBg,
+								borderTop: `3px solid ${colors.borderRed}`,
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between",
+								padding: `0 ${layoutConstants.padding}px`
+							},
+							"data-testid": "controls-footer",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: isMobile ? "10px" : "12px",
+										color: colors.accentGold,
+										fontStyle: "italic"
+									},
+									children: "🥋 흑괘의 길을 걸어라 | Walk the Path of the Black Trigram 🥋"
+								}),
+								/* @__PURE__ */ jsx(BackButton, {
+									onClick: handleBackClick,
+									korean: "무도장 복귀",
+									english: "Return to Dojang",
+									isMobile,
+									testId: "controls-back-button"
+								}),
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										background: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .9),
+										borderRadius: "6px",
+										padding: "8px 12px",
+										fontSize: isMobile ? "11px" : "12px",
+										fontWeight: "bold",
+										color: `#${theme.colors.SECONDARY_MAGENTA.toString(16).padStart(6, "0")}`,
+										border: `1px solid ${colors.borderGold}`
+									},
+									"data-testid": "keyboard-shortcuts",
+									children: "ESC | M"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								textAlign: "center",
+								padding: "10px",
+								fontSize: isMobile ? "10px" : "12px",
+								color: colors.textSecondary,
+								fontStyle: "italic",
+								background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .7)
+							},
+							children: "ESC 또는 M 키로 메뉴로 돌아가기 - Press ESC or M to return to menu"
+						})
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { ControlsScreen3D as default };
+
+//# sourceMappingURL=ControlsScreen3D.js.map