blacktrigram 0.7.2

package/lib/components/screens/combat/components/feedback/MatchCountdown.js

@@ -0,0 +1,242 @@
+import { useAudio } from "../../../../../audio/AudioProvider.js";
+import { hexColorToCSS } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import useMatchCountdown from "../../../../../hooks/useMatchCountdown.js";
+import { useEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/feedback/MatchCountdown.tsx
+/**
+* MatchCountdown Component - Displays match start countdown sequence
+*
+* Korean: 매치 시작 카운트다운 (Match Start Countdown)
+*
+* Shows "Ready?" → "3... 2... 1..." → "Fight!" sequence with animations.
+* Implements Korean cyberpunk aesthetic with bilingual text support.
+* Plays audio cues for countdown and fight announcement.
+*
+* Refactored to use useKoreanTheme for consistent styling.
+*
+* @module components/combat/MatchCountdown
+* @category Combat UI
+*/
+/**
+* Get display text for current countdown state
+*/
+function getDisplayText(state, currentNumber) {
+	switch (state) {
+		case "ready": return {
+			ko: "준비?",
+			en: "Ready?"
+		};
+		case "counting": return {
+			ko: String(currentNumber),
+			en: String(currentNumber)
+		};
+		case "fight": return {
+			ko: "전투!",
+			en: "Fight!"
+		};
+		default: return null;
+	}
+}
+/**
+* MatchCountdown Component
+*
+* Displays match start countdown with:
+* - "Ready?" announcement (1 second)
+* - Countdown from 3 to 1 (1 second intervals)
+* - "Fight!" announcement (1 second)
+* - Pulse/scale animations for emphasis
+* - Bilingual Korean-English text
+* - Audio cues for countdown and fight
+* - Optional skip button
+* - Responsive sizing for mobile/tablet/desktop
+*
+* Korean: 매치 시작 카운트다운 컴포넌트
+*/
+var COUNTDOWN_CONFIG = {
+	readyDuration: 1,
+	countdownInterval: 1,
+	fightDuration: 1,
+	startNumber: 3
+};
+var MatchCountdown = ({ onComplete, isMobile, onSkip, showSkip = false }) => {
+	const audio = useAudio();
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "xlarge",
+		isMobile
+	});
+	const { state, currentNumber, startCountdown, skipCountdown, isActive } = useMatchCountdown(COUNTDOWN_CONFIG, onComplete);
+	const hasStartedRef = useRef(false);
+	useEffect(() => {
+		if (!hasStartedRef.current) {
+			hasStartedRef.current = true;
+			startCountdown();
+		}
+	}, [startCountdown]);
+	useEffect(() => {
+		if (!audio.isAudioReady) return;
+		if (state === "counting" && currentNumber > 0) audio.playSFX("attack_light");
+		else if (state === "fight") audio.playSFX("attack_heavy");
+	}, [
+		state,
+		currentNumber,
+		audio
+	]);
+	const handleSkip = () => {
+		skipCountdown();
+		onSkip?.();
+	};
+	const displayText = getDisplayText(state, currentNumber);
+	const getMainFontSize = () => {
+		if (isMobile) return state === "fight" ? "72px" : "64px";
+		return state === "fight" ? "120px" : "96px";
+	};
+	const getSubFontSize = () => {
+		if (isMobile) return state === "fight" ? "48px" : "40px";
+		return state === "fight" ? "72px" : "56px";
+	};
+	const mainFontSize = getMainFontSize();
+	const subFontSize = getSubFontSize();
+	const goldColor = useMemo(() => hexColorToCSS(theme.colors.ACCENT_GOLD), [theme.colors.ACCENT_GOLD]);
+	const cyanColor = useMemo(() => hexColorToCSS(theme.colors.PRIMARY_CYAN), [theme.colors.PRIMARY_CYAN]);
+	const darkBg = useMemo(() => hexColorToCSS(theme.colors.UI_BACKGROUND_DARK), [theme.colors.UI_BACKGROUND_DARK]);
+	if (!isActive || !displayText) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		"data-testid": "match-countdown",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": "Match countdown in progress",
+		"aria-live": "assertive",
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundColor: state === "fight" ? `${darkBg}cc` : `${darkBg}ee`,
+			zIndex: 1e3,
+			animation: state === "ready" ? "fadeIn 0.3s ease-in" : "none"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				fontSize: mainFontSize,
+				fontWeight: "bold",
+				color: state === "fight" ? goldColor : cyanColor,
+				fontFamily: theme.fontFamily.KOREAN,
+				textShadow: `0 0 ${state === "fight" ? "40px" : "30px"} ${state === "fight" ? goldColor : cyanColor}`,
+				animation: state === "ready" ? "pulse 0.8s ease-out" : state === "counting" ? "countdownPulse 0.8s ease-out" : state === "fight" ? "flash 0.3s ease-out" : "none",
+				textAlign: "center",
+				userSelect: "none"
+			},
+			"data-testid": "countdown-text",
+			children: [
+				displayText.ko,
+				/* @__PURE__ */ jsx("br", {}),
+				/* @__PURE__ */ jsx("span", {
+					style: { fontSize: subFontSize },
+					children: displayText.en
+				})
+			]
+		}), showSkip && state !== "fight" && /* @__PURE__ */ jsx("button", {
+			onClick: handleSkip,
+			"data-testid": "skip-countdown-button",
+			"aria-label": "Skip countdown",
+			style: {
+				position: "absolute",
+				bottom: isMobile ? "40px" : "60px",
+				padding: isMobile ? "10px 24px" : "12px 32px",
+				fontSize: isMobile ? "14px" : "16px",
+				backgroundColor: cyanColor,
+				color: darkBg,
+				border: "none",
+				borderRadius: "6px",
+				fontFamily: theme.fontFamily.KOREAN,
+				fontWeight: "bold",
+				cursor: "pointer",
+				transition: "all 0.2s ease"
+			},
+			onMouseEnter: (e) => {
+				e.currentTarget.style.transform = "scale(1.05)";
+				e.currentTarget.style.boxShadow = `0 0 20px ${cyanColor}`;
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.transform = "scale(1)";
+				e.currentTarget.style.boxShadow = "none";
+			},
+			onFocus: (e) => {
+				e.currentTarget.style.transform = "scale(1.05)";
+				e.currentTarget.style.boxShadow = `0 0 20px ${cyanColor}`;
+				e.currentTarget.style.outline = `2px solid ${cyanColor}`;
+			},
+			onBlur: (e) => {
+				e.currentTarget.style.transform = "scale(1)";
+				e.currentTarget.style.boxShadow = "none";
+				e.currentTarget.style.outline = "none";
+			},
+			children: "건너뛰기 | Skip"
+		})]
+	}), /* @__PURE__ */ jsx("style", { children: `
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 1;
+            }
+          }
+
+          @keyframes pulse {
+            0% {
+              opacity: 0;
+              transform: scale(0.9);
+            }
+            50% {
+              opacity: 1;
+              transform: scale(1.05);
+            }
+            100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+
+          @keyframes countdownPulse {
+            0% {
+              opacity: 0;
+              transform: scale(1.2);
+            }
+            50% {
+              opacity: 1;
+              transform: scale(1.1);
+            }
+            100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+
+          @keyframes flash {
+            0% {
+              opacity: 0;
+              transform: scale(1.5);
+            }
+            30% {
+              opacity: 1;
+              transform: scale(1.3);
+            }
+            100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+        ` })] });
+};
+//#endregion
+export { MatchCountdown as default };
+
+//# sourceMappingURL=MatchCountdown.js.map

