Add WispServerTiming.ts, begin work on a dropdown that shows wisp servers and their ping

src/components/SettingsContent/ProxyTab.astro

@@ -29,6 +29,11 @@ const transportsList = [
   { name: "Libcurl", value: "/libcurl/index.mjs" },
   { name: "Bare", value: "/baremod/index.mjs" },
 ];
+
+const wispURLList = [
+  { name: "Alu (US)", value: "wss://aluu.xyz/wisp/" },
+  { name: "Nebula (US)", value: "wss://nebulaproxy.io/wisp/" }
+];
 ---
 
 <div class="settings-container">
@@ -45,8 +50,8 @@ const transportsList = [
     <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
   </div>
   <div class="setting__wisp_url">
-    <label aria-label="Wisp URL" for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
+    <label aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
-    <Input height="50px" inputName="wisp-url" />
+    <Dropdown buttonNameDefault="" dropdownList={wispURLList} localStorageKey="alu__selectedWisp" id="dropdown__wisp-url" />
   </div>
   <div class="setting__bare_url">
     <label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>

src/components/ts/WispServerTiming.ts

@@ -0,0 +1,49 @@
+export async function testWispServers(servers: WispServer[]): Promise<WispData[]> {
+  let wispData: WispData[] = [];
+
+  for (const server of servers) {
+    let start = performance.now();
+
+    try {
+      await new Promise((resolve, reject) => {
+        let socket = new WebSocket(server.url);
+
+        socket.onopen = () => {
+          let end = performance.now();
+          console.log(`Connected to ${server.url} in ${end - start}ms`);
+          let data = {
+            server: server,
+            time: end - start
+          };
+          wispData.push(data);
+          socket.close();
+          resolve(null);
+        };
+
+        socket.onerror = (error) => {
+          reject(error);
+        };
+      });
+    } catch (error) {
+      console.error(`Failed to connect to ${server.url}`, error);
+    }
+  }
+
+  if (wispData.length === servers.length) {
+    return wispData;
+  } else {
+    throw new Error('Failed to connect to all servers');
+  }
+}
+
+
+window.wispData = await testWispServers([
+  {
+    url: 'wss://aluu.xyz/wisp/'
+  },
+  {
+    url: 'wss://nebulaproxy.io/wisp/'
+  },
+])
+
+console.log(window.wispData);

src/pages/[lang]/index.astro

@@ -60,6 +60,7 @@ export function getStaticPaths() {
         </div>
       </div>
     </section>
+    <script src="@components/ts/WispServerTiming.ts"></script>
   </main>
   <ProxyRegistrar />
   <script>

src/pages/[lang]/settings.astro

@@ -63,12 +63,12 @@ export function getStaticPaths() {
     };
   </script>
   <script is:inline>
-    loadedContentStorage = {};
+    let loadedContentStorage = {};
-    window.currentlySelectedTab;
+    let currentlySelectedTab;
     function settingsLoad() {
       document.addEventListener("astro:before-swap", () => {
         // Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
-        window.currentlySelectedTab = "";
+        currentlySelectedTab = "";
         document.removeEventListener("setting-tabChange", determineListener);
       });
       Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
@@ -84,8 +84,8 @@ export function getStaticPaths() {
       });
 
       function loadContent(tabID) {
-        if (window.currentlySelectedTab == tabID) return;
+        if (currentlySelectedTab == tabID) return;
-        else window.currentlySelectedTab = tabID;
+        else currentlySelectedTab = tabID;
         let currentContent = document.getElementById("current-content");
         if (currentContent) {
           currentContent.style.opacity = "0";
@@ -177,16 +177,19 @@ export function getStaticPaths() {
         }
       }
 
-      function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
+      function applyDropdownEventListeners(dropdown, optionalCallback) {
-        Array.from(item.children).forEach((item) => {
+        let dropdownSibling = document.getElementById(dropdown.id + "-menu");
-          item.onclick = () => {
+        let localStorageItem = dropdown.dataset.localStorageKey;
+        Array.from(dropdownSibling.children).forEach((child) => {
+          child.onclick = () => {
             let localStorageItemContent = {
-              name: item.innerText,
+              name: child.innerText,
-              value: item.dataset.setting,
+              value: child.dataset.setting,
             };
             localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
-            applySavedLocalStorage(localStorageItem, dropdownID);
+            applySavedLocalStorage(localStorageItem, dropdown.id);
-            closeDropdown(item.parentElement.id);
+            closeDropdown(dropdownSibling.id);
+            
             if (typeof optionalCallback == "function") {
               optionalCallback();
             }
@@ -233,10 +236,11 @@ export function getStaticPaths() {
           }
           applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
           applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
-          let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
+
-          let languageDropdown = document.getElementById("dropdown__selected-language-menu");
+          let themeDropdown = document.getElementById("dropdown__selected-theme");
-          applyDropdownEventListeners(themeDropdown, "dropdown__selected-theme", "alu__selectedTheme", changeTheme);
+          let languageDropdown = document.getElementById("dropdown__selected-language");
-          applyDropdownEventListeners(languageDropdown, "dropdown__selected-language", "alu__selectedLanguage", navigateToNewLangaugePage);
+          applyDropdownEventListeners(themeDropdown, changeTheme);
+          applyDropdownEventListeners(languageDropdown, navigateToNewLangaugePage);
         };
       }
 
@@ -328,37 +332,38 @@ export function getStaticPaths() {
           applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
           applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
           applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
-          let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
+          // Dropdowns
-          let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
+          let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
-          let openWithDropdown = document.getElementById("dropdown__open-with-menu");
+          let searchEngineDropdown = document.getElementById("dropdown__search-engine");
-          let currentTransportDropdown = document.getElementById("dropdown__transport-menu");
+          let openWithDropdown = document.getElementById("dropdown__open-with");
+          let currentTransportDropdown = document.getElementById("dropdown__transport");
+          let wispURLDropdown = document.getElementById("dropdown__wisp-url");
+
+          // Inputs
           let searxngUrlInput = document.getElementById("searxng-url-input");
-          let wispURLInput = document.getElementById("wisp-url-input");
           let bareURLInput = document.getElementById("bare-url-input");
           let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
           if (savedSearxngUrl != null) {
             if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
             searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
           }
-          const useWss = location.protocol == "https:";
+          // const useWss = location.protocol == "https:";
-          const webSocketProtocol = useWss ? "wss://" : "ws://";
+          // const webSocketProtocol = useWss ? "wss://" : "ws://";
-          let savedWispUrl = localStorage.getItem("alu__wispUrl");
+          // let savedWispUrl = localStorage.getItem("alu__wispUrl");
-          if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
+          // if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
           let savedBareUrl = localStorage.getItem("alu__bareUrl");
           if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
-          wispURLInput.value = localStorage.getItem("alu__wispUrl");
+
           bareURLInput.value = localStorage.getItem("alu__bareUrl");
           // Proxy settings
-          applyInputListeners(searxngUrlInput, "alu__searxngUrl");
+          [selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
-          applyInputListeners(wispURLInput, "alu__wispUrl");
+            applyDropdownEventListeners(dropdown);
-          applyInputListeners(bareURLInput, "alu__bareUrl");
-
-          [selectedProxyDropdown, openWithDropdown, currentTransportDropdown].forEach((dropdown) => {
-            let dropdownButton = document.getElementById(dropdown.id.replace("-menu", ""));
-            applyDropdownEventListeners(dropdown, dropdownButton.id, dropdownButton.dataset.localStorageKey);
           });
-          applyDropdownEventListeners(searchEngineDropdown, "dropdown__search-engine", "alu__search_engine", checkSearxng);
+          applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
           checkSearxng();
+
+          applyInputListeners(searxngUrlInput, "alu__searxngUrl");
+          applyInputListeners(bareURLInput, "alu__bareUrl");          
         } else if (event.detail == "setting-tab-customization") {
           setupCustomizationSettings();
         } else if (event.detail == "setting-tab-cloaking") {

src/types.d.ts

@@ -12,6 +12,7 @@ interface Window {
   URLPattern: URLPattern | null;
   // Why is this not already on Window?
   eval(string): void;
+  wispData: WispData[];
 }
 
 type ExtType = "serviceWorker" | "theme" | "page";
@@ -67,3 +68,12 @@ type GameMetadata = {
 type GameList = {
   [key: string]: GameMetadata;
 };
+
+type WispServer = {
+  url: string,
+}
+
+type WispData = {
+  server: WispServer,
+  time: number,
+}