From 4ff01e3b574f38ab30fa5a13db7c201d4c396ada Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Tue, 7 Sep 2021 18:40:04 +0200 Subject: add animation to slide the full size bg --- webAO/styles/client.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'webAO') diff --git a/webAO/styles/client.css b/webAO/styles/client.css index b00718e..b2866a7 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -186,6 +186,20 @@ top: 0; left: 0; object-fit: cover; + transition: 0.5s ease-in-out; + transition-property: object-position; +} + +.def_court { + object-position: left; +} + +.wit_court { + object-position: center; +} + +.pro_court { + object-position: right; } #client_pair_char { -- cgit From 7867b6c613cf2610af72efc1cb074f7ec2078af3 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Sat, 18 Sep 2021 17:47:54 +0200 Subject: hack together the "whip-pan" --- webAO/client.html | 64 ++++++++++++++++++++++++++++++++++---------- webAO/client.js | 71 ++++++++++++++++++++++++++++++++++--------------- webAO/styles/client.css | 58 +++++++++++++++++++++++++++------------- 3 files changed, 139 insertions(+), 54 deletions(-) (limited to 'webAO') 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 @@
- Courtroom backdrop -
- - - - -
-
- - - - -
- + Courtroom backdrop +
+
+ Courtroom backdrop + Courtroom backdrop + Courtroom backdrop + Courtroom backdrop + Courtroom backdrop +
+ Courtroom backdrop +
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+ + + +
Various overlay Character Evidence Testimony overlay 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 @@ -180,14 +180,25 @@ } #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%; -- cgit From 6a766503ebc678e54b17a7912ea8e8da269d0b33 Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Sat, 18 Sep 2021 18:20:56 +0200 Subject: fix non def wit pro chars --- webAO/client.html | 21 ++++++++++++--- webAO/client.js | 72 ++++++++++++++++++++++++++++++------------------- webAO/styles/client.css | 30 ++++++++++++++++----- 3 files changed, 86 insertions(+), 37 deletions(-) (limited to 'webAO') diff --git a/webAO/client.html b/webAO/client.html index 4102c72..2dfa986 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -73,8 +73,7 @@
- Courtroom backdrop -
+
Courtroom backdrop Courtroom backdrop @@ -122,7 +121,23 @@ -
+
+
+ Courtroom backdrop +
+ + + + +
+
+ + + + +
+ +
Various overlay Character Evidence Testimony overlay diff --git a/webAO/client.js b/webAO/client.js index a9c72e3..3453151 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -1229,6 +1229,8 @@ class Client extends EventEmitter { 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" @@ -1740,9 +1742,9 @@ class Viewport { async changeBackground(position) { const bgfolder = viewport.bgFolder; - const view = document.getElementById("client_charview"); - const bench = document.getElementById("client_"+position+"_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: { @@ -1791,7 +1793,6 @@ 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; @@ -1802,14 +1803,11 @@ async changeBackground(position) { speedLines = "defense_speedlines.gif"; } - 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 + "full.png"; - view.src = bgfolder + "full.png"; + court.src = bgfolder + bg; if (desk) { const deskFilename = await fileExists(bgfolder + desk.ao2) ? desk.ao2 : desk.ao1; bench.src = bgfolder + deskFilename; @@ -1819,19 +1817,27 @@ async changeBackground(position) { } } - switch(position) { - case "def": - view.style.left = "0"; - break; - case "wit": - view.style.left = "-200%"; - break; - case "pro": - view.style.left = "-400%"; - break; - } - + 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 @@ -1973,11 +1979,12 @@ async changeBackground(position) { 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_" + 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"); + 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 @@ -2006,6 +2013,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); @@ -2026,8 +2035,10 @@ async changeBackground(position) { } this.lastEvi = this.chatmsg.evidence; - const charLayers = document.getElementById("client_"+this.chatmsg.side+"_char"); - const pairLayers = document.getElementById("client_"+this.chatmsg.side+"_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"); @@ -2185,13 +2196,18 @@ async changeBackground(position) { const gamewindow = document.getElementById("client_gamewindow"); const waitingBox = document.getElementById("client_chatwaiting"); - 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"); 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(); diff --git a/webAO/styles/client.css b/webAO/styles/client.css index ba7a4a0..080a6bb 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -179,6 +179,14 @@ width: 100%; } +#client_court_static { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; +} + #client_court { position: absolute; height: 100%; @@ -201,6 +209,13 @@ bottom: 0; } +#client_court_classic { + position: absolute; + height: 100%; + top: 0; + left: 0; +} + .def_court { object-position: left; } @@ -213,7 +228,7 @@ object-position: right; } -#client_charview { +#client_fullview { position: absolute; height: 100%; width: 100%; @@ -222,6 +237,13 @@ transition-property: left; } +#client_classicview { + position: absolute; + height: 100%; + width: 100%; + bottom: 0; +} + .client_char { position: absolute; height: 100%; @@ -239,14 +261,10 @@ 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; } -- cgit From a458698c9f830fc4a67d062e08aab3ea7884d41c Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Sat, 2 Oct 2021 20:22:01 +0200 Subject: add checkbox for pantilt (nonfunctional) --- webAO/client.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'webAO') diff --git a/webAO/client.html b/webAO/client.html index 439abb4..a24b55e 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -488,9 +488,14 @@

+

Pan-tilit (experimental)

+ + +
+

16:9 viewport (experimental)

- +
-- cgit From 4e06d17eda0c624179312e3300a64bfe816fa6fb Mon Sep 17 00:00:00 2001 From: stonedDiscord Date: Mon, 4 Oct 2021 21:01:19 +0200 Subject: make it toggeableslkdfnslf --- webAO/client.html | 2 +- webAO/client.js | 13 +++++++++++++ webAO/styles/client.css | 2 +- 3 files changed, 15 insertions(+), 2 deletions(-) (limited to 'webAO') diff --git a/webAO/client.html b/webAO/client.html index a24b55e..bcd5f73 100644 --- a/webAO/client.html +++ b/webAO/client.html @@ -488,7 +488,7 @@

-

Pan-tilit (experimental)

+

Pan-tilt (experimental)


diff --git a/webAO/client.js b/webAO/client.js index c12b97d..8852a9c 100644 --- a/webAO/client.js +++ b/webAO/client.js @@ -2676,6 +2676,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 */ diff --git a/webAO/styles/client.css b/webAO/styles/client.css index de43993..82a863b 100644 --- a/webAO/styles/client.css +++ b/webAO/styles/client.css @@ -233,7 +233,7 @@ height: 100%; width: 100%; bottom: 0; - transition: 0.5s ease-in-out; + transition: none; transition-property: left; } -- cgit