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 94caf0c..30067b8 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 2f2fd59..4e32abc 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 6bec813..84fd613 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 9087d94..c238f28 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 ac673c2..a895f84 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);