Glyphs

The legend maps keys used in pieces to visual definitions. Each entry is either a sheet piece name (like piece or meeple), a glyph object with transforms and colours, or an array of glyph objects composited into one piece.

Player-owned pieces should set colour to a player number (1, 2, …) so user colour settings apply. Use hex colours or colour functions only when the colour is fixed.

See the contact sheet for every available sheet piece name.

Simple glyphs

A legend entry can be a plain string (the sheet piece name) or an object with name and optional properties:

"P1": { "name": "piece", "colour": 1 }

Example games: Arimaa, Go

Composite glyphs

An array of glyph objects is drawn bottom to top — the first entry sits underneath later ones. Each layer can have its own name, colour, scale, rotate, and other properties. Layers without a colour keep the artwork from the sheet.

Example games: Alfred's Wyke, Cannon

Gradients

colour and colour2 accept linear gradients with stops and optional x1/y1/x2/y2 (0–1, relative to the glyph bounds).

Colour functions

Colours throughout render JSON (glyphs, markers, board fills, and more) can use colour functions instead of a literal hex value or player number.

Function Purpose
flatten Blend a semi-transparent foreground over a background into one opaque colour.
lighten Lighten or darken a base colour by saturation (ds) and luminance (dl) deltas.
bestContrast Pick the most readable colour from a list against a given background.
custom Use a game-specific default while still respecting player or context customizations.

flatten

Returns the fully opaque colour equivalent to painting fg at opacity over bg.

{
  "func": "flatten",
  "fg": "_context_fill",
  "bg": "_context_background",
  "opacity": 0.25
}

lighten

Adjusts saturation and luminance. Positive ds/dl lighten; negative values darken. Arguments can themselves be player numbers, hex strings, context tokens, or nested functions.

{
  "func": "lighten",
  "colour": 3,
  "ds": 3,
  "dl": 1
}

bestContrast

Chooses the entry from fg with the best contrast against bg.

{
  "func": "bestContrast",
  "bg": "_context_background",
  "fg": ["#000", "#fff"]
}

custom

Ties a default colour to a palette value (player number or _context_* token). The renderer uses default when the user has not customized that palette slot; otherwise it uses palette. Set paletteType to "player" or "context" when palette is itself a function.

Colour value types

Any colour property accepts one of:

Form Example Notes
Player number 1 Uses the user's colour for that player (or pattern, if enabled).
Hex string "#ff6633" Fixed colour.
Context token "_context_strokes" Resolved from the active colour context (strokes, fill, background, borders, labels, annotations, board).
Gradient { "stops": […] } Linear gradient; see Gradients above.
Colour function { "func": "lighten", … } See table above.

Rotated glyphs

Example games: Crosshairs, Pikemen

Stacked pieces (stacking-offset)

Example games: Abande, Accasta

Dice and text

Example games: Cephalopod, Cubeo, Boom & Zoom

Text glyphs use orientation: "vertical" so labels stay legible when the board rotates.

Glyph object properties

Each glyph object in the legend supports these properties. name and text are mutually exclusive.

Property Type Default Description
name string — Sheet piece id (no whitespace). Searched across loaded glyph sheets.
text string — Short text rendered as a glyph instead of sheet artwork.
colour colour — Primary fill (or player colour when a number). Applied to elements tagged data-playerfill.
colour2 colour — Secondary fill for elements tagged data-playerfill2.
scale number 1 Proportional size; values below 1 shrink, above 1 enlarge.
opacity number 1 0 (transparent) to 1 (opaque); applied to player-tagged fills and strokes.
rotate number | null 0 Degrees, −360 to 360. Negative is counter-clockwise.
orientation "fluid" | "vertical" "fluid" After rotation, "vertical" keeps text upright.
flipx boolean false Mirror horizontally.
flipy boolean false Mirror vertically.
nudge { dx, dy } — Offset from centre in cell units; negative dx/dy move left/up.
fontFamily string — CSS font family for text glyphs.
fontWeight string | number — CSS font weight for text glyphs.

The legend also supports polymatrix entries (arrays of arrays for the polyomino renderer) and isoPiece entries (isometric renderer). See Engines.

Schema reference — legend

Contact sheet

All sheet piece names (piece, piece-square, meeple, d6-1, chessmen, and so on) are listed in the contact sheet, grouped by sheet:

Contact sheet

The image is maintained manually in the renderer repo (docs/contact-sheet.svg) and updated when new pieces are added. See Adding pieces for contributor workflow.