Skip to content

Commit 3ad5044

Browse files
mcdemarcomcdemarco
authored
Die sheet support for Cubeo dice variants (#27)
* Add die faces for cubeo variants and add dice to playground * Extend d6 to 12 for cubeo variants
1 parent 1e98605 commit 3ad5044

File tree

2 files changed

+254
-0
lines changed

2 files changed

+254
-0
lines changed

‎src/sheets/dice.ts‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,144 @@ sheet.glyphs.set("d6-1", (canvas: SVGContainer) => {
3030
return group;
3131
});
3232

33+
sheet.glyphs.set("d6-10", (canvas: SVGContainer) => {
34+
const group = canvas.symbol();
35+
group.rect(48, 48)
36+
.radius(10, 10)
37+
.fill("none")
38+
.stroke({width: 1, color: "#000"})
39+
.attr("data-context-border", true)
40+
.attr("data-playerfill", true)
41+
.center(25, 25);
42+
group.circle(8).fill("#000")
43+
.attr("data-context-fill", true)
44+
.center(10, 10);
45+
group.circle(8).fill("#000")
46+
.attr("data-context-fill", true)
47+
.center(40, 40);
48+
group.circle(8).fill("#000")
49+
.attr("data-context-fill", true)
50+
.center(40, 10);
51+
group.circle(8).fill("#000")
52+
.attr("data-context-fill", true)
53+
.center(10, 40);
54+
group.circle(8).fill("#000")
55+
.attr("data-context-fill", true)
56+
.center(10, 20);
57+
group.circle(8).fill("#000")
58+
.attr("data-context-fill", true)
59+
.center(10, 30);
60+
group.circle(8).fill("#000")
61+
.attr("data-context-fill", true)
62+
.center(40, 20);
63+
group.circle(8).fill("#000")
64+
.attr("data-context-fill", true)
65+
.center(40, 30);
66+
group.circle(8).fill("#000")
67+
.attr("data-context-fill", true)
68+
.center(25, 10);
69+
group.circle(8).fill("#000")
70+
.attr("data-context-fill", true)
71+
.center(25, 40);
72+
group.viewbox(0, 0, 50, 50);
73+
return group;
74+
});
75+
76+
sheet.glyphs.set("d6-11", (canvas: SVGContainer) => {
77+
const group = canvas.symbol();
78+
group.rect(48, 48)
79+
.radius(10, 10)
80+
.fill("none")
81+
.stroke({width: 1, color: "#000"})
82+
.attr("data-context-border", true)
83+
.attr("data-playerfill", true)
84+
.center(25, 25);
85+
group.circle(8).fill("#000")
86+
.attr("data-context-fill", true)
87+
.center(10, 10);
88+
group.circle(8).fill("#000")
89+
.attr("data-context-fill", true)
90+
.center(40, 40);
91+
group.circle(8).fill("#000")
92+
.attr("data-context-fill", true)
93+
.center(40, 10);
94+
group.circle(8).fill("#000")
95+
.attr("data-context-fill", true)
96+
.center(10, 40);
97+
group.circle(8).fill("#000")
98+
.attr("data-context-fill", true)
99+
.center(10, 20);
100+
group.circle(8).fill("#000")
101+
.attr("data-context-fill", true)
102+
.center(10, 30);
103+
group.circle(8).fill("#000")
104+
.attr("data-context-fill", true)
105+
.center(40, 20);
106+
group.circle(8).fill("#000")
107+
.attr("data-context-fill", true)
108+
.center(40, 30);
109+
group.circle(8).fill("#000")
110+
.attr("data-context-fill", true)
111+
.center(25, 10);
112+
group.circle(8).fill("#000")
113+
.attr("data-context-fill", true)
114+
.center(25, 25);
115+
group.circle(8).fill("#000")
116+
.attr("data-context-fill", true)
117+
.center(25, 40);
118+
group.viewbox(0, 0, 50, 50);
119+
return group;
120+
});
121+
122+
sheet.glyphs.set("d6-12", (canvas: SVGContainer) => {
123+
const group = canvas.symbol();
124+
group.rect(48, 48)
125+
.radius(10, 10)
126+
.fill("none")
127+
.stroke({width: 1, color: "#000"})
128+
.attr("data-context-border", true)
129+
.attr("data-playerfill", true)
130+
.center(25, 25);
131+
group.circle(8).fill("#000")
132+
.attr("data-context-fill", true)
133+
.center(10, 10);
134+
group.circle(8).fill("#000")
135+
.attr("data-context-fill", true)
136+
.center(40, 40);
137+
group.circle(8).fill("#000")
138+
.attr("data-context-fill", true)
139+
.center(40, 10);
140+
group.circle(8).fill("#000")
141+
.attr("data-context-fill", true)
142+
.center(10, 40);
143+
group.circle(8).fill("#000")
144+
.attr("data-context-fill", true)
145+
.center(10, 20);
146+
group.circle(8).fill("#000")
147+
.attr("data-context-fill", true)
148+
.center(10, 30);
149+
group.circle(8).fill("#000")
150+
.attr("data-context-fill", true)
151+
.center(40, 20);
152+
group.circle(8).fill("#000")
153+
.attr("data-context-fill", true)
154+
.center(40, 30);
155+
group.circle(8).fill("#000")
156+
.attr("data-context-fill", true)
157+
.center(25, 10);
158+
group.circle(8).fill("#000")
159+
.attr("data-context-fill", true)
160+
.center(25, 20);
161+
group.circle(8).fill("#000")
162+
.attr("data-context-fill", true)
163+
.center(25, 30);
164+
group.circle(8).fill("#000")
165+
.attr("data-context-fill", true)
166+
.center(25, 40);
167+
group.viewbox(0, 0, 50, 50);
168+
return group;
169+
});
170+
33171
sheet.glyphs.set("d6-2", (canvas: SVGContainer) => {
34172
const group = canvas.symbol();
35173
group.rect(48, 48)
@@ -155,6 +293,117 @@ sheet.glyphs.set("d6-6", (canvas: SVGContainer) => {
155293
return group;
156294
});
157295

296+
sheet.glyphs.set("d6-7", (canvas: SVGContainer) => {
297+
const group = canvas.symbol();
298+
group.rect(48, 48)
299+
.radius(10, 10)
300+
.fill("none")
301+
.stroke({width: 1, color: "#000"})
302+
.attr("data-context-border", true)
303+
.attr("data-playerfill", true)
304+
.center(25, 25);
305+
group.circle(10).fill("#000")
306+
.attr("data-context-fill", true)
307+
.center(10, 10);
308+
group.circle(10).fill("#000")
309+
.attr("data-context-fill", true)
310+
.center(40, 40);
311+
group.circle(10).fill("#000")
312+
.attr("data-context-fill", true)
313+
.center(40, 10);
314+
group.circle(10).fill("#000")
315+
.attr("data-context-fill", true)
316+
.center(10, 40);
317+
group.circle(10).fill("#000")
318+
.attr("data-context-fill", true)
319+
.center(10, 25);
320+
group.circle(10).fill("#000")
321+
.attr("data-context-fill", true)
322+
.center(40, 25);
323+
group.circle(10).fill("#000")
324+
.attr("data-context-fill", true)
325+
.center(25, 25);
326+
group.viewbox(0, 0, 50, 50);
327+
return group;
328+
});
329+
330+
sheet.glyphs.set("d6-8", (canvas: SVGContainer) => {
331+
const group = canvas.symbol();
332+
group.rect(48, 48)
333+
.radius(10, 10)
334+
.fill("none")
335+
.stroke({width: 1, color: "#000"})
336+
.attr("data-context-border", true)
337+
.attr("data-playerfill", true)
338+
.center(25, 25);
339+
group.circle(10).fill("#000")
340+
.attr("data-context-fill", true)
341+
.center(10, 10);
342+
group.circle(10).fill("#000")
343+
.attr("data-context-fill", true)
344+
.center(40, 40);
345+
group.circle(10).fill("#000")
346+
.attr("data-context-fill", true)
347+
.center(40, 10);
348+
group.circle(10).fill("#000")
349+
.attr("data-context-fill", true)
350+
.center(10, 40);
351+
group.circle(10).fill("#000")
352+
.attr("data-context-fill", true)
353+
.center(10, 25);
354+
group.circle(10).fill("#000")
355+
.attr("data-context-fill", true)
356+
.center(40, 25);
357+
group.circle(10).fill("#000")
358+
.attr("data-context-fill", true)
359+
.center(25, 10);
360+
group.circle(10).fill("#000")
361+
.attr("data-context-fill", true)
362+
.center(25, 40);
363+
group.viewbox(0, 0, 50, 50);
364+
return group;
365+
});
366+
367+
sheet.glyphs.set("d6-9", (canvas: SVGContainer) => {
368+
const group = canvas.symbol();
369+
group.rect(48, 48)
370+
.radius(10, 10)
371+
.fill("none")
372+
.stroke({width: 1, color: "#000"})
373+
.attr("data-context-border", true)
374+
.attr("data-playerfill", true)
375+
.center(25, 25);
376+
group.circle(10).fill("#000")
377+
.attr("data-context-fill", true)
378+
.center(10, 10);
379+
group.circle(10).fill("#000")
380+
.attr("data-context-fill", true)
381+
.center(40, 40);
382+
group.circle(10).fill("#000")
383+
.attr("data-context-fill", true)
384+
.center(40, 10);
385+
group.circle(10).fill("#000")
386+
.attr("data-context-fill", true)
387+
.center(10, 40);
388+
group.circle(10).fill("#000")
389+
.attr("data-context-fill", true)
390+
.center(10, 25);
391+
group.circle(10).fill("#000")
392+
.attr("data-context-fill", true)
393+
.center(40, 25);
394+
group.circle(10).fill("#000")
395+
.attr("data-context-fill", true)
396+
.center(25, 10);
397+
group.circle(10).fill("#000")
398+
.attr("data-context-fill", true)
399+
.center(25, 25);
400+
group.circle(10).fill("#000")
401+
.attr("data-context-fill", true)
402+
.center(25, 40);
403+
group.viewbox(0, 0, 50, 50);
404+
return group;
405+
});
406+
158407
sheet.glyphs.set("d6-empty", (canvas: SVGContainer) => {
159408
const group = canvas.symbol();
160409
group.rect(48, 48)

‎test/playground.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@
8585
"description": "An example of the `stacking-offset` renderer",
8686
"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,-\"}"
8787
},
88+
"pieces-dice": {
89+
"name": "Glyphs: Dice",
90+
"description": "An example of dice.",
91+
"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\"}"
92+
},
8893
"pieces-text": {
8994
"name": "Glyphs: Text",
9095
"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.",

0 commit comments

Comments
 (0)