Boards

Board style selects the topology. Width, height, markers, and stroke options further customize appearance.

Square grids

`squares`

Example games: Cifra, Realm

`squares-checkered`

Example games: Amazons, Arimaa

`squares-beveled`

Example games: Blockade, Boxes

`squares-stacked`

Example games: Akron, Margo

`squares-diamonds`

Example games: Alta, Tessella

`heightmap-squares`

Square grid with per-cell elevation for the isometric renderer.

Vertex boards

`vertex`

Example games: Go, Asli

Go uses a vertex board with automatic star points. Disable with the hide-star-points option.

`vertex-cross`

Example games: Fabrik, Shape Chess

`vertex-fanorona`

Example games: Fanorona, Query

Hex grids

`hex-slanted`

Example games: Hex, Lox

`hex-odd-p`

Example games: Exxit, Storisende

`hex-even-p`

Example games: Chase, Streetcar Suburb

`hex-odd-f`

Example games: Atoll

`hex-even-f`

Example games: Tintas

`hex-of-hex`

Example games: Crosshairs, Havannah

Top half only (half: "top"):

Example games: Basalt, Y

Bottom half only (half: "bottom"):

Alternating symmetry (alternatingSymmetry: true):

Example games: Churn, Squirm

`hex-of-tri`

Example games: Accasta, Yavalath

`hex-of-tri-f`

Same as hex-of-tri but pieces are placed on the faces of the triangles.

`hex-of-cir`

Triangle and specialty tilings

`rect-of-tri`

`triangles-stacked`

{
  "options": [
    "no-piece-click"
  ],
  "board": {
    "style": "triangles-stacked",
    "width": 7,
    "height": 7,
    "strokeOpacity": 0,
    "skipLabels": [
      "n"
    ],
    "blocked": [
      {
        "row": 0,
        "col": 0
      },
      {
        "row": 0,
        "col": 5
      },
      {
        "row": 0,
        "col": 6
      },
      {
        "row": 1,
        "col": 0
      },
      {
        "row": 1,
        "col": 6
      },
      {
        "row": 2,
        "col": 6
      },
      {
        "row": 4,
        "col": 6
      },
      {
        "row": 5,
        "col": 0
      },
      {
        "row": 5,
        "col": 6
      },
      {
        "row": 6,
        "col": 0
      },
      {
        "row": 6,
        "col": 5
      },
      {
        "row": 6,
        "col": 6
      }
    ]
  },
  "legend": {
    "H": {
      "name": "hex-pointy-m21",
      "colour": "#999",
      "scale": 1.87
    },
    "A": {
      "name": "hex-pointy-m123",
      "colour": 1,
      "scale": 1.87
    },
    "B": {
      "name": "hex-pointy-m123",
      "colour": 2,
      "scale": 1.87
    }
  },
  "pieces": "-HHHH--\n-HHHHH-\nBHHAHH-\nHBHBBHH\nHHAAHB-\n-HHHHH-\n-HHHH--\n_\n_\n--A\n--A"
}

`bent-tri`

Example games: Y

`snubsquare`

Example games: Cephalopod

`snubsquare-cells`

`onyx`

Example games: Onyx

`pentagonal`

`pentagonal-bluestone`

Example games: Bluestone

`star`

Cairo tilings

`cairo-collinear`

Example games: Cairo Corridor

`cairo-catalan`

Conical and pyramid hex

`conical-hex`

Example games: Conect

{
  "board": {
    "style": "conical-hex",
    "height": 14,
    "markers": [
      {
        "type": "halo",
        "width": 10,
        "segments": [
          {
            "colour": 1
          },
          {
            "colour": 2
          }
        ]
      },
      {
        "type": "flood",
        "colour": 1,
        "opacity": 1,
        "points": [
          {
            "col": 0,
            "row": 10
          },
          {
            "col": 3,
            "row": 9
          },
          {
            "col": 3,
            "row": 6
          },
          {
            "col": 7,
            "row": 4
          },
          {
            "col": 10,
            "row": 9
          }
        ]
      },
      {
        "type": "flood",
        "colour": 2,
        "opacity": 1,
        "points": [
          {
            "col": 4,
            "row": 0
          },
          {
            "col": 10,
            "row": 1
          },
          {
            "col": 1,
            "row": 4
          },
          {
            "col": 12,
            "row": 1
          },
          {
            "col": 7,
            "row": 11
          }
        ]
      }
    ]
  },
  "legend": {},
  "pieces": null
}

`conical-hex-narrow`

Example games: Conect

`pyramid-hex`

Circular boards

`circular-wheel`

