blacktrigram 0.7.2

package/lib/components/screens/intro/components/ArchetypeDisplayOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchetypeDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport {\n  FALLBACK_ARCHETYPE_IMAGE,\n  FONT_FAMILY,\n  KOREAN_COLORS,\n} from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { getEnhancedKoreanOverlayStyles } from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getKoreanFontOptimization,\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\nimport { StatBar } from \"./StatBarOverlayHtml\";\n\n// Enhanced shape matching PLAYER_ARCHETYPES_DATA entries\nexport interface ArchetypeDataShape {\n  readonly id: string;\n  readonly korean: string;\n  readonly english: string;\n  readonly description: string;\n  readonly color: number;\n  readonly textureKey: string;\n  readonly stats: {\n    readonly attackPower: number;\n    readonly defense: number;\n    readonly speed: number;\n    readonly technique: number;\n  };\n  readonly philosophy: {\n    readonly korean: string;\n    readonly english: string;\n  };\n  readonly specialAbilities?: readonly string[]; // Optional special abilities\n}\n\nexport interface ArchetypeDisplayOverlayHtmlProps {\n  readonly archetypes: readonly ArchetypeDataShape[];\n  readonly selectedIndex: number;\n  readonly onArchetypeChange: (index: number) => void;\n  readonly onPlaySFX: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean;\n}\n\n/**\n * HTML-based ArchetypeDisplay component for Three.js integration\n */\nexport const ArchetypeDisplayOverlayHtml: React.FC<ArchetypeDisplayOverlayHtmlProps> =\n  React.memo(\n    ({\n      archetypes,\n      selectedIndex,\n      onArchetypeChange,\n      onPlaySFX,\n      width = 800,\n      height = 300,\n      isMobile: _isMobile = false, // Kept for interface compatibility, layout uses width\n    }) => {\n      // Note: _isMobile intentionally unused - layout sizing uses width-based checks\n      void _isMobile;\n      const selectedArchetype = archetypes[selectedIndex];\n\n      // Responsive sizing with large desktop support - use width for layout\n      const isSmallScreen = width < 768;\n      const isLargeContainer = width >= 1100;\n      const archImageWidth = isSmallScreen ? 140 : isLargeContainer ? 120 : 180;\n      const archImageHeight = isSmallScreen\n        ? 200\n        : isLargeContainer\n          ? 170\n          : 260;\n      const containerPadding = isSmallScreen ? 20 : isLargeContainer ? 12 : 20;\n      const contentGap = isSmallScreen ? 10 : isLargeContainer ? 8 : 16;\n      const infoGap = isSmallScreen ? 8 : isLargeContainer ? 6 : 12;\n      const titleFontSize = isSmallScreen ? 14 : isLargeContainer ? 14 : 18;\n      const philosophyFontSize = isSmallScreen\n        ? 10\n        : isLargeContainer\n          ? 10\n          : 12;\n      const statBarHeight = isSmallScreen ? 10 : isLargeContainer ? 10 : 12;\n\n      const handlePrevious = useCallback(() => {\n        const newIndex =\n          selectedIndex === 0 ? archetypes.length - 1 : selectedIndex - 1;\n        onArchetypeChange(newIndex);\n        onPlaySFX(\"menu_hover\");\n      }, [selectedIndex, archetypes.length, onArchetypeChange, onPlaySFX]);\n\n      const handleNext = useCallback(() => {\n        const newIndex = (selectedIndex + 1) % archetypes.length;\n        onArchetypeChange(newIndex);\n        onPlaySFX(\"menu_hover\");\n      }, [selectedIndex, archetypes.length, onArchetypeChange, onPlaySFX]);\n\n      // Convert real stats to 0-1 scale for visualization\n      const combatStats = useMemo(() => {\n        const maxStatValue = 100;\n        return [\n          {\n            korean: \"공격\",\n            english: \"Attack\",\n            value: selectedArchetype.stats.attackPower / maxStatValue,\n            rawValue: selectedArchetype.stats.attackPower,\n          },\n          {\n            korean: \"방어\",\n            english: \"Defense\",\n            value: selectedArchetype.stats.defense / maxStatValue,\n            rawValue: selectedArchetype.stats.defense,\n          },\n          {\n            korean: \"속도\",\n            english: \"Speed\",\n            value: selectedArchetype.stats.speed / maxStatValue,\n            rawValue: selectedArchetype.stats.speed,\n          },\n          {\n            korean: \"기술\",\n            english: \"Technique\",\n            value: selectedArchetype.stats.technique / maxStatValue,\n            rawValue: selectedArchetype.stats.technique,\n          },\n        ];\n      }, [selectedArchetype.stats]);\n\n      // Memoize RGBA color calculations and enhanced styles\n      const colors = useMemo(\n        () => ({\n          archetypeColor: `#${selectedArchetype.color\n            .toString(16)\n            .padStart(6, \"0\")}`,\n          titleGold: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n            6,\n            \"0\",\n          )}`,\n          statsBackground: hexToRgbaString(\n            KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            0.9,\n          ),\n          statsBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.5),\n          statBarBackground: hexToRgbaString(\n            KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            1,\n          ),\n          statBarFill: hexToRgbaString(selectedArchetype.color, 0.9),\n        }),\n        [selectedArchetype.color],\n      );\n\n      // Enhanced overlay styles\n      const containerStyle = useMemo(\n        () => ({\n          ...getEnhancedKoreanOverlayStyles({\n            opacity: 0.95,\n            glowIntensity: \"medium\",\n            includeGradient: false,\n            includeBackdropBlur: false,\n            depthLayers: 3,\n          }),\n          width: `${width}px`,\n          height: `${height}px`,\n          display: \"flex\",\n          flexDirection: \"row\" as const,\n          alignItems: \"flex-start\",\n          justifyContent: \"flex-start\",\n          gap: `${contentGap}px`,\n          border: `2px solid ${colors.archetypeColor}`,\n          padding: `${containerPadding}px`,\n          position: \"relative\" as const,\n          overflow: \"hidden\" as const,\n        }),\n        [width, height, contentGap, containerPadding, colors.archetypeColor],\n      );\n\n      // Get archetype image path\n      const archetypeImagePath = useMemo(() => {\n        return `/assets/visual/archetypes/${selectedArchetype.textureKey}.png`;\n      }, [selectedArchetype.textureKey]);\n\n      return (\n        <div style={containerStyle} data-testid=\"archetype-display-container\">\n          {/* Left Side - Character Image and Navigation */}\n          <div\n            style={{\n              width: `${archImageWidth + 40}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: `${infoGap}px`,\n              flexShrink: 0,\n            }}\n            data-testid=\"archetype-image-section\"\n          >\n            {/* Character Image */}\n            <div\n              style={{\n                width: `${archImageWidth + 20}px`,\n                height: `${archImageHeight + 20}px`,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                background: `radial-gradient(circle, ${colors.archetypeColor}26, transparent)`,\n                borderRadius: \"4px\",\n                border: `2px solid ${colors.archetypeColor}`,\n              }}\n              data-testid=\"archetype-image-container\"\n            >\n              <img\n                src={archetypeImagePath}\n                alt={`${selectedArchetype.korean} - ${selectedArchetype.english}`}\n                style={{\n                  width: `${archImageWidth}px`,\n                  height: `${archImageHeight}px`,\n                  objectFit: \"contain\",\n                  cursor: \"pointer\",\n                }}\n                onClick={handleNext}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    handleNext();\n                  }\n                }}\n                tabIndex={0}\n                role=\"button\"\n                aria-label={`${selectedArchetype.korean} ${selectedArchetype.english} - Click or press Enter to cycle to next archetype`}\n                data-testid=\"archetype-image\"\n                onError={(e) => {\n                  // Fallback if image doesn't load: use Black Trigram logo, prevent infinite loop\n                  const target = e.currentTarget as HTMLImageElement;\n                  if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n                    target.src = FALLBACK_ARCHETYPE_IMAGE;\n                    target.alt = `${selectedArchetype.korean} (image unavailable)`;\n                  }\n                }}\n              />\n            </div>\n\n            {/* Navigation Buttons */}\n            <div\n              style={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: \"8px\",\n                width: \"100%\",\n              }}\n              data-testid=\"archetype-navigation\"\n            >\n              <button\n                onClick={handlePrevious}\n                aria-label=\"Previous archetype\"\n                style={{\n                  flex: 1,\n                  height: \"30px\",\n                  fontSize: \"14px\",\n                  fontWeight: \"bold\",\n                  color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  background: colors.statsBackground,\n                  border: `1px solid ${hexToRgbaString(\n                    KOREAN_COLORS.ACCENT_GOLD,\n                    0.7,\n                  )}`,\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n                  e.currentTarget.style.outlineOffset = \"2px\";\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.outline = \"none\";\n                }}\n                data-testid=\"prev-archetype-button\"\n              >\n                ◀\n              </button>\n              <button\n                onClick={handleNext}\n                aria-label=\"Next archetype\"\n                style={{\n                  flex: 1,\n                  height: \"30px\",\n                  fontSize: \"14px\",\n                  fontWeight: \"bold\",\n                  color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  background: colors.statsBackground,\n                  border: `1px solid ${hexToRgbaString(\n                    KOREAN_COLORS.ACCENT_GOLD,\n                    0.7,\n                  )}`,\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n                  e.currentTarget.style.outlineOffset = \"2px\";\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.outline = \"none\";\n                }}\n                data-testid=\"next-archetype-button\"\n              >\n                ▶\n              </button>\n            </div>\n          </div>\n\n          {/* Right Side - Archetype Information */}\n          <div\n            style={{\n              flex: 1,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              justifyContent: \"flex-start\",\n              gap: `${infoGap}px`,\n              minWidth: 0,\n              overflow: \"hidden\",\n            }}\n            data-testid=\"archetype-info\"\n          >\n            {/* Header with name and counter */}\n            <div\n              style={{\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n              }}\n            >\n              <div\n                style={{\n                  fontSize: `${titleFontSize}px`,\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  color: colors.archetypeColor,\n                  textShadow: getNeonTextShadow(\n                    selectedArchetype.color,\n                    \"strong\",\n                  ),\n                  transition: getSmoothTransition(\"all\", \"normal\"),\n                }}\n                data-testid=\"archetype-title\"\n              >\n                {selectedArchetype.korean} | {selectedArchetype.english}\n              </div>\n              <div\n                style={{\n                  fontSize: \"12px\",\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.PRIMARY,\n                  color: colors.archetypeColor,\n                  textShadow: getNeonTextShadow(\n                    selectedArchetype.color,\n                    \"subtle\",\n                  ),\n                }}\n                data-testid=\"archetype-counter\"\n              >\n                {selectedIndex + 1} / {archetypes.length}\n              </div>\n            </div>\n\n            {/* Philosophy */}\n            <div\n              style={{\n                fontSize: `${philosophyFontSize}px`,\n                fontStyle: \"italic\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                lineHeight: \"1.4\",\n                ...getKoreanFontOptimization(philosophyFontSize, \"normal\"),\n                transition: getSmoothTransition(\"all\", \"normal\"),\n              }}\n              data-testid=\"archetype-philosophy\"\n            >\n              {selectedArchetype.philosophy.korean} |{\" \"}\n              {selectedArchetype.philosophy.english}\n            </div>\n\n            {/* Combat Stats */}\n            <div\n              style={{\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: \"8px\",\n              }}\n              data-testid=\"combat-stats\"\n            >\n              <div\n                style={{\n                  fontSize: isSmallScreen ? \"12px\" : \"14px\",\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  color: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                }}\n              >\n                전투 능력치 | Combat Stats\n              </div>\n\n              {/* Individual stat bars using refactored StatBar component */}\n              {combatStats.map((stat) => (\n                <StatBar\n                  key={stat.korean}\n                  label={`${stat.korean} | ${stat.english}`}\n                  value={stat.rawValue}\n                  max={100}\n                  color={selectedArchetype.color}\n                  height={statBarHeight}\n                  showValue={true}\n                  isMobile={isSmallScreen}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  );\n\nArchetypeDisplayOverlayHtml.displayName = \"ArchetypeDisplayOverlayHtml\";\n\nexport default ArchetypeDisplayOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ArchetypeDataShape } from "./ArchetypeDisplayOverlayHtml";
+export interface EnhancedArchetypeDisplayProps {
+    readonly archetypes: readonly ArchetypeDataShape[];
+    readonly selectedIndex: number;
+    readonly onArchetypeChange: (index: number) => void;
+    readonly onPlaySFX: (sound: string) => void;
+    readonly width?: number;
+    readonly height?: number;
+    readonly isMobile?: boolean;
+    readonly allowDetailedView?: boolean;
+}
+/**
+ * EnhancedArchetypeDisplay - Provides both compact and detailed card view modes
+ * Can switch between ArchetypeDisplayOverlayHtml (compact) and ArchetypeCardGrid (detailed)
+ */
+export declare const EnhancedArchetypeDisplay: React.FC<EnhancedArchetypeDisplayProps>;
+export default EnhancedArchetypeDisplay;
+//# sourceMappingURL=EnhancedArchetypeDisplayOverlayHtml.d.ts.map

