Prettier logs with formatting and colors.

2 files changed, 26 insertions, 18 deletions

diff --git a/play.html b/play.html
index aa30c7a..23d5242 100644
--- a/play.html
+++ b/play.html
@@ -14,7 +14,6 @@
 
 .grid_center { background-color: slategray; }
 .grid_role { background-color: gainsboro; }
-.grid_log { background-color: gainsboro; }
 .grid_top { background-color: silver; }
 .Persia .grid_top.your_turn { background-color: skyblue; }
 .Greece .grid_top.your_turn { background-color: salmon; }
@@ -23,6 +22,24 @@
 .one .role_name { background-color: salmon; }
 .two .role_name { background-color: skyblue; }
 
+#log {
+	background-color: gainsboro;
+}
+
+#log .tip {
+	cursor: help;
+	text-decoration: underline;
+	color: blue;
+}
+
+#log .st {
+	font-weight: bold;
+	background-color: gray;
+	color: white;
+	text-align: center;
+	padding: 3px;
+}
+
 .hand.greek {
 	background-color: rosybrown;
 	border-radius: 10px;
@@ -39,9 +56,6 @@
 #deck_info {
 	text-align: center;
 }
-.grid_role {
-	width: 240px;
-}
 
 /* CARDS */
 
@@ -72,24 +86,16 @@
 
 .card_info .card {
 	margin: 15px auto;
-	width: 200px;
-	height: 280px;
+	width: 125px;
+	height: 175px;
 	border-radius: 10px;
 }
 
-.log span.tip {
-	cursor: help;
-	text-decoration: underline;
-	color: blue;
-}
-
 #tooltip.card {
 	position: fixed;
 	z-index: 200;
-	right: 270px;
+	right: 230px;
 	top: 60px;
-	width: 375px;
-	height: 525px;
 }
 
 /* PHONE SIZE: squeeze side bar on small screens */
@@ -321,9 +327,7 @@
 		<div class="role_info card_info"><div id="discard" class="card show card_back"></div><div id="deck_info"></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/ui.js b/ui.js
index 8c2526b..1736404 100644
--- a/ui.js
+++ b/ui.js
@@ -66,6 +66,10 @@ create_log_entry = function (text) {
 	text = text.replace(/>/g, "&gt;");
 	text = text.replace(/card (\d+)/g,
 		'<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">card $1</span>');
+	if (text.match(/^Start Campaign /)) {
+		p.className = 'st';
+		text = text.substring(6);
+	}
 	p.innerHTML = text;
 	return p;
 }