From: Carl Worth <cworth@cworth.org> Date: Mon, 4 May 2020 00:18:21 +0000 (-0700) Subject: Add event listening to the HTML client X-Git-Url: https://git.cworth.org/git?a=commitdiff_plain;h=c7ccb107a01eff16c292cd9b35a4afce8e34d5e5;p=empires-html 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. --- diff --git a/empires-client.js b/empires-client.js index bb8a41f..9ac3308 100644 --- a/empires-client.js +++ b/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/index.html b/index.html index 7b44445..132c5e8 100644 --- a/index.html +++ b/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>