Prettier logs with formatting and colors.

3 files changed, 53 insertions, 38 deletions

diff --git a/play.html b/play.html
index 0b9bd30..8d6a0c7 100644
--- a/play.html
+++ b/play.html
@@ -17,13 +17,19 @@
 .grid_center { background-color: slategray; }
 .grid_role { background-color: gainsboro; }
 .card_info { background-color: silver; }
-.grid_log { background-color: gainsboro; }
 .grid_top { background-color: silver; }
 .Tripolitania .grid_top.your_turn { background-color: salmon; }
 .United_States .grid_top.your_turn { background-color: skyblue; }
 .one .role_name { background-color: skyblue; }
 .two .role_name { background-color: salmon; }
 
+#log { background-color: white; }
+#log .st { background-color: gray; color: white; font-weight: bold; padding:3px; text-align: center; }
+#log .ss { background-color: gainsboro; color: dimgray; font-weight: bold; padding:3px; text-align: center; }
+#log .end { font-style: italic; }
+#log .us_tip { color: blue; text-decoration: dotted underline; cursor: help; }
+#log .tr_tip { color: #d00; text-decoration: dotted underline; cursor: help; }
+
 #turn {
 	padding: 8px 0px 8px 8px;
 	border-bottom: 1px solid black;
@@ -66,18 +72,17 @@
 
 .card_info .card {
 	margin: 0 auto;
-	width: 100px;
-	height: 140px;
-	border-radius: 5px;
+	width: 125px;
+	height: 175px;
+	border-radius: 6px;
 }
 
-.role_info {
-	padding: 5px 15px;
+#tr_info, #us_info {
 	white-space: pre-line;
 	font-family: "Source Serif SmText";
 	font-size: 12px;
-	line-height: 18px;
-	padding: 4px 8px;
+	text-align: center;
+	padding: 3px;
 }
 
 #tooltip.card {
@@ -90,18 +95,6 @@
 	display: block;
 }
 
