blacktrigram 0.7.2

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

@@ -0,0 +1,367 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import { Z_INDEX } from "../../../types/LayoutTypes.js";
+import { useWebGLContextLossHandler } from "../../../hooks/useWebGLContextLossHandler.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../shared/base/useKoreanTheme.js";
+import { BaseButtonOverlayHtml } from "../../shared/base/BaseButtonOverlayHtml.js";
+import { VolumeControl } from "../../shared/ui/VolumeControl.js";
+import { detectPlatform, shouldUseMobileControls } from "../../../utils/deviceDetection.js";
+import useWindowSize from "../../../hooks/useWindowSize.js";
+import { DefeatAnimation3D } from "./components/DefeatAnimation3D.js";
+import { MatchStatisticsDisplay } from "./components/MatchStatisticsDisplayOverlayHtml.js";
+import { NavigationButtons } from "./components/NavigationButtonsOverlayHtml.js";
+import { PerformanceBreakdown } from "./components/PerformanceBreakdownOverlayHtml.js";
+import { PerformanceRating } from "./components/PerformanceRatingOverlayHtml.js";
+import { VictoryAnimation3D } from "./components/VictoryAnimation3D.js";
+import { WinnerDisplay } from "./components/WinnerDisplayOverlayHtml.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { PerspectiveCamera } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/screens/endscreen/EndScreen3D.tsx
+/**
+* Helper to convert hex color to CSS string
+*/
+var toCssColor = (hex) => hexToRgbaString(hex, 1);
+/**
+* Three.js-based End Screen Component
+* Displays victory/defeat screen with match statistics and 3D effects
+*/
+var BackgroundParticles3D = ({ color }) => {
+	const pointsRef = useRef(null);
+	const [particleData] = useState(() => {
+		const count = 100;
+		const pos = new Float32Array(count * 3);
+		const vel = new Float32Array(count * 3);
+		for (let i = 0; i < count; i++) {
+			const i3 = i * 3;
+			pos[i3] = (Math.random() - .5) * 40;
+			pos[i3 + 1] = (Math.random() - .5) * 30;
+			pos[i3 + 2] = (Math.random() - .5) * 20;
+			vel[i3] = (Math.random() - .5) * .5;
+			vel[i3 + 1] = Math.random() * .3;
+			vel[i3 + 2] = (Math.random() - .5) * .5;
+		}
+		return {
+			positions: pos,
+			velocities: vel
+		};
+	});
+	const { positions, velocities } = particleData;
+	useFrame((_state, delta) => {
+		if (!pointsRef.current) return;
+		const attr = pointsRef.current.geometry.attributes.position;
+		const array = attr.array;
+		for (let i = 0; i < 100; i++) {
+			const i3 = i * 3;
+			array[i3] += velocities[i3] * delta;
+			array[i3 + 1] += velocities[i3 + 1] * delta;
+			array[i3 + 2] += velocities[i3 + 2] * delta;
+			if (array[i3 + 1] > 15) array[i3 + 1] = -15;
+			if (Math.abs(array[i3]) > 20) array[i3] = -array[i3];
+			if (Math.abs(array[i3 + 2]) > 10) array[i3 + 2] = -array[i3 + 2];
+		}
+		attr.needsUpdate = true;
+	});
+	return /* @__PURE__ */ jsxs("points", {
+		ref: pointsRef,
+		children: [/* @__PURE__ */ jsx("bufferGeometry", { children: /* @__PURE__ */ jsx("bufferAttribute", {
+			attach: "attributes-position",
+			count: 100,
+			itemSize: 3,
+			args: [positions, 3]
+		}) }), /* @__PURE__ */ jsx("pointsMaterial", {
+			size: .15,
+			color: new THREE.Color(color),
+			transparent: true,
+			opacity: .6,
+			sizeAttenuation: true,
+			depthWrite: false
+		})]
+	});
+};
+/**
+* Main Three.js background scene
+*/
+var EndScreenBackground3D = ({ isVictory, isMobile }) => {
+	const gridRef = useRef(null);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	useFrame(() => {
+		if (gridRef.current) gridRef.current.rotation.y += 5e-4;
+	});
+	const primaryColor = isVictory ? theme.colors.ACCENT_GOLD : theme.colors.ACCENT_RED;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("ambientLight", {
+			intensity: .3,
+			color: theme.colors.PRIMARY_CYAN
+		}),
+		/* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				10,
+				15,
+				10
+			],
+			intensity: isVictory ? 1.2 : .8,
+			color: primaryColor
+		}),
+		/* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				-10,
+				10,
+				-5
+			],
+			intensity: .5,
+			color: theme.colors.PRIMARY_CYAN
+		}),
+		/* @__PURE__ */ jsx("pointLight", {
+			position: [
+				0,
+				5,
+				0
+			],
+			intensity: isVictory ? 2 : 1,
+			distance: 30,
+			color: primaryColor
+		}),
+		/* @__PURE__ */ jsx("gridHelper", {
+			ref: gridRef,
+			args: [
+				40,
+				40,
+				primaryColor,
+				theme.colors.UI_BACKGROUND_MEDIUM
+			],
+			position: [
+				0,
+				-5,
+				0
+			]
+		}),
+		/* @__PURE__ */ jsx(BackgroundParticles3D, { color: primaryColor }),
+		isVictory ? /* @__PURE__ */ jsx(VictoryAnimation3D, {}) : /* @__PURE__ */ jsx(DefeatAnimation3D, {})
+	] });
+};
+/**
+* EndScreen3D Component
+* Three.js-based end screen with Korean theming
+*/
+var EndScreen3D = ({ winner, matchStats, onReturnToMenu, onRematch, onViewReplay, width: propWidth, height: propHeight }) => {
+	useWebGLContextLossHandler({
+		onContextLost: () => {
+			console.warn("⚠️ WebGL context lost in EndScreen");
+		},
+		autoRestore: true
+	});
+	const audio = useAudio();
+	const [showStats, setShowStats] = useState(false);
+	const [showBreakdown, setShowBreakdown] = useState(false);
+	const { width: windowWidth, height: windowHeight } = useWindowSize();
+	const screenWidth = propWidth ?? windowWidth;
+	const winnerId = winner.id;
+	const isVictory = winnerId === "player-0" || winnerId.endsWith("-0");
+	const isMobile = useMemo(() => shouldUseMobileControls(), []);
+	const platform = useMemo(() => detectPlatform(), []);
+	const isTablet = useMemo(() => platform.isTablet, [platform]);
+	const isLargeDesktop = useMemo(() => screenWidth >= 1920, [screenWidth]);
+	const layoutConstants = useMemo(() => ({
+		titleFontSize: isMobile ? 36 : isTablet ? 44 : isLargeDesktop ? 44 : 54,
+		subtitleFontSize: isMobile ? 18 : isTablet ? 22 : isLargeDesktop ? 22 : 28,
+		buttonFontSize: isMobile ? 14 : isTablet ? 15 : isLargeDesktop ? 14 : 16,
+		padding: isMobile ? 15 : isTablet ? 18 : isLargeDesktop ? 15 : 20,
+		buttonPadding: isMobile ? "10px 20px" : isTablet ? "11px 22px" : isLargeDesktop ? "10px 20px" : "12px 25px",
+		spacing: isMobile ? 15 : isTablet ? 18 : isLargeDesktop ? 15 : 20
+	}), [
+		isMobile,
+		isTablet,
+		isLargeDesktop
+	]);
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	useEffect(() => {
+		if (isVictory) {
+			audio.playSFX?.("victory_fanfare");
+			const timeoutId = setTimeout(() => {
+				audio.playMusic?.("victory_theme");
+			}, 1e3);
+			return () => {
+				clearTimeout(timeoutId);
+				audio.stopMusic?.();
+			};
+		} else {
+			audio.playSFX?.("defeat_sound");
+			audio.playMusic?.("defeat_theme");
+			return () => {
+				audio.stopMusic?.();
+			};
+		}
+	}, [audio, isVictory]);
+	const toggleStats = useCallback(() => {
+		audio.playSFX?.("menu_hover");
+		setShowStats((prev) => !prev);
+	}, [audio]);
+	const toggleBreakdown = useCallback(() => {
+		audio.playSFX?.("menu_hover");
+		setShowBreakdown((prev) => !prev);
+	}, [audio]);
+	const handlePlaySelectSound = useCallback(() => {
+		audio.playSFX?.("menu_select");
+	}, [audio]);
+	const handlePlayHoverSound = useCallback(() => {
+		audio.playSFX?.("menu_hover");
+	}, [audio]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "end-screen-3d",
+		style: {
+			width: "100vw",
+			height: "100vh",
+			position: "relative",
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ jsx(VolumeControl, {
+				position: "top-right",
+				compact: isMobile
+			}),
+			/* @__PURE__ */ jsxs(Canvas, {
+				style: {
+					width: "100%",
+					height: "100%",
+					position: "absolute",
+					top: 0,
+					left: 0,
+					zIndex: Z_INDEX.ARENA
+				},
+				dpr: [1, 2],
+				gl: {
+					antialias: true,
+					alpha: false,
+					powerPreference: "high-performance"
+				},
+				onCreated: ({ gl }) => {
+					gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);
+				},
+				"data-testid": "end-screen-canvas",
+				children: [/* @__PURE__ */ jsx(PerspectiveCamera, {
+					makeDefault: true,
+					position: [
+						0,
+						5,
+						15
+					],
+					fov: 60
+				}), /* @__PURE__ */ jsx(EndScreenBackground3D, {
+					isVictory,
+					isMobile
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-testid": "end-screen-overlay",
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					justifyContent: "center",
+					fontFamily: theme.koreanTypography.fontFamily,
+					lineHeight: theme.koreanTypography.lineHeight,
+					letterSpacing: theme.koreanTypography.letterSpacing,
+					wordBreak: theme.koreanTypography.wordBreak,
+					color: toCssColor(theme.colors.TEXT_PRIMARY),
+					padding: layoutConstants.padding,
+					boxSizing: "border-box",
+					overflowY: "auto",
+					zIndex: Z_INDEX.HUD,
+					pointerEvents: "none"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						maxHeight: "100%",
+						pointerEvents: "auto"
+					},
+					children: [
+						/* @__PURE__ */ jsx(WinnerDisplay, {
+							winner,
+							isVictory,
+							isMobile,
+							isTablet
+						}),
+						/* @__PURE__ */ jsx(PerformanceRating, {
+							matchStats,
+							isMobile,
+							isTablet
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: { marginBottom: layoutConstants.spacing },
+							children: /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+								korean: showStats ? "통계 숨기기" : "통계 보기",
+								english: showStats ? "Hide Stats" : "View Stats",
+								onClick: toggleStats,
+								onMouseEnter: () => audio.playSFX?.("menu_hover"),
+								variant: "secondary",
+								size: isMobile ? "sm" : "md",
+								fullWidth: true,
+								testId: "toggle-stats-button",
+								ariaLabel: showStats ? "Hide match statistics" : "View match statistics",
+								isMobile
+							})
+						}),
+						showStats && /* @__PURE__ */ jsx(MatchStatisticsDisplay, {
+							matchStats,
+							isMobile,
+							isTablet
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: { marginBottom: layoutConstants.spacing },
+							children: /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+								korean: showBreakdown ? "분석 숨기기" : "상세 분석",
+								english: showBreakdown ? "Hide Breakdown" : "View Breakdown",
+								onClick: toggleBreakdown,
+								onMouseEnter: () => audio.playSFX?.("menu_hover"),
+								variant: "primary",
+								size: isMobile ? "sm" : "md",
+								fullWidth: true,
+								testId: "toggle-breakdown-button",
+								ariaLabel: showBreakdown ? "Hide performance breakdown" : "View performance breakdown",
+								isMobile
+							})
+						}),
+						showBreakdown && /* @__PURE__ */ jsx(PerformanceBreakdown, {
+							matchStats,
+							isMobile,
+							isTablet
+						}),
+						/* @__PURE__ */ jsx(NavigationButtons, {
+							onReturnToMenu,
+							onRematch,
+							onViewReplay,
+							isMobile,
+							isTablet,
+							width: screenWidth,
+							onPlaySelectSound: handlePlaySelectSound,
+							onPlayHoverSound: handlePlayHoverSound
+						})
+					]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { EndScreen3D };
+
+//# sourceMappingURL=EndScreen3D.js.map

package/lib/components/screens/endscreen/EndScreen3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EndScreen3D.js","names":[],"sources":["../../../../src/components/screens/endscreen/EndScreen3D.tsx"],"sourcesContent":["import { PerspectiveCamera } from \"@react-three/drei\";\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport * as THREE from \"three\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { useWindowSize } from \"../../../hooks/useWindowSize\";\nimport { PlayerState } from \"../../../systems\";\nimport { MatchStatistics } from \"../../../systems/combat\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport {\n  detectPlatform,\n  shouldUseMobileControls,\n} from \"../../../utils/deviceDetection\";\nimport { BaseButtonOverlayHtml } from \"../../shared/base/BaseButtonOverlayHtml\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport { VolumeControl } from \"../../shared/ui/VolumeControl\";\nimport { DefeatAnimation3D } from \"./components/DefeatAnimation3D\";\nimport { MatchStatisticsDisplay } from \"./components/MatchStatisticsDisplayOverlayHtml\";\nimport { NavigationButtons } from \"./components/NavigationButtonsOverlayHtml\";\nimport { PerformanceBreakdown } from \"./components/PerformanceBreakdownOverlayHtml\";\nimport { PerformanceRating } from \"./components/PerformanceRatingOverlayHtml\";\nimport { VictoryAnimation3D } from \"./components/VictoryAnimation3D\";\nimport { WinnerDisplay } from \"./components/WinnerDisplayOverlayHtml\";\n\nexport interface EndScreen3DProps {\n  readonly winner: PlayerState;\n  readonly matchStats: MatchStatistics;\n  readonly onReturnToMenu: () => void;\n  readonly onRematch?: () => void;\n  readonly onViewReplay?: () => void;\n  readonly width?: number;\n  readonly height?: number;\n}\n\n/**\n * Helper to convert hex color to CSS string\n */\nconst toCssColor = (hex: number): string => hexToRgbaString(hex, 1);\n\n/**\n * Three.js-based End Screen Component\n * Displays victory/defeat screen with match statistics and 3D effects\n */\nconst BackgroundParticles3D: React.FC<{ color: number }> = ({ color }) => {\n  const pointsRef = useRef<THREE.Points>(null);\n\n  // Use useState with lazy initializer for random values - this is only called once\n  const [particleData] = useState(() => {\n    const count = 100;\n    const pos = new Float32Array(count * 3);\n    const vel = new Float32Array(count * 3);\n\n    for (let i = 0; i < count; i++) {\n      const i3 = i * 3;\n      pos[i3] = (Math.random() - 0.5) * 40;\n      pos[i3 + 1] = (Math.random() - 0.5) * 30;\n      pos[i3 + 2] = (Math.random() - 0.5) * 20;\n\n      vel[i3] = (Math.random() - 0.5) * 0.5;\n      vel[i3 + 1] = Math.random() * 0.3;\n      vel[i3 + 2] = (Math.random() - 0.5) * 0.5;\n    }\n    return { positions: pos, velocities: vel };\n  });\n\n  const { positions, velocities } = particleData;\n\n  useFrame((_state, delta) => {\n    if (!pointsRef.current) return;\n\n    const attr = pointsRef.current.geometry.attributes.position;\n    const array = attr.array as Float32Array;\n\n    for (let i = 0; i < 100; i++) {\n      const i3 = i * 3;\n\n      array[i3] += velocities[i3] * delta;\n      array[i3 + 1] += velocities[i3 + 1] * delta;\n      array[i3 + 2] += velocities[i3 + 2] * delta;\n\n      // Wrap around\n      if (array[i3 + 1] > 15) {\n        array[i3 + 1] = -15;\n      }\n      if (Math.abs(array[i3]) > 20) {\n        array[i3] = -array[i3];\n      }\n      if (Math.abs(array[i3 + 2]) > 10) {\n        array[i3 + 2] = -array[i3 + 2];\n      }\n    }\n\n    attr.needsUpdate = true;\n  });\n\n  return (\n    <points ref={pointsRef}>\n      <bufferGeometry>\n        <bufferAttribute\n          attach=\"attributes-position\"\n          count={100}\n          itemSize={3}\n          args={[positions, 3]}\n        />\n      </bufferGeometry>\n      <pointsMaterial\n        size={0.15}\n        color={new THREE.Color(color)}\n        transparent\n        opacity={0.6}\n        sizeAttenuation\n        depthWrite={false}\n      />\n    </points>\n  );\n};\n\n/**\n * Main Three.js background scene\n */\nconst EndScreenBackground3D: React.FC<{ \n  isVictory: boolean;\n  isMobile: boolean;\n}> = ({\n  isVictory,\n  isMobile,\n}) => {\n  const gridRef = useRef<THREE.GridHelper>(null);\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  useFrame(() => {\n    if (gridRef.current) {\n      gridRef.current.rotation.y += 0.0005;\n    }\n  });\n\n  const primaryColor = isVictory\n    ? theme.colors.ACCENT_GOLD\n    : theme.colors.ACCENT_RED;\n\n  return (\n    <>\n      {/* Ambient lighting */}\n      <ambientLight intensity={0.3} color={theme.colors.PRIMARY_CYAN} />\n\n      {/* Directional lights */}\n      <directionalLight\n        position={[10, 15, 10]}\n        intensity={isVictory ? 1.2 : 0.8}\n        color={primaryColor}\n      />\n      <directionalLight\n        position={[-10, 10, -5]}\n        intensity={0.5}\n        color={theme.colors.PRIMARY_CYAN}\n      />\n\n      {/* Point light for dramatic effect */}\n      <pointLight\n        position={[0, 5, 0]}\n        intensity={isVictory ? 2 : 1}\n        distance={30}\n        color={primaryColor}\n      />\n\n      {/* Grid for cyberpunk aesthetic */}\n      <gridHelper\n        ref={gridRef}\n        args={[40, 40, primaryColor, theme.colors.UI_BACKGROUND_MEDIUM]}\n        position={[0, -5, 0]}\n      />\n\n      {/* Background particles */}\n      <BackgroundParticles3D color={primaryColor} />\n\n      {/* Victory or Defeat animation */}\n      {isVictory ? <VictoryAnimation3D /> : <DefeatAnimation3D />}\n    </>\n  );\n};\n\n/**\n * EndScreen3D Component\n * Three.js-based end screen with Korean theming\n */\nexport const EndScreen3D: React.FC<EndScreen3DProps> = ({\n  winner,\n  matchStats,\n  onReturnToMenu,\n  onRematch,\n  onViewReplay,\n  width: propWidth,\n  height: propHeight,\n}) => {\n  // Handle WebGL context loss and restoration\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in EndScreen\");\n    },\n    autoRestore: true,\n  });\n\n  const audio = useAudio();\n  const [showStats, setShowStats] = useState(false);\n  const [showBreakdown, setShowBreakdown] = useState(false);\n\n  // Use window size for responsive layout with resize support\n  const { width: windowWidth, height: windowHeight } = useWindowSize();\n  const screenWidth = propWidth ?? windowWidth;\n  // Note: windowHeight available but not currently used - screenWidth sufficient for current responsive logic\n  void (propHeight ?? windowHeight); // Consumed but not stored\n\n  // Determine if this is a victory screen (winner is player 0 by convention - extracted from id)\n  const winnerId = winner.id;\n  const isVictory = winnerId === \"player-0\" || winnerId.endsWith(\"-0\");\n\n  // Responsive layout with proper device detection\n  // Uses user-agent detection for mobile controls (supports high-res phones)\n  // User-agent doesn't change during session, so no dependencies needed\n  const isMobile = useMemo(() => shouldUseMobileControls(), []);\n  const platform = useMemo(() => detectPlatform(), []);\n  const isTablet = useMemo(() => platform.isTablet, [platform]);\n  const isLargeDesktop = useMemo(() => screenWidth >= 1920, [screenWidth]); // 4K/2K displays\n\n  const layoutConstants = useMemo(\n    () => ({\n      titleFontSize: isMobile ? 36 : isTablet ? 44 : isLargeDesktop ? 44 : 54,\n      subtitleFontSize: isMobile\n        ? 18\n        : isTablet\n          ? 22\n          : isLargeDesktop\n            ? 22\n            : 28,\n      buttonFontSize: isMobile ? 14 : isTablet ? 15 : isLargeDesktop ? 14 : 16,\n      padding: isMobile ? 15 : isTablet ? 18 : isLargeDesktop ? 15 : 20,\n      buttonPadding: isMobile\n        ? \"10px 20px\"\n        : isTablet\n          ? \"11px 22px\"\n          : isLargeDesktop\n            ? \"10px 20px\"\n            : \"12px 25px\",\n      spacing: isMobile ? 15 : isTablet ? 18 : isLargeDesktop ? 15 : 20,\n    }),\n    [isMobile, isTablet, isLargeDesktop],\n  );\n\n  // Use Korean theme hook for consistent theming\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  // Play victory/defeat audio on mount\n  useEffect(() => {\n    if (isVictory) {\n      audio.playSFX?.(\"victory_fanfare\");\n      const timeoutId = setTimeout(() => {\n        audio.playMusic?.(\"victory_theme\");\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeoutId);\n        audio.stopMusic?.();\n      };\n    } else {\n      audio.playSFX?.(\"defeat_sound\");\n      audio.playMusic?.(\"defeat_theme\");\n\n      return () => {\n        audio.stopMusic?.();\n      };\n    }\n  }, [audio, isVictory]);\n\n  const toggleStats = useCallback(() => {\n    audio.playSFX?.(\"menu_hover\");\n    setShowStats((prev) => !prev);\n  }, [audio]);\n\n  const toggleBreakdown = useCallback(() => {\n    audio.playSFX?.(\"menu_hover\");\n    setShowBreakdown((prev) => !prev);\n  }, [audio]);\n\n  // Audio callbacks for NavigationButtons (inside Html portal which doesn't have AudioProvider context)\n  const handlePlaySelectSound = useCallback(() => {\n    audio.playSFX?.(\"menu_select\");\n  }, [audio]);\n\n  const handlePlayHoverSound = useCallback(() => {\n    audio.playSFX?.(\"menu_hover\");\n  }, [audio]);\n\n  return (\n    <div\n      data-testid=\"end-screen-3d\"\n      style={{\n        width: \"100vw\",\n        height: \"100vh\",\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Volume Control - outside Canvas to maintain AudioProvider context */}\n      <VolumeControl position=\"top-right\" compact={isMobile} />\n\n      {/* 3D Background Canvas */}\n      <Canvas\n        style={{\n          width: \"100%\",\n          height: \"100%\",\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          zIndex: Z_INDEX.ARENA,\n        }}\n        dpr={[1, 2]}\n        gl={{\n          antialias: true,\n          alpha: false,\n          powerPreference: \"high-performance\",\n        }}\n        onCreated={({ gl }) => {\n          gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n        }}\n        data-testid=\"end-screen-canvas\"\n      >\n        {/* Camera */}\n        <PerspectiveCamera makeDefault position={[0, 5, 15]} fov={60} />\n\n        {/* Background scene */}\n        <EndScreenBackground3D isVictory={isVictory} isMobile={isMobile} />\n      </Canvas>\n\n      {/* UI Overlay - outside Canvas for proper layout and AudioProvider context */}\n      <div\n        data-testid=\"end-screen-overlay\"\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontFamily: theme.koreanTypography.fontFamily,\n          lineHeight: theme.koreanTypography.lineHeight,\n          letterSpacing: theme.koreanTypography.letterSpacing,\n          wordBreak: theme.koreanTypography.wordBreak,\n          color: toCssColor(theme.colors.TEXT_PRIMARY),\n          padding: layoutConstants.padding,\n          boxSizing: \"border-box\",\n          overflowY: \"auto\",\n          zIndex: Z_INDEX.HUD,\n          pointerEvents: \"none\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            maxHeight: \"100%\",\n            pointerEvents: \"auto\",\n          }}\n        >\n          {/* Winner Display Component */}\n          <WinnerDisplay\n            winner={winner}\n            isVictory={isVictory}\n            isMobile={isMobile}\n            isTablet={isTablet}\n          />\n\n          {/* Performance Rating Component */}\n          <PerformanceRating\n            matchStats={matchStats}\n            isMobile={isMobile}\n            isTablet={isTablet}\n          />\n\n          {/* Match Statistics Toggle */}\n          <div style={{ marginBottom: layoutConstants.spacing }}>\n            <BaseButtonOverlayHtml\n              korean={showStats ? \"통계 숨기기\" : \"통계 보기\"}\n              english={showStats ? \"Hide Stats\" : \"View Stats\"}\n              onClick={toggleStats}\n              onMouseEnter={() => audio.playSFX?.(\"menu_hover\")}\n              variant=\"secondary\"\n              size={isMobile ? \"sm\" : \"md\"}\n              fullWidth\n              testId=\"toggle-stats-button\"\n              ariaLabel={showStats ? \"Hide match statistics\" : \"View match statistics\"}\n              isMobile={isMobile}\n            />\n          </div>\n\n          {/* Match Statistics Display */}\n          {showStats && (\n            <MatchStatisticsDisplay\n              matchStats={matchStats}\n              isMobile={isMobile}\n              isTablet={isTablet}\n            />\n          )}\n\n          {/* Performance Breakdown Toggle */}\n          <div style={{ marginBottom: layoutConstants.spacing }}>\n            <BaseButtonOverlayHtml\n              korean={showBreakdown ? \"분석 숨기기\" : \"상세 분석\"}\n              english={showBreakdown ? \"Hide Breakdown\" : \"View Breakdown\"}\n              onClick={toggleBreakdown}\n              onMouseEnter={() => audio.playSFX?.(\"menu_hover\")}\n              variant=\"primary\"\n              size={isMobile ? \"sm\" : \"md\"}\n              fullWidth\n              testId=\"toggle-breakdown-button\"\n              ariaLabel={showBreakdown ? \"Hide performance breakdown\" : \"View performance breakdown\"}\n              isMobile={isMobile}\n            />\n          </div>\n\n          {/* Performance Breakdown Display */}\n          {showBreakdown && (\n            <PerformanceBreakdown\n              matchStats={matchStats}\n              isMobile={isMobile}\n              isTablet={isTablet}\n            />\n          )}\n\n          {/* Navigation Buttons Component */}\n          <NavigationButtons\n            onReturnToMenu={onReturnToMenu}\n            onRematch={onRematch}\n            onViewReplay={onViewReplay}\n            isMobile={isMobile}\n            isTablet={isTablet}\n            width={screenWidth}\n            onPlaySelectSound={handlePlaySelectSound}\n            onPlayHoverSound={handlePlayHoverSound}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Defeat Animation 3D Component
+ * Displays somber 3D particle effects for defeat screen
+ * Uses blue/cyan tones to contrast with gold victory effects
+ * Optimized for 60fps performance with object reuse
+ */
+export declare const DefeatAnimation3D: React.FC;
+//# sourceMappingURL=DefeatAnimation3D.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefeatAnimation3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/DefeatAnimation3D.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAkMrC,CAAC"}

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

@@ -0,0 +1,205 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+//#region src/components/screens/endscreen/components/DefeatAnimation3D.tsx
+/**
+* Defeat Animation 3D Component
+* Displays somber 3D particle effects for defeat screen
+* Uses blue/cyan tones to contrast with gold victory effects
+* Optimized for 60fps performance with object reuse
+*/
+var DefeatAnimation3D = () => {
+	const groupRef = useRef(null);
+	const particlesRef = useRef(null);
+	const spiralRef = useRef(null);
+	const [reusableScale] = useState(() => new THREE.Vector3());
+	const [reusablePosition] = useState(() => new THREE.Vector3());
+	const [particlePositions] = useState(() => {
+		const count = 100;
+		const positions = new Float32Array(count * 3);
+		for (let i = 0; i < count; i++) {
+			const i3 = i * 3;
+			const radius = 2 + Math.random() * 3;
+			const theta = Math.random() * Math.PI * 2;
+			const phi = Math.random() * Math.PI;
+			positions[i3] = radius * Math.sin(phi) * Math.cos(theta);
+			positions[i3 + 1] = radius * Math.cos(phi) - 1;
+			positions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta);
+		}
+		return positions;
+	});
+	useFrame((state) => {
+		const time = state.clock.elapsedTime;
+		if (groupRef.current) groupRef.current.rotation.y = time * .15;
+		if (particlesRef.current) {
+			const scale = 1 + Math.sin(time * 1.5) * .1;
+			reusableScale.setScalar(scale);
+			particlesRef.current.scale.copy(reusableScale);
+			const yPos = Math.sin(time * .5) * .3 - .2;
+			reusablePosition.set(0, yPos, 0);
+			particlesRef.current.position.copy(reusablePosition);
+		}
+		if (spiralRef.current) {
+			spiralRef.current.rotation.y = -time * .2;
+			spiralRef.current.rotation.z = Math.sin(time * .3) * .2;
+		}
+	});
+	useEffect(() => {
+		const group = groupRef.current;
+		const particles = particlesRef.current;
+		const spiral = spiralRef.current;
+		return () => {
+			if (particles) {
+				particles.geometry?.dispose();
+				if (particles.material) particles.material.dispose();
+			}
+			if (spiral?.children && Array.isArray(spiral.children)) spiral.children.forEach((child) => {
+				if (child instanceof THREE.Mesh) {
+					child.geometry?.dispose();
+					if (child.material) child.material.dispose();
+				}
+			});
+			if (group?.children && Array.isArray(group.children)) group.children.forEach((child) => {
+				if (child === particles || child === spiral) return;
+				if (child instanceof THREE.Mesh) {
+					child.geometry?.dispose();
+					if (child.material) child.material.dispose();
+				} else if (child instanceof THREE.Points) {
+					child.geometry?.dispose();
+					if (child.material) child.material.dispose();
+				}
+			});
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("group", {
+		ref: groupRef,
+		position: [
+			0,
+			1,
+			0
+		],
+		"data-testid": "defeat-animation-3d",
+		children: [
+			/* @__PURE__ */ jsxs("points", {
+				ref: particlesRef,
+				children: [/* @__PURE__ */ jsx("bufferGeometry", { children: /* @__PURE__ */ jsx("bufferAttribute", {
+					attach: "attributes-position",
+					count: 100,
+					itemSize: 3,
+					args: [particlePositions, 3]
+				}) }), /* @__PURE__ */ jsx("pointsMaterial", {
+					size: .15,
+					color: new THREE.Color(KOREAN_COLORS.ACCENT_BLUE),
+					transparent: true,
+					opacity: .6,
+					sizeAttenuation: true,
+					depthWrite: false
+				})]
+			}),
+			/* @__PURE__ */ jsxs("group", {
+				ref: spiralRef,
+				children: [
+					/* @__PURE__ */ jsxs("mesh", {
+						rotation: [
+							Math.PI / 2,
+							0,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+							1.5,
+							.03,
+							12,
+							64
+						] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+							color: KOREAN_COLORS.PRIMARY_CYAN,
+							transparent: true,
+							opacity: .4
+						})]
+					}),
+					/* @__PURE__ */ jsxs("mesh", {
+						rotation: [
+							Math.PI / 2,
+							Math.PI / 4,
+							0
+						],
+						position: [
+							0,
+							-.3,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+							2,
+							.03,
+							12,
+							64
+						] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+							color: KOREAN_COLORS.ACCENT_BLUE,
+							transparent: true,
+							opacity: .3
+						})]
+					}),
+					/* @__PURE__ */ jsxs("mesh", {
+						rotation: [
+							Math.PI / 2,
+							Math.PI / 2,
+							0
+						],
+						position: [
+							0,
+							-.6,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+							2.5,
+							.03,
+							12,
+							64
+						] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+							color: KOREAN_COLORS.PRIMARY_CYAN,
+							transparent: true,
+							opacity: .2
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.4,
+				32,
+				32
+			] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+				color: KOREAN_COLORS.ACCENT_BLUE,
+				emissive: KOREAN_COLORS.ACCENT_BLUE,
+				emissiveIntensity: .8,
+				transparent: true,
+				opacity: .6
+			})] }),
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.7,
+				32,
+				32
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: KOREAN_COLORS.PRIMARY_CYAN,
+				transparent: true,
+				opacity: .15,
+				side: THREE.BackSide
+			})] }),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					0,
+					0,
+					0
+				],
+				intensity: 1.5,
+				distance: 8,
+				color: KOREAN_COLORS.ACCENT_BLUE
+			})
+		]
+	});
+};
+//#endregion
+export { DefeatAnimation3D };
+
+//# sourceMappingURL=DefeatAnimation3D.js.map

