Added support for custom backgrounds

3 files changed, 49 insertions, 28 deletions

diff --git a/webAO/client.js b/webAO/client.js
index 14bfd08..dd7989b 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -6,7 +6,7 @@
 
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { EventEmitter } from 'events';
-import fileExistsSync from './utils/fileExistsSync';
+import tryUrls from './utils/tryUrls'
 import {
   escapeChat, encodeChat, prepChat, safeTags,
 } from './encoding.js';
@@ -1220,11 +1220,12 @@ class Client extends EventEmitter {
       document.getElementById('client_charselect').style.display = 'none';
     }
   }
-
+  
   /**
 	 * Handles a background change.
 	 * @param {Array} args packet arguments
 	 */
+  
   handleBN(args) {
     viewport.bgname = safeTags(args[1]);
     const bgfolder = viewport.bgFolder;
@@ -1234,19 +1235,17 @@ class Client extends EventEmitter {
     if (bg_index === 0) {
       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`;
+    
+    tryUrls(`${AO_HOST}background/${encodeURI(args[1].toLowerCase())}/defenseempty`).then(resp => {document.getElementById('bg_preview').src = resp});
+    tryUrls(`${bgfolder}defensedesk`).then((resp) => document.getElementById('client_def_bench').src = resp);
+    tryUrls(`${bgfolder}stand`).then(resp => {document.getElementById('client_wit_bench').src = resp});
+    tryUrls(`${bgfolder}prosecutiondesk`).then(resp => {document.getElementById('client_pro_bench').src = resp});
+    tryUrls(`${bgfolder}full`).then(resp => {document.getElementById('client_court').src = resp});
+    tryUrls(`${bgfolder}defenseempty`).then(resp => {document.getElementById('client_court_def').src = resp});
+    tryUrls(`${bgfolder}transition_def`).then(resp => {document.getElementById('client_court_deft').src = resp});
+    tryUrls(`${bgfolder}witnessempty`).then(resp => {document.getElementById('client_court_wit').src = resp});
+    tryUrls(`${bgfolder}transition_pro`).then(resp => {document.getElementById('client_court_prot').src = resp});
+    tryUrls(`${bgfolder}prosecutorempty`).then(resp => {document.getElementById('client_court_pro').src = resp});
 
     if (this.charID === -1) {
       viewport.changeBackground('jud');
@@ -1774,42 +1773,42 @@ class Viewport {
 
     const positions = {
       def: {
-        bg: 'defenseempty.png',
+        bg: 'defenseempty',
         desk: { ao2: 'defensedesk.png', ao1: 'bancodefensa.png' },
         speedLines: 'defense_speedlines.gif',
       },
       pro: {
-        bg: 'prosecutorempty.png',
+        bg: 'prosecutorempty',
         desk: { ao2: 'prosecutiondesk.png', ao1: 'bancoacusacion.png' },
         speedLines: 'prosecution_speedlines.gif',
       },
       hld: {
-        bg: 'helperstand.png',
+        bg: 'helperstand',
         desk: null,
         speedLines: 'defense_speedlines.gif',
       },
       hlp: {
-        bg: 'prohelperstand.png',
+        bg: 'prohelperstand',
         desk: null,
         speedLines: 'prosecution_speedlines.gif',
       },
       wit: {
-        bg: 'witnessempty.png',
+        bg: 'witnessempty',
         desk: { ao2: 'stand.png', ao1: 'estrado.png' },
         speedLines: 'prosecution_speedlines.gif',
       },
       jud: {
-        bg: 'judgestand.png',
+        bg: 'judgestand',
         desk: { ao2: 'judgedesk.png', ao1: 'judgedesk.gif' },
         speedLines: 'prosecution_speedlines.gif',
       },
       jur: {
-        bg: 'jurystand.png',
+        bg: 'jurystand',
         desk: { ao2: 'jurydesk.png', ao1: 'estrado.png' },
         speedLines: 'defense_speedlines.gif',
       },
       sea: {
-        bg: 'seancestand.png',
+        bg: 'seancestand',
         desk: { ao2: 'seancedesk.png', ao1: 'estrado.png' },
         speedLines: 'prosecution_speedlines.gif',
       },
@@ -1824,7 +1823,7 @@ class Viewport {
       desk = positions[position].desk;
       speedLines = positions[position].speedLines;
     } else {
-      bg = `${position}.png`;
+      bg = `${position}`;
       desk = { ao2: `${position}_overlay.png`, ao1: '_overlay.png' };
       speedLines = 'defense_speedlines.gif';
     }
@@ -1834,7 +1833,9 @@ class Viewport {
       court.src = `${AO_HOST}themes/default/${encodeURI(speedLines)}`;
       bench.style.opacity = 0;
     } else {
-      court.src = bgfolder + bg;
+      // Set src here
+      
+      court.src = await tryUrls(bgfolder + bg)
       if (desk) {
         const deskFilename = await fileExists(bgfolder + desk.ao2) ? desk.ao2 : desk.ao1;
         bench.src = bgfolder + deskFilename;
diff --git a/webAO/client/setEmote.js b/webAO/client/setEmote.js
index 4bbaab7..f682fe5 100644
--- a/webAO/client/setEmote.js
+++ b/webAO/client/setEmote.js
@@ -1,12 +1,12 @@
 import transparentPng from '../constants/transparentPng';
-import fileExistsSync from '../utils/fileExistsSync';
+import fileExists from '../utils/fileExists';
 
 /**
 	 * Sets all the img tags to the right sources
 	 * @param {*} chatmsg
 	 */
 
-const setEmote = (AO_HOST, client, charactername, emotename, prefix, pair, side) => {
+const setEmote = async (AO_HOST, client, charactername, emotename, prefix, pair, side) => {
   const pairID = pair ? 'pair' : 'char';
   const characterFolder = `${AO_HOST}characters/`;
   const acceptedPositions = ['def', 'pro', 'wit'];
@@ -30,7 +30,7 @@ const setEmote = (AO_HOST, client, charactername, emotename, prefix, pair, side)
     } else {
       url = `${characterFolder}${encodeURI(charactername)}/${encodeURI(prefix)}${encodeURI(emotename)}${extension}`;
     }
-    const exists = fileExistsSync(url);
+    const exists = await fileExists(url);
     if (exists) {
       emoteSelector.src = url;
       break;
diff --git a/webAO/utils/tryUrls.js b/webAO/utils/tryUrls.js
new file mode 100644
index 0000000..db07ec7
--- /dev/null
+++ b/webAO/utils/tryUrls.js
@@ -0,0 +1,20 @@
+import fileExists from './fileExists'
+import transparentPng from '../constants/transparentPng'
+const urlExtensionsToTry = [
+    '.png',
+    '.gif',
+    '.webp',
+    '.apng'
+]
+const tryUrls = async (url) => {
+    for (let i = 0; i < urlExtensionsToTry.length; i++) {
+        const extension = urlExtensionsToTry[i]
+        const fullFileUrl = url + extension
+        const exists = await fileExists(fullFileUrl);
+        if (exists) {
+            return fullFileUrl
+        }
+    }
+    return transparentPng
+}
+export default tryUrls
\ No newline at end of file