From 0bf844ab600e4a75057548ac54544b0850d20e9f Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sun, 1 Oct 2023 00:30:27 +0200
Subject: Show zoc/zoi and hq ranges with toggle button.
---
play.css | 27 ++++++++++++++-------------
play.html | 1 +
play.js | 44 +++++++++++++++++++++++++++++++++++++++-----
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))
}
}
--
cgit v1.2.3