Add hex/piece tooltips.

2 files changed, 48 insertions, 28 deletions

diff --git a/play.css b/play.css
index 4e717bd..7c9cc93 100644
--- a/play.css
+++ b/play.css
@@ -1,9 +1,9 @@
 header { background-color: hsl(39, 25%, 75%); }
 #replay_panel { background-color: hsl(39, 25%, 75%);; }
 #log { background-color: hsl(50, 50%, 92%); }
-#log .h1 { background-color: hsl(50, 25%, 65%); }
-#log .h2 { background-color: hsl(50, 25%, 75%); }
-#log .h3 { background-color: hsl(50, 40%, 85%); }
+#log .h1 { background-color: #803a3c; color: gold; text-shadow: 0 0 1px white; }
+#log .h2 { background-color: hsl(45, 30%, 70%); }
+#log .h3 { background-color: hsl(45, 30%, 80%); }
 
 body.French header.your_turn { background-color:  hsl(195, 72%, 75%); }
 #role_French .role_name { background-color:  hsl(195, 72%, 80%); }
@@ -14,12 +14,7 @@ body.Coalition header.your_turn { background-color: white; }
 #log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; }
 #log .h2 { padding-top:1px; padding-bottom:1px; }
 #log .h3 { padding-top:1px; padding-bottom:1px; }
-#log .h1, .h2, .h3 {
-	margin: 9px 0;
-	text-align: center;
-	border-bottom: 1px solid #444;
-	border-top: 1px solid #444;
-}
+#log .h1, .h2, .h3 { margin: 9px 0; text-align: center; }
 
 #log div { padding-left: 20px; text-indent: -12px; }
 #log div.i { padding-left: 32px; text-indent: -12px; }
@@ -155,7 +150,7 @@ main {
 	box-sizing: border-box;
 	position: absolute;
 	border-radius: 50%;
-	border: 2px solid transparent;
+	border: 4px solid transparent;
 }
 
 .hex.town { background-color: #F006; }
@@ -259,7 +254,12 @@ main {
 }
 
 .hex.tip {
-	border: 4px solid #f008;
+	border: 5px solid yellow;
+	z-index: 200;
+}
+
+div.french.tip, div.anglo.tip, div.prussian.tip {
+	box-shadow: 0 0 0 4px yellow;
 	z-index: 200;
 }
 
@@ -285,13 +285,6 @@ main {
 #arrow.r4 { transform: rotate(270deg) }
 #arrow.r5 { transform: rotate(330deg) }
 
-div.french.tip, div.anglo.tip, div.prussian.tip {
-	box-shadow: 0 0 0 4px #f008;
-	z-index: 200;
-=======
->>>>>>> da5fc7d (Pause before rolling for attack. Pause at end of turn.)
-}
-
 .marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) }
 .large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) }
 .large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) }
@@ -346,13 +339,6 @@ div.french.tip, div.anglo.tip, div.prussian.tip {
 .small.y5 { background-position: 0px -136px }
 .small.y6 { background-position: 0px -170px }
 
-.small.flip.y1 { background-position: -34px -0px }
-.small.flip.y2 { background-position: -34px -34px }
-.small.flip.y3 { background-position: -34px -68px }
-.small.flip.y4 { background-position: -34px -102px }
-.small.flip.y5 { background-position: -34px -136px }
-.small.flip.y6 { background-position: -34px -170px }
-
 #log .dice {
 	display: inline-block;
 	vertical-align: -2px;
diff --git a/play.js b/play.js
index 7e2fba4..1285cb9 100644
--- a/play.js
+++ b/play.js
@@ -452,6 +452,30 @@ function on_update() {
 	action_button("undo", "Undo")
 }
 
+function on_focus_hex_tip(id) {
+	ui.hexes[id].classList.add("tip")
+}
+
+function on_blur_hex_tip(id) {
+	ui.hexes[id].classList.remove("tip")
+}
+
+function on_click_hex_tip(id) {
+	ui.hexes[id].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+}
+
+function on_focus_piece_tip(id) {
+	ui.pieces[id].classList.add("tip")
+}
+
+function on_blur_piece_tip(id) {
+	ui.pieces[id].classList.remove("tip")
+}
+
+function on_click_piece_tip(id) {
+	ui.pieces[id].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" })
+}
+
 const DICE = {
 	D0: '[0]',
 	D1: '[1]',
@@ -470,13 +494,23 @@ function sub_hex(match, p1) {
 	let x = p1 | 0
 	let n = data.map.names[x]
 	if (n)
-		return x + " (" + n + ")"
-	return x
+		n = x + " (" + n + ")"
+	else
+		n = x
+	return `<span class="hextip" onmouseenter="on_focus_hex_tip(${x})" onmouseleave="on_blur_hex_tip(${x})" onclick="on_click_hex_tip(${x})">${n}</span>`
 }
 
 function sub_piece(match, p1) {
 	let x = p1 | 0
-	return data.pieces[x].name
+	let n = data.pieces[x].name
+	let c = "piece"
+	if (data.pieces[x].side === "Anglo")
+		c = "tip anglo"
+	else if (data.pieces[x].side === "Prussian")
+		c = "tip prussian"
+	else if (data.pieces[x].side === "French")
+		c = "tip french"
+	return `<span class="${c}" onmouseenter="on_focus_piece_tip(${x})" onmouseleave="on_blur_piece_tip(${x})" onclick="on_click_piece_tip(${x})">${n}</span>`
 }
 
 function on_log(text) {