blacktrigram 0.7.2

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

@@ -0,0 +1,294 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/endscreen/components/PerformanceBreakdownOverlayHtml.tsx
+/**
+* Helper to convert hex color to CSS string
+*/
+var toCssColor = (hex) => hexToRgbaString(hex, 1);
+var CategoryRating = ({ category, korean, value, maxValue, color, fontSize }) => {
+	const percentage = Math.round(value / maxValue * 100);
+	const grade = percentage >= 90 ? "S" : percentage >= 75 ? "A" : percentage >= 60 ? "B" : "C";
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "6px"
+		},
+		"data-testid": `category-${category.toLowerCase()}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between",
+				alignItems: "center",
+				fontSize: fontSize - 2,
+				color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY)
+			},
+			children: [/* @__PURE__ */ jsxs("span", { children: [
+				korean,
+				" | ",
+				category
+			] }), /* @__PURE__ */ jsx("span", {
+				style: {
+					fontWeight: "bold",
+					color: toCssColor(color),
+					fontSize: fontSize + 2
+				},
+				children: grade
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				width: "100%",
+				height: "8px",
+				background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .5),
+				borderRadius: "4px",
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					width: `${percentage}%`,
+					height: "100%",
+					background: toCssColor(color),
+					transition: "width 0.5s ease-out"
+				},
+				"data-testid": `progress-${category.toLowerCase()}`
+			})
+		})]
+	});
+};
+/**
+* Calculate category scores from match statistics
+*/
+function calculateCategoryScores(stats) {
+	const offense = Math.min(stats.totalDamageDealt / 100 * 50 + stats.hitsLanded / 10 * 50, 100);
+	const defenseRaw = Math.max(0, 100 - stats.totalDamageReceived / 2);
+	const defense = Math.min(defenseRaw, 100);
+	const technique = Math.min(stats.perfectStrikes * 15 + stats.vitalPointHits * 10, 100);
+	const damageRatio = stats.totalDamageReceived > 0 ? stats.totalDamageDealt / stats.totalDamageReceived : stats.totalDamageDealt > 0 ? 2 : 0;
+	return {
+		offense,
+		defense,
+		technique,
+		efficiency: Math.min(damageRatio * 40, 100)
+	};
+}
+/**
+* Performance Breakdown Component
+* Provides detailed analysis of combat performance by category
+*/
+var PerformanceBreakdown = ({ matchStats, isMobile, isTablet }) => {
+	const fontSize = isMobile ? 12 : isTablet ? 13 : 14;
+	const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;
+	const padding = isMobile ? 12 : isTablet ? 15 : 18;
+	const winnerStats = useMemo(() => matchStats.winner === 0 ? matchStats.player1 : matchStats.player2, [matchStats]);
+	const scores = useMemo(() => calculateCategoryScores(winnerStats), [winnerStats]);
+	const techniqueCount = winnerStats.techniques?.length ?? 0;
+	const uniqueTechniques = useMemo(() => {
+		if (!winnerStats.techniques || winnerStats.techniques.length === 0) return 0;
+		return new Set(winnerStats.techniques).size;
+	}, [winnerStats.techniques]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "performance-breakdown",
+		style: {
+			width: isMobile ? "95%" : isTablet ? "80%" : "70%",
+			maxWidth: "900px",
+			background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9),
+			border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .6)}`,
+			borderRadius: "12px",
+			padding: padding * 1.5,
+			marginBottom: padding,
+			fontFamily: FONT_FAMILY.KOREAN
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: labelFontSize + 2,
+					fontWeight: "bold",
+					color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),
+					textAlign: "center",
+					marginBottom: padding * 1.5
+				},
+				"data-testid": "breakdown-title",
+				children: "전투 분석 | Performance Breakdown"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: padding,
+					marginBottom: padding * 1.5
+				},
+				"data-testid": "category-ratings",
+				children: [
+					/* @__PURE__ */ jsx(CategoryRating, {
+						category: "Offense",
+						korean: "공격",
+						value: scores.offense,
+						maxValue: 100,
+						color: KOREAN_COLORS.ACCENT_RED,
+						fontSize
+					}),
+					/* @__PURE__ */ jsx(CategoryRating, {
+						category: "Defense",
+						korean: "방어",
+						value: scores.defense,
+						maxValue: 100,
+						color: KOREAN_COLORS.ACCENT_BLUE,
+						fontSize
+					}),
+					/* @__PURE__ */ jsx(CategoryRating, {
+						category: "Technique",
+						korean: "기술",
+						value: scores.technique,
+						maxValue: 100,
+						color: KOREAN_COLORS.ACCENT_GOLD,
+						fontSize
+					}),
+					/* @__PURE__ */ jsx(CategoryRating, {
+						category: "Efficiency",
+						korean: "효율",
+						value: scores.efficiency,
+						maxValue: 100,
+						color: KOREAN_COLORS.PRIMARY_CYAN,
+						fontSize
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding,
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .4),
+					borderRadius: "8px"
+				},
+				"data-testid": "technique-analysis",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: labelFontSize,
+							fontWeight: "bold",
+							color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),
+							marginBottom: padding / 2,
+							textAlign: "center"
+						},
+						children: "기술 사용 분석 | Technique Analysis"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr",
+							gap: padding,
+							marginTop: padding
+						},
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: fontSize + 6,
+										fontWeight: "bold",
+										color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN)
+									},
+									children: techniqueCount
+								}), /* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: fontSize - 2,
+										color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+									},
+									children: "총 기술 | Total Uses"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: fontSize + 6,
+										fontWeight: "bold",
+										color: toCssColor(KOREAN_COLORS.ACCENT_GOLD)
+									},
+									children: uniqueTechniques
+								}), /* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: fontSize - 2,
+										color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+									},
+									children: "고유 기술 | Unique"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: fontSize + 6,
+										fontWeight: "bold",
+										color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT)
+									},
+									children: winnerStats.vitalPointHits ?? 0
+								}), /* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: fontSize - 2,
+										color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+									},
+									children: "급소 타격 | Vital Hits"
+								})]
+							})
+						]
+					}),
+					winnerStats.techniques && winnerStats.techniques.length > 0 && /* @__PURE__ */ jsxs("div", {
+						style: {
+							marginTop: padding,
+							paddingTop: padding,
+							borderTop: `1px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, .3)}`
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: fontSize - 2,
+								color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),
+								marginBottom: padding / 2
+							},
+							children: "주요 기술 | Primary Techniques:"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								fontSize,
+								color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),
+								lineHeight: 1.6
+							},
+							children: [winnerStats.techniques.slice(0, 5).join(", "), winnerStats.techniques.length > 5 && "..."]
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: padding,
+					padding,
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .4),
+					borderRadius: "8px",
+					textAlign: "center"
+				},
+				"data-testid": "effectiveness-summary",
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: fontSize - 2,
+						color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),
+						marginBottom: padding / 4
+					},
+					children: "전투 효율성 | Combat Effectiveness"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: labelFontSize + 2,
+						fontWeight: "bold",
+						color: toCssColor(KOREAN_COLORS.ACCENT_GOLD)
+					},
+					children: [Math.round((scores.offense + scores.defense + scores.technique + scores.efficiency) / 4), "%"]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { PerformanceBreakdown };
+
+//# sourceMappingURL=PerformanceBreakdownOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceBreakdownOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/PerformanceBreakdownOverlayHtml.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { MatchStatistics } from \"../../../../systems/combat\";\nimport { PlayerMatchStats } from \"../../../../systems/player\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\nexport interface PerformanceBreakdownProps {\n  readonly matchStats: MatchStatistics;\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 * Category rating component\n */\ninterface CategoryRatingProps {\n  readonly category: string;\n  readonly korean: string;\n  readonly value: number;\n  readonly maxValue: number;\n  readonly color: number;\n  readonly fontSize: number;\n}\n\nconst CategoryRating: React.FC<CategoryRatingProps> = ({\n  category,\n  korean,\n  value,\n  maxValue,\n  color,\n  fontSize,\n}) => {\n  const percentage = Math.round((value / maxValue) * 100);\n  const grade = percentage >= 90 ? \"S\" : percentage >= 75 ? \"A\" : percentage >= 60 ? \"B\" : \"C\";\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"6px\",\n      }}\n      data-testid={`category-${category.toLowerCase()}`}\n    >\n      <div\n        style={{\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          fontSize: fontSize - 2,\n          color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n        }}\n      >\n        <span>{korean} | {category}</span>\n        <span\n          style={{\n            fontWeight: \"bold\",\n            color: toCssColor(color),\n            fontSize: fontSize + 2,\n          }}\n        >\n          {grade}\n        </span>\n      </div>\n      <div\n        style={{\n          width: \"100%\",\n          height: \"8px\",\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.5),\n          borderRadius: \"4px\",\n          overflow: \"hidden\",\n        }}\n      >\n        <div\n          style={{\n            width: `${percentage}%`,\n            height: \"100%\",\n            background: toCssColor(color),\n            transition: \"width 0.5s ease-out\",\n          }}\n          data-testid={`progress-${category.toLowerCase()}`}\n        />\n      </div>\n    </div>\n  );\n};\n\n/**\n * Calculate category scores from match statistics\n */\nfunction calculateCategoryScores(stats: PlayerMatchStats) {\n  // Offense: Based on damage dealt and hits landed\n  const offense = Math.min(\n    (stats.totalDamageDealt / 100) * 50 + (stats.hitsLanded / 10) * 50,\n    100\n  );\n\n  // Defense: Based on damage received (inverted) and hits taken (inverted)\n  const defenseRaw = Math.max(0, 100 - stats.totalDamageReceived / 2);\n  const defense = Math.min(defenseRaw, 100);\n\n  // Technique: Based on perfect strikes and vital point hits\n  const technique = Math.min(\n    stats.perfectStrikes * 15 + stats.vitalPointHits * 10,\n    100\n  );\n\n  // Efficiency: Based on damage ratio\n  const damageRatio =\n    stats.totalDamageReceived > 0\n      ? stats.totalDamageDealt / stats.totalDamageReceived\n      : stats.totalDamageDealt > 0\n      ? 2\n      : 0;\n  const efficiency = Math.min(damageRatio * 40, 100);\n\n  return { offense, defense, technique, efficiency };\n}\n\n/**\n * Performance Breakdown Component\n * Provides detailed analysis of combat performance by category\n */\nexport const PerformanceBreakdown: React.FC<PerformanceBreakdownProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const fontSize = isMobile ? 12 : isTablet ? 13 : 14;\n  const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;\n  const padding = isMobile ? 12 : isTablet ? 15 : 18;\n\n  const winnerStats = useMemo(\n    () => (matchStats.winner === 0 ? matchStats.player1 : matchStats.player2),\n    [matchStats]\n  );\n\n  const scores = useMemo(\n    () => calculateCategoryScores(winnerStats),\n    [winnerStats]\n  );\n\n  // Technique breakdown\n  const techniqueCount = winnerStats.techniques?.length ?? 0;\n  const uniqueTechniques = useMemo(() => {\n    if (!winnerStats.techniques || winnerStats.techniques.length === 0) {\n      return 0;\n    }\n    return new Set(winnerStats.techniques).size;\n  }, [winnerStats.techniques]);\n\n  return (\n    <div\n      data-testid=\"performance-breakdown\"\n      style={{\n        width: isMobile ? \"95%\" : isTablet ? \"80%\" : \"70%\",\n        maxWidth: \"900px\",\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n        borderRadius: \"12px\",\n        padding: padding * 1.5,\n        marginBottom: padding,\n        fontFamily: FONT_FAMILY.KOREAN,\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: labelFontSize + 2,\n          fontWeight: \"bold\",\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          textAlign: \"center\",\n          marginBottom: padding * 1.5,\n        }}\n        data-testid=\"breakdown-title\"\n      >\n        전투 분석 | Performance Breakdown\n      </div>\n\n      {/* Category Ratings */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: padding,\n          marginBottom: padding * 1.5,\n        }}\n        data-testid=\"category-ratings\"\n      >\n        <CategoryRating\n          category=\"Offense\"\n          korean=\"공격\"\n          value={scores.offense}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_RED}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Defense\"\n          korean=\"방어\"\n          value={scores.defense}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_BLUE}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Technique\"\n          korean=\"기술\"\n          value={scores.technique}\n          maxValue={100}\n          color={KOREAN_COLORS.ACCENT_GOLD}\n          fontSize={fontSize}\n        />\n        <CategoryRating\n          category=\"Efficiency\"\n          korean=\"효율\"\n          value={scores.efficiency}\n          maxValue={100}\n          color={KOREAN_COLORS.PRIMARY_CYAN}\n          fontSize={fontSize}\n        />\n      </div>\n\n      {/* Technique Analysis */}\n      <div\n        style={{\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n        data-testid=\"technique-analysis\"\n      >\n        <div\n          style={{\n            fontSize: labelFontSize,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n            marginBottom: padding / 2,\n            textAlign: \"center\",\n          }}\n        >\n          기술 사용 분석 | Technique Analysis\n        </div>\n\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr 1fr\",\n            gap: padding,\n            marginTop: padding,\n          }}\n        >\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n              }}\n            >\n              {techniqueCount}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              총 기술 | Total Uses\n            </div>\n          </div>\n\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n              }}\n            >\n              {uniqueTechniques}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              고유 기술 | Unique\n            </div>\n          </div>\n\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                fontSize: fontSize + 6,\n                fontWeight: \"bold\",\n                color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n              }}\n            >\n              {winnerStats.vitalPointHits ?? 0}\n            </div>\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              }}\n            >\n              급소 타격 | Vital Hits\n            </div>\n          </div>\n        </div>\n\n        {/* Most Used Techniques */}\n        {winnerStats.techniques && winnerStats.techniques.length > 0 && (\n          <div\n            style={{\n              marginTop: padding,\n              paddingTop: padding,\n              borderTop: `1px solid ${hexToRgbaString(\n                KOREAN_COLORS.UI_BORDER,\n                0.3\n              )}`,\n            }}\n          >\n            <div\n              style={{\n                fontSize: fontSize - 2,\n                color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n                marginBottom: padding / 2,\n              }}\n            >\n              주요 기술 | Primary Techniques:\n            </div>\n            <div\n              style={{\n                fontSize: fontSize,\n                color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n                lineHeight: 1.6,\n              }}\n            >\n              {winnerStats.techniques.slice(0, 5).join(\", \")}\n              {winnerStats.techniques.length > 5 && \"...\"}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Combat Effectiveness Summary */}\n      <div\n        style={{\n          marginTop: padding,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n        }}\n        data-testid=\"effectiveness-summary\"\n      >\n        <div\n          style={{\n            fontSize: fontSize - 2,\n            color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            marginBottom: padding / 4,\n          }}\n        >\n          전투 효율성 | Combat Effectiveness\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize + 2,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n          }}\n        >\n          {Math.round((scores.offense + scores.defense + scores.technique + scores.efficiency) / 4)}%\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { MatchStatistics } from "../../../../systems/combat";
+export interface PerformanceRatingProps {
+    readonly matchStats: MatchStatistics;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+}
+/**
+ * Performance Rating Component
+ * Displays S/A/B/C ranking based on combat performance
+ */
+export declare const PerformanceRating: React.FC<PerformanceRatingProps>;
+//# sourceMappingURL=PerformanceRatingOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceRatingOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/PerformanceRatingOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAS7D,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAuDD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA0M9D,CAAC"}

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

