From 1a1ed4e1d0568a1610d5f5da3d541a59afe2b863 Mon Sep 17 00:00:00 2001 From: David Skoland 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) --- webAO/client/appendICNotice.ts | 10 ++++++++++ webAO/client/createArea.ts | 25 ++++--------------------- webAO/client/fixLastArea.ts | 4 ++-- webAO/client/handleBans.ts | 2 +- webAO/client/sender/sendCharacter.ts | 2 +- 5 files changed, 18 insertions(+), 25 deletions(-) create mode 100644 webAO/client/appendICNotice.ts (limited to 'webAO/client') 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}:
${safeTags(reason).replace(/\n/g, "
")}`; (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#%`); } }; -- cgit From c923dbe9a71a77db4f32c3b3e5153d24441c0ff6 Mon Sep 17 00:00:00 2001 From: David Skoland Date: Tue, 24 Mar 2026 12:27:46 +0100 Subject: no double notice --- webAO/client/handleBans.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'webAO/client') diff --git a/webAO/client/handleBans.ts b/webAO/client/handleBans.ts index cf7f881..004b27e 100644 --- a/webAO/client/handleBans.ts +++ b/webAO/client/handleBans.ts @@ -11,5 +11,4 @@ export const handleBans = (type: string, reason: string) => { `${type}:
${safeTags(reason).replace(/\n/g, "
")}`; (document.getElementById("client_reconnect")).style.display = "none"; - alert(type + ":\r" + reason); }; -- cgit From 6f407b54c3251b90463bc508852b031d72b0c673 Mon Sep 17 00:00:00 2001 From: David Skoland Date: Sat, 28 Mar 2026 14:09:06 +0100 Subject: remove UI related changes --- webAO/client/createArea.ts | 25 +++++++++++++++++++++---- webAO/client/fixLastArea.ts | 4 ++-- webAO/client/sender/sendCharacter.ts | 2 +- 3 files changed, 24 insertions(+), 7 deletions(-) (limited to 'webAO/client') diff --git a/webAO/client/createArea.ts b/webAO/client/createArea.ts index dfc57e8..9a40bef 100644 --- a/webAO/client/createArea.ts +++ b/webAO/client/createArea.ts @@ -1,15 +1,32 @@ import { client } from "../client"; -import { renderAreaList } from "../dom/renderAreaList"; +import { area_click } from "../dom/areaClick"; import { safeTags } from "../encoding"; export const createArea = (id: number, aname: string) => { const name = safeTags(aname); - client.areas.push({ + const thisarea = { name, players: 0, status: "IDLE", cm: "", locked: "FREE", - }); - renderAreaList(); + }; + + 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); }; diff --git a/webAO/client/fixLastArea.ts b/webAO/client/fixLastArea.ts index 839b14c..a9979da 100644 --- a/webAO/client/fixLastArea.ts +++ b/webAO/client/fixLastArea.ts @@ -1,5 +1,4 @@ import { client } from "../client"; -import { renderAreaList } from "../dom/renderAreaList"; import { addTrack } from "./addTrack"; /** @@ -8,7 +7,8 @@ import { addTrack } from "./addTrack"; export const fix_last_area = () => { if (client.areas.length > 0) { const malplaced = client.areas.pop().name; - renderAreaList(); + const areas = document.getElementById("areas")!; + areas.removeChild(areas.lastChild); addTrack(malplaced); } }; diff --git a/webAO/client/sender/sendCharacter.ts b/webAO/client/sender/sendCharacter.ts index eed6a99..2db4dcd 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] && client.chars[character].name)) { + if (character === -1 || client.chars[character].name) { client.sender.sendServer(`CC#${client.playerID}#${character}#web#%`); } }; -- cgit