remove UI related changes

13 files changed, 68 insertions, 68 deletions

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>
 
diff --git a/webAO/client.ts b/webAO/client.ts
index 70450cf..5f35c69 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -14,7 +14,6 @@ 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 {
@@ -427,7 +426,7 @@ class Client extends EventEmitter {
 
   resetAreaList() {
     this.areas = [];
-    renderAreaList();
+    document.getElementById("areas").innerHTML = "";
     fetchBackgroundList();
     fetchEvidenceList();
     fetchCharacterList();
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#%`);
   }
 };
diff --git a/webAO/dom/areaClick.ts b/webAO/dom/areaClick.ts
index 120ef39..27682c7 100644
--- a/webAO/dom/areaClick.ts
+++ b/webAO/dom/areaClick.ts
@@ -1,5 +1,4 @@
 import { client } from "../client";
-import { appendICNotice } from "../client/appendICNotice";
 import { renderPlayerList } from "./renderPlayerList";
 /**
  * Triggered when an item on the area list is clicked.
@@ -8,7 +7,11 @@ import { renderPlayerList } from "./renderPlayerList";
 export function area_click(el: HTMLElement) {
   const area = client.areas[el.id.substring(4)].name;
   client.sender.sendMusicChange(area);
-  appendICNotice(`switched to ${el.textContent}`);
+
+  const areaHr = document.createElement("div");
+  areaHr.className = "hrtext";
+  areaHr.textContent = `switched to ${el.textContent}`;
+  document.getElementById("client_log")!.appendChild(areaHr);
   client.area = Number(el.id.substring(4));
   renderPlayerList();
 }
diff --git a/webAO/dom/renderAreaList.ts b/webAO/dom/renderAreaList.ts
deleted file mode 100644
index e622765..0000000
--- a/webAO/dom/renderAreaList.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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/packets/handlers/handleARUP.ts b/webAO/packets/handlers/handleARUP.ts
index 5a7aebb..7f72b15 100644
--- a/webAO/packets/handlers/handleARUP.ts
+++ b/webAO/packets/handlers/handleARUP.ts
@@ -1,5 +1,4 @@
 import { client } from "../../client";
-import { renderAreaList } from "../../dom/renderAreaList";
 import { safeTags } from "../../encoding";
 
 /**
@@ -11,6 +10,7 @@ export const handleARUP = (args: string[]) => {
   for (let i = 0; i < args.length - 1; i++) {
     if (client.areas[i]) {
       // the server sends us ARUP before we even get the area list
+      const thisarea = document.getElementById(`area${i}`)!;
       switch (Number(args[0])) {
         case 0: // playercount
           client.areas[i].players = Number(args[i + 1]);
@@ -25,7 +25,18 @@ export const handleARUP = (args: string[]) => {
           client.areas[i].locked = safeTags(args[i + 1]);
           break;
       }
+
+      thisarea.className = `area-button area-${client.areas[
+        i
+      ].status.toLowerCase()}`;
+
+      thisarea.innerText = `${client.areas[i].name} (${client.areas[i].players}) [${client.areas[i].status}]`;
+
+      thisarea.title =
+        `Players: ${client.areas[i].players}\n` +
+        `Status: ${client.areas[i].status}\n` +
+        `CM: ${client.areas[i].cm}\n` +
+        `Area lock: ${client.areas[i].locked}`;
     }
   }
-  renderAreaList();
 };
diff --git a/webAO/packets/handlers/handleCI.ts b/webAO/packets/handlers/handleCI.ts
index 58a6dad..c0cbd84 100644
--- a/webAO/packets/handlers/handleCI.ts
+++ b/webAO/packets/handlers/handleCI.ts
@@ -8,6 +8,8 @@ import { handleCharacterInfo } from "../../client/handleCharacterInfo";
  */
 export const handleCI = (args: string[]) => {
   // Loop through the 10 characters that were sent
+  document.getElementById("client_loadingtext")!.innerHTML =
+    `Loading Character ${args[1]}/${client.char_list_length}`;
   for (let i = 2; i <= args.length - 2; i++) {
     if (i % 2 === 0) {
       const chargs = args[i].split("&");
diff --git a/webAO/packets/handlers/handleEI.ts b/webAO/packets/handlers/handleEI.ts
index 6602214..3d15766 100644
--- a/webAO/packets/handlers/handleEI.ts
+++ b/webAO/packets/handlers/handleEI.ts
@@ -11,6 +11,8 @@ import { prepChat } from "../../encoding";
  * @param {Array} args packet arguments
  */
 export const handleEI = (args: string[]) => {
+  document.getElementById("client_loadingtext")!.innerHTML =
+    `Loading Evidence ${args[1]}/${client.evidence_list_length}`;
   const evidenceID = Number(args[1]);
   const arg = args[2].split("&");
   client.evidences[evidenceID] = {
diff --git a/webAO/packets/handlers/handleEM.ts b/webAO/packets/handlers/handleEM.ts
index 94d224c..b3947dd 100644
--- a/webAO/packets/handlers/handleEM.ts
+++ b/webAO/packets/handlers/handleEM.ts
@@ -10,6 +10,7 @@ import { isAudio } from "../../client/isAudio";
  * @param {Array} args packet arguments
  */
 export const handleEM = (args: string[]) => {
+  document.getElementById("client_loadingtext")!.innerHTML = "Loading Music";
   if (args[1] === "0") {
     client.resetMusicList();
     client.resetAreaList();
diff --git a/webAO/packets/handlers/handleSM.ts b/webAO/packets/handlers/handleSM.ts
index 17453c1..1c3fd5e 100644
--- a/webAO/packets/handlers/handleSM.ts
+++ b/webAO/packets/handlers/handleSM.ts
@@ -8,11 +8,14 @@ import { createArea } from "../../client/createArea";
  * @param {Array} args packet arguments
  */
 export const handleSM = (args: string[]) => {
+  document.getElementById("client_loadingtext")!.innerHTML = "Loading Music ";
   client.resetMusicList();
   client.resetAreaList();
 
   client.musics_time = false;
 
+  document.getElementById("client_loadingtext")!.innerHTML = `Loading Music`;
+
   for (let i = 1; i < args.length - 1; i++) {
     // Check when found the song for the first time
     const trackname = args[i];
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 773e9aa..673d176 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -152,12 +152,10 @@
   justify-content: center;
   text-align: center;
   align-items: center;
-  box-sizing: border-box;
   font-size: large;
-  overflow-y: auto;
+  overflow-y: scroll;
   z-index: 100;
-  background: #333;
-  border: 1px solid #000;
+  background: #555;
 }
 
 #client_loading {
@@ -166,7 +164,8 @@
   justify-content: center;
   text-align: center;
   align-items: center;
-  color: #fff;
+  background: black;
+  color: lightgreen;
   font-size: large;
 }
 
@@ -193,22 +192,7 @@
   display: block;
   text-align: center;
   margin: 0 auto;
-  padding: 10px;
-  background: #333;
-  color: #eee;
-}
-
-#client_charselect_toolbar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-#client_charactersearch {
-  width: 150px;
+  background: #444;
 }
 
 #client_icwrapper {