From ab0d0d9fe5f882b8c608d07894b4d3dfe876fbe3 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 19 Jun 2021 13:19:04 +0200
Subject: 300: Various HTML and menu cleanups.

Disable "toggle log" button.

Hide resign menu.

Add debug menu.
---
 about.html |  8 ++++++++
 play.html  | 28 ++++++++++++++--------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/about.html b/about.html
index f87d2e3..3e9110a 100644
--- a/about.html
+++ b/about.html
@@ -4,9 +4,17 @@ from the Ionian Revolt in 499 BCE to the Peace of Callias around 449 BCE. One
 player leads the Greek army, assembled around Athens and Sparta, and the other
 leads the Persian army.
 
+<br clear="left">
+
 <p>
 Designer: Yasushi Nakaguro
 
 <p>
 &copy; 2018 Bonsai Games &amp;
 &copy; 2020 <a href="https://www.nutspublishing.com/eshop/our-games/300-en">Nuts! Publishing</a>
+
+<ul>
+<li><a href="/300-earth-and-water/info/rules.html">Rulebook</a>
+<li><a href="/300-earth-and-water/info/cards.html">Cards</a>
+<li><a href="/300-earth-and-water/info/notes.html">Implementation notes</a>
+</ul>
diff --git a/play.html b/play.html
index be0a8f9..81db5f9 100644
--- a/play.html
+++ b/play.html
@@ -16,8 +16,8 @@
 .grid_role { background-color: gainsboro; }
 .grid_log { background-color: gainsboro; }
 .grid_top { background-color: silver; }
-.grid_top.Persia.your_turn { background-color: skyblue; }
-.grid_top.Greece.your_turn { background-color: salmon; }
+.Persia .grid_top.your_turn { background-color: skyblue; }
+.Greece .grid_top.your_turn { background-color: salmon; }
 .grid_top.disconnected { background-color: red; }
 .role_info { background-color: silver; }
 .one .role_name { background-color: salmon; }
@@ -78,11 +78,10 @@
 }
 
 #tooltip.card {
-	position: absolute;
+	position: fixed;
 	z-index: 100;
 	right: 270px;
 	top: 60px;
-	margin-left: -250px;
 	width: 375px;
 	height: 525px;
 }
@@ -118,6 +117,8 @@
 	height: 878px;
 	background-image: url("map.jpg");
 	background-size: cover;
+	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+	margin: 0 auto;
 }
 
 .map.hide_markers > div {
@@ -248,17 +249,16 @@
 				<div class="menu_item" onclick="window.open('info/notes.html', '_blank')">Notes</div>
 				<div class="menu_item" onclick="window.open('info/rules.html', '_blank')">Rules</div>
 				<div class="menu_item" onclick="window.open('info/cards.html', '_blank')">Cards</div>
-				<div class="menu_separator"></div>
-				<div class="menu_item" onclick="confirm_resign()">Resign</div>
-				<div class="menu_separator"></div>
-				<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('Historical')">&#x26a0; Restart</div>
+				<div class="resign menu_separator"></div>
+				<div class="resign menu_item" onclick="confirm_resign()">Resign</div>
+				<div class="debug menu_separator"></div>
+				<div class="debug menu_item" onclick="send_save()">&#x1F41E; Save</div>
+				<div class="debug menu_item" onclick="send_restore()">&#x1F41E; Restore</div>
+				<div class="debug menu_separator"></div>
+				<div class="debug menu_item" onclick="send_restart('Historical')">&#x26a0; Restart</div>
 			</div>
 		</div>
 
-		<div class="image_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div>
 		<div class="image_button chat_button" onclick="toggle_chat()"><img src="/images/chat-bubble.svg"></div>
 
 		<div id="prompt" class="prompt">Connecting...</div>
@@ -276,12 +276,12 @@
 	<div class="grid_role">
 
 		<div class="role one">
-			<div class="role_name">Greece (<span class="role_user">$USER</span>)</div>
+			<div class="role_name">Greece &#x2013; <span class="role_user">$USER</span></div>
 			<div class="role_info" id="greek_info">0 cards in hand</div>
 		</div>
 
 		<div class="role two">
-			<div class="role_name">Persia (<span class="role_user">$USER</span>)</div>
+			<div class="role_name">Persia &#x2013; <span class="role_user">$USER</span></div>
 			<div class="role_info" id="persian_info">0 cards in hand</div>
 		</div>
 
-- 
cgit v1.2.3