Tooltip on spaces and per-color highlights of cylinders.

3 files changed, 71 insertions, 27 deletions

diff --git a/play.css b/play.css
index 07d25cd..4e948cd 100644
--- a/play.css
+++ b/play.css
@@ -334,21 +334,26 @@ body.shift #tooltip.focus { display: block; }
 .block.road.British { background-image: url(pieces/road_british.svg) }
 .block.road.Russian { background-image: url(pieces/road_russian.svg) }
 
-.Afghan.block.action {
+.Afghan.block.action,
+.Afghan.block.selected {
 	filter:
 		drop-shadow(0 -2px 0 turquoise)
 		drop-shadow(0 2px 0 turquoise)
 		drop-shadow(-2px 0 0 turquoise)
 		drop-shadow(2px 0 0 turquoise)
 }
-.British.block.action {
+
+.British.block.action,
+.British.block.selected {
 	filter:
 		drop-shadow(0 -2px 0 hotpink)
 		drop-shadow(0 2px 0 hotpink)
 		drop-shadow(-2px 0 0 hotpink)
 		drop-shadow(2px 0 0 hotpink)
 }
-.Russian.block.action {
+
+.Russian.block.action,
+.Russian.block.selected {
 	filter:
 		drop-shadow(0 -2px 0 orange)
 		drop-shadow(0 2px 0 orange)
@@ -356,28 +361,49 @@ body.shift #tooltip.focus { display: block; }
 		drop-shadow(2px 0 0 orange)
 }
 
-.cylinder.action {
+.cylinder.p0.action,
+.cylinder.p0.selected {
+	filter:
+		drop-shadow(0 -2px 0 silver)
+		drop-shadow(0 2px 0 silver)
+		drop-shadow(-2px 0 0 silver)
+		drop-shadow(2px 0 0 silver)
+}
+
+.cylinder.p1.action,
+.cylinder.p1.selected {
 	filter:
-		drop-shadow(0 -2px 0 yellow)
-		drop-shadow(0 2px 0 yellow)
-		drop-shadow(-2px 0 0 yellow)
-		drop-shadow(2px 0 0 yellow)
+		drop-shadow(0 -2px 0 skyblue)
+		drop-shadow(0 2px 0 skyblue)
+		drop-shadow(-2px 0 0 skyblue)
+		drop-shadow(2px 0 0 skyblue)
 }
 
-.block.selected {
+.cylinder.p2.action,
+.cylinder.p2.selected {
 	filter:
-		drop-shadow(0 -2px 0 deepskyblue)
-		drop-shadow(0 2px 0 deepskyblue)
-		drop-shadow(-2px 0 0 deepskyblue)
-		drop-shadow(2px 0 0 deepskyblue)
+		drop-shadow(0 -2px 0 gold)
+		drop-shadow(0 2px 0 gold)
+		drop-shadow(-2px 0 0 gold)
+		drop-shadow(2px 0 0 gold)
 }
 
-.cylinder.selected {
+.cylinder.p3.action,
+.cylinder.p3.selected {
 	filter:
-		drop-shadow(0 -2px 0 deepskyblue)
-		drop-shadow(0 2px 0 deepskyblue)
-		drop-shadow(-2px 0 0 deepskyblue)
-		drop-shadow(2px 0 0 deepskyblue)
+		drop-shadow(0 -2px 0 tomato)
+		drop-shadow(0 2px 0 tomato)
+		drop-shadow(-2px 0 0 tomato)
+		drop-shadow(2px 0 0 tomato)
+}
+
+.cylinder.p4.action,
+.cylinder.p4.selected {
+	filter:
+		drop-shadow(0 -2px 0 black)
+		drop-shadow(0 2px 0 black)
+		drop-shadow(-2px 0 0 black)
+		drop-shadow(2px 0 0 black)
 }
 
 /* FAVORED SUIT MARKER AND SPACES */
@@ -473,7 +499,7 @@ body.shift #tooltip.focus { display: block; }
 }
 
 .border, .region {
-	fill: none;
+	fill: transparent;
 	stroke: none;
 }
 
diff --git a/play.html b/play.html
index 1088c36..dec4065 100644
--- a/play.html
+++ b/play.html
@@ -45,9 +45,9 @@
 <aside>
 	<div id="roles">
 		<div id="banner" class="Political">
-			<div id="favored_suit_banner" class="icon" onclick="scroll_to_market()"></div>
-			<div id="map_banner"  class="icon"onclick="scroll_to_map()"></div>
-			<div id="hand_banner" class="icon" onclick="toggle_open_hands()"></div>
+			<div id="favored_suit_banner" class="icon" onclick="scroll_to_market()" onmouseenter="ui.status.textContent='Scroll to Market'" onmouseleave="on_blur()"></div>
+			<div id="map_banner"  class="icon"onclick="scroll_to_map()" onmouseenter="ui.status.textContent='Scroll to Map'" onmouseleave="on_blur()"></div>
+			<div id="hand_banner" class="icon" onclick="toggle_open_hands()" onmouseenter="ui.status.textContent='Hide/show hands'" onmouseleave="on_blur()"></div>
 		</div>
 
 		<div class="role hide" onclick="scroll_to_player(0)" id="role_Gray">
diff --git a/play.js b/play.js
index c1ffde0..df535e0 100644
--- a/play.js
+++ b/play.js
@@ -36,14 +36,23 @@ const region_index = {
 	"Punjab": Punjab,
 };
 
-const region_names = {
+const space_names = {
 	[Persia]: "Persia",
 	[Transcaspia]: "Transcaspia",
 	[Herat]: "Herat",
 	[Kabul]: "Kabul",
 	[Kandahar]: "Kandahar",
 	[Punjab]: "Punjab",
-};
+	[Persia_Transcaspia]: "Persia/Transcaspia",
+	[Persia_Herat]: "Persia/Herat",
+	[Transcaspia_Herat]: "Transcaspia/Herat",
+	[Transcaspia_Kabul]: "Transcaspia/Kabul",
+	[Herat_Kabul]: "Herat/Kabul",
+	[Herat_Kandahar]: "Herat/Kandahar",
+	[Kabul_Kandahar]: "Kabul/Kandahar",
+	[Kabul_Punjab]: "Kabul/Punjab",
+	[Kandahar_Punjab]: "Kandahar/Punjab",
+}
 
 cards.forEach(card => {
 	if (card) {
@@ -278,6 +287,10 @@ function on_focus_card(evt) {
 	}
 }
 
+function on_focus_space(evt) {
+	ui.status.textContent = space_names[evt.target.space];
+}
+
 function on_click_space(evt) {
 	send_action('space', evt.target.space);
 	evt.stopPropagation();
@@ -653,7 +666,10 @@ function on_update() {
 			else if (s <= 100)
 				ui.spyrows[s].appendChild(ui.pieces[x]);
 			else
-				ui.board.appendChild(ui.pieces[x]);
+			{
+				if (ui.pieces[x].parentElement !== ui.board)
+					ui.board.appendChild(ui.pieces[x]);
+			}
 			ui.pieces[x].classList.toggle('action', is_piece_action(x));
 			ui.pieces[x].classList.toggle('selected', view.selected === x);
 			ui.pieces[x].style = "";
@@ -662,9 +678,9 @@ function on_update() {
 
 	for (let i = 0; i < 6; ++i)
 		if (ruler[i] === -1)
-			ui.rule[i].classList = `rule ${region_names[i+Persia]} hide`;
+			ui.rule[i].classList = `rule ${space_names[i+Persia]} hide`;
 		else
-			ui.rule[i].classList = `rule ${region_names[i+Persia]} ${player_names[ruler[i]]}`;
+			ui.rule[i].classList = `rule ${space_names[i+Persia]} ${player_names[ruler[i]]}`;
 
 	ui.suit_political.classList.toggle('action', is_suit_action('Political'));
 	ui.suit_intelligence.classList.toggle('action', is_suit_action('Intelligence'));
@@ -746,6 +762,8 @@ function build_ui() {
 		ui.spaces[i] = document.getElementById("svgmap").getElementById(n);
 		ui.spaces[i].space = i;
 		ui.spaces[i].addEventListener("click", on_click_space);
+		ui.spaces[i].addEventListener("mouseenter", on_focus_space);
+		ui.spaces[i].addEventListener("mouseleave", on_blur);
 	}
 
 	for (let c = 1; c < cards.length; ++c) {