Prettier logs with formatting and colors.

3 files changed, 42 insertions, 8 deletions

diff --git a/play.html b/play.html
index 3bb8309..de41272 100644
--- a/play.html
+++ b/play.html
@@ -18,13 +18,19 @@
 
 .grid_center { background-color: #461145; }
 .grid_role { background-color: tan; }
-.grid_log { background-color: wheat; }
 .grid_top { background-color: tan; }
 .grid_top.your_turn { background-color: orange; }
 .one .role_name { background-color: salmon; }
 .two .role_name { background-color: #eb5; }
 .turn_info { background-color: burlywood; }
 
+#log { background-color: wheat; }
+#log .st { background-color: brown; color: gold; font-weight: bold; }
+#log .C { background-color: salmon; }
+#log .P { background-color: #eb5; }
+#log .bs { background-color: tan; }
+#log .br { font-style: italic; text-decoration: underline; }
+
 /* CARDS */
 
 .card_back { background-image: url('cards/card_back.webp'); }
@@ -80,7 +86,7 @@
 
 .battle { background-color: tan; }
 .battle .battle_message { background-color: wheat; }
-.battle .battle_header { background-color: brown; color: white; font-weight: bold; }
+.battle .battle_header { background-color: brown; color: wheat; font-weight: bold; }
 .battle .battle_separator { background-color: brown; }
 
 .battle_line.enemy .battle_menu_list { min-height: 0; }
@@ -319,9 +325,7 @@ body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822
 		<div class="turn_info">-</div>
 	</div>
 
-	<div class="grid_log">
-		<div class="log" id="log"></div>
-	</div>
+	<div id="log"></div>
 
 	<div class="grid_center">
 
diff --git a/rules.js b/rules.js
index 93b1611..8fcb889 100644
--- a/rules.js
+++ b/rules.js
@@ -997,6 +997,7 @@ function reveal_cards() {
 	delete game.neptune;
 	delete game.pluto;
 
+	log("");
 	log("Caesar plays ", CARDS[game.c_card].name, ".");
 	log("Pompeius plays ", CARDS[game.p_card].name, ".");
 
@@ -1684,10 +1685,9 @@ function start_battle() {
 	game.battle_round = 0;
 	game.flash = "";
 	log("");
+	log("Battle in ", game.where, ".");
 	if (game.surprise === game.where)
-		log("Surprise attack in ", game.where, ".");
-	else
-		log("Battle in ", game.where, ".");
+		log("Surprise attack.");
 	game.state = 'battle_round';
 	start_battle_round();
 }
@@ -2177,6 +2177,7 @@ function check_victory() {
 		} else {
 			log("");
 			log("Start Winter Turn of Year " + game.year);
+			log("");
 			start_navis_to_port();
 		}
 	}
diff --git a/ui.js b/ui.js
index 2198c7b..8bd27a5 100644
--- a/ui.js
+++ b/ui.js
@@ -74,6 +74,35 @@ let ui = {
 	cards: {},
 };
 
+create_log_entry = function (text) {
+	let p = document.createElement("div");
+	text = text.replace(/&/g, "&amp;");
+	text = text.replace(/</g, "&lt;");
+	text = text.replace(/>/g, "&gt;");
+
+	text = text.replace(/\u2192 /g, "\u2192\xa0");
+	text = text.replace(/Mare /g, "Mare\xa0");
+
+	text = text.replace(/^([A-Z]):/, '<span class="$1"> $1 </span>');
+
+	if (text.match(/^~ .* ~$/))
+		p.className = 'br', text = text.substring(2, text.length-2);
+	else if (text.match(/^Start Caesar turn/))
+		p.className = 'C';
+	else if (text.match(/^Start Pompeius turn/))
+		p.className = 'P';
+	else if (text.match(/^Start /))
+		p.className = 'st';
+	else if (text.match(/^Battle in/))
+		p.className = 'bs';
+
+	if (text.match(/^Start /))
+		text = text.substring(6);
+
+	p.innerHTML = text;
+	return p;
+}
+
 const STEPS = [ 0, "I", "II", "III", "IIII" ];
 
 function block_description(b) {