Open/close about dialog

static/about.mts

@@ -1,17 +1,27 @@
-import { findImageOrFail, findSpanOrFail } from "./dom.mjs";
+import { Dialog } from "./dialog.mjs";
+import { findAnchorOrFail, findButtonOrFail, findDialogOrFail, findImageOrFail, findSpanOrFail } from "./dom.mjs";
 
-async function populateVersion(versionSelector: string) {
-    const versionParagraph = findSpanOrFail(document.body, versionSelector);
+const openButton = findAnchorOrFail(document.body, "#aboutLink");
+const dialog = findDialogOrFail(document.body, "#about")
+const versionParagraph = findSpanOrFail(dialog, "#version");
+const charlotteImage = findImageOrFail(dialog, "#charlotteAvatar");
+const kioImage = findImageOrFail(dialog, "#kioAvatar");
+const closeButton = findButtonOrFail(dialog, ".close");
+
+const aboutDialog = new Dialog(dialog);
+
+openButton.addEventListener("click", e => aboutDialog.open());
+closeButton.addEventListener("click", e => aboutDialog.close());
+
+populateVersion();
+populateUsers();
+
+async function populateVersion() {
     versionParagraph.innerText = await fetch("/api/about/version").then(r => r.text());
 }
 
-async function populateUsers(charlotteSelector: string, kioSelector: string) {
-    const charlotteImage = findImageOrFail(document.body, charlotteSelector);
-    const kioImage = findImageOrFail(document.body, kioSelector);
+async function populateUsers() {
     const { charlotte, kio } = await fetch("/api/about/nekomata_avatars").then(r => r.json());
     if (charlotte) charlotteImage.src = charlotte;
     if (kio) kioImage.src = kio;
 }
-
-populateVersion("#version");
-populateUsers("#charlotteAvatar", "#kioAvatar");

static/crossroad.html

@@ -17,7 +17,8 @@
             <header class="separator-bottom margin-large-bottom">
                 <div class="flex-row">
                     <h1>FeDirect</h1>
-                    <p class="margin-auto-top">&ThickSpace;By Nekomata</p>
+                    <p class="margin-auto-top">&ThickSpace;<a id="aboutLink" href="#"
+                            title="About FeDirect & Nekomata">By Nekomata</a></p>
                 </div>
                 <img src="/static/nekomata_small.png" alt="Nekomata Logo" class="logo" />
             </header>
@@ -148,6 +149,7 @@ Unchecking this is not recommended, and this option only exists for exceptional
                 </center>
                 <img src="/static/nekomata_small.png" alt="Nekomata Logo" class="absolute-centered xl-size-max" />
             </div>
+            <button class="close">Close</button>
         </center>
     </dialog>
     <dialog id="spinner"><span class="spinner"></span></dialog>

static/dom.mts

@@ -1,6 +1,13 @@
 // I would've LOVED to use generics for this but unfortunately that's not possible.
 // Type safety, but at what cost... >~< thanks TypeScript
 
+export function findAnchorOrFail(on: Element, selector: string): HTMLAnchorElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLAnchorElement))
+        throw new Error(`${selector} isn't an a`);
+    return element;
+}
+
 export function findDivOrFail(on: Element, selector: string): HTMLDivElement {
     const element = on.querySelector(selector);
     if (!(element instanceof HTMLDivElement))