Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | 7x 344x 187x 187x 92x 90x 3x 2x 344x | /**
* BaseHUDContainer - Reusable HUD container with common patterns
*
* Provides consistent container styling and positioning for all HUD components.
* Eliminates code duplication across Training and Combat HUDs.
*
* Features:
* - Responsive positioning based on HUD position (left, right, top, bottom)
* - Korean cyberpunk theming with gradients and borders
* - Pointer events handling
* - Backdrop blur effects
*
* @module components/shared/ui
* @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너
*/
import React from "react";
import { Z_INDEX } from "../../../types/LayoutTypes";
import { KOREAN_COLORS } from "@/types/constants";
import { hexToRgbaString } from "../../../utils/colorUtils";
/**
* HUD position type
*/
export type HUDPosition = "left" | "right" | "top" | "bottom";
/**
* Props for BaseHUDContainer component
*/
export interface BaseHUDContainerProps {
/** Position of the HUD (left, right, top, bottom) */
readonly position: HUDPosition;
/** Width in pixels (used for left/right positions; top/bottom use 100% width) */
readonly width: number;
/** Height in pixels */
readonly height: number;
/** Top offset in pixels (for left/right HUDs) */
readonly topOffset?: number;
/** Internal padding in pixels */
readonly padding?: number;
/** Gap between sections in pixels */
readonly gap?: number;
/** Z-index for layering */
readonly zIndex?: number;
/** Additional CSS styles */
readonly style?: React.CSSProperties;
/** Child elements */
readonly children: React.ReactNode;
/** Test ID for testing */
readonly dataTestId?: string;
}
/**
* BaseHUDContainer Component
*
* Reusable container for HUD elements with consistent styling and positioning.
* Handles left, right, top, and bottom positions with appropriate borders,
* gradients, and responsive behavior.
*
* @example
* ```tsx
* <BaseHUDContainer
* position="left"
* width={268}
* height={940}
* topOffset={70}
* padding={12}
* gap={14}
* dataTestId="combat-left-hud"
* >
* <PlayerHUD player={player} />
* <SpeedIndicator speed={speed} />
* </BaseHUDContainer>
* ```
*/
export const BaseHUDContainer: React.FC<BaseHUDContainerProps> = ({
position,
width,
height,
topOffset = 0,
padding = 10,
gap = 12,
zIndex = Z_INDEX.HUD,
style = {},
children,
dataTestId,
}) => {
// Calculate position-specific styles
// Using KOREAN_COLORS directly for stable memoization instead of useKoreanTheme
const containerStyle = React.useMemo<React.CSSProperties>(() => {
const baseStyle: React.CSSProperties = {
position: "absolute",
display: "flex",
flexDirection: "column",
alignItems: "stretch",
pointerEvents: "none",
padding: `${padding}px`,
boxSizing: "border-box",
gap: `${gap}px`,
zIndex,
backdropFilter: "blur(8px)",
};
switch (position) {
case "left":
return {
...baseStyle,
left: 0,
top: `${topOffset}px`,
width: `${width}px`,
height: `${height}px`,
justifyContent: "flex-start",
borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,
background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,
};
case "right":
return {
...baseStyle,
right: 0,
top: `${topOffset}px`,
width: `${width}px`,
height: `${height}px`,
justifyContent: "flex-start",
borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,
background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,
};
case "top":
return {
...baseStyle,
top: 0,
left: 0,
width: "100%",
height: `${height}px`,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,
background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,
};
case "bottom":
return {
...baseStyle,
bottom: 0,
left: 0,
width: "100%",
height: `${height}px`,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,
background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,
};
}
}, [position, width, height, topOffset, padding, gap, zIndex]);
return (
<div style={{ ...containerStyle, ...style }} data-testid={dataTestId}>
{children}
</div>
);
};
export default BaseHUDContainer;
|