Dice images.

12 files changed, 112 insertions, 31 deletions

diff --git a/images/d4.1x.png b/images/d4.1x.png
new file mode 100644
index 0000000..f3c6b2d
--- /dev/null
+++ b/images/d4.1x.png
diff --git a/images/d4.2x.png b/images/d4.2x.png
new file mode 100644
index 0000000..2eada93
--- /dev/null
+++ b/images/d4.2x.png
diff --git a/images/d6.1x.png b/images/d6.1x.png
new file mode 100644
index 0000000..572d2d6
--- /dev/null
+++ b/images/d6.1x.png
diff --git a/images/d6.2x.png b/images/d6.2x.png
new file mode 100644
index 0000000..7dd00fd
--- /dev/null
+++ b/images/d6.2x.png
diff --git a/images/d8.1x.png b/images/d8.1x.png
new file mode 100644
index 0000000..ce8ff5b
--- /dev/null
+++ b/images/d8.1x.png
diff --git a/images/d8.2x.png b/images/d8.2x.png
new file mode 100644
index 0000000..4099f5d
--- /dev/null
+++ b/images/d8.2x.png
diff --git a/play.html b/play.html
index 47de302..e210d36 100644
--- a/play.html
+++ b/play.html
@@ -38,8 +38,8 @@ main {
 	background-color: slategray;
 }
 
-#role_Suffragist .role_name { background-color: var(--suf-85); }
-#role_Opposition .role_name { background-color: var(--opp-85); }
+#role_Suffragist { background-color: var(--suf-85); }
+#role_Opposition { background-color: var(--opp-85); }
 .role.active .role_name span { text-decoration: underline; }
 
 .role_vp { float: right; height: 24px; color: #000c; }
@@ -75,22 +75,36 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 	border-radius: 0px;
 	box-shadow: none;
 	border: none;
-	background-size: 100% 100%;
+	background-size: contain;
+	background-position: center;
 	background-repeat: no-repeat;
 }
 
-#log .die_d4 {
-	color: #4397D4;
-	font-weight: bold;
-}
-
-#log .die_d6 {
-	color: #DE5646;
-	font-weight: bold;
+#log .die_d4, #log .die_d6, #log .die_d8 {
+	display: inline-block;
+	vertical-align: -3px;
+	width: 15px;
+	height: 15px;
+	background-size: auto 15px;
 }
 
-#log .die_d8 {
-	font-weight: bold;
+#log .d1 { background-position: -0px 0px; }
+#log .d2 { background-position: -15px 0px; }
+#log .d3 { background-position: -30px 0px; }
+#log .d4 { background-position: -45px 0px; }
+#log .d5 { background-position: -60px 0px; }
+#log .d6 { background-position: -75px 0px; }
+#log .d7 { background-position: -90px 0px; }
+#log .d8 { background-position: -105px 0px; }
+
+#log .die_d4 { background-image: url(images/d4.1x.png); }
+#log .die_d6 { background-image: url(images/d6.1x.png); }
+#log .die_d8 { background-image: url(images/d8.1x.png); }
+
+@media (min-resolution: 97dpi) {
+#log .die_d4 { background-image: url(images/d4.2x.png); }
+#log .die_d6 { background-image: url(images/d6.2x.png); }
+#log .die_d8 { background-image: url(images/d8.2x.png); }
 }
 
 #log .purple_campaigner {
