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 | 88x | /**
* Layout-related type definitions for unified positioning system
*
* Provides type-safe interfaces for grid-based layout, responsive positioning,
* and z-index hierarchy management across all screens.
*
* @module types/LayoutTypes
* @category Type Definitions
* @korean 레이아웃타입
*/
import { Position } from "./common";
/**
* Screen size breakpoints for responsive design
*
* @category Layout Types
* @korean 화면크기
*/
export interface ScreenSize {
/** Screen width in pixels */
readonly width: number;
/** Screen height in pixels */
readonly height: number;
/** Whether the device is mobile (<768px) */
readonly isMobile: boolean;
/** Whether the device is tablet (768-1199px) */
readonly isTablet: boolean;
/** Whether the device is desktop (≥1200px) */
readonly isDesktop: boolean;
/** Whether the screen is in landscape orientation */
readonly isLandscape: boolean;
}
/**
* Grid-based position configuration
*
* Uses 12-column grid system for consistent alignment.
*
* **Important:** Valid combinations must satisfy:
* - column: 0-11 (starting column)
* - span: 1-12 (number of columns to span)
* - column + span ≤ 12 (must not exceed grid width)
*
* Invalid combinations (e.g., column: 10, span: 5) will throw runtime errors.
* Use LayoutSystem.calculateGridPosition() which validates inputs.
*
* @category Layout Types
* @korean 그리드위치
*
* @example Valid positions
* ```typescript
* { column: 0, span: 12 } // Full width
* { column: 2, span: 8 } // Centered 8 columns
* { column: 0, span: 6 } // Left half
* { column: 6, span: 6 } // Right half
* ```
*
* @example Invalid positions (will throw errors)
* ```typescript
* { column: 10, span: 5 } // ERROR: 10 + 5 = 15 > 12
* { column: -1, span: 6 } // ERROR: column < 0
* { column: 5, span: 0 } // ERROR: span < 1
* ```
*/
export interface GridPosition {
/** Grid column to start from (0-11) */
readonly column: number;
/** Number of columns to span (1-12) */
readonly span: number;
/** Row index for vertical positioning (multiplied by DEFAULT_ROW_HEIGHT=100px) */
readonly row?: number;
/** Gutter size in pixels (default: 20) */
readonly gutter?: number;
}
/**
* Responsive position that adapts to screen size
*
* @category Layout Types
* @korean 반응형위치
*/
export interface ResponsivePosition {
/** Base position for desktop (1200px+) */
readonly base: Position;
/** Position override for tablet (768-1199px) */
readonly tablet?: Position;
/** Position override for mobile (<768px) */
readonly mobile?: Position;
/** Whether to scale proportionally based on screen width */
readonly scaleProportionally?: boolean;
}
/**
* Z-index hierarchy for layering UI elements
*
* Ensures consistent stacking order across all screens
*
* @category Layout Constants
* @korean z인덱스계층
*/
export const Z_INDEX = {
/** Background scenes and effects - 배경 */
BACKGROUND: 0,
/** Combat arena and training grounds - 경기장 */
ARENA: 10,
/** Player characters and enemies - 플레이어 */
PLAYERS: 20,
/** Visual effects and particles - 효과 */
EFFECTS: 30,
/** HUD elements (health bars, timers) - HUD */
HUD: 40,
/** Mobile touch controls - 모바일제어 */
MOBILE_CONTROLS: 50,
/** Modal dialogs and overlays - 모달 */
MODAL: 60,
/** Tooltips and hints - 툴팁 */
TOOLTIP: 70,
/** Debug and performance overlays - 디버그 */
DEBUG: 80,
} as const;
/**
* Type for Z_INDEX values
*
* @category Layout Types
*/
export type ZIndexValue = (typeof Z_INDEX)[keyof typeof Z_INDEX];
/**
* Alignment options for positioning elements
*
* @category Layout Types
* @korean 정렬
*/
export type HorizontalAlignment = "left" | "center" | "right";
export type VerticalAlignment = "top" | "middle" | "bottom";
/**
* Layout configuration for a component
*
* @category Layout Types
* @korean 레이아웃설정
*/
export interface LayoutConfig {
/** Grid-based position (if using grid system) */
readonly grid?: GridPosition;
/** Responsive position (if not using grid) */
readonly position?: ResponsivePosition;
/** Z-index layer for stacking */
readonly zIndex?: ZIndexValue;
/** Horizontal alignment within container */
readonly horizontalAlign?: HorizontalAlignment;
/** Vertical alignment within container */
readonly verticalAlign?: VerticalAlignment;
/** Margin in pixels */
readonly margin?: number;
/** Padding in pixels */
readonly padding?: number;
}
/**
* Safe area insets for mobile devices with notches
*
* @category Layout Types
* @korean 안전영역
*/
export interface SafeAreaInsets {
/** Top inset (notch, status bar) */
readonly top: number;
/** Right inset (typically 0) */
readonly right: number;
/** Bottom inset (home indicator) */
readonly bottom: number;
/** Left inset (typically 0) */
readonly left: number;
}
/**
* Container bounds for positioning child elements
*
* @category Layout Types
* @korean 컨테이너경계
*/
export interface ContainerBounds {
/** X position in pixels */
readonly x: number;
/** Y position in pixels */
readonly y: number;
/** Width in pixels */
readonly width: number;
/** Height in pixels */
readonly height: number;
/** Scale factor (1.0 = no scaling) */
readonly scale?: number;
}
|