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.

diff --git a/empires/empires-client.js b/empires/empires-client.js
index 3d528e08ba1e4efbee827b04a3c166c2ec90cd25..617e821dbbc05e670258934fa784062c3441e5c2 100644 (file)
--- a/empires/empires-client.js
+++ b/empires/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/empires/index.html b/empires/index.html
index 49f4b0974c5698ca7cf9fee37ce0793be10ee048..7bf1753549a997170630ad6b4ddd4e2fab69a4ff 100644 (file)
--- a/empires/index.html
+++ b/empires/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/empires/style.css b/empires/style.css
index 1d853d90f3b22cc830bddb06e94f28fc9ee8d958..1a57b07c00fdd007d5609ddc1de9837011d1ca1c 100644 (file)
--- a/empires/style.css
+++ b/empires/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;
+}