package/lib/components/screens/endscreen/components/DefeatAnimation3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefeatAnimation3D.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/DefeatAnimation3D.tsx"],"sourcesContent":["import { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\n\n/**\n * Defeat Animation 3D Component\n * Displays somber 3D particle effects for defeat screen\n * Uses blue/cyan tones to contrast with gold victory effects\n * Optimized for 60fps performance with object reuse\n */\nexport const DefeatAnimation3D: React.FC = () => {\n  const groupRef = useRef<THREE.Group>(null);\n  const particlesRef = useRef<THREE.Points>(null);\n  const spiralRef = useRef<THREE.Group>(null);\n\n  // Reusable objects for animation calculations to avoid per-frame allocations\n  // These are reused across all animation frames for scale and position updates\n  const [reusableScale] = useState(() => new THREE.Vector3());\n  const [reusablePosition] = useState(() => new THREE.Vector3());\n\n  // Create defeat particles - use useState with lazy initializer\n  const [particlePositions] = useState(() => {\n    const count = 100; // Fewer particles than victory for subdued effect\n    const positions = new Float32Array(count * 3);\n\n    for (let i = 0; i < count; i++) {\n      const i3 = i * 3;\n      const radius = 2 + Math.random() * 3;\n      const theta = Math.random() * Math.PI * 2;\n      const phi = Math.random() * Math.PI;\n\n      positions[i3] = radius * Math.sin(phi) * Math.cos(theta);\n      positions[i3 + 1] = radius * Math.cos(phi) - 1; // Lower starting position\n      positions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta);\n    }\n\n    return positions;\n  });\n\n  // Animate defeat effects with slower, descending motion - optimized for 60fps\n  useFrame((state) => {\n    const time = state.clock.elapsedTime;\n\n    // Slow rotation\n    if (groupRef.current) {\n      groupRef.current.rotation.y = time * 0.15; // Slower than victory\n    }\n\n    // Fade particles downward - use reusable objects\n    if (particlesRef.current) {\n      const scale = 1 + Math.sin(time * 1.5) * 0.1; // Subtle pulsing\n      reusableScale.setScalar(scale);\n      particlesRef.current.scale.copy(reusableScale);\n      \n      // Slowly descend\n      const yPos = Math.sin(time * 0.5) * 0.3 - 0.2;\n      reusablePosition.set(0, yPos, 0);\n      particlesRef.current.position.copy(reusablePosition);\n    }\n\n    // Spiral effect - slower, descending\n    if (spiralRef.current) {\n      spiralRef.current.rotation.y = -time * 0.2; // Counter-rotation\n      spiralRef.current.rotation.z = Math.sin(time * 0.3) * 0.2;\n    }\n  });\n\n  // Cleanup Three.js resources on unmount\n  useEffect(() => {\n    // Capture ref values at effect setup time to avoid stale references in cleanup\n    const group = groupRef.current;\n    const particles = particlesRef.current;\n    const spiral = spiralRef.current;\n\n    return () => {\n      // Dispose geometries and materials to prevent memory leaks\n      if (particles) {\n        particles.geometry?.dispose();\n        if (particles.material) {\n          (particles.material as THREE.Material).dispose();\n        }\n      }\n      if (spiral?.children && Array.isArray(spiral.children)) {\n        spiral.children.forEach((child) => {\n          if (child instanceof THREE.Mesh) {\n            child.geometry?.dispose();\n            if (child.material) {\n              (child.material as THREE.Material).dispose();\n            }\n          }\n        });\n      }\n      // Additionally iterate over all group children to catch meshes/points without explicit refs\n      if (group?.children && Array.isArray(group.children)) {\n        group.children.forEach((child) => {\n          // Skip already-handled refs\n          if (child === particles || child === spiral) {\n            return;\n          }\n\n          if (child instanceof THREE.Mesh) {\n            child.geometry?.dispose();\n            if (child.material) {\n              (child.material as THREE.Material).dispose();\n            }\n          } else if (child instanceof THREE.Points) {\n            child.geometry?.dispose();\n            if (child.material) {\n              (child.material as THREE.Material).dispose();\n            }\n          }\n        });\n      }\n    };\n  }, []);\n\n  return (\n    <group\n      ref={groupRef}\n      position={[0, 1, 0]}\n      data-testid=\"defeat-animation-3d\"\n    >\n      {/* Defeat particles - blue/cyan theme */}\n      <points ref={particlesRef}>\n        <bufferGeometry>\n          <bufferAttribute\n            attach=\"attributes-position\"\n            count={100}\n            itemSize={3}\n            args={[particlePositions, 3]}\n          />\n        </bufferGeometry>\n        <pointsMaterial\n          size={0.15}\n          color={new THREE.Color(KOREAN_COLORS.ACCENT_BLUE)}\n          transparent\n          opacity={0.6}\n          sizeAttenuation\n          depthWrite={false}\n        />\n      </points>\n\n      {/* Descending spiral rings */}\n      <group ref={spiralRef}>\n        <mesh rotation={[Math.PI / 2, 0, 0]}>\n          <torusGeometry args={[1.5, 0.03, 12, 64]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.PRIMARY_CYAN}\n            transparent\n            opacity={0.4}\n          />\n        </mesh>\n\n        <mesh rotation={[Math.PI / 2, Math.PI / 4, 0]} position={[0, -0.3, 0]}>\n          <torusGeometry args={[2, 0.03, 12, 64]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.ACCENT_BLUE}\n            transparent\n            opacity={0.3}\n          />\n        </mesh>\n\n        <mesh rotation={[Math.PI / 2, Math.PI / 2, 0]} position={[0, -0.6, 0]}>\n          <torusGeometry args={[2.5, 0.03, 12, 64]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.PRIMARY_CYAN}\n            transparent\n            opacity={0.2}\n          />\n        </mesh>\n      </group>\n\n      {/* Central dimmed sphere */}\n      <mesh>\n        <sphereGeometry args={[0.4, 32, 32]} />\n        <meshStandardMaterial\n          color={KOREAN_COLORS.ACCENT_BLUE}\n          emissive={KOREAN_COLORS.ACCENT_BLUE}\n          emissiveIntensity={0.8}\n          transparent\n          opacity={0.6}\n        />\n      </mesh>\n\n      {/* Outer faint glow */}\n      <mesh>\n        <sphereGeometry args={[0.7, 32, 32]} />\n        <meshBasicMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          transparent\n          opacity={0.15}\n          side={THREE.BackSide}\n        />\n      </mesh>\n\n      {/* Point light for subdued glow effect */}\n      <pointLight\n        position={[0, 0, 0]}\n        intensity={1.5}\n        distance={8}\n        color={KOREAN_COLORS.ACCENT_BLUE}\n      />\n    </group>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { MatchStatistics } from "../../../../systems/combat";
+export interface MatchStatisticsDisplayProps {
+    readonly matchStats: MatchStatistics;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+}
+/**
+ * Match Statistics Display Component
+ * Shows detailed combat statistics for both players
+ */
+export declare const MatchStatisticsDisplay: React.FC<MatchStatisticsDisplayProps>;
+//# sourceMappingURL=MatchStatisticsDisplayOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MatchStatisticsDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/MatchStatisticsDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAK7D,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AA+LD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+LxE,CAAC"}