Board layout

getLayout

import type { GetLayoutFn } from "boardweaver";

export const getLayout: GetLayoutFn = (state, viewingPlayerId, viewport) => ({
  type: "grid",
  columns: ["1fr", "2fr", "1fr"],
  rows: ["auto", "1fr", "auto"],
  areas: [
    ["opponent", "opponent", "opponent"],
    ["log",      "board",    "log"     ],
    ["me",       "me",       "me"      ],
  ],
});

Signature:

type GetLayoutFn<MetaData = Record<string, unknown>> = (
  gameState: GameState<MetaData>,
  viewingPlayerId: number,
  viewport: { width: number; height: number },
) => Layout;

When getLayout is not exported, the engine uses { type: "radial" }.

Layout variants

type RadialLayout = { type: "radial" };

type GridLayout = {
  type: "grid";
  columns: string[];                                   // CSS grid track sizes
  rows: string[];
  areas: (string | null)[][];                          // rows × columns; null = empty cell
  gap?: number;                                        // px; default 8
  areaOptions?: Record<string, { rotation?: 0 | 90 | 180 | 270 }>;
};

type Layout = RadialLayout | GridLayout;

areas is a 2D array of area ids. Reserved ids: "board" (main board), "me" (the viewer's player area), and any playerId stringified for other players. Custom area ids may appear in areas to slot in non-player content.

areaOptions[id].rotation rotates that area's visual output by a cardinal angle.

Read-only. Runs on every render.