Mobile layout.

author: Tor Andersson <tor@ccxvii.net> 2023-10-20 19:03:59 +0200
committer: Tor Andersson <tor@ccxvii.net> 2023-10-20 19:22:00 +0200
commit: 8bef982a2a98a2bb12e49b9c2bccd832b645dc75 (patch)
tree: acfc6c3efdb47f8f3250e844c85e5e5ffdcdbcd9
parent: 21eb4623ffaf9a86986f3a9ac5d61b9cb38171cf (diff)
download: rommel-in-the-desert-8bef982a2a98a2bb12e49b9c2bccd832b645dc75.tar.gz
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.
 
-<br clear=left>
 
 <p>
 Designer: Craig Besinque
-
-<p>
-Copyright &copy; 1984-2022
-<a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3421">Columbia Games</a>.
+<br> Copyright &copy; 1984-2022 <a href="https://columbiagames.com/cgi-bin/query/cfg/zoom.cfg?product_id=3421">Columbia Games</a>.
+<br> Programming &copy; 2022 Tor Andersson;
 
 <ul>
 <li><a href="/rommel-in-the-desert/info/rules.html">Rulebook</a>
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 @@
 <!-- vim:set nowrap: -->
 <html lang="en">
 <head>
-<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover">
+<meta name="theme-color" content="#444">
 <meta charset="utf-8">
 <title>ROMMEL</title>
 <link rel="icon" href="favicon.png">
 <link rel="stylesheet" href="/fonts/fonts.css">
-<link rel="stylesheet" href="/common/play.css">
+<link rel="stylesheet" href="/common/client.css">
 <link rel="stylesheet" href="play.css">
-<script defer src="/common/play.js"></script>
+<script defer src="/common/client.js"></script>
 <script defer src="data.js"></script>
 <script defer src="play.js"></script>
 </head>
 <body>
 
+<header>
+	<div id="toolbar">
+		<details>
+			<summary><img src="/images/cog.svg"></summary>
+			<menu>
+				<li><a href="info/rules.html" target="_blank">Rules</a>
+				<li><a href="info/units.html" target="_blank">Units</a>
+				<li class="resign separator">
+				<li class="resign" onclick="confirm_resign()">Resign
+			</menu>
+		</details>
+		<button onclick="toggle_supply()"><img src="/images/oil-drum.svg"></button>
+		<button onclick="toggle_units()"><img src="/images/earth-africa-europe.svg"></button>
+	</div>
+</header>
+
+<aside>
+	<div id="roles">
+		<div class="role" id="role_Axis">
+			<div class="role_name">
+				Axis
+				<div class="role_supply" id="axis_supply">0</div>
+				<div class="role_user">-</div>
+			</div>
+		</div>
+		<div class="role" id="role_Allied">
+			<div class="role_name">
+				Allied
+				<div class="role_supply" id="allied_supply">0</div>
+				<div class="role_user">-</div>
+			</div>
+		</div>
+	</div>
+	<div id="log"></div>
+</aside>
+
+<main data-min-zoom="1" data-max-zoom="1">
+
 <div id="battle" class="hide">
 	<div id="battle_header"></div>
 	<div id="battle_hits">
@@ -54,48 +93,6 @@
 	<div id="pursuit_message"></div>
 </div>
 
-<header>
-	<div id="toolbar">
-		<div class="menu">
-			<div class="menu_title"><img src="/images/cog.svg"></div>
-			<div class="menu_popup">
-				<a class="menu_item" href="info/rules.html" target="_blank">Rules</a>
-				<a class="menu_item" href="info/units.html" target="_blank">Units</a>
-				<div class="resign menu_separator"></div>
-				<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
-			</div>
-		</div>
-		<div class="icon_button" onclick="toggle_supply()"><img src="/images/oil-drum.svg"></div>
-		<div class="icon_button" onclick="toggle_units()"><img src="/images/earth-africa-europe.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>
-	<div id="prompt"></div>
-	<div id="actions"></div>
-</header>
-
-<aside>
-	<div id="roles">
-		<div class="role" id="role_Axis">
-			<div class="role_name">
-				Axis
-				<div class="role_supply" id="axis_supply">0</div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-		<div class="role" id="role_Allied">
-			<div class="role_name">
-				Allied
-				<div class="role_supply" id="allied_supply">0</div>
-				<div class="role_user">-</div>
-			</div>
-		</div>
-	</div>
-	<div id="log"></div>
-</aside>
-
-<main>
-<div id="mapwrap">
 <div id="map">
 
 <!-- BEGIN INSERT MAP FILE -->
@@ -258,10 +255,8 @@
 </div>
 
 </div>
-</div>
 
-<div id="hand" class="hand">
-</div>
+<div id="hand" class="hand"></div>
 
 </main>
 
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) {
author	Tor Andersson <tor@ccxvii.net>	2023-10-20 19:03:59 +0200
committer	Tor Andersson <tor@ccxvii.net>	2023-10-20 19:22:00 +0200
commit	8bef982a2a98a2bb12e49b9c2bccd832b645dc75 (patch)
tree	acfc6c3efdb47f8f3250e844c85e5e5ffdcdbcd9
parent	21eb4623ffaf9a86986f3a9ac5d61b9cb38171cf (diff)
download	rommel-in-the-desert-8bef982a2a98a2bb12e49b9c2bccd832b645dc75.tar.gz