From 7f0eaa80f7a2535ad30c1380546173fd6a60920d Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 16 Mar 2022 23:11:54 +0100 Subject: add a loading bar and a wrapper for all overlaying "windows" --- webAO/client.js | 24 +++++++++++++++--------- webAO/styles/client.css | 31 ++++++++++++++++++------------- 2 files changed, 33 insertions(+), 22 deletions(-) (limited to 'webAO') diff --git a/webAO/client.js b/webAO/client.js index 8bac1cc..26f8716 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -483,6 +483,7 @@ class Client extends EventEmitter { if (extrafeatures.length == 0 && this.banned === false) { document.getElementById('client_errortext').textContent = 'Could not connect to the server'; } + document.getElementById('client_waiting').style.display = 'block'; document.getElementById('client_error').style.display = 'flex'; document.getElementById('client_loading').style.display = 'none'; document.getElementById('error_id').textContent = e.code; @@ -870,6 +871,7 @@ class Client extends EventEmitter { for (let i = 2; i <= args.length - 2; i++) { if (i % 2 === 0) { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${args[1]}/${this.char_list_length}`; + document.getElementById('client_loadingbar').value = charid; const chargs = args[i].split('&'); const charid = args[i - 1]; setTimeout(() => this.handleCharacterInfo(chargs, charid), 500); @@ -887,15 +889,18 @@ class Client extends EventEmitter { async handleSC(args) { const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); - // Add this so people can see characters loading on the screen. - document.getElementById('client_loading').style.display = 'none'; - document.getElementById('client_charselect').style.display = 'block'; + if (mode === 'watch') { // Spectators don't need to pick a character + document.getElementById('client_charselect').style.display = 'none'; + } else { + document.getElementById('client_charselect').style.display = 'block'; + } document.getElementById('client_loadingtext').innerHTML = 'Loading Characters'; for (let i = 1; i < args.length; i++) { document.getElementById('client_loadingtext').innerHTML = `Loading Character ${i}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = i - 1; + document.getElementById('client_loadingbar').value = charid; await sleep(0.1); // TODO: Too many network calls without this. net::ERR_INSUFFICIENT_RESOURCES this.handleCharacterInfo(chargs, charid); } @@ -912,6 +917,7 @@ class Client extends EventEmitter { */ handleEI(args) { document.getElementById('client_loadingtext').innerHTML = `Loading Evidence ${args[1]}/${this.evidence_list_length}`; + document.getElementById('client_loadingbar').value = this.char_list_length + args[1]; this.sendServer('RM#%'); } @@ -924,6 +930,7 @@ class Client extends EventEmitter { handleLE(args) { this.evidences = []; for (let i = 1; i < args.length - 1; i++) { + document.getElementById('client_loadingbar').value = this.char_list_length + i; const arg = args[i].split('&'); this.evidences[i - 1] = { name: prepChat(arg[0]), @@ -1076,9 +1083,9 @@ class Client extends EventEmitter { for (let i = 2; i < args.length - 1; i++) { if (i % 2 === 0) { - document.getElementById('client_loadingtext').innerHTML = `Loading Music ${args[1]}/${this.music_list_length}`; const trackname = safeTags(args[i]); const trackindex = args[i - 1]; + document.getElementById('client_loadingbar').value = this.char_list_length + this.evidence_list_length + trackindex; if (this.musics_time) { this.addTrack(trackname); } else if (this.isAudio(trackname)) { @@ -1111,6 +1118,7 @@ class Client extends EventEmitter { const trackname = safeTags(args[i]); const trackindex = i - 1; document.getElementById('client_loadingtext').innerHTML = `Loading Music ${i}/${this.music_list_length}`; + document.getElementById('client_loadingbar').value = this.char_list_length + this.evidence_list_length + i; if (this.musics_time) { this.addTrack(trackname); } else if (this.isAudio(trackname)) { @@ -1216,11 +1224,6 @@ class Client extends EventEmitter { */ handleDONE(_args) { document.getElementById('client_loading').style.display = 'none'; - if (mode === 'watch') { // Spectators don't need to pick a character - document.getElementById('client_charselect').style.display = 'none'; - } else { - document.getElementById('client_charselect').style.display = 'block'; - } } /** @@ -1472,6 +1475,8 @@ class Client extends EventEmitter { this.char_list_length += 1; // some servers count starting from 0 some from 1... this.evidence_list_length = Number(args[2]); this.music_list_length = Number(args[3]); + + document.getElementById('client_loadingbar').max = this.char_list_length + this.evidence_list_length + this.music_list_length; // create the charselect grid, to be filled by the character loader document.getElementById('client_chartable').innerHTML = ''; @@ -1515,6 +1520,7 @@ class Client extends EventEmitter { */ async handlePV(args) { this.charID = Number(args[3]); + document.getElementById('client_waiting').style.display = 'none'; document.getElementById('client_charselect').style.display = 'none'; const me = this.chars[this.charID]; diff --git a/webAO/styles/client.css b/webAO/styles/client.css index 940a1ea..0dfe15c 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -68,20 +68,31 @@ animation: error_blink 3s ease-in-out infinite; } -#client_loading { +#client_waiting { display: block; flex-direction: column; position: fixed; - top: 30vh; - left: 30vw; - width: 40vw; + top: 5vh; + left: 10vw; + width: 80vw; + max-height: 90vh; + justify-content: center; + text-align: center; + align-items: center; + font-size: large; + z-index: 100; + background: #555; +} + +#client_loading { + display: block; + flex-direction: column; justify-content: center; text-align: center; align-items: center; background: black; color: lightgreen; font-size: large; - z-index: 100; } #client_loadingtext { @@ -104,17 +115,11 @@ } #client_charselect { - display: none; - position: fixed; - top: 5vh; - left: 10vw; - width: 80vw; - max-height: 90vh; + display: block; overflow-y: scroll; text-align: center; margin: 0 auto; background: #444; - z-index: 50; } #client_icwrapper { @@ -701,4 +706,4 @@ .hrtext:after { left: 0.5em; margin-right: -50%; -} \ No newline at end of file +} -- cgit From 7700da3b537697e58e41e50ca7e724986099b66b Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Wed, 16 Mar 2022 23:12:17 +0100 Subject: fix old ass evidence lmao --- webAO/client.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'webAO') diff --git a/webAO/client.js b/webAO/client.js index 26f8716..c61cf45 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -912,13 +912,24 @@ class Client extends EventEmitter { * Handles incoming evidence information, containing only one evidence * item per packet. * - * Mostly unimplemented in webAO. + * EI#id#name&description&type&image&##% + * * @param {Array} args packet arguments */ handleEI(args) { document.getElementById('client_loadingtext').innerHTML = `Loading Evidence ${args[1]}/${this.evidence_list_length}`; - document.getElementById('client_loadingbar').value = this.char_list_length + args[1]; - this.sendServer('RM#%'); + const evidenceID = args[1]; + document.getElementById('client_loadingbar').value = this.char_list_length + evidenceID; + + const arg = args[2].split('&'); + this.evidences[evidenceID] = { + name: prepChat(arg[0]), + desc: prepChat(arg[1]), + filename: safeTags(arg[3]), + icon: `${AO_HOST}evidence/${encodeURI(arg[3].toLowerCase())}`, + }; + + this.sendServer('AE'+(evidenceID+1)+'#%'); } /** -- cgit From 3ee77d0312931f3ebaae8ef83ad533159c4ff546 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Sat, 19 Mar 2022 21:56:46 +0100 Subject: fix spectators --- webAO/client.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'webAO') diff --git a/webAO/client.js b/webAO/client.js index 553f1cf..698511b 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1235,6 +1235,9 @@ class Client extends EventEmitter { */ handleDONE(_args) { document.getElementById('client_loading').style.display = 'none'; + if (mode === 'watch') { // Spectators don't need to pick a character + document.getElementById('client_waiting').style.display = 'none'; + } } /** @@ -2655,9 +2658,8 @@ window.opusCheck = opusCheck; export function ReconnectButton() { client.cleanup(); client = new Client(serverIP); + if (client) { - mode = 'join'; // HACK: see client.onOpen - document.getElementById('client_error').style.display = 'none'; } } @@ -2750,6 +2752,7 @@ window.chartable_filter = chartable_filter; export function pickChar(ccharacter) { if (ccharacter === -1) { // Spectator + document.getElementById('client_waiting').style.display = 'none'; document.getElementById('client_charselect').style.display = 'none'; } else { client.sendCharacter(ccharacter); -- cgit From 626b7e47b8d19062bbd281115966868d7338fde3 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Sat, 19 Mar 2022 22:45:22 +0100 Subject: fix charselect button --- webAO/client.js | 1 + 1 file changed, 1 insertion(+) (limited to 'webAO') diff --git a/webAO/client.js b/webAO/client.js index 698511b..0d52ee7 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -2609,6 +2609,7 @@ window.switchChatOffset = switchChatOffset; * @param {MouseEvent} event */ export function changeCharacter(_event) { + document.getElementById('client_waiting').style.display = 'block'; document.getElementById('client_charselect').style.display = 'block'; document.getElementById('client_emo').innerHTML = ''; } -- cgit From cd3f7eda8f8a9c407b7750a374e8a40c52c2d881 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Sat, 19 Mar 2022 22:51:02 +0100 Subject: fix scrollbar --- webAO/styles/client.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webAO') diff --git a/webAO/styles/client.css b/webAO/styles/client.css index 0dfe15c..c778d6f 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -80,6 +80,7 @@ text-align: center; align-items: center; font-size: large; + overflow-y: scroll; z-index: 100; background: #555; } @@ -116,7 +117,6 @@ #client_charselect { display: block; - overflow-y: scroll; text-align: center; margin: 0 auto; background: #444; -- cgit