package/lib/components/screens/combat/components/feedback/MatchCountdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatchCountdown.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/feedback/MatchCountdown.tsx"],"sourcesContent":["/**\n * MatchCountdown Component - Displays match start countdown sequence\n *\n * Korean: 매치 시작 카운트다운 (Match Start Countdown)\n *\n * Shows \"Ready?\" → \"3... 2... 1...\" → \"Fight!\" sequence with animations.\n * Implements Korean cyberpunk aesthetic with bilingual text support.\n * Plays audio cues for countdown and fight announcement.\n *\n * Refactored to use useKoreanTheme for consistent styling.\n *\n * @module components/combat/MatchCountdown\n * @category Combat UI\n */\n\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport {\n  MatchCountdownState,\n  useMatchCountdown,\n} from \"../../../../../hooks/useMatchCountdown\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexColorToCSS } from \"../../../../../utils/colorUtils\";\n\n/**\n * Props for the MatchCountdown component\n */\nexport interface MatchCountdownProps {\n  /** Callback when countdown completes */\n  readonly onComplete: () => void;\n  /** Whether layout should adapt for mobile screens */\n  readonly isMobile: boolean;\n  /** Optional callback for skip button */\n  readonly onSkip?: () => void;\n  /** Whether skip button should be shown */\n  readonly showSkip?: boolean;\n}\n\n/**\n * Get display text for current countdown state\n */\nfunction getDisplayText(\n  state: MatchCountdownState,\n  currentNumber: number\n): {\n  ko: string;\n  en: string;\n} | null {\n  switch (state) {\n    case \"ready\":\n      return { ko: \"준비?\", en: \"Ready?\" };\n    case \"counting\":\n      return { ko: String(currentNumber), en: String(currentNumber) };\n    case \"fight\":\n      return { ko: \"전투!\", en: \"Fight!\" };\n    default:\n      return null;\n  }\n}\n\n/**\n * MatchCountdown Component\n *\n * Displays match start countdown with:\n * - \"Ready?\" announcement (1 second)\n * - Countdown from 3 to 1 (1 second intervals)\n * - \"Fight!\" announcement (1 second)\n * - Pulse/scale animations for emphasis\n * - Bilingual Korean-English text\n * - Audio cues for countdown and fight\n * - Optional skip button\n * - Responsive sizing for mobile/tablet/desktop\n *\n * Korean: 매치 시작 카운트다운 컴포넌트\n */\n// Static config outside component to prevent re-creation on each render\nconst COUNTDOWN_CONFIG = {\n  readyDuration: 1,\n  countdownInterval: 1,\n  fightDuration: 1,\n  startNumber: 3,\n} as const;\n\nexport const MatchCountdown: React.FC<MatchCountdownProps> = ({\n  onComplete,\n  isMobile,\n  onSkip,\n  showSkip = false,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"xlarge\", isMobile });\n\n  // Use match countdown hook with stable config reference\n  const { state, currentNumber, startCountdown, skipCountdown, isActive } =\n    useMatchCountdown(COUNTDOWN_CONFIG, onComplete);\n\n  // Track if we've started to avoid double-start in Strict Mode\n  const hasStartedRef = useRef(false);\n\n  // Auto-start countdown on mount (only once)\n  useEffect(() => {\n    if (!hasStartedRef.current) {\n      hasStartedRef.current = true;\n      startCountdown();\n    }\n  }, [startCountdown]);\n\n  // Play audio cues based on state transitions\n  useEffect(() => {\n    if (!audio.isAudioReady) return;\n\n    if (state === \"counting\" && currentNumber > 0) {\n      // Play beep for each countdown number\n      audio.playSFX(\"attack_light\"); // Using placeholder - will be countdown_beep\n    } else if (state === \"fight\") {\n      // Play fight announcement\n      audio.playSFX(\"attack_heavy\"); // Using placeholder - will be fight_start\n    }\n  }, [state, currentNumber, audio]);\n\n  // Handle skip\n  const handleSkip = () => {\n    skipCountdown();\n    onSkip?.();\n  };\n\n  // Get display text\n  const displayText = getDisplayText(state, currentNumber);\n\n  // Calculate responsive font sizes - extracted to avoid nested ternaries\n  const getMainFontSize = (): string => {\n    if (isMobile) {\n      return state === \"fight\" ? \"72px\" : \"64px\";\n    }\n    return state === \"fight\" ? \"120px\" : \"96px\";\n  };\n\n  const getSubFontSize = (): string => {\n    if (isMobile) {\n      return state === \"fight\" ? \"48px\" : \"40px\";\n    }\n    return state === \"fight\" ? \"72px\" : \"56px\";\n  };\n\n  const mainFontSize = getMainFontSize();\n  const subFontSize = getSubFontSize();\n\n  // Memoize colors for performance using theme\n  const goldColor = useMemo(() => hexColorToCSS(theme.colors.ACCENT_GOLD), [theme.colors.ACCENT_GOLD]);\n  const cyanColor = useMemo(\n    () => hexColorToCSS(theme.colors.PRIMARY_CYAN),\n    [theme.colors.PRIMARY_CYAN]\n  );\n  const darkBg = useMemo(\n    () => hexColorToCSS(theme.colors.UI_BACKGROUND_DARK),\n    [theme.colors.UI_BACKGROUND_DARK]\n  );\n\n  // Don't render if countdown not active or complete\n  if (!isActive || !displayText) {\n    return null;\n  }\n\n  return (\n    <>\n      <div\n        data-testid=\"match-countdown\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Match countdown in progress\"\n        aria-live=\"assertive\"\n        style={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: state === \"fight\" ? `${darkBg}cc` : `${darkBg}ee`,\n          zIndex: 1000,\n          animation: state === \"ready\" ? \"fadeIn 0.3s ease-in\" : \"none\",\n        }}\n      >\n        <div\n          style={{\n            fontSize: mainFontSize,\n            fontWeight: \"bold\",\n            color: state === \"fight\" ? goldColor : cyanColor,\n            fontFamily: theme.fontFamily.KOREAN,\n            textShadow: `0 0 ${state === \"fight\" ? \"40px\" : \"30px\"} ${\n              state === \"fight\" ? goldColor : cyanColor\n            }`,\n            animation:\n              state === \"ready\"\n                ? \"pulse 0.8s ease-out\"\n                : state === \"counting\"\n                ? \"countdownPulse 0.8s ease-out\"\n                : state === \"fight\"\n                ? \"flash 0.3s ease-out\"\n                : \"none\",\n            textAlign: \"center\",\n            userSelect: \"none\",\n          }}\n          data-testid=\"countdown-text\"\n        >\n          {displayText.ko}\n          <br />\n          <span\n            style={{\n              fontSize: subFontSize,\n            }}\n          >\n            {displayText.en}\n          </span>\n        </div>\n\n        {/* Optional Skip Button */}\n        {showSkip && state !== \"fight\" && (\n          <button\n            onClick={handleSkip}\n            data-testid=\"skip-countdown-button\"\n            aria-label=\"Skip countdown\"\n            style={{\n              position: \"absolute\",\n              bottom: isMobile ? \"40px\" : \"60px\",\n              padding: isMobile ? \"10px 24px\" : \"12px 32px\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              backgroundColor: cyanColor,\n              color: darkBg,\n              border: \"none\",\n              borderRadius: \"6px\",\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              cursor: \"pointer\",\n              transition: \"all 0.2s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.transform = \"scale(1.05)\";\n              e.currentTarget.style.boxShadow = `0 0 20px ${cyanColor}`;\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.transform = \"scale(1)\";\n              e.currentTarget.style.boxShadow = \"none\";\n            }}\n            onFocus={(e) => {\n              e.currentTarget.style.transform = \"scale(1.05)\";\n              e.currentTarget.style.boxShadow = `0 0 20px ${cyanColor}`;\n              e.currentTarget.style.outline = `2px solid ${cyanColor}`;\n            }}\n            onBlur={(e) => {\n              e.currentTarget.style.transform = \"scale(1)\";\n              e.currentTarget.style.boxShadow = \"none\";\n              e.currentTarget.style.outline = \"none\";\n            }}\n          >\n            건너뛰기 | Skip\n          </button>\n        )}\n      </div>\n\n      {/* CSS Animations */}\n      <style>\n        {`\n          @keyframes fadeIn {\n            from {\n              opacity: 0;\n            }\n            to {\n              opacity: 1;\n            }\n          }\n\n          @keyframes pulse {\n            0% {\n              opacity: 0;\n              transform: scale(0.9);\n            }\n            50% {\n              opacity: 1;\n              transform: scale(1.05);\n            }\n            100% {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n\n          @keyframes countdownPulse {\n            0% {\n              opacity: 0;\n              transform: scale(1.2);\n            }\n            50% {\n              opacity: 1;\n              transform: scale(1.1);\n            }\n            100% {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n\n          @keyframes flash {\n            0% {\n              opacity: 0;\n              transform: scale(1.5);\n            }\n            30% {\n              opacity: 1;\n              transform: scale(1.3);\n            }\n            100% {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n        `}\n      </style>\n    </>\n  );\n};\n\nexport default MatchCountdown;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.d.ts