@@ -0,0 +1,210 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { PERFORMANCE_RATING_THRESHOLDS } from "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { pulseAnimation } from "./animations.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/endscreen/components/PerformanceRatingOverlayHtml.tsx
+/**
+* Helper to convert hex color to CSS string
+*/
+var toCssColor = (hex) => hexToRgbaString(hex, 1);
+/**
+* Calculate performance score based on match statistics
+* Score ranges from 0-100 based on combat effectiveness
+*/
+function calculatePerformanceScore(stats) {
+	const winnerStats = stats.winner === 0 ? stats.player1 : stats.player2;
+	const accuracy = Math.min(winnerStats.hitsLanded / 10 * 100, 100);
+	const damageRatio = winnerStats.totalDamageReceived > 0 ? winnerStats.totalDamageDealt / winnerStats.totalDamageReceived : winnerStats.totalDamageDealt > 0 ? 2 : 0;
+	const damageScore = Math.min(damageRatio * 30, 30);
+	const precisionBonus = winnerStats.perfectStrikes * 5 + winnerStats.vitalPointHits * 3;
+	const precisionScore = Math.min(precisionBonus, 25);
+	const speedScore = stats.matchDuration < 60 ? 15 : stats.matchDuration < 120 ? 10 : 5;
+	const totalScore = accuracy * .3 + damageScore + precisionScore + speedScore;
+	return Math.min(Math.round(totalScore), 100);
+}
+/**
+* Get performance rating based on score
+*/
+function getPerformanceRating(score) {
+	if (score >= PERFORMANCE_RATING_THRESHOLDS.S.minScore) return "S";
+	if (score >= PERFORMANCE_RATING_THRESHOLDS.A.minScore) return "A";
+	if (score >= PERFORMANCE_RATING_THRESHOLDS.B.minScore) return "B";
+	return "C";
+}
+/**
+* Performance Rating Component
+* Displays S/A/B/C ranking based on combat performance
+*/
+var PerformanceRating = ({ matchStats, isMobile, isTablet }) => {
+	const ratingFontSize = isMobile ? 36 : isTablet ? 48 : 56;
+	const labelFontSize = isMobile ? 12 : isTablet ? 14 : 15;
+	const scoreFontSize = isMobile ? 18 : isTablet ? 20 : 24;
+	const padding = isMobile ? 10 : isTablet ? 12 : 15;
+	const performanceScore = useMemo(() => calculatePerformanceScore(matchStats), [matchStats]);
+	const rating = useMemo(() => getPerformanceRating(performanceScore), [performanceScore]);
+	const ratingInfo = PERFORMANCE_RATING_THRESHOLDS[rating];
+	const winnerStats = useMemo(() => matchStats.winner === 0 ? matchStats.player1 : matchStats.player2, [matchStats]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "performance-rating",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9),
+			border: `3px solid ${hexToRgbaString(ratingInfo.color, .8)}`,
+			borderRadius: "16px",
+			padding,
+			marginBottom: padding / 2,
+			minWidth: isMobile ? "260px" : "300px",
+			boxShadow: `0 0 30px ${hexToRgbaString(ratingInfo.color, .3)}`,
+			animation: "ratingPulse 2s ease-in-out infinite"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: labelFontSize,
+					color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),
+					fontFamily: FONT_FAMILY.KOREAN,
+					marginBottom: padding / 2,
+					textTransform: "uppercase",
+					letterSpacing: "0.1em"
+				},
+				"data-testid": "rating-label",
+				children: "전투 등급 | Performance Rating"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: ratingFontSize,
+					fontWeight: "bold",
+					color: toCssColor(ratingInfo.color),
+					fontFamily: FONT_FAMILY.KOREAN,
+					textShadow: `0 0 20px ${hexToRgbaString(ratingInfo.color, .6)}`,
+					marginBottom: padding / 2,
+					animation: "ratingGlow 1.5s ease-in-out infinite"
+				},
+				"data-testid": "rating-letter",
+				children: rating
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: labelFontSize,
+					color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),
+					fontFamily: FONT_FAMILY.KOREAN,
+					marginBottom: padding,
+					textAlign: "center"
+				},
+				"data-testid": "rating-description",
+				children: [
+					ratingInfo.description.korean,
+					" | ",
+					ratingInfo.description.english
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					width: "100%",
+					padding,
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .4),
+					borderRadius: "8px"
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: scoreFontSize,
+							fontWeight: "bold",
+							color: toCssColor(ratingInfo.color),
+							fontFamily: FONT_FAMILY.KOREAN,
+							marginBottom: padding / 4
+						},
+						"data-testid": "performance-score",
+						children: performanceScore
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: labelFontSize - 2,
+							color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),
+							fontFamily: FONT_FAMILY.KOREAN
+						},
+						children: "전투 점수 | Combat Score"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "grid",
+							gridTemplateColumns: "1fr 1fr",
+							gap: padding / 2,
+							marginTop: padding,
+							width: "100%",
+							fontSize: labelFontSize - 4,
+							color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY)
+						},
+						"data-testid": "score-breakdown",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),
+										fontWeight: "bold"
+									},
+									children: winnerStats.perfectStrikes ?? 0
+								}), /* @__PURE__ */ jsx("div", { children: "완벽 | Perfect" })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),
+										fontWeight: "bold"
+									},
+									children: winnerStats.vitalPointHits ?? 0
+								}), /* @__PURE__ */ jsx("div", { children: "급소 | Vital Hits" })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),
+										fontWeight: "bold"
+									},
+									children: winnerStats.techniques?.length ?? 0
+								}), /* @__PURE__ */ jsx("div", { children: "기술 | Techniques" })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: { textAlign: "center" },
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										color: toCssColor(KOREAN_COLORS.CRITICAL_HIT),
+										fontWeight: "bold"
+									},
+									children: matchStats.criticalHits
+								}), /* @__PURE__ */ jsx("div", { children: "치명타 | Criticals" })]
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
+        ${pulseAnimation}
+
+        @keyframes ratingGlow {
+          0%, 100% {
+            text-shadow: 0 0 20px ${hexToRgbaString(ratingInfo.color, .6)};
+          }
+          50% {
+            text-shadow: 0 0 30px ${hexToRgbaString(ratingInfo.color, .9)}, 0 0 50px ${hexToRgbaString(ratingInfo.color, .5)};
+          }
+        }
+      ` })
+		]
+	});
+};
+//#endregion
+export { PerformanceRating };
+
+//# sourceMappingURL=PerformanceRatingOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceRatingOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/PerformanceRatingOverlayHtml.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { MatchStatistics } from \"../../../../systems/combat\";\nimport {\n  FONT_FAMILY,\n  KOREAN_COLORS,\n  PERFORMANCE_RATING_THRESHOLDS,\n} from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { pulseAnimation } from \"./animations\";\n\nexport interface PerformanceRatingProps {\n  readonly matchStats: MatchStatistics;\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 * Calculate performance score based on match statistics\n * Score ranges from 0-100 based on combat effectiveness\n */\nfunction calculatePerformanceScore(stats: MatchStatistics): number {\n  const winnerStats = stats.winner === 0 ? stats.player1 : stats.player2;\n\n  // Calculate accuracy based on offensive performance only\n  // Use a normalized scale: higher hits landed = better accuracy\n  const accuracy = Math.min((winnerStats.hitsLanded / 10) * 100, 100);\n\n  // Calculate damage efficiency (damage dealt / damage taken ratio)\n  // Perfect defense (no damage taken) gets bonus ratio\n  const damageRatio =\n    winnerStats.totalDamageReceived > 0\n      ? winnerStats.totalDamageDealt / winnerStats.totalDamageReceived\n      : winnerStats.totalDamageDealt > 0\n      ? 2\n      : 0;\n  const damageScore = Math.min(damageRatio * 30, 30); // Max 30 points\n\n  // Perfect strikes and vital point hits bonus\n  const precisionBonus =\n    winnerStats.perfectStrikes * 5 + winnerStats.vitalPointHits * 3;\n  const precisionScore = Math.min(precisionBonus, 25); // Max 25 points\n\n  // Speed bonus (shorter match duration is better)\n  const speedScore =\n    stats.matchDuration < 60 ? 15 : stats.matchDuration < 120 ? 10 : 5;\n\n  // Combine scores\n  const totalScore = accuracy * 0.3 + damageScore + precisionScore + speedScore;\n\n  return Math.min(Math.round(totalScore), 100);\n}\n\n/**\n * Get performance rating based on score\n */\nfunction getPerformanceRating(\n  score: number\n): keyof typeof PERFORMANCE_RATING_THRESHOLDS {\n  if (score >= PERFORMANCE_RATING_THRESHOLDS.S.minScore) return \"S\";\n  if (score >= PERFORMANCE_RATING_THRESHOLDS.A.minScore) return \"A\";\n  if (score >= PERFORMANCE_RATING_THRESHOLDS.B.minScore) return \"B\";\n  return \"C\";\n}\n\n/**\n * Performance Rating Component\n * Displays S/A/B/C ranking based on combat performance\n */\nexport const PerformanceRating: React.FC<PerformanceRatingProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const ratingFontSize = isMobile ? 36 : isTablet ? 48 : 56;\n  const labelFontSize = isMobile ? 12 : isTablet ? 14 : 15;\n  const scoreFontSize = isMobile ? 18 : isTablet ? 20 : 24;\n  const padding = isMobile ? 10 : isTablet ? 12 : 15;\n\n  const performanceScore = useMemo(\n    () => calculatePerformanceScore(matchStats),\n    [matchStats]\n  );\n\n  const rating = useMemo(\n    () => getPerformanceRating(performanceScore),\n    [performanceScore]\n  );\n\n  const ratingInfo = PERFORMANCE_RATING_THRESHOLDS[rating];\n\n  // Extract winner stats for clarity\n  const winnerStats = useMemo(\n    () => (matchStats.winner === 0 ? matchStats.player1 : matchStats.player2),\n    [matchStats]\n  );\n\n  return (\n    <div\n      data-testid=\"performance-rating\"\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n        border: `3px solid ${hexToRgbaString(ratingInfo.color, 0.8)}`,\n        borderRadius: \"16px\",\n        padding: padding,\n        marginBottom: padding / 2,\n        minWidth: isMobile ? \"260px\" : \"300px\",\n        boxShadow: `0 0 30px ${hexToRgbaString(ratingInfo.color, 0.3)}`,\n        animation: \"ratingPulse 2s ease-in-out infinite\",\n      }}\n    >\n      {/* Title */}\n      <div\n        style={{\n          fontSize: labelFontSize,\n          color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginBottom: padding / 2,\n          textTransform: \"uppercase\",\n          letterSpacing: \"0.1em\",\n        }}\n        data-testid=\"rating-label\"\n      >\n        전투 등급 | Performance Rating\n      </div>\n\n      {/* Rating Letter */}\n      <div\n        style={{\n          fontSize: ratingFontSize,\n          fontWeight: \"bold\",\n          color: toCssColor(ratingInfo.color),\n          fontFamily: FONT_FAMILY.KOREAN,\n          textShadow: `0 0 20px ${hexToRgbaString(ratingInfo.color, 0.6)}`,\n          marginBottom: padding / 2,\n          animation: \"ratingGlow 1.5s ease-in-out infinite\",\n        }}\n        data-testid=\"rating-letter\"\n      >\n        {rating}\n      </div>\n\n      {/* Rating Description */}\n      <div\n        style={{\n          fontSize: labelFontSize,\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginBottom: padding,\n          textAlign: \"center\",\n        }}\n        data-testid=\"rating-description\"\n      >\n        {ratingInfo.description.korean} | {ratingInfo.description.english}\n      </div>\n\n      {/* Performance Score */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          width: \"100%\",\n          padding: padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n      >\n        <div\n          style={{\n            fontSize: scoreFontSize,\n            fontWeight: \"bold\",\n            color: toCssColor(ratingInfo.color),\n            fontFamily: FONT_FAMILY.KOREAN,\n            marginBottom: padding / 4,\n          }}\n          data-testid=\"performance-score\"\n        >\n          {performanceScore}\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize - 2,\n            color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            fontFamily: FONT_FAMILY.KOREAN,\n          }}\n        >\n          전투 점수 | Combat Score\n        </div>\n\n        {/* Score Breakdown */}\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"1fr 1fr\",\n            gap: padding / 2,\n            marginTop: padding,\n            width: \"100%\",\n            fontSize: labelFontSize - 4,\n            color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n          }}\n          data-testid=\"score-breakdown\"\n        >\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n                fontWeight: \"bold\",\n              }}\n            >\n              {winnerStats.perfectStrikes ?? 0}\n            </div>\n            <div>완벽 | Perfect</div>\n          </div>\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n                fontWeight: \"bold\",\n              }}\n            >\n              {winnerStats.vitalPointHits ?? 0}\n            </div>\n            <div>급소 | Vital Hits</div>\n          </div>\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n                fontWeight: \"bold\",\n              }}\n            >\n              {winnerStats.techniques?.length ?? 0}\n            </div>\n            <div>기술 | Techniques</div>\n          </div>\n          <div style={{ textAlign: \"center\" }}>\n            <div\n              style={{\n                color: toCssColor(KOREAN_COLORS.CRITICAL_HIT),\n                fontWeight: \"bold\",\n              }}\n            >\n              {matchStats.criticalHits}\n            </div>\n            <div>치명타 | Criticals</div>\n          </div>\n        </div>\n      </div>\n\n      {/* CSS Animations */}\n      <style>{`\n        ${pulseAnimation}\n\n        @keyframes ratingGlow {\n          0%, 100% {\n            text-shadow: 0 0 20px ${hexToRgbaString(ratingInfo.color, 0.6)};\n          }\n          50% {\n            text-shadow: 0 0 30px ${hexToRgbaString(\n              ratingInfo.color,\n              0.9\n            )}, 0 0 50px ${hexToRgbaString(ratingInfo.color, 0.5)};\n          }\n        }\n      `}</style>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * 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
+ */
+export declare const VictoryAnimation3D: React.FC;
+//# sourceMappingURL=VictoryAnimation3D.d.ts.map

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

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