blacktrigram 0.7.2

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

@@ -0,0 +1,235 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { FALLBACK_ARCHETYPE_IMAGE } from "../../../../types/constants/index.js";
+import { hexColorToCSS, hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { BaseButtonOverlayHtml } from "../../../shared/base/BaseButtonOverlayHtml.js";
+import StatBar from "./StatBarOverlayHtml.js";
+import AbilityList from "./AbilityListOverlayHtml.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/intro/components/ArchetypeCardOverlayHtml.tsx
+/**
+* ArchetypeCard component - Displays detailed archetype preview card
+* Shows stats, abilities, philosophy, and selection interface
+*/
+var ArchetypeCard = React.memo(({ data, isSelected, onSelect, onConfirm, isMobile = false, width = 380, showSelectButton = true }) => {
+	const { archetype, korean, english, color, textureKey, stats, philosophy, specialAbilities = [] } = data;
+	const cardWidth = isMobile ? Math.min(280, width) : width;
+	const imageSize = isMobile ? 120 : 160;
+	const padding = isMobile ? 16 : 24;
+	const gap = isMobile ? 10 : 16;
+	const colors = useMemo(() => ({
+		background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .95),
+		border: hexToRgbaString(isSelected ? KOREAN_COLORS.ACCENT_GOLD : color, isSelected ? 1 : .7),
+		cardColor: hexColorToCSS(color),
+		titleColor: isSelected ? hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD) : hexColorToCSS(color),
+		philosophyColor: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),
+		buttonBackground: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .9),
+		buttonText: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK),
+		imageGlow: hexToRgbaString(color, .3)
+	}), [color, isSelected]);
+	const handleCardClick = useCallback(() => {
+		if (!isSelected) onSelect();
+	}, [isSelected, onSelect]);
+	const handleConfirmClick = useCallback(() => {
+		onConfirm?.();
+	}, [onConfirm]);
+	const imagePath = `/assets/visual/archetypes/${textureKey}.png`;
+	const statBars = useMemo(() => [
+		{
+			label: "공격 | Attack",
+			value: stats.attackPower
+		},
+		{
+			label: "방어 | Defense",
+			value: stats.defense
+		},
+		{
+			label: "속도 | Speed",
+			value: stats.speed
+		},
+		{
+			label: "기술 | Technique",
+			value: stats.technique
+		}
+	], [stats]);
+	return /* @__PURE__ */ jsxs("div", {
+		onClick: handleCardClick,
+		onKeyDown: (e) => {
+			if ((e.key === "Enter" || e.key === " ") && !isSelected) {
+				e.preventDefault();
+				onSelect();
+			}
+		},
+		tabIndex: 0,
+		role: "button",
+		"aria-label": `${korean} ${english} archetype card`,
+		"aria-pressed": isSelected,
+		style: {
+			width: `${cardWidth}px`,
+			padding: `${padding}px`,
+			backgroundColor: colors.background,
+			border: `${isSelected ? "3px" : "2px"} solid ${colors.border}`,
+			borderRadius: "12px",
+			cursor: isSelected ? "default" : "pointer",
+			transition: "all 0.3s ease",
+			transform: isSelected ? "scale(1.05)" : "scale(1)",
+			boxShadow: isSelected ? `0 0 20px ${colors.imageGlow}, 0 4px 8px rgba(0, 0, 0, 0.3)` : "0 2px 4px rgba(0, 0, 0, 0.2)",
+			display: "flex",
+			flexDirection: "column",
+			gap: `${gap}px`,
+			position: "relative",
+			overflow: "hidden"
+		},
+		"data-testid": `archetype-card-${archetype}`,
+		children: [
+			isSelected && /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					top: 10,
+					right: 10,
+					padding: "4px 8px",
+					background: colors.buttonBackground,
+					color: colors.buttonText,
+					fontSize: isMobile ? "10px" : "12px",
+					fontWeight: "bold",
+					fontFamily: FONT_FAMILY.KOREAN,
+					borderRadius: "4px",
+					zIndex: 10
+				},
+				"data-testid": "selected-badge",
+				children: "선택됨 | Selected"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					width: "100%",
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					marginBottom: `${gap / 2}px`
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						width: `${imageSize}px`,
+						height: `${imageSize}px`,
+						background: `radial-gradient(circle, ${colors.imageGlow}, transparent)`,
+						borderRadius: "8px",
+						border: `2px solid ${colors.cardColor}`,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+						overflow: "hidden"
+					},
+					"data-testid": "archetype-image-container",
+					children: /* @__PURE__ */ jsx("img", {
+						src: imagePath,
+						alt: `${korean} - ${english}`,
+						style: {
+							width: `${imageSize - 10}px`,
+							height: `${imageSize - 10}px`,
+							objectFit: "contain"
+						},
+						"data-testid": "archetype-image",
+						onError: (e) => {
+							const target = e.currentTarget;
+							if (!target.src.endsWith("/assets/visual/logo/black-trigram-256.png")) target.src = FALLBACK_ARCHETYPE_IMAGE;
+						}
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("h2", {
+				style: {
+					fontSize: isMobile ? "20px" : "28px",
+					color: colors.titleColor,
+					fontFamily: FONT_FAMILY.KOREAN,
+					fontWeight: "bold",
+					margin: 0,
+					textAlign: "center",
+					textShadow: `0 0 10px ${colors.imageGlow}`
+				},
+				"data-testid": "archetype-name",
+				children: [
+					korean,
+					/* @__PURE__ */ jsx("br", {}),
+					/* @__PURE__ */ jsx("span", {
+						style: { fontSize: isMobile ? "16px" : "22px" },
+						children: english
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: {
+					fontSize: isMobile ? "12px" : "14px",
+					color: colors.philosophyColor,
+					fontFamily: FONT_FAMILY.KOREAN,
+					margin: 0,
+					lineHeight: "1.5",
+					textAlign: "center",
+					fontStyle: "italic"
+				},
+				"data-testid": "archetype-philosophy",
+				children: [
+					philosophy.korean,
+					/* @__PURE__ */ jsx("br", {}),
+					philosophy.english
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					width: "100%",
+					display: "flex",
+					flexDirection: "column",
+					gap: "8px",
+					marginTop: `${gap / 2}px`
+				},
+				"data-testid": "archetype-stats",
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? "14px" : "16px",
+						fontWeight: "bold",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: colors.cardColor
+					},
+					children: "전투 능력치 | Combat Stats"
+				}), statBars.map((stat) => /* @__PURE__ */ jsx(StatBar, {
+					label: stat.label,
+					value: stat.value,
+					max: 100,
+					color,
+					height: isMobile ? 10 : 12,
+					showValue: true,
+					isMobile
+				}, stat.label))]
+			}),
+			specialAbilities.length > 0 && /* @__PURE__ */ jsx("div", {
+				style: { marginTop: `${gap / 2}px` },
+				children: /* @__PURE__ */ jsx(AbilityList, {
+					abilities: specialAbilities,
+					maxAbilities: 3,
+					color,
+					isMobile
+				})
+			}),
+			isSelected && showSelectButton && onConfirm && /* @__PURE__ */ jsx("div", {
+				style: { marginTop: `${gap}px` },
+				onClick: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+					korean: "선택",
+					english: "Select",
+					onClick: handleConfirmClick,
+					variant: "primary",
+					size: isMobile ? "sm" : "md",
+					fullWidth: true,
+					testId: `select-button-${archetype}`,
+					isMobile,
+					ariaLabel: `Select ${korean} ${english} archetype`
+				})
+			})
+		]
+	});
+});
+ArchetypeCard.displayName = "ArchetypeCard";
+//#endregion
+export { ArchetypeCard as default };
+
+//# sourceMappingURL=ArchetypeCardOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchetypeCardOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/ArchetypeCardOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { FALLBACK_ARCHETYPE_IMAGE, FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../../utils/colorUtils\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { AbilityList } from \"./AbilityListOverlayHtml\";\nimport { StatBar } from \"./StatBarOverlayHtml\";\n\nexport interface ArchetypeCardData {\n  readonly archetype: PlayerArchetype;\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[];\n}\n\nexport interface ArchetypeCardProps {\n  readonly data: ArchetypeCardData;\n  readonly isSelected: boolean;\n  readonly onSelect: () => void;\n  readonly onConfirm?: () => void;\n  readonly isMobile?: boolean;\n  readonly width?: number;\n  readonly showSelectButton?: boolean;\n}\n\n/**\n * ArchetypeCard component - Displays detailed archetype preview card\n * Shows stats, abilities, philosophy, and selection interface\n */\nexport const ArchetypeCard: React.FC<ArchetypeCardProps> = React.memo(\n  ({\n    data,\n    isSelected,\n    onSelect,\n    onConfirm,\n    isMobile = false,\n    width = 380,\n    showSelectButton = true,\n  }) => {\n    const {\n      archetype,\n      korean,\n      english,\n      color,\n      textureKey,\n      stats,\n      philosophy,\n      specialAbilities = [],\n    } = data;\n\n    // Calculate responsive dimensions\n    const cardWidth = isMobile ? Math.min(280, width) : width;\n    const imageSize = isMobile ? 120 : 160;\n    const padding = isMobile ? 16 : 24;\n    const gap = isMobile ? 10 : 16;\n\n    // Memoize color calculations\n    const colors = useMemo(\n      () => ({\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n        border: hexToRgbaString(\n          isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,\n          isSelected ? 1 : 0.7\n        ),\n        cardColor: hexColorToCSS(color),\n        titleColor: isSelected\n          ? hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)\n          : hexColorToCSS(color),\n        philosophyColor: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n        buttonBackground: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9),\n        buttonText: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK),\n        imageGlow: hexToRgbaString(color, 0.3),\n      }),\n      [color, isSelected]\n    );\n\n    // Handle card click\n    const handleCardClick = useCallback(() => {\n      if (!isSelected) {\n        onSelect();\n      }\n    }, [isSelected, onSelect]);\n\n    // Handle confirm button click\n    const handleConfirmClick = useCallback(() => {\n      onConfirm?.();\n    }, [onConfirm]);\n\n    // Get archetype image path\n    const imagePath = `/assets/visual/archetypes/${textureKey}.png`;\n\n    // Transform stats to StatBar format\n    const statBars = useMemo(\n      () => [\n        {\n          label: \"공격 | Attack\",\n          value: stats.attackPower,\n        },\n        {\n          label: \"방어 | Defense\",\n          value: stats.defense,\n        },\n        {\n          label: \"속도 | Speed\",\n          value: stats.speed,\n        },\n        {\n          label: \"기술 | Technique\",\n          value: stats.technique,\n        },\n      ],\n      [stats]\n    );\n\n    return (\n      <div\n        onClick={handleCardClick}\n        onKeyDown={(e) => {\n          if ((e.key === \"Enter\" || e.key === \" \") && !isSelected) {\n            e.preventDefault();\n            onSelect();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-label={`${korean} ${english} archetype card`}\n        aria-pressed={isSelected}\n        style={{\n          width: `${cardWidth}px`,\n          padding: `${padding}px`,\n          backgroundColor: colors.background,\n          border: `${isSelected ? \"3px\" : \"2px\"} solid ${colors.border}`,\n          borderRadius: \"12px\",\n          cursor: isSelected ? \"default\" : \"pointer\",\n          transition: \"all 0.3s ease\",\n          transform: isSelected ? \"scale(1.05)\" : \"scale(1)\",\n          boxShadow: isSelected\n            ? `0 0 20px ${colors.imageGlow}, 0 4px 8px rgba(0, 0, 0, 0.3)`\n            : \"0 2px 4px rgba(0, 0, 0, 0.2)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: `${gap}px`,\n          position: \"relative\",\n          overflow: \"hidden\",\n        }}\n        data-testid={`archetype-card-${archetype}`}\n      >\n        {/* Selected indicator badge */}\n        {isSelected && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: 10,\n              right: 10,\n              padding: \"4px 8px\",\n              background: colors.buttonBackground,\n              color: colors.buttonText,\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              fontWeight: \"bold\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              borderRadius: \"4px\",\n              zIndex: 10,\n            }}\n            data-testid=\"selected-badge\"\n          >\n            선택됨 | Selected\n          </div>\n        )}\n\n        {/* Character Image */}\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            marginBottom: `${gap / 2}px`,\n          }}\n        >\n          <div\n            style={{\n              width: `${imageSize}px`,\n              height: `${imageSize}px`,\n              background: `radial-gradient(circle, ${colors.imageGlow}, transparent)`,\n              borderRadius: \"8px\",\n              border: `2px solid ${colors.cardColor}`,\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              overflow: \"hidden\",\n            }}\n            data-testid=\"archetype-image-container\"\n          >\n            <img\n              src={imagePath}\n              alt={`${korean} - ${english}`}\n              style={{\n                width: `${imageSize - 10}px`,\n                height: `${imageSize - 10}px`,\n                objectFit: \"contain\",\n              }}\n              data-testid=\"archetype-image\"\n              onError={(e) => {\n                const target = e.currentTarget as HTMLImageElement;\n                if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n                  target.src = FALLBACK_ARCHETYPE_IMAGE;\n                }\n              }}\n            />\n          </div>\n        </div>\n\n        {/* Archetype Name */}\n        <h2\n          style={{\n            fontSize: isMobile ? \"20px\" : \"28px\",\n            color: colors.titleColor,\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontWeight: \"bold\",\n            margin: 0,\n            textAlign: \"center\",\n            textShadow: `0 0 10px ${colors.imageGlow}`,\n          }}\n          data-testid=\"archetype-name\"\n        >\n          {korean}\n          <br />\n          <span\n            style={{\n              fontSize: isMobile ? \"16px\" : \"22px\",\n            }}\n          >\n            {english}\n          </span>\n        </h2>\n\n        {/* Philosophy/Description */}\n        <p\n          style={{\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: colors.philosophyColor,\n            fontFamily: FONT_FAMILY.KOREAN,\n            margin: 0,\n            lineHeight: \"1.5\",\n            textAlign: \"center\",\n            fontStyle: \"italic\",\n          }}\n          data-testid=\"archetype-philosophy\"\n        >\n          {philosophy.korean}\n          <br />\n          {philosophy.english}\n        </p>\n\n        {/* Stats Visualization */}\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"8px\",\n            marginTop: `${gap / 2}px`,\n          }}\n          data-testid=\"archetype-stats\"\n        >\n          <div\n            style={{\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              fontWeight: \"bold\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: colors.cardColor,\n            }}\n          >\n            전투 능력치 | Combat Stats\n          </div>\n\n          {statBars.map((stat) => (\n            <StatBar\n              key={stat.label}\n              label={stat.label}\n              value={stat.value}\n              max={100}\n              color={color}\n              height={isMobile ? 10 : 12}\n              showValue={true}\n              isMobile={isMobile}\n            />\n          ))}\n        </div>\n\n        {/* Special Abilities */}\n        {specialAbilities.length > 0 && (\n          <div style={{ marginTop: `${gap / 2}px` }}>\n            <AbilityList\n              abilities={specialAbilities}\n              maxAbilities={3}\n              color={color}\n              isMobile={isMobile}\n            />\n          </div>\n        )}\n\n        {/* Select Button */}\n        {isSelected && showSelectButton && onConfirm && (\n          // Note: Wrapper div with stopPropagation prevents card click when clicking button\n          // Future enhancement: Consider adding stopPropagation prop to BaseButtonOverlayHtml\n          // to eliminate this wrapper and make the component more self-contained\n          <div \n            style={{ marginTop: `${gap}px` }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <BaseButtonOverlayHtml\n              korean=\"선택\"\n              english=\"Select\"\n              onClick={handleConfirmClick}\n              variant=\"primary\"\n              size={isMobile ? \"sm\" : \"md\"}\n              fullWidth={true}\n              testId={`select-button-${archetype}`}\n              isMobile={isMobile}\n              ariaLabel={`Select ${korean} ${english} archetype`}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nArchetypeCard.displayName = \"ArchetypeCard\";\n\nexport default ArchetypeCard;\n"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+import React from "react";
+export interface ArchetypeDataShape {
+    readonly id: string;
+    readonly korean: string;
+    readonly english: string;
+    readonly description: string;
+    readonly color: number;
+    readonly textureKey: string;
+    readonly stats: {
+        readonly attackPower: number;
+        readonly defense: number;
+        readonly speed: number;
+        readonly technique: number;
+    };
+    readonly philosophy: {
+        readonly korean: string;
+        readonly english: string;
+    };
+    readonly specialAbilities?: readonly string[];
+}
+export interface ArchetypeDisplayOverlayHtmlProps {
+    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;
+}
+/**
+ * HTML-based ArchetypeDisplay component for Three.js integration
+ */
+export declare const ArchetypeDisplayOverlayHtml: React.FC<ArchetypeDisplayOverlayHtmlProps>;
+export default ArchetypeDisplayOverlayHtml;
+//# sourceMappingURL=ArchetypeDisplayOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchetypeDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAgBpD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE;QACd,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;QAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,QAAQ,CAAC,UAAU,EAAE;QACnB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/C;AAED,MAAM,WAAW,gCAAgC;IAC/C,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;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAoYhF,CAAC;AAIJ,eAAe,2BAA2B,CAAC"}

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

