From 04b741b133e468cdd5dce831bfaeed5cdea030d6 Mon Sep 17 00:00:00 2001
From: Martin Prokoph <motschen@midnightdust.eu>
Date: Wed, 18 Sep 2024 14:39:30 +0200
Subject: [PATCH] Improve reliability of the version selector

---
 src/components/VersionDropdown.astro | 96 +++++++++++++++-------------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/src/components/VersionDropdown.astro b/src/components/VersionDropdown.astro
index 6c5860a..e9ecb1f 100644
--- a/src/components/VersionDropdown.astro
+++ b/src/components/VersionDropdown.astro
@@ -3,59 +3,63 @@ import { Icon } from 'astro-icon/components'
 import { loaderList, versionList} from '../js/modversion.js'
 ---
 
-<div id="version-dropdown">
-  <div class="">
-    <div class="wrapper">
-      <label for="loader-selector" class="sr-only">Select the Modloader</label>
-      <select
-        name="loader-selector"
-        id="loader-selector"
-        class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
-        aria-label="Choose the Modloader">
-        { loaderList.map((loader) =>
-          <option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
-        )}
-      </select>
-      <label for="version-selector" class="sr-only">Select the Version</label>
-      <select
-        name="version-selector"
-        id="version-selector"
-        class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
-        aria-label="Choose the Version">
-        { versionList.map((version) =>
-          <option value={version}>{version}</option>
-        )}
-        <Icon name="ion:copy-outline"></Icon>
-      </select>
-    </div>
+<version-dropdown>
+  <div class="wrapper">
+    <label for="loader-selector" class="sr-only">Select the Modloader</label>
+    <select
+      name="loader-selector"
+      id="loader-selector"
+      class="selector cursor-pointer rounded-md pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
+      aria-label="Choose the Modloader">
+      { loaderList.map((loader) =>
+        <option value={loader}>{loader.charAt(0).toUpperCase() + loader.replace("neoforge", "NeoForge").slice(1)}</option>
+      )}
+    </select>
+    <label for="version-selector" class="sr-only">Select the Version</label>
+    <select
+      name="version-selector"
+      id="version-selector"
+      class="selector cursor-pointer rounded-md ml-2 pl-3 pr-2 py-1.5 border-2 dark:border-green-300 dark:bg-neutral-800 dark:text-white focus-visible:outline-none"
+      aria-label="Choose the Version">
+      { versionList.map((version) =>
+        <option value={version}>{version}</option>
+      )}
+      <Icon name="ion:copy-outline"></Icon>
+    </select>
   </div>
-</div>
+</version-dropdown>
 
 <script>
 import { getResultingVersion, setGameVersion, setLoaderVersion } from "../js/modversion";
-  // Get the gradle.properties code block
-  const versionLabel = document.getElementById("midnightlib-version");
-  // Get the 2 selectors defined above
-  const loaderSelector = document.getElementById("loader-selector");
-  const versionSelector = document.getElementById("version-selector");
+// Define the behaviour for our new type of HTML element.
+class VersionDropdown extends HTMLElement {
+  connectedCallback() {
+    // Get the gradle.properties code block
+    const versionLabel = document.getElementById("midnightlib-version");
+    // Get the 2 selectors defined above
+    const loaderSelector = document.getElementById("loader-selector");
+    const versionSelector = document.getElementById("version-selector");
 
-  loaderSelector?.addEventListener("change", async (e) => {
-    const {
-      target: { value }, // Returns the current loader string
-    } = e;
+    loaderSelector?.addEventListener("change", async (e) => {
+      const {
+        target: { value }, // Returns the current loader string
+      } = e;
 
-    setLoaderVersion(value);
-    if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
-  });
-  versionSelector?.addEventListener("change", async (e) => {
-    const {
-      target: { value }, // Returns the current version string
-    } = e;
-
-    setGameVersion(value);
-    if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
-  });
+      setLoaderVersion(value);
+      if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
+    });
+    versionSelector?.addEventListener("change", async (e) => {
+      const {
+        target: { value }, // Returns the current version string
+      } = e;
 
+      setGameVersion(value);
+      if (versionLabel) versionLabel.innerText = `midnightlib_version = `+getResultingVersion();
+    });
+  }
+}
+// Tell the browser to use our VersionDropdown class for <version-dropdown> elements.
+customElements.define('version-dropdown', VersionDropdown);
 </script>
 
 <style lang="scss" is:global>