# game-css-grid

> [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

Latest version **1.0.1** (published 2021-01-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install game-css-grid
pnpm add game-css-grid
yarn add game-css-grid
bun add game-css-grid
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-01-09 |
| First published | 2020-05-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 12.0.0 |
| Dependencies | 0 |
| Unpacked size | 55.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Denis Klyuev |
| Maintainers | rubyroid |
| Keywords | game, css, gird, layout |

## Links

- npm: https://www.npmjs.com/package/game-css-grid
- Repository: https://github.com/Rubyroidas/game-css-grid
- Homepage: https://github.com/Rubyroidas/game-css-grid#readme
- Issues: https://github.com/Rubyroidas/game-css-grid/issues
- npm.io page: https://npm.io/package/game-css-grid

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-01-09
- 1.0.0 — 2020-05-17

## README

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

# 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:

```javascript
{
    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
            }
        },
    },
}
```

| property        | obligatory? | type   | description                                                                                                                                                                                                        |
| --------------- | ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| justifyContent  | no          | string | the same format as for CSS `justify-content` rule, except `stretch`<br/>`start` is default                                                                                                                         |
| alignContent    | no          | string | the same format as for CSS `align-content` rule, except `stretch`<br>`start` is default                                                                                                                            |
| templateColumns | yes         | string | the same format as for CSS `grid-template-columns` rule                                                                                                                                                            |
| templateRows    | yes         | string | the same format as for CSS `grid-template-rows` rule                                                                                                                                                               |
| gap             | no          | string | the same format as for CSS `grid-gap` rule                                                                                                                                                                         |
| regions         | yes         | object | Object with regions. Key is the name, value is object of this type:<br/>`{column: string, row: string}`<br/>where:<br/>`column` is the same as CSS `grid-column` rule<br/>`row` is the same as CSS `grid-row` rule |

## 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.

```typescript
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
);
```

---
_Source: https://npm.io/package/game-css-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._