Merge pull request #205 from Troid-Tech/fix-missing-desks

Fix missing desks

webAO/utils/fileExists.ts

@@ -0,0 +1,19 @@
+export default async function fileExists(url: string): Promise<boolean> {
+    return new Promise((resolve) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('HEAD', url);
+        xhr.onload = function checkLoad() {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            }
+        };
+        xhr.onerror = function checkError() {
+            resolve(false);
+        };
+        xhr.send(null);
+    });
+}

webAO/utils/filesExist.ts

@@ -0,0 +1,28 @@
+import fileExists from "./fileExists";
+
+/**
+ * This function takes a list of urls and returns the first one that exists.
+ * It checks all the URLs in parallel.
+ * @param urls the list of URLs to check
+ * @returns either the first URL that exists or null if none were found
+ */
+export default async function filesExist(urls: string[]): Promise<string | null> {
+    const promises = urls.map(async (url) => {
+        if (await fileExists(url)) {
+            return url;
+        }
+        return null;
+    });
+
+    // Run all in parallel
+    const results = await Promise.all(promises);
+
+    // Find the first URL that exists (not null) or return null if none exist
+    for (const result of results) {
+        if (result !== null) {
+            return result;
+        }
+    }
+
+    return null; // None of the URLs exist
+}

webAO/utils/findImgSrc.ts

@@ -0,0 +1,19 @@
+import filesExist from "./filesExist";
+import transparentPng from '../constants/transparentPng'
+
+/**
+ * This function takes a list of urls and returns the first one that exists.
+ * If none is found, return a transparent png.
+ * The function will always return a value that is appriopriate for an img src.
+ * @param urls The list of urls to try
+ * @returns The image source of the first url that exists, or a transparent png if none exist
+ */
+export default async function findImgSrc(urls: string[]): Promise<string> {
+    return filesExist(urls).then((url) => {
+        if (url !== null) {
+            return url;
+        }
+        // If none of the images exist, return a transparent png
+        return transparentPng;
+    });
+}

webAO/viewport/utils/setSide.ts

@@ -2,7 +2,7 @@ import { positions } from '../constants/positions'
 import { AO_HOST } from '../../client/aoHost'
 import { client } from '../../client'
 import tryUrls from '../../utils/tryUrls';
-import fileExists from '../../utils/fileExists';
+import findImgSrc from '../../utils/findImgSrc';
 
 /**
  * Changes the viewport background based on a given position.
@@ -21,7 +21,7 @@ export const set_side = async ({
 }) => {
     const view = document.getElementById("client_fullview")!;
     let bench: HTMLImageElement;
-    if (['def','pro','wit'].includes(position)) {
+    if (['def', 'pro', 'wit'].includes(position)) {
         bench = <HTMLImageElement>(
             document.getElementById(`client_${position}_bench`)
         );
@@ -57,13 +57,14 @@ export const set_side = async ({
     } else {
         court.src = await tryUrls(client.viewport.getBackgroundFolder() + bg);
     }
-
-
+
     if (showDesk === true && desk) {
-        const deskFilename = (await fileExists(client.viewport.getBackgroundFolder() + desk.ao2))
-            ? desk.ao2
-            : desk.ao1;
-        bench.src = client.viewport.getBackgroundFolder() + deskFilename;
+        const bg_folder = client.viewport.getBackgroundFolder();
+        const urls_to_try = [
+            bg_folder + desk.ao2,
+            bg_folder + desk.ao1,
+        ];
+        bench.src = await findImgSrc(urls_to_try);
         bench.style.opacity = "1";
     } else {
         bench.style.opacity = "0";