Merge pull request #114 from AttorneyOnline/coolloading

Coolloading
author: stonedDiscord <Tukz@gmx.de> 2022-03-28 23:54:27 +0200
committer: GitHub <noreply@github.com> 2022-03-28 23:54:27 +0200
commit: 399fe2deeb2888bebea32f2fc54a6f6f84626ac2 (patch)
tree: 7e7cbf09c1ce6d2539bb2f33a9c3c86f19ce9d48
parent: d3911aa9ad6bc16c70355fe11d1377d636b14565 (diff)
parent: 903a13ff5b5beaaf42b4fcf8965eb55b642e1d2a (diff)
3 files changed, 59 insertions, 28 deletions
diff --git a/public/client.html b/public/client.html
index 28a0bf1..db22df3 100644
--- a/public/client.html
+++ b/public/client.html
@@ -44,11 +44,11 @@
 </head>
 
 <body>
+<div id="client_waiting">
+	<noscript><p style="color: red;">webAO requires JavaScript to work</p></noscript>
 	<div id="client_loading">
 		<h1 id="client_loadingtext">Loading</h1>
-		<noscript><p style="color: red;">webAO requires JavaScript to work</p></noscript>
-		<p>Having trouble? <a href="https://discord.gg/9rYQVVQ">Join us on Discord</a></p>
-		<button class="client_reconnect" onclick="ReconnectButton()">Reconnect</button>
+		<progress id="client_loadingbar" value="0"></progress>
 	</div>
 	<div id="client_charselect">
 		<p>Choose your character</p>
@@ -63,8 +63,11 @@
 		<p style="color: #a00">Code:
 			<span id="error_id">(none)</span>
 		</p>
-		<button class="client_reconnect" onclick="ReconnectButton()">Reconnect</button>
+		
 	</div>
+	<p>Having trouble? <a href="https://discord.gg/9rYQVVQ">Join us on Discord</a></p>
+	<button class="client_reconnect" onclick="ReconnectButton()">Reconnect</button>
+</div>
 </body>
 
 <template id="client_wrapper">
diff --git a/webAO/client.ts b/webAO/client.ts
index ac34334..8ced37a 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -589,6 +589,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);
@@ -1001,9 +1002,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);
       }
     }
@@ -1019,15 +1021,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);
     }
@@ -1039,12 +1044,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)+'#%');
   }
 
   /**
@@ -1056,6 +1073,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]),
@@ -1208,9 +1226,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)) {
@@ -1243,6 +1261,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)) {
@@ -1349,7 +1368,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';
     }
   }
   
@@ -1606,6 +1625,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 = '';
@@ -1649,6 +1670,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];
@@ -2826,6 +2848,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 = '';
 }
@@ -2880,9 +2903,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';
   }
 }
@@ -2975,6 +2997,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 4e0712e..7f72eb1 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -68,20 +68,32 @@
 	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;
+	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 {
@@ -104,17 +116,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 {
@@ -703,4 +708,4 @@
 .hrtext:after {
 	left: 0.5em;
 	margin-right: -50%;
-}
-\ No newline at end of file
+}
author	stonedDiscord <Tukz@gmx.de>	2022-03-28 23:54:27 +0200
committer	GitHub <noreply@github.com>	2022-03-28 23:54:27 +0200
commit	399fe2deeb2888bebea32f2fc54a6f6f84626ac2 (patch)
tree	7e7cbf09c1ce6d2539bb2f33a9c3c86f19ce9d48
parent	d3911aa9ad6bc16c70355fe11d1377d636b14565 (diff)
parent	903a13ff5b5beaaf42b4fcf8965eb55b642e1d2a (diff)