game-css-grid v1.0.1

Game CSS Grid

This package is supposed to cut rectangular area into slices (smaller areas). Regions can be absolute or stack positioned. Stack can be horizontal or vertical. Units which used are:

• px pixels
• % percents
• fr proportional sizing (exactlty like in CSS Grid standard)
• vw, vh, vmin or vmax for relative sizing
• list of units is freely customizable

Layout config

Config is an object describing a region. Example of the config:

{
    justifyContent: 'space-evenly',
    alignContent: 'space-evenly',
    templateColumns: '[first] 20% [left] 20% [right] 20% [last]',
    templateRows: '20% 20% 20%',
    gap: '5%',
    regions: {
        first: {
            column: 'left / last',
            row: '2 / span 2',
        },
        second: {
            column: 'left / span 1',
            row: '1 / span 1',
            shift: {
                x: '3vmin',
                y: 5
            }
        },
        third: {
            column: '1 / span 1',
            row: '1 / span 1',
            scale: 1.5
        },
        fourth: {
            column: 'first / span 1',
            row: '3 / span 1',
            scale: {
                x: 2,
                y: 2.5
            }
        },
    },
}

Usage

Given layout config is parsed into region tree. After that all regions become an array and all of them are calculated into finite rectangular objects.

import {
    calculate,
    GridLayoutConfig,
    defaultAreaConstructor,
    RectangledObject,
    AlignRule
} from 'game-css-grid';

const layoutConfig: GridLayoutConfig = {
    templateColumns: '[first] 20% [left] 60% [right] 20% [last]',
    templateRows: '20% 60% 20%',
    justifyContent: AlignRule.Center,
    alignContent: AlignRule.Start,
    regions: {
        panel1: {
            column: 'first / last',
            row: '1 / span 1',
        },
        panel2: {
            column: 'first / last',
            row: '3 / span 1',
        },
    }
};

const layout: {
    [index: string]: RectangledObject;
} = calculate(
    this.game.world.bounds, layoutConfig, defaultAreaConstructor
);