Merge pull request #111 from caleb-mabry/double-character

Fix overlapping characters

4 files changed, 25 insertions, 50 deletions

diff --git a/public/client.html b/public/client.html
index dc924fb..6d3810a 100644
--- a/public/client.html
+++ b/public/client.html
@@ -83,40 +83,22 @@
 						<img id="client_court_pro" onerror="imgError(this);">
 					</div>
 					<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);">
+						<img id="client_def_pair_img" 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);">
+						<img id="client_def_char_img" 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);">
+						<img id="client_wit_pair_img" 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);">
+						<img id="client_wit_char_img" 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);">
+						<img id="client_pro_pair_img" 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);">
+						<img id="client_pro_char_img" onerror="charError(this);">
 					</div>
 					<img id="client_def_bench" class="client_bench">
 					<img id="client_wit_bench" class="client_bench">
@@ -125,16 +107,10 @@
 				<div id="client_classicview">
 				<img id="client_court_classic" 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);">
+					<img id="client_pair_img" onerror="charError(this);">
 				</div>
 				<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);">
+					<img id="client_char_img" onerror="charError(this);">
 				</div>
 				<img id="client_bench_classic" class="client_bench">	
 				</div>
diff --git a/webAO/client.js b/webAO/client.js
index 8bac1cc..34a1b4b 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -28,6 +28,7 @@ import fileExists from './utils/fileExists.js';
 import queryParser from './utils/queryParser.js';
 import getAnimLength from './utils/getAnimLength.js';
 import getResources from './utils/getResources.js';
+import transparentPng from './constants/transparentPng';
 
 const version = process.env.npm_package_version;
 
@@ -44,7 +45,6 @@ const THEME = theme || 'default';
 
 const UPDATE_INTERVAL = 60;
 
-const transparentPNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 /**
  * Toggles AO1-style loading using paginated music packets for mobile platforms.
  * The old loading uses more smaller packets instead of a single big one,
@@ -2083,7 +2083,8 @@ class Viewport {
       const baseEffectUrl = `${AO_HOST}themes/default/effects/`;
       fg.src = `${baseEffectUrl}${encodeURI(this.chatmsg.effects[0].toLowerCase())}.webp`;
     } else {
-      fg.src = transparentPNG;
+      
+      fg.src = transparentPng;
     }
 
     const soundChecks = ['0', '1', '', undefined];
@@ -2599,7 +2600,7 @@ window.changeCharacter = changeCharacter;
  */
 export function charError(image) {
   console.warn(`${image.src} is missing from webAO`);
-  image.src = transparentPNG;
+  image.src = transparentPng;
   return true;
 }
 window.charError = charError;
diff --git a/webAO/client/setEmote.js b/webAO/client/setEmote.js
index 16c95be..4bbaab7 100644
--- a/webAO/client/setEmote.js
+++ b/webAO/client/setEmote.js
@@ -1,3 +1,4 @@
+import transparentPng from '../constants/transparentPng';
 import fileExistsSync from '../utils/fileExistsSync';
 
 /**
@@ -10,22 +11,18 @@ const setEmote = (AO_HOST, client, charactername, emotename, prefix, pair, side)
   const characterFolder = `${AO_HOST}characters/`;
   const acceptedPositions = ['def', 'pro', 'wit'];
   const position = acceptedPositions.includes(side) ? `${side}_` : '';
+  const emoteSelector = document.getElementById(`client_${position}${pairID}_img`)
+  const extensionsMap = [
+    '.gif',
+    '.png',
+    '.apng',
+    '.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`);
-  const extensionsMap = {
-    '.gif': gif_s,
-    '.png': png_s,
-    '.apng': apng_s,
-    '.webp': webp_s,
-  };
-
-  for (const [extension, htmlElement] of Object.entries(extensionsMap)) {
+  for (const extension of extensionsMap) {
     // Hides all sprites before creating a new sprite
     if (client.lastChar !== client.chatmsg.name) {
-      htmlElement.src = transparentPNG;
+      emoteSelector.src = transparentPng;
     }
     let url;
     if (extension === '.png') {
@@ -35,8 +32,8 @@ const setEmote = (AO_HOST, client, charactername, emotename, prefix, pair, side)
     }
     const exists = fileExistsSync(url);
     if (exists) {
-      htmlElement.src = url;
-      return;
+      emoteSelector.src = url;
+      break;
     }
   }
 };
diff --git a/webAO/constants/transparentPng.js b/webAO/constants/transparentPng.js
new file mode 100644
index 0000000..f78dae0
--- /dev/null
+++ b/webAO/constants/transparentPng.js
@@ -0,0 +1 @@
+export default 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
\ No newline at end of file