Prettier logs with formatting and colors.

3 files changed, 43 insertions, 6 deletions

diff --git a/play.html b/play.html
index 82d6f28..6873e7b 100644
--- a/play.html
+++ b/play.html
@@ -16,7 +16,6 @@
 
 .grid_center { background-color: slategray; }
 .grid_role { background-color: silver; }
-.grid_log { background-color: ghostwhite; }
 .grid_top { background-color: gainsboro; }
 .Franks .grid_top.your_turn { background-color: #f7de46; /* 50% mix of khaki and gold */ }
 .Saracens .grid_top.your_turn { background-color: lightgreen; }
@@ -24,6 +23,13 @@
 .two .role_name { background-color: darkseagreen; }
 .turn_info { background-color: gainsboro; }
 
+#log { background-color: ghostwhite; }
+#log .st { background-color: #246; color: white; font-weight: bold; }
+#log .F { background-color: khaki; }
+#log .S { background-color: darkseagreen; }
+#log .bs { background-color: lightgray; }
+#log .br { font-style: italic; text-decoration: underline; }
+
 .map #timeline {
 	position: absolute;
 	width: 88px; height: 35px; top: 2410px;
@@ -488,9 +494,7 @@ body.shift .block.known:hover {
 
 	</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 0e33e12..98fe00d 100644
--- a/rules.js
+++ b/rules.js
@@ -1242,6 +1242,7 @@ states.play_card = {
 }
 
 function reveal_cards() {
+	log("");
 	log("Franks play " + CARDS[game.f_card].name + ".");
 	log("Saracens play " + CARDS[game.s_card].name + ".");
 	game.show_cards = true;
@@ -1595,6 +1596,10 @@ states.confirm_end_move_phase = {
 		gen_action(view, 'end_move_phase');
 	},
 	end_move_phase: function () {
+		if (game.moves === 1)
+			log(game.active + " do nothing with " + game.moves + " move.");
+		else
+			log(game.active + " do nothing with " + game.moves + " moves.");
 		game.moves = 0;
 		end_move_phase();
 	},
@@ -2191,8 +2196,6 @@ function start_combat() {
 }
 
 function end_combat() {
-	log("~ Combat Ends ~");
-
 	lift_siege(game.where);
 
 	if (game.jihad === game.where)
@@ -3235,6 +3238,7 @@ function goto_draw_phase() {
 	delete game.combat_list;
 	if (game.year > 1187 && !is_winter()) {
 		game.active = game.p1;
+		log("");
 		start_draw_phase();
 	} else {
 		end_game_turn();
@@ -3342,6 +3346,7 @@ function end_game_turn() {
 function goto_winter_1() {
 	log("");
 	log("Start Winter of " + game.year + ".");
+	log("");
 	if (game.winter_campaign)
 		goto_winter_siege_attrition();
 	else
diff --git a/ui.js b/ui.js
index 41fe99e..a39553d 100644
--- a/ui.js
+++ b/ui.js
@@ -50,6 +50,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 Frank turn/))
+		p.className = 'F';
+	else if (text.match(/^Start Saracen turn/))
+		p.className = 'S';
+	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;
+}
+
 function on_focus_town(evt) {
 	let where = evt.target.town;
 	let text = where;