aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--webAO/client.html64
-rw-r--r--webAO/client.js71
-rw-r--r--webAO/styles/client.css58
3 files changed, 139 insertions, 54 deletions
diff --git a/webAO/client.html b/webAO/client.html
index dd036a6..4102c72 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -73,20 +73,56 @@
<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">
- <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">
- <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_court_static" alt="Courtroom backdrop" onerror="imgError(this);">
+ <div id="client_charview">
+ <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>
<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);">
diff --git a/webAO/client.js b/webAO/client.js
index 20006ab..a9c72e3 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1216,6 +1216,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();
@@ -1223,6 +1224,17 @@ 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_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 {
@@ -1728,7 +1740,8 @@ class Viewport {
async changeBackground(position) {
const bgfolder = viewport.bgFolder;
- const bench = document.getElementById("client_bench");
+ const view = document.getElementById("client_charview");
+ const bench = document.getElementById("client_"+position+"_bench");
const court = document.getElementById("client_court");
const positions = {
@@ -1738,7 +1751,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"
},
@@ -1778,6 +1791,7 @@ async changeBackground(position) {
let desk;
let speedLines;
+
if ( "def,pro,hld,hlp,wit,jud,jur,sea".includes(position)) {
bg = positions[position].bg;
desk = positions[position].desk;
@@ -1788,14 +1802,14 @@ 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;
} else {
- court.src = bgfolder + bg;
+ court.src = bgfolder + "full.png";
+ view.src = bgfolder + "full.png";
if (desk) {
const deskFilename = await fileExists(bgfolder + desk.ao2) ? desk.ao2 : desk.ao1;
bench.src = bgfolder + deskFilename;
@@ -1804,6 +1818,19 @@ async changeBackground(position) {
bench.style.opacity = 0;
}
}
+
+ switch(position) {
+ case "def":
+ view.style.left = "0";
+ break;
+ case "wit":
+ view.style.left = "-200%";
+ break;
+ case "pro":
+ view.style.left = "-400%";
+ break;
+ }
+
}
/**
@@ -1943,14 +1970,14 @@ 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 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_" + side + "_" + pairID + "_gif");
+ const png_s = document.getElementById("client_" + side + "_" + pairID + "_png");
+ const apng_s = document.getElementById("client_" + side + "_" + pairID +"_apng");
+ const webp_s = document.getElementById("client_" + side + "_" + pairID +"_webp");
if (this.lastChar !== this.chatmsg.name) {
//hide the last sprite
@@ -1999,8 +2026,8 @@ async changeBackground(position) {
}
this.lastEvi = this.chatmsg.evidence;
- const charLayers = document.getElementById("client_char");
- const pairLayers = document.getElementById("client_pair_char");
+ const charLayers = document.getElementById("client_"+this.chatmsg.side+"_char");
+ const pairLayers = document.getElementById("client_"+this.chatmsg.side+"_pair_char");
const chatContainerBox = document.getElementById("client_chatcontainer");
const nameBoxInner = document.getElementById("client_inner_name");
@@ -2022,10 +2049,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
@@ -2084,8 +2111,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]) + "%";
@@ -2158,8 +2185,8 @@ 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 charLayers = document.getElementById("client_"+this.chatmsg.side+"_char");
+ const pairLayers = document.getElementById("client_"+this.chatmsg.side+"_pair_char");
const eviBox = document.getElementById("client_evi");
const shoutSprite = document.getElementById("client_shout");
const chatBoxInner = document.getElementById("client_inner_chat");
@@ -2191,7 +2218,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;
}
@@ -2241,17 +2268,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;
@@ -2273,7 +2300,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);
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index b2866a7..ba7a4a0 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -182,12 +182,23 @@
#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;
- transition: 0.5s ease-in-out;
- transition-property: object-position;
+}
+
+#client_stitch_court>img {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ bottom: 0;
}
.def_court {
@@ -202,32 +213,23 @@
object-position: right;
}
-#client_pair_char {
- position: absolute;
- height: 100%;
- width: 100%;
- bottom: 0;
-}
-
-#client_pair_char>img {
+#client_charview {
position: absolute;
height: 100%;
width: 100%;
bottom: 0;
- left: 0;
- object-fit: cover;
- object-position: 50% 0;
+ transition: 0.5s ease-in-out;
+ transition-property: left;
}
-#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%;
@@ -245,7 +247,27 @@
right: 0;
}
-#client_bench {
+#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 {
position: absolute;
height: auto;
width: 100%;
generated by cgit (git 2.34.1) at 2026-04-23 15:28:26 +0000