1 files changed, 75 insertions, 33 deletions

diff --git a/webAO/client.js b/webAO/client.js
index f160b53..d80141e 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -184,6 +184,8 @@ class Client extends EventEmitter {
 		this.on("FL", this.handleFL.bind(this));
 		this.on("LE", this.handleLE.bind(this));
 		this.on("EM", this.handleEM.bind(this));
+		this.on("FM", this.handleFM.bind(this));
+		this.on("FA", this.handleFA.bind(this));
 		this.on("SM", this.handleSM.bind(this));
 		this.on("MM", this.handleMM.bind(this));
 		this.on("BD", this.handleBD.bind(this));
@@ -928,14 +930,17 @@ class Client extends EventEmitter {
 	}
 
 	resetMusiclist() {
-		this.musics = [];
+		this.musics = [];		
+		document.getElementById("client_musiclist").innerHTML = "";			
+	}
+
+	resetArealist() {
 		this.areas = [];
-		document.getElementById("client_musiclist").innerHTML = "";
-		document.getElementById("areas").innerHTML = "";		
+		document.getElementById("areas").innerHTML = "";
 	}
 
 	isAudio(trackname) {
-		if (/\.(?:wav|mp3|mp4|ogg|opus)$/i.test(trackname) || // regex for file extenstions
+		if (trackname.includes(".") || // regex for file extenstions
 			trackname.startsWith("=") ||
 			trackname.startsWith("-"))   // category markers
 		{
@@ -945,38 +950,46 @@ class Client extends EventEmitter {
 		}
 	}
 
+	addTrack(trackname) {
+		const newentry = document.createElement("OPTION");
+		newentry.text = trackname;
+		document.getElementById("client_musiclist").options.add(newentry);
+		this.musics.push(trackname);
+	}
+
 	handleMusicInfo(trackindex,trackname) {
 		if (this.isAudio(trackname)) {
-			// 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);
+			this.addTrack(trackname);
 		} else {
-			const thisarea = {
-				name: trackname,
-				players: 0,
-				status: "IDLE",
-				cm: "",
-				locked: "FREE"
-			};
+			this.createArea(trackindex,trackname);
+		}
+	}
 
-			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);
-			};
+	createArea(id,name) {
+		const thisarea = {
+			name: name,
+			players: 0,
+			status: "IDLE",
+			cm: "",
+			locked: "FREE"
+		};
 
-			document.getElementById("areas").appendChild(newarea);
-		}
+		this.areas.push(thisarea);
+
+		// Create area button
+		let newarea = document.createElement("SPAN");
+		newarea.classList = "area-button area-default";
+		newarea.id = "area" + id;
+		newarea.innerText = thisarea.name;
+		newarea.title = `Players: ${thisarea.players}\n` +
+						`Status: ${thisarea.status}\n` +
+						`CM: ${thisarea.cm}\n` +
+						`Area lock: ${thisarea.locked}`;
+		newarea.onclick = function () {
+			area_click(this);
+		};
+
+		document.getElementById("areas").appendChild(newarea);
 	}
 
 	/**
@@ -988,6 +1001,7 @@ class Client extends EventEmitter {
 		document.getElementById("client_loadingtext").innerHTML = "Loading Music";
 		if(args[1] === "0") {
 			this.resetMusiclist();
+			this.resetArealist();
 		}
 
 		for (let i = 2; i < args.length - 1; i++) {
@@ -1008,6 +1022,7 @@ class Client extends EventEmitter {
 	handleSM(args) {
 		document.getElementById("client_loadingtext").innerHTML = "Loading Music ";
 		this.resetMusiclist();
+		this.resetArealist();
 
 		for (let i = 1; i < args.length - 1; i++) {
 			// Check when found the song for the first time
@@ -1020,6 +1035,31 @@ class Client extends EventEmitter {
 	}
 
 	/**
+	 * Handles updated music list
+	 * @param {Array} args packet arguments
+	 */
+	handleFM(args) {
+		this.resetMusiclist();
+
+		for (let i = 1; i < args.length - 1; i++) {
+			// Check when found the song for the first time
+			this.addTrack(safe_tags(args[i]));
+		}
+	}
+
+	/**
+	 * Handles updated area list
+	 * @param {Array} args packet arguments
+	 */
+	handleFA(args) {
+		this.resetArealist();
+
+		for (let i = 1; i < args.length - 1; i++) {
+			this.createArea(i-1,safe_tags(args[i]));
+		}
+	}
+
+	/**
 	 * Handles the "MusicMode" packet
 	 * @param {Array} args packet arguments
 	 */
@@ -1225,11 +1265,9 @@ class Client extends EventEmitter {
 				switch (Number(args[0])) {
 					case 0: // playercount				
 						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+1]);
-						thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase();
 						break;
 					case 2:
 						this.areas[i].cm = safe_tags(args[i+1]);
@@ -1239,6 +1277,10 @@ class Client extends EventEmitter {
 						break;
 				}
 
+				thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase();
+
+				thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players}) [${this.areas[i].status}]`;
+
 				thisarea.title = `Players: ${this.areas[i].players}\n` +
 					`Status: ${this.areas[i].status}\n` +
 					`CM: ${this.areas[i].cm}\n` +