Merge branch 'master' into numbers_man

1 files changed, 110 insertions, 61 deletions

diff --git a/webAO/client.js b/webAO/client.js
index d335bba..d1bbe79 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -89,6 +89,7 @@ class Client extends EventEmitter {
 		this.chars = [];
 		this.emotes = [];
 		this.evidences = [];
+		this.areas = [];
 
 		this.resources = {
 			"holdit": {
@@ -726,13 +727,26 @@ class Client extends EventEmitter {
 				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
-				const newarea = document.createElement("SPAN");
-				newarea.className = "location-box";
-				newarea.textContent = args[i];
+				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);
 			}
 		}
@@ -830,19 +844,17 @@ class Client extends EventEmitter {
 	 */
 	handleHP(args) {
 		const percent_hp = args[2] * 10;
-		if (args[1] === 1) {
+		let healthbox;
+		if (args[1] === "1") {
 			// Def hp
 			this.hp[0] = args[2];
-			$("#client_defense_hp > .health-bar").animate({
-				"width": percent_hp + "%"
-			}, 500);
+			healthbox = document.getElementById("client_defense_hp");
 		} else {
 			// Pro hp
 			this.hp[1] = args[2];
-			$("#client_prosecutor_hp > .health-bar").animate({
-				"width": percent_hp + "%"
-			}, 500);
+			healthbox = document.getElementById("client_prosecutor_hp");
 		}
+		healthbox.getElementsByClassName("health-bar")[0].style.width = percent_hp + "%";
 	}
 
 	/**
@@ -898,11 +910,36 @@ 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.
 	 * @param {Array} args packet arguments
 	 */
-	handleARUP(_args) {
-		// TODO: webAO doesn't have this feature yet
+	handleARUP(args) {
+		args = args.slice(1);
+		for (let i = 1; i < args.length - 1; i++) {
+			if (this.areas[i]) { // the server sends us ARUP before we even get the area list
+			const thisarea = document.getElementById("area" + i);
+			switch(args[0]) {
+				case "0": // playercount				
+					this.areas[i].players = Number(args[i]);
+					thisarea.innerText = `${this.areas[i].name} (${this.areas[i].players})`;					
+					break;
+				case "1": // status
+					this.areas[i].status = safe_tags(args[i]);
+					thisarea.classList = "area-button area-" + this.areas[i].status.toLowerCase();				
+					break;
+				case "2":
+					this.areas[i].cm = safe_tags(args[i]);
+					break;
+				case "3":
+					this.areas[i].locked = safe_tags(args[i]);
+					break;
+			}
+
+			thisarea.title = 	`Players: ${this.areas[i].players}\n` +
+								`Status: ${this.areas[i].status}\n` +
+								`CM: ${this.areas[i].cm}\n` +
+								`Area lock: ${this.areas[i].locked}`;
+		}
+		}
 	}
 
 	/**
@@ -1122,6 +1159,10 @@ class Viewport {
 
 	/**
 	 * Sets a new emote.
+	 * TODO: merge this and initUpdater
+	 * This sets up everything before the tick() loops starts
+	 * a lot of things can probably be moved here, like starting the shout animation if there is one
+	 * TODO: the preanim logic, on the other hand, should probably be moved to tick()
 	 * @param {object} chatmsg the new chat message
 	 */
 	async say(chatmsg) {
@@ -1133,6 +1174,11 @@ class Viewport {
 		this.sfxplayed = 0;
 		this.textTimer = 0;
 		this._animating = true;
+
+		// Reset CSS animation
+		document.getElementById("client_fg").style.animation = "";
+		document.getElementById("client_gamewindow").style.animation = "";
+
 		clearTimeout(this.updater);
 		// If preanim existed then determine the length
 		if (chatmsg.preanim !== "-") {
@@ -1258,6 +1304,43 @@ class Viewport {
 	/**
 	 * Updates the chatbox based on the given text.
 	 * 
+	 * OK, here's the documentation on how this works:
+	 * 
+	 * 1 flip
+	 * For whatever reason it starts off by checking if the character is flipped, every time this is called
+	 * This is probably a TODO to move this somewhere else
+	 * 
+	 * 2 flip
+	 * If the server supports it, the same is done for the paired character
+	 * Both of these should probably be moved to say()
+	 * 
+	 * 3 _animating
+	 * If we're not done with this characters animation, i.e. his text isn't fully there, set a timeout for the next tick/step to happen
+	 * 
+	 * 4 isnew
+	 * This is run once for every new message
+	 * The chatbox and evidence is hidden (TODO even if there is no shout)
+	 * and if there is a shout it's audio starts playing
+	 * 
+	 * 5 startpreanim
+	 * If the shout timer is over it starts with the preanim
+	 * The first thing it checks for is the shake effect (TODO on client this is handled by the @ symbol and not a flag )
+	 * Then is the flash/realization effect
+	 * After that, the shout image is set to a transparent placeholder gif (TODO just hide it with CSS)
+	 * and the main characters preanim gif is loaded
+	 * If pairing is supported the paired character will just stand around with his idle sprite
+	 * 
+	 * 6 preanimdelay over
+	 * this animates the evidence popup and finally shows the character name and message box
+	 * it sets the text color , changes the background (again TODO) and sets the character speaking sprite
+	 * 
+	 * 7 textnow != content
+	 * this adds a character to the textbox and stops the animations if the entire message is present in the textbox
+	 * 
+	 * 8 sfx
+	 * independent of the stuff above, this will play any sound effects specified by the emote the character sent.
+	 * happens after the shout delay + an sfx delay that comes with the message packet
+	 * 
 	 * XXX: This relies on a global variable `this.chatmsg`!
 	 */
 	tick() {
@@ -1330,17 +1413,14 @@ class Viewport {
 				this.sfxplayed = 1;
 				this.sfxaudio.src = AO_HOST + "sounds/general/sfx-stab.wav";
 				this.sfxaudio.play();
-				$("#client_gamewindow").effect("shake", {
-					"direction": "up"
-				});
+				document.getElementById("client_gamewindow").style.animation = "shake 0.2s 1";
 			} else if (this.chatmsg.flash === 1) {
 				// Flash screen
-				background.style.backgroundColor = "white";
 				this.sfxaudio.pause();
 				this.sfxplayed = 1;
 				this.sfxaudio.src = AO_HOST + "sounds/general/sfx-realization.wav";
 				this.sfxaudio.play();
-				$("#client_gamewindow").effect("pulsate", { times: 1 }, 200);
+				document.getElementById("client_fg").style.animation = "flash 0.4s 1";
 			}
 
 			// Pre-animation stuff
@@ -1379,17 +1459,13 @@ class Viewport {
 						// Only def show evidence on right
 						eviBox.style.right = "1.5em";
 						eviBox.style.left = "initial";
-						$("#client_evi").animate({
-							height: "30%",
-							opacity: 1
-						}, 250);
+						eviBox.style.height = "30%";
+						eviBox.style.opacity = 1;
 					} else {
 						eviBox.style.right = "initial";
 						eviBox.style.left = "1.5em";
-						$("#client_evi").animate({
-							height: "30%",
-							opacity: 1
-						}, 250);
+						eviBox.style.height = "30%";
+						eviBox.style.opacity = 1;
 					}
 				}
 
@@ -1647,7 +1723,7 @@ window.showname_click = showname_click;
  * @param {MouseEvent} event
  */
 export function area_click(el) {
-	const area = el.textContent;
+	const area = client.areas[el.id.substr(4)].name;
 	client.sendMusicChange(area);
 
 	const areaHr = document.createElement("div");
@@ -1853,7 +1929,6 @@ async function changeBackground(position) {
 	};
 
 	const { bg, desk, speedLines } = positions[position];
-	document.getElementById("client_fg").style.display = "none";
 
 	if (viewport.chatmsg.type === 5) {
 		document.getElementById("client_court").src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
@@ -2171,7 +2246,12 @@ window.randomCharacterOOC = randomCharacterOOC;
  * Call mod.
  */
 export function callMod() {
-	$("#callmod_dialog").dialog("open");
+	let modcall = prompt("Please enter the reason for the modcall","");
+	if (modcall == null || modcall === "") {
+		// cancel
+	} else {
+		client.sendZZ(modcall);
+	} 
 }
 window.callMod = callMod;
 
@@ -2409,35 +2489,4 @@ function decodeChat(estring) {
 //
 
 let client = new Client(serverIP);
-let viewport = new Viewport();
-
-// Create dialog and link to button	
-$(function () {
-	$("#callmod_dialog").dialog({
-		autoOpen: false,
-		resizable: false,
-		show: {
-			effect: "drop",
-			direction: "down",
-			duration: 500
-		},
-		hide: {
-			effect: "drop",
-			direction: "down",
-			duration: 500
-		},
-		height: "auto",
-		width: 400,
-		modal: true,
-		buttons: {
-			Sure: function () {
-				const reason = prompt("Please enter the reason", "");
-				client.sendZZ(reason);
-				$(this).dialog("close");
-			},
-			Cancel: function () {
-				$(this).dialog("close");
-			}
-		}
-	});
-});
+let viewport = new Viewport();
\ No newline at end of file