summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--play.css39
-rw-r--r--play.html12
-rw-r--r--play.js57
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 @@
<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">
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")