Tweaked ids and classes ready for live testing

AbstractPlay · Dec 30, 2023 · 3a106f5 · 3a106f5
1 parent ac5af95
commit 3a106f5
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,8 +28,11 @@
     ],
     "dependencies": {
         "@svgdotjs/svg.js": "^3.1.2",
+        "@types/fnv-plus": "^1.3.2",
         "ajv": "^8.12.0",
+        "fnv-plus": "^1.3.1",
         "honeycomb-grid": "4.1.1",
+        "json-stringify-deterministic": "^1.0.12",
         "uuid": "^9.0.0"
     },
     "devDependencies": {

diff --git a/src/common/glyph2uid.ts b/src/common/glyph2uid.ts
@@ -0,0 +1,21 @@
+import fnv from "fnv-plus";
+import stringify from "json-stringify-deterministic";
+import { Glyph } from "../schemas/schema";
+
+export const glyph2uid = (g: Glyph): string => {
+    const parts: string[] = ["aprender", "glyph"];
+
+    fnv.seed("aprender");
+    const hash = fnv.hash(stringify(g));
+    parts.push(hash.hex());
+
+    return parts.join("-");
+}
+
+export const x2uid = (x: any): string => {
+    fnv.seed("aprender");
+    const hash = fnv.hash(stringify(x));
+    return hash.hex();
+}
+
+export default glyph2uid;
diff --git a/src/renderers/_base.ts b/src/renderers/_base.ts
diff --git a/src/renderers/freespace.ts b/src/renderers/freespace.ts
@@ -3,6 +3,7 @@ import { APRenderRep } from "../schemas/schema";
 import { IRendererOptionsIn, RendererBase, IKey } from "./_base";
 import { IPoint } from "../grids/_base";
 import { rotate, usePieceAt } from "../common/plotting";
+import { x2uid} from "../common/glyph2uid";
 
 export interface IPiecesArea {
     type: "pieces";
@@ -81,7 +82,7 @@ export class FreespaceRenderer extends RendererBase {
 
         // clickable background field
         const field = this.rootSvg.nested().id("pieces").viewbox(ox - borderBuffer, oy - borderBuffer, width + (borderBuffer*2), height + (borderBuffer*2)).move(ox, oy);
-        field.rect(width, height).move(ox, oy).fill(backFill).back();
+        field.rect(width, height).id("aprender-backfill").move(ox, oy).fill(backFill).back();
         if (this.options.boardClick !== undefined) {
             const originX = field.x() as number;
             const originY = field.y() as number;
@@ -194,7 +195,7 @@ export class FreespaceRenderer extends RendererBase {
                     if ( ("dashed" in note) && (note.dashed !== undefined) && (Array.isArray(note.dashed)) && (note.dashed.length > 0) ) {
                         strokeData.dasharray = (note.dashed).join(" ");
                     }
-                    notes.path(note.path as string).stroke(strokeData).fill({color: fill, opacity: fillOpacity});
+                    notes.path(note.path as string).addClass(`aprender-annotation-${x2uid(note)}`).stroke(strokeData).fill({color: fill, opacity: fillOpacity});
                 } else if (note.type === "glyph") {
                     const key = note.glyph as string;
                     const piece = field.root().findOne("#" + key) as Svg;
@@ -243,6 +244,7 @@ export class FreespaceRenderer extends RendererBase {
                     const [{x: x1, y: y1}, {x: x2, y: y2}] = marker.points
 
                     const text = field.text(marker.label)
+                        .addClass(`aprender-marker-${x2uid(marker)}`)
                         .font({size: fontsize, fill: colour, anchor: "middle"})
                         .attr("alignment-baseline", "hanging")
                         .attr("dominant-baseline", "hanging")
@@ -304,7 +306,7 @@ export class FreespaceRenderer extends RendererBase {
                     if ( ("dashed" in marker) && (marker.dashed !== undefined) && (Array.isArray(marker.dashed)) && (marker.dashed.length > 0) ) {
                         strokeData.dasharray = (marker.dashed).join(" ");
                     }
-                    field.path(marker.path).stroke(strokeData).fill({color: fill, opacity: fillOpacity});
+                    field.path(marker.path).addClass(`aprender-marker-${x2uid(marker)}`).stroke(strokeData).fill({color: fill, opacity: fillOpacity});
                 }
             }
         }

diff --git a/src/renderers/stackingTiles.ts b/src/renderers/stackingTiles.ts
@@ -115,6 +115,7 @@ export class StackingTilesRenderer extends RendererBase {
                                 if (idx > 0) {
                                     const color = this.options.colours[idx - 1];
                                     const tile = group.rect(tileWidth, tileHeight)
+                                        .addClass(`aprender-tile-${idx}`)
                                         .move(x, y)
                                         .fill(color)
                                         .stroke({width: tileHeight * 0.2, color: "#fff"});
@@ -124,6 +125,7 @@ export class StackingTilesRenderer extends RendererBase {
                                 // overflow piece (there should only be one)
                                 } else {
                                     group.line(x, y + (tileHeight / 2), x + tileWidth, y + (tileHeight / 2))
+                                        .addClass("aprender-tile-overflow")
                                         .fill("#000")
                                         .stroke({width: tileHeight, color: "#000", dasharray: "4"});
                                 }

diff --git a/src/schemas/schema.d.ts b/src/schemas/schema.d.ts
@@ -343,7 +343,7 @@ export interface APRenderRep {
               /**
                * The colour of the shaded area. Can be either a number (which will be interpreted as a built-in player colour) or a hexadecimal colour string.
                */
-              colour?: PositiveInteger | Colourstrings;
+              colour: PositiveInteger | Colourstrings;
               /**
                * 1 is fully opaque. 0 is fully transparent.
                */

diff --git a/src/schemas/schema.json b/src/schemas/schema.json
@@ -530,7 +530,7 @@
                                                 "default": 0.25
                                             }
                                         },
-                                        "required": ["type", "points"],
+                                        "required": ["type", "points", "colour"],
                                         "additionalProperties": false
                                     },
                                     {

diff --git a/test/playground.html b/test/playground.html
@@ -186,7 +186,7 @@
                 "markers-outline": {
                     "name": "Markers: Outlines",
                     "description": "Only works for boards composed of polygons and not just lines (most commonly hex fields). Highlights the cell with the given colour.",
-                    "render": `{"renderer":"sowing-numerals","board":{"style":"sowing","width":9,"height":2,"showEndPits":true,"markers":[{"type":"edge","edge":"N","colour":2},{"type":"edge","edge":"S","colour":1},{"type":"outline","colour":1,"points":[{"row":2,"col":1}]},{"type":"outline","colour":2,"points":[{"row":2,"col":0}]}]},"pieces":"9,9,9,9,9,9,9,9,9\\n9,9,9,9,9,9,9,9,9\\n0,0"`,
+                    "render": `{"renderer":"sowing-numerals","board":{"style":"sowing","width":9,"height":2,"showEndPits":true,"markers":[{"type":"edge","edge":"N","colour":2},{"type":"edge","edge":"S","colour":1},{"type":"outline","colour":1,"points":[{"row":2,"col":1}]},{"type":"outline","colour":2,"points":[{"row":2,"col":0}]}]},"pieces":"9,9,9,9,9,9,9,9,9\\n9,9,9,9,9,9,9,9,9\\n0,0"}`,
                 },
                 "markers-lines": {
                     "name": "Markers: Lines",