tips

1 files changed, 72 insertions, 42 deletions

diff --git a/play.js b/play.js
index 991bf75..3d577c0 100644
--- a/play.js
+++ b/play.js
@@ -154,9 +154,12 @@ let ui = {
 	favicon: document.getElementById("favicon"),
 	header: document.querySelector("header"),
 	status: document.getElementById("status"),
+	tooltip: document.getElementById("tooltip"),
 
-	turn_info: document.getElementById("turn_info"),
 	war_ends: document.getElementById("war_ends"),
+	played_british_reinforcements: document.getElementById("played_british_reinforcements"),
+	played_american_reinforcements_1: document.getElementById("played_american_reinforcements_1"),
+	played_american_reinforcements_2: document.getElementById("played_american_reinforcements_2"),
 	last_played: document.getElementById("last_played"),
 	reshuffle: document.getElementById("reshuffle"),
 	hand: document.getElementById("hand"),
@@ -265,6 +268,7 @@ function on_init() {
 		e.style.height = h - 10 + "px"
 
 		register_action(e, "space", s)
+		register_tooltip(e, info.name)
 
 		ui.spaces_element.appendChild(e)
 
@@ -292,6 +296,7 @@ function on_init() {
 		e.style.height = h - 14 + "px"
 
 		register_action(e, "sea", s)
+		register_tooltip(e, data.seas[s].map(x => data.spaces[x].name).join(", "))
 
 		ui.spaces_element.appendChild(e)
 	}
@@ -299,12 +304,19 @@ function on_init() {
 	for (let g = 0; g < general_count; ++g) {
 		let e = ui.generals[g] = build_piece("marker general small " + data.generals[g].name, 45+2, 45+2)
 		register_action(e, "general", g)
+		let info = data.generals[g]
+		let tip = `${info.name} ${info.strategy}-${info.battle}-${info.agility}`
+		if (info.bonus)
+			tip += "+2R"
+		register_tooltip(e, tip)
 	}
 
 	for (let i = 0; i < 14; ++i) {
 		let [ x, y ] = data.layout.colony[i]
 		ui.a_colony[i] = build_marker("marker small control american", x, y, 45+2, 45+2)
 		ui.b_colony[i] = build_marker("marker small control british", x, y, 45+2, 45+2)
+		register_tooltip(ui.a_colony[i], data.colony_name[i])
+		register_tooltip(ui.b_colony[i], data.colony_name[i])
 	}
 
 	ui.congress = build_piece("marker large congress", 55+2, 55+2)
@@ -720,29 +732,25 @@ function on_update() {
 		}
 	}
 
-	e = document.getElementById("war_ends")
 	if (view.war_ends)
-		e.className = "year_" + CARDS[view.war_ends].year
+		ui.war_ends.className = "year_" + CARDS[view.war_ends].year
 	else
-		e.className = ""
+		ui.war_ends.className = ""
 
-	e = document.getElementById("played_british_reinforcements")
 	if (view.reinforcements[0] > 0)
-		e.className = "reinforcements ops_" + CARDS[view.reinforcements[0]].count
+		ui.played_british_reinforcements.className = "reinforcements ops_" + CARDS[view.reinforcements[0]].count
 	else
-		e.className = ""
+		ui.played_british_reinforcements.className = ""
 
-	e = document.getElementById("played_american_reinforcements_1")
 	if (view.reinforcements[1] > 0)
-		e.className = "reinforcements ops_" + CARDS[view.reinforcements[1]].count
+		ui.played_american_reinforcements_1.className = "reinforcements ops_" + CARDS[view.reinforcements[1]].count
 	else
-		e.className = ""
+		ui.played_american_reinforcements_1.className = ""
 
-	e = document.getElementById("played_american_reinforcements_2")
 	if (view.reinforcements[2] > 0)
-		e.className = "reinforcements ops_" + CARDS[view.reinforcements[2]].count
+		ui.played_american_reinforcements_2.className = "reinforcements ops_" + CARDS[view.reinforcements[2]].count
 	else
-		e.className = ""
+		ui.played_american_reinforcements_2.className = ""
 
 	for (let e of action_register)
 		e.classList.toggle("action", is_action(e.my_action, e.my_id))
@@ -780,34 +788,25 @@ function on_update() {
 
 }
 
-/* LOG */
-
-function sub_space(_match, p1) {
-	let x = p1 | 0
-	let n = data.spaces[x].name
-	if (n === "Wilmington DE")
-		n = "Wilmington"
-	n = n.replaceAll(" ", "\xa0")
-	let co = data.spaces[x].colony
-	if (co)
-		n += "\xa0(" + data.colony_name[data.spaces[x].colony] + ")"
-	return `<span class="tip" onclick="on_click_space_tip(${x})" onmouseenter="on_focus_space_tip(${x})" onmouseleave="on_blur_space_tip(${x})">${n}</span>`
-}
+/* TOOLTIPS */
 
-function sub_general(_match, p1) {
-	let x = p1 | 0
-	let n = data.generals[x].name
-	return `<span class="tip" onclick="on_click_general_tip(${x})" onmouseenter="on_focus_general_tip(${x})" onmouseleave="on_blur_general_tip(${x})">${n}</span>`
+function register_tooltip(elt, focus, blur) {
+	if (typeof focus === "function")
+		elt.onmouseenter = focus
+	else
+		elt.onmouseenter = () => on_focus(focus)
+	if (typeof blur === "function")
+		elt.onmouseleave = blur
+	else
+		elt.onmouseleave = on_blur
 }
 
-function sub_minus(_match, p1) {
-	return "\u2212" + p1
+function on_focus(text) {
+	ui.status.textContent = text
 }
 
-function sub_card(_match, p1) {
-	let x = p1 | 0
-	let n = data.cards[x].title
-	return `<i class="tip" onmouseenter="on_focus_card_tip(${x})" onmouseleave="on_blur_card_tip(${x})">${n}</i>`
+function on_blur() {
+	ui.status.textContent = ""
 }
 
 function on_click_space_tip(s) {
@@ -835,29 +834,60 @@ function on_blur_general_tip(s) {
 }
 
 function on_focus_card_tip(c) {
-	document.getElementById("tooltip").className = "card card_" + c
+	ui.tooltip.className = "card card_" + c
 }
 
 function on_blur_card_tip() {
-	document.getElementById("tooltip").classList = "hide"
+	ui.tooltip.classList = "hide"
 }
 
 function on_focus_last_played() {
 	if (view.last_played)
-		document.getElementById("tooltip").className = "card card_" + view.last_played
+		ui.tooltip.className = "card card_" + view.last_played
 }
 
 function on_blur_last_played() {
-	document.getElementById("tooltip").classList = "hide"
+	ui.tooltip.classList = "hide"
 }
 
 function on_focus_war_ends() {
 	if (view.war_ends)
-		document.getElementById("tooltip").className = "card card_" + view.war_ends
+		ui.tooltip.className = "card card_" + view.war_ends
 }
 
 function on_blur_war_ends() {
-	document.getElementById("tooltip").classList = "hide"
+	ui.tooltip.classList = "hide"
+}
+
+
+/* LOG */
+
+function sub_space(_match, p1) {
+	let x = p1 | 0
+	let n = data.spaces[x].name
+	if (n === "Wilmington DE")
+		n = "Wilmington"
+	n = n.replaceAll(" ", "\xa0")
+	let co = data.spaces[x].colony
+	if (co)
+		n += "\xa0(" + data.colony_name[data.spaces[x].colony] + ")"
+	return `<span class="tip" onclick="on_click_space_tip(${x})" onmouseenter="on_focus_space_tip(${x})" onmouseleave="on_blur_space_tip(${x})">${n}</span>`
+}
+
+function sub_general(_match, p1) {
+	let x = p1 | 0
+	let n = data.generals[x].name
+	return `<span class="tip" onclick="on_click_general_tip(${x})" onmouseenter="on_focus_general_tip(${x})" onmouseleave="on_blur_general_tip(${x})">${n}</span>`
+}
+
+function sub_minus(_match, p1) {
+	return "\u2212" + p1
+}
+
+function sub_card(_match, p1) {
+	let x = p1 | 0
+	let n = data.cards[x].title
+	return `<i class="tip" onmouseenter="on_focus_card_tip(${x})" onmouseleave="on_blur_card_tip(${x})">${n}</i>`
 }
 
 const ICONS = {