Merge branch 'develop'

src/renderers/_base.ts

@@ -4518,6 +4518,22 @@ export abstract class RendererBase {
                             .center(pt.x, pt.y)
                             .attr({ 'pointer-events': 'none' });
                     }
+                } else if ( (note.type !== undefined) && (note.type === "glyph")) {
+                    if ( (! ("targets" in note)) || ((note.targets as any[]).length < 1) ) {
+                        throw new Error(`At least one target must be given for glyph annotations.`);
+                    }
+                    const key = note.glyph as string;
+                    const piece = notes.root().findOne("#" + key) as Svg;
+                    if ( (piece === null) || (piece === undefined) ) {
+                        throw new Error(`Could not find the requested piece (${key}). The glyph *must* exist in the \`legend\`.`);
+                    }
+                    for (const pt of (note.targets as ITarget[])) {
+                        const point = grid[pt.row][pt.col];
+                        const use = usePieceAt(notes, piece, this.cellsize, point.x, point.y, 1);
+                        if (this.options.rotate && this.json.options && this.json.options.includes('rotate-pieces')) {
+                            rotate(use, this.options.rotate, point.x, point.y);
+                        }
+                    }
                 } else if ( (note.type !== undefined) && (note.type === "deltas") ) {
                     type Delta = {
                         row: number;

src/schemas/schema.d.ts

@@ -1054,7 +1054,7 @@ export interface APRenderRep {
         /**
          * The type of annotation. `move` draws an arrow between two cells. `eject` draws ever-growing arcs between a sequence of cells. `enter` and `exit` both draw a dotted line around cells. `dots` draws a small dot in the given cells. `outline` expects at least three points and draws a dotted line around the outer edge of the defined polygon.
          */
-        type: "move" | "eject" | "enter" | "exit" | "dots" | "outline";
+        type: "move" | "eject" | "enter" | "exit" | "dots" | "outline" | "glyph";
         /**
          * The cells involved in the annotation
          *
@@ -1091,6 +1091,10 @@ export interface APRenderRep {
          * Only meaningful for the `eject` annotation. If true, it won't keep expanding the area of each consecutive arc.
          */
         static?: boolean & string;
+        /**
+         * Only meaningful for the `glyph` annotation. Places a glyph from the legend at the requested points.
+         */
+        glyph?: string;
         [k: string]: unknown;
       }
     | {

src/schemas/schema.json

@@ -1805,7 +1805,8 @@
                                     "enter",
                                     "exit",
                                     "dots",
-                                    "outline"
+                                    "outline",
+                                    "glyph"
                                 ]
                             },
                             "targets": {
@@ -1863,6 +1864,10 @@
                                 "description": "Only meaningful for the `eject` annotation. If true, it won't keep expanding the area of each consecutive arc.",
                                 "type": "boolean",
                                 "default": "true"
+                            },
+                            "glyph": {
+                                "description": "Only meaningful for the `glyph` annotation. Places a glyph from the legend at the requested points.",
+                                "type": "string"
                             }
                         },
                         "required": ["type", "targets"]

test/playground.html

@@ -263,6 +263,11 @@
                     "description": "Annotations are the last things drawn and so overlay pieces. They are used to show changes in game state. In this case, it works like the dot marker but it shows up on top of pieces. It's a helpful way of showing movement range, for example. In this case, it's showing possible moves for the red piece at d7.",
                     "render": "{\"board\":{\"style\":\"squares-checkered\",\"width\":9,\"height\":9},\"legend\":{\"A\":{\"name\":\"piece\",\"player\":1},\"B\":{\"name\":\"piece\",\"player\":2},\"X\":{\"name\":\"piecepack-number-void\",\"colour\":\"#000\"}},\"pieces\":\"--BABA-A-\\nB-------B\\nA--ABA---\\nB-----B-B\\nA---X---A\\nBB--A----\\nA-----B-A\\nBB------B\\n--AA---A-\",\"annotations\":[{\"type\":\"dots\",\"targets\":[{\"row\":5,\"col\":3},{\"row\":5,\"col\":0},{\"row\":0,\"col\":1},{\"row\":4,\"col\":5}]},{\"type\":\"move\",\"targets\":[{\"row\":6,\"col\":2},{\"row\":7,\"col\":1}]}]}"
                 },
+                "notes-glyph": {
+                    "name": "Annotations: Glyphs",
+                    "description": "You can also use glyphs as annotations, which could consist of simple Unicode characters, like in this example, or full-blown composite pieces.",
+                    "render": "{\"board\":{\"style\":\"squares-checkered\",\"width\":9,\"height\":9},\"legend\":{\"A\":{\"name\":\"piece\",\"player\":1},\"B\":{\"name\":\"piece\",\"player\":2},\"X\":{\"name\":\"piecepack-number-void\",\"colour\":\"#000\"},\"note\":{\"text\":\"\\u2718\",\"scale\":0.5}},\"pieces\":\"--BABA-A-\\nB-------B\\nA--ABA---\\nB-----B-B\\nA---X---A\\nBB--A----\\nA-----B-A\\nBB------B\\n--AA---A-\",\"annotations\":[{\"type\":\"glyph\",\"glyph\":\"note\",\"targets\":[{\"row\":5,\"col\":3},{\"row\":5,\"col\":0},{\"row\":0,\"col\":1},{\"row\":4,\"col\":5}]},{\"type\":\"move\",\"targets\":[{\"row\":6,\"col\":2},{\"row\":7,\"col\":1}]}]}"
+                },
                 "blocking": {
                     "name": "Blocking cells",
                     "description": "Blocking cells lets you create boards of arbitrary shapes. In this case, the playing field is expanded by one layer, but some of those outer cells are \"blocked.\" This means both they they will not appear and they cannot be clicked on.",