package/lib/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedArchetypeDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAO,EACL,kBAAkB,EAEnB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA4H1E,CAAC;AAIJ,eAAe,wBAAwB,CAAC"}

package/lib/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.js

@@ -0,0 +1,88 @@
+import { PlayerArchetype } from "../../../../types/common.js";
+import { BaseButtonOverlayHtml } from "../../../shared/base/BaseButtonOverlayHtml.js";
+import ArchetypeDisplayOverlayHtml from "./ArchetypeDisplayOverlayHtml.js";
+import ArchetypeCardGrid from "./ArchetypeCardGridOverlayHtml.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx
+/**
+* EnhancedArchetypeDisplay - Provides both compact and detailed card view modes
+* Can switch between ArchetypeDisplayOverlayHtml (compact) and ArchetypeCardGrid (detailed)
+*/
+var EnhancedArchetypeDisplay = React.memo(({ archetypes, selectedIndex, onArchetypeChange, onPlaySFX, width = 800, height = 300, isMobile = false, allowDetailedView = true }) => {
+	const [viewMode, setViewMode] = useState("compact");
+	const isSmallScreen = width < 768;
+	const cardData = useMemo(() => {
+		return archetypes.map((archetype) => ({
+			archetype: Object.values(PlayerArchetype).find((key) => key === archetype.id),
+			id: archetype.id,
+			korean: archetype.korean,
+			english: archetype.english,
+			description: archetype.description,
+			color: archetype.color,
+			textureKey: archetype.textureKey,
+			stats: archetype.stats,
+			philosophy: archetype.philosophy,
+			specialAbilities: archetype.specialAbilities ?? []
+		}));
+	}, [archetypes]);
+	const currentArchetype = useMemo(() => {
+		const archetype = archetypes[selectedIndex];
+		return Object.values(PlayerArchetype).find((key) => key === archetype.id);
+	}, [archetypes, selectedIndex]);
+	const handleToggleView = useCallback(() => {
+		setViewMode((prev) => prev === "compact" ? "detailed" : "compact");
+		onPlaySFX("menu_hover");
+	}, [onPlaySFX]);
+	const handleArchetypeChangeFromGrid = useCallback((archetype) => {
+		const index = archetypes.findIndex((a) => a.id === archetype);
+		if (index !== -1) onArchetypeChange(index);
+	}, [archetypes, onArchetypeChange]);
+	const detailedHeight = useMemo(() => Math.max(height * 2, 600), [height]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: `${width}px`,
+			display: "flex",
+			flexDirection: "column",
+			gap: isSmallScreen ? "10px" : "16px"
+		},
+		"data-testid": "enhanced-archetype-display",
+		children: [allowDetailedView && !isSmallScreen && /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				justifyContent: "flex-end",
+				width: "100%"
+			},
+			children: /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+				korean: viewMode === "compact" ? "상세 보기" : "간단 보기",
+				english: viewMode === "compact" ? "Detailed View" : "Compact View",
+				onClick: handleToggleView,
+				variant: "secondary",
+				size: "sm",
+				testId: "view-toggle-button",
+				ariaLabel: `Toggle ${viewMode === "compact" ? "detailed" : "compact"} view`
+			})
+		}), viewMode === "compact" ? /* @__PURE__ */ jsx(ArchetypeDisplayOverlayHtml, {
+			archetypes,
+			selectedIndex,
+			onArchetypeChange,
+			onPlaySFX,
+			width,
+			height,
+			isMobile
+		}) : /* @__PURE__ */ jsx(ArchetypeCardGrid, {
+			archetypes: cardData,
+			selectedArchetype: currentArchetype,
+			onArchetypeChange: handleArchetypeChangeFromGrid,
+			onPlaySFX,
+			width,
+			height: detailedHeight,
+			isMobile
+		})]
+	});
+});
+EnhancedArchetypeDisplay.displayName = "EnhancedArchetypeDisplay";
+//#endregion
+export { EnhancedArchetypeDisplay as default };
+
+//# sourceMappingURL=EnhancedArchetypeDisplayOverlayHtml.js.map

