Show zoc/zoi and hq ranges with toggle button.

3 files changed, 54 insertions, 18 deletions

diff --git a/play.css b/play.css
index f4676d8..2f09aaa 100644
--- a/play.css
+++ b/play.css
@@ -110,10 +110,6 @@ main {
 	border: 4px solid transparent;
 }
 
-.hex.range {
-	background-color: #ff03;
-}
-
 .hex.action {
 	border: 4px solid #fff6;
 	background-color: #fff2;
@@ -125,17 +121,22 @@ main {
 	background-color: #f002;
 }
 
-.hex.move {
-	background-color: #0a04;
-}
+.hex.move { background-color: #0a04 !important }
+.hex.road { background-color: #8804 !important }
+.hex.move.stop, .hex.road.stop { background-color: #f006 !important }
 
-.hex.road {
-	background-color: #8804;
-}
+.hex.f_range { background-color: #05a6 !important }
+.hex.a_range { background-color: #b326 !important }
+.hex.p_range { background-color: #8286 !important }
 
-.hex.move.stop, .hex.road.stop {
-	background-color: #f006;
-}
+#hexes.p1hq .hex.p1hq { background-color: #05a4 }
+#hexes.p2hq .hex.p2hq { background-color: #b324 }
+
+#hexes.p1zoc .hex.p1zoi { background-color: #05a4 }
+#hexes.p1zoc .hex.p1zoc { background-color: #05a8 }
+
+#hexes.p2zoc .hex.p2zoi { background-color: #b324 }
+#hexes.p2zoc .hex.p2zoc { background-color: #b328 }
 
 .large {
 	position: absolute;
diff --git a/play.html b/play.html
index 2b125bd..f7d9d99 100644
--- a/play.html
+++ b/play.html
@@ -26,6 +26,7 @@
 		</div>
 	</div>
 	<div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></div>
+	<div class="icon_button" onclick="toggle_hexes()"><img src="images/nested-hexagons.svg"></div>
 	<div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
 	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
 	</div>
diff --git a/play.js b/play.js
index 12228da..83a999d 100644
--- a/play.js
+++ b/play.js
@@ -207,8 +207,19 @@ function toggle_pieces() {
 	document.getElementById("pieces").classList.toggle("hide")
 }
 
-function toggle_zoc() {
-	document.getElementById("hexes").classList.toggle("zoc")
+function toggle_hexes() {
+	// Cycle between showing nothing, command ranges, and zocs
+	let elt = document.getElementById("hexes")
+	if (elt.className == "")
+		elt.className = "p1hq"
+	else if (elt.className == "p1hq")
+		elt.className = "p2hq"
+	else if (elt.className == "p2hq")
+		elt.className = "p1zoc"
+	else if (elt.className == "p1zoc")
+		elt.className = "p2zoc"
+	else if (elt.className == "p2zoc")
+		elt.className = ""
 }
 
 function is_action(action, arg) {
@@ -337,7 +348,7 @@ function show_move_path(x) {
  * SHOW HQ RANGE (FOR HQ MOUSEOVER)
  */
 
-function is_in_range(x, hq) {
+function is_on_range(x, hq) {
 	let hq_x = view.pieces[hq] >> 1
 	if (hq_x >= 1000) {
 		let hq_m = view.pieces[hq] & 1
@@ -347,11 +358,26 @@ function is_in_range(x, hq) {
 	return false
 }
 
+function is_in_range(x, hq) {
+	let hq_x = view.pieces[hq] >> 1
+	if (hq_x >= 1000) {
+		let hq_m = view.pieces[hq] & 1
+		let hq_r = hq_m ? data.pieces[hq].range2 : data.pieces[hq].range1
+		return calc_distance(x, hq_x) <= hq_r
+	}
+	return false
+}
+
 function show_hq_range(hq) {
 	for (let row = 0; row < data.map.rows; ++row) {
 		for (let col = 0; col < data.map.cols; ++col) {
 			let id = first_hex + row * 100 + col
-			ui.hexes[id].classList.toggle("range", is_in_range(id, hq))
+			if (hq <= 2)
+				ui.hexes[id].classList.toggle("f_range", is_on_range(id, hq))
+			else if (hq === 3)
+				ui.hexes[id].classList.toggle("a_range", is_on_range(id, hq))
+			else if (hq === 4)
+				ui.hexes[id].classList.toggle("p_range", is_on_range(id, hq))
 		}
 	}
 }
@@ -360,7 +386,9 @@ function hide_hq_range() {
 	for (let row = 0; row < data.map.rows; ++row) {
 		for (let col = 0; col < data.map.cols; ++col) {
 			let id = first_hex + row * 100 + col
-			ui.hexes[id].classList.remove("range")
+			ui.hexes[id].classList.remove("f_range")
+			ui.hexes[id].classList.remove("a_range")
+			ui.hexes[id].classList.remove("p_range")
 		}
 	}
 }
@@ -395,6 +423,12 @@ function on_update() {
 			let id = first_hex + row * 100 + col
 			ui.hexes[id].classList.toggle("action", is_action("hex", id) || is_action("stop_hex", id))
 			ui.hexes[id].classList.toggle("stop", is_action("stop_hex", id))
+			ui.hexes[id].classList.toggle("p1zoc", is_p1_zoc(id))
+			ui.hexes[id].classList.toggle("p1zoi", is_p1_zoi(id))
+			ui.hexes[id].classList.toggle("p2zoc", is_p2_zoc(id))
+			ui.hexes[id].classList.toggle("p2zoi", is_p2_zoi(id))
+			ui.hexes[id].classList.toggle("p1hq", is_in_range(id, 0) || is_in_range(id, 1) || is_in_range(id, 2))
+			ui.hexes[id].classList.toggle("p2hq", is_in_range(id, 3) || is_in_range(id, 4))
 		}
 	}