icons in log

5 files changed, 208 insertions, 16 deletions

diff --git a/images/die_black_pips.svg b/images/die_black_pips.svg
new file mode 100644
index 0000000..d641f28
--- /dev/null
+++ b/images/die_black_pips.svg
@@ -0,0 +1,37 @@
+<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
new file mode 100644
index 0000000..efc864b
--- /dev/null
+++ b/images/die_white_pips.svg
@@ -0,0 +1,37 @@
+<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 9e7ce2f..ddf77e4 100644
--- a/play.html
+++ b/play.html
@@ -59,6 +59,84 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 #log > .p { padding-left: 20px; text-align: right; font-style: italic; opacity: 75%; }
 #log > .i { padding-left: 20px; }
 
+#log .icon {
+	display: inline-block;
+	vertical-align: -2px;
+	width: 12px;
+	height: 12px;
+	border-radius: 0px;
+	box-shadow: none;
+	border: none;
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+}
+
+#log .white {
+	background-image: url(images/die_black_pips.svg);
+	background-size: 600% 100%;
+	background-color: #fff;
+	border: 1px solid #444;
+}
+
+#log .black {
+	background-image: url(images/die_white_pips.svg);
+	background-size: 600% 100%;
+	background-color: #666;
+	border: 1px solid #222;
+}
+
+.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);
+}
+
+#log .yellow_campaigner {
+	background-image: url(images/icon_yellow_campaigner.png);
+}
+
+#log .red_campaigner {
+	background-image: url(images/icon_opposition_campaigner.png);
+}
+
+#log .purple_cube {
+	background-image: url(images/icon_purple_cube.png);
+}
+
+#log .yellow_cube {
+	background-image: url(images/icon_yellow_cube.png);
+}
+
+#log .purple_or_yellow_cube {
+	background-image: url(images/icon_purple_or_yellow_cube.png);
+}
+
+#log .red_cube {
+	background-image: url(images/icon_opposition_cube.png);
+}
+
+#log .button {
+	background-image: url(images/icon_button.png);
+}
+
+#log .congressional_marker {
+	background-image: url(images/icon_congressional_marker.png);
+}
+
+#log .green_check {
+	background-image: url(images/icon_green_check.png);
+}
+
+#log .red_x {
+	background-image: url(images/icon_red_x.png);
+}
+
 /* PANELS */
 
 .panel_grid {
diff --git a/play.js b/play.js
index f4a1aa4..9878400 100644
--- a/play.js
+++ b/play.js
@@ -405,7 +405,7 @@ function build_user_interface() {
 
 	for (let i = 0; i < 6; ++i) {
 		elt = ui.opposition_buttons[i] = create("div", {
-			className: `button button_${(i % 2) + 1}`,
+			className: `button button_${(i % 2) + 5}`,
 		})
 	}
 
@@ -521,6 +521,40 @@ 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 = {
+	B0: '<span class="icon black d0"></span>',
+	B1: '<span class="icon black d1"></span>',
+	B2: '<span class="icon black d2"></span>',
+	B3: '<span class="icon black d3"></span>',
+	B4: '<span class="icon black d4"></span>',
+	B5: '<span class="icon black d5"></span>',
+	B6: '<span class="icon black d6"></span>',
+	W0: '<span class="icon white d0"></span>',
+	W1: '<span class="icon white d1"></span>',
+	W2: '<span class="icon white d2"></span>',
+	W3: '<span class="icon white d3"></span>',
+	W4: '<span class="icon white d4"></span>',
+	W5: '<span class="icon white d5"></span>',
+	W6: '<span class="icon white d6"></span>',
+	PR: '<span class="icon purple_campaigner"></span>',
+	YR: '<span class="icon yellow_campaigner"></span>',
+	RR: '<span class="icon red_campaigner"></span>',
+	PC: '<span class="icon purple_cube"></span>',
+	YC: '<span class="icon yellow_cube"></span>',
+	PYC: '<span class="icon purple_or_yellow_cube"></span>',
+	RC: '<span class="icon red_cube"></span>',
+	BM: '<span class="icon button"></span>',
+	CM: '<span class="icon congressional_marker"></span>',
+	GV: '<span class="icon green_check"></span>',
+	RX: '<span class="icon red_x"></span>',
+}
+
+function sub_icon(match) {
+	return ICONS[match]
+}
+
 function on_log(text) { // eslint-disable-line no-unused-vars
 	let p = document.createElement("div")
 
@@ -536,6 +570,11 @@ function on_log(text) { // eslint-disable-line no-unused-vars
 	text = text.replace(/R(\d+)/g, sub_region_name)
 	text = text.replace(/S(\d+)/g, sub_us_state_name)
 
+	text = text.replace(/\b[PYR]R\b/g, sub_icon)
+	text = text.replace(/\b[PYR]C|PYC\b/g, sub_icon)
+	text = text.replace(/\b[BC]M|GV|RX\b/g, sub_icon)
+	text = text.replace(/\b[BW]\d\b/g, sub_icon)
+
 	if (text.match(/^\.h1/)) {
 		text = text.substring(4)
 		p.className = 'h1'
diff --git a/rules.js b/rules.js
index da32079..cd90ae2 100644
--- a/rules.js
+++ b/rules.js
@@ -200,7 +200,7 @@ function add_campaigner(color, region) {
 	} else {
 		throw Error("No free campaigners")
 	}
-	log(`Placed ${COLOR_CODE[color]}R in R${region}`)
+	log(`Placed ${COLOR_CODE[color]}R in R${region}.`)
 }
 
 function player_campaigners() {
@@ -354,7 +354,7 @@ function us_states_with_color_cubes(us_states, cube) {
 }
 
 function add_cube(cube, us_state) {
-	log(`Added ${COLOR_CODE[cube]}C in S${us_state}`)
+	log(`Added ${COLOR_CODE[cube]}C in S${us_state}.`)
 
 	if ((cube === RED && support_cubes(us_state) > 0) || (cube !== RED && red_cubes(us_state) > 0))
 		throw new Error("Can't add cube when opponent still has cubes there")
@@ -366,7 +366,7 @@ function add_cube(cube, us_state) {
 }
 
 function remove_cube(cube, us_state) {
-	log(`Removed ${COLOR_CODE[cube]}C from S${us_state}`)
+	log(`Removed ${COLOR_CODE[cube]}C from S${us_state}.`)
 
 	if ((cube === PURPLE && !purple_cubes(us_state)) || (cube === YELLOW && !yellow_cubes(us_state)) || (cube === RED && !red_cubes(us_state)))
 		throw new Error("Can't remove cube that aint there")
@@ -378,7 +378,7 @@ function remove_cube(cube, us_state) {
 }
 
 function remove_green_check(us_state) {
-	log(`Removed ${COLOR_CODE[GREEN_CHECK]} from S${us_state}`)
+	log(`Removed ${COLOR_CODE[GREEN_CHECK]} from S${us_state}.`)
 
 	if (!is_green_check(us_state))
 		throw new Error("Can't remove a green check that aint there")
@@ -387,7 +387,7 @@ function remove_green_check(us_state) {
 }
 
 function remove_red_x(us_state) {
-	log(`Removed ${COLOR_CODE[RED_X]} from S${us_state}`)
+	log(`Removed ${COLOR_CODE[RED_X]} from S${us_state}.`)
 
 	if (!is_red_x(us_state))
 		throw new Error("Can't remove a red x that aint there")
@@ -800,7 +800,7 @@ states.strategy_phase = {
 
 	},
 	done() {
-		log(`Suffragist committed ${pluralize(game.support_committed, 'button')}.`)
+		log(`Suffragist committed ${game.support_committed} BM.`)
 		game.active = OPP
 	},
 	defer() {
@@ -1416,7 +1416,8 @@ function campaigner_color(c) {
 function goto_campaigning_add_cubes(campaigner, die) {
 	game.selected_campaigner = campaigner
 	set_add(game.campaigning.assigned, campaigner)
-	log(`Assigned ${die} to ${COLOR_CODE[campaigner_color(campaigner)]}R in R${campaigner_region(campaigner)}.`)
+	// TODO die type & color
+	log(`Assigned B${die} to ${COLOR_CODE[campaigner_color(campaigner)]}R in R${campaigner_region(campaigner)}.`)
 	game.campaigning.count = die
 	game.campaigning.added = 0
 	game.campaigning.moved = false
@@ -1604,13 +1605,13 @@ const GREEN_CHECK_VICTORY = 36
 const RED_X_VICTORY = 13
 
 function ratify_nineteenth_amendment(us_state) {
-	log(`S${us_state} ratified the Nineteenth Amendment`)
+	log(`S${us_state} ratified the Nineteenth Amendment.`)
 	game.us_states[us_state] = 0
 	set_green_check(us_state)
 }
 
 function reject_nineteenth_amendment(us_state) {
-	log(`S${us_state} rejected the Nineteenth Amendment`)
+	log(`S${us_state} rejected the Nineteenth Amendment.`)
 	game.us_states[us_state] = 0
 	set_red_x(us_state)
 }
@@ -1618,7 +1619,7 @@ function reject_nineteenth_amendment(us_state) {
 function trigger_nineteenth_amendment() {
 	if (game.nineteenth_amendment)
 		throw Error("ASSERT: nineteenth_amendment already set")
-	log("Congress passed the Nineteenth Amendment")
+	log("Congress passed the Nineteenth Amendment.")
 	game.nineteenth_amendment = 1
 	game.congress = 0
 
@@ -2178,7 +2179,7 @@ states.vm_add_campaigner = {
 }
 
 function increase_player_buttons(count=1) {
-	log(`+${pluralize(count, 'button')}.`)
+	log(`+${count} BM.`)
 	if (game.active === SUF) {
 		game.support_buttons = Math.min(game.support_buttons + count, MAX_SUPPORT_BUTTONS)
 	} else {
@@ -2187,7 +2188,7 @@ function increase_player_buttons(count=1) {
 }
 
 function decrease_player_buttons(count=1) {
-	log(`-${pluralize(count, 'button')}.`)
+	log(`-${count} BM.`)
 	if (game.active === SUF) {
 		game.support_buttons = Math.max(game.support_buttons - count, 0)
 	} else {
@@ -2196,7 +2197,7 @@ function decrease_player_buttons(count=1) {
 }
 
 function decrease_opponent_buttons(count=1) {
-	log(`${opponent_name()} -${pluralize(count, 'button')}.`)
+	log(`${opponent_name()} -${count} BM.`)
 	if (game.active === SUF) {
 		game.opposition_buttons = Math.max(game.opposition_buttons - count, 0)
 	} else {
@@ -2482,7 +2483,7 @@ states.vm_add_congress = {
 	},
 	congress() {
 		game.congress = Math.min(game.congress + game.vm.count, 6)
-		log(`+${pluralize(game.vm.count, 'Congressional marker')}.`)
+		log(`+${game.vm.count} CM.`)
 
 		if (game.congress >= 6) {
 			if (trigger_nineteenth_amendment())
@@ -2500,7 +2501,7 @@ states.vm_remove_congress = {
 	},
 	congress() {
 		game.congress = Math.max(game.congress - game.vm.count, 0)
-		log(`-${pluralize(game.vm.count, 'Congressional marker')}.`)
+		log(`-${game.vm.count} CM.`)
 
 		vm_next()
 	}