Mobile layout.

author: Tor Andersson <tor@ccxvii.net> 2023-10-19 01:58:07 +0200
committer: Tor Andersson <tor@ccxvii.net> 2023-10-20 19:03:27 +0200
commit: 92233e0f8d7334f6d1b8df921fd16bfc5e6324fc (patch)
tree: fd0442a9e179f5f6e0356b9c4dccda67c2d6c631
parent: 467a0502f9c7dd44002ddb75277447971eaf965e (diff)
download: red-flag-over-paris-92233e0f8d7334f6d1b8df921fd16bfc5e6324fc.tar.gz
4 files changed, 85 insertions, 97 deletions
diff --git a/about.html b/about.html
index 1f60583..05ec22e 100644
--- a/about.html
+++ b/about.html
@@ -6,14 +6,10 @@ political and military maneuvering, culminating in a
 Final Crisis representing the “Bloody Week” in May
 of 1871.
 
-<br clear="left">
-
-<p>
-Designer: Fred Serval
-
 <p>
-Copyright &copy; 2021
-<a href="https://www.gmtgames.com/p-996-red-flag-over-paris-2nd-printing.aspx">GMT Games, LLC</a>.
+Designer: Fred Serval.
+<br> Copyright &copy; 2021 <a href="https://www.gmtgames.com/p-996-red-flag-over-paris-2nd-printing.aspx">GMT Games, LLC</a>.
+<br> Programming &copy; 2022 Tor Andersson.
 
 <ul>
 <li><a href="/red-flag-over-paris/info/rules.html">Rules</a>
diff --git a/play.css b/play.css
index 2261ede..69eaff1 100644
--- a/play.css
+++ b/play.css
@@ -41,21 +41,21 @@ body.Versailles header.your_turn { background-color: hsl(199, 45%, 70%); }
 
 .panel_grid {
 	display: flex;
-	flex-wrap: wrap;
 	justify-content: center;
-	margin: 20px;
+	min-width: 1500px;
+	max-width: 1500px;
+	margin: 20px auto;
 	gap: 20px;
 }
 
-#final, #hand, #discard, #set_aside, #red_objective, #blue_objective {
-	min-height: 350px;
-	min-width: 250px;
-}
-
-#hand_panel { width: clamp(290px, 1100px, 100%) }
-body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
-#final_panel { width: clamp(290px, 560px, 100%) }
-#set_aside_panel { width: clamp(290px, 830px, 100%) }
+#final, #hand, #discard, #set_aside, #red_objective, #blue_objective { min-height: 350px; }
+#hand_panel { min-width: 1100px; }
+body.censorship #hand_panel { min-width: 1370px; }
+#final_panel { min-width: 560px; }
+#set_aside_panel { min-width: 830px; }
+#discard_panel { min-width: 290px; }
+#red_objective_panel,
+#blue_objective_panel { min-width: 290px; max-width: 560px; }
 
 #red_objective_header { background-color: hsl(358, 20%, 28%) }
 #blue_objective_header { background-color: hsl(199, 20%, 26%) }
@@ -96,11 +96,22 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 
 #tooltip {
 	position: fixed;
-	z-index: 100;
+	pointer-events: none;
+	z-index: 600;
 	right: 240px;
 	top: 60px;
 }
 
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 /* MAP */
 
 #mapwrap {
@@ -400,21 +411,3 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 .card_52{background-image:url(cards.2x/objective_11.jpg)}
 .card_53{background-image:url(cards.2x/objective_12.jpg)}
 }
-
-/* MOBILE LAYOUT */
-
-@media (max-width: 640px) {
-	#mapwrap {
-		margin: 0
-	}
-	.panel_grid {
-		gap: 0;
-		margin: 0;
-	}
-	.panel {
-		width: 100% !important;
-	}
-	.panel_body {
-		justify-content: center;
-	}
-}
diff --git a/play.html b/play.html
index a0cadf1..82b4619 100644
--- a/play.html
+++ b/play.html
@@ -2,14 +2,15 @@
 <!-- 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>RED FLAG OVER PARIS</title>
 <link rel="icon" href="favicon.svg">
 <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="play.js"></script>
 </head>
 <body>
@@ -18,21 +19,17 @@
 
 <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/censorship.html" target="_blank">Reference</a>
-			<a class="menu_item" href="info/cards.html" target="_blank">Cards</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_zoom()"><img src="/images/magnifying-glass.svg"></div>
-	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
+		<details>
+			<summary><img src="/images/cog.svg"></summary>
+			<menu>
+				<li><a href="info/rules.html" target="_blank">Rules</a>
+				<li><a href="info/censorship.html" target="_blank">Reference</a>
+				<li><a href="info/cards.html" target="_blank">Cards</a>
+				<li class="resign separator">
+				<li class="resign" onclick="confirm_resign()">Resign
+			</menu>
+		</details>
 	</div>