-.log span.us_tip {
-	cursor: help;
-	text-decoration: underline dotted;
-	color: navy;
-}
-
-.log span.tr_tip {
-	cursor: help;
-	text-decoration: underline dotted;
-	color: darkred;
-}
-
 /* MAP */
 
 .mapwrap {
@@ -340,7 +333,7 @@ body.United_States #popup div.us_always { display: block; }
 				<div class="role_vp" id="us_score">30</div>
 				<div class="role_user">-</div>
 			</div>
-			<div class="role_info" id="us_info">Hand:&#x0a;Draw:&#x0a;Discard:</div>
+			<div class="role_info" id="us_info">Hand: X / Draw: X / Discard: X</div>
 		</div>
 		<div class="role two">
 			<div class="role_name">
@@ -348,14 +341,12 @@ body.United_States #popup div.us_always { display: block; }
 				<div class="role_vp" id="tr_score">0</div>
 				<div class="role_user">-</div>
 			</div>
-			<div class="role_info" id="tr_info">Hand:&#x0a;Draw:&#x0a;Discard:</div>
+			<div class="role_info" id="tr_info">Hand: X / Draw: X / Discard: X</div>
 		</div>
 		<div class="card_info"><div id="active_card" class="card show blank"></div></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 aaa6e22..11ca1dd 100644
--- a/rules.js
+++ b/rules.js
@@ -40,6 +40,7 @@ const TR_INFANTRY = create_piece_list(20, 'tr_infantry_');
 const SPRING = 0;
 const FALL = 2;
 const WINTER = 3;
+const SEASON_NAMES = [ "Spring", "Summer", "Fall", "Winter" ];
 
 const ALEXANDRIA = get_space_id("Alexandria");
 const ALGIERS = get_space_id("Algiers");
@@ -689,11 +690,21 @@ states.hand_size = {
 	},
 	next: function (_, current) {
 		if (current === TR) {
+			let n = game.tr.queue.length;
+			if (n > 1)
+				log(current + " discards " + n + " cards.");
+			else if (n === 1)
+				log(current + " discards " + n + " card.");
 			for (let card of game.tr.queue)
 				game.tr.discard.push(card);
 			delete game.tr.queue;
 		}
 		if (current === US) {
+			let n = game.us.queue.length;
+			if (n > 1)
+				log(current + " discards " + n + " cards.");
+			else if (n === 1)
+				log(current + " discards " + n + " card.");
 			for (let card of game.us.queue)
 				game.us.discard.push(card);
 			delete game.us.queue;
@@ -720,6 +731,10 @@ states.hand_size = {
 }
 
 function goto_american_play() {
+	log("");
+	log("Start of " + SEASON_NAMES[game.season] + ".");
+	log("");
+
 	game.active = US;
 	game.state = 'american_play';
 }
@@ -744,8 +759,7 @@ function end_of_season() {
 		end_of_year();
 	} else {
 		++game.season;
-		game.active = US;
-		game.state = 'american_play';
+		goto_american_play();
 	}
 }
 
@@ -815,12 +829,12 @@ states.tripolitan_play = {
 			gen_action(view, 'pass');
 	},
 	card_build_corsair: function (c) {
-		discard_card(game.tr, c, " to build a Tripolitan corsair in Tripoli");
+		discard_card(game.tr, c, " to build a corsair in Tripoli");
 		move_one_piece(TR_CORSAIRS, TRIPOLITAN_SUPPLY, TRIPOLI);
 		end_tripolitan_play();
 	},
 	card_pirate_raid: function (c) {
-		discard_card(game.tr, c, " to Pirate Raid with the corsairs from Tripoli");
+		discard_card(game.tr, c, " to Pirate Raid from Tripoli");
 		goto_pirate_raid(TRIPOLI);
 	},
 	card_event: play_tripolitan_event,
@@ -2476,7 +2490,7 @@ states.bainbridge_supplies_intel = {
 	},
 	card_event: play_american_event,
 	card_take: function (card) {
-		log("Card placed in hard.");
+		log("Card placed in hand.");
 		remove_from_array(game.us.discard, card);
 		game.us.hand.push(card);
 		end_american_play();
@@ -2740,9 +2754,9 @@ function goto_game_over(result, message) {
 	game.active = "None";
 	game.result = result;
 	if (result === TR)
-		game.victory = "Tripolitan victory: " + message;
+		game.victory = "Tripolitan victory:\n" + message;
 	else if (result === US)
-		game.victory = "United States victory: " + message;
+		game.victory = "United States victory:\n" + message;
 	else
 		game.victory = message;
 	log("");
diff --git a/ui.js b/ui.js
index 8db7243..2c27695 100644
--- a/ui.js
+++ b/ui.js
@@ -119,19 +119,29 @@ function sub_log_entry_tip(match, p1, offset, string) {
 	let card_number;
 	card_number = US_CARD_NAMES.indexOf(p1) + 1;
 	if (card_number > 0)
-		return `\u201c<span class="us_tip" onmouseenter="on_focus_card_tip('us_card_${card_number}')" onmouseleave="on_blur_card_tip()">${p1}</span>\u201d`;
+		return `\n<span class="us_tip" onmouseenter="on_focus_card_tip('us_card_${card_number}')" onmouseleave="on_blur_card_tip()">${p1}</span>`;
 	card_number = TR_CARD_NAMES.indexOf(p1) + 1;
 	if (card_number > 0)
-		return `\u201c<span class="tr_tip" onmouseenter="on_focus_card_tip('tr_card_${card_number}')" onmouseleave="on_blur_card_tip()">${p1}</span>\u201d`;
+		return `\n<span class="tr_tip" onmouseenter="on_focus_card_tip('tr_card_${card_number}')" onmouseleave="on_blur_card_tip()">${p1}</span>`;
 	return match;
 }
 
+let last_log_who = 'st';
 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(/\u201c(.*)\u201d/g, sub_log_entry_tip);
+	if (text.match(/^Start of \d+/)) {
+		text = text.substring(9, text.length-1);
+		p.className = 'st';
+	} else if (text.match(/^Start of /)) {
+		text = text.substring(9, text.length-1);
+		p.className = 'ss';
+	} else if (text.match(/(victory:|ends in a draw)/)) {
+		p.className = 'end';
+	}
 	p.innerHTML = text;
 	return p;
 }
@@ -264,16 +274,16 @@ function update_cards() {
 
 function tr_info() {
 	let text = "";
-	text += "Hand: " + game.tr.hand + "\n";
-	text += "Draw: " + game.tr.draw + "\n";
+	text += "Hand: " + game.tr.hand + " / ";
+	text += "Draw: " + game.tr.draw + " / ";
 	text += "Discard: " + game.tr.discard + "\n";
 	return text;
 }
 
 function us_info() {
 	let text = "";
-	text += "Hand: " + game.us.hand + "\n";
-	text += "Draw: " + game.us.draw + "\n";
+	text += "Hand: " + game.us.hand + " / ";
+	text += "Draw: " + game.us.draw + " / ";
 	text += "Discard: " + game.us.discard + "\n";
 	return text;
 }