blacktrigram 0.7.2

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

@@ -0,0 +1,299 @@
+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/VictoryAnimation3D.tsx
+/**
+* Victory Animation 3D Component
+* Displays celebratory 3D particle effects for victory screen
+* Enhanced with additional Korean symbolism and dynamic effects
+* Optimized for 60fps performance with object reuse
+*/
+var VictoryAnimation3D = () => {
+	const groupRef = useRef(null);
+	const particlesRef = useRef(null);
+	const ringsRef = useRef(null);
+	const symbolsRef = useRef(null);
+	const [reusableScale] = useState(() => new THREE.Vector3());
+	const [reusablePosition] = useState(() => new THREE.Vector3());
+	const [particlePositions] = useState(() => {
+		const count = 200;
+		const positions = new Float32Array(count * 3);
+		for (let i = 0; i < count; i++) {
+			const i3 = i * 3;
+			const radius = 3 + Math.random() * 2;
+			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);
+			positions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta);
+		}
+		return positions;
+	});
+	const [secondaryParticles] = useState(() => {
+		const count = 50;
+		const positions = new Float32Array(count * 3);
+		for (let i = 0; i < count; i++) {
+			const i3 = i * 3;
+			const radius = 5 + Math.random() * 3;
+			const theta = Math.random() * Math.PI * 2;
+			positions[i3] = radius * Math.cos(theta);
+			positions[i3 + 1] = Math.random() * 4 - 2;
+			positions[i3 + 2] = radius * Math.sin(theta);
+		}
+		return positions;
+	});
+	useFrame((state) => {
+		const time = state.clock.elapsedTime;
+		if (groupRef.current) groupRef.current.rotation.y = time * .3;
+		if (particlesRef.current) {
+			const scale = 1 + Math.sin(time * 2) * .2;
+			reusableScale.setScalar(scale);
+			particlesRef.current.scale.copy(reusableScale);
+			reusablePosition.set(0, Math.sin(time * .8) * .5, 0);
+			particlesRef.current.position.copy(reusablePosition);
+		}
+		if (ringsRef.current) {
+			ringsRef.current.rotation.x = time * .5;
+			ringsRef.current.rotation.z = time * .3;
+		}
+		if (symbolsRef.current) {
+			symbolsRef.current.rotation.y = -time * .4;
+			symbolsRef.current.rotation.x = Math.sin(time * .5) * .1;
+		}
+	});
+	useEffect(() => {
+		const group = groupRef.current;
+		const particles = particlesRef.current;
+		const rings = ringsRef.current;
+		const symbols = symbolsRef.current;
+		return () => {
+			if (particles) {
+				particles.geometry?.dispose();
+				if (particles.material) particles.material.dispose();
+			}
+			if (rings?.children && Array.isArray(rings.children)) rings.children.forEach((child) => {
+				if (child instanceof THREE.Mesh) {
+					child.geometry?.dispose();
+					if (child.material) child.material.dispose();
+				}
+			});
+			if (symbols?.children && Array.isArray(symbols.children)) symbols.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 === rings || child === symbols) 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,
+			2,
+			0
+		],
+		"data-testid": "victory-animation-3d",
+		children: [
+			/* @__PURE__ */ jsxs("points", {
+				ref: particlesRef,
+				children: [/* @__PURE__ */ jsx("bufferGeometry", { children: /* @__PURE__ */ jsx("bufferAttribute", {
+					attach: "attributes-position",
+					count: 200,
+					itemSize: 3,
+					args: [particlePositions, 3]
+				}) }), /* @__PURE__ */ jsx("pointsMaterial", {
+					size: .2,
+					color: new THREE.Color(KOREAN_COLORS.ACCENT_GOLD),
+					transparent: true,
+					opacity: .8,
+					sizeAttenuation: true,
+					depthWrite: false
+				})]
+			}),
+			/* @__PURE__ */ jsxs("points", {
+				position: [
+					0,
+					1,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("bufferGeometry", { children: /* @__PURE__ */ jsx("bufferAttribute", {
+					attach: "attributes-position",
+					count: 50,
+					itemSize: 3,
+					args: [secondaryParticles, 3]
+				}) }), /* @__PURE__ */ jsx("pointsMaterial", {
+					size: .15,
+					color: new THREE.Color(KOREAN_COLORS.PRIMARY_CYAN),
+					transparent: true,
+					opacity: .6,
+					sizeAttenuation: true,
+					depthWrite: false
+				})]
+			}),
+			/* @__PURE__ */ jsxs("group", {
+				ref: ringsRef,
+				children: [
+					/* @__PURE__ */ jsxs("mesh", {
+						rotation: [
+							Math.PI / 2,
+							0,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+							2,
+							.05,
+							16,
+							100
+						] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+							color: KOREAN_COLORS.PRIMARY_CYAN,
+							transparent: true,
+							opacity: .6
+						})]
+					}),
+					/* @__PURE__ */ jsxs("mesh", {
+						rotation: [
+							Math.PI / 2,
+							Math.PI / 4,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+							2.5,
+							.05,
+							16,
+							100
+						] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+							color: KOREAN_COLORS.ACCENT_GOLD,
+							transparent: true,
+							opacity: .4
+						})]
+					}),
+					/* @__PURE__ */ jsxs("mesh", {
+						rotation: [
+							Math.PI / 2,
+							Math.PI / 2,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("torusGeometry", { args: [
+							3,
+							.05,
+							16,
+							100
+						] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+							color: KOREAN_COLORS.PRIMARY_CYAN,
+							transparent: true,
+							opacity: .3
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("group", {
+				ref: symbolsRef,
+				children: Array.from({ length: 8 }).map((_, i) => {
+					const angle = i / 8 * Math.PI * 2;
+					const radius = 4;
+					return /* @__PURE__ */ jsxs("mesh", {
+						position: [
+							Math.cos(angle) * radius,
+							0,
+							Math.sin(angle) * radius
+						],
+						rotation: [
+							0,
+							angle + Math.PI / 2,
+							0
+						],
+						children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+							.8,
+							.1,
+							.1
+						] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+							color: KOREAN_COLORS.ACCENT_GOLD,
+							emissive: KOREAN_COLORS.ACCENT_GOLD,
+							emissiveIntensity: .5,
+							transparent: true,
+							opacity: .7
+						})]
+					}, i);
+				})
+			}),
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.5,
+				32,
+				32
+			] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+				color: KOREAN_COLORS.ACCENT_GOLD,
+				emissive: KOREAN_COLORS.ACCENT_GOLD,
+				emissiveIntensity: 1.5,
+				transparent: true,
+				opacity: .8
+			})] }),
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.8,
+				32,
+				32
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: KOREAN_COLORS.PRIMARY_CYAN,
+				transparent: true,
+				opacity: .2,
+				side: THREE.BackSide
+			})] }),
+			/* @__PURE__ */ jsxs("mesh", { children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+				.6,
+				32,
+				32
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: KOREAN_COLORS.ACCENT_GOLD,
+				transparent: true,
+				opacity: .3,
+				side: THREE.BackSide
+			})] }),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					0,
+					0,
+					0
+				],
+				intensity: 3,
+				distance: 10,
+				color: KOREAN_COLORS.ACCENT_GOLD
+			}),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					2,
+					2,
+					0
+				],
+				intensity: 1.5,
+				distance: 6,
+				color: KOREAN_COLORS.PRIMARY_CYAN
+			}),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					-2,
+					2,
+					0
+				],
+				intensity: 1.5,
+				distance: 6,
+				color: KOREAN_COLORS.PRIMARY_CYAN
+			})
+		]
+	});
+};
+//#endregion
+export { VictoryAnimation3D };
+
+//# sourceMappingURL=VictoryAnimation3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VictoryAnimation3D.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/VictoryAnimation3D.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 * Victory Animation 3D Component\n * Displays celebratory 3D particle effects for victory screen\n * Enhanced with additional Korean symbolism and dynamic effects\n * Optimized for 60fps performance with object reuse\n */\nexport const VictoryAnimation3D: React.FC = () => {\n  const groupRef = useRef<THREE.Group>(null);\n  const particlesRef = useRef<THREE.Points>(null);\n  const ringsRef = useRef<THREE.Group>(null);\n  const symbolsRef = 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 victory particles - use useState with lazy initializer\n  const [particlePositions] = useState(() => {\n    const count = 200; // Increased from 150 for more dramatic 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 = 3 + Math.random() * 2;\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);\n      positions[i3 + 2] = radius * Math.sin(phi) * Math.sin(theta);\n    }\n\n    return positions;\n  });\n\n  // Create secondary particle layer for depth\n  const [secondaryParticles] = useState(() => {\n    const count = 50;\n    const positions = new Float32Array(count * 3);\n\n    for (let i = 0; i < count; i++) {\n      const i3 = i * 3;\n      const radius = 5 + Math.random() * 3;\n      const theta = Math.random() * Math.PI * 2;\n\n      positions[i3] = radius * Math.cos(theta);\n      positions[i3 + 1] = Math.random() * 4 - 2;\n      positions[i3 + 2] = radius * Math.sin(theta);\n    }\n\n    return positions;\n  });\n\n  // Animate victory effects - optimized for 60fps\n  useFrame((state) => {\n    const time = state.clock.elapsedTime;\n\n    // Rotate entire group\n    if (groupRef.current) {\n      groupRef.current.rotation.y = time * 0.3;\n    }\n\n    // Pulse particles with wave effect - use reusable objects\n    if (particlesRef.current) {\n      const scale = 1 + Math.sin(time * 2) * 0.2;\n      reusableScale.setScalar(scale);\n      particlesRef.current.scale.copy(reusableScale);\n      \n      // Rising motion\n      reusablePosition.set(0, Math.sin(time * 0.8) * 0.5, 0);\n      particlesRef.current.position.copy(reusablePosition);\n    }\n\n    // Rotate rings at different speeds\n    if (ringsRef.current) {\n      ringsRef.current.rotation.x = time * 0.5;\n      ringsRef.current.rotation.z = time * 0.3;\n    }\n\n    // Rotate Korean symbols\n    if (symbolsRef.current) {\n      symbolsRef.current.rotation.y = -time * 0.4;\n      symbolsRef.current.rotation.x = Math.sin(time * 0.5) * 0.1;\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 rings = ringsRef.current;\n    const symbols = symbolsRef.current;\n\n    return () => {\n      // Dispose geometries and materials to prevent memory leaks\n      // Clean up specific refs (these are children of groupRef but we handle them explicitly)\n      if (particles) {\n        particles.geometry?.dispose();\n        if (particles.material) {\n          (particles.material as THREE.Material).dispose();\n        }\n      }\n      if (rings?.children && Array.isArray(rings.children)) {\n        rings.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      if (symbols?.children && Array.isArray(symbols.children)) {\n        symbols.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 groupRef.current.children to dispose any meshes/points without explicit refs\n      // (e.g., secondary particles, central glow sphere, outer glow sphere, inner glow layer)\n      if (group?.children && Array.isArray(group.children)) {\n        group.children.forEach((child) => {\n          // Skip objects that are already handled via specific refs\n          if (\n            child === particles ||\n            child === rings ||\n            child === symbols\n          ) {\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, 2, 0]}\n      data-testid=\"victory-animation-3d\"\n    >\n      {/* Primary victory particles */}\n      <points ref={particlesRef}>\n        <bufferGeometry>\n          <bufferAttribute\n            attach=\"attributes-position\"\n            count={200}\n            itemSize={3}\n            args={[particlePositions, 3]}\n          />\n        </bufferGeometry>\n        <pointsMaterial\n          size={0.2}\n          color={new THREE.Color(KOREAN_COLORS.ACCENT_GOLD)}\n          transparent\n          opacity={0.8}\n          sizeAttenuation\n          depthWrite={false}\n        />\n      </points>\n\n      {/* Secondary particle layer */}\n      <points position={[0, 1, 0]}>\n        <bufferGeometry>\n          <bufferAttribute\n            attach=\"attributes-position\"\n            count={50}\n            itemSize={3}\n            args={[secondaryParticles, 3]}\n          />\n        </bufferGeometry>\n        <pointsMaterial\n          size={0.15}\n          color={new THREE.Color(KOREAN_COLORS.PRIMARY_CYAN)}\n          transparent\n          opacity={0.6}\n          sizeAttenuation\n          depthWrite={false}\n        />\n      </points>\n\n      {/* Rotating rings */}\n      <group ref={ringsRef}>\n        <mesh rotation={[Math.PI / 2, 0, 0]}>\n          <torusGeometry args={[2, 0.05, 16, 100]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.PRIMARY_CYAN}\n            transparent\n            opacity={0.6}\n          />\n        </mesh>\n\n        <mesh rotation={[Math.PI / 2, Math.PI / 4, 0]}>\n          <torusGeometry args={[2.5, 0.05, 16, 100]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.ACCENT_GOLD}\n            transparent\n            opacity={0.4}\n          />\n        </mesh>\n\n        <mesh rotation={[Math.PI / 2, Math.PI / 2, 0]}>\n          <torusGeometry args={[3, 0.05, 16, 100]} />\n          <meshBasicMaterial\n            color={KOREAN_COLORS.PRIMARY_CYAN}\n            transparent\n            opacity={0.3}\n          />\n        </mesh>\n      </group>\n\n      {/* Korean symbol elements - octagonal shape representing 팔괘 (eight trigrams) */}\n      <group ref={symbolsRef}>\n        {Array.from({ length: 8 }).map((_, i) => {\n          const angle = (i / 8) * Math.PI * 2;\n          const radius = 4;\n          return (\n            <mesh\n              key={i}\n              position={[\n                Math.cos(angle) * radius,\n                0,\n                Math.sin(angle) * radius,\n              ]}\n              rotation={[0, angle + Math.PI / 2, 0]}\n            >\n              <boxGeometry args={[0.8, 0.1, 0.1]} />\n              <meshStandardMaterial\n                color={KOREAN_COLORS.ACCENT_GOLD}\n                emissive={KOREAN_COLORS.ACCENT_GOLD}\n                emissiveIntensity={0.5}\n                transparent\n                opacity={0.7}\n              />\n            </mesh>\n          );\n        })}\n      </group>\n\n      {/* Central glow sphere */}\n      <mesh>\n        <sphereGeometry args={[0.5, 32, 32]} />\n        <meshStandardMaterial\n          color={KOREAN_COLORS.ACCENT_GOLD}\n          emissive={KOREAN_COLORS.ACCENT_GOLD}\n          emissiveIntensity={1.5}\n          transparent\n          opacity={0.8}\n        />\n      </mesh>\n\n      {/* Outer glow */}\n      <mesh>\n        <sphereGeometry args={[0.8, 32, 32]} />\n        <meshBasicMaterial\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          transparent\n          opacity={0.2}\n          side={THREE.BackSide}\n        />\n      </mesh>\n\n      {/* Additional inner glow layer */}\n      <mesh>\n        <sphereGeometry args={[0.6, 32, 32]} />\n        <meshBasicMaterial\n          color={KOREAN_COLORS.ACCENT_GOLD}\n          transparent\n          opacity={0.3}\n          side={THREE.BackSide}\n        />\n      </mesh>\n\n      {/* Point light for glow effect */}\n      <pointLight\n        position={[0, 0, 0]}\n        intensity={3}\n        distance={10}\n        color={KOREAN_COLORS.ACCENT_GOLD}\n      />\n\n      {/* Secondary accent lights */}\n      <pointLight\n        position={[2, 2, 0]}\n        intensity={1.5}\n        distance={6}\n        color={KOREAN_COLORS.PRIMARY_CYAN}\n      />\n      <pointLight\n        position={[-2, 2, 0]}\n        intensity={1.5}\n        distance={6}\n        color={KOREAN_COLORS.PRIMARY_CYAN}\n      />\n    </group>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAWA,IAAa,2BAAqC;CAChD,MAAM,WAAW,OAAoB,KAAK;CAC1C,MAAM,eAAe,OAAqB,KAAK;CAC/C,MAAM,WAAW,OAAoB,KAAK;CAC1C,MAAM,aAAa,OAAoB,KAAK;CAI5C,MAAM,CAAC,iBAAiB,eAAe,IAAI,MAAM,SAAS,CAAC;CAC3D,MAAM,CAAC,oBAAoB,eAAe,IAAI,MAAM,SAAS,CAAC;CAG9D,MAAM,CAAC,qBAAqB,eAAe;EACzC,MAAM,QAAQ;EACd,MAAM,YAAY,IAAI,aAAa,QAAQ,EAAE;AAE7C,OAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;GAC9B,MAAM,KAAK,IAAI;GACf,MAAM,SAAS,IAAI,KAAK,QAAQ,GAAG;GACnC,MAAM,QAAQ,KAAK,QAAQ,GAAG,KAAK,KAAK;GACxC,MAAM,MAAM,KAAK,QAAQ,GAAG,KAAK;AAEjC,aAAU,MAAM,SAAS,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,MAAM;AACxD,aAAU,KAAK,KAAK,SAAS,KAAK,IAAI,IAAI;AAC1C,aAAU,KAAK,KAAK,SAAS,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,MAAM;;AAG9D,SAAO;GACP;CAGF,MAAM,CAAC,sBAAsB,eAAe;EAC1C,MAAM,QAAQ;EACd,MAAM,YAAY,IAAI,aAAa,QAAQ,EAAE;AAE7C,OAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;GAC9B,MAAM,KAAK,IAAI;GACf,MAAM,SAAS,IAAI,KAAK,QAAQ,GAAG;GACnC,MAAM,QAAQ,KAAK,QAAQ,GAAG,KAAK,KAAK;AAExC,aAAU,MAAM,SAAS,KAAK,IAAI,MAAM;AACxC,aAAU,KAAK,KAAK,KAAK,QAAQ,GAAG,IAAI;AACxC,aAAU,KAAK,KAAK,SAAS,KAAK,IAAI,MAAM;;AAG9C,SAAO;GACP;AAGF,WAAU,UAAU;EAClB,MAAM,OAAO,MAAM,MAAM;AAGzB,MAAI,SAAS,QACX,UAAS,QAAQ,SAAS,IAAI,OAAO;AAIvC,MAAI,aAAa,SAAS;GACxB,MAAM,QAAQ,IAAI,KAAK,IAAI,OAAO,EAAE,GAAG;AACvC,iBAAc,UAAU,MAAM;AAC9B,gBAAa,QAAQ,MAAM,KAAK,cAAc;AAG9C,oBAAiB,IAAI,GAAG,KAAK,IAAI,OAAO,GAAI,GAAG,IAAK,EAAE;AACtD,gBAAa,QAAQ,SAAS,KAAK,iBAAiB;;AAItD,MAAI,SAAS,SAAS;AACpB,YAAS,QAAQ,SAAS,IAAI,OAAO;AACrC,YAAS,QAAQ,SAAS,IAAI,OAAO;;AAIvC,MAAI,WAAW,SAAS;AACtB,cAAW,QAAQ,SAAS,IAAI,CAAC,OAAO;AACxC,cAAW,QAAQ,SAAS,IAAI,KAAK,IAAI,OAAO,GAAI,GAAG;;GAEzD;AAGF,iBAAgB;EAEd,MAAM,QAAQ,SAAS;EACvB,MAAM,YAAY,aAAa;EAC/B,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,WAAW;AAE3B,eAAa;AAGX,OAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAC7B,QAAI,UAAU,SACX,WAAU,SAA4B,SAAS;;AAGpD,OAAI,OAAO,YAAY,MAAM,QAAQ,MAAM,SAAS,CAClD,OAAM,SAAS,SAAS,UAAU;AAChC,QAAI,iBAAiB,MAAM,MAAM;AAC/B,WAAM,UAAU,SAAS;AACzB,SAAI,MAAM,SACP,OAAM,SAA4B,SAAS;;KAGhD;AAEJ,OAAI,SAAS,YAAY,MAAM,QAAQ,QAAQ,SAAS,CACtD,SAAQ,SAAS,SAAS,UAAU;AAClC,QAAI,iBAAiB,MAAM,MAAM;AAC/B,WAAM,UAAU,SAAS;AACzB,SAAI,MAAM,SACP,OAAM,SAA4B,SAAS;;KAGhD;AAIJ,OAAI,OAAO,YAAY,MAAM,QAAQ,MAAM,SAAS,CAClD,OAAM,SAAS,SAAS,UAAU;AAEhC,QACE,UAAU,aACV,UAAU,SACV,UAAU,QAEV;AAGF,QAAI,iBAAiB,MAAM,MAAM;AAC/B,WAAM,UAAU,SAAS;AACzB,SAAI,MAAM,SACP,OAAM,SAA4B,SAAS;eAErC,iBAAiB,MAAM,QAAQ;AACxC,WAAM,UAAU,SAAS;AACzB,SAAI,MAAM,SACP,OAAM,SAA4B,SAAS;;KAGhD;;IAGL,EAAE,CAAC;AAEN,QACE,qBAAC,SAAD;EACE,KAAK;EACL,UAAU;GAAC;GAAG;GAAG;GAAE;EACnB,eAAY;YAHd;GAME,qBAAC,UAAD;IAAQ,KAAK;cAAb,CACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,mBAAD;KACE,QAAO;KACP,OAAO;KACP,UAAU;KACV,MAAM,CAAC,mBAAmB,EAAE;KAC5B,CAAA,EACa,CAAA,EACjB,oBAAC,kBAAD;KACE,MAAM;KACN,OAAO,IAAI,MAAM,MAAM,cAAc,YAAY;KACjD,aAAA;KACA,SAAS;KACT,iBAAA;KACA,YAAY;KACZ,CAAA,CACK;;GAGT,qBAAC,UAAD;IAAQ,UAAU;KAAC;KAAG;KAAG;KAAE;cAA3B,CACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,mBAAD;KACE,QAAO;KACP,OAAO;KACP,UAAU;KACV,MAAM,CAAC,oBAAoB,EAAE;KAC7B,CAAA,EACa,CAAA,EACjB,oBAAC,kBAAD;KACE,MAAM;KACN,OAAO,IAAI,MAAM,MAAM,cAAc,aAAa;KAClD,aAAA;KACA,SAAS;KACT,iBAAA;KACA,YAAY;KACZ,CAAA,CACK;;GAGT,qBAAC,SAAD;IAAO,KAAK;cAAZ;KACE,qBAAC,QAAD;MAAM,UAAU;OAAC,KAAK,KAAK;OAAG;OAAG;OAAE;gBAAnC,CACE,oBAAC,iBAAD,EAAe,MAAM;OAAC;OAAG;OAAM;OAAI;OAAI,EAAI,CAAA,EAC3C,oBAAC,qBAAD;OACE,OAAO,cAAc;OACrB,aAAA;OACA,SAAS;OACT,CAAA,CACG;;KAEP,qBAAC,QAAD;MAAM,UAAU;OAAC,KAAK,KAAK;OAAG,KAAK,KAAK;OAAG;OAAE;gBAA7C,CACE,oBAAC,iBAAD,EAAe,MAAM;OAAC;OAAK;OAAM;OAAI;OAAI,EAAI,CAAA,EAC7C,oBAAC,qBAAD;OACE,OAAO,cAAc;OACrB,aAAA;OACA,SAAS;OACT,CAAA,CACG;;KAEP,qBAAC,QAAD;MAAM,UAAU;OAAC,KAAK,KAAK;OAAG,KAAK,KAAK;OAAG;OAAE;gBAA7C,CACE,oBAAC,iBAAD,EAAe,MAAM;OAAC;OAAG;OAAM;OAAI;OAAI,EAAI,CAAA,EAC3C,oBAAC,qBAAD;OACE,OAAO,cAAc;OACrB,aAAA;OACA,SAAS;OACT,CAAA,CACG;;KACD;;GAGR,oBAAC,SAAD;IAAO,KAAK;cACT,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM;KACvC,MAAM,QAAS,IAAI,IAAK,KAAK,KAAK;KAClC,MAAM,SAAS;AACf,YACE,qBAAC,QAAD;MAEE,UAAU;OACR,KAAK,IAAI,MAAM,GAAG;OAClB;OACA,KAAK,IAAI,MAAM,GAAG;OACnB;MACD,UAAU;OAAC;OAAG,QAAQ,KAAK,KAAK;OAAG;OAAE;gBAPvC,CASE,oBAAC,eAAD,EAAa,MAAM;OAAC;OAAK;OAAK;OAAI,EAAI,CAAA,EACtC,oBAAC,wBAAD;OACE,OAAO,cAAc;OACrB,UAAU,cAAc;OACxB,mBAAmB;OACnB,aAAA;OACA,SAAS;OACT,CAAA,CACG;QAhBA,EAgBA;MAET;IACI,CAAA;GAGR,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAgB,MAAM;IAAC;IAAK;IAAI;IAAG,EAAI,CAAA,EACvC,oBAAC,wBAAD;IACE,OAAO,cAAc;IACrB,UAAU,cAAc;IACxB,mBAAmB;IACnB,aAAA;IACA,SAAS;IACT,CAAA,CACG,EAAA,CAAA;GAGP,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAgB,MAAM;IAAC;IAAK;IAAI;IAAG,EAAI,CAAA,EACvC,oBAAC,qBAAD;IACE,OAAO,cAAc;IACrB,aAAA;IACA,SAAS;IACT,MAAM,MAAM;IACZ,CAAA,CACG,EAAA,CAAA;GAGP,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAgB,MAAM;IAAC;IAAK;IAAI;IAAG,EAAI,CAAA,EACvC,oBAAC,qBAAD;IACE,OAAO,cAAc;IACrB,aAAA;IACA,SAAS;IACT,MAAM,MAAM;IACZ,CAAA,CACG,EAAA,CAAA;GAGP,oBAAC,cAAD;IACE,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,WAAW;IACX,UAAU;IACV,OAAO,cAAc;IACrB,CAAA;GAGF,oBAAC,cAAD;IACE,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,WAAW;IACX,UAAU;IACV,OAAO,cAAc;IACrB,CAAA;GACF,oBAAC,cAAD;IACE,UAAU;KAAC;KAAI;KAAG;KAAE;IACpB,WAAW;IACX,UAAU;IACV,OAAO,cAAc;IACrB,CAAA;GACI"}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { PlayerState } from "../../../../systems";
+export interface WinnerDisplayProps {
+    readonly winner: PlayerState;
+    readonly isVictory: boolean;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+}
+/**
+ * Winner Display Component
+ * Shows winner announcement with archetype details
+ */
+export declare const WinnerDisplay: React.FC<WinnerDisplayProps>;
+//# sourceMappingURL=WinnerDisplayOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WinnerDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/WinnerDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AASlD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAOD;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyKtD,CAAC"}

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