@@ -0,0 +1,74 @@
+/**
+ * RoundAnnouncement Component - Displays round completion and transition UI
+ *
+ * Korean: 라운드 발표 (Round Announcement)
+ *
+ * Shows round winner, current score, statistics, and countdown to next round.
+ * Implements Korean cyberpunk aesthetic with bilingual text support.
+ *
+ * Refactored to use useKoreanTheme for consistent styling.
+ *
+ * @module components/combat/RoundAnnouncement
+ * @category Combat UI
+ */
+import React from "react";
+import { PlayerState } from "../../../../../systems";
+/**
+ * Round statistics displayed between rounds
+ *
+ * Korean: 라운드 통계 (Round Statistics)
+ */
+export interface RoundStats {
+    /** Total damage dealt by player */
+    readonly damageDealt: number;
+    /** Number of hits successfully landed */
+    readonly hitsLanded: number;
+    /** Number of vital points struck */
+    readonly vitalPointsHit: number;
+    /** Combat accuracy percentage */
+    readonly accuracy: number;
+}
+/**
+ * Props for the RoundAnnouncement component
+ */
+export interface RoundAnnouncementProps {
+    /** Current round number (1-based) */
+    readonly roundNumber: number;
+    /** Round winner, or null if round was a draw */
+    readonly roundWinner: PlayerState | null;
+    /** Current match score (player1 wins, player2 wins) */
+    readonly currentScore: {
+        readonly player1: number;
+        readonly player2: number;
+    };
+    /** Round statistics to display */
+    readonly roundStats?: RoundStats;
+    /** Callback when countdown completes */
+    readonly onCountdownComplete: () => void;
+    /** Callback when skip button is pressed */
+    readonly onSkip: () => void;
+    /** Whether layout should adapt for mobile screens */
+    readonly isMobile: boolean;
+    /** Total number of rounds in match (for match point detection) */
+    readonly totalRounds?: number;
+    /** Countdown duration in seconds */
+    readonly countdownDuration?: number;
+}
+/**
+ * RoundAnnouncement Component
+ *
+ * Displays round completion announcement with:
+ * - Bilingual round completion title
+ * - Round winner display
+ * - Current match score
+ * - Round statistics (damage, hits, accuracy)
+ * - Countdown to next round
+ * - Skip button for quick play
+ * - Match point indicator for final rounds
+ * - Uses useKoreanTheme for consistent styling
+ *
+ * Korean: 라운드 종료 발표 컴포넌트
+ */
+export declare const RoundAnnouncement: React.FC<RoundAnnouncementProps>;
+export default RoundAnnouncement;
+//# sourceMappingURL=RoundAnnouncementOverlayHtml.d.ts.map

