Start log formatting.

3 files changed, 125 insertions, 16 deletions

diff --git a/play.css b/play.css
index f21cb33..09ab547 100644
--- a/play.css
+++ b/play.css
@@ -9,10 +9,45 @@ header.your_turn { background-color: orange; }
 #turn_info { background-color: gainsboro; }
 .role_vp { float: right; }
 
-header.your_turn.player_red { background-color: salmon; }
-header.your_turn.player_blue { background-color: skyblue; }
-header.your_turn.player_yellow { background-color: khaki; }
-header.your_turn.player_green { background-color: darkseagreen; }
+body.Red header.your_turn { background-color: salmon; }
+body.Blue header.your_turn { background-color: skyblue; }
+body.Yellow header.your_turn { background-color: khaki; }
+body.Green header.your_turn { background-color: darkseagreen; }
+
+#log { background-color: whitesmoke; }
+#log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; }
+#log .h1.p_red { background-color: salmon; }
+#log .h1.p_blue { background-color: skyblue; }
+#log .h1.p_yellow { background-color: khaki; }
+#log .h1.p_green { background-color: darkseagreen; }
+#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
+#log .h3 { text-decoration: underline; }
+#log div { padding-left: 20px; text-indent: -12px; }
+#log div.indent { padding-left: 32px; text-indent: -12px; }
+
+#log .white, #log .black {
+	display: inline-block;
+	vertical-align: -2px;
+	width: 12px;
+	height: 12px;
+	border-radius: 0px;
+	box-shadow: none;
+	border: none;
+	background-size: 600% 100%;
+	background-repeat: no-repeat;
+}
+
+#log .white {
+	background-image: url(images/die_black_pips.svg);
+	background-color: #fff;
+	border: 1px solid #444;
+}
+
+#log .black {
+	background-image: url(images/die_white_pips.svg);
+	background-color: #666;
+	border: 1px solid #222;
+}
 
 .action {
 	cursor: pointer;
@@ -62,8 +97,6 @@ body.p3 #crisis_table {
 	left: 50px;
 }
 
-body.Solo #.role { display: none }
-
 svg {
 	position: absolute;
 }
@@ -155,13 +188,13 @@ body svg .sea.action {
 	background-repeat: no-repeat;
 }
 
-.dice.d0 { background-position: -100% 0 }
-.dice.d1 { background-position: 0% 0; }
-.dice.d2 { background-position: 20% 0; }
-.dice.d3 { background-position: 40% 0; }
-.dice.d4 { background-position: 60% 0; }
-.dice.d5 { background-position: 80% 0; }
-.dice.d6 { background-position: 100% 0; }
+.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; }
 
 .dice.black {
 	background-image: url(images/die_white_pips.svg);
diff --git a/play.js b/play.js
index 972754a..9c4eb7c 100644
--- a/play.js
+++ b/play.js
@@ -3,6 +3,23 @@
 // TODO: battle dialog popup for rolling and assigning hits!
 // TODO: show killed leaders taken for bonus purchase
 
+const DICE = {
+	B0: '<span class="black d0"></span>',
+	B1: '<span class="black d1"></span>',
+	B2: '<span class="black d2"></span>',
+	B3: '<span class="black d3"></span>',
+	B4: '<span class="black d4"></span>',
+	B5: '<span class="black d5"></span>',
+	B6: '<span class="black d6"></span>',
+	W0: '<span class="white d0"></span>',
+	W1: '<span class="white d1"></span>',
+	W2: '<span class="white d2"></span>',
+	W3: '<span class="white d3"></span>',
+	W4: '<span class="white d4"></span>',
+	W5: '<span class="white d5"></span>',
+	W6: '<span class="white d6"></span>',
+}
+
 // === SYNC with rules.js ===
 
 const LEGION_COUNT = 33
@@ -1304,5 +1321,64 @@ function on_update() {
 	action_button("undo", "Undo")
 }
 
+function sub_region_name(match, p1) {
+	let x = p1 | 0
+	return REGION_NAME[x]
+}
+
+function sub_dice_image(match) {
+	return DICE[match]
+}
+
+function on_log(text) {
+	let p = document.createElement("div")
+
+	if (text.match(/^>/)) {
+		text = text.substring(1)
+		p.className = 'i'
+	}
+
+	text = text.replace(/&/g, "&amp;")
+	text = text.replace(/</g, "&lt;")
+	text = text.replace(/>/g, "&gt;")
+
+	text = text.replace(/S(\d+)/g, sub_region_name)
+	text = text.replace(/\b[BW]\d\b/g, sub_dice_image)
+
+	if (text.match(/^.turn/)) {
+		text = text.substring(6)
+		p.className = 'turn ' + text
+	}
+
+	if (text.match(/^\.h1/)) {
+		text = text.substring(4)
+		p.className = "h1"
+	}
+	else if (text.match(/^\.h2 Red/)) {
+		text = text.substring(4)
+		p.className = "h2 p_red"
+	}
+	else if (text.match(/^\.h2 Blue/)) {
+		text = text.substring(4)
+		p.className = "h2 p_blue"
+	}
+	else if (text.match(/^\.h2 Yellow/)) {
+		text = text.substring(4)
+		p.className = "h2 p_yellow"
+	}
+	else if (text.match(/^\.h2 Green/)) {
+		text = text.substring(4)
+		p.className = "h2 p_green"
+	}
+	if (text.match(/^\.h3/)) {
+		text = text.substring(4)
+		p.className = "h3"
+	}
+
+	p.innerHTML = text
+	return p
+}
+
+
 on_init()
 scroll_with_middle_mouse("main")
diff --git a/rules.js b/rules.js
index a8c3227..26f4bba 100644
--- a/rules.js
+++ b/rules.js
@@ -990,7 +990,7 @@ function roll_dice(count, target) {
 				summary.push("W" + die)
 			}
 		}
-		log("Rolled " + summary.join(" "))
+		logi(summary.join(" "))
 		count = sixes
 	}
 	return hits
@@ -1008,7 +1008,7 @@ function roll_dice_no_reroll(count, target) {
 			summary.push("W" + die)
 		}
 	}
-	log("Rolled " + summary.join(" "))
+	logi(summary.join(" "))
 	return hits
 }
 
@@ -1336,7 +1336,7 @@ function goto_barbarian_invasion(tribe, black, white) {
 	logi("Invasion!")
 	game.count = game.dice[2]
 
-	// Ardashir: ALL active Sassanids invade!
+	// Ardashir: All active Sassanids invade!
 	if (tribe === SASSANIDS) {
 		if (get_barbarian_location(ARDASHIR) === SASSANIDS_HOMELAND)
 			game.count = count_active_barbarians_at_home(tribe)