diff options
| -rw-r--r-- | play.css | 27 | ||||
| -rw-r--r-- | play.html | 1 | ||||
| -rw-r--r-- | play.js | 44 |
3 files changed, 54 insertions, 18 deletions
@@ -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; @@ -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> @@ -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)) } } |