Final fix for overlapping chars

2 files changed, 20 insertions, 47 deletions

diff --git a/public/client.html b/public/client.html
index dc924fb..e11d662 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" 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" 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" 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" 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" onerror="charError(this);">
 				</div>
 				<img id="client_bench_classic" class="client_bench">	
 				</div>
diff --git a/webAO/client/setEmote.js b/webAO/client/setEmote.js
index 16c95be..862e81a 100644
--- a/webAO/client/setEmote.js
+++ b/webAO/client/setEmote.js
@@ -10,22 +10,19 @@ 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 transparentPNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
-  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;
     }
   }
 };