Board Generation

The SVG board generation pipeline produces static diagram images for all game families in moddable-rules. Nine board style providers cover chess, draughts, Go, Morris, Dungeon Chess, Royal Ur, Xiangqi, and Shogi.

Overview

The generator reads variant data from engine plugins, applies the correct board style, places pieces, and writes self-contained SVG files. These diagrams illustrate rulebook pages across multiple game families.

node scripts/generate-rules-boards.js

Board Styles

Each style is a provider module in js/svg-providers/ that defines geometry, rendering, and coordinate mapping.

Provider API

Every provider exports an object with these properties:

export const myProvider = {
  name: 'my-style',
  positionType: 'square',  // 'square' | 'intersection' | 'node'
  labelStyle: 'algebraic', // 'algebraic' | 'none'

  computeLayout({ rows, cols, tileSize, ...opts }) {
    // Return { boardW, boardH } — the inner dimensions
    return { boardW: cols * tileSize, boardH: rows * tileSize };
  },

  render(ctx) {
    // Return SVG markup string for the empty board
    // ctx: { rows, cols, tileSize, ox, oy, colors, boardW, boardH }
    return '<rect .../>';
  },

  // Optional: custom intersection coordinates
  getIntersection(row, col, ctx) {
    return { x: ctx.ox + col * ctx.tileSize,
             y: ctx.oy + row * ctx.tileSize };
  },
};

Position Types

Type	Description	Used By
square	Pieces placed at tile centres	Checkered, Mono-grid, Dungeon, Royal Ur, Shogi
intersection	Pieces placed at line crossings	Go, Xiangqi, Alquerque
node	Pieces placed at graph vertices	Morris

Piece Rendering

The renderer supports multiple piece systems. Chess pieces come from a central sprite sheet; other families use inline SVG shapes.

System	Source	Families
Chess (standard + 10 fairy types)	assets/pieces.svg → js/svg-pieces.js	All 74 chess variants
Draughts (men + kings)	Inline circles + crowns	8 draughts variants
Go (stones)	Inline filled circles	Go (9x9, 13x13, 19x19)
Xiangqi (traditional)	assets/pieces-xiangqi-trad.svg	Xiangqi
Xiangqi (western)	assets/pieces-xiangqi-west.svg	Xiangqi (alt)
Shogi (kanji)	assets/pieces-shogi.svg	Shogi family

Chess Piece Characters

Uppercase = White, lowercase = Black. The sprite sheet covers:

K Q R B N P (standard) · A C M S F G Y L H E (fairy)

A = Archbishop (B+N), C = Chancellor (R+N), M = Maharaja (Q+N), S = Sage, F = Fers, G = Guard, Y = Yurt, L = Lancer, H = Archer, E = Elephant (Alfil)

Adding a Board Style

1. Create js/svg-providers/my-style.js exporting a provider object
2. Register in js/svg-providers/index.js
3. Add a generation section in scripts/generate-rules-boards.js

See the scripts README for a full code template.

Adding a Piece Set

1. Create an SVG sprite sheet with <symbol id="piece-X"> elements on a 45x45 viewBox
2. Export piece characters to SVG markup in a JS module
3. Pass pieces via the position object when calling renderBoardSVG()

Architecture

scripts/generate-rules-boards.js  ← orchestration (variant discovery, output)
js/svg-renderer.js                ← core (layout, labels, piece overlay)
js/svg-providers/*.js             ← board geometry (9 providers)
js/svg-pieces.js                  ← chess glyph registry
assets/pieces.svg                 ← single source of truth for chess pieces

Data Flow

1. Generator reads variant plugins to extract FEN, dimensions, slug
2. Calls renderBoardSVG({ boardStyle, rows, cols, position })
3. Renderer delegates geometry to the matching provider
4. Provider draws tiles/lines/decorations
5. Renderer overlays pieces from position data
6. Self-contained SVG string written to moddable-rules/games/<family>/diagrams/svg/

Relationship to moddable-rules

moddable-chess owns the rendering code. moddable-rules consumes the SVG output. The generator is a build-time dependency only: moddable-rules has no runtime dependency on moddable-chess. Rulebooks reference diagrams via {{svg:filename.svg "caption"}} in markdown.