Class LayoutSystem

LayoutSystem Class

Provides unified layout calculations and positioning utilities for consistent component placement across all screens.

Example

const layout = new LayoutSystem();

// Calculate grid position
const pos = layout.calculateGridPosition(2, 4, 1200);
// Returns { x: 200, width: 380 } for column 2, span 4

// Calculate responsive position
const screenSize = { width: 375, height: 667, isMobile: true, isTablet: false, isDesktop: false, isLandscape: false };
const responsivePos = layout.calculateResponsivePosition(
  { base: { x: 100, y: 50 } },
  screenSize
);

Index

Constructors

constructor

new LayoutSystem(
    gridColumns?: number,
    gutterSize?: number,
    safeArea?: SafeAreaInsets,
): LayoutSystem
Create a new LayoutSystem instance
Parameters
- gridColumns: number = DEFAULT_GRID_COLUMNS
  Number of grid columns (default: 12)
- gutterSize: number = DEFAULT_GUTTER_SIZE
  Gutter size between columns in pixels (default: 20)
- safeArea: SafeAreaInsets = DEFAULT_SAFE_AREA
  Safe area insets for mobile devices
Returns LayoutSystem
- Defined in systems/LayoutSystem.ts:99

Methods

alignHorizontal

alignHorizontal(
    elementWidth: number,
    containerWidth: number,
    alignment: HorizontalAlignment,
    margin?: number,
): number
Align element horizontally within container
Parameters
- elementWidth: number
  Width of element to align
- containerWidth: number
  Width of container
- alignment: HorizontalAlignment
  Alignment type ('left' | 'center' | 'right')
- margin: number = 0
  Optional margin from edges
Returns number
X position for alignment
Example
```
const x = layout.alignHorizontal(200, 800, 'center', 10);
// Returns 300 (centered with margins)
```
- Defined in systems/LayoutSystem.ts:260

alignVertical

alignVertical(
    elementHeight: number,
    containerHeight: number,
    alignment: VerticalAlignment,
    margin?: number,
): number
Align element vertically within container
Parameters
- elementHeight: number
  Height of element to align
- containerHeight: number
  Height of container
- alignment: VerticalAlignment
  Alignment type ('top' | 'middle' | 'bottom')
- margin: number = 0
  Optional margin from edges
Returns number
Y position for alignment
Example
```
const y = layout.alignVertical(100, 600, 'middle', 10);
// Returns 250 (vertically centered)
```
- Defined in systems/LayoutSystem.ts:291

calculateContainerBounds

calculateContainerBounds(
    screenWidth: number,
    screenHeight: number,
    hudHeight?: number,
    controlsHeight?: number,
    padding?: number,
): ContainerBounds
Calculate container bounds for arena or game area

Accounts for HUD, controls, and safe areas to determine usable space.
Parameters
- screenWidth: number
  Total screen width
- screenHeight: number
  Total screen height
- hudHeight: number = 0
  Height of top HUD
- controlsHeight: number = 0
  Height of bottom controls
- padding: number = 10
  Padding around content
Returns ContainerBounds
Container bounds for game content
Example
```
const bounds = layout.calculateContainerBounds(1200, 800, 120, 0, 10);
// Returns bounds for desktop game area
```
- Defined in systems/LayoutSystem.ts:356

calculateGridPosition

calculateGridPosition(
    column: number,
    span: number,
    containerWidth: number,
    customGutter?: number,
): { width: number; x: number }
Calculate position and width for grid-based layout

Uses 12-column grid system for consistent alignment. Accounts for gutters between columns.
Parameters
- column: number
  Starting column (0-11)
- span: number
  Number of columns to span (1-12)
- containerWidth: number
  Total container width in pixels
- OptionalcustomGutter: number
  Custom gutter size (optional)
Returns { width: number; x: number }
Position and width for the grid cell
Throws
Error if column or span are outside valid ranges
Example
```
// Center element spanning 6 columns
const pos = layout.calculateGridPosition(3, 6, 1200);
// Returns { x: 300, width: 580 }
```
- Defined in systems/LayoutSystem.ts:129

calculateResponsivePosition

calculateResponsivePosition(
config: ResponsivePosition,
screenSize: ScreenSize,
): Position
Calculate responsive position based on screen size

Scales position proportionally or uses specific overrides for tablet/mobile.
Parameters
- config: ResponsivePosition
  Responsive position configuration
- screenSize: ScreenSize
  Current screen dimensions and device type
Returns Position
Calculated position for current screen size
Example
```
const pos = layout.calculateResponsivePosition(
  {
    base: { x: 100, y: 50 },
    mobile: { x: 10, y: 20 },
    scaleProportionally: true
  },
  screenSize
);
```
- Defined in systems/LayoutSystem.ts:187

calculateSafePosition

calculateSafePosition(
position: Position,
edge: "left" | "right" | "top" | "bottom",
): Position
Calculate safe position accounting for device notches and home indicators

Ensures UI elements don't overlap with system UI on mobile devices.
Parameters
- position: Position
  Base position
- edge: "left" | "right" | "top" | "bottom"
  Which edge to apply safe area ('top' | 'bottom' | 'left' | 'right')
Returns Position
Position adjusted for safe area
Example
```
// Adjust top position for status bar/notch
const safePos = layout.calculateSafePosition({ x: 0, y: 10 }, 'top');
// Returns { x: 0, y: 54 } (10 + 44 for notch)
```
- Defined in systems/LayoutSystem.ts:228

getScreenSize

getScreenSize(width: number, height: number): ScreenSize
Create screen size information from dimensions

Determines device type and orientation based on screen dimensions.
Parameters
- width: number
  Screen width in pixels
- height: number
  Screen height in pixels
Returns ScreenSize
ScreenSize object with device type flags
Example
```
const screenSize = layout.getScreenSize(375, 667);
// Returns { width: 375, height: 667, isMobile: true, ... }
```
- Defined in systems/LayoutSystem.ts:322

Properties

`Private` `Readonly`gridColumns

gridColumns: number

`Private` `Readonly`gutterSize

gutterSize: number

`Private` `Readonly`safeArea

safeArea: SafeAreaInsets

Class LayoutSystem

Example

Index

Constructors

Methods

Properties

Constructors

constructor

Parameters

Returns LayoutSystem

Methods

alignHorizontal

Parameters

Returns number

Example

alignVertical

Parameters

Returns number

Example

calculateContainerBounds

Parameters

Returns ContainerBounds

Example

calculateGridPosition

Parameters

Returns { width: number; x: number }

Throws

Example

calculateResponsivePosition

Parameters

Returns Position

Example

calculateSafePosition

Parameters

Returns Position

Example

getScreenSize

Parameters

Returns ScreenSize

Example

Properties

Private ReadonlygridColumns

Private ReadonlygutterSize

Private ReadonlysafeArea

Settings

On This Page

`Private` `Readonly`gridColumns

`Private` `Readonly`gutterSize

`Private` `Readonly`safeArea