package/lib/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedArchetypeDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { ArchetypeCardGrid } from \"./ArchetypeCardGridOverlayHtml\";\nimport {\n  ArchetypeDataShape,\n  ArchetypeDisplayOverlayHtml,\n} from \"./ArchetypeDisplayOverlayHtml\";\n\nexport interface EnhancedArchetypeDisplayProps {\n  readonly archetypes: readonly ArchetypeDataShape[];\n  readonly selectedIndex: number;\n  readonly onArchetypeChange: (index: number) => void;\n  readonly onPlaySFX: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean; // For controls/haptics only, use width for layout sizing\n  readonly allowDetailedView?: boolean; // Allow switching to card grid view\n}\n\n/**\n * EnhancedArchetypeDisplay - Provides both compact and detailed card view modes\n * Can switch between ArchetypeDisplayOverlayHtml (compact) and ArchetypeCardGrid (detailed)\n */\nexport const EnhancedArchetypeDisplay: React.FC<EnhancedArchetypeDisplayProps> =\n  React.memo(\n    ({\n      archetypes,\n      selectedIndex,\n      onArchetypeChange,\n      onPlaySFX,\n      width = 800,\n      height = 300,\n      isMobile = false,\n      allowDetailedView = true,\n    }) => {\n      const [viewMode, setViewMode] = useState<\"compact\" | \"detailed\">(\n        \"compact\",\n      );\n\n      // Use width for layout sizing decisions\n      const isSmallScreen = width < 768;\n\n      // Convert archetype data to card data format\n      const cardData = useMemo(() => {\n        return archetypes.map((archetype) => ({\n          archetype: Object.values(PlayerArchetype).find(\n            (key) => key === archetype.id,\n          ) as PlayerArchetype,\n          id: archetype.id,\n          korean: archetype.korean,\n          english: archetype.english,\n          description: archetype.description,\n          color: archetype.color,\n          textureKey: archetype.textureKey,\n          stats: archetype.stats,\n          philosophy: archetype.philosophy,\n          specialAbilities: archetype.specialAbilities ?? [], // Use actual data or empty array\n        }));\n      }, [archetypes]);\n\n      // Get current archetype\n      const currentArchetype = useMemo(() => {\n        const archetype = archetypes[selectedIndex];\n        return Object.values(PlayerArchetype).find(\n          (key) => key === archetype.id,\n        ) as PlayerArchetype;\n      }, [archetypes, selectedIndex]);\n\n      // Toggle view mode\n      const handleToggleView = useCallback(() => {\n        setViewMode((prev) => (prev === \"compact\" ? \"detailed\" : \"compact\"));\n        onPlaySFX(\"menu_hover\");\n      }, [onPlaySFX]);\n\n      // Handle archetype change from card grid\n      const handleArchetypeChangeFromGrid = useCallback(\n        (archetype: PlayerArchetype) => {\n          const index = archetypes.findIndex((a) => a.id === archetype);\n          if (index !== -1) {\n            onArchetypeChange(index);\n          }\n        },\n        [archetypes, onArchetypeChange],\n      );\n\n      // Memoize height calculation for detailed view (minimum 600px or 2x compact height)\n      const detailedHeight = useMemo(\n        () => Math.max(height * 2, 600),\n        [height],\n      );\n\n      return (\n        <div\n          style={{\n            width: `${width}px`,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: isSmallScreen ? \"10px\" : \"16px\",\n          }}\n          data-testid=\"enhanced-archetype-display\"\n        >\n          {/* View toggle button (only show if allowed and not small screen) */}\n          {allowDetailedView && !isSmallScreen && (\n            <div\n              style={{\n                display: \"flex\",\n                justifyContent: \"flex-end\",\n                width: \"100%\",\n              }}\n            >\n              <BaseButtonOverlayHtml\n                korean={viewMode === \"compact\" ? \"상세 보기\" : \"간단 보기\"}\n                english={viewMode === \"compact\" ? \"Detailed View\" : \"Compact View\"}\n                onClick={handleToggleView}\n                variant=\"secondary\"\n                size=\"sm\"\n                testId=\"view-toggle-button\"\n                ariaLabel={`Toggle ${viewMode === \"compact\" ? \"detailed\" : \"compact\"} view`}\n              />\n            </div>\n          )}\n\n          {/* Render appropriate view */}\n          {viewMode === \"compact\" ? (\n            <ArchetypeDisplayOverlayHtml\n              archetypes={archetypes}\n              selectedIndex={selectedIndex}\n              onArchetypeChange={onArchetypeChange}\n              onPlaySFX={onPlaySFX}\n              width={width}\n              height={height}\n              isMobile={isMobile}\n            />\n          ) : (\n            <ArchetypeCardGrid\n              archetypes={cardData}\n              selectedArchetype={currentArchetype}\n              onArchetypeChange={handleArchetypeChangeFromGrid}\n              onPlaySFX={onPlaySFX}\n              width={width}\n              height={detailedHeight}\n              isMobile={isMobile}\n            />\n          )}\n        </div>\n      );\n    },\n  );\n\nEnhancedArchetypeDisplay.displayName = \"EnhancedArchetypeDisplay\";\n\nexport default EnhancedArchetypeDisplay;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,2BACX,MAAM,MACH,EACC,YACA,eACA,mBACA,WACA,QAAQ,KACR,SAAS,KACT,WAAW,OACX,oBAAoB,WAChB;CACJ,MAAM,CAAC,UAAU,eAAe,SAC9B,UACD;CAGD,MAAM,gBAAgB,QAAQ;CAG9B,MAAM,WAAW,cAAc;AAC7B,SAAO,WAAW,KAAK,eAAe;GACpC,WAAW,OAAO,OAAO,gBAAgB,CAAC,MACvC,QAAQ,QAAQ,UAAU,GAC5B;GACD,IAAI,UAAU;GACd,QAAQ,UAAU;GAClB,SAAS,UAAU;GACnB,aAAa,UAAU;GACvB,OAAO,UAAU;GACjB,YAAY,UAAU;GACtB,OAAO,UAAU;GACjB,YAAY,UAAU;GACtB,kBAAkB,UAAU,oBAAoB,EAAE;GACnD,EAAE;IACF,CAAC,WAAW,CAAC;CAGhB,MAAM,mBAAmB,cAAc;EACrC,MAAM,YAAY,WAAW;AAC7B,SAAO,OAAO,OAAO,gBAAgB,CAAC,MACnC,QAAQ,QAAQ,UAAU,GAC5B;IACA,CAAC,YAAY,cAAc,CAAC;CAG/B,MAAM,mBAAmB,kBAAkB;AACzC,eAAa,SAAU,SAAS,YAAY,aAAa,UAAW;AACpE,YAAU,aAAa;IACtB,CAAC,UAAU,CAAC;CAGf,MAAM,gCAAgC,aACnC,cAA+B;EAC9B,MAAM,QAAQ,WAAW,WAAW,MAAM,EAAE,OAAO,UAAU;AAC7D,MAAI,UAAU,GACZ,mBAAkB,MAAM;IAG5B,CAAC,YAAY,kBAAkB,CAChC;CAGD,MAAM,iBAAiB,cACf,KAAK,IAAI,SAAS,GAAG,IAAI,EAC/B,CAAC,OAAO,CACT;AAED,QACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO,GAAG,MAAM;GAChB,SAAS;GACT,eAAe;GACf,KAAK,gBAAgB,SAAS;GAC/B;EACD,eAAY;YAPd,CAUG,qBAAqB,CAAC,iBACrB,oBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,gBAAgB;IAChB,OAAO;IACR;aAED,oBAAC,uBAAD;IACE,QAAQ,aAAa,YAAY,UAAU;IAC3C,SAAS,aAAa,YAAY,kBAAkB;IACpD,SAAS;IACT,SAAQ;IACR,MAAK;IACL,QAAO;IACP,WAAW,UAAU,aAAa,YAAY,aAAa,UAAU;IACrE,CAAA;GACE,CAAA,EAIP,aAAa,YACZ,oBAAC,6BAAD;GACc;GACG;GACI;GACR;GACJ;GACC;GACE;GACV,CAAA,GAEF,oBAAC,mBAAD;GACE,YAAY;GACZ,mBAAmB;GACnB,mBAAmB;GACR;GACJ;GACP,QAAQ;GACE;GACV,CAAA,CAEA;;EAGX;AAEH,yBAAyB,cAAc"}

