Skip to content

Commit 1db7474

Browse files
oldmud0oldmud0
committed
Fix some more annoyances
- Use createTextNode instead of escapeHtml - Add area change messages in IC log - Move "Call Mod" button to menu, replacing "Guide" which was mostly empty except for the BBCode reference (but you can surely look that up somewhere else, at least until more documentation for webAO has been produced) - Compact the evidence editor - Fix bug where the last emote was not displayed in the emotes list Some issues that remain: - Clients still cannot send special Unicode characters, but they can receive them correctly. - Shout animations run for longer than the GIF animation length. - Preanims sometimes play when they are not supposed to. - GoldenLayout panels cannot be dragged around for some reason. - The chatbox does not automatically scroll down. - When the game panel is maximized, the viewport should not exceed the size of the game panel.
1 parent 8818ba9 commit 1db7474

File tree

5 files changed

+66
-85
lines changed

5 files changed

+66
-85
lines changed

‎webAO/client.b.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webAO/client.b.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎webAO/client.css‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -327,13 +327,18 @@ img {
327327
background-size: contain;
328328
}
329329

330-
.evi_options {
330+
#evi_options {
331331
display: inline-block;
332+
padding-left: 5px;
332333
}
333334

334-
.evi_options label {
335+
#evi_options label {
335336
display: inline-block;
336-
width: 6em;
337+
width: 3em;
338+
}
339+
340+
#evi_desc {
341+
flex: 1 auto;
337342
}
338343

339344
#bg_preview {

‎webAO/client.html‎

Lines changed: 26 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
<div id="client_background"></div>
2626
<div id="client_gamewindow">
2727
<img id="client_court" alt="Courtroom background" onerror="imgError(this);">
28-
<img id="client_char" alt="Character sprite" onerror="imgError(this);">
29-
<img id="client_bench" alt="Bench overlay">
28+
<img id="client_char" onerror="imgError(this);">
29+
<img id="client_bench">
3030
<img id="client_fg" alt="Various overlay" onerror="imgError(this);">
3131
<img id="client_evi" src="misc/evidence_selector.png" alt="Character Evidence" onerror="imgError(this);">
3232
<img id="client_shout" alt="Effect overlay" src="misc/placeholder.gif" onerror="imgError(this);">
@@ -114,17 +114,12 @@
114114
No actions available for this role.
115115
</span>
116116
</fieldset>
117-
<br>
118-
<span id="menu_cm" onclick="callMod()" class="menu_icon">
119-
<i class="material-icons em-3">report</i>
120-
<div>Call Mod</div>
121-
</span>
122117
</template>
123118

124119
<template id="mainmenu">
125120
<meta name="frame-title" lang="en" content="Log">
126121
<div id="client_menu">
127-
<div class="hrtext">↓ Main Menu ↓</div>
122+
<div class="hrtext">Main Menu</div>
128123
<span id="menu_1" onclick="toggleMenu(1)" class="menu_icon active">
129124
<i class="material-icons em-3">room</i>
130125
<div>Areas</div>
@@ -138,15 +133,16 @@
138133
<div>Settings</div>
139134
</span>
140135
<span id="menu_4" onclick="toggleMenu(4)" class="menu_icon">
141-
<i class="material-icons em-3">description</i>
142-
<div>Guide</div>
143-
</span>
144-
<span id="menu_5" onclick="toggleMenu(5)" class="menu_icon">
145136
<i class="material-icons em-3">person</i>
146137
<div>About</div>
147138
</span>
148-
<div class="hrtext">↓
149-
<span id="content_name">Content</span> ↓</div>
139+
<span id="menu_cm" onclick="callMod()" class="menu_icon">
140+
<i class="material-icons em-3" style="color: #ce2727;">report</i>
141+
<div>Call Mod</div>
142+
</span>
143+
<div class="hrtext">
144+
<span id="content_name">Content</span>
145+
</div>
150146
<!-- Areas section -->
151147
<span class="menu_content active" id="content_1">
152148
<meta name="frame-title" lang="en" content="Areas">
@@ -173,30 +169,28 @@
173169
<!-- Evidence section -->
174170
<span class="menu_content" id="content_2">
175171
<meta name="frame-title" lang="en" content="Evidence">
176-
<fieldset style="text-align: left; display: flex;">
172+
<fieldset style="text-align: left; display: flex; flex-direction: column;">
177173
<legend>Information</legend>
178-
<span>
174+
<div style="display: flex;">
179175
<img id="evi_icon" src="misc/evidence_selector.png" alt="Evidence Icon" onerror="imgError(this);">
180-
</span>
181-
<span class="evi_options">
182-
<label for="evi_filename">Icon:</label>
183-
<select id="evi_select" name="evi_select" onchange="updateEvidenceIcon()"></select>
184-
<input id="evi_filename" name="evi_filename" class="short" type="text" placeholder="Custom filename">
185-
<br>
186-
<label for="evi_name">Name:</label>
187-
<input id="evi_name" name="evi_name" class="short" type="text" placeholder="Evidence name">
188-
<br>
189-
<label for="evi_desc">Description:</label>
176+
<div id="evi_options">
177+
<label for="evi_filename">Icon:</label>
178+
<select id="evi_select" name="evi_select" onchange="updateEvidenceIcon()"></select>
179+
<input id="evi_filename" name="evi_filename" class="short" type="text" placeholder="Custom filename">
180+
<br>
181+
<label for="evi_name">Name:</label>
182+
<input id="evi_name" name="evi_name" class="short" type="text" placeholder="Evidence name">
183+
</div>
184+
</div>
185+
<div style="display: flex; padding-top: 5px;">
190186
<textarea id="evi_desc" name="evi_desc" rows="2" cols="20" placeholder="Evidence description"></textarea>
191-
</span>
192-
<br>
193-
<br>
194-
<span style="display:block; text-align:center">
187+
</div>
188+
<div style="display: block; text-align: center; padding-top: 20px;">
195189
<img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button" onclick="addEvidence()">
196190
<img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence" class="client_button hover_button inactive" onclick="editEvidence()">
197191
<img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence" class="client_button hover_button inactive" onclick="cancelEvidence()">
198192
<img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence" class="client_button hover_button inactive" onclick="deleteEvidence()">
199-
</span>
193+
</div>
200194
</fieldset>
201195
<br>
202196
<div id="evidences"></div>
@@ -265,43 +259,8 @@
265259
<input id="randomchar_command" name="randomchar_command" class="short" type="text" value="randomchar">
266260
</span>
267261

