Merge branch 'master' into chatboxstyle

6 files changed, 99 insertions, 65 deletions

diff --git a/webAO/client.html b/webAO/client.html
index c56a1d2..15495e6 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -422,7 +422,7 @@
 
 <template id="music">
 	<meta name="frame-title" lang="en" content="Music">
-	<input id="client_musicsearch" style="display:none"></input>
+	<input id="client_musicsearch" placeholder="Search" oninput="musiclist_filter(event)"></input>
 	<select id="client_musiclist" size="5" onchange="musiclist_click(event)">
 	</select>
 </template>
diff --git a/webAO/client.js b/webAO/client.js
index 0e86aaf..c44ed74 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -122,6 +122,7 @@ class Client extends EventEmitter {
 		this.emotes = [];
 		this.evidences = [];
 		this.areas = [];
+		this.musics = [];
 
 		this.resources = {
 			"holdit": {
@@ -163,8 +164,6 @@ class Client extends EventEmitter {
 
 		this.checkUpdater = null;
 
-		// Only used for RMC/'music' packets, not EM/SM/MC packets.
-		this.musicList = Object();
 		/**
 		 * Assign handlers for all commands
 		 * If you implement a new command, you need to add it here
@@ -487,8 +486,7 @@ class Client extends EventEmitter {
 		clearInterval(this.checkUpdater);
 
 		// the connection got rekt, get rid of the old musiclist
-		document.getElementById("areas").innerHTML = "";
-		document.getElementById("client_musiclist").innerHTML = "";
+		this.resetMusiclist();
 		document.getElementById("client_chartable").innerHTML = "";
 	}
 
@@ -781,9 +779,50 @@ class Client extends EventEmitter {
 	}
 
 	resetMusiclist() {
-		const hmusiclist = document.getElementById("client_musiclist");
-		hmusiclist.innerHTML = "";
+		this.musics = [];
 		this.areas = [];
+		document.getElementById("client_musiclist").innerHTML = "";
+		document.getElementById("areas").innerHTML = "";		
+	}
+
+	handleMusicInfo(trackindex,trackname) {
+		let flagAudio = false;
+
+		if (/\.(?:wav|mp3|mp4|ogg|opus)$/i.test(trackname) || trackname.startsWith("=")) {
+			flagAudio = true;
+		}
+
+		if (flagAudio) {
+			// After reached the audio put everything in the music list
+			const newentry = document.createElement("OPTION");
+			newentry.text = trackname;
+			document.getElementById("client_musiclist").options.add(newentry);
+			this.musics.push(trackname);
+		} else {
+			const thisarea = {
+				name: trackname,
+				players: 0,
+				status: "IDLE",
+				cm: "",
+				locked: "FREE"
+			};
+
+			this.areas.push(thisarea);
+
+			// Create area button
+			let newarea = document.createElement("SPAN");
+			newarea.classList = "area-button area-default";
+			newarea.id = "area" + trackindex;
+			newarea.innerText = thisarea.name;
+			newarea.title = "Players: <br>" +
+				"Status: <br>" +
+				"CM: ";
+			newarea.onclick = function () {
+				area_click(this);
+			};
+
+			document.getElementById("areas").appendChild(newarea);
+		}
 	}
 
 	/**
@@ -796,16 +835,16 @@ class Client extends EventEmitter {
 		if(args[1] === "0") {
 			this.resetMusiclist();
 		}
-		this.sendServer("AM#" + ((args[1] / 10) + 1) + "#%");
-		const hmusiclist = document.getElementById("client_musiclist");
+
 		for (let i = 2; i < args.length - 1; i++) {
 			if (i % 2 === 0) {
 				document.getElementById("client_loadingtext").innerHTML = `Loading Music ${i}/${this.music_list_length}`;
-				const newentry = document.createElement("OPTION");
-				newentry.text = args[i];
-				hmusiclist.options.add(newentry);
+				this.handleMusicInfo(args[i-1],safe_tags(args[i]));
 			}
 		}
+
+		// get the next batch of tracks
+		this.sendServer("AM#" + ((args[1] / 10) + 1) + "#%");
 	}
 
 	/**
@@ -815,54 +854,11 @@ class Client extends EventEmitter {
 	handleSM(args) {
 		document.getElementById("client_loadingtext").innerHTML = "Loading Music ";
 		this.resetMusiclist();
-		const hmusiclist = document.getElementById("client_musiclist");
-		let flagAudio = false;
 
 		for (let i = 1; i < args.length - 1; i++) {
 			// Check when found the song for the first time
 			document.getElementById("client_loadingtext").innerHTML = `Loading Music ${i}/${this.music_list_length}`;
-			if (/\.(?:wav|mp3|mp4|ogg|opus)$/i.test(args[i]) && !flagAudio) {
-				flagAudio = true;
-			}
-
-			if (flagAudio) {
-				// After reached the audio put everything in the music list
-				const newentry = document.createElement("OPTION");
-				newentry.text = args[i];
-				hmusiclist.options.add(newentry);
-			} else {
-				this.areas[i] = {
-					name: safe_tags(args[i]),
-					players: 0,
-					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: <br>" +
-					"Status: <br>" +
-					"CM: ";
-				newarea.onclick = function () {
-					area_click(this);
-				};
-
-				document.getElementById("areas").appendChild(newarea);
-			}
-		}
-
-		// We need to check if the last area that we got was actually a category
-		// header for music. If it was, then move it over to the music list.
-		const area_box = document.getElementById("areas");
-		if (area_box.lastChild.textContent.startsWith("=")) {
-			const audio_title = document.createElement("OPTION");
-			audio_title.text = area_box.lastChild.textContent;
-			hmusiclist.insertBefore(audio_title, hmusiclist.firstChild);
-			area_box.removeChild(area_box.lastChild);
+			this.handleMusicInfo(i-1,safe_tags(args[i]));
 		}
 
 		// Music done, carry on
@@ -1041,23 +1037,23 @@ class Client extends EventEmitter {
 	 */
 	handleARUP(args) {
 		args = args.slice(1);
-		for (let i = 1; i < args.length - 1; i++) {
+		for (let i = 0; i < args.length - 2; i++) {
 			if (this.areas[i]) { // the server sends us ARUP before we even get the area list
 				const thisarea = document.getElementById("area" + i);
 				switch (Number(args[0])) {
 					case 0: // playercount				
-						this.areas[i].players = Number(args[i]);
+						this.areas[i].players = Number(args[i+1]);
 						thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players})`;
 						break;
 					case 1: // status
-						this.areas[i].status = safe_tags(args[i]);
+						this.areas[i].status = safe_tags(args[i+1]);
 						thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase();
 						break;
 					case 2:
-						this.areas[i].cm = safe_tags(args[i]);
+						this.areas[i].cm = safe_tags(args[i+1]);
 						break;
 					case 3:
-						this.areas[i].locked = safe_tags(args[i]);
+						this.areas[i].locked = safe_tags(args[i+1]);
 						break;
 				}
 
@@ -1987,6 +1983,26 @@ function resetICParams() {
 }
 
 /**
+ * Triggered when the music search bar is changed
+ * @param {MouseEvent} event
+ */
+export function musiclist_filter(_event) {
+	const musiclist_element = document.getElementById("client_musiclist");
+	const searchname = document.getElementById("client_musicsearch").value;
+
+	musiclist_element.innerHTML = "";
+
+	for (const trackname of client.musics){
+		if (trackname.toLowerCase().indexOf(searchname.toLowerCase()) !== -1) { 
+			const newentry = document.createElement("OPTION");
+			newentry.text = trackname;
+			musiclist_element.options.add(newentry);
+		}
+	}		
+}
+window.musiclist_filter = musiclist_filter;
+
+/**
  * Triggered when an item on the music list is clicked.
  * @param {MouseEvent} event
  */
diff --git a/webAO/encoding.js b/webAO/encoding.js
index 3249617..71ebe53 100644
--- a/webAO/encoding.js
+++ b/webAO/encoding.js
@@ -31,10 +31,8 @@ export function unescapeChat(estring) {
 export function safe_tags(unsafe) {
 	if (unsafe) {
 		return unsafe
-			.replace(/&/g, "&amp;")
+			.replace(/>/g, "&rt;")
 			.replace(/</g, "&lt;");
-		//.replace(/"/g, "&quot;")
-		//.replace(/'/g, "&#039;");
 	} else {
 		return "";
 	}
diff --git a/webAO/index.html b/webAO/index.html
index c7f453d..0df9885 100644
--- a/webAO/index.html
+++ b/webAO/index.html
@@ -75,6 +75,11 @@
             <p>https is not supported</p>
             <p>Please <a href="http://web.aceattorneyonline.com/">click here</a> to be redirected to the http version</p>
         </div>
+        <div id="ms_error" class="error" style="display: none;">
+            <p>Could not connect to the master server.</p>
+            <p>Please check your firewall.</p>
+            <p id="ms_error_code">A network error occurred</p>
+        </div>
         <noscript>
         <div id="js_error" class="error">
             <p>webAO requires JavaScript to work</p>
diff --git a/webAO/master.js b/webAO/master.js
index 4281a49..5527ce5 100644
--- a/webAO/master.js
+++ b/webAO/master.js
@@ -24,6 +24,7 @@ if (window.requestIdleCallback) {
 
 			masterserver = new WebSocket("ws://" + MASTERSERVER_IP);
 			masterserver.onopen = (evt) => onOpen(evt);
+			masterserver.onerror = (evt) => onError(evt);
 			masterserver.onmessage = (evt) => onMessage(evt);
 
 			if (/webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Opera Mini/i.test(navigator.userAgent)) {
@@ -40,6 +41,7 @@ if (window.requestIdleCallback) {
 
 			masterserver = new WebSocket("ws://" + MASTERSERVER_IP);
 			masterserver.onopen = (evt) => onOpen(evt);
+			masterserver.onerror = (evt) => onError(evt);
 			masterserver.onmessage = (evt) => onMessage(evt);
 
 			if (/webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Opera Mini/i.test(navigator.userAgent)) {
@@ -74,6 +76,15 @@ function onOpen(_e) {
 	masterserver.send("VC#%");
 }
 
+/**
+ * Triggered when an network error occurs.
+ * @param {ErrorEvent} e 
+ */
+function onError(evt) {
+	document.getElementById("ms_error").style.display = "block";
+	document.getElementById("ms_error_code").innerText = `A network error occurred: ${evt.reason} (${evt.code})`;
+}
+
 function checkOnline(serverID, coIP) {
 	let oserv = new WebSocket("ws://" + coIP);
 
@@ -159,4 +170,4 @@ function onMessage(e) {
 			msChat.scrollTop = msChat.scrollHeight;
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index b0b1bb6..4063b67 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -294,6 +294,10 @@
 	border: none;
 }
 
+#client_musicsearch {
+	width: 100%;
+}
+
 #client_musiclist {
 	width: 99%;
 	height: 100%;