Merge pull request #87 from AttorneyOnline/fullsize-bg

Fullsize bg

3 files changed, 208 insertions, 42 deletions

diff --git a/webAO/client.html b/webAO/client.html
index ff1cf74..b42a031 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -73,20 +73,71 @@
 	<div id="client_icwrapper">
 		<div id="client_background">
 			<div id="client_gamewindow">
-				<img id="client_court" alt="Courtroom backdrop" onerror="imgError(this);">
-				<div id="client_pair_char" alt="Paired character">
+				<div id="client_fullview">
+					<div id="client_stitch_court">
+						<img id="client_court_def" alt="Courtroom backdrop" onerror="imgError(this);">
+						<img id="client_court_deft" alt="Courtroom backdrop" onerror="imgError(this);">
+						<img id="client_court_wit" alt="Courtroom backdrop" onerror="imgError(this);">
+						<img id="client_court_prot" alt="Courtroom backdrop" onerror="imgError(this);">
+						<img id="client_court_pro" alt="Courtroom backdrop" onerror="imgError(this);">
+					</div>
+					<img id="client_court" alt="Courtroom backdrop" onerror="imgError(this);">
+					<div id="client_def_pair_char" class="client_char" alt="Paired character">
+						<img id="client_def_pair_gif" onerror="charError(this);">
+						<img id="client_def_pair_png" onerror="charError(this);">
+						<img id="client_def_pair_apng" onerror="charError(this);">
+						<img id="client_def_pair_webp" onerror="charError(this);">
+					</div>
+					<div id="client_def_char" class="client_char" alt="Character">
+						<img id="client_def_char_gif" onerror="charError(this);">
+						<img id="client_def_char_png" onerror="charError(this);">
+						<img id="client_def_char_apng" onerror="charError(this);">
+						<img id="client_def_char_webp" onerror="charError(this);">
+					</div>
+					<div id="client_wit_pair_char" class="client_char" alt="Paired character">
+						<img id="client_wit_pair_gif" onerror="charError(this);">
+						<img id="client_wit_pair_png" onerror="charError(this);">
+						<img id="client_wit_pair_apng" onerror="charError(this);">
+						<img id="client_wit_pair_webp" onerror="charError(this);">
+					</div>
+					<div id="client_wit_char" class="client_char" alt="Character">
+						<img id="client_wit_char_gif" onerror="charError(this);">
+						<img id="client_wit_char_png" onerror="charError(this);">
+						<img id="client_wit_char_apng" onerror="charError(this);">
+						<img id="client_wit_char_webp" onerror="charError(this);">
+					</div>
+					<div id="client_pro_pair_char" class="client_char" alt="Paired character">
+						<img id="client_pro_pair_gif" onerror="charError(this);">
+						<img id="client_pro_pair_png" onerror="charError(this);">
+						<img id="client_pro_pair_apng" onerror="charError(this);">
+						<img id="client_pro_pair_webp" onerror="charError(this);">
+					</div>
+					<div id="client_pro_char" class="client_char" alt="Character">
+						<img id="client_pro_char_gif" onerror="charError(this);">
+						<img id="client_pro_char_png" onerror="charError(this);">
+						<img id="client_pro_char_apng" onerror="charError(this);">
+						<img id="client_pro_char_webp" onerror="charError(this);">
+					</div>
+					<img id="client_def_bench" class="client_bench">
+					<img id="client_wit_bench" class="client_bench">
+					<img id="client_pro_bench" class="client_bench">
+				</div>
+				<div id="client_classicview">
+				<img id="client_court_classic" alt="Courtroom backdrop" onerror="imgError(this);">
+				<div id="client_pair_char" class="client_char" alt="Paired character">
 					<img id="client_pair_gif" onerror="charError(this);">
 					<img id="client_pair_png" onerror="charError(this);">
 					<img id="client_pair_apng" onerror="charError(this);">
 					<img id="client_pair_webp" onerror="charError(this);">
 				</div>
-				<div id="client_char" alt="Character">
+				<div id="client_char" class="client_char" alt="Character">
 					<img id="client_char_gif" onerror="charError(this);">
 					<img id="client_char_png" onerror="charError(this);">
 					<img id="client_char_apng" onerror="charError(this);">
 					<img id="client_char_webp" onerror="charError(this);">
 				</div>
-				<img id="client_bench">
+				<img id="client_bench_classic" class="client_bench">	
+				</div>
 				<img id="client_fg" alt="Various overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
 				<img id="client_evi" src="" alt="Character Evidence" onerror="imgError(this);">
 				<img id="client_testimony" alt="Testimony overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" onerror="imgError(this);">