268-
<!-- Guide section -->
269-
<span class="menu_content" id="content_4">
270-
<span style="text-align:left;margin-left:15px;display:block">
271-
<h3>BBcode</h3>
272-
<p>This feature only works on webAO.</p>
273-
<ul style="line-height:1.5em;">
274-
<li>&bsol;n : new line</li>
275-
<li>[b][/b] :
276-
<b>bolded text</b>
277-
</li>
278-
<li>[i][/i] :
279-
<i>italicized text</i>
280-
</li>
281-
<li>[u][/u] :
282-
<u>underlined text</u>
283-
</li>
284-
<li>[s][/s] :
285-
<del>strikethrough text</del>
286-
</li>
287-
<li>[sub][/sub] :
288-
<sub>subscript text</sub>
289-
</li>
290-
<li>[sup][/sup] :
291-
<sup>superscript text</sup>
292-
</li>
293-
<li>[m=#0f0][/m] :
294-
<mark style="background-color:#0f0">highlighted text</mark>
295-
</li>
296-
<li>[c=cyan][/c] :
297-
<span style="color:cyan">colorized text</span>
298-
</li>
299-
</ul>
300-
</span>
301-
</span>
302-
303262
<!-- About section -->
304-
<span class="menu_content" id="content_5">
263+
<span class="menu_content" id="content_4">
305264
<meta name="frame-title" lang="en" content="About">
306265
<img id="about-logo" src="images/logo-new.png" alt="Attorney Online logo">
307266
<h1 style="line-height: .3em;">webAO</h1>

‎webAO/client.js‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ class Client {
458458
*/
459459
prepChat(msg){
460460
// TODO: make this less awful
461-
return decodeBBCode(escapeHtml(decodeChat(unescapeChat(msg))));
461+
return decodeBBCode(unescapeChat(decodeChat(msg)));
462462
}
463463

464464
/**
@@ -617,8 +617,8 @@ class Client {
617617
for (let i = 1; i < args.length - 1; i++) {
618618
const arg = args[i].split("&");
619619
this.evidences[i - 1] = {
620-
"name": escapeHtml(decodeChat(unescapeChat(arg[0]))),
621-
"desc": escapeHtml(decodeChat(unescapeChat(arg[1]))),
620+
"name": decodeChat(unescapeChat(arg[0])),
621+
"desc": decodeChat(unescapeChat(arg[1])),
622622
"filename": escape(arg[2]),
623623
"icon": AO_HOST + "evidence/" + escape(arg[2].toLowerCase())
624624
};
@@ -854,11 +854,14 @@ class Client {
854854
handlePV(args) {
855855
this.charID = args[3];
856856
document.getElementById("client_charselect").style.display = "none";
857+
document.getElementById("client_inputbox").style.display = "";
857858
const me = this.me();
858859
const emotes = this.emotes;
860+
const emotesList = document.getElementById("client_emo");
861+
emotesList.innerHTML = ""; // Clear emote box
862+
emotesList.style.display = "";
859863
const xhr = new XMLHttpRequest();
860864
xhr.withCredentials = false;
861-
document.getElementById("client_emo").innerHTML = ""; // Clear emote box
862865
xhr.open("GET", AO_HOST + "characters/" + escape(this.me().name.toLowerCase()) + "/char.ini", true);
863866
xhr.responseType = "text";
864867
xhr.onload = function (e) {
@@ -867,7 +870,7 @@ class Client {
867870
const pinifile = INI.parse(linifile);
868871
me.side = pinifile.Options.side;
869872
updateActionCommands(me.side);
870-
for (let i = 1; i < pinifile.Emotions.number; i++) {
873+
for (let i = 1; i <= pinifile.Emotions.number; i++) {
871874
const emoteinfo = pinifile.Emotions[i].split("#");
872875
let esfx = "0";
873876
let esfxd = "0";
@@ -888,7 +891,7 @@ class Client {
888891
button_off: AO_HOST + `characters/${escape(me.name).toLowerCase()}/emotions/button${i}_off.png`,
889892
button_on: AO_HOST + `characters/${escape(me.name).toLowerCase()}/emotions/button${i}_on.png`
890893
};
891-
document.getElementById("client_emo").innerHTML +=
894+
emotesList.innerHTML +=
892895
`<img src=${emotes[i].button_off}
893896
id="emo_${i}"
894897
alt="${emotes[i].desc}"
@@ -986,7 +989,7 @@ class Viewport {
986989
this.textTimer = 0;
987990
this._animating = true;
988991
clearTimeout(this.updater);
989-
//If preanim existed then determine the length
992+
// If preanim existed then determine the length
990993
if (chatmsg.preanim != "-") {
991994
chatmsg.preanimdelay = this.getAnimLength(`${AO_HOST}characters/${escape(chatmsg.name.toLowerCase())}/${chatmsg.preanim.toLowerCase()}.gif`, this.initUpdater);
992995
} else {
@@ -1187,7 +1190,11 @@ class Viewport {
11871190

11881191
nameBox.style.display = "block";
11891192
nameBox.style.fontSize = (nameBox.offsetHeight * 0.7) + "px";
1190-
nameBox.innerHTML = "<p>" + escapeHtml(this.chatmsg.nameplate) + "</p>";
1193+
1194+
while (nameBox.hasChildNodes()) {
1195+
nameBox.removeChild(nameBox.firstChild);
1196+
}
1197+
nameBox.appendChild(document.createTextNode(this.chatmsg.nameplate));
11911198

11921199
chatBox.style.display = "block";
11931200
chatBox.style.fontSize = (chatBox.offsetHeight * 0.25) + "px";
@@ -1224,7 +1231,12 @@ class Viewport {
12241231
this.currentBlipChannel %= this.blipChannels.length;
12251232
}
12261233
this.textnow = this.chatmsg.content.substring(0, this.textnow.length + 1);
1227-
chatBoxInner.innerHTML = this.textnow;
1234+
1235+
while (chatBoxInner.hasChildNodes()) {
1236+
chatBoxInner.removeChild(chatBoxInner.firstChild);
1237+
}
1238+
chatBoxInner.appendChild(document.createTextNode(this.textnow));
1239+
12281240
if (this.textnow == this.chatmsg.content) {
12291241
this.textTimer = 0;
12301242
this._animating = false;
@@ -1335,18 +1347,23 @@ function resetICParams() {
13351347
* @param {MouseEvent} event
13361348
*/
13371349
export function musiclist_click(event) {
1338-
let playtrack = document.getElementById("client_musiclist").value;
1350+
const playtrack = document.getElementById("client_musiclist").value;
13391351
client.sendMusicChange(playtrack);
13401352
}
13411353
window.musiclist_click = musiclist_click;
13421354

13431355
/**
1344-
* Triggered when an item on the music list is clicked.
1356+
* Triggered when an item on the area list is clicked.
13451357
* @param {MouseEvent} event
13461358
*/
13471359
export function area_click(el) {
1348-
let playtrack = el.textContent;
1349-
client.sendMusicChange(playtrack);
1360+
const area = el.textContent;
1361+
client.sendMusicChange(area);
1362+
1363+
const areaHr = document.createElement("div");
1364+
areaHr.className = "hrtext";
1365+
areaHr.textContent = `switched to ${el.textContent}`;
1366+
document.getElementById("client_log").appendChild(areaHr);
13501367
}
13511368
window.area_click = area_click;
13521369

0 commit comments

Comments
 (0)