blacktrigram 0.7.2

package/lib/components/screens/endscreen/components/index.js

@@ -0,0 +1,8 @@
+import "./DefeatAnimation3D.js";
+import "./MatchStatisticsDisplayOverlayHtml.js";
+import "./animations.js";
+import "./NavigationButtonsOverlayHtml.js";
+import "./PerformanceBreakdownOverlayHtml.js";
+import "./PerformanceRatingOverlayHtml.js";
+import "./VictoryAnimation3D.js";
+import "./WinnerDisplayOverlayHtml.js";

package/lib/components/screens/endscreen/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * End Screen Components
+ * Victory/defeat screens with match statistics and 3D effects
+ * Enhanced with DefeatAnimation3D and PerformanceBreakdown
+ */
+export { EndScreen3D } from "./EndScreen3D";
+export type { EndScreen3DProps } from "./EndScreen3D";
+export * from "./components";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/screens/endscreen/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/endscreen/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,cAAc,cAAc,CAAC"}

package/lib/components/screens/endscreen/index.js

@@ -0,0 +1,10 @@
+import "./components/DefeatAnimation3D.js";
+import "./components/MatchStatisticsDisplayOverlayHtml.js";
+import "./components/animations.js";
+import "./components/NavigationButtonsOverlayHtml.js";
+import "./components/PerformanceBreakdownOverlayHtml.js";
+import "./components/PerformanceRatingOverlayHtml.js";
+import "./components/VictoryAnimation3D.js";
+import "./components/WinnerDisplayOverlayHtml.js";
+import "./EndScreen3D.js";
+import "./components/index.js";

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { GameMode, PlayerArchetype } from "../../../types/common";
+export interface IntroScreen3DProps {
+    readonly onMenuSelect: (mode: GameMode, archetype?: PlayerArchetype) => void;
+    readonly onArchetypeSelect?: (archetype: PlayerArchetype) => void;
+    readonly selectedArchetype?: PlayerArchetype;
+    readonly width?: number;
+    readonly height?: number;
+    readonly useEnhancedArchetypeDisplay?: boolean;
+}
+/**
+ * Three.js-based IntroScreen Component
+ */
+export declare const IntroScreen3D: React.FC<IntroScreen3DProps>;
+export default IntroScreen3D;
+//# sourceMappingURL=IntroScreen3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntroScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/intro/IntroScreen3D.tsx"],"names":[],"mappings":"AAEA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAmBlE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IAClE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CAChD;AAkCD;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmkBtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,488 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import { GameMode, PlayerArchetype } from "../../../types/common.js";
+import { getKoreanFontSize } from "../../../types/constants/typography.js";
+import { getPerformanceSettings } from "../../../types/constants/performance.js";
+import { getScreenSize } from "../../../systems/ResponsiveScaling.js";
+import { ARCHETYPE_BACKGROUNDS } from "../../../types/constants/index.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import { PLAYER_ARCHETYPES_DATA } from "../../../systems/types.js";
+import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import { getArchetypeAssets } from "../../../utils/playerUtils.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../shared/base/useKoreanTheme.js";
+import { VolumeControl } from "../../shared/ui/VolumeControl.js";
+import { shouldUseMobileControls } from "../../../utils/deviceDetection.js";
+import BackgroundScene3D from "../../shared/three/scene/BackgroundScene3D.js";
+import "../../shared/three/index.js";
+import useWindowSize from "../../../hooks/useWindowSize.js";
+import ArchetypeDisplayOverlayHtml from "./components/ArchetypeDisplayOverlayHtml.js";
+import EnhancedArchetypeDisplay from "./components/EnhancedArchetypeDisplayOverlayHtml.js";
+import MenuSectionOverlayHtml from "./components/MenuSectionOverlayHtml.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas } from "@react-three/fiber";
+//#region src/components/screens/intro/IntroScreen3D.tsx
+var APP_VERSION = "0.7.2";
+var MENU_ITEMS = [
+	{
+		mode: GameMode.VERSUS,
+		korean: "대전",
+		english: "Combat"
+	},
+	{
+		mode: GameMode.TRAINING,
+		korean: "훈련",
+		english: "Training"
+	},
+	{
+		mode: GameMode.CONTROLS,
+		korean: "조작",
+		english: "Controls"
+	},
+	{
+		mode: GameMode.PHILOSOPHY,
+		korean: "철학",
+		english: "Philosophy"
+	}
+];
+var ARCHETYPE_TEXTURE_MAPPING = {
+	[PlayerArchetype.MUSA]: "musa",
+	[PlayerArchetype.AMSALJA]: "amsalja",
+	[PlayerArchetype.HACKER]: "hacker",
+	[PlayerArchetype.JEONGBO_YOWON]: "jeongbo_yowon",
+	[PlayerArchetype.JOJIK_POKRYEOKBAE]: "jojik_pokryeokbae"
+};
+var getArchetypeIndex = (archetype) => {
+	return Object.keys(PLAYER_ARCHETYPES_DATA).indexOf(archetype);
+};
+var getArchetypeFromIndex = (index) => {
+	return Object.keys(PLAYER_ARCHETYPES_DATA)[index] ?? PlayerArchetype.MUSA;
+};
+/**
+* Three.js-based IntroScreen Component
+*/
+var IntroScreen3D = ({ onMenuSelect, onArchetypeSelect, selectedArchetype = PlayerArchetype.MUSA, width: propWidth, height: propHeight, useEnhancedArchetypeDisplay = true }) => {
+	const audio = useAudio();
+	const introMusicStarted = useRef(false);
+	const [selectedMenuIndex, setSelectedMenuIndex] = useState(0);
+	useWebGLContextLossHandler({
+		onContextLost: () => {
+			console.warn("⚠️ WebGL context lost in IntroScreen");
+		},
+		onContextRestored: () => {
+			console.log("✓ WebGL context restored in IntroScreen");
+		},
+		autoRestore: true
+	});
+	const [currentArchetype, setCurrentArchetype] = useState(selectedArchetype);
+	const [selectedArchetypeIndex, setSelectedArchetypeIndex] = useState(getArchetypeIndex(selectedArchetype));
+	const { width, height } = useWindowSize();
+	const screenWidth = propWidth ?? (width || 1200);
+	const screenHeight = propHeight ?? (height || 800);
+	const archetypeData = useMemo(() => {
+		return Object.entries(PLAYER_ARCHETYPES_DATA).map(([key, data]) => {
+			const archetypeEnum = key;
+			return {
+				id: key.toLowerCase(),
+				korean: data.name.korean,
+				english: data.name.english,
+				description: data.description.korean,
+				color: data.colors.primary,
+				textureKey: ARCHETYPE_TEXTURE_MAPPING[archetypeEnum],
+				stats: data.stats,
+				philosophy: data.philosophy,
+				specialAbilities: data.specialAbilities
+			};
+		});
+	}, []);
+	useEffect(() => {
+		setCurrentArchetype(selectedArchetype);
+		setSelectedArchetypeIndex(getArchetypeIndex(selectedArchetype));
+	}, [selectedArchetype]);
+	const handleMenuItemSelect = useCallback((mode) => {
+		onMenuSelect(mode, currentArchetype);
+	}, [onMenuSelect, currentArchetype]);
+	const handleArchetypeIndexChange = useCallback((index) => {
+		const newArchetype = getArchetypeFromIndex(index);
+		setSelectedArchetypeIndex(index);
+		setCurrentArchetype(newArchetype);
+		onArchetypeSelect?.(newArchetype);
+		if (audio.isAudioReady) {
+			audio.playSFX("menu_hover");
+			const archetypeAssets = getArchetypeAssets(newArchetype);
+			audio.stopMusic();
+			audio.playMusic(archetypeAssets.themeId);
+		}
+	}, [onArchetypeSelect, audio]);
+	useEffect(() => {
+		const startMusic = () => {
+			if (audio.isAudioReady && !introMusicStarted.current) {
+				introMusicStarted.current = true;
+				audio.playMusic("intro_theme");
+			}
+		};
+		window.addEventListener("keydown", startMusic, { once: true });
+		window.addEventListener("mousedown", startMusic, { once: true });
+		window.addEventListener("touchstart", startMusic, {
+			once: true,
+			passive: true
+		});
+		return () => {
+			if (audio.isInitialized) audio.stopMusic();
+		};
+	}, [audio]);
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === "ArrowLeft") handleArchetypeIndexChange(selectedArchetypeIndex === 0 ? archetypeData.length - 1 : selectedArchetypeIndex - 1);
+			else if (event.key === "ArrowRight") handleArchetypeIndexChange((selectedArchetypeIndex + 1) % archetypeData.length);
+			else switch (event.key.toLowerCase()) {
+				case "c":
+					handleMenuItemSelect(GameMode.CONTROLS);
+					break;
+				case "p":
+					handleMenuItemSelect(GameMode.PHILOSOPHY);
+					break;
+				case "t":
+					handleMenuItemSelect(GameMode.TRAINING);
+					break;
+				case "v":
+					handleMenuItemSelect(GameMode.VERSUS);
+					break;
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		audio,
+		archetypeData.length,
+		selectedArchetypeIndex,
+		handleArchetypeIndexChange,
+		handleMenuItemSelect
+	]);
+	const isMobile = useMemo(() => shouldUseMobileControls(), []);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const colors = useMemo(() => ({
+		trigramTextShadow: `0 0 10px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .8)}`,
+		footerBackground: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .9),
+		footerBorder: hexToRgbaString(theme.colors.ACCENT_GOLD, .3)
+	}), [theme]);
+	const performanceSettings = useMemo(() => {
+		return getPerformanceSettings(screenWidth, isMobile);
+	}, [screenWidth, isMobile]);
+	const screenSize = useMemo(() => getScreenSize(screenWidth), [screenWidth]);
+	const logoSize = useMemo(() => {
+		const minDim = Math.min(screenWidth, screenHeight);
+		const logoScale = {
+			mobile: .28,
+			tablet: .22,
+			desktop: .18,
+			large: .15,
+			xlarge: .12
+		}[screenSize];
+		return Math.min(minDim * logoScale, screenSize === "xlarge" ? 250 : 300);
+	}, [
+		screenWidth,
+		screenHeight,
+		screenSize
+	]);
+	const layoutHeights = useMemo(() => {
+		const availableHeight = screenHeight;
+		const titleHeight = screenWidth < 768 ? 32 : 38;
+		const logoAreaHeight = logoSize + (screenWidth < 768 ? 16 : 22);
+		const footerHeight = Math.max(availableHeight * .05, 48);
+		const contentHeight = availableHeight - titleHeight - logoAreaHeight - footerHeight;
+		const menuMinHeight = screenWidth < 768 ? 180 : 120;
+		const menuHeight = Math.max(contentHeight * (screenWidth < 768 ? .38 : .25), menuMinHeight);
+		return {
+			titleHeight,
+			logoAreaHeight,
+			menuHeight,
+			archetypeHeight: contentHeight - menuHeight - 8,
+			footerHeight,
+			gap: Math.max(screenHeight * .002, 2)
+		};
+	}, [
+		screenHeight,
+		screenWidth,
+		logoSize
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: screenWidth,
+			height: screenHeight,
+			position: "relative",
+			overflow: "hidden"
+		},
+		"data-testid": "intro-screen",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					backgroundImage: `url(${ARCHETYPE_BACKGROUNDS.overview})`,
+					backgroundSize: "cover",
+					backgroundPosition: "center",
+					backgroundRepeat: "no-repeat",
+					opacity: .08,
+					filter: "blur(4px)",
+					zIndex: Z_INDEX.BACKGROUND
+				},
+				"data-testid": "archetype-background"
+			}),
+			/* @__PURE__ */ jsx(VolumeControl, {
+				position: "top-right",
+				compact: isMobile
+			}),
+			/* @__PURE__ */ jsx(Canvas, {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					zIndex: Z_INDEX.ARENA
+				},
+				gl: {
+					antialias: performanceSettings.antialias,
+					alpha: true,
+					powerPreference: "high-performance"
+				},
+				dpr: performanceSettings.dpr,
+				camera: {
+					position: [
+						0,
+						5,
+						10
+					],
+					fov: 75
+				},
+				onCreated: ({ gl }) => {
+					gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, .95);
+				},
+				children: /* @__PURE__ */ jsx(BackgroundScene3D, { theme: "intro" })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					zIndex: Z_INDEX.HUD
+				},
+				"data-testid": "intro-hud-overlay",
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						width: "100vw",
+						height: "100vh",
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						justifyContent: "space-between",
+						padding: 0,
+						pointerEvents: "none",
+						zIndex: Z_INDEX.HUD,
+						overflow: "hidden"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								gap: "2px",
+								pointerEvents: "none",
+								marginTop: "4px",
+								flexShrink: 0
+							},
+							"data-testid": "main-title-container",
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: screenWidth < 768 ? "14px" : "16px",
+									fontWeight: "bold",
+									fontFamily: theme.koreanTypography.fontFamily,
+									lineHeight: theme.koreanTypography.lineHeight,
+									letterSpacing: theme.koreanTypography.letterSpacing,
+									wordBreak: theme.koreanTypography.wordBreak,
+									color: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, "0")}`,
+									textShadow: "0 0 10px rgba(255, 170, 0, 0.5)"
+								},
+								children: "흑괘 | Black Trigram"
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: screenWidth < 768 ? "10px" : "11px",
+									fontFamily: theme.koreanTypography.fontFamily,
+									color: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, "0")}`
+								},
+								children: "한국 무술 시뮬레이터 | Korean Martial Arts Simulator"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								flexShrink: 0,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center",
+								height: `${layoutHeights.logoAreaHeight}px`,
+								pointerEvents: "none"
+							},
+							"data-testid": "logo-section",
+							children: [/* @__PURE__ */ jsx("img", {
+								src: "/assets/visual/logo/black-trigram.png",
+								alt: "Black Trigram Logo",
+								style: {
+									width: `${logoSize}px`,
+									height: `${logoSize}px`,
+									objectFit: "contain",
+									filter: "drop-shadow(0 0 30px rgba(0, 255, 255, 0.6))"
+								},
+								"data-testid": "main-logo",
+								onError: (e) => {
+									e.currentTarget.style.display = "none";
+								}
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: screenWidth < 768 ? "16px" : "18px",
+									color: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(6, "0")}`,
+									letterSpacing: screenWidth < 768 ? "6px" : "8px",
+									textAlign: "center",
+									marginTop: screenWidth < 768 ? "8px" : "10px",
+									textShadow: colors.trigramTextShadow
+								},
+								"data-testid": "trigram-symbols",
+								children: "☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								width: "100%",
+								flex: 1,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "flex-start",
+								gap: "4px",
+								paddingLeft: screenWidth < 768 ? "8px" : "16px",
+								paddingRight: screenWidth < 768 ? "8px" : "16px",
+								overflow: "hidden",
+								pointerEvents: "auto",
+								minHeight: 0
+							},
+							"data-testid": "main-content",
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									width: screenWidth < 768 ? "95%" : "70%",
+									maxWidth: screenWidth < 768 ? "100%" : "600px"
+								},
+								"data-testid": "menu-section-container",
+								children: /* @__PURE__ */ jsx(MenuSectionOverlayHtml, {
+									menuItems: MENU_ITEMS,
+									selectedIndex: selectedMenuIndex,
+									onModeSelect: handleMenuItemSelect,
+									onSelectedIndexChange: setSelectedMenuIndex,
+									onPlaySFX: audio.playSFX,
+									width: screenWidth < 768 ? screenWidth * .9 : screenWidth < 1024 ? Math.min(500, screenWidth * .6) : Math.min(550, screenWidth * .4),
+									height: layoutHeights.menuHeight,
+									isMobile
+								})
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									width: screenWidth < 768 ? "100%" : "85%",
+									maxWidth: screenWidth < 768 ? "100%" : "900px",
+									flex: 1,
+									minHeight: 0,
+									overflowY: "auto",
+									overflowX: "hidden"
+								},
+								"data-testid": "archetype-section-container",
+								children: useEnhancedArchetypeDisplay ? /* @__PURE__ */ jsx(EnhancedArchetypeDisplay, {
+									archetypes: archetypeData,
+									selectedIndex: selectedArchetypeIndex,
+									onArchetypeChange: handleArchetypeIndexChange,
+									onPlaySFX: audio.playSFX,
+									width: screenWidth < 768 ? screenWidth * .9 : screenWidth < 1024 ? Math.min(700, screenWidth * .7) : Math.min(850, screenWidth * .55),
+									height: Math.max(layoutHeights.archetypeHeight - 40, 200),
+									isMobile,
+									allowDetailedView: screenWidth >= 768
+								}) : /* @__PURE__ */ jsx(ArchetypeDisplayOverlayHtml, {
+									archetypes: archetypeData,
+									selectedIndex: selectedArchetypeIndex,
+									onArchetypeChange: handleArchetypeIndexChange,
+									onPlaySFX: audio.playSFX,
+									width: screenWidth < 768 ? screenWidth * .9 : screenWidth < 1024 ? Math.min(700, screenWidth * .7) : Math.min(850, screenWidth * .55),
+									height: Math.max(layoutHeights.archetypeHeight - 40, 200),
+									isMobile
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								width: "100%",
+								minHeight: `${layoutHeights.footerHeight}px`,
+								display: "flex",
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "center",
+								gap: "1px",
+								background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${colors.footerBackground})`,
+								borderTop: `1px solid ${colors.footerBorder}`,
+								pointerEvents: "auto",
+								paddingBottom: "2px",
+								flexShrink: 0
+							},
+							"data-testid": "intro-footer",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: `${Math.max(getKoreanFontSize("SMALL", screenWidth) - 3, 10)}px`,
+										color: `#${theme.colors.ACCENT_CYAN.toString(16).padStart(6, "0")}`,
+										fontFamily: theme.koreanTypography.fontFamily,
+										fontStyle: "italic",
+										textAlign: "center"
+									},
+									"data-testid": "footer-motto",
+									children: "흑괘의 길을 걸어라 - Walk the Path of the Black Trigram"
+								}),
+								/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: `${Math.max(getKoreanFontSize("SMALL", screenWidth) - 4, 9)}px`,
+										color: `#${theme.colors.ACCENT_BLUE.toString(16).padStart(6, "0")}`,
+										textAlign: "center",
+										cursor: "pointer"
+									},
+									onClick: () => window.open("https://github.com/Hack23/blacktrigram", "_blank"),
+									"data-testid": "footer-link",
+									children: "Open Source Korean Martial Arts Game by Hack23"
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										fontSize: `${Math.max(getKoreanFontSize("SMALL", screenWidth) - 5, 8)}px`,
+										color: `#${theme.colors.ACCENT_BLUE.toString(16).padStart(6, "0")}`,
+										textAlign: "center",
+										cursor: "pointer"
+									},
+									onClick: () => window.open(`https://github.com/Hack23/blacktrigram/releases/tag/v${APP_VERSION}`, "_blank"),
+									"data-testid": "footer-version",
+									children: ["v", APP_VERSION]
+								})
+							]
+						})
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { IntroScreen3D as default };
+
+//# sourceMappingURL=IntroScreen3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntroScreen3D.js","names":[],"sources":["../../../../src/components/screens/intro/IntroScreen3D.tsx"],"sourcesContent":["// UI renders outside Canvas in absolute-positioned div - no Html needed\nimport { Canvas } from \"@react-three/fiber\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { getScreenSize } from \"../../../systems/ResponsiveScaling\";\nimport { PLAYER_ARCHETYPES_DATA } from \"../../../systems/types\";\nimport { GameMode, PlayerArchetype } from \"../../../types/common\";\nimport {\n  ARCHETYPE_BACKGROUNDS,\n  getKoreanFontSize,\n  getPerformanceSettings,\n} from \"../../../types/constants\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\nimport { getArchetypeAssets } from \"../../../utils/playerUtils\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { BackgroundScene3D } from \"../../shared/three\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { ArchetypeDisplayOverlayHtml } from \"./components/ArchetypeDisplayOverlayHtml\";\nimport { EnhancedArchetypeDisplay } from \"./components/EnhancedArchetypeDisplayOverlayHtml\";\nimport { MenuSectionOverlayHtml } from \"./components/MenuSectionOverlayHtml\";\n\nconst APP_VERSION = import.meta.env.APP_VERSION;\n\nexport interface IntroScreen3DProps {\n  readonly onMenuSelect: (mode: GameMode, archetype?: PlayerArchetype) => void;\n  readonly onArchetypeSelect?: (archetype: PlayerArchetype) => void;\n  readonly selectedArchetype?: PlayerArchetype;\n  readonly width?: number;\n  readonly height?: number;\n  readonly useEnhancedArchetypeDisplay?: boolean; // Use enhanced card display\n}\n\nconst MENU_ITEMS: { mode: GameMode; korean: string; english: string }[] = [\n  { mode: GameMode.VERSUS, korean: \"대전\", english: \"Combat\" },\n  { mode: GameMode.TRAINING, korean: \"훈련\", english: \"Training\" },\n  { mode: GameMode.CONTROLS, korean: \"조작\", english: \"Controls\" },\n  { mode: GameMode.PHILOSOPHY, korean: \"철학\", english: \"Philosophy\" },\n];\n\n// Texture key mapping for archetypes\nconst ARCHETYPE_TEXTURE_MAPPING: Record<PlayerArchetype, string> = {\n  [PlayerArchetype.MUSA]: \"musa\",\n  [PlayerArchetype.AMSALJA]: \"amsalja\",\n  [PlayerArchetype.HACKER]: \"hacker\",\n  [PlayerArchetype.JEONGBO_YOWON]: \"jeongbo_yowon\",\n  [PlayerArchetype.JOJIK_POKRYEOKBAE]: \"jojik_pokryeokbae\",\n};\n\n// Helper function to convert PlayerArchetype enum to array index\nconst getArchetypeIndex = (archetype: PlayerArchetype): number => {\n  const archetypeKeys = Object.keys(\n    PLAYER_ARCHETYPES_DATA,\n  ) as PlayerArchetype[];\n  return archetypeKeys.indexOf(archetype);\n};\n\n// Helper function to convert array index to PlayerArchetype enum\nconst getArchetypeFromIndex = (index: number): PlayerArchetype => {\n  const archetypeKeys = Object.keys(\n    PLAYER_ARCHETYPES_DATA,\n  ) as PlayerArchetype[];\n  return archetypeKeys[index] ?? PlayerArchetype.MUSA;\n};\n\n/**\n * Three.js-based IntroScreen Component\n */\nexport const IntroScreen3D: React.FC<IntroScreen3DProps> = ({\n  onMenuSelect,\n  onArchetypeSelect,\n  selectedArchetype = PlayerArchetype.MUSA,\n  width: propWidth,\n  height: propHeight,\n  useEnhancedArchetypeDisplay = true, // Default to enhanced display\n}) => {\n  const audio = useAudio();\n  const introMusicStarted = useRef(false);\n  const [selectedMenuIndex, setSelectedMenuIndex] = useState(0);\n  // UI now renders outside Canvas - no canvas ready state needed\n\n  // Handle WebGL context loss and restoration (for 3D background only)\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in IntroScreen\");\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in IntroScreen\");\n    },\n    autoRestore: true,\n  });\n\n  // Add local state for archetype management\n  const [currentArchetype, setCurrentArchetype] =\n    useState<PlayerArchetype>(selectedArchetype);\n  const [selectedArchetypeIndex, setSelectedArchetypeIndex] = useState<number>(\n    getArchetypeIndex(selectedArchetype),\n  );\n\n  const { width, height } = useWindowSize();\n\n  // Use prop dimensions if provided, otherwise use window size with defensive fallbacks\n  // Ensure minimum valid dimensions to prevent rendering issues\n  const screenWidth = propWidth ?? (width || 1200);\n  const screenHeight = propHeight ?? (height || 800);\n\n  // Create archetype data with texture keys from PLAYER_ARCHETYPES_DATA\n  const archetypeData = useMemo(() => {\n    return Object.entries(PLAYER_ARCHETYPES_DATA).map(([key, data]) => {\n      const archetypeEnum = key as PlayerArchetype;\n      return {\n        id: key.toLowerCase(),\n        korean: data.name.korean,\n        english: data.name.english,\n        description: data.description.korean,\n        color: data.colors.primary,\n        textureKey: ARCHETYPE_TEXTURE_MAPPING[archetypeEnum],\n        stats: data.stats,\n        philosophy: data.philosophy,\n        specialAbilities: data.specialAbilities, // Include special abilities\n      };\n    });\n  }, []);\n\n  // Sync with prop changes\n  useEffect(() => {\n    setCurrentArchetype(selectedArchetype);\n    setSelectedArchetypeIndex(getArchetypeIndex(selectedArchetype));\n  }, [selectedArchetype]);\n\n  // Direct menu selection - MOVED BEFORE useEffect that uses it\n  const handleMenuItemSelect = useCallback(\n    (mode: GameMode) => {\n      onMenuSelect(mode, currentArchetype);\n    },\n    [onMenuSelect, currentArchetype],\n  );\n\n  // Handle archetype change by index - MOVED BEFORE useEffect that uses it\n  const handleArchetypeIndexChange = useCallback(\n    (index: number) => {\n      const newArchetype = getArchetypeFromIndex(index);\n      setSelectedArchetypeIndex(index);\n      setCurrentArchetype(newArchetype);\n      onArchetypeSelect?.(newArchetype);\n\n      // Check if audio system is ready, not individual methods\n      if (audio.isAudioReady) {\n        audio.playSFX(\"menu_hover\");\n\n        // Play archetype theme music preview when archetype changes\n        // Use getArchetypeAssets utility for proper error handling and fallback\n        const archetypeAssets = getArchetypeAssets(newArchetype);\n        // Stop intro music and play archetype theme\n        audio.stopMusic();\n        audio.playMusic(archetypeAssets.themeId);\n      }\n    },\n    [onArchetypeSelect, audio],\n  );\n\n  // Play intro music after first user interaction\n  useEffect(() => {\n    const startMusic = () => {\n      if (audio.isAudioReady && !introMusicStarted.current) {\n        introMusicStarted.current = true;\n        audio.playMusic(\"intro_theme\");\n      }\n    };\n    // Event listeners with { once: true } are automatically removed after triggering\n    window.addEventListener(\"keydown\", startMusic, { once: true });\n    window.addEventListener(\"mousedown\", startMusic, { once: true });\n    window.addEventListener(\"touchstart\", startMusic, { once: true, passive: true });\n\n    return () => {\n      // Safe cleanup - check if audio is initialized before stopping music\n      if (audio.isInitialized) {\n        audio.stopMusic();\n      }\n    };\n  }, [audio]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Archetype navigation (handleArchetypeIndexChange already plays menu_hover SFX)\n      if (event.key === \"ArrowLeft\") {\n        const newIndex =\n          selectedArchetypeIndex === 0\n            ? archetypeData.length - 1\n            : selectedArchetypeIndex - 1;\n        handleArchetypeIndexChange(newIndex);\n      } else if (event.key === \"ArrowRight\") {\n        const newIndex = (selectedArchetypeIndex + 1) % archetypeData.length;\n        handleArchetypeIndexChange(newIndex);\n      } else {\n        // Direct game mode shortcuts\n        switch (event.key.toLowerCase()) {\n          case \"c\":\n            handleMenuItemSelect(GameMode.CONTROLS);\n            break;\n          case \"p\":\n            handleMenuItemSelect(GameMode.PHILOSOPHY);\n            break;\n          case \"t\":\n            handleMenuItemSelect(GameMode.TRAINING);\n            break;\n          case \"v\":\n            handleMenuItemSelect(GameMode.VERSUS);\n            break;\n        }\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [\n    audio,\n    archetypeData.length,\n    selectedArchetypeIndex,\n    handleArchetypeIndexChange,\n    handleMenuItemSelect,\n  ]);\n\n  // Responsive layout calculations with large desktop support\n  // Use device detection instead of width-only breakpoint to correctly identify high-res mobile devices\n  // shouldUseMobileControls() uses user-agent detection which doesn't change during session\n  // Use isMobile only for mobile CONTROLS (touch controls, etc.)\n  // Layout sizing should use screenWidth-based calculations\n  const isMobile = useMemo(() => shouldUseMobileControls(), []);\n\n  // Use Korean theme hook for consistent theming\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  // Memoize colors from theme for performance\n  const colors = useMemo(\n    () => ({\n      trigramTextShadow: `0 0 10px ${hexToRgbaString(\n        theme.colors.PRIMARY_CYAN,\n        0.8,\n      )}`,\n      footerBackground: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n      footerBorder: hexToRgbaString(theme.colors.ACCENT_GOLD, 0.3),\n    }),\n    [theme],\n  );\n\n  // Performance settings based on device tier\n  const performanceSettings = useMemo(() => {\n    return getPerformanceSettings(screenWidth, isMobile);\n  }, [screenWidth, isMobile]);\n\n  // Get screen size category for layout calculations (mobile, tablet, desktop, large, xlarge)\n  const screenSize = useMemo(() => getScreenSize(screenWidth), [screenWidth]);\n\n  // Use percentage-based layout based on screen dimensions\n  // Logo takes priority - larger and more prominent\n  const logoSize = useMemo(() => {\n    // Logo should be prominent - use percentage of smaller dimension\n    const minDim = Math.min(screenWidth, screenHeight);\n    // Scale based on screen size category\n    const logoScale = {\n      mobile: 0.28,\n      tablet: 0.22,\n      desktop: 0.18,\n      large: 0.15,\n      xlarge: 0.12,\n    }[screenSize];\n    // Cap at reasonable max size for very large screens\n    return Math.min(minDim * logoScale, screenSize === \"xlarge\" ? 250 : 300);\n  }, [screenWidth, screenHeight, screenSize]);\n\n  // Dynamic heights based on available screen space (percentage-based)\n  // All calculations use screen dimensions, not device type\n  const layoutHeights = useMemo(() => {\n    const availableHeight = screenHeight;\n\n    // Title area - small header with title and description\n    const titleHeight = screenWidth < 768 ? 32 : 38;\n\n    // Logo area - based on logo size plus trigram symbols (compact)\n    const trigramHeight = screenWidth < 768 ? 16 : 22;\n    const logoAreaHeight = logoSize + trigramHeight;\n\n    // Footer - compact with all info\n    const footerHeight = Math.max(availableHeight * 0.05, 48);\n\n    // Remaining space for menu + archetype\n    const contentHeight =\n      availableHeight - titleHeight - logoAreaHeight - footerHeight;\n\n    // Menu needs enough height for 2x2 grid (2 rows of ~40px buttons + title + padding)\n    // Mobile needs column layout (4 buttons stacked)\n    const menuMinHeight = screenWidth < 768 ? 180 : 120;\n    const menuPercent = screenWidth < 768 ? 0.38 : 0.25;\n    const menuHeight = Math.max(contentHeight * menuPercent, menuMinHeight);\n    const archetypeHeight = contentHeight - menuHeight - 8; // 8px gap\n\n    // Gap scales with screen (minimal)\n    const gap = Math.max(screenHeight * 0.002, 2);\n\n    return {\n      titleHeight,\n      logoAreaHeight,\n      menuHeight,\n      archetypeHeight,\n      footerHeight,\n      gap,\n    };\n  }, [screenHeight, screenWidth, logoSize]);\n  return (\n    <div\n      style={{\n        width: screenWidth,\n        height: screenHeight,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"intro-screen\"\n    >\n      {/* Archetype background image (very subtle, behind 3D scene) */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          backgroundImage: `url(${ARCHETYPE_BACKGROUNDS.overview})`,\n          backgroundSize: \"cover\",\n          backgroundPosition: \"center\",\n          backgroundRepeat: \"no-repeat\",\n          opacity: 0.08,\n          filter: \"blur(4px)\",\n          zIndex: Z_INDEX.BACKGROUND,\n        }}\n        data-testid=\"archetype-background\"\n      />\n\n      {/* Volume Control - outside Canvas to maintain AudioProvider context */}\n      <VolumeControl position=\"top-right\" compact={isMobile} />\n\n      {/* Three.js Canvas for 3D background */}\n      <Canvas\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: Z_INDEX.ARENA,\n        }}\n        gl={{\n          antialias: performanceSettings.antialias,\n          alpha: true,\n          powerPreference: \"high-performance\",\n        }}\n        dpr={performanceSettings.dpr}\n        camera={{ position: [0, 5, 10], fov: 75 }}\n        onCreated={({ gl }) => {\n          gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 0.95);\n        }}\n      >\n        {/* 3D Background Scene */}\n        <BackgroundScene3D theme=\"intro\" />\n      </Canvas>\n\n      {/* UI Overlay (positioned absolutely over Canvas) - matches CombatScreen pattern */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          pointerEvents: \"none\",\n          zIndex: Z_INDEX.HUD,\n        }}\n        data-testid=\"intro-hud-overlay\"\n      >\n        <div\n          style={{\n            width: \"100vw\",\n            height: \"100vh\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            padding: 0,\n            pointerEvents: \"none\",\n            zIndex: Z_INDEX.HUD,\n            overflow: \"hidden\",\n          }}\n        >\n          {/* Title - Small, above logo */}\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              gap: \"2px\",\n              pointerEvents: \"none\",\n              marginTop: \"4px\",\n              flexShrink: 0,\n            }}\n            data-testid=\"main-title-container\"\n          >\n            <div\n              style={{\n                fontSize: screenWidth < 768 ? \"14px\" : \"16px\",\n                fontWeight: \"bold\",\n                fontFamily: theme.koreanTypography.fontFamily,\n                lineHeight: theme.koreanTypography.lineHeight,\n                letterSpacing: theme.koreanTypography.letterSpacing,\n                wordBreak: theme.koreanTypography.wordBreak,\n                color: `#${theme.colors.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n                textShadow: \"0 0 10px rgba(255, 170, 0, 0.5)\",\n              }}\n            >\n              흑괘 | Black Trigram\n            </div>\n            <div\n              style={{\n                fontSize: screenWidth < 768 ? \"10px\" : \"11px\",\n                fontFamily: theme.koreanTypography.fontFamily,\n                color: `#${theme.colors.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n              }}\n            >\n              한국 무술 시뮬레이터 | Korean Martial Arts Simulator\n            </div>\n          </div>\n\n          {/* Logo Section - Primary branding */}\n          <div\n            style={{\n              flexShrink: 0,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              height: `${layoutHeights.logoAreaHeight}px`,\n              pointerEvents: \"none\",\n            }}\n            data-testid=\"logo-section\"\n          >\n            {/* Logo Image - Prominent */}\n            <img\n              src=\"/assets/visual/logo/black-trigram.png\"\n              alt=\"Black Trigram Logo\"\n              style={{\n                width: `${logoSize}px`,\n                height: `${logoSize}px`,\n                objectFit: \"contain\",\n                filter: \"drop-shadow(0 0 30px rgba(0, 255, 255, 0.6))\",\n              }}\n              data-testid=\"main-logo\"\n              onError={(e) => {\n                e.currentTarget.style.display = \"none\";\n              }}\n            />\n\n            {/* Trigram Symbols */}\n            <div\n              style={{\n                fontSize: screenWidth < 768 ? \"16px\" : \"18px\",\n                color: `#${theme.colors.PRIMARY_CYAN.toString(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                letterSpacing: screenWidth < 768 ? \"6px\" : \"8px\",\n                textAlign: \"center\",\n                marginTop: screenWidth < 768 ? \"8px\" : \"10px\",\n                textShadow: colors.trigramTextShadow,\n              }}\n              data-testid=\"trigram-symbols\"\n            >\n              ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷\n            </div>\n          </div>\n\n          {/* Main Content Area */}\n          <div\n            style={{\n              width: \"100%\",\n              flex: 1,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"flex-start\",\n              gap: \"4px\",\n              paddingLeft: screenWidth < 768 ? \"8px\" : \"16px\",\n              paddingRight: screenWidth < 768 ? \"8px\" : \"16px\",\n              overflow: \"hidden\",\n              pointerEvents: \"auto\",\n              minHeight: 0,\n            }}\n            data-testid=\"main-content\"\n          >\n            {/* Menu Section - Compact */}\n            <div\n              style={{\n                width: screenWidth < 768 ? \"95%\" : \"70%\",\n                maxWidth: screenWidth < 768 ? \"100%\" : \"600px\",\n              }}\n              data-testid=\"menu-section-container\"\n            >\n              <MenuSectionOverlayHtml\n                menuItems={MENU_ITEMS}\n                selectedIndex={selectedMenuIndex}\n                onModeSelect={handleMenuItemSelect}\n                onSelectedIndexChange={setSelectedMenuIndex}\n                onPlaySFX={audio.playSFX}\n                width={\n                  // Compact menu width - narrower for better proportions\n                  screenWidth < 768\n                    ? screenWidth * 0.9\n                    : screenWidth < 1024\n                      ? Math.min(500, screenWidth * 0.6)\n                      : Math.min(550, screenWidth * 0.4)\n                }\n                height={layoutHeights.menuHeight}\n                isMobile={isMobile}\n              />\n            </div>\n\n            {/* Archetype Selection - Scrollable container */}\n            <div\n              style={{\n                width: screenWidth < 768 ? \"100%\" : \"85%\",\n                maxWidth: screenWidth < 768 ? \"100%\" : \"900px\",\n                flex: 1,\n                minHeight: 0,\n                overflowY: \"auto\",\n                overflowX: \"hidden\",\n              }}\n              data-testid=\"archetype-section-container\"\n            >\n              {useEnhancedArchetypeDisplay ? (\n                <EnhancedArchetypeDisplay\n                  archetypes={archetypeData}\n                  selectedIndex={selectedArchetypeIndex}\n                  onArchetypeChange={handleArchetypeIndexChange}\n                  onPlaySFX={audio.playSFX}\n                  width={\n                    screenWidth < 768\n                      ? screenWidth * 0.9\n                      : screenWidth < 1024\n                        ? Math.min(700, screenWidth * 0.7)\n                        : Math.min(850, screenWidth * 0.55)\n                  }\n                  height={Math.max(layoutHeights.archetypeHeight - 40, 200)}\n                  isMobile={isMobile}\n                  allowDetailedView={screenWidth >= 768}\n                />\n              ) : (\n                <ArchetypeDisplayOverlayHtml\n                  archetypes={archetypeData}\n                  selectedIndex={selectedArchetypeIndex}\n                  onArchetypeChange={handleArchetypeIndexChange}\n                  onPlaySFX={audio.playSFX}\n                  width={\n                    screenWidth < 768\n                      ? screenWidth * 0.9\n                      : screenWidth < 1024\n                        ? Math.min(700, screenWidth * 0.7)\n                        : Math.min(850, screenWidth * 0.55)\n                  }\n                  height={Math.max(layoutHeights.archetypeHeight - 40, 200)}\n                  isMobile={isMobile}\n                />\n              )}\n            </div>\n          </div>\n\n          {/* Footer - Compact with all info */}\n          <div\n            style={{\n              width: \"100%\",\n              minHeight: `${layoutHeights.footerHeight}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: \"1px\",\n              background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${colors.footerBackground})`,\n              borderTop: `1px solid ${colors.footerBorder}`,\n              pointerEvents: \"auto\",\n              paddingBottom: \"2px\",\n              flexShrink: 0,\n            }}\n            data-testid=\"intro-footer\"\n          >\n            {/* Motto */}\n            <div\n              style={{\n                fontSize: `${Math.max(getKoreanFontSize(\"SMALL\", screenWidth) - 3, 10)}px`,\n                color: `#${theme.colors.ACCENT_CYAN.toString(16).padStart(6, \"0\")}`,\n                fontFamily: theme.koreanTypography.fontFamily,\n                fontStyle: \"italic\",\n                textAlign: \"center\",\n              }}\n              data-testid=\"footer-motto\"\n            >\n              흑괘의 길을 걸어라 - Walk the Path of the Black Trigram\n            </div>\n            {/* Open Source Link */}\n            <div\n              style={{\n                fontSize: `${Math.max(getKoreanFontSize(\"SMALL\", screenWidth) - 4, 9)}px`,\n                color: `#${theme.colors.ACCENT_BLUE.toString(16).padStart(6, \"0\")}`,\n                textAlign: \"center\",\n                cursor: \"pointer\",\n              }}\n              onClick={() =>\n                window.open(\"https://github.com/Hack23/blacktrigram\", \"_blank\")\n              }\n              data-testid=\"footer-link\"\n            >\n              Open Source Korean Martial Arts Game by Hack23\n            </div>\n            {/* Version */}\n            <div\n              style={{\n                fontSize: `${Math.max(getKoreanFontSize(\"SMALL\", screenWidth) - 5, 8)}px`,\n                color: `#${theme.colors.ACCENT_BLUE.toString(16).padStart(6, \"0\")}`,\n                textAlign: \"center\",\n                cursor: \"pointer\",\n              }}\n              onClick={() =>\n                window.open(\n                  `https://github.com/Hack23/blacktrigram/releases/tag/v${APP_VERSION}`,\n                  \"_blank\",\n                )\n              }\n              data-testid=\"footer-version\"\n            >\n              v{APP_VERSION}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default IntroScreen3D;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+BA,IAAM,cAAA;AAWN,IAAM,aAAoE;CACxE;EAAE,MAAM,SAAS;EAAQ,QAAQ;EAAM,SAAS;EAAU;CAC1D;EAAE,MAAM,SAAS;EAAU,QAAQ;EAAM,SAAS;EAAY;CAC9D;EAAE,MAAM,SAAS;EAAU,QAAQ;EAAM,SAAS;EAAY;CAC9D;EAAE,MAAM,SAAS;EAAY,QAAQ;EAAM,SAAS;EAAc;CACnE;AAGD,IAAM,4BAA6D;EAChE,gBAAgB,OAAO;EACvB,gBAAgB,UAAU;EAC1B,gBAAgB,SAAS;EACzB,gBAAgB,gBAAgB;EAChC,gBAAgB,oBAAoB;CACtC;AAGD,IAAM,qBAAqB,cAAuC;AAIhE,QAHsB,OAAO,KAC3B,uBACD,CACoB,QAAQ,UAAU;;AAIzC,IAAM,yBAAyB,UAAmC;AAIhE,QAHsB,OAAO,KAC3B,uBACD,CACoB,UAAU,gBAAgB;;;;;AAMjD,IAAa,iBAA+C,EAC1D,cACA,mBACA,oBAAoB,gBAAgB,MACpC,OAAO,WACP,QAAQ,YACR,8BAA8B,WAC1B;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,oBAAoB,OAAO,MAAM;CACvC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,EAAE;AAI7D,4BAA2B;EACzB,qBAAqB;AACnB,WAAQ,KAAK,uCAAuC;;EAEtD,yBAAyB;AACvB,WAAQ,IAAI,0CAA0C;;EAExD,aAAa;EACd,CAAC;CAGF,MAAM,CAAC,kBAAkB,uBACvB,SAA0B,kBAAkB;CAC9C,MAAM,CAAC,wBAAwB,6BAA6B,SAC1D,kBAAkB,kBAAkB,CACrC;CAED,MAAM,EAAE,OAAO,WAAW,eAAe;CAIzC,MAAM,cAAc,cAAc,SAAS;CAC3C,MAAM,eAAe,eAAe,UAAU;CAG9C,MAAM,gBAAgB,cAAc;AAClC,SAAO,OAAO,QAAQ,uBAAuB,CAAC,KAAK,CAAC,KAAK,UAAU;GACjE,MAAM,gBAAgB;AACtB,UAAO;IACL,IAAI,IAAI,aAAa;IACrB,QAAQ,KAAK,KAAK;IAClB,SAAS,KAAK,KAAK;IACnB,aAAa,KAAK,YAAY;IAC9B,OAAO,KAAK,OAAO;IACnB,YAAY,0BAA0B;IACtC,OAAO,KAAK;IACZ,YAAY,KAAK;IACjB,kBAAkB,KAAK;IACxB;IACD;IACD,EAAE,CAAC;AAGN,iBAAgB;AACd,sBAAoB,kBAAkB;AACtC,4BAA0B,kBAAkB,kBAAkB,CAAC;IAC9D,CAAC,kBAAkB,CAAC;CAGvB,MAAM,uBAAuB,aAC1B,SAAmB;AAClB,eAAa,MAAM,iBAAiB;IAEtC,CAAC,cAAc,iBAAiB,CACjC;CAGD,MAAM,6BAA6B,aAChC,UAAkB;EACjB,MAAM,eAAe,sBAAsB,MAAM;AACjD,4BAA0B,MAAM;AAChC,sBAAoB,aAAa;AACjC,sBAAoB,aAAa;AAGjC,MAAI,MAAM,cAAc;AACtB,SAAM,QAAQ,aAAa;GAI3B,MAAM,kBAAkB,mBAAmB,aAAa;AAExD,SAAM,WAAW;AACjB,SAAM,UAAU,gBAAgB,QAAQ;;IAG5C,CAAC,mBAAmB,MAAM,CAC3B;AAGD,iBAAgB;EACd,MAAM,mBAAmB;AACvB,OAAI,MAAM,gBAAgB,CAAC,kBAAkB,SAAS;AACpD,sBAAkB,UAAU;AAC5B,UAAM,UAAU,cAAc;;;AAIlC,SAAO,iBAAiB,WAAW,YAAY,EAAE,MAAM,MAAM,CAAC;AAC9D,SAAO,iBAAiB,aAAa,YAAY,EAAE,MAAM,MAAM,CAAC;AAChE,SAAO,iBAAiB,cAAc,YAAY;GAAE,MAAM;GAAM,SAAS;GAAM,CAAC;AAEhF,eAAa;AAEX,OAAI,MAAM,cACR,OAAM,WAAW;;IAGpB,CAAC,MAAM,CAAC;AAGX,iBAAgB;EACd,MAAM,iBAAiB,UAAyB;AAE9C,OAAI,MAAM,QAAQ,YAKhB,4BAHE,2BAA2B,IACvB,cAAc,SAAS,IACvB,yBAAyB,EACK;YAC3B,MAAM,QAAQ,aAEvB,6BADkB,yBAAyB,KAAK,cAAc,OAC1B;OAGpC,SAAQ,MAAM,IAAI,aAAa,EAA/B;IACE,KAAK;AACH,0BAAqB,SAAS,SAAS;AACvC;IACF,KAAK;AACH,0BAAqB,SAAS,WAAW;AACzC;IACF,KAAK;AACH,0BAAqB,SAAS,SAAS;AACvC;IACF,KAAK;AACH,0BAAqB,SAAS,OAAO;AACrC;;;AAKR,SAAO,iBAAiB,WAAW,cAAc;AACjD,eAAa,OAAO,oBAAoB,WAAW,cAAc;IAChE;EACD;EACA,cAAc;EACd;EACA;EACA;EACD,CAAC;CAOF,MAAM,WAAW,cAAc,yBAAyB,EAAE,EAAE,CAAC;CAG7D,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,MAAM;EACN;EACD,CAAC;CAGF,MAAM,SAAS,eACN;EACL,mBAAmB,YAAY,gBAC7B,MAAM,OAAO,cACb,GACD;EACD,kBAAkB,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;EACvE,cAAc,gBAAgB,MAAM,OAAO,aAAa,GAAI;EAC7D,GACD,CAAC,MAAM,CACR;CAGD,MAAM,sBAAsB,cAAc;AACxC,SAAO,uBAAuB,aAAa,SAAS;IACnD,CAAC,aAAa,SAAS,CAAC;CAG3B,MAAM,aAAa,cAAc,cAAc,YAAY,EAAE,CAAC,YAAY,CAAC;CAI3E,MAAM,WAAW,cAAc;EAE7B,MAAM,SAAS,KAAK,IAAI,aAAa,aAAa;EAElD,MAAM,YAAY;GAChB,QAAQ;GACR,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACT,CAAC;AAEF,SAAO,KAAK,IAAI,SAAS,WAAW,eAAe,WAAW,MAAM,IAAI;IACvE;EAAC;EAAa;EAAc;EAAW,CAAC;CAI3C,MAAM,gBAAgB,cAAc;EAClC,MAAM,kBAAkB;EAGxB,MAAM,cAAc,cAAc,MAAM,KAAK;EAI7C,MAAM,iBAAiB,YADD,cAAc,MAAM,KAAK;EAI/C,MAAM,eAAe,KAAK,IAAI,kBAAkB,KAAM,GAAG;EAGzD,MAAM,gBACJ,kBAAkB,cAAc,iBAAiB;EAInD,MAAM,gBAAgB,cAAc,MAAM,MAAM;EAEhD,MAAM,aAAa,KAAK,IAAI,iBADR,cAAc,MAAM,MAAO,MACU,cAAc;AAMvE,SAAO;GACL;GACA;GACA;GACA,iBATsB,gBAAgB,aAAa;GAUnD;GACA,KARU,KAAK,IAAI,eAAe,MAAO,EAAE;GAS5C;IACA;EAAC;EAAc;EAAa;EAAS,CAAC;AACzC,QACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACX;EACD,eAAY;YAPd;GAUE,oBAAC,OAAD;IACE,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,iBAAiB,OAAO,sBAAsB,SAAS;KACvD,gBAAgB;KAChB,oBAAoB;KACpB,kBAAkB;KAClB,SAAS;KACT,QAAQ;KACR,QAAQ,QAAQ;KACjB;IACD,eAAY;IACZ,CAAA;GAGF,oBAAC,eAAD;IAAe,UAAS;IAAY,SAAS;IAAY,CAAA;GAGzD,oBAAC,QAAD;IACE,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,QAAQ,QAAQ;KACjB;IACD,IAAI;KACF,WAAW,oBAAoB;KAC/B,OAAO;KACP,iBAAiB;KAClB;IACD,KAAK,oBAAoB;IACzB,QAAQ;KAAE,UAAU;MAAC;MAAG;MAAG;MAAG;KAAE,KAAK;KAAI;IACzC,YAAY,EAAE,SAAS;AACrB,QAAG,cAAc,MAAM,OAAO,oBAAoB,IAAK;;cAIzD,oBAAC,mBAAD,EAAmB,OAAM,SAAU,CAAA;IAC5B,CAAA;GAGT,oBAAC,OAAD;IACE,OAAO;KACL,UAAU;KACV,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,eAAe;KACf,QAAQ,QAAQ;KACjB;IACD,eAAY;cAEZ,qBAAC,OAAD;KACE,OAAO;MACL,OAAO;MACP,QAAQ;MACR,SAAS;MACT,eAAe;MACf,YAAY;MACZ,gBAAgB;MAChB,SAAS;MACT,eAAe;MACf,QAAQ,QAAQ;MAChB,UAAU;MACX;eAZH;MAeE,qBAAC,OAAD;OACE,OAAO;QACL,SAAS;QACT,eAAe;QACf,YAAY;QACZ,KAAK;QACL,eAAe;QACf,WAAW;QACX,YAAY;QACb;OACD,eAAY;iBAVd,CAYE,oBAAC,OAAD;QACE,OAAO;SACL,UAAU,cAAc,MAAM,SAAS;SACvC,YAAY;SACZ,YAAY,MAAM,iBAAiB;SACnC,YAAY,MAAM,iBAAiB;SACnC,eAAe,MAAM,iBAAiB;SACtC,WAAW,MAAM,iBAAiB;SAClC,OAAO,IAAI,MAAM,OAAO,YAAY,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;SACjE,YAAY;SACb;kBACF;QAEK,CAAA,EACN,oBAAC,OAAD;QACE,OAAO;SACL,UAAU,cAAc,MAAM,SAAS;SACvC,YAAY,MAAM,iBAAiB;SACnC,OAAO,IAAI,MAAM,OAAO,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;SACrE;kBACF;QAEK,CAAA,CACF;;MAGN,qBAAC,OAAD;OACE,OAAO;QACL,YAAY;QACZ,SAAS;QACT,eAAe;QACf,YAAY;QACZ,gBAAgB;QAChB,QAAQ,GAAG,cAAc,eAAe;QACxC,eAAe;QAChB;OACD,eAAY;iBAVd,CAaE,oBAAC,OAAD;QACE,KAAI;QACJ,KAAI;QACJ,OAAO;SACL,OAAO,GAAG,SAAS;SACnB,QAAQ,GAAG,SAAS;SACpB,WAAW;SACX,QAAQ;SACT;QACD,eAAY;QACZ,UAAU,MAAM;AACd,WAAE,cAAc,MAAM,UAAU;;QAElC,CAAA,EAGF,oBAAC,OAAD;QACE,OAAO;SACL,UAAU,cAAc,MAAM,SAAS;SACvC,OAAO,IAAI,MAAM,OAAO,aAAa,SAAS,GAAG,CAAC,SAChD,GACA,IACD;SACD,eAAe,cAAc,MAAM,QAAQ;SAC3C,WAAW;SACX,WAAW,cAAc,MAAM,QAAQ;SACvC,YAAY,OAAO;SACpB;QACD,eAAY;kBACb;QAEK,CAAA,CACF;;MAGN,qBAAC,OAAD;OACE,OAAO;QACL,OAAO;QACP,MAAM;QACN,SAAS;QACT,eAAe;QACf,YAAY;QACZ,gBAAgB;QAChB,KAAK;QACL,aAAa,cAAc,MAAM,QAAQ;QACzC,cAAc,cAAc,MAAM,QAAQ;QAC1C,UAAU;QACV,eAAe;QACf,WAAW;QACZ;OACD,eAAY;iBAfd,CAkBE,oBAAC,OAAD;QACE,OAAO;SACL,OAAO,cAAc,MAAM,QAAQ;SACnC,UAAU,cAAc,MAAM,SAAS;SACxC;QACD,eAAY;kBAEZ,oBAAC,wBAAD;SACE,WAAW;SACX,eAAe;SACf,cAAc;SACd,uBAAuB;SACvB,WAAW,MAAM;SACjB,OAEE,cAAc,MACV,cAAc,KACd,cAAc,OACZ,KAAK,IAAI,KAAK,cAAc,GAAI,GAChC,KAAK,IAAI,KAAK,cAAc,GAAI;SAExC,QAAQ,cAAc;SACZ;SACV,CAAA;QACE,CAAA,EAGN,oBAAC,OAAD;QACE,OAAO;SACL,OAAO,cAAc,MAAM,SAAS;SACpC,UAAU,cAAc,MAAM,SAAS;SACvC,MAAM;SACN,WAAW;SACX,WAAW;SACX,WAAW;SACZ;QACD,eAAY;kBAEX,8BACC,oBAAC,0BAAD;SACE,YAAY;SACZ,eAAe;SACf,mBAAmB;SACnB,WAAW,MAAM;SACjB,OACE,cAAc,MACV,cAAc,KACd,cAAc,OACZ,KAAK,IAAI,KAAK,cAAc,GAAI,GAChC,KAAK,IAAI,KAAK,cAAc,IAAK;SAEzC,QAAQ,KAAK,IAAI,cAAc,kBAAkB,IAAI,IAAI;SAC/C;SACV,mBAAmB,eAAe;SAClC,CAAA,GAEF,oBAAC,6BAAD;SACE,YAAY;SACZ,eAAe;SACf,mBAAmB;SACnB,WAAW,MAAM;SACjB,OACE,cAAc,MACV,cAAc,KACd,cAAc,OACZ,KAAK,IAAI,KAAK,cAAc,GAAI,GAChC,KAAK,IAAI,KAAK,cAAc,IAAK;SAEzC,QAAQ,KAAK,IAAI,cAAc,kBAAkB,IAAI,IAAI;SAC/C;SACV,CAAA;QAEA,CAAA,CACF;;MAGN,qBAAC,OAAD;OACE,OAAO;QACL,OAAO;QACP,WAAW,GAAG,cAAc,aAAa;QACzC,SAAS;QACT,eAAe;QACf,YAAY;QACZ,gBAAgB;QAChB,KAAK;QACL,YAAY,gDAAgD,OAAO,iBAAiB;QACpF,WAAW,aAAa,OAAO;QAC/B,eAAe;QACf,eAAe;QACf,YAAY;QACb;OACD,eAAY;iBAfd;QAkBE,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,GAAG,KAAK,IAAI,kBAAkB,SAAS,YAAY,GAAG,GAAG,GAAG,CAAC;UACvE,OAAO,IAAI,MAAM,OAAO,YAAY,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;UACjE,YAAY,MAAM,iBAAiB;UACnC,WAAW;UACX,WAAW;UACZ;SACD,eAAY;mBACb;SAEK,CAAA;QAEN,oBAAC,OAAD;SACE,OAAO;UACL,UAAU,GAAG,KAAK,IAAI,kBAAkB,SAAS,YAAY,GAAG,GAAG,EAAE,CAAC;UACtE,OAAO,IAAI,MAAM,OAAO,YAAY,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;UACjE,WAAW;UACX,QAAQ;UACT;SACD,eACE,OAAO,KAAK,0CAA0C,SAAS;SAEjE,eAAY;mBACb;SAEK,CAAA;QAEN,qBAAC,OAAD;SACE,OAAO;UACL,UAAU,GAAG,KAAK,IAAI,kBAAkB,SAAS,YAAY,GAAG,GAAG,EAAE,CAAC;UACtE,OAAO,IAAI,MAAM,OAAO,YAAY,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;UACjE,WAAW;UACX,QAAQ;UACT;SACD,eACE,OAAO,KACL,wDAAwD,eACxD,SACD;SAEH,eAAY;mBAbd,CAcC,KACG,YACE;;QACF;;MACF;;IACF,CAAA;GACF"}