From 3b80b4e1fa3de2d7d9591c0ccca5ce23c4afe93a Mon Sep 17 00:00:00 2001 From: sD Date: Sat, 21 Dec 2019 21:30:24 +0100 Subject: add area indicators --- webAO/client.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 56 insertions(+), 4 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 8705aaa..a09ea75 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -94,6 +94,7 @@ class Client extends EventEmitter { this.chars = []; this.emotes = []; this.evidences = []; + this.areas = []; this.resources = { "holdit": { @@ -716,8 +717,15 @@ class Client extends EventEmitter { } else { // Create area button const newarea = document.createElement("SPAN"); - newarea.className = "location-box"; + newarea.classList = "area-button area-default"; + newarea.id = "area" + i; newarea.textContent = args[i]; + this.areas[i] = { + name: safe_tags(args[i]), + players: 0, + status: "IDLE" + }; + newarea.onclick = function () { area_click(this); }; @@ -878,11 +886,55 @@ class Client extends EventEmitter { /** * Handle the change of players in an area. - * webAO doesn't have this feature yet, but i want the warning to go away. + * ARUP#0#20#8#2#0#5#2#4#1#5#% * @param {Array} args packet arguments */ - handleARUP(_args) { - // TODO: webAO doesn't have this feature yet + handleARUP(args) { + args = args.slice(1); + + switch(args[0]) { + case "0": + for (let i = 1; i < args.length - 1; i++) { + this.areas[i].players = args[i]; + const thisarea = document.getElementById("area" + i); + thisarea.textContent = `${this.areas[i].name} (${args[i]})` ; + } + break; + case "1": + for (let i = 1; i < args.length - 1; i++) { + this.areas[i].status = args[i]; + const thisarea = document.getElementById("area" + i); + + switch (args[i]) { + case "LOOKING-FOR-PLAYERS": + thisarea.classList = "area-button area-looking"; + break; + case "CASING": + thisarea.classList = "area-button area-casing"; + break; + case "RECESS": + thisarea.classList = "area-button area-recess"; + break; + case "RP": + thisarea.classList = "area-button area-rp"; + break; + case "GAMING": + thisarea.classList = "area-button area-gaming"; + break; + default: + thisarea.classList = "area-button area-default"; + break; + } + + } + break; + case "2": + break; + case "3": + break; + } + + } /** -- cgit From 729892862bcd4e4afd46a9bc2ba1cb99848c8be6 Mon Sep 17 00:00:00 2001 From: sD Date: Sun, 22 Dec 2019 19:22:57 +0100 Subject: make area buttons work again --- webAO/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index a09ea75..4898ef4 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1667,7 +1667,7 @@ window.showname_click = showname_click; * @param {MouseEvent} event */ export function area_click(el) { - const area = el.textContent; + const area = client.areas[el.id.substr(4)].name; client.sendMusicChange(area); const areaHr = document.createElement("div"); -- cgit From ba8ec61733a6d582f939fffbe04793d31ec2d12e Mon Sep 17 00:00:00 2001 From: sD Date: Sun, 22 Dec 2019 19:37:30 +0100 Subject: add locked and spectatable --- webAO/client.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 4898ef4..493598d 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -906,6 +906,9 @@ class Client extends EventEmitter { const thisarea = document.getElementById("area" + i); switch (args[i]) { + case "LOCKED": + thisarea.classList = "area-button area-locked"; + break; case "LOOKING-FOR-PLAYERS": thisarea.classList = "area-button area-looking"; break; @@ -921,6 +924,9 @@ class Client extends EventEmitter { case "GAMING": thisarea.classList = "area-button area-gaming"; break; + case "SPECTATABLE": + thisarea.classList = "area-button area-spectatable"; + break; default: thisarea.classList = "area-button area-default"; break; -- cgit From 23eae97b475c246a40f92207eddd002cc468f5de Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 18:44:28 +0100 Subject: lookup tables are for beginners --- webAO/client.js | 34 +++------------------------------- 1 file changed, 3 insertions(+), 31 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index dd788b8..e1a2fd3 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -887,52 +887,24 @@ class Client extends EventEmitter { /** * Handle the change of players in an area. - * ARUP#0#20#8#2#0#5#2#4#1#5#% * @param {Array} args packet arguments */ handleARUP(args) { args = args.slice(1); switch(args[0]) { - case "0": + case "0": // playercount for (let i = 1; i < args.length - 1; i++) { this.areas[i].players = args[i]; const thisarea = document.getElementById("area" + i); thisarea.textContent = `${this.areas[i].name} (${args[i]})` ; } break; - case "1": + case "1": // status for (let i = 1; i < args.length - 1; i++) { this.areas[i].status = args[i]; const thisarea = document.getElementById("area" + i); - - switch (args[i]) { - case "LOCKED": - thisarea.classList = "area-button area-locked"; - break; - case "LOOKING-FOR-PLAYERS": - thisarea.classList = "area-button area-looking"; - break; - case "CASING": - thisarea.classList = "area-button area-casing"; - break; - case "RECESS": - thisarea.classList = "area-button area-recess"; - break; - case "RP": - thisarea.classList = "area-button area-rp"; - break; - case "GAMING": - thisarea.classList = "area-button area-gaming"; - break; - case "SPECTATABLE": - thisarea.classList = "area-button area-spectatable"; - break; - default: - thisarea.classList = "area-button area-default"; - break; - } - + thisarea.classList = "area-button " + args[i]; } break; case "2": -- cgit From d6d07a509e8ecbb54e37acea9399a8090c7c45c2 Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 18:46:17 +0100 Subject: oof --- webAO/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index e1a2fd3..fc42a17 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -904,7 +904,7 @@ class Client extends EventEmitter { for (let i = 1; i < args.length - 1; i++) { this.areas[i].status = args[i]; const thisarea = document.getElementById("area" + i); - thisarea.classList = "area-button " + args[i]; + thisarea.classList = "area-button area-" + args[i]; } break; case "2": -- cgit From 2f2a440fd8e8a553459c4cf915b34b3f83b74b4b Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 18:48:19 +0100 Subject: add idle and play it safe --- webAO/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index fc42a17..5dac931 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -904,7 +904,7 @@ class Client extends EventEmitter { for (let i = 1; i < args.length - 1; i++) { this.areas[i].status = args[i]; const thisarea = document.getElementById("area" + i); - thisarea.classList = "area-button area-" + args[i]; + thisarea.classList = "area-button area-" + safe_tags(args[i]).toLowerCase(); } break; case "2": -- cgit From 7e4b235a28788cd7c30df263e957aecea6172f2c Mon Sep 17 00:00:00 2001 From: sD Date: Mon, 23 Dec 2019 21:09:34 +0100 Subject: document tick() part1 --- webAO/client.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 2346041..4a1d743 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1258,6 +1258,32 @@ class Viewport { /** * Updates the chatbox based on the given text. * + * OK, here's the documentation on how this works: + * + * 1 flip + * For whatever reason it starts off by checking if the character is flipped, every time this is called + * This is probably a TODO to move this somewhere else + * + * 2 flip + * If the server supports it, the same is done for the paired character + * Both of these should probably be moved to say() + * + * 3 _animating + * If we're not done with this characters animation, i.e. his text isn't fully there, set a timeout for the next tick/step to happen + * + * 4 isnew + * This is run once for every new message + * The chatbox and evidence is hidden (TODO even if there is no shout) + * and if there is a shout it's audio starts playing + * + * 5 startpreanim + * If the shout timer is over it starts with the preanim + * The first thing it checks for is the shake effect (TODO on client this is handled by the @ symbol and not a flag ) + * Then is the flash/realization effect + * After that, the shout image is set to a transparent placeholder gif (TODO just hide it with CSS) + * and the main characters preanim gif is loaded + * If pairing is supported the paired character will just stand around with his idle sprite + * * XXX: This relies on a global variable `this.chatmsg`! */ tick() { -- cgit From adc037aafbb19fc597b0d69bb52cacf8d40e533e Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 24 Dec 2019 03:27:19 +0100 Subject: document tick() part 2 --- webAO/client.js | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 4a1d743..96c420b 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1284,6 +1284,17 @@ class Viewport { * and the main characters preanim gif is loaded * If pairing is supported the paired character will just stand around with his idle sprite * + * 6 preanimdelay over + * this animates the evidence popup and finally shows the character name and message box + * it sets the text color , changes the background (again TODO) and sets the character speaking sprite + * + * 7 textnow != content + * this adds a character to the textbox and stops the animations if the entire message is present in the textbox + * + * 8 sfx + * independent of the stuff above, this will play any sound effects specified by the emote the character sent. + * happens after the shout delay + an sfx delay that comes with the message packet + * * XXX: This relies on a global variable `this.chatmsg`! */ tick() { -- cgit From 062411adf06e3cf1383db541f4009e18347fccd2 Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 24 Dec 2019 04:01:37 +0100 Subject: say() TODOs --- webAO/client.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 96c420b..3d9d926 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1122,6 +1122,10 @@ class Viewport { /** * Sets a new emote. + * TODO: merge this and initUpdater + * This sets up everything before the tick() loops starts + * a lot of things can probably be moved here, like starting the shout animation if there is one + * TODO: the preanim logic, on the other hand, should probably be moved to tick() * @param {object} chatmsg the new chat message */ async say(chatmsg) { -- cgit From 7e36f3024ab3ffba130cb93c396408e4ff708c0d Mon Sep 17 00:00:00 2001 From: sD Date: Tue, 24 Dec 2019 15:36:36 +0100 Subject: replace modcall dialog with a prompt --- webAO/client.js | 40 +++++++--------------------------------- 1 file changed, 7 insertions(+), 33 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 3d9d926..6e481f5 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -2211,7 +2211,12 @@ window.randomCharacterOOC = randomCharacterOOC; * Call mod. */ export function callMod() { - $("#callmod_dialog").dialog("open"); + let modcall = prompt("Please enter the reason for the modcall",""); + if (modcall == null || modcall === "") { + // cancel + } else { + client.sendZZ(modcall); + } } window.callMod = callMod; @@ -2449,35 +2454,4 @@ function decodeChat(estring) { // let client = new Client(serverIP); -let viewport = new Viewport(); - -// Create dialog and link to button -$(function () { - $("#callmod_dialog").dialog({ - autoOpen: false, - resizable: false, - show: { - effect: "drop", - direction: "down", - duration: 500 - }, - hide: { - effect: "drop", - direction: "down", - duration: 500 - }, - height: "auto", - width: 400, - modal: true, - buttons: { - Sure: function () { - const reason = prompt("Please enter the reason", ""); - client.sendZZ(reason); - $(this).dialog("close"); - }, - Cancel: function () { - $(this).dialog("close"); - } - } - }); -}); +let viewport = new Viewport(); \ No newline at end of file -- cgit From ab5a95dcdc622bb2c7cd35e2cc29c1881c882eb2 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 25 Dec 2019 17:41:25 +0100 Subject: add tooltip with CM and area lock --- webAO/client.js | 63 ++++++++++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 27 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 5dac931..817277f 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -716,20 +716,26 @@ class Client extends EventEmitter { newentry.text = args[i]; hmusiclist.options.add(newentry); } else { - // Create area button - const newarea = document.createElement("SPAN"); - newarea.classList = "area-button area-default"; - newarea.id = "area" + i; - newarea.textContent = args[i]; this.areas[i] = { name: safe_tags(args[i]), players: 0, - status: "IDLE" + status: "IDLE", + cm: "", + locked: "FREE" }; + // Create area button + let newarea = document.createElement("SPAN"); + newarea.classList = "area-button area-default"; + newarea.id = "area" + i; + newarea.innerText = this.areas[i].name; + newarea.title = "Players:
" + + "Status:
" + + "CM: "; newarea.onclick = function () { area_click(this); }; + document.getElementById("areas").appendChild(newarea); } } @@ -891,29 +897,32 @@ class Client extends EventEmitter { */ handleARUP(args) { args = args.slice(1); + for (let i = 1; i < args.length - 1; i++) { + if (this.areas[i]) { // the server sends us ARUP before we even get the area list + const thisarea = document.getElementById("area" + i); + switch(args[0]) { + case "0": // playercount + this.areas[i].players = Number(args[i]); + thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players})`; + break; + case "1": // status + this.areas[i].status = safe_tags(args[i]); + thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase(); + break; + case "2": + this.areas[i].cm = safe_tags(args[i]); + break; + case "3": + this.areas[i].locked = safe_tags(args[i]); + break; + } - switch(args[0]) { - case "0": // playercount - for (let i = 1; i < args.length - 1; i++) { - this.areas[i].players = args[i]; - const thisarea = document.getElementById("area" + i); - thisarea.textContent = `${this.areas[i].name} (${args[i]})` ; - } - break; - case "1": // status - for (let i = 1; i < args.length - 1; i++) { - this.areas[i].status = args[i]; - const thisarea = document.getElementById("area" + i); - thisarea.classList = "area-button area-" + safe_tags(args[i]).toLowerCase(); - } - break; - case "2": - break; - case "3": - break; + thisarea.title = `Players: ${this.areas[i].players}\n` + + `Status: ${this.areas[i].status}\n` + + `CM: ${this.areas[i].cm}\n` + + `Area lock: ${this.areas[i].locked}`; + } } - - } /** -- cgit From 099ae02dd9ff85a0ff31a93042abd2ec3e3a96c6 Mon Sep 17 00:00:00 2001 From: sD Date: Wed, 25 Dec 2019 18:44:39 +0100 Subject: use DOM instead of jquery --- webAO/client.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 6e481f5..ca1dcdd 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -830,19 +830,17 @@ class Client extends EventEmitter { */ handleHP(args) { const percent_hp = args[2] * 10; - if (args[1] === 1) { + let healthbox; + if (args[1] === "1") { // Def hp this.hp[0] = args[2]; - $("#client_defense_hp > .health-bar").animate({ - "width": percent_hp + "%" - }, 500); + healthbox = document.getElementById("client_defense_hp"); } else { // Pro hp this.hp[1] = args[2]; - $("#client_prosecutor_hp > .health-bar").animate({ - "width": percent_hp + "%" - }, 500); + healthbox = document.getElementById("client_prosecutor_hp"); } + healthbox.getElementsByClassName("health-bar")[0].style.width = percent_hp + "%"; } /** -- cgit From 32c42015e57e7cf2d5c66a1d54ceec2e9cdb1214 Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 26 Dec 2019 16:08:28 +0100 Subject: replace shake animation --- webAO/client.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index ca1dcdd..10ae4e5 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1368,9 +1368,7 @@ class Viewport { this.sfxplayed = 1; this.sfxaudio.src = AO_HOST + "sounds/general/sfx-stab.wav"; this.sfxaudio.play(); - $("#client_gamewindow").effect("shake", { - "direction": "up" - }); + document.getElementById("client_gamewindow").style.animation = "shake 0.2s 1"; } else if (this.chatmsg.flash === "1") { // Flash screen background.style.backgroundColor = "white"; -- cgit From 11e800bdf67dd3f5a1a63f7e9bd83fbb79a3d30e Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 26 Dec 2019 18:04:00 +0100 Subject: add flash --- webAO/client.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 10ae4e5..c03d32e 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1376,7 +1376,7 @@ class Viewport { this.sfxplayed = 1; this.sfxaudio.src = AO_HOST + "sounds/general/sfx-realization.wav"; this.sfxaudio.play(); - $("#client_gamewindow").effect("pulsate", { times: 1 }, 200); + document.getElementById("client_fg").style.animation = "flash 0.4s 1"; } // Pre-animation stuff @@ -1889,7 +1889,6 @@ async function changeBackground(position) { }; const { bg, desk, speedLines } = positions[position]; - document.getElementById("client_fg").style.display = "none"; if (viewport.chatmsg.type === "5") { document.getElementById("client_court").src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`; -- cgit From b987a8fdd9a6c2a85e95effd73e15746a3ffc495 Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 26 Dec 2019 18:07:00 +0100 Subject: reset the animation --- webAO/client.js | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index c03d32e..9ecae71 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1135,6 +1135,11 @@ class Viewport { this.sfxplayed = 0; this.textTimer = 0; this._animating = true; + + // Reset CSS animation + document.getElementById("client_fg").style.animation = ""; + document.getElementById("client_gamewindow").style.animation = ""; + clearTimeout(this.updater); // If preanim existed then determine the length if (chatmsg.preanim !== "-") { -- cgit From 6840bc478608079aeb2cdebfa858d14e44deda67 Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 26 Dec 2019 18:13:18 +0100 Subject: animate evidence --- webAO/client.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index 9ecae71..26181f5 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1420,17 +1420,13 @@ class Viewport { // Only def show evidence on right eviBox.style.right = "1.5em"; eviBox.style.left = "initial"; - $("#client_evi").animate({ - height: "30%", - opacity: 1 - }, 250); + eviBox.style.height = "30%"; + eviBox.style.opacity = 1; } else { eviBox.style.right = "initial"; eviBox.style.left = "1.5em"; - $("#client_evi").animate({ - height: "30%", - opacity: 1 - }, 250); + eviBox.style.height = "30%"; + eviBox.style.opacity = 1; } } -- cgit From 5cdf61a2c53a7c0782fe026f0b19fdc13528df71 Mon Sep 17 00:00:00 2001 From: sD Date: Thu, 26 Dec 2019 18:58:46 +0100 Subject: this is unnecessary now --- webAO/client.js | 1 - 1 file changed, 1 deletion(-) (limited to 'webAO/client.js') diff --git a/webAO/client.js b/webAO/client.js index fa3f2dd..f9cdc52 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1415,7 +1415,6 @@ class Viewport { document.getElementById("client_gamewindow").style.animation = "shake 0.2s 1"; } else if (this.chatmsg.flash === "1") { // Flash screen - background.style.backgroundColor = "white"; this.sfxaudio.pause(); this.sfxplayed = 1; this.sfxaudio.src = AO_HOST + "sounds/general/sfx-realization.wav"; -- cgit