{
  "renderer": "stacking-offset",
  "board": {
    "style": "circular-wheel",
    "width": 8,
    "height": 4,
    "markers": [
      {
        "type": "flood",
        "colour": 1,
        "points": [
          {
            "row": 1,
            "col": 4
          }
        ],
        "opacity": 0.5
      },
      {
        "type": "flood",
        "colour": 2,
        "points": [
          {
            "row": 1,
            "col": 1
          }
        ],
        "opacity": 0.5
      }
    ]
  },
  "legend": {
    "A": {
      "name": "piece",
      "colour": 1,
      "scale": 0.75
    },
    "B": {
      "name": "piece",
      "colour": 2,
      "scale": 0.75
    }
  },
  "pieces": "-,-,-,B,A,A,-,ABA\n-,AB,-,BAB,A,-,BA,B\n\n\n\n\n-,-,-,B,A\nA,B",
  "annotations": [
    {
      "type": "enter",
      "targets": [
        {
          "row": 0,
          "col": 3
        }
      ]
    },
    {
      "type": "enter",
      "targets": [
        {
          "row": 1,
          "col": 1
        }
      ]
    }
  ]
}

`circular-cobweb`

Example games: Adere

{
  "renderer": "stacking-offset",
  "board": {
    "style": "circular-cobweb",
    "width": 8,
    "height": 4,
    "markers": [
      {
        "type": "halo",
        "width": 10,
        "segments": [
          {
            "colour": 1
          },
          {
            "colour": 2
          },
          {
            "colour": 1
          },
          {
            "colour": 2
          },
          {
            "colour": 1
          },
          {
            "colour": 2
          },
          {
            "colour": 1
          },
          {
            "colour": 2
          }
        ],
        "offset": -22.5,
        "fill": "#000"
      },
      {
        "type": "flood",
        "colour": 1,
        "points": [
          {
            "row": 0,
            "col": 4
          },
          {
            "row": 0,
            "col": 5
          },
          {
            "row": 0,
            "col": 7
          },
          {
            "row": 1,
            "col": 4
          },
          {
            "row": 1,
            "col": 6
          },
          {
            "row": 2,
            "col": 6
          },
          {
            "row": 3,
            "col": 2
          },
          {
            "row": 3,
            "col": 7
          }
        ],
        "opacity": 0.5
      },
      {
        "type": "flood",
        "colour": 2,
        "points": [
          {
            "row": 0,
            "col": 3
          },
          {
            "row": 1,
            "col": 1
          },
          {
            "row": 1,
            "col": 3
          },
          {
            "row": 1,
            "col": 7
          },
          {
            "row": 2,
            "col": 0
          },
          {
            "row": 2,
            "col": 1
          },
          {
            "row": 2,
            "col": 2
          },
          {
            "row": 4,
            "col": 0
          }
        ],
        "opacity": 0.5
      }
    ],
    "strokeColour": "#666"
  },
  "legend": {
    "A": {
      "name": "piece",
      "colour": 1,
      "scale": 0.75
    },
    "B": {
      "name": "piece",
      "colour": 2,
      "scale": 0.75
    }
  },
  "pieces": "-,-,-,B,A,A,-,ABA\n-,AB,-,BAB,A,-,BA,B\nB,AB,AB,-,-,-,BA,-\n-,-,A,-,-,-,-,A\nB",
  "annotations": [
    {
      "type": "enter",
      "targets": [
        {
          "row": 0,
          "col": 3
        }
      ]
    }
  ]
}

`circular-moon`

Example games: Moon Squad, Adere

Sowing / Mancala

`sowing`

Example games: Bao, Diffusion

`sowing-round`

Example games: Rincala

ConHex

`conhex-dots`

Example games: ConHex

`conhex-cells`

DVGC

`dvgc`

{
  "board": {
    "style": "dvgc"
  },
  "legend": {
    "A": {
      "name": "nato-cavalry",
      "colour": 2,
      "rotate": null
    },
    "B": {
      "name": "nato-infantry",
      "colour": 2,
      "rotate": null
    },
    "C": {
      "name": "nato-artillery",
      "colour": 2,
      "rotate": null
    },
    "a": {
      "name": "nato-cavalry",
      "colour": 9,
      "rotate": null
    },
    "b": {
      "name": "nato-infantry",
      "colour": 9,
      "rotate": null
    },
    "c": {
      "name": "nato-artillery",
      "colour": 9,
      "rotate": null
    }
  },
  "pieces": "abc--ABC",
  "areas": [
    {
      "type": "reserves",
      "side": "S",
      "background": 2,
      "pieces": [
        "B",
        "B",
        "B",
        "B",
        "B",
        "B",
        "B",
        "B",
        "C",
        "C",
        "A",
        "A",
        "A"
      ]
    },
    {
      "type": "reserves",
      "side": "N",
      "background": 9,
      "pieces": [
        "b",
        "b",
        "b",
        "b",
        "b",
        "b",
        "b",
        "b",
        "c",
        "c",
        "a",
        "a",
        "a"
      ]
    }
  ]
}

`dvgc-checkered`

Pegboard

`pegboard`

Example games: Connections, Twixt

