ROMMEL

From 8bef982a2a98a2bb12e49b9c2bccd832b645dc75 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 20 Oct 2023 19:03:59 +0200 Subject: Mobile layout. --- about.html | 7 ++--- play.css | 57 +++++++++++++++++++-------------------- play.html | 91 +++++++++++++++++++++++++++++--------------------------------- play.js | 12 +++++++-- 4 files changed, 82 insertions(+), 85 deletions(-) diff --git a/about.html b/about.html index 88cdbfd..76eb663 100644 --- a/about.html +++ b/about.html @@ -9,14 +9,11 @@ The object of the game is to hold Tobruk and its environs, or preserve a superior army if this area remains contested. Capturing the enemy Base wins the game immediately. -

Designer: Craig Besinque - -

Rulebook diff --git a/play.css b/play.css index 793278a..8967dd2 100644 --- a/play.css +++ b/play.css @@ -29,15 +29,21 @@ header.your_turn { background-color: orange; } /* CARDS */ .hand { - margin: 24px; + margin: 0 auto; + padding: 24px; display: flex; flex-wrap: wrap; justify-content: center; min-height: 170px; - max-width: 2672px; + min-width: 850px; + max-width: 2624px; gap: 20px; } +@media (max-width: 800px) { + .hand { min-width: 2624px; } +} + .card { background-size: cover; background-repeat: no-repeat; @@ -62,6 +68,24 @@ header.your_turn { background-color: orange; } } +/* BATTLE & PURSUIT DIALOGS */ + +#battle, #pursuit { + z-index: 100; + 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; } + /* BATTLE DIALOG */ #battle { background-color: #d6c4a9; background: url(texture_clear.png); } @@ -70,17 +94,6 @@ header.your_turn { background-color: orange; } #battle_buttons { background-color: #c4ab8b; } #battle_message { background-color: #d6c4a9; } -#battle { - position: fixed; - min-width: 524px; /* 6 blocks wide */ - left: 12px; - top: 56px; - z-index: 100; - box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - border: 1px solid black; - user-select: none; -} - #battle_header { cursor: move; padding: 2px 8px; @@ -144,17 +157,6 @@ header.your_turn { background-color: orange; } #pursuit_buttons { background-color: #c4ab8b; } #pursuit_message { background-color: #d6c4a9; } -#pursuit { - position: fixed; - min-width: 524px; /* 6 blocks wide */ - left: 12px; - top: 56px; - z-index: 100; - box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5); - border: 1px solid black; - user-select: none; -} - #pursuit_header { cursor: move; padding: 2px 8px; @@ -205,17 +207,12 @@ td img { vertical-align: middle } /* MAP */ -#mapwrap { - width: 2672px; - height: 960px; - box-shadow: 0px 1px 10px rgba(0,0,0,0.5); -} - #map { background-repeat: no-repeat; width: 2672px; height: 960px; overflow: clip; + box-shadow: 0px 1px 10px rgba(0,0,0,0.5); } #mapsvg { diff --git a/play.html b/play.html index 53c5ead..e7ed795 100644 --- a/play.html +++ b/play.html @@ -2,19 +2,58 @@ - + + ROMMEL - + - + +
+
+
+
+ +
Rules +
Units +
+
Resign +
+
+ + +
+
+ +
+
+
+
+ Axis +
0
+
-
+
+
+
+
+ Allied +
0
+
-
+
+
+
+
+
+ +
+

@@ -54,48 +93,6 @@

-
-
-
-
-
- Rules - Units -
-
Resign
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- Axis -
0
-
-
-
-
-
-
- Allied -
0
-
-
-
-
-
-
-
- -
-

@@ -257,11 +254,9 @@
-

-
-
+

diff --git a/play.js b/play.js index 56802ce..dfa7f6a 100644 --- a/play.js +++ b/play.js @@ -945,7 +945,11 @@ function update_battle_line(hex, line, test) { } function update_battle() { - ui.battle.classList.remove("hide") + if (ui.battle.classList.contains("hide")) { + ui.battle.classList.remove("hide") + ui.battle.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" }) + + } ui.battle_header.textContent = hex_name[view.battle] ui.battle_message.textContent = view.flash if (player === ALLIED) { @@ -970,7 +974,11 @@ function update_battle() { } function update_pursuit() { - ui.pursuit.classList.remove("hide") + if (ui.pursuit.classList.contains("hide")) { + ui.pursuit.classList.remove("hide") + ui.pursuit.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" }) + + } ui.pursuit_header.textContent = "Pursuit Fire at " + hex_name[view.pursuit] ui.pursuit_message.textContent = view.flash if (player === ALLIED) { -- cgit v1.2.3