From 168274653d395d2dfb6885fbb32e081dde8a2127 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Mon, 11 May 2020 16:48:04 -0700
Subject: [PATCH] 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).
---
 empires/empires-client.js | 30 ++++++++++++++++++++++++++++++
 empires/index.html        | 16 ++++++++++++++++
 empires/style.css         |  5 +++++
 3 files changed, 51 insertions(+)

diff --git a/empires/empires-client.js b/empires/empires-client.js
index 39c59ec..994ed1a 100644
--- a/empires/empires-client.js
+++ b/empires/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/empires/index.html b/empires/index.html
index 4feaaf9..b599404 100644
--- a/empires/index.html
+++ b/empires/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/empires/style.css b/empires/style.css
index b1955f0..adc5a7d 100644
--- a/empires/style.css
+++ b/empires/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;
-- 
2.43.0