The grid data structure

In gridl, a grid is an immutable grid-based data structure that has the following properties, which should be self-explanatory.

{
    x: 2,
    y: 1,                       
    cellCount: 12,
    columnCount: 4,
    rowCount: 3,
    array2D: [
        [  0,   1,   2,   3],
        [  4,   5,   6,   7],
        ["x", "x", "x", "x"],
    ],
}

The data array

The array2D data array is a two-dimensional array that contains the actual cells. The coordinate system starts at the upper left corner at {x: 0, y: 0} and ends at the bottom right corner, which would be {x: 3, y: 2} in the example above. It can contain any values like primitive strings, numbers or booleans or complex objects. In most cases you don't need to access it directly. Instead you can use one of gridl's selector functions.

Creating a new grid from scratch

gridl provides some factory functions to create grid instances. To create a new grid from scratch use createGrid:

import {createGrid} from "gridl/core";

const grid = createGrid({
    columnCount: 4,
    rowCount: 3,
    createCell: (pos, idx) => pos.y < 2 ? idx : "x",
});
// {
//     x: 0,
//     y: 0,
//     cellCount: 12,
//     columnCount: 4,
//     rowCount: 3,
//     array2D: [
//         [  0,   1,   2,   3],
//         [  4,   5,   6,   7],
//         ["x", "x", "x", "x"],
//     ],
// }

Creating a new grid from existing data

To create a grid instance from an existing data array, use createGridFromArray2D:

import {createGridFromArray2D} from "gridl/core";

const grid = createGridFromArray2D([
    [0,  1,  2,  3],
    [4,  5,  6,  7],
    [8,  9, 10, 11],
]);