Add 'spacing' option to pieces area

Author: Perlkonig

src/renderers/_base.ts

@@ -8342,6 +8342,10 @@ export abstract class RendererBase {
             let placeY = boardBottom + padding;
             for (let iArea = 0; iArea < areas.length; iArea++) {
                 const area = areas[iArea];
+                let hpad = 0;
+                if (area.spacing !== undefined) {
+                    hpad = this.cellsize * area.spacing;
+                }
                 const numPieces = area.pieces.length;
                 let desiredWidth = boardWidth;
                 if (area.width !== undefined) {
@@ -8350,7 +8354,7 @@ export abstract class RendererBase {
                 const numRows = Math.ceil(numPieces / desiredWidth);
                 const textHeight = this.cellsize / 3; // 10; // the allowance for the label
                 const cellsize = this.cellsize * 0.75;
-                const areaWidth = cellsize * desiredWidth;
+                const areaWidth = (cellsize * desiredWidth) + (hpad * (desiredWidth-1));
                 const areaHeight = (textHeight * 2) + (cellsize * numRows);
                 let markWidth = 0;
                 let markColour: string|undefined;
@@ -8374,8 +8378,8 @@ export abstract class RendererBase {
                     if ( (piece === null) || (piece === undefined) ) {
                         throw new Error(`Could not find the requested piece (${p}). Each piece in the stack *must* exist in the \`legend\`.`);
                     }
-                    const newx = col * cellsize + cellsize / 2;
-                    const newy = (textHeight * 2) + (row * cellsize) + cellsize / 2;
+                    const newx = (col * (cellsize + hpad)) + (cellsize / 2);
+                    const newy = (textHeight * 2) + (row * cellsize) + (cellsize / 2);
                     const use = usePieceAt({svg: nested, piece, cellsize, x: newx, y: newy, scalingFactor: 1});
                     if (this.options.boardClick !== undefined) {
                         use.click((e: Event) => {this.options.boardClick!(-1, -1, p); e.stopPropagation();});

src/schemas/schema.d.ts

@@ -1091,6 +1091,10 @@ export interface AreaPieces {
    * Optional. Places a coloured bar to the left of the area, used to indicate ownership.
    */
   ownerMark?: PositiveInteger | Colourfuncs | Colourstrings;
+  /**
+   * With some piece types, you need extra space between them. Expressed as a percentage of cell size, this will insert some padding between pieces.
+   */
+  spacing?: number;
 }
 /**
  * This is a special area currently only used for the DVGC games and incorporates a `pieces`-style area into the game board itself. It is currently only designed for two-player use with 180 degree rotation. The area is clickable, as are the pieces within. You must tell the renderer which area belongs to which player.

src/schemas/schema.json

@@ -703,6 +703,10 @@
                         {"$ref": "#/$defs/colourfuncs"},
                         {"$ref": "#/$defs/colourstrings"}
                     ]
+                },
+                "spacing": {
+                    "description": "With some piece types, you need extra space between them. Expressed as a percentage of cell size, this will insert some padding between pieces.",
+                    "type": "number"
                 }
             },
             "required": ["type", "pieces", "label"],