package/lib/components/screens/intro/components/MenuButtonsOverlayHtml.d.ts

@@ -0,0 +1,65 @@
+/**
+ * MenuButtons - Reusable menu button grid for IntroScreen
+ *
+ * Provides 2x2 grid (desktop) or column (mobile) layout for menu navigation.
+ * Extracted from MenuSectionOverlayHtml to reduce code duplication.
+ *
+ * @module components/screens/intro
+ * @category Intro UI
+ * @korean 메뉴버튼
+ */
+import React from "react";
+import { GameMode } from "../../../../types/common";
+export interface MenuButtonsProps {
+    /** Array of menu items to display */
+    readonly menuItems: Array<{
+        mode: GameMode;
+        korean: string;
+        english: string;
+    }>;
+    /** Currently selected menu item index */
+    readonly selectedIndex: number;
+    /** Index of currently hovered menu item (null if none) */
+    readonly hoveredIndex: number | null;
+    /** Callback when a menu item is selected */
+    readonly onModeSelect: (mode: GameMode) => void;
+    /** Callback when hover state changes */
+    readonly onHoverChange: (index: number | null) => void;
+    /** Callback to play sound effects */
+    readonly onPlaySFX?: (sound: string) => void;
+    /** Screen width for responsive sizing */
+    readonly width?: number;
+    /** Whether on mobile device (for haptics) */
+    readonly isMobile?: boolean;
+}
+/**
+ * MenuButtons Component
+ *
+ * Displays menu navigation buttons with:
+ * - 2x2 grid layout on larger screens
+ * - Column layout on small screens
+ * - Selected/hovered state visualization
+ * - Korean bilingual text
+ * - Haptic feedback support
+ *
+ * This component delegates to inline button elements with custom styling
+ * since BaseButtonOverlayHtml doesn't support the complex selection state
+ * and color transitions needed for menu navigation.
+ *
+ * Reduces code duplication by 62 lines (MenuSectionOverlayHtml: 372 → 310)
+ *
+ * @example
+ * ```tsx
+ * <MenuButtons
+ *   menuItems={MENU_ITEMS}
+ *   selectedIndex={0}
+ *   hoveredIndex={null}
+ *   onModeSelect={(mode) => handleModeSelect(mode)}
+ *   onHoverChange={(idx) => setHovered(idx)}
+ *   width={800}
+ * />
+ * ```
+ */
+export declare const MenuButtons: React.FC<MenuButtonsProps>;
+export default MenuButtons;
+//# sourceMappingURL=MenuButtonsOverlayHtml.d.ts.map

