+events.addEventListener("spectators", function(event) {
+ const spectators_div = document.getElementById("spectators-div");
+ const spectators_element = document.getElementById("spectators");
+ const spectators = JSON.parse(event.data);
+
+ spectators_element.innerHTML = '';
+ for (const spectator of spectators) {
+ var li = document.createElement('li');
+ li.id = "spectator-" + spectator.id;
+ li.innerText = spectator.name;
+ spectators_element.appendChild(li);
+ }
+
+ /* Force players list to be visible. */
+ spectators_div.style.display = "block";
+});
+
+events.addEventListener("spectator-join", function(event) {
+ const spectators_div = document.getElementById("spectators-div");
+ const spectators = document.getElementById("spectators");
+ const spectator = JSON.parse(event.data);
+
+ const li = document.createElement('li');
+ li.id = "spectator-" + spectator.id;
+ li.innerText = spectator.name;
+ spectators.appendChild(li);
+
+ /* Force spectators list to be visible. */
+ spectators_div.style.display = "block";
+});
+
+events.addEventListener("spectator-leave", function(event) {
+ const spectators = document.getElementById("spectators");
+ const id = JSON.parse(event.data);
+ const spectator = document.getElementById("spectator-" + id.id);
+
+ spectators.removeChild(spectator);
+});
+