Update to newest RTT server framework.

3 files changed, 46 insertions, 41 deletions

diff --git a/play.css b/play.css
index ac23238..3197d8a 100644
--- a/play.css
+++ b/play.css
@@ -2,10 +2,9 @@ main { background-color: dimgray; }
 #roles { background-color: gray; }
 header { background-color: silver; }
 header.your_turn { background-color: orange; }
-#role_York .role_name { background-color: whitesmoke; }
-#role_Lancaster .role_name { background-color: salmon; }
-#turn_info { background-color: gainsboro; }
-.role_held { float: right; }
+#role_York { background-color: whitesmoke; }
+#role_Lancaster { background-color: salmon; }
+#turn_info { background-color: gray; }
 
 #log { background-color: whitesmoke; }
 #log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
@@ -414,12 +413,25 @@ body.shift .exhausted  {
 	box-shadow: 0 0 0 1px #333, 1px 1px 4px #0008;
 }
 
-.card_info {
+#turn_info {
 	border-bottom: 1px solid black;
+	padding: 12px;
+	overflow: clip;
+}
+
+#turn_info .card {
+	margin: 0 auto;
+}
+
+@media (max-height: 800px) {
+	#turn_info { height: 95px; }
+	#turn_info:hover { height: auto; }
 }
 
-.card_info .card {
-	margin: 12px auto;
+@media (max-height: 600px) {
+	#turn_info {
+		display: none;
+	}
 }
 
 .card.disabled {
diff --git a/play.html b/play.html
index 228d79b..9e22e95 100644
--- a/play.html
+++ b/play.html
@@ -7,9 +7,9 @@
 <title>PLANTAGENET</title>
 <link id="favicon" rel="icon" href="favicons/favicon_warwick.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>
@@ -17,45 +17,38 @@
 
 <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" target="_blanK" href="/plantagenet/info/rulebook.html">Rules of Play</a>
-				<a class="menu_item" target="_blanK" href="/plantagenet/info/playbook.html">Background Book</a>
-				<a class="menu_item" target="_blanK" href="/plantagenet/info/reference.html">Reference Sheets</a>
-				<a class="menu_item" target="_blanK" href="/plantagenet/info/cards.html">Arts of War</a>
-				<div class="menu_item" onclick="send_save()">&#x1F41E; Save</div>
-				<div class="menu_item" onclick="send_restore()">&#x1F41E; Restore</div>
-				<div class="menu_separator"></div>
-				<div class="menu_item" onclick="send_restart()">&#x26a0; Restart</div>
-				<div class="resign menu_separator"></div>
-				<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
-			</div>
-		</div>
-		<div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-africa-europe.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 target="_blanK" href="/plantagenet/info/rulebook.html">Rules of Play</a>
+				<li><a target="_blanK" href="/plantagenet/info/playbook.html">Background Book</a>
+				<li><a target="_blanK" href="/plantagenet/info/charts.html">Reference Sheets</a>
+				<li><a target="_blanK" href="/plantagenet/info/cards.html">Arts of War</a>
+				<li class="debug" onclick="send_save()">&#x1F41E; Save
+				<li class="debug" onclick="send_restore()">&#x1F41E; Restore
+				<li class="debug" onclick="send_restart()">&#x26a0; Restart
+				<li class="debug separator">
+				<li class="resign separator">
+				<li class="resign" onclick="confirm_resign()">Resign
+			</menu>
+		</details>
+		<button onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></button>
 	</div>
-	<div id="prompt"></div>
-	<div id="actions"></div>
 </header>
 
 <aside>
 	<div id="roles">
 		<div class="role" id="role_York">
-			<div class="role_name">
-				York
-				<div class="role_held">0 Held</div>
-				<div class="role_user">-</div>
-			</div>
+			<div class="role_name"> York </div>
+			<div class="role_stat">0 Held</div>
+			<div class="role_user">-</div>
 		</div>
 		<div class="role" id="role_Lancaster">
-			<div class="role_name">
-				Lancaster
-				<div class="role_held">0 Held</div>
-				<div class="role_user">-</div>
-			</div>
+			<div class="role_name"> Lancaster </div>
+			<div class="role_stat">0 Held</div>
+			<div class="role_user">-</div>
 		</div>
-		<div class="card_info"><div id="command" class="card york aow_back"></div></div>
+		<div id="turn_info"><div id="command" class="card york aow_back"></div></div>
 	</div>
 	<div id="log"></div>
 </aside>
diff --git a/play.js b/play.js
index ebd1f89..c2ca64a 100644
--- a/play.js
+++ b/play.js
@@ -627,8 +627,8 @@ const ui = {
 	hand_panel: document.getElementById("hand_panel"),
 	hand: document.getElementById("hand"),
 
-	held_york: document.querySelector("#role_York .role_held"),
-	held_lancaster: document.querySelector("#role_Lancaster .role_held"),
+	held_york: document.querySelector("#role_York .role_stat"),
+	held_lancaster: document.querySelector("#role_Lancaster .role_stat"),
 
 	command: document.getElementById("command"),
 	turn: document.getElementById("turn"),