Improve client log capabilities.

- shorter piece names for logging
- piece tooltips
- dice icons
- tactics rating icons
- lime green tooltip highlights

1 files changed, 79 insertions, 20 deletions

diff --git a/play.js b/play.js
index 16754e4..4e1d9d7 100644
--- a/play.js
+++ b/play.js
@@ -244,21 +244,21 @@ function print(x) {
 }
 
 function on_focus_card_tip(card_number) {
-	document.getElementById("tooltip").className = "card show card_" + card_number
+	ui.tooltip.className = "card show card_" + card_number
 }
 
 function on_blur_card_tip() {
-	document.getElementById("tooltip").classList = "card"
+	ui.tooltip.classList = "hide"
 }
 
 function on_focus_last_card() {
 	if (typeof view.last_card === 'number') {
-		document.getElementById("tooltip").className = "card show card_" + view.last_card
+		ui.tooltip.className = "card show card_" + view.last_card
 	}
 }
 
 function on_blur_last_card() {
-	document.getElementById("tooltip").classList = "card"
+	ui.tooltip.classList = "card"
 }
 
 function on_focus_pa_marker() {
@@ -298,6 +298,25 @@ function on_click_space_tip(s) {
 	scroll_into_view(ui.space_list[s])
 }
 
+function on_focus_piece_tip(p) {
+	pieces[p].element.classList.add("tip")
+	if (is_leader(p)) {
+		let leader = pieces[p]
+		ui.tooltip.className = "leader " + leader.faction + " " + leader.tall
+	}
+}
+
+function on_blur_piece_tip(p) {
+	pieces[p].element.classList.remove("tip")
+	ui.tooltip.className = "hide"
+}
+
+function on_click_piece_tip(p) {
+	scroll_into_view(pieces[p].element)
+}
+
+// LOG
+
 function on_log_line(text, cn) {
 	let p = document.createElement("div")
 	if (cn) p.className = cn
@@ -311,14 +330,48 @@ function sub_space_name(match, p1, offset, string) {
 	return `<span class="spacetip" onmouseenter="on_focus_space_tip(${s})" onmouseleave="on_blur_space_tip(${s})" onclick="on_click_space_tip(${s})">${n}</span>`
 }
 
+function sub_piece_name(match, p1, offset, string) {
+	let p = p1 | 0
+	let n = pieces[p].log_name
+	return `<span class="piecetip" onmouseenter="on_focus_piece_tip(${p})" onmouseleave="on_blur_piece_tip(${p})" onclick="on_click_piece_tip(${p})">${n}</span>`
+}
+
+function sub_card_name(match, p1, offset, string) {
+	let c = p1 | 0
+	let n = `(${cards[c].activation}) ${cards[c].name}`
+	return `<span class="tip" onmouseenter="on_focus_card_tip(${c})" onmouseleave="on_blur_card_tip(${c})">${n}</span>`
+}
+
+const ICONS = {
+	D0: '<span class="dice d0"></span>',
+	D1: '<span class="dice d1"></span>',
+	D2: '<span class="dice d2"></span>',
+	D3: '<span class="dice d3"></span>',
+	D4: '<span class="dice d4"></span>',
+	D5: '<span class="dice d5"></span>',
+	D6: '<span class="dice d6"></span>',
+	RB0: '<span class="number br">0</span>',
+	RB1: '<span class="number br">1</span>',
+	RB2: '<span class="number br">2</span>',
+	RF0: '<span class="number fr">0</span>',
+	RF1: '<span class="number fr">1</span>',
+	RF2: '<span class="number fr">2</span>',
+}
+
+function sub_icon(match) {
+	return ICONS[match]
+}
+
 function on_log(text) {
 	let p = document.createElement("div")
-	text = text.replace(/&/g, "&amp;")
-	text = text.replace(/</g, "&lt;")
-	text = text.replace(/>/g, "&gt;")
-	text = text.replace(/#(\d+)[^\]]*\]/g,
-		'<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">$&</span>')
-	text = text.replace(/%(\d+)/g, sub_space_name)
+	if (text.startsWith(">>")) {
+		p.className = "ii"
+		text = text.substring(2)
+	}
+	if (text.startsWith(">")) {
+		p.className = "i"
+		text = text.substring(1)
+	}
 
 	if (text.match(/^\.h1/)) {
 		text = text.substring(4)
@@ -358,14 +411,19 @@ function on_log(text) {
 		p.className = 'b'
 	}
 
-	if (text.indexOf("\n") < 0) {
-		p.innerHTML = text
-	} else {
-		text = text.split("\n")
-		p.appendChild(on_log_line(text[0]))
-		for (let i = 1; i < text.length; ++i)
-			p.appendChild(on_log_line(text[i], "indent"))
-	}
+	text = text.replace(/&/g, "&amp;")
+	text = text.replace(/</g, "&lt;")
+	text = text.replace(/>/g, "&gt;")
+	text = text.replace(/#(\d+)[^\]]*\]/g,
+		'<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">$&</span>')
+	text = text.replace(/C(\d+)/g, sub_card_name)
+	text = text.replace(/P(\d+)/g, sub_piece_name)
+	text = text.replace(/%(\d+)/g, sub_space_name)
+	text = text.replace(/\bD\d\b/g, match => ICONS[match])
+	text = text.replace(/\bR[BF]\d\b/g, match => ICONS[match])
+
+	p.innerHTML = text
+
 	return p
 }
 
@@ -402,6 +460,7 @@ function on_reply(q, params) {
 
 let ui = {
 	map: document.getElementById("map"),
+	tooltip: document.getElementById("tooltip"),
 	status: document.getElementById("status"),
 	spaces: document.getElementById("spaces"),
 	markers: document.getElementById("markers"),
@@ -1081,8 +1140,8 @@ const MINX = 15
 const MINY = 15
 const MAXX = 2550 - 15
 
-// TODO: two or more columns/rows if too many pieces in stack
-// TODO: separate layout for leader and militia boxes
+// todo: two or more columns/rows if too many pieces in stack
+// todo: separate layout for leader and militia boxes
 
 function layout_stack(stack, x, y, dx) {
 	let dim = style_dims[style]