blacktrigram 0.7.2

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

@@ -0,0 +1,321 @@
+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 "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/endscreen/components/MatchStatisticsDisplayOverlayHtml.tsx
+/**
+* Helper to convert hex color to CSS string
+*/
+var toCssColor = (hex) => hexToRgbaString(hex, 1);
+/**
+* Individual stat row component
+*/
+var StatRow = ({ label, value, highlight = false, fontSize, spacing }) => /* @__PURE__ */ jsxs("div", {
+	style: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		marginBottom: spacing / 2,
+		fontSize,
+		color: toCssColor(highlight ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_SECONDARY)
+	},
+	children: [/* @__PURE__ */ jsxs("span", { children: [label, ":"] }), /* @__PURE__ */ jsx("span", {
+		style: {
+			fontWeight: "bold",
+			color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY)
+		},
+		children: value
+	})]
+});
+/**
+* Player statistics panel component
+*/
+var PlayerStats = ({ playerNum, stats, isWinner, fontSize, labelFontSize, padding, spacing }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			flex: 1,
+			background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .6),
+			border: `2px solid ${hexToRgbaString(isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.UI_BORDER, .8)}`,
+			borderRadius: "8px",
+			padding
+		},
+		"data-testid": `player${playerNum}-stats`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: labelFontSize,
+					fontWeight: "bold",
+					color: toCssColor(isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.PRIMARY_CYAN),
+					marginBottom: spacing,
+					textAlign: "center"
+				},
+				children: [
+					"플레이어 ",
+					playerNum,
+					" | Player ",
+					playerNum,
+					isWinner && " 🏆"
+				]
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "승리 | Wins",
+				value: stats.wins,
+				highlight: stats.wins > 0,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "패배 | Losses",
+				value: stats.losses,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "가한 피해 | Damage Dealt",
+				value: stats.totalDamageDealt,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "받은 피해 | Damage Taken",
+				value: stats.totalDamageReceived,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "명중 | Hits Landed",
+				value: stats.hitsLanded,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "피격 | Hits Taken",
+				value: stats.hitsTaken,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "완벽한 타격 | Perfect Strikes",
+				value: stats.perfectStrikes,
+				highlight: stats.perfectStrikes > 0,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "급소 공격 | Vital Point Hits",
+				value: stats.vitalPointHits,
+				highlight: stats.vitalPointHits > 0,
+				fontSize,
+				spacing
+			}),
+			/* @__PURE__ */ jsx(StatRow, {
+				label: "연승 | Consecutive Wins",
+				value: stats.consecutiveWins,
+				fontSize,
+				spacing
+			}),
+			stats.techniques && stats.techniques.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: { marginTop: spacing },
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: fontSize - 2,
+						color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),
+						marginBottom: spacing / 2
+					},
+					children: "사용한 기술 | Techniques Used:"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: fontSize - 2,
+						color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),
+						paddingLeft: spacing
+					},
+					children: [stats.techniques.slice(0, 5).join(", "), stats.techniques.length > 5 && "..."]
+				})]
+			})
+		]
+	});
+};
+/**
+* Match Statistics Display Component
+* Shows detailed combat statistics for both players
+*/
+var MatchStatisticsDisplay = ({ matchStats, isMobile, isTablet }) => {
+	const fontSize = isMobile ? 12 : isTablet ? 14 : 16;
+	const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;
+	const padding = isMobile ? 10 : isTablet ? 15 : 20;
+	const spacing = isMobile ? 8 : isTablet ? 10 : 12;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "match-statistics-display",
+		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: spacing * 2,
+			fontFamily: FONT_FAMILY.KOREAN
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: labelFontSize + 2,
+					fontWeight: "bold",
+					color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),
+					textAlign: "center",
+					marginBottom: spacing * 1.5
+				},
+				children: "경기 통계 | Match Statistics"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)",
+					gap: spacing,
+					marginBottom: spacing * 1.5,
+					padding,
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .4),
+					borderRadius: "8px"
+				},
+				"data-testid": "overall-stats",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: { textAlign: "center" },
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: fontSize - 2,
+								color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+							},
+							children: "라운드 | Rounds"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								fontSize: labelFontSize,
+								color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),
+								fontWeight: "bold"
+							},
+							children: [
+								matchStats.currentRound,
+								" / ",
+								matchStats.maxRounds
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: { textAlign: "center" },
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: fontSize - 2,
+								color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+							},
+							children: "시간 | Duration"
+						}), /* @__PURE__ */ jsxs("div", {
+							style: {
+								fontSize: labelFontSize,
+								color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),
+								fontWeight: "bold"
+							},
+							children: [
+								Math.floor(matchStats.matchDuration / 60),
+								":",
+								(matchStats.matchDuration % 60).toString().padStart(2, "0")
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: { textAlign: "center" },
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: fontSize - 2,
+								color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+							},
+							children: "치명타 | Critical Hits"
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: labelFontSize,
+								color: toCssColor(KOREAN_COLORS.CRITICAL_HIT),
+								fontWeight: "bold"
+							},
+							children: matchStats.criticalHits
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: { textAlign: "center" },
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: fontSize - 2,
+								color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY)
+							},
+							children: "급소 공격 | Vital Hits"
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: labelFontSize,
+								color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),
+								fontWeight: "bold"
+							},
+							children: matchStats.vitalPointHits
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: isMobile ? "column" : "row",
+					gap: spacing * 1.5
+				},
+				children: [/* @__PURE__ */ jsx(PlayerStats, {
+					playerNum: 1,
+					stats: matchStats.player1,
+					isWinner: matchStats.winner === 0,
+					fontSize,
+					labelFontSize,
+					padding,
+					spacing
+				}), /* @__PURE__ */ jsx(PlayerStats, {
+					playerNum: 2,
+					stats: matchStats.player2,
+					isWinner: matchStats.winner === 1,
+					fontSize,
+					labelFontSize,
+					padding,
+					spacing
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: spacing * 1.5,
+					padding,
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .4),
+					borderRadius: "8px",
+					textAlign: "center"
+				},
+				"data-testid": "final-score",
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: labelFontSize,
+						color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),
+						marginBottom: spacing / 2
+					},
+					children: "최종 점수 | Final Score"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: labelFontSize + 4,
+						fontWeight: "bold",
+						color: toCssColor(KOREAN_COLORS.ACCENT_GOLD)
+					},
+					children: [
+						matchStats.finalScore.player1,
+						" - ",
+						matchStats.finalScore.player2
+					]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { MatchStatisticsDisplay };
+
+//# sourceMappingURL=MatchStatisticsDisplayOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MatchStatisticsDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/MatchStatisticsDisplayOverlayHtml.tsx"],"sourcesContent":["import React 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 MatchStatisticsDisplayProps {\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 * Props for StatRow component\n */\ninterface StatRowProps {\n  readonly label: string;\n  readonly value: string | number;\n  readonly highlight?: boolean;\n  readonly fontSize: number;\n  readonly spacing: number;\n}\n\n/**\n * Individual stat row component\n */\nconst StatRow: React.FC<StatRowProps> = ({\n  label,\n  value,\n  highlight = false,\n  fontSize,\n  spacing,\n}) => (\n  <div\n    style={{\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n      marginBottom: spacing / 2,\n      fontSize,\n      color: toCssColor(\n        highlight ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_SECONDARY\n      ),\n    }}\n  >\n    <span>{label}:</span>\n    <span\n      style={{\n        fontWeight: \"bold\",\n        color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n      }}\n    >\n      {value}\n    </span>\n  </div>\n);\n\n/**\n * Props for PlayerStats component\n */\ninterface PlayerStatsProps {\n  readonly playerNum: 1 | 2;\n  readonly stats: PlayerMatchStats;\n  readonly isWinner: boolean;\n  readonly fontSize: number;\n  readonly labelFontSize: number;\n  readonly padding: number;\n  readonly spacing: number;\n}\n\n/**\n * Player statistics panel component\n */\nconst PlayerStats: React.FC<PlayerStatsProps> = ({\n  playerNum,\n  stats,\n  isWinner,\n  fontSize,\n  labelFontSize,\n  padding,\n  spacing,\n}) => {\n  return (\n    <div\n      style={{\n        flex: 1,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.6),\n        border: `2px solid ${hexToRgbaString(\n          isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.UI_BORDER,\n          0.8\n        )}`,\n        borderRadius: \"8px\",\n        padding,\n      }}\n      data-testid={`player${playerNum}-stats`}\n    >\n      <div\n        style={{\n          fontSize: labelFontSize,\n          fontWeight: \"bold\",\n          color: toCssColor(\n            isWinner ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.PRIMARY_CYAN\n          ),\n          marginBottom: spacing,\n          textAlign: \"center\",\n        }}\n      >\n        플레이어 {playerNum} | Player {playerNum}\n        {isWinner && \" 🏆\"}\n      </div>\n\n      <StatRow\n        label=\"승리 | Wins\"\n        value={stats.wins}\n        highlight={stats.wins > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"패배 | Losses\"\n        value={stats.losses}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"가한 피해 | Damage Dealt\"\n        value={stats.totalDamageDealt}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"받은 피해 | Damage Taken\"\n        value={stats.totalDamageReceived}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"명중 | Hits Landed\"\n        value={stats.hitsLanded}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"피격 | Hits Taken\"\n        value={stats.hitsTaken}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"완벽한 타격 | Perfect Strikes\"\n        value={stats.perfectStrikes}\n        highlight={stats.perfectStrikes > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"급소 공격 | Vital Point Hits\"\n        value={stats.vitalPointHits}\n        highlight={stats.vitalPointHits > 0}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n      <StatRow\n        label=\"연승 | Consecutive Wins\"\n        value={stats.consecutiveWins}\n        fontSize={fontSize}\n        spacing={spacing}\n      />\n\n      {stats.techniques && stats.techniques.length > 0 && (\n        <div style={{ marginTop: spacing }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n              marginBottom: spacing / 2,\n            }}\n          >\n            사용한 기술 | Techniques Used:\n          </div>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n              paddingLeft: spacing,\n            }}\n          >\n            {stats.techniques.slice(0, 5).join(\", \")}\n            {stats.techniques.length > 5 && \"...\"}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Match Statistics Display Component\n * Shows detailed combat statistics for both players\n */\nexport const MatchStatisticsDisplay: React.FC<MatchStatisticsDisplayProps> = ({\n  matchStats,\n  isMobile,\n  isTablet,\n}) => {\n  const fontSize = isMobile ? 12 : isTablet ? 14 : 16;\n  const labelFontSize = isMobile ? 14 : isTablet ? 16 : 18;\n  const padding = isMobile ? 10 : isTablet ? 15 : 20;\n  const spacing = isMobile ? 8 : isTablet ? 10 : 12;\n\n  return (\n    <div\n      data-testid=\"match-statistics-display\"\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: spacing * 2,\n        fontFamily: FONT_FAMILY.KOREAN,\n      }}\n    >\n      {/* Overall Match Stats */}\n      <div\n        style={{\n          fontSize: labelFontSize + 2,\n          fontWeight: \"bold\",\n          color: toCssColor(KOREAN_COLORS.PRIMARY_CYAN),\n          textAlign: \"center\",\n          marginBottom: spacing * 1.5,\n        }}\n      >\n        경기 통계 | Match Statistics\n      </div>\n\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: isMobile ? \"1fr 1fr\" : \"repeat(4, 1fr)\",\n          gap: spacing,\n          marginBottom: spacing * 1.5,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n        }}\n        data-testid=\"overall-stats\"\n      >\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            라운드 | Rounds\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.currentRound} / {matchStats.maxRounds}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            시간 | Duration\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.TEXT_PRIMARY),\n              fontWeight: \"bold\",\n            }}\n          >\n            {Math.floor(matchStats.matchDuration / 60)}:\n            {(matchStats.matchDuration % 60).toString().padStart(2, \"0\")}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: fontSize - 2,\n              color: toCssColor(KOREAN_COLORS.TEXT_TERTIARY),\n            }}\n          >\n            치명타 | Critical Hits\n          </div>\n          <div\n            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.CRITICAL_HIT),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.criticalHits}\n          </div>\n        </div>\n\n        <div style={{ textAlign: \"center\" }}>\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            style={{\n              fontSize: labelFontSize,\n              color: toCssColor(KOREAN_COLORS.VITAL_POINT_HIT),\n              fontWeight: \"bold\",\n            }}\n          >\n            {matchStats.vitalPointHits}\n          </div>\n        </div>\n      </div>\n\n      {/* Player Stats Side by Side */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: isMobile ? \"column\" : \"row\",\n          gap: spacing * 1.5,\n        }}\n      >\n        <PlayerStats\n          playerNum={1}\n          stats={matchStats.player1}\n          isWinner={matchStats.winner === 0}\n          fontSize={fontSize}\n          labelFontSize={labelFontSize}\n          padding={padding}\n          spacing={spacing}\n        />\n        <PlayerStats\n          playerNum={2}\n          stats={matchStats.player2}\n          isWinner={matchStats.winner === 1}\n          fontSize={fontSize}\n          labelFontSize={labelFontSize}\n          padding={padding}\n          spacing={spacing}\n        />\n      </div>\n\n      {/* Score Display */}\n      <div\n        style={{\n          marginTop: spacing * 1.5,\n          padding,\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.4),\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n        }}\n        data-testid=\"final-score\"\n      >\n        <div\n          style={{\n            fontSize: labelFontSize,\n            color: toCssColor(KOREAN_COLORS.TEXT_SECONDARY),\n            marginBottom: spacing / 2,\n          }}\n        >\n          최종 점수 | Final Score\n        </div>\n        <div\n          style={{\n            fontSize: labelFontSize + 4,\n            fontWeight: \"bold\",\n            color: toCssColor(KOREAN_COLORS.ACCENT_GOLD),\n          }}\n        >\n          {matchStats.finalScore.player1} - {matchStats.finalScore.player2}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import React from "react";
+export interface NavigationButtonsProps {
+    readonly onReturnToMenu: () => void;
+    readonly onRematch?: () => void;
+    readonly onViewReplay?: () => void;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+    readonly width: number;
+    /** Optional audio callback for click sounds - passed from parent to avoid Html portal context issues */
+    readonly onPlaySelectSound?: () => void;
+    /** Optional audio callback for hover sounds - passed from parent to avoid Html portal context issues */
+    readonly onPlayHoverSound?: () => void;
+}
+/**
+ * Navigation Buttons Component
+ * Provides action buttons for replay and menu navigation.
+ *
+ * This component delegates visual styling and accessibility behavior to
+ * BaseButtonOverlayHtml, providing:
+ * - Consistent Korean / English bilingual theming
+ * - Centralized button behavior and standard browser keyboard support
+ * - Reduced code duplication (113 lines saved: 237 → 124)
+ *
+ * Note: Audio callbacks are passed as props since this component is rendered
+ * inside a Canvas Html portal which doesn't have access to AudioProvider context.
+ */
+export declare const NavigationButtons: React.FC<NavigationButtonsProps>;
+//# sourceMappingURL=NavigationButtonsOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationButtonsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/NavigationButtonsOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wGAAwG;IACxG,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,wGAAwG;IACxG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CACxC;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkG9D,CAAC"}

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

