Don't show the "Players in the game" header when there are no players

It looks really broken to see this header with nothing below it. So we
still it as not displayed at first, and then only display it once a
player is added.

diff --git a/empires-client.js b/empires-client.js
index 617e821dbbc05e670258934fa784062c3441e5c2..3be0670523869a38aca4058ff63d69249709fa6b 100644 (file)
--- a/empires-client.js
+++ b/empires-client.js
@@ -36,6 +36,7 @@ events.onerror = function(event) {
 };
 
 events.addEventListener("players", function(event) {
+  const players_div = document.getElementById("players-div");
   const players_element = document.getElementById("players");
   const players = JSON.parse(event.data);
 
@@ -46,9 +47,13 @@ events.addEventListener("players", function(event) {
     li.innerText = player.name;
     players_element.appendChild(li);
   }
+
+  /* Force players list to be visible. */
+  players_div.style.display = "block";
 });
 
 events.addEventListener("player-join", function(event) {
+  const players_div = document.getElementById("players-div");
   const players = document.getElementById("players");
   const player = JSON.parse(event.data);
 
@@ -58,6 +63,9 @@ events.addEventListener("player-join", function(event) {
   players.appendChild(li);
 
   add_message("success", player.name + " is now in the game!");
+
+  /* Force players list to be visible. */
+  players_div.style.display = "block";
 });
 
 events.addEventListener("player-leave", function(event) {

diff --git a/index.html b/index.html
index 7bf1753549a997170630ad6b4ddd4e2fab69a4ff..0951a5182c657dffe2713b837b4ebae189855d0e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -55,7 +55,7 @@
     <h1 id="character-reveal"></h1>
   </div>
 
-  <div class="hide-state-reveal">
+  <div class="hide-state-reveal" id="players-div">
     <h1>Players in the game</h1>
 
     <ul id="players">

diff --git a/style.css b/style.css
index 1a57b07c00fdd007d5609ddc1de9837011d1ca1c..89bca0c56477ade2bb19a281e1f9c45d492b2bec 100644 (file)
--- a/style.css
+++ b/style.css
@@ -55,3 +55,8 @@
 .hide-state-capture {
     display:block;
 }
+
+/* Players list starts out hidden (until a player is added). */
+#players-div {
+    display:none;
+}