Prettier logs with formatting and colors.

3 files changed, 40 insertions, 5 deletions

diff --git a/play.html b/play.html
index 561bc09..abf8601 100644
--- a/play.html
+++ b/play.html
@@ -23,6 +23,13 @@
 .two .role_name { background-color: skyblue; }
 .turn_info { background-color: gainsboro; }
 
+#log { background-color: ghostwhite; }
+#log .st { background-color: #053; color: white; font-weight: bold; }
+#log .S { background-color: salmon; }
+#log .E { background-color: skyblue; }
+#log .bs { background-color: gainsboro; }
+#log .br { font-style: italic; text-decoration: underline; }
+
 /* CARDS */
 
 .card_back{background-image: url('cards/card_back.svg')}
@@ -306,7 +313,7 @@ div.block {
 			<div class="menu_popup">
 				<div class="menu_item" onclick="toggle_fullscreen()">Fullscreen</div>
 				<div class="menu_separator"></div>
-				<div class="menu_item" onclick="old_block_style()">Old labels</div>
+				<div class="menu_item" onclick="old_block_style()">Classic labels</div>
 				<div class="menu_item" onclick="new_block_style()">New labels</div>
 				<div class="menu_separator"></div>
 				<div class="menu_item" onclick="window.open('info/notes.html', '_blank')">Notes</div>
@@ -402,9 +409,7 @@ div.block {
 		<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 31d5d59..0fd3184 100644
--- a/rules.js
+++ b/rules.js
@@ -860,6 +860,7 @@ states.play_card = {
 }
 
 function reveal_cards() {
+	log("");
 	log("England plays " + CARDS[game.e_card].name + ".");
 	log("Scotland plays " + CARDS[game.s_card].name + ".");
 	game.show_cards = true;
@@ -2046,7 +2047,8 @@ states.border_raids = {
 function goto_winter_turn() {
 	game.moved = {};
 	log("");
-	log("Start Wintering.");
+	log("Start Winter of " + game.year + ".");
+	log("");
 	english_nobles_go_home();
 }
 
diff --git a/ui.js b/ui.js
index b4df3fd..598ad5a 100644
--- a/ui.js
+++ b/ui.js
@@ -48,6 +48,34 @@ let ui = {
 	present: new Set(),
 }
 
+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(/^([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 England turn/))
+		p.className = 'E';
+	else if (text.match(/^Start Scotland turn/))
+		p.className = 'S';
+	else if (text.match(/^Start /))
+		p.className = 'st';
+	else if (text.match(/^(Battle in|Defection battle in)/))
+		p.className = 'bs';
+
+	if (text.match(/^Start /))
+		text = text.substring(6);
+
+	p.innerHTML = text;
+	return p;
+}
+
 function on_focus_area(evt) {
 	let where = evt.target.area;
 	document.getElementById("status").textContent = where;