Change image extension priority

Sometimes, WebP icons won't load despite extensions.json clearly
defining it as the only extension used for all image data.

I suspect there's a race condition between fetching extensions.json,
parsing it into client, and checking what extension we should use to get
character icons during loading. Sometimes it correctly loads images,
sometimes it falls back and starts requesting PNG instead.

I couldn't precisely identify where it happens and what's the root
cause. As a workaround, this commit instead makes WebP the
first-priority extension and a fallback.

5 files changed, 12 insertions, 12 deletions

diff --git a/webAO/client.ts b/webAO/client.ts
index 94caf0cb..30067b80 100644
--- a/webAO/client.ts
+++ b/webAO/client.ts
@@ -214,10 +214,10 @@ class Client extends EventEmitter {
     loadResources;
     isLowMemory;
     this.playerlist = new Map();
-    this.charicon_extensions = [".png", ".webp"];
-    this.emote_extensions = [".gif", ".png", ".apng", ".webp", ".webp.static"];
-    this.emotions_extensions = [".png", ".webp"];
-    this.background_extensions = [".png", ".gif"];;
+    this.charicon_extensions = [".webp", ".png"];
+    this.emote_extensions = [".webp", ".png", ".apng", ".gif"];
+    this.emotions_extensions = [".webp", ".png"];
+    this.background_extensions = [".webp", ".png", ".apng", ".gif"];;
   }
 
   /**
diff --git a/webAO/client/fetchLists.ts b/webAO/client/fetchLists.ts
index 2f2fd595..4e32abc9 100644
--- a/webAO/client/fetchLists.ts
+++ b/webAO/client/fetchLists.ts
@@ -62,10 +62,10 @@ export const fetchExtensions = async () => {
   try {
     const extensiondata = await request(`${AO_HOST}extensions.json`);
     const allextensions = JSON.parse(extensiondata);
-    client.charicon_extensions = allextensions.charicon_extensions || [".png", ".webp"];
-    client.emote_extensions = allextensions.emote_extensions || [".gif", ".png", ".apng", ".webp", ".webp.static"];
-    client.emotions_extensions = allextensions.emotions_extensions || [".png", ".webp"];
-    client.background_extensions = allextensions.background_extensions || [".png", ".gif", ".webp", ".apng"];
+    client.charicon_extensions = allextensions.charicon_extensions || [".webp", ".png"];
+    client.emote_extensions = allextensions.emote_extensions || [".webp", ".png", ".apng", ".gif"];
+    client.emotions_extensions = allextensions.emotions_extensions || [".webp", ".png"];
+    client.background_extensions = allextensions.background_extensions || [".webp", ".png", ".apng", ".gif"];
     console.log("charicons "+client.charicon_extensions)
     console.log("emotes "+client.emote_extensions)
     console.log("emotions "+client.emotions_extensions)
diff --git a/webAO/client/handleCharacterInfo.ts b/webAO/client/handleCharacterInfo.ts
index 6bec813e..84fd6138 100644
--- a/webAO/client/handleCharacterInfo.ts
+++ b/webAO/client/handleCharacterInfo.ts
@@ -14,7 +14,7 @@ export const setupCharacterBasic = (chargs: string[], charid: number) => {
   if (chargs[0]) {
     img.alt = chargs[0];
     img.title = chargs[0];
-    const iconExt = client.charicon_extensions[0] || ".png";
+    const iconExt = client.charicon_extensions[0] || ".webp";
     img.src = `${AO_HOST}characters/${encodeURI(
       chargs[0],
     )}/char_icon${iconExt}`;
@@ -117,7 +117,7 @@ export const handleCharacterInfo = async (chargs: string[], charid: number) => {
   if (chargs[0]) {
     img.alt = chargs[0];
     img.title = chargs[0];
-    const iconExt = client.charicon_extensions[0] || ".png";
+    const iconExt = client.charicon_extensions[0] || ".webp";
     img.src = `${AO_HOST}characters/${encodeURI(
       chargs[0],
     )}/char_icon${iconExt}`;
diff --git a/webAO/dom/renderPlayerList.ts b/webAO/dom/renderPlayerList.ts
index 9087d949..c238f28b 100644
--- a/webAO/dom/renderPlayerList.ts
+++ b/webAO/dom/renderPlayerList.ts
@@ -24,7 +24,7 @@ export function renderPlayerList() {
     img.style.maxWidth = "60px";
     img.style.maxHeight = "60px";
     if (player.charName) {
-      const iconExt = client.charicon_extensions[0] || ".png";
+      const iconExt = client.charicon_extensions[0] || ".webp";
       img.src = `${AO_HOST}characters/${encodeURI(player.charName)}/char_icon${iconExt}`;
       img.alt = player.charName;
       img.title = player.charName;
diff --git a/webAO/utils/getAnimLength.js b/webAO/utils/getAnimLength.js
index ac673c27..a895f841 100644
--- a/webAO/utils/getAnimLength.js
+++ b/webAO/utils/getAnimLength.js
@@ -12,7 +12,7 @@ import { requestBuffer } from "../services/request";
  */
 
 const getAnimLength = async (url) => {
-  const extensions = [".gif", ".webp", ".apng"];
+  const extensions = [".webp", ".apng", ".gif"];
   for (const extension of extensions) {
     const urlWithExtension = url + extension;
     const exists = await fileExists(urlWithExtension);