import * as React from "react";
import {
    Grid,
    GridModel,
    Scalar,
    Cell,
} from "gridmash";
 
interface Props {}
 
export default (props: Props): React.ReactElement => {
    const [data, setData] = React.useState<GridModel<Scalar>>([
    [0, 0, 0],
    [0, 0, 0],
    [0, 3, 3],
    ]);
    return (
    <Grid
        // 2d array of scalar values that each cell should hold.
        data={data}
        // How each inner value should be rendered.
        cell={(value: Scalar, key: string) => {
        return (
            <Cell
            value={value}
            key={key}
            style={{
                display: "inline-block",
                padding: "20px",
            }}
            />
        );
        }}
        // The operation to perform between two cells when they reconcile.
        reconcile={(a, b) => a + b}
        // What must be true about a cell in order for it to reconcile.
        reconciliationCondition={a => a % 2 === 0 && a !== 0}
        // What to do when a reconciliation is found.
        onReconciliation={(reconciliation) => {
        console.log(reconciliation);
        }}
    />
    );
}

import {
    Grid,
    Motion,
} from "gridmash";
 
interface Props {}
 
export default (props: Props): React.ReactElement => {
    // This is the default mapping which relates motions to keydown events.
    const keyMap = new Map([
    [Motion.UP, "ArrowUp"],
    [Motion.DOWN, "ArrowDown"],
    [Motion.LEFT, "ArrowLeft"],
    [Motion.RIGHT, "ArrowRight"],
    ]);
    return (
    <Grid
        data={[[]]}
        keyMap={keyMap}
    />
    );
}