package/lib/components/screens/intro/components/MenuButtonsOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;QACxB,IAAI,EAAE,QAAQ,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,yCAAyC;IACzC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,0DAA0D;IAC1D,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,wCAAwC;IACxC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,qCAAqC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6JlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/screens/intro/components/MenuButtonsOverlayHtml.js

@@ -0,0 +1,143 @@
+import { GameMode } from "../../../../types/common.js";
+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 { getKoreanFontOptimization } from "../../../../utils/visualEffects.js";
+import { getButtonVisualEffectsOnly } from "../../../../utils/koreanThemeHelpers.js";
+import { UIHaptics } from "../../../../utils/hapticFeedback.js";
+import { getMobileKoreanFontSize } from "../../../../utils/mobileUIUtils.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx
+/**
+* MenuButtons - Reusable menu button grid for IntroScreen
+* 
+* Provides 2x2 grid (desktop) or column (mobile) layout for menu navigation.
+* Extracted from MenuSectionOverlayHtml to reduce code duplication.
+* 
+* @module components/screens/intro
+* @category Intro UI
+* @korean 메뉴버튼
+*/
+/**
+* MenuButtons Component
+* 
+* Displays menu navigation buttons with:
+* - 2x2 grid layout on larger screens
+* - Column layout on small screens
+* - Selected/hovered state visualization
+* - Korean bilingual text
+* - Haptic feedback support
+* 
+* This component delegates to inline button elements with custom styling
+* since BaseButtonOverlayHtml doesn't support the complex selection state
+* and color transitions needed for menu navigation.
+* 
+* Reduces code duplication by 62 lines (MenuSectionOverlayHtml: 372 → 310)
+* 
+* @example
+* ```tsx
+* <MenuButtons
+*   menuItems={MENU_ITEMS}
+*   selectedIndex={0}
+*   hoveredIndex={null}
+*   onModeSelect={(mode) => handleModeSelect(mode)}
+*   onHoverChange={(idx) => setHovered(idx)}
+*   width={800}
+* />
+* ```
+*/
+var MenuButtons = ({ menuItems, selectedIndex, hoveredIndex, onModeSelect, onHoverChange, onPlaySFX, width = 800, isMobile: _isMobile = false }) => {
+	const isSmallScreen = width < 768;
+	const useGridLayout = !isSmallScreen;
+	const buttonHeight = isSmallScreen ? 44 : 40;
+	const buttonFontSize = isSmallScreen ? getMobileKoreanFontSize("SMALL", width ?? 375) : 13;
+	const buttonGap = isSmallScreen ? 6 : 8;
+	const colors = useMemo(() => ({
+		buttonSelectedBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .98),
+		buttonHoveredBg: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_LIGHT, .92),
+		buttonDefaultBg: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .92),
+		buttonSelectedBorder: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),
+		buttonHoveredBorder: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .8),
+		buttonDefaultBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .7)
+	}), []);
+	const handleButtonClick = useCallback((mode) => {
+		UIHaptics.buttonTap();
+		onModeSelect(mode);
+		onPlaySFX?.("menu_select");
+	}, [onModeSelect, onPlaySFX]);
+	const handleButtonHover = useCallback((index, isHovering) => {
+		onHoverChange(isHovering ? index : null);
+		if (isHovering) {
+			UIHaptics.menuHover();
+			onPlaySFX?.("menu_hover");
+		}
+	}, [onHoverChange, onPlaySFX]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			gridTemplateColumns: useGridLayout ? "1fr 1fr" : "1fr",
+			gap: `${buttonGap}px`,
+			width: "100%"
+		},
+		"data-testid": "main-menu-buttons",
+		children: menuItems.map((item, index) => {
+			const isSelected = selectedIndex === index;
+			const isHovered = hoveredIndex === index;
+			const visualEffects = getButtonVisualEffectsOnly({
+				variant: "primary",
+				isHovered,
+				isPressed: false,
+				isFocused: false,
+				glowIntensity: isSelected ? "medium" : isHovered ? "medium" : "subtle",
+				hoverAnimation: "combined"
+			});
+			return /* @__PURE__ */ jsxs("button", {
+				onClick: () => handleButtonClick(item.mode),
+				onMouseEnter: () => handleButtonHover(index, true),
+				onMouseLeave: () => handleButtonHover(index, false),
+				onFocus: (e) => {
+					e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;
+					e.currentTarget.style.outlineOffset = "2px";
+				},
+				onBlur: (e) => {
+					e.currentTarget.style.outline = "none";
+				},
+				"aria-label": `${item.korean} (${item.english})`,
+				"aria-selected": isSelected,
+				role: "menuitem",
+				style: {
+					...visualEffects,
+					...getKoreanFontOptimization(buttonFontSize, isSelected ? "bold" : "normal"),
+					fontFamily: FONT_FAMILY.KOREAN,
+					width: "100%",
+					height: `${buttonHeight}px`,
+					color: isSelected ? `#${KOREAN_COLORS.UI_BACKGROUND_DARK.toString(16).padStart(6, "0")}` : isHovered ? `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, "0")}` : `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(6, "0")}`,
+					background: isSelected ? colors.buttonSelectedBg : isHovered ? colors.buttonHoveredBg : colors.buttonDefaultBg,
+					border: isSelected ? `3px solid ${colors.buttonSelectedBorder}` : isHovered ? `2px solid ${colors.buttonHoveredBorder}` : `2px solid ${colors.buttonDefaultBorder}`,
+					cursor: "pointer"
+				},
+				"data-testid": `menu-item-${item.mode}`,
+				children: [
+					item.mode === GameMode.TRAINING && /* @__PURE__ */ jsx("span", {
+						"data-testid": "training-button",
+						style: { display: "none" }
+					}),
+					item.mode === GameMode.VERSUS && /* @__PURE__ */ jsx("span", {
+						"data-testid": "combat-button",
+						style: { display: "none" }
+					}),
+					item.korean,
+					" (",
+					item.english,
+					")"
+				]
+			}, item.mode);
+		})
+	});
+};
+//#endregion
+export { MenuButtons as default };
+
+//# sourceMappingURL=MenuButtonsOverlayHtml.js.map

