From 28a5c0d826ca97abfd4ed07af1deedc6ed3be000 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Thu, 19 Oct 2023 01:32:29 +0200
Subject: Mobile layout.

---
 about.html |  9 +++------
 play.css   |  2 +-
 play.html  | 29 ++++++++++++++---------------
 play.js    |  5 ++---
 4 files changed, 20 insertions(+), 25 deletions(-)
diff --git a/about.html b/about.html
index 200d83f..2954896 100644
--- a/about.html
+++ b/about.html
@@ -8,12 +8,9 @@ mists of time.
 
 <p>
 Game Design by Wray Ferrell and Brad Johnson.
-
-<p>
-Copyright &copy; 2017
-<a href="https://www.gmtgames.com/p-1039-time-of-crisis-deluxe-edition.aspx">GMT Games, LLC</a>.
-<br>
-Cover art by Rodger B. MacGowan &copy; 2017.
+<br> Copyright &copy; 2017 <a href="https://www.gmtgames.com/p-1039-time-of-crisis-deluxe-edition.aspx">GMT Games, LLC</a>.
+<br> Cover art by Rodger B. MacGowan &copy; 2017.
+<br> Programming &copy; 2023 Tor Andersson.
 
 <ul>
 <li><a href="/time-of-crisis/info/rules.html">Rules of Play</a>
diff --git a/play.css b/play.css
index 80f302c..e6ec614 100644
--- a/play.css
+++ b/play.css
@@ -1,4 +1,4 @@
-main { background-color: dimgray; }
+body { background-color: dimgray; }
 #roles { background-color: gray; }
 header { background-color: silver; }
 header.your_turn { background-color: orange; }
diff --git a/play.html b/play.html
index 3f51882..b016733 100644
--- a/play.html
+++ b/play.html
@@ -2,7 +2,8 @@
 <!-- vim:set nowrap: -->
 <html lang="en">
 <head>
-<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content">
+<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>TIME OF CRISIS</title>
 <link rel="icon" href="favicon.png">
@@ -18,21 +19,19 @@
 
 <header>
 	<div id="toolbar">
-		<div class="menu">
-			<div class="menu_title"><img src="/images/cog.svg"></div>
-			<div class="menu_popup">
-				<div id="tint" class="menu_item checked" onclick="toggle_tint()">Colored units</div>
-				<div class="menu_separator"></div>
-				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/readme.html">Read me!</a>
-				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/rules.html">Rules of Play</a>
-				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/expansion.html">Expansion Rules</a>
-				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/aid.html">Player Aid</a>
-				<a class="menu_item" target="_blanK" href="/time-of-crisis/info/cards.html">Card Gallery</a>
-			</div>
-		</div>
+		<details>
+			<summary><img src="/images/cog.svg"></summary>
+			<menu>
+				<li id="tint" class="checked" onclick="toggle_tint()">Colored units
+				<li class="separator">
+				<li><a target="_blank" href="/time-of-crisis/info/readme.html">Read me!</a>
+				<li><a target="_blank" href="/time-of-crisis/info/rules.html">Rules of Play</a>
+				<li><a target="_blank" href="/time-of-crisis/info/expansion.html">Expansion Rules</a>
+				<li><a target="_blank" href="/time-of-crisis/info/aid.html">Player Aid</a>
+				<li><a target="_blank" href="/time-of-crisis/info/cards.html">Card Gallery</a>
+			</menu>
+		</details>
 	</div>
-	<div id="prompt"></div>
-	<div id="actions"></div>
 </header>
 
 <aside>
diff --git a/play.js b/play.js
index 82b7422..51e95ec 100644
--- a/play.js
+++ b/play.js
@@ -8,7 +8,6 @@ function check_menu(id, x) {
 
 function remember_position(e) {
 	if (e.parentElement) {
-		console.log("REMEMBER", e.my_id)
 		let rect = e.getBoundingClientRect()
 		e.my_parent = e.parentElement
 		e.my_x = rect.x
@@ -32,7 +31,7 @@ function animate_position(e) {
 						{ transform: `translate(${dx}px, ${dy}px)`, },
 						{ transform: "translate(0, 0)", },
 					],
-					{ duration: 500, easing: "ease" }
+					{ duration: 250, easing: "ease" }
 				)
 			}
 		} else {
@@ -41,7 +40,7 @@ function animate_position(e) {
 						{ opacity: 0 },
 						{ opacity: 1 }
 					],
-					{ duration: 500, easing: "ease" }
+					{ duration: 250, easing: "ease" }
 				)
 		}
 	}
-- 
cgit v1.2.3

