From e86b79b26e7496a6b842e2695be776088531e80a Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Mon, 20 Jan 2025 19:36:38 +0100 Subject: [PATCH] Ship of theseus for commit 97fc0eb --- static/crossroad.css | 18 ++++++++++-------- static/crossroad.html | 22 ++++++++++++---------- static/crossroad.mts | 24 +++++++++++++++--------- static/dom.mts | 14 ++++++++++++++ static/down_arrow.svg | 1 + 5 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 static/down_arrow.svg diff --git a/static/crossroad.css b/static/crossroad.css index 811fe80..86c25f2 100644 --- a/static/crossroad.css +++ b/static/crossroad.css @@ -58,10 +58,15 @@ abbr[title] { text-align: start; } -pre#path { +.inline-block { display: inline-block; } +.align-content-center { + justify-content: center; + align-items: center; +} + .flex-vcenter { display: flex; flex-direction: column; @@ -80,8 +85,6 @@ pre#path { .flex-row { display: flex; - justify-content: center; - align-items: center;; flex-direction: row; } @@ -123,6 +126,10 @@ pre#path { min-height: 100%; } +.medium-height { + height: var(--medium); +} + .separator-bottom { border-bottom: solid 1px var(--transparent-black); } @@ -161,14 +168,9 @@ pre#path { } .inlineIcon { - height: var(--medium); vertical-align: text-top; } .buttonPanel>* { margin-top: min(var(--xl), 6vh); -} - -.hidden { - display: none; } \ No newline at end of file diff --git a/static/crossroad.html b/static/crossroad.html index 570d751..0bbf31e 100644 --- a/static/crossroad.html +++ b/static/crossroad.html @@ -22,16 +22,18 @@ -
-
- You're about to go to 
.

-                    
-                    
-                

-                    

-                    

-                    
-                

+            

+                

+                    

+                        You're about to go to
+                        
.

+                        
+                        
You currently don't have any instances. You should add one!

+                        

+                        

+                        
+                    

+                

                 

                     

                         

diff --git a/static/crossroad.mts b/static/crossroad.mts
index 0cbf049..2e6ee32 100644
--- a/static/crossroad.mts
+++ b/static/crossroad.mts
@@ -1,5 +1,5 @@
 import { initializeAddInstanceFlow } from "./add_instance_flow.mjs";
-import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail } from "./dom.mjs";
+import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail } from "./dom.mjs";
 import knownSoftware from "./known_software.mjs";
 import storageManager from "./storage_manager.mjs";
 
@@ -39,13 +39,22 @@ export const {
     }
     createInstanceSelectOptions();
     storageManager.addSaveCallback(createInstanceSelectOptions);
+    updateNoInstanceHint();
+    storageManager.addSaveCallback(updateNoInstanceHint);
+
+    findPreOrFail(document.body, "#path").innerText = getTargetPath();
+
     return initializeAddInstanceFlow(detailsDialog, addDialog)
 })();
 
+function updateNoInstanceHint() {
+    findParagraphOrFail(document.body, "#no-instance").style.display =
+        storageManager.storage.instances.length > 0
+            ? "none"
+            : "";
+}
+
 function createInstanceSelectOptions() {
-    if (storageManager.storage.instances.length > 0) {
-        document.querySelector("#no-instance")?.classList.add("hidden")
-    }
     instanceSelectForm.replaceChildren(); // Erase all child nodes
     for (const instance of storageManager.storage.instances) {
         const div = document.createElement("div");
@@ -62,7 +71,7 @@ function createInstanceSelectOptions() {
             const img = new Image();
             img.src = instance.iconURL;
             img.alt = `${instance.name} icon`;
-            img.className = "inlineIcon";
+            img.className = "inlineIcon medium-height";
             label.append(img, " ");
         }
         const small = document.createElement("small");
@@ -132,7 +141,4 @@ function redirect(to: string) {
     location.href = url.toString();
 }
 
-document.querySelector("#path")!.innerHTML = getTargetPath()
-if (storageManager.storage.instances.length === 0) {
-    document.querySelector("#no-instance")?.classList.remove("hidden")
-}
\ No newline at end of file
+export { storageManager };
\ No newline at end of file
diff --git a/static/dom.mts b/static/dom.mts
index 7a7aff5..53d4c36 100644
--- a/static/dom.mts
+++ b/static/dom.mts
@@ -1,6 +1,20 @@
 // 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 findPreOrFail(on: Element, selector: string): HTMLPreElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLPreElement))
+        throw new Error(`${selector} isn't a pre`);
+    return element;
+}
+
+export function findParagraphOrFail(on: Element, selector: string): HTMLParagraphElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLParagraphElement))
+        throw new Error(`${selector} isn't a paragraph`);
+    return element;
+}
+
 export function findDialogOrFail(on: Element, selector: string): HTMLDialogElement {
     const element = on.querySelector(selector);
     if (!(element instanceof HTMLDialogElement))
diff --git a/static/down_arrow.svg b/static/down_arrow.svg
new file mode 100644
index 0000000..875e948
--- /dev/null
+++ b/static/down_arrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file