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 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 | 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
*
* ## Z-Index Stacking Order (Combat HUD Layers)
*
* The combat screen renders multiple overlapping HUD panels. The stacking
* order is managed by the Z_INDEX constants from LayoutTypes.ts:
*
* | Layer | Z-Index | Description |
* |---------------------|---------|------------------------------------|
* | BACKGROUND | 0 | 3D scene background |
* | ARENA | 10 | Combat arena mesh |
* | PLAYERS | 20 | Character models |
* | EFFECTS | 30 | Particles and VFX |
* | HUD_BACKGROUND | 40 | HUD panel backgrounds |
* | HUD (default) | 50 | Left/Right/Top/Bottom HUD panels |
* | TECHNIQUE_BAR | 55 | Technique bar overlay |
* | HUD_OVERLAY | 60 | PlayerStateOverlay and sub-HUDs |
* | MOBILE_CONTROLS | 100 | Touch controls on mobile |
* | MODAL | 200 | Modal dialogs |
* | TOOLTIP | 300 | Tooltips and hints |
* | PAUSE_MENU | 1000 | Pause menu overlay |
* | LOADING | 2000 | Loading screens |
* | DEBUG | 9000 | Performance debug overlay |
*
* All BaseHUDContainer instances default to Z_INDEX.HUD (50). Parent
* screens can override via the `zIndex` prop when a different layer
* is needed (e.g., overlays at HUD_OVERLAY = 60).
*
* ## Viewport Breakpoints (Expected HUD Sizes)
*
* | Viewport | Width | Left/Right HUD | Top HUD | Bottom HUD |
* |---------------------|----------|----------------|---------|------------|
* | Small Phone (≤375) | ≤375px | ~120-150px | ~50px | ~90px |
* | Mobile (<768) | <768px | ~180-200px | ~60px | ~110px |
* | Tablet (768-1199) | 768-1199 | ~220-260px | ~65px | ~120px |
* | Desktop (≥1200) | ≥1200px | ~260-300px | ~70px | ~130px |
* | 4K (≥1920) | ≥1920px | ~300-400px | ~80px | ~140px |
*
* Width/height values are passed by the parent screen and scaled via
* positionScale multipliers. This table documents the expected ranges
* produced by CombatScreen3D and TrainingScreen3D layout calculations.
*
* @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
//
// Z-index stacking: defaults to Z_INDEX.HUD (50). Combat screen layers
// are ordered as: HUD_BACKGROUND (40) < HUD (50) < TECHNIQUE_BAR (55) < HUD_OVERLAY (60).
// Left/Right/Top/Bottom HUDs all share the same z-index (HUD = 50) and
// rely on DOM order for overlap resolution. The PlayerStateOverlay sits
// at HUD_OVERLAY (60) to appear above all HUD panels.
//
// Safe area note: left/right HUD panels are anchored to the viewport edge
// with left: 0 / right: 0. Reducing the width prop alone will not move a
// panel out of a landscape notch or horizontal safe-area cutout. If the
// parent needs to avoid env(safe-area-inset-left) /
// env(safe-area-inset-right), it should also provide a horizontal offset
// via the existing style prop (for example, left/right or horizontal
// padding) in addition to any width adjustments. Horizontal safe-area
// insets affect left/right panel widths and offsets, not topOffset (which
// is purely vertical). For portrait notch/status-bar avoidance, the parent
// should incorporate layout.safeArea.top into the topOffset calculation.
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;
|