blacktrigram 0.7.2

package/lib/components/screens/combat/components/controls/QuickSettings.js

@@ -0,0 +1,259 @@
+import { useAudio } from "../../../../../audio/AudioProvider.js";
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/controls/QuickSettings.tsx
+/**
+* QuickSettings - In-game settings overlay for audio controls
+* 
+* Refactored to use useKoreanTheme for consistent theming:
+* - useKoreanTheme hook for centralized color and font management
+* - Improved accessibility with ARIA labels and dialog semantics
+* - Enhanced form controls with proper ARIA attributes
+* 
+* Note: Uses standard HTML button elements rather than BaseButton
+* since this is a 2D HTML overlay component, not a Three.js component.
+* 
+* @example
+* ```tsx
+* <QuickSettings
+*   onClose={() => setShowSettings(false)}
+*   isMobile={false}
+* />
+* ```
+*/
+var QuickSettings = ({ onClose, isMobile }) => {
+	const audio = useAudio();
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "quick-settings",
+		role: "dialog",
+		"aria-labelledby": "settings-title",
+		"aria-modal": "true",
+		style: {
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			padding: isMobile ? "24px" : "32px",
+			backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .95),
+			border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .8)}`,
+			borderRadius: "12px",
+			minWidth: isMobile ? "280px" : "360px",
+			boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}`,
+			zIndex: 1e3
+		},
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				id: "settings-title",
+				"data-testid": "settings-title",
+				style: {
+					fontSize: isMobile ? "20px" : "24px",
+					color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					margin: "0 0 24px 0",
+					textAlign: "center",
+					textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .4)}`
+				},
+				children: "설정 | Settings"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: isMobile ? "16px" : "20px"
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						"data-testid": "sfx-volume-control",
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: "sfx-volume-slider",
+								style: {
+									display: "block",
+									fontSize: isMobile ? "14px" : "16px",
+									color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+									fontFamily: theme.fontFamily.KOREAN,
+									fontWeight: "bold",
+									marginBottom: "8px"
+								},
+								children: "효과음 | SFX Volume"
+							}),
+							/* @__PURE__ */ jsx("input", {
+								id: "sfx-volume-slider",
+								type: "range",
+								min: "0",
+								max: "100",
+								value: audio.sfxVolume * 100,
+								onChange: (e) => {
+									const value = parseInt(e.target.value) / 100;
+									audio.setVolume("sfx", value);
+								},
+								"aria-label": "Sound effects volume",
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-valuenow": Math.round(audio.sfxVolume * 100),
+								"data-testid": "sfx-volume-slider",
+								style: {
+									width: "100%",
+									height: "6px",
+									borderRadius: "3px",
+									outline: "none",
+									cursor: "pointer"
+								}
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								"data-testid": "sfx-volume-value",
+								"aria-live": "polite",
+								style: {
+									fontSize: isMobile ? "12px" : "14px",
+									color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),
+									fontFamily: theme.fontFamily.KOREAN,
+									marginTop: "4px",
+									textAlign: "right"
+								},
+								children: [Math.round(audio.sfxVolume * 100), "%"]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-testid": "music-volume-control",
+						children: [
+							/* @__PURE__ */ jsx("label", {
+								htmlFor: "music-volume-slider",
+								style: {
+									display: "block",
+									fontSize: isMobile ? "14px" : "16px",
+									color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+									fontFamily: theme.fontFamily.KOREAN,
+									fontWeight: "bold",
+									marginBottom: "8px"
+								},
+								children: "음악 | Music Volume"
+							}),
+							/* @__PURE__ */ jsx("input", {
+								id: "music-volume-slider",
+								type: "range",
+								min: "0",
+								max: "100",
+								value: audio.musicVolume * 100,
+								onChange: (e) => {
+									const value = parseInt(e.target.value) / 100;
+									audio.setVolume("music", value);
+								},
+								"aria-label": "Music volume",
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-valuenow": Math.round(audio.musicVolume * 100),
+								"data-testid": "music-volume-slider",
+								style: {
+									width: "100%",
+									height: "6px",
+									borderRadius: "3px",
+									outline: "none",
+									cursor: "pointer"
+								}
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								"data-testid": "music-volume-value",
+								"aria-live": "polite",
+								style: {
+									fontSize: isMobile ? "12px" : "14px",
+									color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),
+									fontFamily: theme.fontFamily.KOREAN,
+									marginTop: "4px",
+									textAlign: "right"
+								},
+								children: [Math.round(audio.musicVolume * 100), "%"]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						"data-testid": "mute-toggle-control",
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between"
+						},
+						children: [/* @__PURE__ */ jsx("label", {
+							htmlFor: "mute-toggle-button",
+							style: {
+								fontSize: isMobile ? "14px" : "16px",
+								color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+								fontFamily: theme.fontFamily.KOREAN,
+								fontWeight: "bold"
+							},
+							children: "음소거 | Mute All"
+						}), /* @__PURE__ */ jsx("button", {
+							id: "mute-toggle-button",
+							onClick: () => {
+								if (audio.muted) audio.unmute();
+								else audio.mute();
+								audio.playSFX("menu_click");
+							},
+							onMouseEnter: () => audio.playSFX("menu_hover"),
+							"aria-label": audio.muted ? "Unmute audio" : "Mute audio",
+							"aria-pressed": audio.muted,
+							"data-testid": "mute-toggle-button",
+							style: {
+								padding: isMobile ? "8px 16px" : "10px 20px",
+								fontSize: isMobile ? "14px" : "16px",
+								backgroundColor: audio.muted ? hexToRgbaString(theme.colors.ACCENT_GOLD, 1) : hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1),
+								color: audio.muted ? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1) : hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+								border: audio.muted ? "none" : `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .6)}`,
+								borderRadius: "6px",
+								fontFamily: theme.fontFamily.KOREAN,
+								fontWeight: "bold",
+								cursor: "pointer",
+								transition: "all 0.2s ease"
+							},
+							children: audio.muted ? "🔇" : "🔊"
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: () => {
+					audio.playSFX("menu_back");
+					onClose();
+				},
+				onMouseEnter: () => audio.playSFX("menu_hover"),
+				"aria-label": "Close settings dialog",
+				"data-testid": "settings-close-button",
+				style: {
+					marginTop: isMobile ? "24px" : "32px",
+					width: "100%",
+					padding: isMobile ? "10px" : "12px",
+					fontSize: isMobile ? "14px" : "16px",
+					backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+					color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),
+					border: "none",
+					borderRadius: "6px",
+					fontFamily: theme.fontFamily.KOREAN,
+					fontWeight: "bold",
+					cursor: "pointer",
+					transition: "all 0.2s ease"
+				},
+				onMouseOver: (e) => {
+					e.currentTarget.style.backgroundColor = hexToRgbaString(theme.colors.ACCENT_GOLD, 1);
+					e.currentTarget.style.transform = "scale(1.05)";
+				},
+				onMouseOut: (e) => {
+					e.currentTarget.style.backgroundColor = hexToRgbaString(theme.colors.PRIMARY_CYAN, 1);
+					e.currentTarget.style.transform = "scale(1)";
+				},
+				children: "닫기 | Close"
+			})
+		]
+	});
+};
+//#endregion
+export { QuickSettings as default };
+
+//# sourceMappingURL=QuickSettings.js.map

package/lib/components/screens/combat/components/controls/QuickSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuickSettings.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/QuickSettings.tsx"],"sourcesContent":["/**\n * QuickSettings Component - In-game settings panel\n * \n * Features:\n * - Volume controls (SFX, Music)\n * - Audio toggle\n * - Korean/English bilingual labels\n * - Cyberpunk Korean theming\n * - Uses useKoreanTheme for consistent styling\n * - Enhanced accessibility with ARIA labels\n * \n * @module components/combat/controls\n * @category Combat UI\n * @korean 빠른설정\n */\n\nimport React from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\n\nexport interface QuickSettingsProps {\n  readonly onClose: () => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * QuickSettings - In-game settings overlay for audio controls\n * \n * Refactored to use useKoreanTheme for consistent theming:\n * - useKoreanTheme hook for centralized color and font management\n * - Improved accessibility with ARIA labels and dialog semantics\n * - Enhanced form controls with proper ARIA attributes\n * \n * Note: Uses standard HTML button elements rather than BaseButton\n * since this is a 2D HTML overlay component, not a Three.js component.\n * \n * @example\n * ```tsx\n * <QuickSettings\n *   onClose={() => setShowSettings(false)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const QuickSettings: React.FC<QuickSettingsProps> = ({\n  onClose,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n\n  return (\n    <div\n      data-testid=\"quick-settings\"\n      role=\"dialog\"\n      aria-labelledby=\"settings-title\"\n      aria-modal=\"true\"\n      style={{\n        position: \"absolute\",\n        top: \"50%\",\n        left: \"50%\",\n        transform: \"translate(-50%, -50%)\",\n        padding: isMobile ? \"24px\" : \"32px\",\n        backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.95),\n        border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n        borderRadius: \"12px\",\n        minWidth: isMobile ? \"280px\" : \"360px\",\n        boxShadow: `0 0 30px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n        zIndex: 1000,\n      }}\n    >\n      {/* Title */}\n      <h2\n        id=\"settings-title\"\n        data-testid=\"settings-title\"\n        style={{\n          fontSize: isMobile ? \"20px\" : \"24px\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          fontFamily: theme.fontFamily.KOREAN,\n          fontWeight: \"bold\",\n          margin: \"0 0 24px 0\",\n          textAlign: \"center\",\n          textShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.4)}`,\n        }}\n      >\n        설정 | Settings\n      </h2>\n\n      {/* Volume Controls */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isMobile ? \"16px\" : \"20px\",\n        }}\n      >\n        {/* SFX Volume */}\n        <div data-testid=\"sfx-volume-control\">\n          <label\n            htmlFor=\"sfx-volume-slider\"\n            style={{\n              display: \"block\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              marginBottom: \"8px\",\n            }}\n          >\n            효과음 | SFX Volume\n          </label>\n          <input\n            id=\"sfx-volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={audio.sfxVolume * 100}\n            onChange={(e) => {\n              const value = parseInt(e.target.value) / 100;\n              audio.setVolume(\"sfx\", value);\n            }}\n            aria-label=\"Sound effects volume\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(audio.sfxVolume * 100)}\n            data-testid=\"sfx-volume-slider\"\n            style={{\n              width: \"100%\",\n              height: \"6px\",\n              borderRadius: \"3px\",\n              outline: \"none\",\n              cursor: \"pointer\",\n            }}\n          />\n          <div\n            data-testid=\"sfx-volume-value\"\n            aria-live=\"polite\"\n            style={{\n              fontSize: isMobile ? \"12px\" : \"14px\",\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              marginTop: \"4px\",\n              textAlign: \"right\",\n            }}\n          >\n            {Math.round(audio.sfxVolume * 100)}%\n          </div>\n        </div>\n\n        {/* Music Volume */}\n        <div data-testid=\"music-volume-control\">\n          <label\n            htmlFor=\"music-volume-slider\"\n            style={{\n              display: \"block\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              marginBottom: \"8px\",\n            }}\n          >\n            음악 | Music Volume\n          </label>\n          <input\n            id=\"music-volume-slider\"\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={audio.musicVolume * 100}\n            onChange={(e) => {\n              const value = parseInt(e.target.value) / 100;\n              audio.setVolume(\"music\", value);\n            }}\n            aria-label=\"Music volume\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(audio.musicVolume * 100)}\n            data-testid=\"music-volume-slider\"\n            style={{\n              width: \"100%\",\n              height: \"6px\",\n              borderRadius: \"3px\",\n              outline: \"none\",\n              cursor: \"pointer\",\n            }}\n          />\n          <div\n            data-testid=\"music-volume-value\"\n            aria-live=\"polite\"\n            style={{\n              fontSize: isMobile ? \"12px\" : \"14px\",\n              color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              marginTop: \"4px\",\n              textAlign: \"right\",\n            }}\n          >\n            {Math.round(audio.musicVolume * 100)}%\n          </div>\n        </div>\n\n        {/* Mute Toggle */}\n        <div\n          data-testid=\"mute-toggle-control\"\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n          }}\n        >\n          <label\n            htmlFor=\"mute-toggle-button\"\n            style={{\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n            }}\n          >\n            음소거 | Mute All\n          </label>\n          <button\n            id=\"mute-toggle-button\"\n            onClick={() => {\n              if (audio.muted) {\n                audio.unmute();\n              } else {\n                audio.mute();\n              }\n              audio.playSFX(\"menu_click\");\n            }}\n            onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n            aria-label={audio.muted ? \"Unmute audio\" : \"Mute audio\"}\n            aria-pressed={audio.muted}\n            data-testid=\"mute-toggle-button\"\n            style={{\n              padding: isMobile ? \"8px 16px\" : \"10px 20px\",\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              backgroundColor: audio.muted\n                ? hexToRgbaString(theme.colors.ACCENT_GOLD, 1)\n                : hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 1),\n              color: audio.muted\n                ? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1)\n                : hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n              border: audio.muted\n                ? \"none\"\n                : `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n              borderRadius: \"6px\",\n              fontFamily: theme.fontFamily.KOREAN,\n              fontWeight: \"bold\",\n              cursor: \"pointer\",\n              transition: \"all 0.2s ease\",\n            }}\n          >\n            {audio.muted ? \"🔇\" : \"🔊\"}\n          </button>\n        </div>\n      </div>\n\n      {/* Close Button */}\n      <button\n        onClick={() => {\n          audio.playSFX(\"menu_back\");\n          onClose();\n        }}\n        onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n        aria-label=\"Close settings dialog\"\n        data-testid=\"settings-close-button\"\n        style={{\n          marginTop: isMobile ? \"24px\" : \"32px\",\n          width: \"100%\",\n          padding: isMobile ? \"10px\" : \"12px\",\n          fontSize: isMobile ? \"14px\" : \"16px\",\n          backgroundColor: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n          color: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1),\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        onMouseOver={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.ACCENT_GOLD,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1.05)\";\n        }}\n        onMouseOut={(e) => {\n          e.currentTarget.style.backgroundColor = hexToRgbaString(\n            theme.colors.PRIMARY_CYAN,\n            1\n          );\n          e.currentTarget.style.transform = \"scale(1)\";\n        }}\n      >\n        닫기 | Close\n      </button>\n    </div>\n  );\n};\n\nexport default QuickSettings;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/effects/ArterialSpray3D.d.ts

@@ -0,0 +1,73 @@
+/**
+ * ArterialSpray3D - High-pressure arterial blood jet particle system
+ *
+ * Simulates arterial blood spray from vital point strikes on major arteries
+ * (carotid, femoral, brachial, subclavian). Features pulsating high-velocity
+ * jets synchronized with heart rate for brutal realism.
+ *
+ * Features:
+ * - High-pressure jet physics (10-15 m/s vs regular 2-5 m/s)
+ * - Narrow spray cone (15° vs 45° regular)
+ * - Pulsating intensity (1.2 Hz heart rate simulation)
+ * - 3-5 second sustained spray duration
+ * - Mobile-optimized particle counts
+ *
+ * @module components/combat/ArterialSpray3D
+ * @category Combat Effects
+ * @korean 동맥분사3D
+ */
+import React from "react";
+/**
+ * Arterial vital point types for targeted strikes
+ * 동맥 급소 유형
+ */
+export type ArterialVitalPoint = "carotid" | "femoral" | "brachial" | "subclavian";
+/**
+ * Arterial spray effect configuration
+ */
+export interface ArterialSprayEffect {
+    /** Unique identifier */
+    readonly id: string;
+    /** Origin position in 3D world space */
+    readonly position: [number, number, number];
+    /** Spray direction (normalized) */
+    readonly direction: [number, number, number];
+    /** Type of artery struck */
+    readonly vitalPoint: ArterialVitalPoint;
+    /** Blood pressure intensity (0.5-1.0) - affects velocity */
+    readonly pressure: number;
+    /** Whether to enable pulsating spray */
+    readonly pulsating: boolean;
+    /** Timestamp when effect was created */
+    readonly startTime: number;
+}
+/**
+ * Props for ArterialSpray3D component
+ */
+export interface ArterialSpray3DProps {
+    /** Active arterial spray effects to render */
+    readonly effects: readonly ArterialSprayEffect[];
+    /** Whether to enable arterial blood effects */
+    readonly enabled?: boolean;
+    /** Mobile device mode (reduced particle count) */
+    readonly isMobile?: boolean;
+    /** Callback when effect completes */
+    readonly onEffectComplete?: (effectId: string) => void;
+}
+/**
+ * ArterialSpray3D Component
+ *
+ * Renders high-pressure arterial blood jets from vital point strikes
+ *
+ * @example
+ * ```tsx
+ * <ArterialSpray3D
+ *   effects={arterialEffects}
+ *   enabled={settings.blood}
+ *   isMobile={isMobile}
+ *   onEffectComplete={handleEffectComplete}
+ * />
+ * ```
+ */
+export declare const ArterialSpray3D: React.FC<ArterialSpray3DProps>;
+//# sourceMappingURL=ArterialSpray3D.d.ts.map

package/lib/components/screens/combat/components/effects/ArterialSpray3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArterialSpray3D.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/effects/ArterialSpray3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAK/C;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,SAAS,GACT,UAAU,GACV,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,mCAAmC;IACnC,QAAQ,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,4BAA4B;IAC5B,QAAQ,CAAC,UAAU,EAAE,kBAAkB,CAAC;IACxC,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,8CAA8C;IAC9C,QAAQ,CAAC,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACjD,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AA2DD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgO1D,CAAC"}

package/lib/components/screens/combat/components/effects/BloodDecals3D.d.ts

@@ -0,0 +1,108 @@
+/**
+ * BloodDecals3D - Blood accumulation decal system for character models
+ *
+ * Projects blood decals onto 3D character surfaces using decal geometry for
+ * persistent blood visualization. Decals fade over time and track injury
+ * persistence across combat rounds.
+ *
+ * Features:
+ * - Decal projection onto character meshes
+ * - Blood accumulation from hits and lacerations
+ * - Blood trail visualization
+ * - Cross-round injury persistence
+ * - Korean-themed blood visualization
+ *
+ * @module components/combat/BloodDecals3D
+ * @category Combat Effects
+ * @korean 피흔적3D
+ */
+import React from "react";
+import * as THREE from "three";
+/**
+ * Blood decal configuration
+ */
+export interface BloodDecal {
+    /** Unique identifier */
+    readonly id: string;
+    /** Position in world space */
+    readonly position: [number, number, number];
+    /** Normal vector for surface projection */
+    readonly normal: [number, number, number];
+    /** Size of decal */
+    readonly size: [number, number, number];
+    /** Rotation around normal (radians) */
+    readonly rotation: number;
+    /** Opacity (0.0 to 1.0) */
+    readonly opacity: number;
+    /** Creation timestamp */
+    readonly timestamp: number;
+    /** Whether decal is from a laceration (adds blood trail) */
+    readonly isLaceration?: boolean;
+}
+/**
+ * Props for BloodDecals3D component
+ */
+export interface BloodDecals3DProps {
+    /** Active blood decals to render */
+    readonly decals: readonly BloodDecal[];
+    /** Character mesh reference for decal projection */
+    readonly targetMeshRef?: React.RefObject<THREE.Mesh>;
+    /** Whether decals are enabled (violence settings) */
+    readonly enabled?: boolean;
+    /** Mobile mode (simplified decals) */
+    readonly isMobile?: boolean;
+    /** Decal fade duration in seconds */
+    readonly fadeDuration?: number;
+    /** Callback when decal fully fades */
+    readonly onDecalComplete?: (decalId: string) => void;
+}
+/**
+ * BloodDecals3D Component
+ *
+ * Renders persistent blood decals on 3D character models using decal projection.
+ * Decals fade over time and can persist across combat rounds for injury tracking.
+ *
+ * Performance optimized:
+ * - Limited concurrent decals (20 desktop, 10 mobile)
+ * - Efficient decal geometry generation
+ * - Texture reuse across all decals
+ * - Automatic cleanup of faded decals
+ *
+ * @example
+ * ```tsx
+ * const [bloodDecals, setBloodDecals] = useState<BloodDecal[]>([]);
+ * const characterMeshRef = useRef<THREE.Mesh>(null);
+ *
+ * // On hit event
+ * const handleHit = (position: [number, number, number], normal: [number, number, number]) => {
+ *   setBloodDecals([...bloodDecals, {
+ *     id: generateId(),
+ *     position,
+ *     normal,
+ *     size: [0.15, 0.15, 0.05],
+ *     rotation: Math.random() * Math.PI * 2,
+ *     opacity: 0.8,
+ *     timestamp: Date.now(),
+ *     isLaceration: false,
+ *   }]);
+ * };
+ *
+ * <mesh ref={characterMeshRef}>
+ *   <capsuleGeometry args={[0.5, 1.6, 16, 32]} />
+ *   <meshStandardMaterial color={0xcccccc} />
+ * </mesh>
+ *
+ * <BloodDecals3D
+ *   decals={bloodDecals}
+ *   targetMeshRef={characterMeshRef}
+ *   enabled={violenceSettings.blood}
+ *   isMobile={isMobile}
+ *   onDecalComplete={(id) => {
+ *     setBloodDecals(prev => prev.filter(d => d.id !== id));
+ *   }}
+ * />
+ * ```
+ */
+export declare const BloodDecals3D: React.FC<BloodDecals3DProps>;
+export default BloodDecals3D;
+//# sourceMappingURL=BloodDecals3D.d.ts.map

package/lib/components/screens/combat/components/effects/BloodDecals3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BloodDecals3D.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/effects/BloodDecals3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,oBAAoB;IACpB,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,yBAAyB;IACzB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,QAAQ,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IACvC,oDAAoD;IACpD,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACrD,qDAAqD;IACrD,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,sCAAsC;IACtC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AA4KD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2FtD,CAAC;AAEF,eAAe,aAAa,CAAC"}