d4, d6, d8 rendering

4 files changed, 23 insertions, 114 deletions

diff --git a/images/die_black_pips.svg b/images/die_black_pips.svg
deleted file mode 100644
index d641f28..0000000
--- a/images/die_black_pips.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="336" height="56">
-<g fill="black">
-<g transform="translate(0 0)">
-<circle r="6" cx="28" cy="28"/>
-</g>
-<g transform="translate(56 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="44" cy="44"/>
-</g>
-<g transform="translate(112 0)">
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="28" cy="28"/>
-</g>
-<g transform="translate(168 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="44" cy="44"/>
-</g>
-<g transform="translate(224 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="44" cy="44"/>
-<circle r="6" cx="28" cy="28"/>
-</g>
-<g transform="translate(280 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="12" cy="28"/>
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="44" cy="28"/>
-<circle r="6" cx="44" cy="44"/>
-</g>
-</g>
-</svg>
diff --git a/images/die_white_pips.svg b/images/die_white_pips.svg
deleted file mode 100644
index efc864b..0000000
--- a/images/die_white_pips.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="336" height="56">
-<g fill="white">
-<g transform="translate(0 0)">
-<circle r="6" cx="28" cy="28"/>
-</g>
-<g transform="translate(56 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="44" cy="44"/>
-</g>
-<g transform="translate(112 0)">
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="28" cy="28"/>
-</g>
-<g transform="translate(168 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="44" cy="44"/>
-</g>
-<g transform="translate(224 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="44" cy="44"/>
-<circle r="6" cx="28" cy="28"/>
-</g>
-<g transform="translate(280 0)">
-<circle r="6" cx="12" cy="12"/>
-<circle r="6" cx="12" cy="28"/>
-<circle r="6" cx="12" cy="44"/>
-<circle r="6" cx="44" cy="12"/>
-<circle r="6" cx="44" cy="28"/>
-<circle r="6" cx="44" cy="44"/>
-</g>
-</g>
-</svg>
diff --git a/play.html b/play.html
index 347a8a6..b039fd0 100644
--- a/play.html
+++ b/play.html
@@ -69,34 +69,19 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 }
 
 #log .die_d4 {
-	background-image: url(images/die_white_pips.svg);
-	background-size: 600% 100%;
-	background-color: #4397D4;
-	border: 1px solid #222;
+	color: #4397D4;
+	font-weight: bold;
 }
 
 #log .die_d6 {
-	background-image: url(images/die_white_pips.svg);
-	background-size: 600% 100%;
-	background-color: #DE5646;
-	border: 1px solid #222;
+	color: #DE5646;
+	font-weight: bold;
 }
 
 #log .die_d8 {
-	background-image: url(images/die_black_pips.svg);
-	background-size: 600% 100%;
-	background-color: white;
-	border: 1px solid #222;
+	font-weight: bold;
 }
 
-.d0 { background-position: -100% 0 }
-.d1 { background-position: 0% 0; }
-.d2 { background-position: 20% 0; }
-.d3 { background-position: 40% 0; }
-.d4 { background-position: 60% 0; }
-.d5 { background-position: 80% 0; }
-.d6 { background-position: 100% 0; }
-
 #log .purple_campaigner {
 	background-image: url(images/icon_purple_campaigner.png);
 }
diff --git a/play.js b/play.js
index b2e3449..48d5a34 100644
--- a/play.js
+++ b/play.js
@@ -523,27 +523,25 @@ function sub_us_state_name(_match, p1, _offset, _string) {
 	return `<span class="tip" onmouseenter="on_focus_us_state_tip(${s})" onmouseleave="on_blur_us_state_tip(${s})" onclick="on_click_us_state_tip(${s})">${n}</span>`
 }
 
-// TODO blue d4, red d6, white d8
-
 const ICONS = {
-	B1: '<span class="icon die_d4 d1"></span>',
-	B2: '<span class="icon die_d4 d2"></span>',
-	B3: '<span class="icon die_d4 d3"></span>',
-	B4: '<span class="icon die_d4 d4"></span>',
-	D1: '<span class="icon die_d6 d1"></span>',
-	D2: '<span class="icon die_d6 d2"></span>',
-	D3: '<span class="icon die_d6 d3"></span>',
-	D4: '<span class="icon die_d6 d4"></span>',
-	D5: '<span class="icon die_d6 d5"></span>',
-	D6: '<span class="icon die_d6 d6"></span>',
-	W1: '<span class="icon die_d8 d1"></span>',
-	W2: '<span class="icon die_d8 d2"></span>',
-	W3: '<span class="icon die_d8 d3"></span>',
-	W4: '<span class="icon die_d8 d4"></span>',
-	W5: '<span class="icon die_d8 d5"></span>',
-	W6: '<span class="icon die_d8 d6"></span>',
-	// W7: '<span class="icon die_d8 d7"></span>',
-	// W8: '<span class="icon die_d8 d8"></span>',
+	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>',
 	PR: '<span class="icon purple_campaigner"></span>',
 	YR: '<span class="icon yellow_campaigner"></span>',
 	RR: '<span class="icon red_campaigner"></span>',