Put cards along right side of map if zoomed out / wide screen.

4 files changed, 39 insertions, 14 deletions

diff --git a/play.css b/play.css
index a776fc6..8354f2d 100644
--- a/play.css
+++ b/play.css
@@ -11,6 +11,7 @@ main { background-color: #777; }
 
 #log { background-color: whitesmoke; }
 #log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; }
+#log .h1 { background-image: linear-gradient(60deg, skyblue, khaki, lightcoral, darkseagreen) }
 #log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; }
 #log .h2.govt { background-color: #c6d1eb }
 #log .h2.farc { background-color: #ebc9be }
@@ -24,7 +25,6 @@ main { background-color: #777; }
 #log div { padding-left: 20px; text-indent: -12px; }
 #log div.indent { padding-left: 32px; text-indent: -12px; }
 
-#log .h1 { background-image: linear-gradient(60deg, skyblue, khaki, lightcoral, darkseagreen) }
 
 #log { font-variant-numeric: tabular-nums; }
 
@@ -39,6 +39,19 @@ main { background-color: #777; }
 	top: 60px;
 }
 
+
+/* Put cards on right of map when zoomed to fit, or very wide screen */
+main { grid-template-columns: 1fr min-content min-content 1fr; }
+#mapwrap { grid-row: 1; grid-column: 2 }
+#card_panel { grid-row: 1; grid-column: 3 }
+@media (min-width: 2200px) { main { display: grid; } }
+main.fit { display: grid; }
+/*
+main.fit #deck_outer { height: 96px; background-position: 0 -15px }
+*/
+
+/* MAP */
+
 #mapwrap {
 	box-shadow: 0px 1px 10px #0008;
 	width: 1650px;
@@ -46,6 +59,10 @@ main { background-color: #777; }
 	margin-bottom: 36px;
 }
 
+#mapwrap.fit {
+	margin-bottom: 0
+}
+
 #map {
 	width: 1650px;
 	height: 2550px;
@@ -205,10 +222,6 @@ path.tip { stroke: yellow; }
 	height: 36px;
 }
 
-.token.reminder {
-	//margin: 4px 5px 5px 4px;
-}
-
 .token.shipment
 {
 	border-radius: 50%;
@@ -324,13 +337,13 @@ path.tip { stroke: yellow; }
 /* CARDS */
 
 #card_panel {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 18px;
-	padding: 0 18px;
-	max-width: 1614px;
-	margin: 36px auto;
+	text-align: center;
+	margin: 24px;
+}
+
+#card_panel .card {
+	display: inline-block;
+	margin: 9px;
 }
 
 .card {
diff --git a/play.html b/play.html
index 6a1f3bc..599092b 100644
--- a/play.html
+++ b/play.html
@@ -39,10 +39,10 @@
 		</div>
 	</div>
 	<div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-america.svg"></div>
-	<div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
+	<div class="icon_button" onclick="toggle_zoom2()"><img src="/images/magnifying-glass.svg"></div>
 	<div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
 	<div id="negotiate_menu" class="menu hide">
-		<div class="menu_title"><img src="images/back-forth.svg"></div>
+		<div class="menu_title"><img src="images/shaking-hands.svg"></div>
 		<div class="menu_popup">
 			<div id="remove_pieces_menu" class="menu_item" onclick="send_action('remove_pieces')">Remove Pieces</div>
 			<div id="transfer_resources_menu" class="menu_item" onclick="send_action('transfer_resources')">Transfer Resources</div>
diff --git a/play.js b/play.js
index 05961fa..5b31b40 100644
--- a/play.js
+++ b/play.js
@@ -369,6 +369,11 @@ function is_action(action, arg) {
 	return !!(view.actions && view.actions[action] && set_has(view.actions[action], arg))
 }
 
+function toggle_zoom2() {
+	document.querySelector("main").classList.toggle("fit")
+	toggle_zoom()
+}
+
 function toggle_pieces() {
 	if (ui.map.classList.contains("hide_tokens")) {
 		ui.map.classList.remove("hide_tokens")
diff --git a/rules.js b/rules.js
index e2fb84f..484b92e 100644
--- a/rules.js
+++ b/rules.js
@@ -2377,7 +2377,14 @@ states.eligible = {
 			gen_any_operation()
 			gen_any_event()
 		}
+
+		// Limited negotiation menu until committed to op/event
 		view.actions.remove_pieces = 1
+		view.actions.ask_resources = 0
+		view.actions.transfer_resources = 0
+		view.actions.ask_shipment = 0
+		view.actions.transfer_shipment = 0
+
 		view.actions.pass = game.op.pass ? 1 : 0
 	},
 	train: goto_train,