@@ -0,0 +1,93 @@
+import { BaseButtonOverlayHtml } from "../../../shared/base/BaseButtonOverlayHtml.js";
+import { slideUpAnimation } from "./animations.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/endscreen/components/NavigationButtonsOverlayHtml.tsx
+/**
+* Navigation Buttons Component
+* Provides action buttons for replay and menu navigation.
+*
+* This component delegates visual styling and accessibility behavior to
+* BaseButtonOverlayHtml, providing:
+* - Consistent Korean / English bilingual theming
+* - Centralized button behavior and standard browser keyboard support
+* - Reduced code duplication (113 lines saved: 237 → 124)
+*
+* Note: Audio callbacks are passed as props since this component is rendered
+* inside a Canvas Html portal which doesn't have access to AudioProvider context.
+*/
+var NavigationButtons = ({ onReturnToMenu, onRematch, onViewReplay, isMobile, isTablet, width, onPlaySelectSound, onPlayHoverSound }) => {
+	const spacing = isMobile ? 10 : isTablet ? 12 : 15;
+	const buttonSize = width < 768 ? "sm" : "md";
+	const buttonMinWidth = width < 768 ? "200px" : "150px";
+	const handleReturnToMenu = useCallback(() => {
+		onPlaySelectSound?.();
+		onReturnToMenu();
+	}, [onPlaySelectSound, onReturnToMenu]);
+	const handleRematch = useCallback(() => {
+		if (onRematch) {
+			onPlaySelectSound?.();
+			onRematch();
+		}
+	}, [onPlaySelectSound, onRematch]);
+	const handleViewReplay = useCallback(() => {
+		if (onViewReplay) {
+			onPlaySelectSound?.();
+			onViewReplay();
+		}
+	}, [onPlaySelectSound, onViewReplay]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "navigation-buttons",
+		style: {
+			display: "flex",
+			flexDirection: isMobile ? "column" : "row",
+			gap: spacing,
+			marginTop: spacing * 2,
+			animation: "slideUp 0.6s ease-out 0.3s both",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: [
+			/* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+				korean: "메뉴로",
+				english: "Return to Menu",
+				onClick: handleReturnToMenu,
+				onMouseEnter: onPlayHoverSound,
+				variant: "primary",
+				size: buttonSize,
+				testId: "return-to-menu-button",
+				isMobile,
+				style: { minWidth: buttonMinWidth }
+			}),
+			onRematch && /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+				korean: "재대결",
+				english: "Rematch",
+				onClick: handleRematch,
+				onMouseEnter: onPlayHoverSound,
+				variant: "secondary",
+				size: buttonSize,
+				testId: "rematch-button",
+				isMobile,
+				style: { minWidth: buttonMinWidth }
+			}),
+			onViewReplay && /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+				korean: "훈련",
+				english: "Training",
+				onClick: handleViewReplay,
+				onMouseEnter: onPlayHoverSound,
+				variant: "secondary",
+				size: buttonSize,
+				testId: "view-training-button",
+				isMobile,
+				style: { minWidth: buttonMinWidth }
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
+        ${slideUpAnimation}
+      ` })
+		]
+	});
+};
+//#endregion
+export { NavigationButtons };
+
+//# sourceMappingURL=NavigationButtonsOverlayHtml.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationButtonsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/endscreen/components/NavigationButtonsOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { slideUpAnimation } from \"./animations\";\n\nexport interface NavigationButtonsProps {\n  readonly onReturnToMenu: () => void;\n  readonly onRematch?: () => void;\n  readonly onViewReplay?: () => void;\n  readonly isMobile: boolean;\n  readonly isTablet: boolean;\n  readonly width: number;\n  /** Optional audio callback for click sounds - passed from parent to avoid Html portal context issues */\n  readonly onPlaySelectSound?: () => void;\n  /** Optional audio callback for hover sounds - passed from parent to avoid Html portal context issues */\n  readonly onPlayHoverSound?: () => void;\n}\n\n/**\n * Navigation Buttons Component\n * Provides action buttons for replay and menu navigation.\n *\n * This component delegates visual styling and accessibility behavior to\n * BaseButtonOverlayHtml, providing:\n * - Consistent Korean / English bilingual theming\n * - Centralized button behavior and standard browser keyboard support\n * - Reduced code duplication (113 lines saved: 237 → 124)\n *\n * Note: Audio callbacks are passed as props since this component is rendered\n * inside a Canvas Html portal which doesn't have access to AudioProvider context.\n */\nexport const NavigationButtons: React.FC<NavigationButtonsProps> = ({\n  onReturnToMenu,\n  onRematch,\n  onViewReplay,\n  isMobile,\n  isTablet,\n  width,\n  onPlaySelectSound,\n  onPlayHoverSound,\n}) => {\n  const spacing = isMobile ? 10 : isTablet ? 12 : 15;\n  \n  // Determine button size based on screen width (resolution-based, not device detection)\n  // Small screens (<768px): sm, Medium/Large (>=768px): md\n  const buttonSize = width < 768 ? \"sm\" : \"md\";\n  const buttonMinWidth = width < 768 ? \"200px\" : \"150px\";\n\n  const handleReturnToMenu = useCallback(() => {\n    onPlaySelectSound?.();\n    onReturnToMenu();\n  }, [onPlaySelectSound, onReturnToMenu]);\n\n  const handleRematch = useCallback(() => {\n    if (onRematch) {\n      onPlaySelectSound?.();\n      onRematch();\n    }\n  }, [onPlaySelectSound, onRematch]);\n\n  const handleViewReplay = useCallback(() => {\n    if (onViewReplay) {\n      onPlaySelectSound?.();\n      onViewReplay();\n    }\n  }, [onPlaySelectSound, onViewReplay]);\n\n  return (\n    <div\n      data-testid=\"navigation-buttons\"\n      style={{\n        display: \"flex\",\n        flexDirection: isMobile ? \"column\" : \"row\",\n        gap: spacing,\n        marginTop: spacing * 2,\n        animation: \"slideUp 0.6s ease-out 0.3s both\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      {/* Return to Menu Button - Primary Action */}\n      <BaseButtonOverlayHtml\n        korean=\"메뉴로\"\n        english=\"Return to Menu\"\n        onClick={handleReturnToMenu}\n        onMouseEnter={onPlayHoverSound}\n        variant=\"primary\"\n        size={buttonSize}\n        testId=\"return-to-menu-button\"\n        isMobile={isMobile}\n        style={{ minWidth: buttonMinWidth }}\n      />\n\n      {/* Rematch Button - Secondary Action */}\n      {onRematch && (\n        <BaseButtonOverlayHtml\n          korean=\"재대결\"\n          english=\"Rematch\"\n          onClick={handleRematch}\n          onMouseEnter={onPlayHoverSound}\n          variant=\"secondary\"\n          size={buttonSize}\n          testId=\"rematch-button\"\n          isMobile={isMobile}\n          style={{ minWidth: buttonMinWidth }}\n        />\n      )}\n\n      {/* Training Mode Button - Tertiary Action */}\n      {onViewReplay && (\n        <BaseButtonOverlayHtml\n          korean=\"훈련\"\n          english=\"Training\"\n          onClick={handleViewReplay}\n          onMouseEnter={onPlayHoverSound}\n          variant=\"secondary\"\n          size={buttonSize}\n          testId=\"view-training-button\"\n          isMobile={isMobile}\n          style={{ minWidth: buttonMinWidth }}\n        />\n      )}\n\n      {/* CSS Animations */}\n      <style>{`\n        ${slideUpAnimation}\n      `}</style>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8BA,IAAa,qBAAuD,EAClE,gBACA,WACA,cACA,UACA,UACA,OACA,mBACA,uBACI;CACJ,MAAM,UAAU,WAAW,KAAK,WAAW,KAAK;CAIhD,MAAM,aAAa,QAAQ,MAAM,OAAO;CACxC,MAAM,iBAAiB,QAAQ,MAAM,UAAU;CAE/C,MAAM,qBAAqB,kBAAkB;AAC3C,uBAAqB;AACrB,kBAAgB;IACf,CAAC,mBAAmB,eAAe,CAAC;CAEvC,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,WAAW;AACb,wBAAqB;AACrB,cAAW;;IAEZ,CAAC,mBAAmB,UAAU,CAAC;CAElC,MAAM,mBAAmB,kBAAkB;AACzC,MAAI,cAAc;AAChB,wBAAqB;AACrB,iBAAc;;IAEf,CAAC,mBAAmB,aAAa,CAAC;AAErC,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,SAAS;GACT,eAAe,WAAW,WAAW;GACrC,KAAK;GACL,WAAW,UAAU;GACrB,WAAW;GACX,YAAY;GACZ,gBAAgB;GACjB;YAVH;GAaE,oBAAC,uBAAD;IACE,QAAO;IACP,SAAQ;IACR,SAAS;IACT,cAAc;IACd,SAAQ;IACR,MAAM;IACN,QAAO;IACG;IACV,OAAO,EAAE,UAAU,gBAAgB;IACnC,CAAA;GAGD,aACC,oBAAC,uBAAD;IACE,QAAO;IACP,SAAQ;IACR,SAAS;IACT,cAAc;IACd,SAAQ;IACR,MAAM;IACN,QAAO;IACG;IACV,OAAO,EAAE,UAAU,gBAAgB;IACnC,CAAA;GAIH,gBACC,oBAAC,uBAAD;IACE,QAAO;IACP,SAAQ;IACR,SAAS;IACT,cAAc;IACd,SAAQ;IACR,MAAM;IACN,QAAO;IACG;IACV,OAAO,EAAE,UAAU,gBAAgB;IACnC,CAAA;GAIJ,oBAAC,SAAD,EAAA,UAAQ;UACJ,iBAAiB;SACX,CAAA;GACN"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { MatchStatistics } from "../../../../systems/combat";
+export interface PerformanceBreakdownProps {
+    readonly matchStats: MatchStatistics;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+}
+/**
+ * Performance Breakdown Component
+ * Provides detailed analysis of combat performance by category
+ */
+export declare const PerformanceBreakdown: React.FC<PerformanceBreakdownProps>;
+//# sourceMappingURL=PerformanceBreakdownOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceBreakdownOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/endscreen/components/PerformanceBreakdownOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAK7D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,CAAC,UAAU,EAAE,eAAe,CAAC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAkHD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAiQpE,CAAC"}