From 1c4b7a3483aab72c77243f0ae8afc62218033b89 Mon Sep 17 00:00:00 2001
From: schmelczerandras <schmelczer.andras@simonyi.bme.hu>
Date: Fri, 30 Oct 2020 20:47:55 +0100
Subject: [PATCH] Disable join when there are no servers

---
 frontend/src/scripts/join-form-handler.ts | 13 ++++++++++++-
 frontend/src/styles/button.scss           |  9 +++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/scripts/join-form-handler.ts b/frontend/src/scripts/join-form-handler.ts
index b577ddc..3af5463 100644
--- a/frontend/src/scripts/join-form-handler.ts
+++ b/frontend/src/scripts/join-form-handler.ts
@@ -11,11 +11,14 @@ export type PlayerDecision = {
 
 const pollInterval = 8000;
 export class JoinFormHandler {
+  private joinButton: HTMLButtonElement;
   private waitingForDecision: Promise<PlayerDecision>;
   private resolvePlayerDecision!: (d: PlayerDecision) => void;
   private pollServersTimer: any;
 
   constructor(form: HTMLFormElement, private readonly container: HTMLElement) {
+    this.joinButton = form.querySelector('button[type="submit"]') as HTMLButtonElement;
+    this.joinButton.disabled = true;
     this.waitingForDecision = new Promise((r) => (this.resolvePlayerDecision = r));
 
     new FormData(form);
@@ -80,15 +83,23 @@ export class JoinFormHandler {
         const server = new ServerChooserOption(
           content,
           url,
-          (r) => (this.servers = this.servers.filter((s) => s !== r)),
+          this.removeServer.bind(this),
           this.servers.length === 0,
         );
         this.servers.push(server);
+        this.joinButton.disabled = false;
         this.container.appendChild(server.element);
       }
     });
   }
 
+  private removeServer(server: ServerChooserOption) {
+    this.servers = this.servers.filter((s) => s !== server);
+    if (this.servers.length) {
+      this.joinButton.disabled = true;
+    }
+  }
+
   public async getPlayerDecision(): Promise<PlayerDecision> {
     return this.waitingForDecision;
   }
diff --git a/frontend/src/styles/button.scss b/frontend/src/styles/button.scss
index 7214047..13ac5b6 100644
--- a/frontend/src/styles/button.scss
+++ b/frontend/src/styles/button.scss
@@ -15,12 +15,17 @@ button {
   transition: transform $animation-time, padding-bottom $animation-time,
     margin-bottom $animation-time;
 
-  &:hover,
-  &:focus {
+  &:not(:disabled):hover,
+  &:not(:disabled):focus {
     outline: none;
     color: $accent;
     transform: translateY(-$ascend);
     padding-bottom: $ascend;
     margin-bottom: 0;
   }
+
+  &:disabled {
+    color: #777;
+    cursor: not-allowed;
+  }
 }