From 060409093da1d3392c0e165b043401baa3fb5d6b Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Wed, 22 Nov 2023 20:58:28 +0100
Subject: [PATCH 1/3] Add client state

It's very useful to know the state of client, whether it's
connected or properly joined.
---
 webAO/client.ts                      | 13 +++++++++++++
 webAO/packets/handlers/handleDONE.ts | 15 +++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/webAO/client.ts b/webAO/client.ts
index c49a1045..6341ab2f 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -98,6 +98,14 @@ fpPromise
 
 export const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
 
+export enum clientState {
+    NotConnected,
+    // Should be set once the client has established a connection
+    Connected,
+    // Should be set once the client has joined the server (after handshake)
+    Joined
+}
+
 export let lastICMessageTime = new Date(0);
 export const setLastICMessageTime = (val: Date) => {
     lastICMessageTime = val
@@ -129,12 +137,14 @@ class Client extends EventEmitter {
     viewport: Viewport;
     partial_packet: boolean;
     temp_packet: string;
+    state: clientState;
     connect: () => void;
     loadResources: () => void
     isLowMemory: () => void
     constructor(connectionString: string) {
         super();
 
+        this.state = clientState.NotConnected;
         this.connect = () => {
             this.on("open", this.onOpen.bind(this));
             this.on("close", this.onClose.bind(this));
@@ -227,6 +237,7 @@ class Client extends EventEmitter {
    * Triggered when a connection is established to the server.
    */
     onOpen(_e: Event) {
+        client.state = clientState.Connected;
         client.joinServer();
     }
 
@@ -235,6 +246,7 @@ class Client extends EventEmitter {
    * @param {CloseEvent} e
    */
     onClose(e: CloseEvent) {
+        client.state = clientState.NotConnected;
         console.error(`The connection was closed: ${e.reason} (${e.code})`);
         if (extrafeatures.length == 0 && banned === false) {
             document.getElementById("client_errortext").textContent =
@@ -315,6 +327,7 @@ class Client extends EventEmitter {
    * @param {ErrorEvent} e
    */
     onError(e: ErrorEvent) {
+        client.state = clientState.NotConnected;
         console.error(`A network error occurred`);
         document.getElementById("client_error").style.display = "flex";
         this.cleanup();
diff --git a/webAO/packets/handlers/handleDONE.ts b/webAO/packets/handlers/handleDONE.ts
index 6ca31bf8..e3239864 100644
--- a/webAO/packets/handlers/handleDONE.ts
+++ b/webAO/packets/handlers/handleDONE.ts
@@ -1,4 +1,5 @@
 import queryParser from "../../utils/queryParser";
+import { client, clientState } from "../../client";
 
 const { mode } = queryParser()
 /**
@@ -8,9 +9,11 @@ const { mode } = queryParser()
    * @param {Array} args packet arguments
    */
 export const handleDONE = (_args: string[]) => {
-    document.getElementById("client_loading")!.style.display = "none";
-    if (mode === "watch") {
-      // Spectators don't need to pick a character
-      document.getElementById("client_waiting")!.style.display = "none";
-    }
-}
\ No newline at end of file
+  // DONE packet signals that the handshake is complete
+  client.state = clientState.Joined;
+  document.getElementById("client_loading")!.style.display = "none";
+  if (mode === "watch") {
+    // Spectators don't need to pick a character
+    document.getElementById("client_waiting")!.style.display = "none";
+  }
+}

From b0f6ebd5a1a7391b5a9f0165cab01f23da3461da Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Wed, 22 Nov 2023 21:10:10 +0100
Subject: [PATCH 2/3] Set timeout to connecting to server to 5 seconds

---
 webAO/client.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/webAO/client.ts b/webAO/client.ts
index 6341ab2f..fde7f151 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -157,6 +157,14 @@ class Client extends EventEmitter {
                 this.serv.addEventListener("close", this.emit.bind(this, "close"));
                 this.serv.addEventListener("message", this.emit.bind(this, "message"));
                 this.serv.addEventListener("error", this.emit.bind(this, "error"));
+
+                // If the client is still not connected 5 seconds after attempting to join
+                // It's fair to assume that the server is not reachable
+                setTimeout(() => {
+                    if (this.state === clientState.NotConnected) {
+                        this.serv.close();
+                    }
+                }, 5000);
             } else {
                 this.joinServer();
             }

From 6abdca42654d3eab390eb9cbe6cc91f6e2b12431 Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Wed, 22 Nov 2023 21:39:12 +0100
Subject: [PATCH 3/3] Also log the error itself on error

---
 webAO/client.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webAO/client.ts b/webAO/client.ts
index fde7f151..3b84c56f 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -337,6 +337,7 @@ class Client extends EventEmitter {
     onError(e: ErrorEvent) {
         client.state = clientState.NotConnected;
         console.error(`A network error occurred`);
+        console.error(e);
         document.getElementById("client_error").style.display = "flex";
         this.cleanup();
     }