From 1a1ed4e1d0568a1610d5f5da3d541a59afe2b863 Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Tue, 24 Mar 2026 12:23:45 +0100
Subject: 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>
---
 public/client.html | 52 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 29 insertions(+), 23 deletions(-)

(limited to 'public/client.html')

diff --git a/public/client.html b/public/client.html
index ef60e15..fa2f07d 100644
--- a/public/client.html
+++ b/public/client.html
@@ -103,7 +103,7 @@
         <p style="color: red">webAO requires JavaScript to work</p>
       </noscript>
       <div id="client_loading">
-        <h1 id="client_loadingtext">Loading</h1>
+        <h1 id="client_loadingtext">Loading...</h1>
       </div>
       <div id="client_secondfactor" style="display: none">
         <center>
@@ -119,32 +119,33 @@
           </form>
         </center>
       </div>
-      <div id="client_charselect">
-        <p>Choose your character</p>
-        <button onclick="pickChar(-1)">Or spectate</button>
-        <br /><br />
-        <input
-          id="client_charactersearch"
-          placeholder="Search"
-          oninput="chartable_filter(event)"
-        />
-        <br /><br />
+      <div id="client_charselect" style="display: none">
+        <div id="client_charselect_toolbar">
+          <input
+            id="client_charactersearch"
+            placeholder="Search"
+            oninput="chartable_filter(event)"
+          />
+          <button id="client_spectate" onclick="pickChar(-1)">Spectate</button>
+        </div>
         <div id="client_chartable"></div>
       </div>
-      <div id="client_error" class="error" style="display: none">
-        <h1 id="client_errortext">Connection error.</h1>
-        <p style="color: #a00">
-          Code:
-          <span id="error_id">(none)</span>
+    </div>
+    <div id="client_error_overlay" style="display: none">
+      <div id="client_error">
+        <div id="client_error_icon">&#x26A0;</div>
+        <h2 id="client_errortext">Connection lost.</h2>
+        <p id="client_error_code">
+          Error code: <span id="error_id">(none)</span>
+        </p>
+        <button id="client_reconnect" onclick="ReconnectButton()">
+          Reconnect
+        </button>
+        <p id="client_error_help">
+          Having trouble?
+          <a href="https://discord.gg/9rYQVVQ" target="_blank">Join us on Discord</a>
         </p>
       </div>
-      <p>
-        Having trouble?
-        <a href="https://discord.gg/9rYQVVQ">Join us on Discord</a>
-      </p>
-      <button id="client_reconnect" onclick="ReconnectButton()">
-        Reconnect
-      </button>
     </div>
   </body>
 
@@ -954,6 +955,11 @@
           If you don't agree, disable cookies for this site in your
           browser.</span
         >
+        <br />
+        <br />
+        <button id="client_disconnect" onclick="DisconnectButton()">
+          Disconnect
+        </button>
       </span>
 
       <!-- About section -->
-- 
cgit 


From 28a140dc8ab8adf32c783c6887e29c245981ab51 Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Tue, 24 Mar 2026 12:35:41 +0100
Subject: Add Connected and Disconnected notices

---
 public/client.html | 1 -
 1 file changed, 1 deletion(-)

(limited to 'public/client.html')

diff --git a/public/client.html b/public/client.html
index fa2f07d..cd5ff3c 100644
--- a/public/client.html
+++ b/public/client.html
@@ -988,7 +988,6 @@
   <template id="log">
     <meta name="frame-title" lang="en" content="Log" />
     <div id="client_log">
-      <div class="hrtext">&#8595; log starts here &#8595;</div>
     </div>
   </template>
 
-- 
cgit 


From 95145c824e252b030a5e53950c9f1ed39774c79a Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Tue, 24 Mar 2026 14:12:30 +0100
Subject: no initial text

---
 public/client.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'public/client.html')

diff --git a/public/client.html b/public/client.html
index cd5ff3c..681e203 100644
--- a/public/client.html
+++ b/public/client.html
@@ -134,7 +134,7 @@
     <div id="client_error_overlay" style="display: none">
       <div id="client_error">
         <div id="client_error_icon">&#x26A0;</div>
-        <h2 id="client_errortext">Connection lost.</h2>
+        <h2 id="client_errortext"></h2>
         <p id="client_error_code">
           Error code: <span id="error_id">(none)</span>
         </p>
-- 
cgit 


From 6f407b54c3251b90463bc508852b031d72b0c673 Mon Sep 17 00:00:00 2001
From: David Skoland <davidskoland@gmail.com>
Date: Sat, 28 Mar 2026 14:09:06 +0100
Subject: remove UI related changes

---
 public/client.html | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

(limited to 'public/client.html')

diff --git a/public/client.html b/public/client.html
index 681e203..d6ac1b6 100644
--- a/public/client.html
+++ b/public/client.html
@@ -103,7 +103,7 @@
         <p style="color: red">webAO requires JavaScript to work</p>
       </noscript>
       <div id="client_loading">
-        <h1 id="client_loadingtext">Loading...</h1>
+        <h1 id="client_loadingtext">Loading</h1>
       </div>
       <div id="client_secondfactor" style="display: none">
         <center>
@@ -119,15 +119,16 @@
           </form>
         </center>
       </div>
-      <div id="client_charselect" style="display: none">
-        <div id="client_charselect_toolbar">
-          <input
-            id="client_charactersearch"
-            placeholder="Search"
-            oninput="chartable_filter(event)"
-          />
-          <button id="client_spectate" onclick="pickChar(-1)">Spectate</button>
-        </div>
+      <div id="client_charselect">
+        <p>Choose your character</p>
+        <button onclick="pickChar(-1)">Or spectate</button>
+        <br /><br />
+        <input
+          id="client_charactersearch"
+          placeholder="Search"
+          oninput="chartable_filter(event)"
+        />
+        <br /><br />
         <div id="client_chartable"></div>
       </div>
     </div>
@@ -988,6 +989,7 @@
   <template id="log">
     <meta name="frame-title" lang="en" content="Log" />
     <div id="client_log">
+      <div class="hrtext">&#8595; log starts here &#8595;</div>
     </div>
   </template>
 
-- 
cgit