Implement a very simple toolbar for the host to use

This is a small clickable gear at the upper-right, that when clicked
will toggle the display of some buttons for controlling the game
state.

This is not as clever as it could be. For example, only one of REVEAL
and START buttons need to be displayed at any given time, (depending
on the game state).

But this should work for everything the game host needs (other than
hiding players that have been captured).

diff --git a/empires-client.js b/empires-client.js
index 39c59ece8156b358f08bf8fc2a2a06abd4b05001..994ed1a4e84680a24cb5815bc9dd72708f79ec6b 100644 (file)
--- a/empires-client.js
+++ b/empires-client.js
@@ -27,6 +27,36 @@ function register(form) {
   form.reset();
 }
 
+function toggle_host_tools() {
+  const host_tools = document.getElementById("host-tools");
+
+  if (host_tools.style.display === "none")
+    host_tools.style.display = "block";
+  else
+    host_tools.style.display = "none";
+}
+
+function post_reveal() {
+  const request = new XMLHttpRequest();
+
+  request.open("POST", API + "reveal");
+  request.send();
+}
+
+function post_start() {
+  const request = new XMLHttpRequest();
+
+  request.open("POST", API + "start");
+  request.send();
+}
+
+function post_reset() {
+  const request = new XMLHttpRequest();
+
+  request.open("POST", API + "reset");
+  request.send();
+}
+
 const events = new EventSource(API + "events");
 
 events.onerror = function(event) {

diff --git a/index.html b/index.html
index 4feaaf93695bfeba1a543ee4834a8ce2dc517ba0..b5994048533120b073688fc7f03e80126ca1ac01 100644 (file)
--- a/index.html
+++ b/index.html
@@ -15,6 +15,22 @@
 
 <div id="page">
 
+  <span style="float:right;cursor:pointer" onclick="toggle_host_tools()">
+    ⚙
+  </span>
+
+  <div id="host-tools">
+    <button onclick="post_reveal()">
+      Reveal Characters
+    </button>
+    <button onclick="post_start()">
+      Start Game
+    </button>
+    <button onclick="post_reset()">
+      Reset Game
+    </button>
+  </div>
+
   <div id="message-area">
   </div>
 

diff --git a/style.css b/style.css
index b1955f04eb35caef2608a0d793616ac93f09befd..adc5a7dbc93531e8f340e3513eb6002ecaa7b690 100644 (file)
--- a/style.css
+++ b/style.css
@@ -118,6 +118,11 @@ p,dl,dd {
     display:none;
 }
 
+/* Host tools start out hidden. */
+#host-tools {
+    display: none;
+}
+
 #register-form {
     max-width: 100%;
     display: grid;