Merge pull request #130 from AttorneyOnline/multipleBackgroundTypes

Multiple Background Types

5 files changed, 105 insertions, 53 deletions

diff --git a/webAO/client.js b/webAO/client.js
index 6a2947c..06defa2 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';
@@ -1222,11 +1222,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;
@@ -1236,19 +1237,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');
@@ -1765,42 +1764,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',
       },
@@ -1815,7 +1814,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';
     }
@@ -1825,7 +1824,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/__tests__/setEmote.test.js b/webAO/client/__tests__/setEmote.test.js
index d81c2cc..1db13c9 100644
--- a/webAO/client/__tests__/setEmote.test.js
+++ b/webAO/client/__tests__/setEmote.test.js
@@ -1,10 +1,10 @@
 import setEmote from '../setEmote';
 import Client from '../../client';
-import fileExistsSync from '../../utils/fileExistsSync';
+import fileExists from '../../utils/fileExists';
 import transparentPng from '../../constants/transparentPng';
 
 jest.mock('../../client');
-jest.mock('../../utils/fileExistsSync');
+jest.mock('../../utils/fileExists');
 
 describe('setEmote', () => {
   const AO_HOST = '';
@@ -17,98 +17,98 @@ describe('setEmote', () => {
   const client = new Client('127.0.0.1');
   const firstExtension = '.gif';
 
-  test('Should have a client_def_char_img with a valid source', () => {
-    fileExistsSync.mockReturnValue(true);
+  test('Should have a client_def_char_img with a valid source', async () => {
+    fileExists.mockReturnValue(true);
     document.body.innerHTML = `
       <img id="client_def_char_img" />
     `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'def');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'def');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
     expect(document.getElementById('client_def_char_img').src).toEqual(expected);
   });
-  test('Should have a client_pro_char_img to have a valid src', () => {
+  test('Should have a client_pro_char_img to have a valid src', async () => {
     document.body.innerHTML = `
       <img id="client_pro_char_img" />
 
     `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'pro');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'pro');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
     expect(document.getElementById('client_pro_char_img').src).toEqual(expected);
   });
-  test('Should have a client_wit_char_img', () => {
+  test('Should have a client_wit_char_img', async () => {
     document.body.innerHTML = `
       <img id="client_wit_char_img" />
   `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'wit');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'wit');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
 
     expect(document.getElementById('client_wit_char_img').src).toEqual(expected);
   });
-  test('Should have a client_def_pair_img', () => {
+  test('Should have a client_def_pair_img', async () => {
     document.body.innerHTML = `
 <img id="client_def_pair_img" />
 
 `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'def');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'def');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
 
     expect(document.getElementById('client_def_pair_img').src).toEqual(expected);
   });
-  test('Should have a client_pro_pair_img', () => {
+  test('Should have a client_pro_pair_img', async () => {
     document.body.innerHTML = `
 <img id="client_pro_pair_img" />
 
 `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'pro');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'pro');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
 
     expect(document.getElementById('client_pro_pair_img').src).toEqual(expected);
   });
-  test('Should have a client_wit_pair_img', () => {
+  test('Should have a client_wit_pair_img', async () => {
     document.body.innerHTML = `
 <img id="client_wit_pair_img" />
 
 `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'wit');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'wit');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
 
     expect(document.getElementById('client_wit_pair_img').src).toEqual(expected);
   });
-  test('Should have a client_char_img', () => {
+  test('Should have a client_char_img', async () => {
     document.body.innerHTML = `
     <img id="client_char_img" />
 
     `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'notvalid');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 0, 'notvalid');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
 
     expect(document.getElementById('client_char_img').src).toEqual(expected);
   });
-  test('Should have a client_pair_img', () => {
+  test('Should have a client_pair_img', async () => {
     document.body.innerHTML = `
       <img id="client_pair_img" />
       `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'notvalid');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', '(a)', 1, 'notvalid');
     const expected = `http://localhost/characters/salanto/(a)coding${firstExtension}`;
 
     expect(document.getElementById('client_pair_img').src).toEqual(expected);
   });
-  test('Should handle .png urls differently', () => {
-    fileExistsSync.mockReturnValueOnce(false);
+  test('Should handle .png urls differently', async () => {
+    fileExists.mockReturnValueOnce(false);
     document.body.innerHTML = `
     <img id="client_pair_img" />
     `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', 'prefixNotValid', 1, 'notvalid');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', 'prefixNotValid', 1, 'notvalid');
     const expected = 'http://localhost/characters/salanto/coding.png';
 
     expect(document.getElementById('client_pair_img').src).toEqual(expected);
   });
-  test('Should replace character if new character responds', () => {
-    fileExistsSync.mockReturnValue(false);
+  test('Should replace character if new character responds', async () => {
+    fileExists.mockReturnValue(false);
     document.body.innerHTML = `
     <img id="client_pair_img" />
     `;
-    setEmote(AO_HOST, client, 'salanto', 'coding', 'prefixNotValid', 1, 'notvalid');
+    await setEmote(AO_HOST, client, 'salanto', 'coding', 'prefixNotValid', 1, 'notvalid');
     const expected = transparentPng;
     expect(document.getElementById('client_pair_img').src).toEqual(expected);
   });
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/__tests__/tryUrls.test.ts b/webAO/utils/__tests__/tryUrls.test.ts
new file mode 100644
index 0000000..444664e
--- /dev/null
+++ b/webAO/utils/__tests__/tryUrls.test.ts
@@ -0,0 +1,31 @@
+import fileExists from '../fileExists'
+import tryUrls from '../tryUrls';
+import transparentPng from '../../constants/transparentPng'
+jest.mock('../fileExists')
+
+const mockFileExists = fileExists as jest.MockedFunction<typeof fileExists>;
+
+describe('tryUrls', () => {
+    it('Should try multiple file extensions', async () => {
+        const url = "localhost/stoneddiscord/assets"
+        mockFileExists
+        .mockReturnValueOnce(Promise.resolve(false))
+        .mockReturnValueOnce(Promise.resolve(false))
+        .mockReturnValueOnce(Promise.resolve(false))
+        .mockReturnValueOnce(Promise.resolve(true))
+        const actual = await tryUrls(url)
+        const expected = 'localhost/stoneddiscord/assets.apng'
+        expect(actual).toBe(expected);
+        });
+        
+    it('Should return a transparent png if it cant find any assets', async () => {
+        const url = "localhost/stoneddiscord/assets"
+        mockFileExists
+        .mockReturnValue(Promise.resolve(false))
+        const actual = await tryUrls(url)
+        const expected = transparentPng
+        expect(actual).toBe(expected);
+        });
+})
+
+  
diff --git a/webAO/utils/tryUrls.ts b/webAO/utils/tryUrls.ts
new file mode 100644
index 0000000..14ef885
--- /dev/null
+++ b/webAO/utils/tryUrls.ts
@@ -0,0 +1,20 @@
+import fileExists from './fileExists'
+import transparentPng from '../constants/transparentPng'
+const urlExtensionsToTry = [
+    '.png',
+    '.gif',
+    '.webp',
+    '.apng'
+]
+const tryUrls = async (url: string) => {
+    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