@@ -0,0 +1,325 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { FALLBACK_ARCHETYPE_IMAGE } from "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getKoreanFontOptimization, getNeonTextShadow, getSmoothTransition } from "../../../../utils/visualEffects.js";
+import { getEnhancedKoreanOverlayStyles } from "../../../../utils/koreanThemeHelpers.js";
+import StatBar from "./StatBarOverlayHtml.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx
+/**
+* HTML-based ArchetypeDisplay component for Three.js integration
+*/
+var ArchetypeDisplayOverlayHtml = React.memo(({ archetypes, selectedIndex, onArchetypeChange, onPlaySFX, width = 800, height = 300, isMobile: _isMobile = false }) => {
+	const selectedArchetype = archetypes[selectedIndex];
+	const isSmallScreen = width < 768;
+	const isLargeContainer = width >= 1100;
+	const archImageWidth = isSmallScreen ? 140 : isLargeContainer ? 120 : 180;
+	const archImageHeight = isSmallScreen ? 200 : isLargeContainer ? 170 : 260;
+	const containerPadding = isSmallScreen ? 20 : isLargeContainer ? 12 : 20;
+	const contentGap = isSmallScreen ? 10 : isLargeContainer ? 8 : 16;
+	const infoGap = isSmallScreen ? 8 : isLargeContainer ? 6 : 12;
+	const titleFontSize = isSmallScreen ? 14 : isLargeContainer ? 14 : 18;
+	const philosophyFontSize = isSmallScreen ? 10 : isLargeContainer ? 10 : 12;
+	const statBarHeight = isSmallScreen ? 10 : isLargeContainer ? 10 : 12;
+	const handlePrevious = useCallback(() => {
+		onArchetypeChange(selectedIndex === 0 ? archetypes.length - 1 : selectedIndex - 1);
+		onPlaySFX("menu_hover");
+	}, [
+		selectedIndex,
+		archetypes.length,
+		onArchetypeChange,
+		onPlaySFX
+	]);
+	const handleNext = useCallback(() => {
+		onArchetypeChange((selectedIndex + 1) % archetypes.length);
+		onPlaySFX("menu_hover");
+	}, [
+		selectedIndex,
+		archetypes.length,
+		onArchetypeChange,
+		onPlaySFX
+	]);
+	const combatStats = useMemo(() => {
+		const maxStatValue = 100;
+		return [
+			{
+				korean: "공격",
+				english: "Attack",
+				value: selectedArchetype.stats.attackPower / maxStatValue,
+				rawValue: selectedArchetype.stats.attackPower
+			},
+			{
+				korean: "방어",
+				english: "Defense",
+				value: selectedArchetype.stats.defense / maxStatValue,
+				rawValue: selectedArchetype.stats.defense
+			},
+			{
+				korean: "속도",
+				english: "Speed",
+				value: selectedArchetype.stats.speed / maxStatValue,
+				rawValue: selectedArchetype.stats.speed
+			},
+			{
+				korean: "기술",
+				english: "Technique",
+				value: selectedArchetype.stats.technique / maxStatValue,
+				rawValue: selectedArchetype.stats.technique
+			}
+		];
+	}, [selectedArchetype.stats]);
+	const colors = useMemo(() => ({
+		archetypeColor: `#${selectedArchetype.color.toString(16).padStart(6, "0")}`,
+		titleGold: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, "0")}`,
+		statsBackground: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .9),
+		statsBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .5),
+		statBarBackground: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),
+		statBarFill: hexToRgbaString(selectedArchetype.color, .9)
+	}), [selectedArchetype.color]);
+	const containerStyle = useMemo(() => ({
+		...getEnhancedKoreanOverlayStyles({
+			opacity: .95,
+			glowIntensity: "medium",
+			includeGradient: false,
+			includeBackdropBlur: false,
+			depthLayers: 3
+		}),
+		width: `${width}px`,
+		height: `${height}px`,
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "flex-start",
+		justifyContent: "flex-start",
+		gap: `${contentGap}px`,
+		border: `2px solid ${colors.archetypeColor}`,
+		padding: `${containerPadding}px`,
+		position: "relative",
+		overflow: "hidden"
+	}), [
+		width,
+		height,
+		contentGap,
+		containerPadding,
+		colors.archetypeColor
+	]);
+	const archetypeImagePath = useMemo(() => {
+		return `/assets/visual/archetypes/${selectedArchetype.textureKey}.png`;
+	}, [selectedArchetype.textureKey]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: containerStyle,
+		"data-testid": "archetype-display-container",
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				width: `${archImageWidth + 40}px`,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: `${infoGap}px`,
+				flexShrink: 0
+			},
+			"data-testid": "archetype-image-section",
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					width: `${archImageWidth + 20}px`,
+					height: `${archImageHeight + 20}px`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					position: "relative",
+					background: `radial-gradient(circle, ${colors.archetypeColor}26, transparent)`,
+					borderRadius: "4px",
+					border: `2px solid ${colors.archetypeColor}`
+				},
+				"data-testid": "archetype-image-container",
+				children: /* @__PURE__ */ jsx("img", {
+					src: archetypeImagePath,
+					alt: `${selectedArchetype.korean} - ${selectedArchetype.english}`,
+					style: {
+						width: `${archImageWidth}px`,
+						height: `${archImageHeight}px`,
+						objectFit: "contain",
+						cursor: "pointer"
+					},
+					onClick: handleNext,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleNext();
+						}
+					},
+					tabIndex: 0,
+					role: "button",
+					"aria-label": `${selectedArchetype.korean} ${selectedArchetype.english} - Click or press Enter to cycle to next archetype`,
+					"data-testid": "archetype-image",
+					onError: (e) => {
+						const target = e.currentTarget;
+						if (!target.src.endsWith("/assets/visual/logo/black-trigram-256.png")) {
+							target.src = FALLBACK_ARCHETYPE_IMAGE;
+							target.alt = `${selectedArchetype.korean} (image unavailable)`;
+						}
+					}
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "row",
+					gap: "8px",
+					width: "100%"
+				},
+				"data-testid": "archetype-navigation",
+				children: [/* @__PURE__ */ jsx("button", {
+					onClick: handlePrevious,
+					"aria-label": "Previous archetype",
+					style: {
+						flex: 1,
+						height: "30px",
+						fontSize: "14px",
+						fontWeight: "bold",
+						color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(6, "0")}`,
+						background: colors.statsBackground,
+						border: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .7)}`,
+						borderRadius: "4px",
+						cursor: "pointer"
+					},
+					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";
+					},
+					"data-testid": "prev-archetype-button",
+					children: "◀"
+				}), /* @__PURE__ */ jsx("button", {
+					onClick: handleNext,
+					"aria-label": "Next archetype",
+					style: {
+						flex: 1,
+						height: "30px",
+						fontSize: "14px",
+						fontWeight: "bold",
+						color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(6, "0")}`,
+						background: colors.statsBackground,
+						border: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .7)}`,
+						borderRadius: "4px",
+						cursor: "pointer"
+					},
+					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";
+					},
+					"data-testid": "next-archetype-button",
+					children: "▶"
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "flex-start",
+				justifyContent: "flex-start",
+				gap: `${infoGap}px`,
+				minWidth: 0,
+				overflow: "hidden"
+			},
+			"data-testid": "archetype-info",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						width: "100%",
+						display: "flex",
+						flexDirection: "row",
+						alignItems: "center",
+						justifyContent: "space-between"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							fontSize: `${titleFontSize}px`,
+							fontWeight: "bold",
+							fontFamily: FONT_FAMILY.KOREAN,
+							color: colors.archetypeColor,
+							textShadow: getNeonTextShadow(selectedArchetype.color, "strong"),
+							transition: getSmoothTransition("all", "normal")
+						},
+						"data-testid": "archetype-title",
+						children: [
+							selectedArchetype.korean,
+							" | ",
+							selectedArchetype.english
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							fontSize: "12px",
+							fontWeight: "bold",
+							fontFamily: FONT_FAMILY.PRIMARY,
+							color: colors.archetypeColor,
+							textShadow: getNeonTextShadow(selectedArchetype.color, "subtle")
+						},
+						"data-testid": "archetype-counter",
+						children: [
+							selectedIndex + 1,
+							" / ",
+							archetypes.length
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: `${philosophyFontSize}px`,
+						fontStyle: "italic",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
+						lineHeight: "1.4",
+						...getKoreanFontOptimization(philosophyFontSize, "normal"),
+						transition: getSmoothTransition("all", "normal")
+					},
+					"data-testid": "archetype-philosophy",
+					children: [
+						selectedArchetype.philosophy.korean,
+						" |",
+						" ",
+						selectedArchetype.philosophy.english
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						width: "100%",
+						display: "flex",
+						flexDirection: "column",
+						gap: "8px"
+					},
+					"data-testid": "combat-stats",
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: isSmallScreen ? "12px" : "14px",
+							fontWeight: "bold",
+							fontFamily: FONT_FAMILY.KOREAN,
+							color: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, "0")}`
+						},
+						children: "전투 능력치 | Combat Stats"
+					}), combatStats.map((stat) => /* @__PURE__ */ jsx(StatBar, {
+						label: `${stat.korean} | ${stat.english}`,
+						value: stat.rawValue,
+						max: 100,
+						color: selectedArchetype.color,
+						height: statBarHeight,
+						showValue: true,
+						isMobile: isSmallScreen
+					}, stat.korean))]
+				})
+			]
+		})]
+	});
+});
+ArchetypeDisplayOverlayHtml.displayName = "ArchetypeDisplayOverlayHtml";
+//#endregion
+export { ArchetypeDisplayOverlayHtml as default };
+
+//# sourceMappingURL=ArchetypeDisplayOverlayHtml.js.map