From b783f37012c917117b4ece1a523f1681e16f3c56 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 10 May 2020 15:51:59 -0700
Subject: [PATCH] Implement support for the "game-state" and "character-reveal"
 events

We had classes here named show-state-<STATE> and hide-state-<STATE>
for elements that should be shown only in a specific state
(show-state-<STATE>) or that should be hidden in a specific state
(hide-state-<STATE>).

For example, the new loading screen saying "contacting server" is only
shown in the "none" state (show-state-none), before getting any events
back from the server. Similarly the list of players is hidden during
the reveal state (hide-state-reveal) so that it is visible in all
other states.

In response to the game-state event, the code finds all relevant
elements with appropriate classed from both the old and new states of
the transition and hides or shows them as appropriate.

Also, we now support the "character-reveal" event by inserting the
revealed character name into an element where it can be seen.
---
 empires-client.js | 30 ++++++++++++++++++++++++++++++
 index.html        | 18 ++++++++++++++++--
 style.css         | 24 ++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/empires-client.js b/empires-client.js
index 3d528e0..617e821 100644
--- a/empires-client.js
+++ b/empires-client.js
@@ -69,6 +69,36 @@ events.addEventListener("player-leave", function(event) {
   players.removeChild(player);
 });
 
+events.addEventListener("game-state", function(event) {
+  const data = JSON.parse(event.data);
+  const old_state = data.old_state;
+  const new_state = data.new_state;
+
+  const hide_selector = ".show-state-" +old_state+ ",.hide-state-" +new_state;
+  const show_selector = ".hide-state-" +old_state+ ",.show-state-" +new_state;
+
+  /* Hide all elements based on the state transition. */
+  var elts = document.querySelectorAll(hide_selector);
+  for (const elt of elts) {
+    elt.style.display = "none";
+  }
+
+  /* And show all elements based on the same state transition. */
+  elts = document.querySelectorAll(show_selector);
+  for (const elt of elts) {
+    elt.style.display = "block";
+  }
+});
+
+events.addEventListener("character-reveal", function(event) {
+  const data = JSON.parse(event.data);
+  const character_name = data.character;
+
+  const character = document.getElementById("character-reveal");
+
+  character.innerText = character_name;
+});
+
 events.addEventListener("capture", function(event_string) {
   const players = document.getElementById("players");
   const event = JSON.parse(event_string.data);
diff --git a/index.html b/index.html
index 49f4b09..7bf1753 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,15 @@
   <div id="message-area">
   </div>
 
-  <div id="pre-game">
+  <div id="loading" class="show-state-none">
+    <h1>The Game of Empires</h1>
+
+    <p>
+      Contacting server. Please wait...
+    </p>
+  </div>
+
+  <div id="pre-game" class="show-state-join">
 
     <h1>Welcome to the game of Empires!</h1>
 
@@ -41,7 +49,13 @@
 
   </div>
 
-  <div>
+  <div class="show-state-reveal">
+    <h1>Watch and memorize each character!</h1>
+
+    <h1 id="character-reveal"></h1>
+  </div>
+
+  <div class="hide-state-reveal">
     <h1>Players in the game</h1>
 
     <ul id="players">
diff --git a/style.css b/style.css
index 1d853d9..1a57b07 100644
--- a/style.css
+++ b/style.css
@@ -31,3 +31,27 @@
 .hide-button:hover {
     color: black;
 }
+
+.show-state-join {
+    display:none;
+}
+
+.show-state-reveal {
+    display:none;
+}
+
+.show-state-capture {
+    display:none;
+}
+
+.hide-state-join {
+    display:block;
+}
+
+.hide-state-reveal {
+    display:block;
+}
+
+.hide-state-capture {
+    display:block;
+}
-- 
2.43.0