Piece Sets

SVG piece artwork organised into sets by game family. 112 sets, recolorable, composable via extends and virtual manifests.

Overview

Piece sets live in pieces/sets/. Each set is a directory of SVG files plus an entry in pieces/gallery-index.json. The engine resolves piece references from frontmatter to SVG paths at render time.

Frontmatter usage

pieces:
  set: mce-chess              # set ID from gallery-index.json
  borders:                    # optional owner-coloured disc backgrounds
    white: "#1565c0"
    black: "#c62828"
  vocabulary:                 # custom FEN char → piece type mapping
    O: { type: stone, color: white }
    X: { type: stone, color: black }
  fenMap:                     # override default FEN char → piece ID
    G: wG
    g: bG

Gallery manifest

Each entry in pieces/gallery-index.json:

{
  "id": "mce-chess",
  "name": "MCE Chess",
  "family": "chess",
  "author": "Moddable Games",
  "license": "CC BY-SA 4.0",
  "playable": true,
  "pieces": {
    "wK": "wK.svg",
    "wQ": "wQ.svg",
    "bK": "bK.svg",
    ...
  }
}

Keys in pieces are piece IDs (matched by FEN mapping). Values are filenames relative to pieces/sets/{id}/.

Virtual sets

Virtual sets compose pieces from multiple sources without duplicating SVG files:

{
  "id": "mce-4player",
  "virtual": true,
  "extends": "mce-chess",
  "baseSet": "mce-chess",
  "recolorable": true,
  "recolourMatch": "#fff",
  "owners": {
    "red": { "fill": "#e53935" },
    "blue": { "fill": "#1e88e5" },
    "yellow": { "fill": "#fdd835" },
    "green": { "fill": "#43a047" }
  },
  "pieces": {
    "rK": "wK.svg",
    "bK": "wK.svg",
    ...
  }
}

At render time, the white fill in the base SVG is replaced with the owner colour.

Surface rendering

Some games (go, draughts, dou shou qi) render pieces on coloured disc backgrounds. This is controlled by the surface field on the set:

{
  "id": "playstrategy-go-classic",
  "surface": {
    "type": "disc",
    "owners": {
      "white": { "fill": "#f5f5f5", "stroke": "#333" },
      "black": { "fill": "#1c1c1c", "stroke": "#666" }
    }
  }
}

Individual pieces can also declare surface rendering via the surface property in the pieces map.

Adding a new set

1. Create pieces/sets/my-set/ directory
2. Add SVG files (one per piece, named by piece ID)
3. Add an entry to pieces/gallery-index.json
4. Reference with pieces.set: my-set in frontmatter