From: Carl Worth <cworth@cworth.org>
Date: Mon, 11 May 2020 22:45:22 +0000 (-0700)
Subject: Don't show the "Players in the game" header when there are no players
X-Git-Url: https://git.cworth.org/git?p=empires-html;a=commitdiff_plain;h=f32c12ef4d9d9eebddee05848626838b218ee20d

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 617e821..3be0670 100644
--- 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 7bf1753..0951a51 100644
--- 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 1a57b07..89bca0c 100644
--- 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;
+}