Add landing page player count updates

frontend/src/scripts/join-form-handler.ts

@@ -1,5 +1,5 @@
-import { ServerInformation, serverInformationEndpoint } from 'shared';
-
+import { ServerInformation, serverInformationEndpoint, TransportEvents } from 'shared';
+import io from 'socket.io-client';
 import { Configuration } from './config/configuration';
 
 export type PlayerDecision = {
@@ -7,9 +7,11 @@ export type PlayerDecision = {
   server: string;
 };
 
+const pollInterval = 10000;
 export class JoinFormHandler {
   private waitingForDecision: Promise<PlayerDecision>;
   private resolvePlayerDecision!: (d: PlayerDecision) => void;
+  private pollServersTimer: any;
 
   constructor(form: HTMLFormElement, private readonly container: HTMLElement) {
     this.waitingForDecision = new Promise((r) => (this.resolvePlayerDecision = r));
@@ -35,18 +37,51 @@ export class JoinFormHandler {
       e.preventDefault();
     };
 
+    this.pollServersTimer = setInterval(this.loadServers.bind(this), pollInterval);
     this.loadServers();
+    this.waitForFinish();
   }
 
+  private async waitForFinish() {
+    await this.waitingForDecision;
+    this.destroy();
+  }
+
+  private destroy() {
+    clearInterval(this.pollServersTimer);
+    this.servers.forEach((s) => s.destroy());
+  }
+
+  private servers: Array<ServerChooserOption> = [];
   private async loadServers() {
     await Configuration.initialize();
-    const serverList = Configuration.servers;
+
+    const serverList = Configuration.servers.filter(
+      (u) => !this.servers.find((s) => s.url === u),
+    );
 
     serverList.map(async (url) => {
-      const response = await fetch(url + serverInformationEndpoint);
-      if (response.ok) {
+      const controller = new AbortController();
+      const signal = controller.signal;
+      setTimeout(() => controller.abort(), pollInterval * 0.8);
+
+      let response: Response | undefined;
+      try {
+        response = await fetch(url + serverInformationEndpoint, { signal });
+      } catch {
+        // it's okay
+      }
+
+      if (response?.ok) {
         const content: ServerInformation = await response.json();
-        this.displayNewServerInfo(content, url);
+        const server = new ServerChooserOption(
+          content,
+          url,
+          (r) => (this.servers = this.servers.filter((s) => s !== r)),
+          this.servers.length === 0,
+        );
+        this.servers.push(server);
+        this.container.appendChild(server.element);
       }
     });
   }
@@ -54,19 +89,56 @@ export class JoinFormHandler {
   public async getPlayerDecision(): Promise<PlayerDecision> {
     return this.waitingForDecision;
   }
+}
 
-  private isFirstServer = true;
-  private displayNewServerInfo(content: ServerInformation, url: string) {
-    this.container.innerHTML += `
-    <div>
-      <input required ${
-        this.isFirstServer ? 'checked' : ''
-      } type="radio" id="${url}" name="server" value="${url}" />
-      <label for="${url}">${content.serverName} - ${content.playerCount}/${
-      content.playerLimit
-    } players</label>
-    </div>
-    `;
-    this.isFirstServer = false;
+class ServerChooserOption {
+  private divElement = document.createElement('div');
+  private inputElement = document.createElement('input');
+  private labelElement = document.createElement('label');
+  private socket: SocketIOClient.Socket;
+
+  constructor(
+    private content: ServerInformation,
+    public readonly url: string,
+    private onDestroy: (v: ServerChooserOption) => unknown,
+    isFirst: boolean,
+  ) {
+    this.inputElement.required = true;
+    this.inputElement.type = 'radio';
+    this.inputElement.id = this.inputElement.value = url;
+    this.inputElement.name = 'server';
+    this.inputElement.checked = isFirst;
+    this.labelElement.htmlFor = url;
+    this.divElement.appendChild(this.inputElement);
+    this.divElement.appendChild(this.labelElement);
+    this.setPlayerLabelText();
+
+    this.socket = io(url, {
+      reconnection: false,
+      timeout: 1500,
+    });
+
+    this.socket.on('connect_error', this.destroy.bind(this));
+    this.socket.on('connect_timeout', this.destroy.bind(this));
+    this.socket.on('disconnect', this.destroy.bind(this));
+    this.socket.emit(TransportEvents.SubscribeForPlayerCount);
+    this.socket.on(TransportEvents.PlayerCountUpdate, (v: number) => {
+      this.content.playerCount = v;
+      this.setPlayerLabelText();
+    });
+  }
+
+  public destroy() {
+    this.socket.close();
+    this.divElement.parentElement?.removeChild(this.divElement);
+    this.onDestroy(this);
+  }
+
+  private setPlayerLabelText() {
+    this.labelElement.innerText = `${this.content.serverName} - ${this.content.playerCount}/${this.content.playerLimit} players`;
+  }
+
+  public get element(): HTMLElement {
+    return this.divElement;
   }
 }