Merge pull request #67 from AttorneyOnline/apng_v3

Apng v3

1 files changed, 65 insertions, 71 deletions

diff --git a/webAO/client.js b/webAO/client.js
index f65d3d8..2b2699b 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1350,7 +1350,7 @@ class Viewport {
 		this.shoutaudio.src = `${AO_HOST}misc/default/objection.wav`;
 
 		this.testimonyAudio = document.getElementById("client_testimonyaudio");
-		this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-notguilty.wav`;
+		this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.wav`;
 
 		this.music = document.getElementById("client_musicaudio");
 		this.music.src = `${AO_HOST}sounds/music/trial (aa).mp3`;
@@ -1613,6 +1613,27 @@ async changeBackground(position) {
 		clearTimeout(this.testimonyUpdater);
 	}
 
+	/**
+	 * Sets all the img tags to the right sources
+	 * @param {*} chatmsg 
+	 */
+	setEmote(charactername, emotename, prefix, pair) {
+		const pairID = pair ? "pair" : "char";
+		const characterFolder = AO_HOST + "characters/";
+
+		const  gif_s = document.getElementById("client_" + pairID + "_gif");
+		const  png_s = document.getElementById("client_" + pairID + "_png");
+		const apng_s = document.getElementById("client_" + pairID +"_apng");
+
+		//hide the last sprite
+		gif_s.src = transparentPNG;
+		png_s.src = transparentPNG;
+		apng_s.src = transparentPNG;
+
+		gif_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.gif`;
+		png_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(emotename)}.png`;
+		apng_s.src = characterFolder + `${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}.apng`;
+	}
 
 	/**
 	 * Sets a new emote.
@@ -1647,8 +1668,8 @@ async changeBackground(position) {
 		}
 		this.lastEvi = this.chatmsg.evidence;
 
-		const charSprite = document.getElementById("client_char");
-		const pairSprite = document.getElementById("client_pair_char");
+		const charLayers = document.getElementById("client_char");
+		const pairLayers = document.getElementById("client_pair_char");
 
 		const chatContainerBox = document.getElementById("client_chatcontainer");	
 		const nameBoxInner = document.getElementById("client_inner_name");
@@ -1661,10 +1682,8 @@ async changeBackground(position) {
 		nameBoxInner.innerText = displayname;
 		
 		if (this.lastChar !== this.chatmsg.name) {
-			charSprite.style.opacity = 0;
-			charSprite.src = transparentPNG;
-			pairSprite.style.opacity = 0;
-			pairSprite.src = transparentPNG;
+			charLayers.style.opacity = 0;
+			pairLayers.style.opacity = 0;
 		}
 		this.lastChar = this.chatmsg.name;
 
@@ -1672,37 +1691,11 @@ async changeBackground(position) {
 
 		checkCallword(this.chatmsg.content);
 
-		// start checking the files
-		try {
-			const { url: speakUrl } = await this.oneSuccess([
-				this.rejectOnError(fetch(AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/" + this.chatmsg.sprite + ".png")),
-				this.rejectOnError(fetch(AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/(b)" + this.chatmsg.sprite + ".gif"))
-			]);
-			this.speakingSprite = speakUrl ? speakUrl : transparentPNG;
-		} catch (error) {
-			this.speakingSprite = AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/(b)" + this.chatmsg.sprite + ".gif";
-		}
-
-		try {
-			const { url: silentUrl } = await this.oneSuccess([
-				this.rejectOnError(fetch(AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/" + this.chatmsg.sprite + ".png")),
-				this.rejectOnError(fetch(AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/(a)" + this.chatmsg.sprite + ".gif"))
-			]);
-			this.silentSprite = silentUrl ? silentUrl : transparentPNG;
-		} catch (error) {
-			this.silentSprite = AO_HOST + "characters/" + encodeURI(this.chatmsg.name.toLowerCase()) + "/(a)" + this.chatmsg.sprite + ".gif";
-		}
+		this.setEmote(this.chatmsg.name.toLowerCase(), this.chatmsg.sprite, "(b)", false);
+		this.setEmote(this.chatmsg.name.toLowerCase(), this.chatmsg.sprite, "(a)", false);
 
 		if (this.chatmsg.other_name) {
-			try {
-				const { url: pairUrl } = await this.oneSuccess([
-					this.rejectOnError(fetch(AO_HOST + "characters/" + encodeURI(this.chatmsg.other_name.toLowerCase()) + "/" + this.chatmsg.other_emote + ".png")),
-					this.rejectOnError(fetch(AO_HOST + "characters/" + encodeURI(this.chatmsg.other_name.toLowerCase()) + "/(a)" + this.chatmsg.other_emote + ".gif"))
-				]);
-				this.pairSilent = pairUrl ? pairUrl : transparentPNG;
-			} catch (error) {
-				this.pairSilent = AO_HOST + "characters/" + encodeURI(this.chatmsg.other_name.toLowerCase()) + "/(a)" + this.chatmsg.other_emote + ".gif";
-			}
+			this.setEmote(this.chatmsg.other_name.toLowerCase(), this.chatmsg.other_emote, "(a)", false);
 		}
 
 		// gets which shout shall played
@@ -1750,8 +1743,6 @@ async changeBackground(position) {
 			// case 5:
 			// zoom
 			default:
-				// due to a retarded client bug, we need to strip the sfx from the MS, if the preanim isn't playing
-				this.chatmsg.sound = "";
 				this.chatmsg.startspeaking = true;
 				break;
 		}
@@ -1764,16 +1755,16 @@ async changeBackground(position) {
 
 		// Flip the character
 		if (this.chatmsg.flip === 1) {
-			charSprite.style.transform = "scaleX(-1)";
+			charLayers.style.transform = "scaleX(-1)";
 		} else {
-			charSprite.style.transform = "scaleX(1)";
+			charLayers.style.transform = "scaleX(1)";
 		}
 
 		// flip the paired character
 		if (this.chatmsg.other_flip === 1) {
-			pairSprite.style.transform = "scaleX(-1)";
+			pairLayers.style.transform = "scaleX(-1)";
 		} else {
-			pairSprite.style.transform = "scaleX(1)";
+			pairLayers.style.transform = "scaleX(1)";
 		}
 
 		this.blipChannels.forEach(channel => channel.src = `${AO_HOST}sounds/general/sfx-blip${encodeURI(this.chatmsg.blips.toLowerCase())}.wav`);
@@ -1837,14 +1828,20 @@ async changeBackground(position) {
 
 		const gamewindow = document.getElementById("client_gamewindow");
 		const waitingBox = document.getElementById("client_chatwaiting");
-		const charSprite = document.getElementById("client_char");
-		const pairSprite = document.getElementById("client_pair_char");
+		const charLayers = document.getElementById("client_char");
+		const pairLayers = document.getElementById("client_pair_char");
 		const eviBox = document.getElementById("client_evi");
 		const shoutSprite = document.getElementById("client_shout");
 		const chatBoxInner = document.getElementById("client_inner_chat");
 		const chatBox = document.getElementById("client_chat");
 		const effectlayer = document.getElementById("client_fg");
 
+		const charName = this.chatmsg.name.toLowerCase();
+		const charEmote = this.chatmsg.sprite.toLowerCase();
+
+		const pairName = this.chatmsg.other_name.toLowerCase();
+		const pairEmote = this.chatmsg.other_emote.toLowerCase();
+
 		// TODO: preanims sometimes play when they're not supposed to
 		if (this.textTimer >= this.shoutTimer && this.chatmsg.startpreanim) {
 			// Effect stuff
@@ -1862,23 +1859,19 @@ async changeBackground(position) {
 			// Pre-animation stuff
 			if (this.chatmsg.preanimdelay > 0) {
 				shoutSprite.style.opacity = 0;
-				shoutSprite.style.animation = "";
-				const charName = this.chatmsg.name.toLowerCase();
+				shoutSprite.style.animation = "";				
 				const preanim = this.chatmsg.preanim.toLowerCase();
-				charSprite.src = `${AO_HOST}characters/${encodeURI(charName)}/${encodeURI(preanim)}.gif`;
-				charSprite.style.opacity = 1;
+				this.setEmote(charName,preanim,"",false);
+				charLayers.style.opacity = 1;
 			}
 
 			if (this.chatmsg.other_name) {
-				const pairName = this.chatmsg.other_name.toLowerCase();
-				const pairEmote = this.chatmsg.other_emote.toLowerCase();
-				pairSprite.style.left = this.chatmsg.other_offset + "%";
-				charSprite.style.left = this.chatmsg.self_offset + "%";
-				pairSprite.src = this.pairSilent;
-				pairSprite.style.opacity = 1;
+				pairLayers.style.left = this.chatmsg.other_offset + "%";
+				charLayers.style.left = this.chatmsg.self_offset + "%";
+				pairLayers.style.opacity = 1;
 			} else {
-				pairSprite.style.opacity = 0;
-				charSprite.style.left = 0;
+				pairLayers.style.opacity = 0;
+				charLayers.style.left = 0;
 			}
 
 			this.chatmsg.startpreanim = false;
@@ -1893,6 +1886,9 @@ async changeBackground(position) {
 					eviBox.style.height = "36.5%";
 					eviBox.style.opacity = 1;
 
+					this.testimonyAudio.src = AO_HOST + "sounds/general/sfx-evidenceshoop.wav";
+					this.testimonyAudio.play();
+
 					if (this.chatmsg.side === "def") {
 						// Only def show evidence on right
 						eviBox.style.right = "1em";
@@ -1919,24 +1915,22 @@ async changeBackground(position) {
 
 				if (extrafeatures.includes("cccc_ic_support")) {
 					if (this.chatmsg.other_name) {
-						const pairName = this.chatmsg.other_name.toLowerCase();
-						const pairEmote = this.chatmsg.other_emote.toLowerCase();
-						pairSprite.style.left = this.chatmsg.other_offset + "%";
-						charSprite.style.left = this.chatmsg.self_offset + "%";
-						pairSprite.src = this.pairSilent;
-						pairSprite.style.opacity = 1;
+						pairLayers.style.left = this.chatmsg.other_offset + "%";
+						charLayers.style.left = this.chatmsg.self_offset + "%";
+						this.setEmote(pairName,pairEmote,"(a)",true);
+						pairLayers.style.opacity = 1;
 					} else {
-						pairSprite.style.opacity = 0;
-						charSprite.style.left = 0;
+						pairLayers.style.opacity = 0;
+						charLayers.style.left = 0;
 					}
 				}
 
-				charSprite.src = this.speakingSprite;
-				charSprite.style.opacity = 1;
+				this.setEmote(charName,charEmote,"(b)",false);
+				charLayers.style.opacity = 1;
 
 				if (this.textnow === this.chatmsg.content) {
-					charSprite.src = this.silentSprite;
-					charSprite.style.opacity = 1;
+					this.setEmote(charName,charEmote,"(a)",false);
+					charLayers.style.opacity = 1;
 					waitingBox.style.opacity = 1;
 					this._animating = false;
 					clearTimeout(this.updater);
@@ -1957,8 +1951,8 @@ async changeBackground(position) {
 
 					if (this.textnow === this.chatmsg.content) {
 						this._animating = false;
-						charSprite.src = this.silentSprite;
-						charSprite.style.opacity = 1;
+						this.setEmote(charName,charEmote,"(a)",false);
+						charLayers.style.opacity = 1;
 						waitingBox.style.opacity = 1;
 						clearTimeout(this.updater);
 					}
@@ -2327,7 +2321,7 @@ window.changeCharacter = changeCharacter;
  */
 export function charError(image) {
 	console.warn(image.src + " is missing from webAO");
-	//image.src = transparentPNG;
+	image.src = transparentPNG;
 	return true;
 }
 window.charError = charError;