From 715b33f3ee58ef0c7b48204f97e5187561eb2e4f Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 3 May 2020 17:18:21 -0700
Subject: [PATCH] Add event listening to the HTML client

Specifically, displaying a list of all players. This captures both the
existing players at the time the client connects, as well as adding
any additional players that register.
---
 empires/empires-client.js | 23 +++++++++++++++++
 empires/index.html        | 52 ++++++++++++++++++++++++---------------
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/empires/empires-client.js b/empires/empires-client.js
index bb8a41f..9ac3308 100644
--- a/empires/empires-client.js
+++ b/empires/empires-client.js
@@ -31,3 +31,26 @@ function register(form) {
 
   form.reset();
 }
+
+const events = new EventSource(API + "events");
+
+events.addEventListener("players", function(event) {
+  const players_element = document.getElementById("players");
+  const players = JSON.parse(event.data);
+
+  players_element.innerHTML = '';
+  for (const player of players) {
+    var li =document.createElement('li');
+    li.innerText = player.name;
+    players_element.appendChild(li);
+  }
+});
+
+events.addEventListener("player-register", function(event) {
+  const players = document.getElementById("players");
+  const player = JSON.parse(event.data);
+
+  const li = document.createElement('li');
+  li.innerText = player.name;
+  players.appendChild(li);
+});
diff --git a/empires/index.html b/empires/index.html
index 7b44445..132c5e8 100644
--- a/empires/index.html
+++ b/empires/index.html
@@ -9,33 +9,45 @@
 
   <script src="empires-client.js"></script>
 
-  <h1>Welcome to the game of Empires!</h1>
+  <div id="pre-game">
 
-  <p>
-    To join the game, type your own name below. Also, choose the name
-    of a character that you want to play as. This can be anyone (real
-    or fictional) that everyone playing the game would be likely to
-    know, (for example "Albert Einstein" or "Harry Potter").
-  </p>
+    <h1>Welcome to the game of Empires!</h1>
 
-  <p>
-    Note: After you have joined the game, another player can use this
-    same device to join the game as well.
-  </p>
+    <p>
+      To join the game, type your own name below. Also, choose the name
+      of a character that you want to play as. This can be anyone (real
+      or fictional) that everyone playing the game would be likely to
+      know, (for example "Albert Einstein" or "Harry Potter").
+    </p>
+
+    <p>
+      Note: After you have joined the game, another player can use this
+      same device to join the game as well.
+    </p>
+
+    <div id="message-area">
+    </div>
+
+    <!-- The return false prevents the page from being reloaded -->
+    <form onsubmit="register(this); return false">
+      <label for="name">Your name</label>
+      <input type="text" id="name" required>
+
+      <label for="character">Character name</label>
+      <input type="text" id="character" required>
+
+      <input type="submit" value="Join game">
+    </form>
 
-  <div id="message-area">
   </div>
 
-  <!-- The return false prevents the page from being reloaded -->
-  <form onsubmit="register(this); return false">
-    <label for="name">Your name</label>
-    <input type="text" id="name" required>
+  <div>
+    <h1>Players in the game</h1>
 
-    <label for="character">Character name</label>
-    <input type="text" id="character" required>
+    <ul id="players">
+    </ul>
 
-    <input type="submit" value="Join game">
-  </form>
+  </div>
 
 </body>
 </html>
-- 
2.43.0