Add reconnect UI, disconnect button, and visual cleanup

- Redesign disconnect overlay as a full-screen modal with dark backdrop
- Add working Reconnect button that properly re-establishes WebSocket connection
- Add Disconnect button in Settings for testing
- Separate disconnect and ban/kick codepaths (no reconnect on ban)
- Log disconnect notice in IC log using hrtext style
- Refactor area list rendering from client state (renderAreaList)
- Extract appendICNotice for reusable IC log notices
- Clean up charselect: hide during loading, simplify toolbar layout
- Freshen loading screen and charselect styling
- Remove loading progress text updates (just show "Loading...")
- Guard against undefined client.chars and client.serv

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

1 files changed, 21 insertions, 7 deletions

diff --git a/webAO/client.ts b/webAO/client.ts
index 05a40c9..e00afe6 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -13,6 +13,8 @@ import { Viewport } from "./viewport/interfaces/Viewport";
 import { EventEmitter } from "events";
 import { onReplayGo } from "./dom/onReplayGo";
 import { packetHandler } from "./packets/packetHandler";
+import { appendICNotice } from "./client/appendICNotice";
+import { renderAreaList } from "./dom/renderAreaList";
 import { loadResources } from "./client/loadResources";
 import { AO_HOST } from "./client/aoHost";
 import {
@@ -111,6 +113,8 @@ export enum clientState {
   Connected,
   // Should be set once the client has joined the server (after handshake)
   Joined,
+  // Set when a reconnect attempt is in progress
+  Reconnecting,
 }
 
 export let lastICMessageTime = new Date(0);
@@ -274,6 +278,10 @@ class Client extends EventEmitter {
    */
   onOpen(_e: Event) {
     client.state = clientState.Connected;
+    document.getElementById("client_error_overlay").style.display = "none";
+    document.getElementById("client_waiting").style.display = "block";
+    document.getElementById("client_loading").style.display = "block";
+    document.getElementById("client_charselect").style.display = "none";
     client.joinServer();
   }
 
@@ -282,19 +290,21 @@ 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 (this.state === clientState.Reconnecting) return;
+    client.state = clientState.NotConnected;
     if (this.banned === false) {
       if (this.areas.length > 0) {
         document.getElementById("client_errortext").textContent =
           "You were disconnected from the server.";
+        appendICNotice("Disconnected from the server.");
       } else {
         document.getElementById("client_errortext").textContent =
           "Could not connect to the server.";
       }
+      (<HTMLElement>document.getElementById("client_reconnect")).style.display = "";
     }
-    document.getElementById("client_waiting").style.display = "block";
-    document.getElementById("client_error").style.display = "flex";
+    document.getElementById("client_error_overlay").style.display = "flex";
     document.getElementById("client_loading").style.display = "none";
     document.getElementById("error_id").textContent = String(e.code);
     this.cleanup();
@@ -364,10 +374,14 @@ class Client extends EventEmitter {
    * @param {ErrorEvent} e
    */
   onError(e: ErrorEvent) {
-    client.state = clientState.NotConnected;
     console.error(`A network error occurred`);
     console.error(e);
-    document.getElementById("client_error").style.display = "flex";
+    if (this.state === clientState.Reconnecting) return;
+    client.state = clientState.NotConnected;
+    document.getElementById("client_errortext").textContent =
+      "Could not connect to the server.";
+    (<HTMLElement>document.getElementById("client_reconnect")).style.display = "";
+    document.getElementById("client_error_overlay").style.display = "flex";
     this.cleanup();
   }
 
@@ -376,7 +390,7 @@ class Client extends EventEmitter {
    */
   cleanup() {
     clearInterval(this.checkUpdater);
-    this.serv.close();
+    if (this.serv) this.serv.close();
   }
 
   /**
@@ -412,7 +426,7 @@ class Client extends EventEmitter {
 
   resetAreaList() {
     this.areas = [];
-    document.getElementById("areas").innerHTML = "";
+    renderAreaList();
     fetchBackgroundList();
     fetchEvidenceList();
     fetchCharacterList();