From 27c14e98a769dddbbaeaa62b81d8f5ea22822dce Mon Sep 17 00:00:00 2001 From: "M. C. DeMarco" Date: Thu, 5 Jun 2025 11:10:39 -0400 Subject: [PATCH 1/2] Add die faces for cubeo variants and add dice to playground --- src/sheets/dice.ts | 111 +++++++++++++++++++++++++++++++++++++++++++ test/playground.html | 5 ++ 2 files changed, 116 insertions(+) diff --git a/src/sheets/dice.ts b/src/sheets/dice.ts index 8475928..56c30fe 100644 --- a/src/sheets/dice.ts +++ b/src/sheets/dice.ts @@ -155,6 +155,117 @@ sheet.glyphs.set("d6-6", (canvas: SVGContainer) => { return group; }); +sheet.glyphs.set("d6-7", (canvas: SVGContainer) => { + const group = canvas.symbol(); + group.rect(48, 48) + .radius(10, 10) + .fill("none") + .stroke({width: 1, color: "#000"}) + .attr("data-context-border", true) + .attr("data-playerfill", true) + .center(25, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 40); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 40); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(25, 25); + group.viewbox(0, 0, 50, 50); + return group; +}); + +sheet.glyphs.set("d6-8", (canvas: SVGContainer) => { + const group = canvas.symbol(); + group.rect(48, 48) + .radius(10, 10) + .fill("none") + .stroke({width: 1, color: "#000"}) + .attr("data-context-border", true) + .attr("data-playerfill", true) + .center(25, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 40); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 40); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(25, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(25, 40); + group.viewbox(0, 0, 50, 50); + return group; +}); + +sheet.glyphs.set("d6-9", (canvas: SVGContainer) => { + const group = canvas.symbol(); + group.rect(48, 48) + .radius(10, 10) + .fill("none") + .stroke({width: 1, color: "#000"}) + .attr("data-context-border", true) + .attr("data-playerfill", true) + .center(25, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 40); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 40); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(10, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(40, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(25, 10); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(25, 25); + group.circle(10).fill("#000") + .attr("data-context-fill", true) + .center(25, 40); + group.viewbox(0, 0, 50, 50); + return group; +}); + sheet.glyphs.set("d6-empty", (canvas: SVGContainer) => { const group = canvas.symbol(); group.rect(48, 48) diff --git a/test/playground.html b/test/playground.html index 6adca9b..18dbf4c 100644 --- a/test/playground.html +++ b/test/playground.html @@ -85,6 +85,11 @@ "description": "An example of the `stacking-offset` renderer", "render": "{\"renderer\":\"stacking-offset\",\"board\":{\"style\":\"vertex-cross\",\"width\":7,\"height\":7},\"legend\":{\"A\":{\"name\":\"piece\",\"colour\":1},\"B\":{\"name\":\"piece\",\"colour\":2}},\"pieces\":\"-,-,-,-,-,-,-\\n-,-,-,-,-,-,-\\n-,-,-,-,-,-,-\\n-,-,-,-,B,-,-\\n-,-,-,B,A,B,-\\n-,-,A,-,A,BA,B\\n-,-,-,-,-,ABA,-\"}" }, + "pieces-dice": { + "name": "Glyphs: Dice", + "description": "An example of dice.", + "render": "{\"board\":{\"style\":\"squares\",\"width\":5,\"height\":3,\"rowLabels\":[\"\",\"\",\"\"],\"columnLabels\":[\"\",\"\",\"\",\"\"],\"strokeColour\":{\"func\":\"flatten\",\"fg\":\"_context_strokes\",\"bg\":\"_context_background\",\"opacity\":0.15}},\"legend\":{\"A0\":{\"name\":\"d6-empty\",\"colour\":1,\"scale\":1.15},\"A1\":{\"name\":\"d6-1\",\"colour\":1,\"scale\":1.15},\"A2\":{\"name\":\"d6-2\",\"colour\":1,\"scale\":1.15},\"A3\":{\"name\":\"d6-3\",\"colour\":1,\"scale\":1.15},\"A4\":{\"name\":\"d6-4\",\"colour\":1,\"scale\":1.15},\"A5\":{\"name\":\"d6-5\",\"colour\":1,\"scale\":1.15},\"A6\":{\"name\":\"d6-6\",\"colour\":1,\"scale\":1.15},\"A7\":{\"name\":\"d6-7\",\"colour\":1,\"scale\":1.15},\"A8\":{\"name\":\"d6-8\",\"colour\":1,\"scale\":1.15},\"A9\":{\"name\":\"d6-9\",\"colour\":1,\"scale\":1.15},\"B0\":{\"name\":\"d6-empty\",\"colour\":2,\"scale\":1.15},\"B1\":{\"name\":\"d6-1\",\"colour\":2,\"scale\":1.15},\"B2\":{\"name\":\"d6-2\",\"colour\":2,\"scale\":1.15},\"B3\":{\"name\":\"d6-3\",\"colour\":2,\"scale\":1.15},\"B4\":{\"name\":\"d6-4\",\"colour\":2,\"scale\":1.15},\"B5\":{\"name\":\"d6-5\",\"colour\":2,\"scale\":1.15},\"B6\":{\"name\":\"d6-6\",\"colour\":2,\"scale\":1.15}},\"pieces\":\"A1,A2,-,A4,A7\\n-,A3,B1,-,A8,-\\n-,A5,A6,-,A9\"}" + }, "pieces-text": { "name": "Glyphs: Text", "description": "An example of glyphs created from arbitrary text. Note that in this case you set `orientation` to `vertical` so that, even if rotated, the text is still legible.", From dfc423b1afdaf1f69842e2228e69703ce8d4b3fa Mon Sep 17 00:00:00 2001 From: "M. C. DeMarco" Date: Thu, 5 Jun 2025 17:03:53 -0400 Subject: [PATCH 2/2] Extend d6 to 12 for cubeo variants --- src/sheets/dice.ts | 138 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) diff --git a/src/sheets/dice.ts b/src/sheets/dice.ts index 56c30fe..24b2f6c 100644 --- a/src/sheets/dice.ts +++ b/src/sheets/dice.ts @@ -30,6 +30,144 @@ sheet.glyphs.set("d6-1", (canvas: SVGContainer) => { return group; }); +sheet.glyphs.set("d6-10", (canvas: SVGContainer) => { + const group = canvas.symbol(); + group.rect(48, 48) + .radius(10, 10) + .fill("none") + .stroke({width: 1, color: "#000"}) + .attr("data-context-border", true) + .attr("data-playerfill", true) + .center(25, 25); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 40); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 40); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 40); + group.viewbox(0, 0, 50, 50); + return group; +}); + +sheet.glyphs.set("d6-11", (canvas: SVGContainer) => { + const group = canvas.symbol(); + group.rect(48, 48) + .radius(10, 10) + .fill("none") + .stroke({width: 1, color: "#000"}) + .attr("data-context-border", true) + .attr("data-playerfill", true) + .center(25, 25); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 40); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 40); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 25); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 40); + group.viewbox(0, 0, 50, 50); + return group; +}); + +sheet.glyphs.set("d6-12", (canvas: SVGContainer) => { + const group = canvas.symbol(); + group.rect(48, 48) + .radius(10, 10) + .fill("none") + .stroke({width: 1, color: "#000"}) + .attr("data-context-border", true) + .attr("data-playerfill", true) + .center(25, 25); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 40); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 40); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(10, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(40, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 10); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 20); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 30); + group.circle(8).fill("#000") + .attr("data-context-fill", true) + .center(25, 40); + group.viewbox(0, 0, 50, 50); + return group; +}); + sheet.glyphs.set("d6-2", (canvas: SVGContainer) => { const group = canvas.symbol(); group.rect(48, 48)