@@ -0,0 +1,170 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { ARCHETYPE_ASSETS } from "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { fadeInAnimation, scaleInAnimation } from "./animations.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/endscreen/components/WinnerDisplayOverlayHtml.tsx
+/**
+* Helper to convert hex color to CSS string
+*/
+var toCssColor = (hex) => hexToRgbaString(hex, 1);
+/**
+* Winner Display Component
+* Shows winner announcement with archetype details
+*/
+var WinnerDisplay = ({ winner, isVictory, isMobile, isTablet }) => {
+	const titleFontSize = isMobile ? 28 : isTablet ? 36 : 44;
+	const subtitleFontSize = isMobile ? 16 : isTablet ? 18 : 22;
+	const detailFontSize = isMobile ? 12 : 14;
+	const spacing = isMobile ? 10 : isTablet ? 12 : 15;
+	const primaryColor = isVictory ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.ACCENT_RED;
+	const resultText = isVictory ? {
+		korean: "승리!",
+		english: "Victory!"
+	} : {
+		korean: "패배",
+		english: "Defeat"
+	};
+	const archetypeAsset = ARCHETYPE_ASSETS[winner.archetype.toLowerCase()] || ARCHETYPE_ASSETS.musa;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "winner-display",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			marginBottom: spacing,
+			animation: "fadeIn 0.8s ease-in"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: titleFontSize,
+					fontWeight: "bold",
+					color: toCssColor(primaryColor),
+					textShadow: `0 0 20px ${hexToRgbaString(primaryColor, .8)}, 0 0 40px ${hexToRgbaString(primaryColor, .4)}`,
+					marginBottom: spacing,
+					textAlign: "center",
+					fontFamily: FONT_FAMILY.KOREAN,
+					animation: "scaleIn 0.5s ease-out"
+				},
+				"data-testid": "result-title",
+				children: [
+					resultText.korean,
+					" | ",
+					resultText.english
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: subtitleFontSize,
+					color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),
+					marginBottom: spacing / 2,
+					textAlign: "center",
+					fontFamily: FONT_FAMILY.KOREAN,
+					fontWeight: "bold"
+				},
+				"data-testid": "winner-name",
+				children: [
+					winner.name.korean,
+					" | ",
+					winner.name.english
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .6),
+					border: `2px solid ${hexToRgbaString(primaryColor, .8)}`,
+					borderRadius: "12px",
+					padding: spacing,
+					marginTop: spacing / 2,
+					minWidth: isMobile ? "280px" : "320px"
+				},
+				"data-testid": "winner-archetype-display",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							fontSize: detailFontSize + 2,
+							color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),
+							fontFamily: FONT_FAMILY.KOREAN,
+							fontWeight: "bold",
+							marginBottom: spacing / 2
+						},
+						"data-testid": "winner-archetype",
+						children: [
+							archetypeAsset.name_korean,
+							" | ",
+							archetypeAsset.name_english
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: detailFontSize - 2,
+							color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),
+							fontFamily: FONT_FAMILY.KOREAN,
+							textTransform: "uppercase",
+							letterSpacing: "0.1em"
+						},
+						"data-testid": "archetype-code",
+						children: winner.archetype.toUpperCase()
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexDirection: "row",
+							gap: spacing,
+							marginTop: spacing,
+							fontSize: detailFontSize - 2,
+							color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+						},
+						"data-testid": "combat-stats-summary",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.HEALTH_FULL),
+										fontWeight: "bold"
+									},
+									children: Math.round(winner.health)
+								}), /* @__PURE__ */ jsx("div", { children: "체력 | HP" })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.KI_FULL),
+										fontWeight: "bold"
+									},
+									children: Math.round(winner.ki)
+								}), /* @__PURE__ */ jsx("div", { children: "기력 | Ki" })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.STAMINA_FULL),
+										fontWeight: "bold"
+									},
+									children: Math.round(winner.stamina)
+								}), /* @__PURE__ */ jsx("div", { children: "스태미나 | Stamina" })]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
+        ${fadeInAnimation}
+        ${scaleInAnimation}
+      ` })
+		]
+	});
+};
+//#endregion
+export { WinnerDisplay };
+
+//# sourceMappingURL=WinnerDisplayOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WinnerDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/WinnerDisplayOverlayHtml.tsx"],"sourcesContent":["import React from \"react\";\nimport { PlayerState } from \"../../../../systems\";\nimport {\n  ARCHETYPE_ASSETS,\n  FONT_FAMILY,\n  KOREAN_COLORS,\n} from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { fadeInAnimation, scaleInAnimation } from \"./animations\";\n\nexport interface WinnerDisplayProps {\n  readonly winner: PlayerState;\n  readonly isVictory: boolean;\n  readonly isMobile: boolean;\n  readonly isTablet: boolean;\n}\n\n/**\n * Helper to convert hex color to CSS string\n */\nconst toCssColor = (hex: number): string => hexToRgbaString(hex, 1);\n\n/**\n * Winner Display Component\n * Shows winner announcement with archetype details\n */\nexport const WinnerDisplay: React.FC<WinnerDisplayProps> = ({\n  winner,\n  isVictory,\n  isMobile,\n  isTablet,\n}) => {\n  const titleFontSize = isMobile ? 28 : isTablet ? 36 : 44;\n  const subtitleFontSize = isMobile ? 16 : isTablet ? 18 : 22;\n  const detailFontSize = isMobile ? 12 : 14;\n  const spacing = isMobile ? 10 : isTablet ? 12 : 15;\n\n  const primaryColor = isVictory\n    ? KOREAN_COLORS.ACCENT_GOLD\n    : KOREAN_COLORS.ACCENT_RED;\n\n  const resultText = isVictory\n    ? { korean: \"승리!\", english: \"Victory!\" }\n    : { korean: \"패배\", english: \"Defeat\" };\n\n  // Get archetype asset info\n  const archetypeKey =\n    winner.archetype.toLowerCase() as keyof typeof ARCHETYPE_ASSETS;\n  const archetypeAsset =\n    ARCHETYPE_ASSETS[archetypeKey] || ARCHETYPE_ASSETS.musa;\n\n  return (\n    <div\n      data-testid=\"winner-display\"\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        marginBottom: spacing,\n        animation: \"fadeIn 0.8s ease-in\",\n      }}\n    >\n      {/* Result Title with glow effect */}\n      <div\n        style={{\n          fontSize: titleFontSize,\n          fontWeight: \"bold\",\n          color: toCssColor(primaryColor),\n          textShadow: `0 0 20px ${hexToRgbaString(\n            primaryColor,\n            0.8\n          )}, 0 0 40px ${hexToRgbaString(primaryColor, 0.4)}`,\n          marginBottom: spacing,\n          textAlign: \"center\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          animation: \"scaleIn 0.5s ease-out\",\n        }}\n        data-testid=\"result-title\"\n      >\n        {resultText.korean} | {resultText.english}\n      </div>\n\n      {/* Winner Name */}\n      <div\n        style={{\n          fontSize: subtitleFontSize,\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          marginBottom: spacing / 2,\n          textAlign: \"center\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          fontWeight: \"bold\",\n        }}\n        data-testid=\"winner-name\"\n      >\n        {winner.name.korean} | {winner.name.english}\n      </div>\n\n      {/* Archetype Display */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.6),\n          border: `2px solid ${hexToRgbaString(primaryColor, 0.8)}`,\n          borderRadius: \"12px\",\n          padding: spacing,\n          marginTop: spacing / 2,\n          minWidth: isMobile ? \"280px\" : \"320px\",\n        }}\n        data-testid=\"winner-archetype-display\"\n      >\n        {/* Archetype Name */}\n        <div\n          style={{\n            fontSize: detailFontSize + 2,\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontWeight: \"bold\",\n            marginBottom: spacing / 2,\n          }}\n          data-testid=\"winner-archetype\"\n        >\n          {archetypeAsset.name_korean} | {archetypeAsset.name_english}\n        </div>\n\n        {/* Archetype Code */}\n        <div\n          style={{\n            fontSize: detailFontSize - 2,\n            color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n            fontFamily: FONT_FAMILY.KOREAN,\n            textTransform: \"uppercase\",\n            letterSpacing: \"0.1em\",\n          }}\n          data-testid=\"archetype-code\"\n        >\n          {winner.archetype.toUpperCase()}\n        </div>\n\n        {/* Combat Stats Summary */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"row\",\n            gap: spacing,\n            marginTop: spacing,\n            fontSize: detailFontSize - 2,\n            color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n          }}\n          data-testid=\"combat-stats-summary\"\n        >\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.HEALTH_FULL),\n                fontWeight: \"bold\",\n              }}\n            >\n              {Math.round(winner.health)}\n            </div>\n            <div>체력 | HP</div>\n          </div>\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.KI_FULL),\n                fontWeight: \"bold\",\n              }}\n            >\n              {Math.round(winner.ki)}\n            </div>\n            <div>기력 | Ki</div>\n          </div>\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.STAMINA_FULL),\n                fontWeight: \"bold\",\n              }}\n            >\n              {Math.round(winner.stamina)}\n            </div>\n            <div>스태미나 | Stamina</div>\n          </div>\n        </div>\n      </div>\n\n      {/* CSS Animations */}\n      <style>{`\n        ${fadeInAnimation}\n        ${scaleInAnimation}\n      `}</style>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+/**
+ * Shared CSS animations for EndScreen components
+ * Defines reusable keyframe animations with Korean cyberpunk theming
+ */
+/**
+ * Fade in animation - entrance effect
+ */
+export declare const fadeInAnimation = "\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n";
+/**
+ * Scale in animation - emphasis effect
+ */
+export declare const scaleInAnimation = "\n@keyframes scaleIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n";
+/**
+ * Slide up animation - entrance from bottom
+ */
+export declare const slideUpAnimation = "\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n";
+/**
+ * Pulse animation - breathing effect
+ */
+export declare const pulseAnimation = "\n@keyframes ratingPulse {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.02);\n  }\n}\n";
+/**
+ * All animations combined for easy injection
+ */
+export declare const allAnimations = "\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n@keyframes scaleIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n@keyframes ratingPulse {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.02);\n  }\n}\n\n";
+//# sourceMappingURL=animations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/animations.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe,+JAW3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,+LAc5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,+JAW5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,4HAS1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,onBAKzB,CAAC"}

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

@@ -0,0 +1,71 @@
+//#region src/components/screens/endscreen/components/animations.ts
+/**
+* Shared CSS animations for EndScreen components
+* Defines reusable keyframe animations with Korean cyberpunk theming
+*/
+/**
+* Fade in animation - entrance effect
+*/
+var fadeInAnimation = `
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+/**
+* Scale in animation - emphasis effect
+*/
+var scaleInAnimation = `
+@keyframes scaleIn {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+`;
+/**
+* Slide up animation - entrance from bottom
+*/
+var slideUpAnimation = `
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+/**
+* Pulse animation - breathing effect
+*/
+var pulseAnimation = `
+@keyframes ratingPulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+}
+`;
+`${fadeInAnimation}${scaleInAnimation}${slideUpAnimation}${pulseAnimation}`;
+//#endregion
+export { fadeInAnimation, pulseAnimation, scaleInAnimation, slideUpAnimation };
+
+//# sourceMappingURL=animations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/animations.ts"],"sourcesContent":["/**\n * Shared CSS animations for EndScreen components\n * Defines reusable keyframe animations with Korean cyberpunk theming\n */\n\n/**\n * Fade in animation - entrance effect\n */\nexport const fadeInAnimation = `\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n`;\n\n/**\n * Scale in animation - emphasis effect\n */\nexport const scaleInAnimation = `\n@keyframes scaleIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n`;\n\n/**\n * Slide up animation - entrance from bottom\n */\nexport const slideUpAnimation = `\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n`;\n\n/**\n * Pulse animation - breathing effect\n */\nexport const pulseAnimation = `\n@keyframes ratingPulse {\n  0%, 100% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.02);\n  }\n}\n`;\n\n/**\n * All animations combined for easy injection\n */\nexport const allAnimations = `\n${fadeInAnimation}\n${scaleInAnimation}\n${slideUpAnimation}\n${pulseAnimation}\n`;\n"],"mappings":";;;;;;;;AAQA,IAAa,kBAAkB;;;;;;;;;;;;;;;AAgB/B,IAAa,mBAAmB;;;;;;;;;;;;;;;;;;AAmBhC,IAAa,mBAAmB;;;;;;;;;;;;;;;AAgBhC,IAAa,iBAAiB;;;;;;;;;;AAcD,GAC3B,gBAD2B,EAE3B,iBAF2B,EAG3B,iBAH2B,EAI3B,eAJ2B"}

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

@@ -0,0 +1,19 @@
+/**
+ * End Screen Subcomponents
+ * All subcomponents used by EndScreen3D
+ * Exported for testing, extensibility, and consistency with other screen packages
+ */
+export { VictoryAnimation3D } from "./VictoryAnimation3D";
+export { DefeatAnimation3D } from "./DefeatAnimation3D";
+export { WinnerDisplay } from "./WinnerDisplayOverlayHtml";
+export type { WinnerDisplayProps } from "./WinnerDisplayOverlayHtml";
+export { MatchStatisticsDisplay } from "./MatchStatisticsDisplayOverlayHtml";
+export type { MatchStatisticsDisplayProps } from "./MatchStatisticsDisplayOverlayHtml";
+export { PerformanceRating } from "./PerformanceRatingOverlayHtml";
+export type { PerformanceRatingProps } from "./PerformanceRatingOverlayHtml";
+export { PerformanceBreakdown } from "./PerformanceBreakdownOverlayHtml";
+export type { PerformanceBreakdownProps } from "./PerformanceBreakdownOverlayHtml";
+export { NavigationButtons } from "./NavigationButtonsOverlayHtml";
+export type { NavigationButtonsProps } from "./NavigationButtonsOverlayHtml";
+export * from "./animations";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAEvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAEnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,YAAY,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,cAAc,cAAc,CAAC"}