From 09909588d69878b1a3cb10adc497f82eb3f9c85d Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 21 Oct 2023 14:19:22 +0200 Subject: Place battle and pursuit boxes next to the hexes. --- play.css | 39 ++++++++++++++++++++++++--------------- play.html | 12 ++++++------ play.js | 57 +++++++++++++++++++++++++++++++++++++-------------------- 3 files changed, 67 insertions(+), 41 deletions(-) diff --git a/play.css b/play.css index c8b8fd7..1536227 100644 --- a/play.css +++ b/play.css @@ -29,8 +29,8 @@ header.your_turn { background-color: orange; } /* CARDS */ .hand { - margin: 0 auto; - padding: 24px; + margin: 0 auto 85px auto; + padding: 24px; display: flex; flex-wrap: wrap; justify-content: center; @@ -71,20 +71,21 @@ header.your_turn { background-color: orange; } /* BATTLE & PURSUIT DIALOGS */ #battle, #pursuit { - z-index: 100; + position: absolute; + scroll-margin: 20px; + z-index: 200; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); border: 1px solid black; - user-select: none; -} - -#battle, #pursuit { - position: absolute; min-width: 524px; /* 6 blocks wide */ min-width: 550px; /* 4.5 hexes wide */ } -#battle { left: 696px; top: 475px; } -#pursuit { left: 696px; top: 590px; } +@media (max-width: 400px) { + #battle, #pursuit { + min-width: 90vw; + min-width: 90dvw; + } +} /* BATTLE DIALOG */ @@ -95,12 +96,17 @@ header.your_turn { background-color: orange; } #battle_message { background-color: #d6c4a9; } #battle_header { - cursor: move; + list-style: none; + cursor: s-resize; padding: 2px 8px; line-height: 24px; min-height: 24px; text-align: center; font-weight: bold; +} + +#battle[open] #battle_header { + cursor: n-resize; border-bottom: 1px solid black; } @@ -158,12 +164,17 @@ header.your_turn { background-color: orange; } #pursuit_message { background-color: #d6c4a9; } #pursuit_header { - cursor: move; + list-style: none; + cursor: s-resize; padding: 2px 8px; line-height: 24px; min-height: 24px; text-align: center; font-weight: bold; +} + +#pursuit[open] #pursuit_header { + cursor: n-resize; border-bottom: 1px solid black; } @@ -193,7 +204,7 @@ header.your_turn { background-color: orange; } /* TABLES */ -table { border-collapse: collapse; font-size: 12px; user-select: none; } +table { border-collapse: collapse; font-size: 12px; } td.blank { background-color: transparent; border: none } td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; } td { min-width: 16px; height: 19px; } @@ -225,11 +236,9 @@ td img { vertical-align: middle } #mapsvg { display: block; position: absolute; - user-select: none; } #calendar, #calendar2 { - user-select: none; position: absolute; display: flex; top: 24px; diff --git a/play.html b/play.html index 2fd0b18..7c227f6 100644 --- a/play.html +++ b/play.html @@ -54,8 +54,8 @@
-
-
+
+
0
@@ -79,10 +79,10 @@
-
+ -
-
Pursuit Fire: $NAME
+
+ Pursuit Fire: $NAME
0 hits
@@ -91,7 +91,7 @@
- +
diff --git a/play.js b/play.js index 2a8ae7f..f1d659f 100644 --- a/play.js +++ b/play.js @@ -6,12 +6,6 @@ const svgNS = "http://www.w3.org/2000/svg" const round = Math.round const sqrt = Math.sqrt -function scroll_into_view_if_mobile(e) { - // if ("ontouchstart" in window) - if (window.innerWidth <= 800) - e.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" }) -} - // refit and queue hexes const MALTA = 4 const hex_special = [ 47, 48, 49, 53, 102, 127, MALTA ] @@ -942,11 +936,6 @@ function update_battle_line(hex, line, test) { } function update_battle() { - if (ui.battle.classList.contains("hide")) { - ui.battle.classList.remove("hide") - scroll_into_view_if_mobile(ui.battle) - - } ui.battle_header.textContent = hex_name[view.battle] ui.battle_message.textContent = view.flash if (player === ALLIED) { @@ -968,13 +957,41 @@ function update_battle() { battle_button("battle_artillery_button", "artillery") battle_button("battle_end_hits_button", "end_hits") battle_button("battle_end_fire_button", "end_fire") + if (ui.battle.classList.contains("hide")) { + ui.battle.classList.remove("hide") + show_battle_box(ui.battle, view.battle) + } +} + +function show_battle_box(box, hex_id) { + // reset position + box.classList.add("show") + box.style.top = null + box.style.left = null + box.setAttribute("open", true) + + // calculate size + let w = box.clientWidth + let h = box.clientHeight + + // center where possible + let x = ui.hex_x[hex_id] - w / 2 + if (x < 60) + x = 60 + if (x > 2672 - w - 60) + x = 2672 - w - 60 + + let y = ui.hex_y[hex_id] - h - 160 + if (y < 20) + y = ui.hex_y[hex_id] + 160 + + box.style.top = y + "px" + box.style.left = x + "px" + + scroll_into_view_if_needed(box) } function update_pursuit() { - if (ui.pursuit.classList.contains("hide")) { - ui.pursuit.classList.remove("hide") - scroll_into_view_if_mobile(ui.pursuit) - } ui.pursuit_header.textContent = "Pursuit Fire at " + hex_name[view.pursuit] ui.pursuit_message.textContent = view.flash if (player === ALLIED) { @@ -991,6 +1008,10 @@ function update_pursuit() { ui.pursuit_hits.textContent = view.hits + " hits" battle_button("pursuit_end_hits_button", "end_hits") battle_button("pursuit_end_fire_button", "end_fire") + if (ui.pursuit.classList.contains("hide")) { + ui.pursuit.classList.remove("hide") + show_battle_box(ui.pursuit, view.pursuit) + } } function battle_button(id, action) { @@ -1091,7 +1112,7 @@ function on_focus_hex_tip(x) { } function on_click_hex_tip(x) { - ui.hexes[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" }) + scroll_into_view(ui.hexes[x]) } function on_blur_hex_tip(x) { @@ -1170,7 +1191,3 @@ function on_log(text) { } build_hexes() - -drag_element_with_mouse("#battle", "#battle_header") -drag_element_with_mouse("#pursuit", "#pursuit_header") -scroll_with_middle_mouse("main") -- cgit v1.2.3