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, 18 insertions, 25 deletions

diff --git a/webAO/client/appendICNotice.ts b/webAO/client/appendICNotice.ts
new file mode 100644
index 0000000..29065db
--- /dev/null
+++ b/webAO/client/appendICNotice.ts
@@ -0,0 +1,10 @@
+/**
+ * Appends a notice (hrtext divider) to the IC log.
+ * @param {string} msg the notice text
+ */
+export function appendICNotice(msg: string) {
+  const el = document.createElement("div");
+  el.className = "hrtext";
+  el.textContent = msg;
+  document.getElementById("client_log")!.appendChild(el);
+}
diff --git a/webAO/client/createArea.ts b/webAO/client/createArea.ts
index 9a40bef..dfc57e8 100644
--- a/webAO/client/createArea.ts
+++ b/webAO/client/createArea.ts
@@ -1,32 +1,15 @@
 import { client } from "../client";
-import { area_click } from "../dom/areaClick";
+import { renderAreaList } from "../dom/renderAreaList";
 import { safeTags } from "../encoding";
 
 export const createArea = (id: number, aname: string) => {
   const name = safeTags(aname);
-  const thisarea = {
+  client.areas.push({
     name,
     players: 0,
     status: "IDLE",
     cm: "",
     locked: "FREE",
-  };
-
-  client.areas.push(thisarea);
-
-  // Create area button
-  const newarea = document.createElement("SPAN");
-  newarea.className = "area-button area-default";
-  newarea.id = `area${id}`;
-  newarea.innerText = thisarea.name;
-  newarea.title =
-    `Players: ${thisarea.players}\n` +
-    `Status: ${thisarea.status}\n` +
-    `CM: ${thisarea.cm}\n` +
-    `Area lock: ${thisarea.locked}`;
-  newarea.onclick = function () {
-    area_click(newarea);
-  };
-
-  document.getElementById("areas")!.appendChild(newarea);
+  });
+  renderAreaList();
 };
diff --git a/webAO/client/fixLastArea.ts b/webAO/client/fixLastArea.ts
index a9979da..839b14c 100644
--- a/webAO/client/fixLastArea.ts
+++ b/webAO/client/fixLastArea.ts
@@ -1,4 +1,5 @@
 import { client } from "../client";
+import { renderAreaList } from "../dom/renderAreaList";
 import { addTrack } from "./addTrack";
 
 /**
@@ -7,8 +8,7 @@ import { addTrack } from "./addTrack";
 export const fix_last_area = () => {
   if (client.areas.length > 0) {
     const malplaced = client.areas.pop().name;
-    const areas = document.getElementById("areas")!;
-    areas.removeChild(areas.lastChild);
+    renderAreaList();
     addTrack(malplaced);
   }
 };
diff --git a/webAO/client/handleBans.ts b/webAO/client/handleBans.ts
index 9eec9be..cf7f881 100644
--- a/webAO/client/handleBans.ts
+++ b/webAO/client/handleBans.ts
@@ -6,7 +6,7 @@ import { safeTags } from "../encoding";
  * @param {string} reason why
  */
 export const handleBans = (type: string, reason: string) => {
-  document.getElementById("client_error")!.style.display = "flex";
+  document.getElementById("client_error_overlay")!.style.display = "flex";
   document.getElementById("client_errortext")!.innerHTML =
     `${type}:<br>${safeTags(reason).replace(/\n/g, "<br />")}`;
   (<HTMLElement>document.getElementById("client_reconnect")).style.display =
diff --git a/webAO/client/sender/sendCharacter.ts b/webAO/client/sender/sendCharacter.ts
index 2db4dcd..eed6a99 100644
--- a/webAO/client/sender/sendCharacter.ts
+++ b/webAO/client/sender/sendCharacter.ts
@@ -5,7 +5,7 @@ import { client } from "../../client";
  * @param {number} character the character ID
  */
 export const sendCharacter = (character: number) => {
-  if (character === -1 || client.chars[character].name) {
+  if (character === -1 || (client.chars[character] && client.chars[character].name)) {
     client.sender.sendServer(`CC#${client.playerID}#${character}#web#%`);
   }
 };