diff options
Diffstat (limited to 'webAO')
| -rw-r--r-- | webAO/client.ts | 43 | ||||
| -rw-r--r-- | webAO/styles/client.css | 38 |
2 files changed, 58 insertions, 23 deletions
diff --git a/webAO/client.ts b/webAO/client.ts index 9edb412..508a844 100644 --- a/webAO/client.ts +++ b/webAO/client.ts @@ -590,6 +590,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 = String(e.code); @@ -1002,9 +1003,10 @@ 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_loadingtext').innerHTML = `Loading Character ${args[1]}/${this.char_list_length}`; const chargs = args[i].split('&'); const charid = Number(args[i - 1]); + (<HTMLProgressElement>document.getElementById('client_loadingbar')).value = charid; setTimeout(() => this.handleCharacterInfo(chargs, charid), 500); } } @@ -1020,15 +1022,18 @@ class Client extends EventEmitter { async handleSC(args: string[]) { const sleep = (ms: number) => 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; + (<HTMLProgressElement>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); } @@ -1040,12 +1045,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: string[]) { document.getElementById('client_loadingtext').innerHTML = `Loading Evidence ${args[1]}/${this.evidence_list_length}`; - this.sendServer('RM#%'); + const evidenceID = Number(args[1]); + (<HTMLProgressElement>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)+'#%'); } /** @@ -1057,6 +1074,7 @@ class Client extends EventEmitter { handleLE(args: string[]) { this.evidences = []; for (let i = 1; i < args.length - 1; i++) { + (<HTMLProgressElement>document.getElementById('client_loadingbar')).value = this.char_list_length + i; const arg = args[i].split('&'); this.evidences[i - 1] = { name: prepChat(arg[0]), @@ -1209,9 +1227,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 = Number(args[i - 1]); + (<HTMLProgressElement>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)) { @@ -1244,6 +1262,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}`; + (<HTMLProgressElement>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)) { @@ -1350,7 +1369,7 @@ class Client extends EventEmitter { handleDONE(_args: string[]) { 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'; + document.getElementById('client_waiting').style.display = 'none'; } } @@ -1607,6 +1626,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]); + + (<HTMLProgressElement>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 = ''; @@ -1650,6 +1671,7 @@ class Client extends EventEmitter { */ async handlePV(args: string[]) { 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]; @@ -2827,6 +2849,7 @@ window.switchChatOffset = switchChatOffset; * @param {MouseEvent} event */ export function changeCharacter(_event: Event) { + document.getElementById('client_waiting').style.display = 'block'; document.getElementById('client_charselect').style.display = 'block'; document.getElementById('client_emo').innerHTML = ''; } @@ -2881,9 +2904,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'; } } @@ -2976,6 +2998,7 @@ window.chartable_filter = chartable_filter; export function pickChar(ccharacter: number) { if (ccharacter === -1) { // Spectator + document.getElementById('client_waiting').style.display = 'none'; document.getElementById('client_charselect').style.display = 'none'; } else { client.sendCharacter(ccharacter); diff --git a/webAO/styles/client.css b/webAO/styles/client.css index 3bcc493..e31a8e8 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -70,22 +70,41 @@ #client_secondfactor { display: block; + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; + background: black; + color: lightgreen; + font-size: large; } -#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; + overflow-y: scroll; + 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 { @@ -108,17 +127,10 @@ } #client_charselect { - display: none; - position: fixed; - top: 5vh; - left: 10vw; - width: 80vw; - max-height: 90vh; - overflow-y: scroll; + display: block; text-align: center; margin: 0 auto; background: #444; - z-index: 50; } #client_icwrapper { |