package/lib/components/screens/intro/components/MenuButtonsOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButtonsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx"],"sourcesContent":["/**\n * MenuButtons - Reusable menu button grid for IntroScreen\n * \n * Provides 2x2 grid (desktop) or column (mobile) layout for menu navigation.\n * Extracted from MenuSectionOverlayHtml to reduce code duplication.\n * \n * @module components/screens/intro\n * @category Intro UI\n * @korean 메뉴버튼\n */\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { GameMode } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { UIHaptics } from \"../../../../utils/hapticFeedback\";\nimport {\n  getButtonVisualEffectsOnly,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport {\n  getKoreanFontOptimization,\n} from \"../../../../utils/visualEffects\";\n\nexport interface MenuButtonsProps {\n  /** Array of menu items to display */\n  readonly menuItems: Array<{\n    mode: GameMode;\n    korean: string;\n    english: string;\n  }>;\n  /** Currently selected menu item index */\n  readonly selectedIndex: number;\n  /** Index of currently hovered menu item (null if none) */\n  readonly hoveredIndex: number | null;\n  /** Callback when a menu item is selected */\n  readonly onModeSelect: (mode: GameMode) => void;\n  /** Callback when hover state changes */\n  readonly onHoverChange: (index: number | null) => void;\n  /** Callback to play sound effects */\n  readonly onPlaySFX?: (sound: string) => void;\n  /** Screen width for responsive sizing */\n  readonly width?: number;\n  /** Whether on mobile device (for haptics) */\n  readonly isMobile?: boolean;\n}\n\n/**\n * MenuButtons Component\n * \n * Displays menu navigation buttons with:\n * - 2x2 grid layout on larger screens\n * - Column layout on small screens\n * - Selected/hovered state visualization\n * - Korean bilingual text\n * - Haptic feedback support\n * \n * This component delegates to inline button elements with custom styling\n * since BaseButtonOverlayHtml doesn't support the complex selection state\n * and color transitions needed for menu navigation.\n * \n * Reduces code duplication by 62 lines (MenuSectionOverlayHtml: 372 → 310)\n * \n * @example\n * ```tsx\n * <MenuButtons\n *   menuItems={MENU_ITEMS}\n *   selectedIndex={0}\n *   hoveredIndex={null}\n *   onModeSelect={(mode) => handleModeSelect(mode)}\n *   onHoverChange={(idx) => setHovered(idx)}\n *   width={800}\n * />\n * ```\n */\nexport const MenuButtons: React.FC<MenuButtonsProps> = ({\n  menuItems,\n  selectedIndex,\n  hoveredIndex,\n  onModeSelect,\n  onHoverChange,\n  onPlaySFX,\n  width = 800,\n  isMobile: _isMobile = false, // Prefix with _ to indicate intentionally unused\n}) => {\n  // Responsive sizing based on screen width\n  const isSmallScreen = width < 768;\n  const useGridLayout = !isSmallScreen;\n  const buttonHeight = isSmallScreen ? 44 : 40;\n  const buttonFontSize = isSmallScreen\n    ? getMobileKoreanFontSize(\"SMALL\", width ?? 375)\n    : 13;\n  const buttonGap = isSmallScreen ? 6 : 8;\n\n  // Memoize button state colors\n  const colors = useMemo(\n    () => ({\n      buttonSelectedBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.98),\n      buttonHoveredBg: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_LIGHT, 0.92),\n      buttonDefaultBg: hexToRgbaString(\n        KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n        0.92,\n      ),\n      buttonSelectedBorder: hexToRgbaString(\n        KOREAN_COLORS.UI_BACKGROUND_DARK,\n        1.0,\n      ),\n      buttonHoveredBorder: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.8),\n      buttonDefaultBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7),\n    }),\n    [],\n  );\n\n  const handleButtonClick = useCallback(\n    (mode: GameMode) => {\n      UIHaptics.buttonTap();\n      onModeSelect(mode);\n      onPlaySFX?.(\"menu_select\");\n    },\n    [onModeSelect, onPlaySFX],\n  );\n\n  const handleButtonHover = useCallback(\n    (index: number, isHovering: boolean) => {\n      const newIndex = isHovering ? index : null;\n      onHoverChange(newIndex);\n      if (isHovering) {\n        UIHaptics.menuHover();\n        onPlaySFX?.(\"menu_hover\");\n      }\n    },\n    [onHoverChange, onPlaySFX],\n  );\n\n  return (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: useGridLayout ? \"1fr 1fr\" : \"1fr\",\n        gap: `${buttonGap}px`,\n        width: \"100%\",\n      }}\n      data-testid=\"main-menu-buttons\"\n    >\n      {menuItems.map((item, index) => {\n        const isSelected = selectedIndex === index;\n        const isHovered = hoveredIndex === index;\n\n        // Get only visual effects (glow, transitions, transforms)\n        const visualEffects = getButtonVisualEffectsOnly({\n          variant: \"primary\",\n          isHovered,\n          isPressed: false,\n          isFocused: false,\n          glowIntensity: isSelected\n            ? \"medium\"\n            : isHovered\n              ? \"medium\"\n              : \"subtle\",\n          hoverAnimation: \"combined\",\n        });\n\n        return (\n          <button\n            key={item.mode}\n            onClick={() => handleButtonClick(item.mode)}\n            onMouseEnter={() => handleButtonHover(index, true)}\n            onMouseLeave={() => handleButtonHover(index, false)}\n            onFocus={(e) => {\n              e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n              e.currentTarget.style.outlineOffset = \"2px\";\n            }}\n            onBlur={(e) => {\n              e.currentTarget.style.outline = \"none\";\n            }}\n            aria-label={`${item.korean} (${item.english})`}\n            aria-selected={isSelected}\n            role=\"menuitem\"\n            style={{\n              ...visualEffects,\n              ...getKoreanFontOptimization(\n                buttonFontSize,\n                isSelected ? \"bold\" : \"normal\",\n              ),\n              fontFamily: FONT_FAMILY.KOREAN,\n              width: \"100%\",\n              height: `${buttonHeight}px`,\n              // Menu-specific color, background, and border\n              color: isSelected\n                ? `#${KOREAN_COLORS.UI_BACKGROUND_DARK.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`\n                : isHovered\n                  ? `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n                      6,\n                      \"0\",\n                    )}`\n                  : `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                      6,\n                      \"0\",\n                    )}`,\n              background: isSelected\n                ? colors.buttonSelectedBg\n                : isHovered\n                  ? colors.buttonHoveredBg\n                  : colors.buttonDefaultBg,\n              border: isSelected\n                ? `3px solid ${colors.buttonSelectedBorder}`\n                : isHovered\n                  ? `2px solid ${colors.buttonHoveredBorder}`\n                  : `2px solid ${colors.buttonDefaultBorder}`,\n              cursor: \"pointer\",\n            }}\n            data-testid={`menu-item-${item.mode}`}\n          >\n            {/* Add test ID aliases for backward compatibility */}\n            {item.mode === GameMode.TRAINING && (\n              <span\n                data-testid=\"training-button\"\n                style={{ display: \"none\" }}\n              />\n            )}\n            {item.mode === GameMode.VERSUS && (\n              <span data-testid=\"combat-button\" style={{ display: \"none\" }} />\n            )}\n            {item.korean} ({item.english})\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MenuButtons;\n"],"mappings":"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"}

package/lib/components/screens/intro/components/MenuSectionOverlayHtml.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { GameMode } from "../../../../types/common";
+export interface MenuSectionOverlayHtmlProps {
+    readonly menuItems: Array<{
+        mode: GameMode;
+        korean: string;
+        english: string;
+    }>;
+    readonly selectedIndex: number;
+    readonly onModeSelect: (mode: GameMode) => void;
+    readonly onSelectedIndexChange?: (index: number) => void;
+    readonly onPlaySFX?: (sound: string) => void;
+    readonly width?: number;
+    readonly height?: number;
+    readonly isMobile?: boolean;
+}
+/**
+ * HTML-based MenuSection component for Three.js integration
+ *
+ * Optimized with React.memo for 60fps performance:
+ * - Memoized to prevent unnecessary re-renders
+ * - All callbacks use useCallback
+ * - Styles pre-calculated and memoized
+ */
+export declare const MenuSectionOverlayHtml: React.NamedExoticComponent<MenuSectionOverlayHtmlProps>;
+export default MenuSectionOverlayHtml;
+//# sourceMappingURL=MenuSectionOverlayHtml.d.ts.map