{
  "options": [
    "reverse-numbers"
  ],
  "board": {
    "style": "pegboard",
    "width": 24,
    "height": 24,
    "blocked": [
      {
        "row": 0,
        "col": 0
      },
      {
        "row": 0,
        "col": 23
      },
      {
        "row": 23,
        "col": 0
      },
      {
        "row": 23,
        "col": 23
      }
    ],
    "markers": [
      {
        "type": "line",
        "points": [
          {
            "row": 1,
            "col": 1
          },
          {
            "row": 1,
            "col": 23
          }
        ],
        "colour": 1,
        "width": 5
      },
      {
        "type": "line",
        "points": [
          {
            "row": 23,
            "col": 1
          },
          {
            "row": 23,
            "col": 23
          }
        ],
        "colour": 1,
        "width": 5
      },
      {
        "type": "line",
        "points": [
          {
            "row": 1,
            "col": 1
          },
          {
            "row": 23,
            "col": 1
          }
        ],
        "colour": 2,
        "width": 5
      },
      {
        "type": "line",
        "points": [
          {
            "row": 1,
            "col": 23
          },
          {
            "row": 23,
            "col": 23
          }
        ],
        "colour": 2,
        "width": 5
      },
      {
        "type": "line",
        "points": [
          {
            "row": 8,
            "col": 9
          },
          {
            "row": 10,
            "col": 10
          }
        ],
        "colour": 1,
        "width": 5,
        "centered": true,
        "clickable": true
      },
      {
        "type": "line",
        "points": [
          {
            "row": 7,
            "col": 9
          },
          {
            "row": 9,
            "col": 10
          }
        ],
        "colour": 2,
        "width": 5,
        "centered": true,
        "clickable": true
      }
    ]
  },
  "legend": {
    "A": {
      "name": "piece",
      "colour": 1,
      "scale": 0.75
    },
    "B": {
      "name": "piece",
      "colour": 2,
      "scale": 0.75
    }
  },
  "pieces": "_\n_\n_\n_\n_\n_\n_\n---------B\n---------A\n----------B\n----------A"
}

Other

`other`

Placeholder board style for specialized renderers (such as tree-pyramid) where no grid is drawn.

Example games: Siege of Jacynth

Blocking cells

Irregular shapes by blocking outer cells:

{
  "renderer": "stacking-offset",
  "board": {
    "style": "hex-of-tri",
    "minWidth": 6,
    "maxWidth": 11,
    "blocked": [
      {
        "row": 0,
        "col": 0
      },
      {
        "row": 0,
        "col": 1
      },
      {
        "row": 0,
        "col": 4
      },
      {
        "row": 0,
        "col": 5
      },
      {
        "row": 1,
        "col": 0
      },
      {
        "row": 1,
        "col": 6
      },
      {
        "row": 4,
        "col": 0
      },
      {
        "row": 4,
        "col": 9
      },
      {
        "row": 5,
        "col": 0
      },
      {
        "row": 5,
        "col": 10
      },
      {
        "row": 6,
        "col": 0
      },
      {
        "row": 6,
        "col": 9
      },
      {
        "row": 9,
        "col": 0
      },
      {
        "row": 9,
        "col": 6
      },
      {
        "row": 10,
        "col": 0
      },
      {
        "row": 10,
        "col": 1
      },
      {
        "row": 10,
        "col": 4
      },
      {
        "row": 10,
        "col": 5
      }
    ],
    "markers": [
      {
        "type": "dots",
        "colour": "#888",
        "size": 0.33,
        "points": [
          {
            "row": 0,
            "col": 2
          },
          {
            "row": 0,
            "col": 3
          },
          {
            "row": 3,
            "col": 0
          },
          {
            "row": 2,
            "col": 0
          },
          {
            "row": 2,
            "col": 7
          },
          {
            "row": 3,
            "col": 8
          },
          {
            "row": 7,
            "col": 0
          },
          {
            "row": 8,
            "col": 0
          },
          {
            "row": 8,
            "col": 7
          },
          {
            "row": 7,
            "col": 8
          },
          {
            "row": 10,
            "col": 2
          },
          {
            "row": 10,
            "col": 3
          },
          {
            "row": 5,
            "col": 5
          }
        ]
      }
    ]
  },
  "legend": {
    "A": {
      "name": "piece",
      "colour": "#666"
    },
    "B": {
      "name": "piece",
      "colour": "#fff"
    },
    "C": {
      "name": "piece",
      "colour": 1
    }
  },
  "pieces": "-,-,-,-,-,-\n-,A,A,A,A,A,-\n-,A,-,-,-,-,A,-\n-,A,-,-,B,-,-,A,-\n-,A,-,B,B,B,B,-,A,-\n-,A,-,-,B,C,B,-,-,A,-\n-,A,-,B,B,B,B,-,A,-\n-,A,-,-,B,-,-,A,-\n-,A,-,-,-,-,A,-\n-,A,A,A,A,A,-\n-,-,-,-,-,-"
}

Full list of board styles: Schema reference — board styles.