Markers

Markers are part of the board definition and are drawn under pieces. Use them for dots, shading, edges, fences, flood fill, outlines, lines, and labels.

Dots

Example games: Advanced Slither, Akron

Shading

Example games: Ataxx, Alien City

{
  "renderer": "stacking-offset",
  "board": {
    "style": "hex-of-tri",
    "minWidth": 4,
    "maxWidth": 7,
    "stackOffset": 0.2,
    "markers": [
      {
        "type": "shading",
        "points": [
          {
            "row": 0,
            "col": 0
          },
          {
            "row": 0,
            "col": 3
          },
          {
            "row": 2,
            "col": 3
          },
          {
            "row": 2,
            "col": 2
          }
        ],
        "colour": 2
      },
      {
        "type": "shading",
        "points": [
          {
            "row": 6,
            "col": 0
          },
          {
            "row": 6,
            "col": 3
          },
          {
            "row": 4,
            "col": 3
          },
          {
            "row": 4,
            "col": 2
          }
        ],
        "colour": 1
      }
    ]
  },
  "legend": {
    "S1": {
      "name": "piece",
      "colour": 1
    },
    "S2": {
      "name": "piece",
      "colour": 2
    }
  },
  "pieces": [
    [
      [
        "S2",
        "S2",
        "S2"
      ],
      [
        "S2",
        "S2",
        "S2"
      ],
      [
        "S2"
      ],
      [
        "S2",
        "S2",
        "S2"
      ]
    ],
    [
      [],
      [
        "S2"
      ],
      [
        "S2",
        "S2",
        "S2"
      ],
      [],
      [
        "S2"
      ]
    ],
    [
      [],
      [],
      [
        "S2",
        "S2"
      ],
      [],
      [
        "S2",
        "S2"
      ],
      []
    ],
    [
      [
        "S1"
      ],
      [],
      [],
      [],
      [
        "S2"
      ],
      [],
      []
    ],
    [
      [
        "S1",
        "S1"
      ],
      [
        "S1"
      ],
      [],
      [
        "S1",
        "S1"
      ],
      [],
      []
    ],
    [
      [],
      [
        "S1"
      ],
      [
        "S1",
        "S1"
      ],
      [
        "S1",
        "S1",
        "S1"
      ],
      []
    ],
    [
      [
        "S1"
      ],
      [
        "S1"
      ],
      [
        "S1",
        "S1",
        "S1"
      ],
      [
        "S1",
        "S1",
        "S1"
      ]
    ]
  ]
}

Edges and fences

Example games: Blockade, Conect

Flood fill

Example games: Amazons, Alta

Outlines and lines

Example games: Bao, Blockade

{
  "board": {
    "style": "squares-checkered",
    "width": 8,
    "height": 8,
    "markers": [
      {
        "type": "line",
        "points": [
          {
            "row": 0,
            "col": 0
          },
          {
            "row": 8,
            "col": 8
          }
        ],
        "width": 2,
        "opacity": 0.25
      },
      {
        "type": "shading",
        "points": [
          {
            "row": 6,
            "col": 0
          },
          {
            "row": 6,
            "col": 2
          },
          {
            "row": 8,
            "col": 2
          },
          {
            "row": 8,
            "col": 0
          }
        ],
        "colour": 1,
        "opacity": 0.25
      },
      {
        "type": "shading",
        "points": [
          {
            "row": 7,
            "col": 0
          },
          {
            "row": 7,
            "col": 1
          },
          {
            "row": 8,
            "col": 1
          },
          {
            "row": 8,
            "col": 0
          }
        ],
        "colour": 1,
        "opacity": 1
      },
      {
        "type": "shading",
        "points": [
          {
            "col": 6,
            "row": 0
          },
          {
            "col": 6,
            "row": 2
          },
          {
            "col": 8,
            "row": 2
          },
          {
            "col": 8,
            "row": 0
          }
        ],
        "colour": 2,
        "opacity": 0.25
      },
      {
        "type": "shading",
        "points": [
          {
            "col": 7,
            "row": 0
          },
          {
            "col": 7,
            "row": 1
          },
          {
            "col": 8,
            "row": 1
          },
          {
            "col": 8,
            "row": 0
          }
        ],
        "colour": 2,
        "opacity": 1
      }
    ]
  },
  "legend": {
    "A": {
      "name": "piece",
      "colour": 1
    },
    "B": {
      "name": "piece-chariot",
      "colour": 1
    },
    "C": {
      "name": "sphere-spiral",
      "colour": 1
    },
    "X": {
      "name": "piece",
      "colour": 2
    },
    "Y": {
      "name": "piece-chariot",
      "colour": 2
    },
    "Z": {
      "name": "sphere-spiral",
      "colour": 2
    }
  },
  "pieces": "------XX\n------XX\n_\n----Z---\n---C----\n_\nAA------\nAA------"
}

Glyph markers

Embed legend glyphs directly on the board:

Example games: Majorities, Sentinel

Labels

Example games: Phutball, Emu Ranchers

{
  "options": [
    "hide-labels"
  ],
  "board": {
    "style": "squares",
    "width": 8,
    "height": 8,
    "tileWidth": 4,
    "tileHeight": 4,
    "tileSpacing": 1.25,
    "markers": [
      {
        "type": "label",
        "label": "Placed",
        "points": [
          {
            "col": 0,
            "row": 4
          },
          {
            "col": 4,
            "row": 4
          }
        ],
        "size": 15,
        "nudge": {
          "dx": 0,
          "dy": 0.1
        }
      },
      {
        "type": "label",
        "label": "Flipped",
        "points": [
          {
            "col": 4,
            "row": 4
          },
          {
            "col": 8,
            "row": 4
          }
        ],
        "size": 15,
        "nudge": {
          "dx": 1.25,
          "dy": 0.1
        }
      },
      {
        "type": "label",
        "label": "Scored",
        "points": [
          {
            "col": 0,
            "row": 5
          },
          {
            "col": 4,
            "row": 5
          }
        ],
        "size": 15,
        "nudge": {
          "dx": 0,
          "dy": -0.1
        }
      },
      {
        "type": "label",
        "label": "Current",
        "points": [
          {
            "col": 4,
            "row": 5
          },
          {
            "col": 8,
            "row": 5
          }
        ],
        "size": 15,
        "nudge": {
          "dx": 1.25,
          "dy": -0.1
        }
      }
    ]
  },
  "legend": {
    "B": {
      "name": "piece",
      "colour": "#000",
      "opacity": 0.5
    },
    "W": {
      "name": "piece",
      "colour": "#fff"
    }
  },
  "pieces": "WBWWWBWW\nBW--BW--\nWBBWWWBB\nWWBBWWWB\nWBWWWBWW\nBW--BW--\nWWBBWWBB\nWWWBWWWB\n",
  "areas": [
    {
      "type": "key",
      "position": "left",
      "height": 0.7,
      "list": [
        {
          "piece": "W",
          "name": "",
          "value": "w"
        },
        {
          "piece": "B",
          "name": "",
          "value": "b"
        }
      ],
      "clickable": true
    }
  ],
  "annotations": [
    {
      "type": "enter",
      "targets": [
        {
          "col": 2,
          "row": 2
        },
        {
          "col": 7,
          "row": 2
        },
        {
          "col": 6,
          "row": 3
        },
        {
          "col": 5,
          "row": 2
        }
      ]
    }
  ]
}