diff options
| -rw-r--r-- | play.css | 39 | ||||
| -rw-r--r-- | play.html | 12 | ||||
| -rw-r--r-- | play.js | 57 |
3 files changed, 67 insertions, 41 deletions
@@ -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; @@ -54,8 +54,8 @@ <main data-min-zoom="1" data-max-zoom="2"> -<div id="battle" class="hide"> - <div id="battle_header"></div> +<details id="battle" class="hide"> + <summary id="battle_header"></summary> <div id="battle_hits"> <img class="hits_icon" src="icons/armor.svg"> <div class="hits_text" id="hits_armor">0</div> @@ -79,10 +79,10 @@ <button id="battle_end_fire_button" onclick="send_action('end_fire')">Done</button> </div> <div id="battle_message"></div> -</div> +</details> -<div id="pursuit" class="hide"> - <div id="pursuit_header">Pursuit Fire: $NAME</div> +<details id="pursuit" class="hide"> + <summary id="pursuit_header">Pursuit Fire: $NAME</summary> <div id="pursuit_hits">0 hits</div> <div class="battle_line" id="pursuit_line_1"></div> <div class="battle_line" id="pursuit_line_2"></div> @@ -91,7 +91,7 @@ <button id="pursuit_end_fire_button" onclick="send_action('end_fire')">End fire</button> </div> <div id="pursuit_message"></div> -</div> +</details> <div id="map"> @@ -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") |