@@ -438,9 +489,14 @@
 			<button id="client_inichange" onclick="iniedit()">Change</button>
 			<br>
 			<br>
+			<p>Pan-tilt (experimental)</p>
+			<label for="client_pantilt">Enable:</label>
+			<input type="checkbox" id="client_pantilt" name="client_pantilt" onclick="switchPanTilt()">
+			<br>
+			<br>
 			<p>16:9 viewport (experimental)</p>
 			<label for="client_hdviewport">Enable:</label>
-			<input type="checkbox" id="client_hdviewport" id="client_hdviewport" onclick="switchAspectRatio()">
+			<input type="checkbox" id="client_hdviewport" name="client_hdviewport" onclick="switchAspectRatio()">
 			<br>
 			<label for="client_hdviewport_offset">Offset chatbox:</label>
 			<input type="checkbox" id="client_hdviewport_offset" id="client_hdviewport_offset" onclick="switchChatOffset()">
diff --git a/webAO/client.js b/webAO/client.js
index 34e5718..8852a9c 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1217,6 +1217,7 @@ class Client extends EventEmitter {
 	 */
 	handleBN(args) {
 		viewport.bgname = safe_tags(args[1]);
+		const bgfolder = viewport.bgFolder;
 		const bg_index = getIndexFromSelect("bg_select", viewport.bgname);
 		document.getElementById("bg_select").selectedIndex = bg_index;
 		updateBackgroundPreview();
@@ -1224,6 +1225,19 @@ class Client extends EventEmitter {
 			document.getElementById("bg_filename").value = viewport.bgname;
 		}
 		document.getElementById("bg_preview").src = AO_HOST + "background/" + encodeURI(args[1].toLowerCase()) + "/defenseempty.png";
+		
+		document.getElementById("client_def_bench").src = bgfolder + "defensedesk.png"
+		document.getElementById("client_wit_bench").src = bgfolder + "stand.png"
+		document.getElementById("client_pro_bench").src = bgfolder + "prosecutiondesk.png"
+
+		document.getElementById("client_court").src = bgfolder + "full.png"
+
+		document.getElementById("client_court_def").src = bgfolder + "defenseempty.png"
+		document.getElementById("client_court_deft").src = bgfolder + "transition_def.png"
+		document.getElementById("client_court_wit").src = bgfolder + "witnessempty.png"
+		document.getElementById("client_court_prot").src = bgfolder + "transition_pro.png"
+		document.getElementById("client_court_pro").src = bgfolder + "prosecutorempty.png"
+		
 		if (this.charID === -1) {
 			viewport.changeBackground("jud");
 		} else {
@@ -1737,8 +1751,9 @@ class Viewport {
 async changeBackground(position) {
 	const bgfolder = viewport.bgFolder;
 
-	const bench = document.getElementById("client_bench");
-	const court = document.getElementById("client_court");
+	const view = document.getElementById("client_fullview");
+	const bench = document.getElementById("client_bench_classic");
+	const court = document.getElementById("client_court_classic");
 
 	const positions = {
 		def: {
@@ -1747,7 +1762,7 @@ async changeBackground(position) {
 			speedLines: "defense_speedlines.gif"
 		},
 		pro: {
-			bg: "prosecutorempty.png",
+			bg: "prosecutionempty.png",
 			desk: { ao2: "prosecutiondesk.png", ao1: "bancoacusacion.png" },
 			speedLines: "prosecution_speedlines.gif"
 		},
@@ -1797,9 +1812,6 @@ async changeBackground(position) {
 		speedLines = "defense_speedlines.gif";
 	}
 
-	bench.className = position + "_bench";
-	court.className = position + "_court";
-
 	if (viewport.chatmsg.type === 5) {
 		court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
 		bench.style.opacity = 0;
@@ -1813,7 +1825,28 @@ async changeBackground(position) {
 			bench.style.opacity = 0;
 		}
 	}
+
+	if ( "def,pro,wit".includes(position)) {
+		bench.style.display = "none";
+		view.style.display = "";
+		document.getElementById("client_classicview").style.display = "none";
+		switch(position) {
+			case "def":
+				view.style.left = "0";
+				break;
+			case "wit":
+				view.style.left = "-200%";
+				break;
+			case "pro":
+				view.style.left = "-400%";
+				break;
+		}
+	} else {
+		bench.style.display = "";
+		view.style.display = "none";	
+		document.getElementById("client_classicview").style.display = "";
 	}
+}
 
 	/**
 	 * Intialize testimony updater 
@@ -1952,14 +1985,15 @@ async changeBackground(position) {
 	 * Sets all the img tags to the right sources
 	 * @param {*} chatmsg 
 	 */
-	setEmote(charactername, emotename, prefix, pair) {
+	setEmote(charactername, emotename, prefix, pair, side) {
 		const pairID = pair ? "pair" : "char";
 		const characterFolder = AO_HOST + "characters/";
+		const position = "def,pro,wit".includes(side) ? side+"_" : ""
 
-		const  gif_s = document.getElementById("client_" + pairID + "_gif");
-		const  png_s = document.getElementById("client_" + pairID + "_png");
-		const apng_s = document.getElementById("client_" + pairID +"_apng");
-		const webp_s = document.getElementById("client_" + pairID +"_webp");
+		const  gif_s = document.getElementById("client_" + position + pairID + "_gif");
+		const  png_s = document.getElementById("client_" + position + pairID + "_png");
+		const apng_s = document.getElementById("client_" + position + pairID +"_apng");
+		const webp_s = document.getElementById("client_" + position + pairID +"_webp");
 
 		if (this.lastChar !== this.chatmsg.name) {
 			//hide the last sprite
@@ -1988,6 +2022,8 @@ async changeBackground(position) {
 		this.sfxplayed = 0;
 		this.textTimer = 0;
 		this._animating = true;
+		let charLayers = document.getElementById("client_char");
+		let pairLayers = document.getElementById("client_pair_char");
 
 		// stop updater
 		clearTimeout(this.updater);
@@ -2008,8 +2044,10 @@ async changeBackground(position) {
 		}
 		this.lastEvi = this.chatmsg.evidence;
 
-		const charLayers = document.getElementById("client_char");
-		const pairLayers = document.getElementById("client_pair_char");
+		if ( "def,pro,wit".includes(this.chatmsg.side)) {
+			charLayers = document.getElementById("client_"+this.chatmsg.side+"_char");
+			pairLayers = document.getElementById("client_"+this.chatmsg.side+"_pair_char");
+		}
 
 		const chatContainerBox = document.getElementById("client_chatcontainer");	
 		const nameBoxInner = document.getElementById("client_inner_name");
@@ -2031,10 +2069,10 @@ async changeBackground(position) {
 
 		checkCallword(this.chatmsg.content);		
 
-		this.setEmote(this.chatmsg.name.toLowerCase(), this.chatmsg.sprite, "(a)", false);
+		this.setEmote(this.chatmsg.name.toLowerCase(), this.chatmsg.sprite, "(a)", false, this.chatmsg.side);
 
 		if (this.chatmsg.other_name) {
-			this.setEmote(this.chatmsg.other_name.toLowerCase(), this.chatmsg.other_emote, "(a)", false);
+			this.setEmote(this.chatmsg.other_name.toLowerCase(), this.chatmsg.other_emote, "(a)", false, this.chatmsg.side);
 		}
 
 		// gets which shout shall played
@@ -2093,8 +2131,8 @@ async changeBackground(position) {
 		}
 
 		// Shift by the horizontal offset
-		pairLayers.style.left = Number(this.chatmsg.other_offset[0]) + "%";
-		charLayers.style.left = Number(this.chatmsg.self_offset[0]) + "%";
+		//pairLayers.style.left = Number(this.chatmsg.other_offset[0]) + "%";
+		//charLayers.style.left = Number(this.chatmsg.self_offset[0]) + "%";
 
 		// New vertical offsets
 		pairLayers.style.top = Number(this.chatmsg.other_offset[1]) + "%";
@@ -2167,13 +2205,18 @@ async changeBackground(position) {
 
 		const gamewindow = document.getElementById("client_gamewindow");
 		const waitingBox = document.getElementById("client_chatwaiting");
-		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");
+		let charLayers = document.getElementById("client_char");
+		let pairLayers = document.getElementById("client_pair_char");
+
+		if ( "def,pro,wit".includes(this.chatmsg.side)) {
+			charLayers = document.getElementById("client_"+this.chatmsg.side+"_char");
+			pairLayers = document.getElementById("client_"+this.chatmsg.side+"_pair_char");
+		}
 
 		const charName = this.chatmsg.name.toLowerCase();
 		const charEmote = this.chatmsg.sprite.toLowerCase();
@@ -2200,7 +2243,7 @@ async changeBackground(position) {
 				shoutSprite.style.opacity = 0;
 				shoutSprite.style.animation = "";				
 				const preanim = this.chatmsg.preanim.toLowerCase();
-				this.setEmote(charName,preanim,"",false);
+				this.setEmote(charName,preanim,"",false,this.chatmsg.side);
 				charLayers.style.opacity = 1;
 			}
 
@@ -2250,17 +2293,17 @@ async changeBackground(position) {
 				}
 
 				if (this.chatmsg.other_name) {
-					this.setEmote(pairName,pairEmote,"(a)",true);
+					this.setEmote(pairName,pairEmote,"(a)",true,this.chatmsg.side);
 					pairLayers.style.opacity = 1;
 				} else {
 					pairLayers.style.opacity = 0;
 				}
 
-				this.setEmote(charName,charEmote,"(b)",false);
+				this.setEmote(charName,charEmote,"(b)",false,this.chatmsg.side);
 				charLayers.style.opacity = 1;
 
 				if (this.textnow === this.chatmsg.content) {
-					this.setEmote(charName,charEmote,"(a)",false);
+					this.setEmote(charName,charEmote,"(a)",false,this.chatmsg.side);
 					charLayers.style.opacity = 1;
 					waitingBox.style.opacity = 1;
 					this._animating = false;
@@ -2282,7 +2325,7 @@ async changeBackground(position) {
 
 					if (this.textnow === this.chatmsg.content) {
 						this._animating = false;
-						this.setEmote(charName,charEmote,"(a)",false);
+						this.setEmote(charName,charEmote,"(a)",false,this.chatmsg.side);
 						charLayers.style.opacity = 1;
 						waitingBox.style.opacity = 1;
 						clearTimeout(this.updater);
@@ -2634,6 +2677,19 @@ export async function iniedit() {
 window.iniedit = iniedit;
 
 /**
+ * Triggered by the pantilt checkbox
+ */
+ export async function switchPanTilt() {
+	const background = document.getElementById("client_fullview");
+	if(document.getElementById("client_pantilt").checked) {
+		background.style.transition = "0.5s ease-in-out";		
+	} else {
+		background.style.transition = "none"
+	}
+}
+window.switchPanTilt = switchPanTilt;
+
+/**
  * Triggered by the change aspect ratio checkbox
  */
 export async function switchAspectRatio() {
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 943605f..82a863b 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -179,41 +179,79 @@
 	width: 100%;
 }
 
+#client_court_static {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+}
+
 #client_court {
 	position: absolute;
 	height: 100%;
+	top: 0;
+	left: 0;
+}
+
+#client_stitch_court {
+	position: absolute;
+	height: 100%;
 	width: 100%;
 	top: 0;
 	left: 0;
-	object-fit: cover;
 }
 
-#client_pair_char {
+#client_stitch_court>img {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+}
+
+#client_court_classic {
+	position: absolute;
+	height: 100%;
+	top: 0;
+	left: 0;
+}
+
+.def_court {
+	object-position: left;
+}
+
+.wit_court {
+	object-position: center;
+}
+
+.pro_court {
+	object-position: right;
+}
+
+#client_fullview {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	bottom: 0;
+	transition: none;
+	transition-property: left;
 }
 
-#client_pair_char>img {
+#client_classicview {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	bottom: 0;
-	left: 0;
-	object-fit: cover;
-	object-position: 50% 0;
 }
 
-#client_char {
+.client_char {
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	bottom: 0;
-	left: 0;
 }
 
-#client_char>img {
+.client_char>img {
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -223,15 +261,31 @@
 	object-position: 50% 0;
 }
 
-.def_bench, .hld_bench, .jur_bench, .sea_bench {
+#client_bench_classic {
 	left: 0;
 }
 
-.pro_bench, .hlp_bench, .wit_bench, .jud_bench {
-	right: 0;
+#client_def_bench, #client_def_char, #client_def_pair_char, #client_court_def {
+	left: 0;
+}
+
+#client_court_deft {
+	left: 100%;
+}
+
+#client_wit_bench, #client_wit_char, #client_wit_pair_char, #client_court_wit {
+	left: 200%;
+}
+
+#client_court_prot {
+	left: 100%;
+}
+
+#client_pro_bench, #client_pro_char, #client_pro_pair_char, #client_court_pro {
+	left: 400%;
 }
 
-#client_bench {
+.client_bench {
 	position: absolute;
 	height: auto;
 	width: 100%;