diff --git a/play.js b/play.js
index fa44fae..f31cf6d 100644
--- a/play.js
+++ b/play.js
@@ -499,24 +499,24 @@ function sub_us_state_name(_match, p1, _offset, _string) {
 }
 
 const ICONS = {
-	B1: '<span class="die_d4 d1">&#x2776;</span>',
-	B2: '<span class="die_d4 d2">&#x2777;</span>',
-	B3: '<span class="die_d4 d3">&#x2778;</span>',
-	B4: '<span class="die_d4 d4">&#x2779;</span>',
-	D1: '<span class="die_d6 d1">&#x2776;</span>',
-	D2: '<span class="die_d6 d2">&#x2777;</span>',
-	D3: '<span class="die_d6 d3">&#x2778;</span>',
-	D4: '<span class="die_d6 d4">&#x2779;</span>',
-	D5: '<span class="die_d6 d5">&#x277A;</span>',
-	D6: '<span class="die_d6 d6">&#x277B;</span>',
-	W1: '<span class="die_d8 d1">&#x2460;</span>',
-	W2: '<span class="die_d8 d2">&#x2461;</span>',
-	W3: '<span class="die_d8 d3">&#x2462;</span>',
-	W4: '<span class="die_d8 d4">&#x2463;</span>',
-	W5: '<span class="die_d8 d5">&#x2464;</span>',
-	W6: '<span class="die_d8 d6">&#x2465;</span>',
-	W7: '<span class="die_d8 d7">&#x2466;</span>',
-	W8: '<span class="die_d8 d8">&#x2467;</span>',
+	B1: '<span class="die_d4 d1"></span>',
+	B2: '<span class="die_d4 d2"></span>',
+	B3: '<span class="die_d4 d3"></span>',
+	B4: '<span class="die_d4 d4"></span>',
+	D1: '<span class="die_d6 d1"></span>',
+	D2: '<span class="die_d6 d2"></span>',
+	D3: '<span class="die_d6 d3"></span>',
+	D4: '<span class="die_d6 d4"></span>',
+	D5: '<span class="die_d6 d5"></span>',
+	D6: '<span class="die_d6 d6"></span>',
+	W1: '<span class="die_d8 d1"></span>',
+	W2: '<span class="die_d8 d2"></span>',
+	W3: '<span class="die_d8 d3"></span>',
+	W4: '<span class="die_d8 d4"></span>',
+	W5: '<span class="die_d8 d5"></span>',
+	W6: '<span class="die_d8 d6"></span>',
+	W7: '<span class="die_d8 d7"></span>',
+	W8: '<span class="die_d8 d8"></span>',
 	PR: '<span class="icon purple_campaigner"></span>',
 	YR: '<span class="icon yellow_campaigner"></span>',
 	RR: '<span class="icon red_campaigner"></span>',
diff --git a/tools/d4.svg b/tools/d4.svg
new file mode 100644
index 0000000..c54970d
--- /dev/null
+++ b/tools/d4.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="12">
+<defs>
+<path id="d4stroke" fill="#4397D4" stroke-linejoin="bevel" x-stroke="#000" d="M 0.5,6 3,1.5 9,1.5 11.5,6 9,10.5 3,10.5 Z" />
+<path id="d4" fill="#4397D4" d="M 0,6 3,1 9,1 12,6 9,11 3,11 Z" />
+</defs>
+<use xlink:href="#d4" x="0" y="0" />
+<use xlink:href="#d4" x="12" y="0" />
+<use xlink:href="#d4" x="24" y="0" />
+<use xlink:href="#d4" x="36" y="0" />
+<g font-size="7" fill="#FFF" font-family="B612 Mono" font-weight="bold" text-anchor="middle">
+<text x="6" y="8.5">1</text>
+<text x="18" y="8.5">2</text>
+<text x="30" y="8.5">3</text>
+<text x="42" y="8.5">4</text>
+</g>
+</svg>
diff --git a/tools/d6.svg b/tools/d6.svg
new file mode 100644
index 0000000..cc1dc9b
--- /dev/null
+++ b/tools/d6.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="12">
+<defs>
+<rect id="d6" fill="#DE5646" x="1" y="1" width="10" height="10" />
+</defs>
+<use xlink:href="#d6" x="0" y="0" />
+<use xlink:href="#d6" x="12" y="0" />
+<use xlink:href="#d6" x="24" y="0" />
+<use xlink:href="#d6" x="36" y="0" />
+<use xlink:href="#d6" x="48" y="0" />
+<use xlink:href="#d6" x="60" y="0" />
+<g font-size="7" fill="#fff" font-family="B612 Mono" font-weight="bold" text-anchor="middle">
+<text x="6" y="8.5">1</text>
+<text x="18" y="8.5">2</text>
+<text x="30" y="8.5">3</text>
+<text x="42" y="8.5">4</text>
+<text x="54" y="8.5">5</text>
+<text x="66" y="8.5">6</text>
+</g>
+</svg>
diff --git a/tools/d8.svg b/tools/d8.svg
new file mode 100644
index 0000000..2ced828
--- /dev/null
+++ b/tools/d8.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="12">
+<defs>
+<path id="d8" fill="#fff" stroke-width="0.6" stroke-linejoin="bevel" stroke="#222" d="M 6,.5 11.5,6 6,11.5 .5,6 Z" />
+</defs>
+<use xlink:href="#d8" x="0" y="0" />
+<use xlink:href="#d8" x="12" y="0" />
+<use xlink:href="#d8" x="24" y="0" />
+<use xlink:href="#d8" x="36" y="0" />
+<use xlink:href="#d8" x="48" y="0" />
+<use xlink:href="#d8" x="60" y="0" />
+<use xlink:href="#d8" x="72" y="0" />
+<use xlink:href="#d8" x="84" y="0" />
+<g font-size="7" fill="#000" font-family="B612 Mono" font-weight="bold" text-anchor="middle">
+<text x="6" y="8.5">1</text>
+<text x="18" y="8.5">2</text>
+<text x="30" y="8.5">3</text>
+<text x="42" y="8.5">4</text>
+<text x="54" y="8.5">5</text>
+<text x="66" y="8.5">6</text>
+<text x="78" y="8.5">7</text>
+<text x="90" y="8.5">8</text>
+</g>
+</svg>
diff --git a/tools/renderdice.sh b/tools/renderdice.sh
new file mode 100644
index 0000000..d2f91c4
--- /dev/null
+++ b/tools/renderdice.sh
@@ -0,0 +1,9 @@
+inkscape --export-dpi=1920 -o d4.png tools/d4.svg
+inkscape --export-dpi=1920 -o d6.png tools/d6.svg
+inkscape --export-dpi=1920 -o d8.png tools/d8.svg
+for F in d?.png
+do
+	convert -colorspace RGB -resize 6.25% -colorspace sRGB $F images/${F/.png/.1x.png}
+	convert -colorspace RGB -resize 12.5% -colorspace sRGB $F images/${F/.png/.2x.png}
+done
+rm d4.png d6.png d8.png