package/lib/components/screens/intro/components/MenuSectionOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSectionOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/MenuSectionOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;QACxB,IAAI,EAAE,QAAQ,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yDAqMlC,CAAC;AAIF,eAAe,sBAAsB,CAAC"}

package/lib/components/screens/intro/components/MenuSectionOverlayHtml.js

@@ -0,0 +1,153 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { getNeonTextShadow } from "../../../../utils/visualEffects.js";
+import { getEnhancedKoreanOverlayStyles } from "../../../../utils/koreanThemeHelpers.js";
+import { getMobileKoreanFontSize } from "../../../../utils/mobileUIUtils.js";
+import { getSafeAreaPadding } from "../../../../utils/safeAreaUtils.js";
+import MenuButtons from "./MenuButtonsOverlayHtml.js";
+import React, { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/intro/components/MenuSectionOverlayHtml.tsx
+/**
+* HTML-based MenuSection component for Three.js integration
+*
+* Optimized with React.memo for 60fps performance:
+* - Memoized to prevent unnecessary re-renders
+* - All callbacks use useCallback
+* - Styles pre-calculated and memoized
+*/
+var MenuSectionOverlayHtml = React.memo(({ menuItems, selectedIndex, onModeSelect, onSelectedIndexChange, onPlaySFX, width = 800, height = 300, isMobile = false }) => {
+	const [hoveredItem, setHoveredItem] = useState(null);
+	const [focused, setFocused] = useState(false);
+	const enhancedOverlayStyles = useMemo(() => getEnhancedKoreanOverlayStyles({
+		opacity: .96,
+		glowIntensity: focused ? "medium" : "subtle",
+		includeGradient: false,
+		includeBackdropBlur: false,
+		depthLayers: 2
+	}), [focused]);
+	const titleColor = useMemo(() => `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, "0")}`, []);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (!onSelectedIndexChange) return;
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				onSelectedIndexChange(selectedIndex === 0 ? menuItems.length - 1 : selectedIndex - 1);
+				onPlaySFX?.("menu_hover");
+			} else if (event.key === "ArrowDown") {
+				event.preventDefault();
+				event.stopPropagation();
+				onSelectedIndexChange(selectedIndex === menuItems.length - 1 ? 0 : selectedIndex + 1);
+				onPlaySFX?.("menu_hover");
+			} else if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				event.stopPropagation();
+				onPlaySFX?.("menu_select");
+				onModeSelect(menuItems[selectedIndex].mode);
+			} else {
+				const numKey = parseInt(event.key);
+				if (numKey >= 1 && numKey <= menuItems.length) {
+					event.stopPropagation();
+					const targetIndex = numKey - 1;
+					onSelectedIndexChange(targetIndex);
+					onPlaySFX?.("menu_select");
+					onModeSelect(menuItems[targetIndex].mode);
+				}
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		selectedIndex,
+		menuItems,
+		onSelectedIndexChange,
+		onModeSelect,
+		onPlaySFX
+	]);
+	useEffect(() => {
+		const handleFocus = () => setFocused(true);
+		const handleBlur = () => setFocused(false);
+		window.addEventListener("focusin", handleFocus);
+		window.addEventListener("focusout", handleBlur);
+		return () => {
+			window.removeEventListener("focusin", handleFocus);
+			window.removeEventListener("focusout", handleBlur);
+		};
+	}, []);
+	const isSmallScreen = width < 768;
+	const containerPadding = isSmallScreen ? 16 : 12;
+	const titleFontSize = isSmallScreen ? getMobileKoreanFontSize("SMALL", width ?? 375) : 14;
+	const sectionGap = isSmallScreen ? 8 : 6;
+	const safeAreaStyles = useMemo(() => isMobile ? getSafeAreaPadding(["top", "bottom"], containerPadding) : {}, [isMobile, containerPadding]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			...enhancedOverlayStyles,
+			...safeAreaStyles,
+			width: `${width}px`,
+			minHeight: `${height}px`,
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: `${sectionGap}px`,
+			padding: `${containerPadding}px`,
+			position: "relative",
+			overflow: "visible"
+		},
+		"data-testid": "main-menu-section",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: `${titleFontSize}px`,
+					color: titleColor,
+					fontWeight: "bold",
+					fontFamily: FONT_FAMILY.KOREAN,
+					textAlign: "center",
+					textShadow: getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, "medium")
+				},
+				"data-testid": "menu-title",
+				children: "메인 메뉴 | Main Menu"
+			}),
+			/* @__PURE__ */ jsx(MenuButtons, {
+				menuItems,
+				selectedIndex,
+				hoveredIndex: hoveredItem,
+				onModeSelect,
+				onHoverChange: setHoveredItem,
+				onPlaySFX,
+				width,
+				isMobile
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: isSmallScreen ? "4px" : "6px",
+					textAlign: "center",
+					fontSize: isSmallScreen ? "10px" : "12px",
+					color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
+					fontFamily: FONT_FAMILY.KOREAN,
+					marginTop: "auto"
+				},
+				"data-testid": "navigation-hint-container",
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-testid": "menu-navigation-hint-korean",
+					children: "방향키/마우스로 이동 • Enter/클릭으로 선택 • 숫자키로 바로가기"
+				}), /* @__PURE__ */ jsx("div", {
+					style: { fontSize: isSmallScreen ? "9px" : "10px" },
+					"data-testid": "menu-navigation-hint-english",
+					children: "Arrow keys/mouse to navigate • Enter/click to select • Number keys for shortcuts"
+				})]
+			})
+		]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.selectedIndex === nextProps.selectedIndex && prevProps.width === nextProps.width && prevProps.height === nextProps.height && prevProps.isMobile === nextProps.isMobile && prevProps.menuItems.length === nextProps.menuItems.length && prevProps.onModeSelect === nextProps.onModeSelect && prevProps.onSelectedIndexChange === nextProps.onSelectedIndexChange && prevProps.onPlaySFX === nextProps.onPlaySFX;
+});
+MenuSectionOverlayHtml.displayName = "MenuSectionOverlayHtml";
+//#endregion
+export { MenuSectionOverlayHtml as default };
+
+//# sourceMappingURL=MenuSectionOverlayHtml.js.map

