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>

5 files changed, 55 insertions, 11 deletions

diff --git a/webAO/dom/areaClick.ts b/webAO/dom/areaClick.ts
index 27682c7..120ef39 100644
--- a/webAO/dom/areaClick.ts
+++ b/webAO/dom/areaClick.ts
@@ -1,4 +1,5 @@
 import { client } from "../client";
+import { appendICNotice } from "../client/appendICNotice";
 import { renderPlayerList } from "./renderPlayerList";
 /**
  * Triggered when an item on the area list is clicked.
@@ -7,11 +8,7 @@ import { renderPlayerList } from "./renderPlayerList";
 export function area_click(el: HTMLElement) {
   const area = client.areas[el.id.substring(4)].name;
   client.sender.sendMusicChange(area);
-
-  const areaHr = document.createElement("div");
-  areaHr.className = "hrtext";
-  areaHr.textContent = `switched to ${el.textContent}`;
-  document.getElementById("client_log")!.appendChild(areaHr);
+  appendICNotice(`switched to ${el.textContent}`);
   client.area = Number(el.id.substring(4));
   renderPlayerList();
 }
diff --git a/webAO/dom/disconnectButton.ts b/webAO/dom/disconnectButton.ts
new file mode 100644
index 0000000..35daf16
--- /dev/null
+++ b/webAO/dom/disconnectButton.ts
@@ -0,0 +1,12 @@
+import { client } from "../client";
+
+/**
+ * Triggered when the disconnect button in settings is pushed.
+ * Forces a disconnection for testing purposes.
+ */
+export function DisconnectButton() {
+  if (client.serv && client.serv.readyState === WebSocket.OPEN) {
+    client.serv.close();
+  }
+}
+window.DisconnectButton = DisconnectButton;
diff --git a/webAO/dom/reconnectButton.ts b/webAO/dom/reconnectButton.ts
index 079e7fc..ae492fb 100644
--- a/webAO/dom/reconnectButton.ts
+++ b/webAO/dom/reconnectButton.ts
@@ -1,16 +1,26 @@
-import Client, { client, setClient } from "../client";
+import Client, { client, clientState, setClient } from "../client";
 import queryParser from "../utils/queryParser";
-const { ip: serverIP } = queryParser();
+const { ip: serverIP, connect } = queryParser();
 
 /**
  * Triggered when the reconnect button is pushed.
  */
 export function ReconnectButton() {
-  client.cleanup();
-  setClient(new Client(serverIP));
+  document.getElementById("client_errortext")!.textContent = "Reconnecting...";
 
-  if (client) {
-    document.getElementById("client_error")!.style.display = "none";
+  // Build the connection string the same way the initial connection does
+  let connectionString = connect;
+  if (!connectionString && serverIP) {
+    connectionString = `ws://${serverIP}`;
   }
+
+  const hdid = client.hdid;
+  client.state = clientState.Reconnecting;
+  client.cleanup();
+
+  const newClient = new Client(connectionString);
+  setClient(newClient);
+  newClient.hdid = hdid;
+  newClient.connect();
 }
 window.ReconnectButton = ReconnectButton;
diff --git a/webAO/dom/renderAreaList.ts b/webAO/dom/renderAreaList.ts
new file mode 100644
index 0000000..e622765
--- /dev/null
+++ b/webAO/dom/renderAreaList.ts
@@ -0,0 +1,24 @@
+import { client } from "../client";
+import { area_click } from "./areaClick";
+
+export function renderAreaList() {
+  const container = document.getElementById("areas")!;
+  container.innerHTML = "";
+
+  for (let i = 0; i < client.areas.length; i++) {
+    const area = client.areas[i];
+    const el = document.createElement("SPAN");
+    el.className = `area-button area-${area.status.toLowerCase()}`;
+    el.id = `area${i}`;
+    el.innerText = `${area.name} (${area.players}) [${area.status}]`;
+    el.title =
+      `Players: ${area.players}\n` +
+      `Status: ${area.status}\n` +
+      `CM: ${area.cm}\n` +
+      `Area lock: ${area.locked}`;
+    el.onclick = function () {
+      area_click(el);
+    };
+    container.appendChild(el);
+  }
+}
diff --git a/webAO/dom/window.ts b/webAO/dom/window.ts
index ee1b121..48d0714 100644
--- a/webAO/dom/window.ts
+++ b/webAO/dom/window.ts
@@ -30,6 +30,7 @@ declare global {
     pickChar: (ccharacter: any) => void;
     chartable_filter: (_event: any) => void;
     ReconnectButton: (_event: any) => void;
+    DisconnectButton: () => void;
     opusCheck: (channel: HTMLAudioElement) => OnErrorEventHandlerNonNull;
     imgError: (image: any) => void;
     charError: (image: any) => void;