add area indicators

2 files changed, 82 insertions, 8 deletions

diff --git a/webAO/client.css b/webAO/client.css
index 82199e2..0783922 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -508,19 +508,41 @@ img {
 	font-size: 1.5em;
 }
 
-.location-box {
+.area-button {
 	border-style: solid;
-	background-color: #7B2900;
 	min-width: 120px;
 	margin: 5px;
 	display: inline-block;
 	padding: 6px;
 	border-radius: 5px;
-	border-color: white;
+	border-color: black;
 	border-width: 1px;
 	cursor: pointer;
 }
 
-.location-box:hover {
+.area-button:hover {
 	border-color: #FFD081;
+}
+.area-default {
+	background-color: rgb(54,198,68);
+}
+
+.area-looking {
+	background-color: rgb(255,255,0);
+}
+
+.area-casing {
+	background-color: rgb(255,166,0);
+}
+
+.area-recess {
+	background-color: rgb(255,190,30);
+}
+
+.area-rp {
+	background-color: rgb(200,52,252);
+}
+
+.area-gaming {
+	background-color: rgb(55,255,255);
 }
\ No newline at end of file
diff --git a/webAO/client.js b/webAO/client.js
index 8705aaa..a09ea75 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -94,6 +94,7 @@ class Client extends EventEmitter {
 		this.chars = [];
 		this.emotes = [];
 		this.evidences = [];
+		this.areas = [];
 
 		this.resources = {
 			"holdit": {
@@ -716,8 +717,15 @@ class Client extends EventEmitter {
 			} else {
 				// Create area button
 				const newarea = document.createElement("SPAN");
-				newarea.className = "location-box";
+				newarea.classList = "area-button area-default";
+				newarea.id = "area" + i;
 				newarea.textContent = args[i];
+				this.areas[i] = {
+					name: safe_tags(args[i]),
+					players: 0,
+					status: "IDLE"
+				};
+
 				newarea.onclick = function () {
 					area_click(this);
 				};
@@ -878,11 +886,55 @@ class Client extends EventEmitter {
 
 	/**
 	 * Handle the change of players in an area.
-	 * webAO doesn't have this feature yet, but i want the warning to go away.
+	 * ARUP#0#20#8#2#0#5#2#4#1#5#%
 	 * @param {Array} args packet arguments
 	 */
-	handleARUP(_args) {
-		// TODO: webAO doesn't have this feature yet
+	handleARUP(args) {
+		args = args.slice(1);
+
+		switch(args[0]) {
+			case "0":
+				for (let i = 1; i < args.length - 1; i++) {
+					this.areas[i].players = args[i];
+					const thisarea = document.getElementById("area" + i);
+					thisarea.textContent = `${this.areas[i].name} (${args[i]})` ;
+					}
+				break;
+			case "1":
+				for (let i = 1; i < args.length - 1; i++) {
+					this.areas[i].status = args[i];
+					const thisarea = document.getElementById("area" + i);
+
+					switch (args[i]) {
+						case "LOOKING-FOR-PLAYERS":
+							thisarea.classList = "area-button area-looking";
+							break;
+						case "CASING":
+							thisarea.classList = "area-button area-casing";
+							break;
+						case "RECESS":
+							thisarea.classList = "area-button area-recess";
+							break;
+						case "RP":
+							thisarea.classList = "area-button area-rp";
+							break;
+						case "GAMING":
+							thisarea.classList = "area-button area-gaming";
+							break;
+						default:
+							thisarea.classList = "area-button area-default";
+							break;
+					}
+
+				}
+				break;
+			case "2":
+				break;
+			case "3":
+				break;
+		}
+
+
 	}
 
 	/**