package/lib/components/screens/intro/components/MenuSectionOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSectionOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/MenuSectionOverlayHtml.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { GameMode } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport {\n  getEnhancedKoreanOverlayStyles,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport { getSafeAreaPadding } from \"../../../../utils/safeAreaUtils\";\nimport {\n  getNeonTextShadow,\n} from \"../../../../utils/visualEffects\";\nimport { MenuButtons } from \"./MenuButtonsOverlayHtml\";\n\nexport interface MenuSectionOverlayHtmlProps {\n  readonly menuItems: Array<{\n    mode: GameMode;\n    korean: string;\n    english: string;\n  }>;\n  readonly selectedIndex: number;\n  readonly onModeSelect: (mode: GameMode) => void;\n  readonly onSelectedIndexChange?: (index: number) => void;\n  readonly onPlaySFX?: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean; // For controls/haptics only, use width for layout sizing\n}\n\n/**\n * HTML-based MenuSection component for Three.js integration\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized to prevent unnecessary re-renders\n * - All callbacks use useCallback\n * - Styles pre-calculated and memoized\n */\nexport const MenuSectionOverlayHtml = React.memo<MenuSectionOverlayHtmlProps>(\n  ({\n    menuItems,\n    selectedIndex,\n    onModeSelect,\n    onSelectedIndexChange,\n    onPlaySFX,\n    width = 800,\n    height = 300,\n    isMobile = false, // Default to false, parent should pass proper device detection\n  }) => {\n  const [hoveredItem, setHoveredItem] = useState<number | null>(null);\n  const [focused, setFocused] = useState<boolean>(false);\n\n  // Enhanced overlay styles with neon glow and depth\n  const enhancedOverlayStyles = useMemo(\n    () =>\n      getEnhancedKoreanOverlayStyles({\n        opacity: 0.96,\n        glowIntensity: focused ? \"medium\" : \"subtle\",\n        includeGradient: false,\n        includeBackdropBlur: false,\n        depthLayers: 2,\n      }),\n    [focused],\n  );\n\n  // Memoize title color\n  const titleColor = useMemo(\n    () => `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n    [],\n  );\n\n  // Keyboard navigation - stops propagation to prevent conflicts with parent\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (!onSelectedIndexChange) return;\n\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextIndex =\n          selectedIndex === 0 ? menuItems.length - 1 : selectedIndex - 1;\n        onSelectedIndexChange(nextIndex);\n        onPlaySFX?.(\"menu_hover\");\n      } else if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextIndex =\n          selectedIndex === menuItems.length - 1 ? 0 : selectedIndex + 1;\n        onSelectedIndexChange(nextIndex);\n        onPlaySFX?.(\"menu_hover\");\n      } else if (event.key === \" \" || event.key === \"Enter\") {\n        event.preventDefault();\n        event.stopPropagation();\n        onPlaySFX?.(\"menu_select\");\n        onModeSelect(menuItems[selectedIndex].mode);\n      } else {\n        const numKey = parseInt(event.key);\n        if (numKey >= 1 && numKey <= menuItems.length) {\n          event.stopPropagation();\n          const targetIndex = numKey - 1;\n          onSelectedIndexChange(targetIndex);\n          onPlaySFX?.(\"menu_select\");\n          onModeSelect(menuItems[targetIndex].mode);\n        }\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [\n    selectedIndex,\n    menuItems,\n    onSelectedIndexChange,\n    onModeSelect,\n    onPlaySFX,\n  ]);\n\n  // Focus ring for accessibility\n  useEffect(() => {\n    const handleFocus = () => setFocused(true);\n    const handleBlur = () => setFocused(false);\n    window.addEventListener(\"focusin\", handleFocus);\n    window.addEventListener(\"focusout\", handleBlur);\n    return () => {\n      window.removeEventListener(\"focusin\", handleFocus);\n      window.removeEventListener(\"focusout\", handleBlur);\n    };\n  }, []);\n\n  // Use device detection from prop, with width-based fallback for sizing adjustments\n  const isSmallScreen = width < 768; // Mobile-sized screens\n\n  const containerPadding = isSmallScreen ? 16 : 12;\n  const titleFontSize = isSmallScreen\n    ? getMobileKoreanFontSize(\"SMALL\", width ?? 375)\n    : 14;\n  const sectionGap = isSmallScreen ? 8 : 6;\n\n  // Safe area support for notched devices (use isMobile for actual device detection)\n  const safeAreaStyles = useMemo(\n    () =>\n      isMobile ? getSafeAreaPadding([\"top\", \"bottom\"], containerPadding) : {},\n    [isMobile, containerPadding],\n  );\n\n  return (\n    <div\n      style={{\n        ...enhancedOverlayStyles,\n        ...safeAreaStyles,\n        width: `${width}px`,\n        minHeight: `${height}px`,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: `${sectionGap}px`,\n        padding: `${containerPadding}px`,\n        position: \"relative\",\n        overflow: \"visible\",\n      }}\n      data-testid=\"main-menu-section\"\n    >\n      {/* Menu Title */}\n      <div\n        style={{\n          fontSize: `${titleFontSize}px`,\n          color: titleColor,\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          textAlign: \"center\",\n          textShadow: getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, \"medium\"),\n        }}\n        data-testid=\"menu-title\"\n      >\n        메인 메뉴 | Main Menu\n      </div>\n\n      {/* Menu Buttons - Extracted to MenuButtons component */}\n      <MenuButtons\n        menuItems={menuItems}\n        selectedIndex={selectedIndex}\n        hoveredIndex={hoveredItem}\n        onModeSelect={onModeSelect}\n        onHoverChange={setHoveredItem}\n        onPlaySFX={onPlaySFX}\n        width={width}\n        isMobile={isMobile}\n      />\n\n      {/* Navigation Instructions */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isSmallScreen ? \"4px\" : \"6px\",\n          textAlign: \"center\",\n          fontSize: isSmallScreen ? \"10px\" : \"12px\",\n          color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(\n            6,\n            \"0\",\n          )}`,\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginTop: \"auto\",\n        }}\n        data-testid=\"navigation-hint-container\"\n      >\n        <div data-testid=\"menu-navigation-hint-korean\">\n          방향키/마우스로 이동 • Enter/클릭으로 선택 • 숫자키로 바로가기\n        </div>\n        <div\n          style={{ fontSize: isSmallScreen ? \"9px\" : \"10px\" }}\n          data-testid=\"menu-navigation-hint-english\"\n        >\n          Arrow keys/mouse to navigate • Enter/click to select • Number keys for\n          shortcuts\n        </div>\n      </div>\n    </div>\n  );\n  },\n  (prevProps, nextProps) => {\n    // Custom comparison for optimal re-render prevention\n    // Including callback props prevents stale closures when parent provides\n    // new functions that capture updated state.\n    return (\n      prevProps.selectedIndex === nextProps.selectedIndex &&\n      prevProps.width === nextProps.width &&\n      prevProps.height === nextProps.height &&\n      prevProps.isMobile === nextProps.isMobile &&\n      prevProps.menuItems.length === nextProps.menuItems.length &&\n      prevProps.onModeSelect === nextProps.onModeSelect &&\n      prevProps.onSelectedIndexChange === nextProps.onSelectedIndexChange &&\n      prevProps.onPlaySFX === nextProps.onPlaySFX\n    );\n  },\n);\n\nMenuSectionOverlayHtml.displayName = \"MenuSectionOverlayHtml\";\n\nexport default MenuSectionOverlayHtml;\n"],"mappings":"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"}