package/lib/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundAnnouncementOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,mCAAmC;IACnC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,iCAAiC;IACjC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,qCAAqC;IACrC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,gDAAgD;IAChD,QAAQ,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,uDAAuD;IACvD,QAAQ,CAAC,YAAY,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E,kCAAkC;IAClC,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IACjC,wCAAwC;IACxC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,IAAI,CAAC;IACzC,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,oCAAoC;IACpC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CACrC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA2R9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.js

@@ -0,0 +1,275 @@
+import { hexColorToCSS } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.tsx
+/**
+* RoundAnnouncement Component - Displays round completion and transition UI
+*
+* Korean: 라운드 발표 (Round Announcement)
+*
+* Shows round winner, current score, statistics, and countdown to next round.
+* Implements Korean cyberpunk aesthetic with bilingual text support.
+*
+* Refactored to use useKoreanTheme for consistent styling.
+*
+* @module components/combat/RoundAnnouncement
+* @category Combat UI
+*/
+/**
+* RoundAnnouncement Component
+*
+* Displays round completion announcement with:
+* - Bilingual round completion title
+* - Round winner display
+* - Current match score
+* - Round statistics (damage, hits, accuracy)
+* - Countdown to next round
+* - Skip button for quick play
+* - Match point indicator for final rounds
+* - Uses useKoreanTheme for consistent styling
+*
+* Korean: 라운드 종료 발표 컴포넌트
+*/
+var RoundAnnouncement = ({ roundNumber, roundWinner, currentScore, roundStats, onCountdownComplete, onSkip, isMobile, totalRounds = 3, countdownDuration = 3 }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "large",
+		isMobile
+	});
+	const [countdown, setCountdown] = useState(countdownDuration);
+	const [isVisible, setIsVisible] = useState(false);
+	const hasCompletedRef = useRef(false);
+	const onCountdownCompleteRef = useRef(onCountdownComplete);
+	useEffect(() => {
+		onCountdownCompleteRef.current = onCountdownComplete;
+	}, [onCountdownComplete]);
+	const handleCountdownComplete = useCallback(() => {
+		onCountdownCompleteRef.current();
+	}, []);
+	useEffect(() => {
+		const timer = setTimeout(() => setIsVisible(true), 50);
+		return () => clearTimeout(timer);
+	}, []);
+	useEffect(() => {
+		if (countdown <= 0) {
+			if (!hasCompletedRef.current) {
+				hasCompletedRef.current = true;
+				handleCountdownComplete();
+			}
+			return;
+		}
+		const timer = setInterval(() => {
+			setCountdown((prev) => {
+				if (prev <= 1) return 0;
+				return prev - 1;
+			});
+		}, 1e3);
+		return () => clearInterval(timer);
+	}, [countdown, handleCountdownComplete]);
+	const isMatchPoint = useMemo(() => {
+		return Math.max(currentScore.player1, currentScore.player2) === Math.ceil(totalRounds / 2) - 1;
+	}, [currentScore, totalRounds]);
+	const goldColor = useMemo(() => hexColorToCSS(theme.colors.ACCENT_GOLD), [theme.colors.ACCENT_GOLD]);
+	const cyanColor = useMemo(() => hexColorToCSS(theme.colors.PRIMARY_CYAN), [theme.colors.PRIMARY_CYAN]);
+	const darkBg = useMemo(() => hexColorToCSS(theme.colors.UI_BACKGROUND_DARK), [theme.colors.UI_BACKGROUND_DARK]);
+	const textSecondary = useMemo(() => hexColorToCSS(theme.colors.TEXT_SECONDARY), [theme.colors.TEXT_SECONDARY]);
+	const containerStyle = useMemo(() => ({
+		position: "fixed",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: `${darkBg}dd`,
+		zIndex: 1e3,
+		opacity: isVisible ? 1 : 0,
+		transition: "opacity 0.3s ease-in-out"
+	}), [darkBg, isVisible]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "round-announcement",
+		style: containerStyle,
+		children: [
+			isMatchPoint && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: isMobile ? "20px" : "28px",
+					color: goldColor,
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					marginBottom: isMobile ? "10px" : "20px",
+					textShadow: `0 0 20px ${goldColor}`,
+					animation: "pulse 1s infinite"
+				},
+				"data-testid": "match-point-indicator",
+				children: "매치 포인트! | Match Point!"
+			}),
+			/* @__PURE__ */ jsxs("h1", {
+				style: {
+					fontSize: isMobile ? "36px" : "56px",
+					color: goldColor,
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					margin: `0 0 ${isMobile ? "20px" : "30px"} 0`,
+					textShadow: `0 0 30px ${goldColor}`,
+					textAlign: "center"
+				},
+				"data-testid": "round-complete-title",
+				children: [
+					"라운드 ",
+					roundNumber,
+					" 완료!",
+					/* @__PURE__ */ jsx("br", {}),
+					"Round ",
+					roundNumber,
+					" Complete!"
+				]
+			}),
+			roundWinner && /* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: isMobile ? "24px" : "36px",
+					color: cyanColor,
+					fontFamily: theme.fontFamily.KOREAN,
+					margin: `0 0 ${isMobile ? "20px" : "30px"} 0`,
+					textAlign: "center"
+				},
+				"data-testid": "round-winner",
+				children: [
+					"승자 | Winner: ",
+					roundWinner.name.korean,
+					" | ",
+					roundWinner.name.english
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: isMobile ? "40px" : "80px",
+					marginBottom: isMobile ? "20px" : "30px",
+					fontSize: isMobile ? "32px" : "48px",
+					fontWeight: "bold"
+				},
+				"data-testid": "current-score",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: { textAlign: "center" },
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: isMobile ? "14px" : "18px",
+								color: cyanColor,
+								marginBottom: "8px"
+							},
+							children: "Player 1"
+						}), /* @__PURE__ */ jsx("div", {
+							style: { color: goldColor },
+							children: currentScore.player1
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						style: { color: cyanColor },
+						children: "-"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: { textAlign: "center" },
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: isMobile ? "14px" : "18px",
+								color: cyanColor,
+								marginBottom: "8px"
+							},
+							children: "Player 2"
+						}), /* @__PURE__ */ jsx("div", {
+							style: { color: goldColor },
+							children: currentScore.player2
+						})]
+					})
+				]
+			}),
+			roundStats && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: isMobile ? "column" : "row",
+					gap: isMobile ? "12px" : "24px",
+					marginBottom: isMobile ? "20px" : "30px",
+					fontSize: isMobile ? "14px" : "16px",
+					color: textSecondary,
+					fontFamily: theme.fontFamily.KOREAN
+				},
+				"data-testid": "round-stats",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: ["피해량 | Damage: ", roundStats.damageDealt.toFixed(0)] }),
+					/* @__PURE__ */ jsxs("div", { children: ["명중 | Hits: ", roundStats.hitsLanded] }),
+					/* @__PURE__ */ jsxs("div", { children: ["급소타격 | Vital Points: ", roundStats.vitalPointsHit] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						"정확도 | Accuracy: ",
+						roundStats.accuracy.toFixed(1),
+						"%"
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: isMobile ? "48px" : "72px",
+					color: goldColor,
+					fontWeight: "bold",
+					marginBottom: isMobile ? "20px" : "30px",
+					textShadow: `0 0 40px ${goldColor}`
+				},
+				"data-testid": "countdown-display",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"aria-label": `Countdown: ${countdown} seconds remaining`,
+				children: countdown
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: onSkip,
+				"data-testid": "skip-countdown-button",
+				className: "skip-countdown-button",
+				style: {
+					padding: isMobile ? "10px 24px" : "12px 32px",
+					fontSize: isMobile ? "14px" : "16px",
+					backgroundColor: cyanColor,
+					color: darkBg,
+					border: "none",
+					borderRadius: "6px",
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					cursor: "pointer"
+				},
+				children: "건너뛰기 | Skip"
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 0.7;
+              transform: scale(1.05);
+            }
+          }
+          
+          .skip-countdown-button {
+            transition: all 0.2s ease;
+          }
+          
+          .skip-countdown-button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px ${cyanColor};
+          }
+          
+          .skip-countdown-button:focus {
+            outline: 2px solid ${cyanColor};
+            outline-offset: 2px;
+          }
+        ` })
+		]
+	});
+};
+//#endregion
+export { RoundAnnouncement as default };
+
+//# sourceMappingURL=RoundAnnouncementOverlayHtml.js.map

package/lib/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundAnnouncementOverlayHtml.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/feedback/RoundAnnouncementOverlayHtml.tsx"],"sourcesContent":["/**\n * RoundAnnouncement Component - Displays round completion and transition UI\n *\n * Korean: 라운드 발표 (Round Announcement)\n *\n * Shows round winner, current score, statistics, and countdown to next round.\n * Implements Korean cyberpunk aesthetic with bilingual text support.\n *\n * Refactored to use useKoreanTheme for consistent styling.\n *\n * @module components/combat/RoundAnnouncement\n * @category Combat UI\n */\n\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { PlayerState } from \"../../../../../systems\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexColorToCSS } from \"../../../../../utils/colorUtils\";\n\n/**\n * Round statistics displayed between rounds\n *\n * Korean: 라운드 통계 (Round Statistics)\n */\nexport interface RoundStats {\n  /** Total damage dealt by player */\n  readonly damageDealt: number;\n  /** Number of hits successfully landed */\n  readonly hitsLanded: number;\n  /** Number of vital points struck */\n  readonly vitalPointsHit: number;\n  /** Combat accuracy percentage */\n  readonly accuracy: number;\n}\n\n/**\n * Props for the RoundAnnouncement component\n */\nexport interface RoundAnnouncementProps {\n  /** Current round number (1-based) */\n  readonly roundNumber: number;\n  /** Round winner, or null if round was a draw */\n  readonly roundWinner: PlayerState | null;\n  /** Current match score (player1 wins, player2 wins) */\n  readonly currentScore: { readonly player1: number; readonly player2: number };\n  /** Round statistics to display */\n  readonly roundStats?: RoundStats;\n  /** Callback when countdown completes */\n  readonly onCountdownComplete: () => void;\n  /** Callback when skip button is pressed */\n  readonly onSkip: () => void;\n  /** Whether layout should adapt for mobile screens */\n  readonly isMobile: boolean;\n  /** Total number of rounds in match (for match point detection) */\n  readonly totalRounds?: number;\n  /** Countdown duration in seconds */\n  readonly countdownDuration?: number;\n}\n\n/**\n * RoundAnnouncement Component\n *\n * Displays round completion announcement with:\n * - Bilingual round completion title\n * - Round winner display\n * - Current match score\n * - Round statistics (damage, hits, accuracy)\n * - Countdown to next round\n * - Skip button for quick play\n * - Match point indicator for final rounds\n * - Uses useKoreanTheme for consistent styling\n *\n * Korean: 라운드 종료 발표 컴포넌트\n */\nexport const RoundAnnouncement: React.FC<RoundAnnouncementProps> = ({\n  roundNumber,\n  roundWinner,\n  currentScore,\n  roundStats,\n  onCountdownComplete,\n  onSkip,\n  isMobile,\n  totalRounds = 3,\n  countdownDuration = 3,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"large\", isMobile });\n  const [countdown, setCountdown] = useState(countdownDuration);\n  const [isVisible, setIsVisible] = useState(false);\n  const hasCompletedRef = useRef(false);\n\n  // Use ref to stabilize callback - prevents timer reset on re-renders\n  const onCountdownCompleteRef = useRef(onCountdownComplete);\n  useEffect(() => {\n    onCountdownCompleteRef.current = onCountdownComplete;\n  }, [onCountdownComplete]);\n\n  // Stable callback that reads from ref\n  const handleCountdownComplete = useCallback(() => {\n    onCountdownCompleteRef.current();\n  }, []);\n\n  // Fade in animation on mount\n  useEffect(() => {\n    // Trigger fade in after a small delay\n    const timer = setTimeout(() => setIsVisible(true), 50);\n    return () => clearTimeout(timer);\n  }, []);\n\n  // Countdown logic with proper cleanup - uses stable callback\n  useEffect(() => {\n    if (countdown <= 0) {\n      if (!hasCompletedRef.current) {\n        hasCompletedRef.current = true;\n        handleCountdownComplete();\n      }\n      return;\n    }\n\n    const timer = setInterval(() => {\n      setCountdown((prev) => {\n        if (prev <= 1) {\n          // Countdown complete, callback will be handled by effect\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, [countdown, handleCountdownComplete]);\n\n  // Determine if this is match point\n  const isMatchPoint = useMemo(() => {\n    const maxScore = Math.max(currentScore.player1, currentScore.player2);\n    const roundsToWin = Math.ceil(totalRounds / 2);\n    return maxScore === roundsToWin - 1;\n  }, [currentScore, totalRounds]);\n\n  // Convert hex colors to CSS - memoized for performance using theme\n  const goldColor = useMemo(\n    () => hexColorToCSS(theme.colors.ACCENT_GOLD),\n    [theme.colors.ACCENT_GOLD]\n  );\n  const cyanColor = useMemo(\n    () => hexColorToCSS(theme.colors.PRIMARY_CYAN),\n    [theme.colors.PRIMARY_CYAN]\n  );\n  const darkBg = useMemo(\n    () => hexColorToCSS(theme.colors.UI_BACKGROUND_DARK),\n    [theme.colors.UI_BACKGROUND_DARK]\n  );\n  const textSecondary = useMemo(\n    () => hexColorToCSS(theme.colors.TEXT_SECONDARY),\n    [theme.colors.TEXT_SECONDARY]\n  );\n\n  // Memoize container style for performance\n  const containerStyle = useMemo(\n    () => ({\n      position: \"fixed\" as const,\n      top: 0,\n      left: 0,\n      width: \"100%\",\n      height: \"100%\",\n      display: \"flex\",\n      flexDirection: \"column\" as const,\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      backgroundColor: `${darkBg}dd`,\n      zIndex: 1000,\n      opacity: isVisible ? 1 : 0,\n      transition: \"opacity 0.3s ease-in-out\",\n    }),\n    [darkBg, isVisible]\n  );\n\n  return (\n    <div data-testid=\"round-announcement\" style={containerStyle}>\n      {/* Match Point Indicator */}\n      {isMatchPoint && (\n        <div\n          style={{\n            fontSize: isMobile ? \"20px\" : \"28px\",\n            color: goldColor,\n            fontFamily: theme.fontFamily.KOREAN,\n            fontWeight: \"bold\",\n            marginBottom: isMobile ? \"10px\" : \"20px\",\n            textShadow: `0 0 20px ${goldColor}`,\n            animation: \"pulse 1s infinite\",\n          }}\n          data-testid=\"match-point-indicator\"\n        >\n          매치 포인트! | Match Point!\n        </div>\n      )}\n\n      {/* Round Complete Title */}\n      <h1\n        style={{\n          fontSize: isMobile ? \"36px\" : \"56px\",\n          color: goldColor,\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: `0 0 ${isMobile ? \"20px\" : \"30px\"} 0`,\n          textShadow: `0 0 30px ${goldColor}`,\n          textAlign: \"center\",\n        }}\n        data-testid=\"round-complete-title\"\n      >\n        라운드 {roundNumber} 완료!\n        <br />\n        Round {roundNumber} Complete!\n      </h1>\n\n      {/* Round Winner */}\n      {roundWinner && (\n        <div\n          style={{\n            fontSize: isMobile ? \"24px\" : \"36px\",\n            color: cyanColor,\n            fontFamily: theme.fontFamily.KOREAN,\n            margin: `0 0 ${isMobile ? \"20px\" : \"30px\"} 0`,\n            textAlign: \"center\",\n          }}\n          data-testid=\"round-winner\"\n        >\n          승자 | Winner: {roundWinner.name.korean} | {roundWinner.name.english}\n        </div>\n      )}\n\n      {/* Current Score */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: isMobile ? \"40px\" : \"80px\",\n          marginBottom: isMobile ? \"20px\" : \"30px\",\n          fontSize: isMobile ? \"32px\" : \"48px\",\n          fontWeight: \"bold\",\n        }}\n        data-testid=\"current-score\"\n      >\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: isMobile ? \"14px\" : \"18px\",\n              color: cyanColor,\n              marginBottom: \"8px\",\n            }}\n          >\n            Player 1\n          </div>\n          <div style={{ color: goldColor }}>{currentScore.player1}</div>\n        </div>\n        <div style={{ color: cyanColor }}>-</div>\n        <div style={{ textAlign: \"center\" }}>\n          <div\n            style={{\n              fontSize: isMobile ? \"14px\" : \"18px\",\n              color: cyanColor,\n              marginBottom: \"8px\",\n            }}\n          >\n            Player 2\n          </div>\n          <div style={{ color: goldColor }}>{currentScore.player2}</div>\n        </div>\n      </div>\n\n      {/* Round Statistics */}\n      {roundStats && (\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: isMobile ? \"column\" : \"row\",\n            gap: isMobile ? \"12px\" : \"24px\",\n            marginBottom: isMobile ? \"20px\" : \"30px\",\n            fontSize: isMobile ? \"14px\" : \"16px\",\n            color: textSecondary,\n            fontFamily: theme.fontFamily.KOREAN,\n          }}\n          data-testid=\"round-stats\"\n        >\n          <div>피해량 | Damage: {roundStats.damageDealt.toFixed(0)}</div>\n          <div>명중 | Hits: {roundStats.hitsLanded}</div>\n          <div>급소타격 | Vital Points: {roundStats.vitalPointsHit}</div>\n          <div>정확도 | Accuracy: {roundStats.accuracy.toFixed(1)}%</div>\n        </div>\n      )}\n\n      {/* Countdown */}\n      <div\n        style={{\n          fontSize: isMobile ? \"48px\" : \"72px\",\n          color: goldColor,\n          fontWeight: \"bold\",\n          marginBottom: isMobile ? \"20px\" : \"30px\",\n          textShadow: `0 0 40px ${goldColor}`,\n        }}\n        data-testid=\"countdown-display\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-label={`Countdown: ${countdown} seconds remaining`}\n      >\n        {countdown}\n      </div>\n\n      {/* Skip Button */}\n      <button\n        onClick={onSkip}\n        data-testid=\"skip-countdown-button\"\n        className=\"skip-countdown-button\"\n        style={{\n          padding: isMobile ? \"10px 24px\" : \"12px 32px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: cyanColor,\n          color: darkBg,\n          border: \"none\",\n          borderRadius: \"6px\",\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          cursor: \"pointer\",\n        }}\n      >\n        건너뛰기 | Skip\n      </button>\n\n      {/* CSS Animation for pulse effect and button hover */}\n      <style>\n        {`\n          @keyframes pulse {\n            0%, 100% {\n              opacity: 1;\n              transform: scale(1);\n            }\n            50% {\n              opacity: 0.7;\n              transform: scale(1.05);\n            }\n          }\n          \n          .skip-countdown-button {\n            transition: all 0.2s ease;\n          }\n          \n          .skip-countdown-button:hover {\n            transform: scale(1.05);\n            box-shadow: 0 0 20px ${cyanColor};\n          }\n          \n          .skip-countdown-button:focus {\n            outline: 2px solid ${cyanColor};\n            outline-offset: 2px;\n          }\n        `}\n      </style>\n    </div>\n  );\n};\n\nexport default RoundAnnouncement;\n"],"mappings":"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"}