aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/client.html22
-rw-r--r--webAO/client.ts3
-rw-r--r--webAO/client/createArea.ts25
-rw-r--r--webAO/client/fixLastArea.ts4
-rw-r--r--webAO/client/sender/sendCharacter.ts2
-rw-r--r--webAO/dom/areaClick.ts7
-rw-r--r--webAO/dom/renderAreaList.ts24
-rw-r--r--webAO/packets/handlers/handleARUP.ts15
-rw-r--r--webAO/packets/handlers/handleCI.ts2
-rw-r--r--webAO/packets/handlers/handleEI.ts2
-rw-r--r--webAO/packets/handlers/handleEM.ts1
-rw-r--r--webAO/packets/handlers/handleSM.ts3
-rw-r--r--webAO/styles/client.css26
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 {
generated by cgit (git 2.34.1) at 2026-04-23 11:47:32 +0000