Add shift zooming on counters.

2 files changed, 13 insertions, 3 deletions

diff --git a/play.css b/play.css
index 2f09aaa..4ac1ea1 100644
--- a/play.css
+++ b/play.css
@@ -290,3 +290,13 @@ div.french.tip, div.anglo.tip, div.prussian.tip {
 .d4 { background-position: 60% 0; }
 .d5 { background-position: 80% 0; }
 .d6 { background-position: 100% 0; }
+
+body.shift .large:hover { transform: scale(2) }
+body.shift .small:hover { transform: scale(2) }
+body.shift .large.french:hover { background-image: url(images/sheet_french1_150.webp) }
+body.shift .large.anglo:hover { background-image: url(images/sheet_anglo1_150.webp) }
+body.shift .large.prussian:hover { background-image: url(images/sheet_prussian1_150.webp) }
+body.shift .large.marker:hover { background-image: url(images/sheet_misc_150.webp) }
+body.shift .small.french:hover { background-image: url(images/sheet_french2_150.webp) }
+body.shift .small.anglo:hover { background-image: url(images/sheet_anglo2_150.webp) }
+body.shift .small.prussian:hover { background-image: url(images/sheet_prussian2_150.webp) }
diff --git a/play.js b/play.js
index 83a999d..41b8c95 100644
--- a/play.js
+++ b/play.js
@@ -270,6 +270,7 @@ var focused_piece = -1
 
 function on_focus_piece(evt) {
 	let p = evt.target.my_id
+	evt.target.style.zIndex = 300
 	document.getElementById("status").textContent = evt.target.my_name
 	if (data.pieces[p].type === "hq") {
 		focused_piece = p
@@ -279,6 +280,7 @@ function on_focus_piece(evt) {
 
 function on_blur_piece(evt) {
 	let p = evt.target.my_id
+	evt.target.style.zIndex = evt.target.my_z
 	on_blur()
 	if (data.pieces[p].type === "hq") {
 		focused_piece = -1
@@ -490,7 +492,6 @@ function on_update() {
 			}
 			ui.pieces[id].style.top = y + "px"
 			ui.pieces[id].style.left = x + "px"
-			ui.pieces[id].style.zIndex = z
 		} else if (hex >= AVAILABLE_P1 && hex <= BLOWN) {
 			// OFF MAP DETACHMENTS / LEADERS / REINFORCEMENTS
 			ui.pieces[id].classList.remove("hide")
@@ -500,7 +501,6 @@ function on_update() {
 			ui.stack[hex] += 1
 			ui.pieces[id].style.top = y + "px"
 			ui.pieces[id].style.left = x + "px"
-			ui.pieces[id].style.zIndex = 0
 		} else if (hex >= 1 && hex <= 20) {
 			// ON TURN TRACK
 			ui.pieces[id].classList.remove("hide")
@@ -521,9 +521,9 @@ function on_update() {
 			// ELIMINATED or SWAPPED
 			ui.pieces[id].classList.add("hide")
 		}
-		//if (is_action("piece", id)) z = 101
 		if (view.target === id) z = 102
 		if (view.who === id) z = 103
+		ui.pieces[id].my_z = z
 		ui.pieces[id].style.zIndex = z
 		ui.pieces[id].classList.toggle("action", is_action("piece", id))
 		ui.pieces[id].classList.toggle("selected", view.who === id)