From: Carl Worth <cworth@cworth.org>
Date: Mon, 11 May 2020 23:48:04 +0000 (-0700)
Subject: Implement a very simple toolbar for the host to use
X-Git-Url: https://git.cworth.org/git?p=empires-html;a=commitdiff_plain;h=1d72ba34f93cf0c821771bc6697891004abab95b

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 39c59ec..994ed1a 100644
--- 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 4feaaf9..b599404 100644
--- 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 b1955f0..adc5a7d 100644
--- 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;