-	<div id="prompt"></div>
-	<div id="actions"></div>
 </header>
 
 <aside>
@@ -55,56 +52,62 @@
 	<div id="log"></div>
 </aside>
 
-<main>
+<main data-min-zoom="1" data-max-zoom="1">
+
+	<div id="mapwrap">
+		<div id="map">
+			<div id="spaces"></div>
+			<div id="pieces">
+				<div id="round_marker" class="piece pawn round1"></div>
+				<div id="political_vp" class="piece cylinder orange vp5"></div>
+				<div id="military_vp" class="piece cylinder purple vp5"></div>
+				<div id="red_momentum" class="piece cylinder red m0"></div>
+				<div id="blue_momentum" class="piece cylinder blue m0"></div>
+			</div>
+		</div>
+	</div>
 
-<div id="mapwrap">
-<div id="map">
-<div id="spaces"></div>
-<div id="pieces">
-<div id="round_marker" class="piece pawn round1"></div>
-<div id="political_vp" class="piece cylinder orange vp5"></div>
-<div id="military_vp" class="piece cylinder purple vp5"></div>
-<div id="red_momentum" class="piece cylinder red m0"></div>
-<div id="blue_momentum" class="piece cylinder blue m0"></div>
-</div>
-</div>
-</div>
+	<div class="panel_grid">
 
-<div class="panel_grid">
+		<div id="hand_panel" class="panel hide">
+		<div id="hand_header" class="panel_header">Hand</div>
+		<div id="hand" class="panel_body"></div>
+		</div>
 
-<div id="hand_panel" class="panel hide">
-<div id="hand_header" class="panel_header">Hand</div>
-<div id="hand" class="panel_body"></div>
-</div>
+		<div id="discard_panel" class="panel">
+		<div id="discard_header" class="panel_header">Discard</div>
+		<div id="discard" class="panel_body"></div>
+		</div>
 
+	</div>
 
-<div id="discard_panel" class="panel">
-<div id="discard_header" class="panel_header">Discard</div>
-<div id="discard" class="panel_body"></div>
-</div>
+	<div class="panel_grid">
 
-<div id="final_panel" class="panel">
-<div id="final_header" class="panel_header">Final Cards</div>
-<div id="final" class="panel_body"></div>
-</div>
+		<div id="final_panel" class="panel">
+		<div id="final_header" class="panel_header">Final Cards</div>
+		<div id="final" class="panel_body"></div>
+		</div>
 
+		<div id="blue_objective_panel" class="panel">
+		<div id="blue_objective_header" class="panel_header">Versailles Objective</div>
+		<div id="blue_objective" class="panel_body"></div>
+		</div>
 
-<div id="blue_objective_panel" class="panel">
-<div id="blue_objective_header" class="panel_header">Versailles Objective</div>
-<div id="blue_objective" class="panel_body"></div>
-</div>
+		<div id="red_objective_panel" class="panel">
+		<div id="red_objective_header" class="panel_header">Commune Objective</div>
+		<div id="red_objective" class="panel_body"></div>
+		</div>
 
-<div id="red_objective_panel" class="panel">
-<div id="red_objective_header" class="panel_header">Commune Objective</div>
-<div id="red_objective" class="panel_body"></div>
-</div>
+	</div>
 
-<div id="set_aside_panel" class="panel hide">
-<div id="set_aside_header" class="panel_header">Set-aside cards</div>
-<div id="set_aside" class="panel_body"></div>
-</div>
+	<div class="panel_grid">
 
-</div>
+		<div id="set_aside_panel" class="panel hide">
+		<div id="set_aside_header" class="panel_header">Set-aside cards</div>
+		<div id="set_aside" class="panel_body"></div>
+		</div>
+
+	</div>
 
 </main>
 
diff --git a/rules.js b/rules.js
index 6442101..6453504 100644
--- a/rules.js
+++ b/rules.js
@@ -3474,10 +3474,6 @@ function draw_strategy_card() {
 
 // === VIEW ===
 
-exports.is_checkpoint = function (a, b) {
-	return a.round !== b.round
-}
-
 exports.view = function (state, player) {
 	game = state
author	Tor Andersson <tor@ccxvii.net>	2023-10-19 01:58:07 +0200
committer	Tor Andersson <tor@ccxvii.net>	2023-10-20 19:03:27 +0200
commit	92233e0f8d7334f6d1b8df921fd16bfc5e6324fc (patch)
tree	fd0442a9e179f5f6e0356b9c4dccda67c2d6c631
parent	467a0502f9c7dd44002ddb75277447971eaf965e (diff)
download	red-flag-over-paris-92233e0f8d7334f6d1b8df921fd16bfc5e6324fc.tar.gz