It's closeee...

src/components/catalog/InstalledThemes.astro

@@ -1,19 +1,23 @@
 <div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center">
-    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+    <div id="main-theme" class="rounded-3xl border border-text-color border-2 bg-navbar-color w-64 flex flex-col cursor-pointer">
-        <div class="w-full" id="main-theme">
+        <div class="w-full">
-            <img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl"/>
+            <img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl" loading="eager" />
         </div>
         <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
             Classic Nebula
         </div>
     </div>
 </div>
-<div class="w-0 h-0 visibility-none hidden"> <asset-loader /> </div>
+<div class="w-0 h-0 visibility-none hidden"> 
+    <asset-loader /> 
+</div>
+
 <script>
-    import { SettingsVals } from "@utils/values";
+    import { Elements } from "@utils/index";
     import { Marketplace } from "@utils/marketplace";
-    const mp = Marketplace.getInstances().next().value as Marketplace;
+    import { SettingsVals } from "@utils/values";
-    type Assets = {
+
+    type Item = {
         description: string,
         image: string,
         package_name: string,
@@ -24,8 +28,9 @@
         title: string,
         type: string,
         version: string
-    } 
+    }
-    async function getItem(item: any) {
+
+    const getItem = async (item: any) => {
         try {
             const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
             const data = await res.json();
@@ -37,88 +42,108 @@
         }
     }
 
-    async function getAssets() {
+    const constructElements = async (item: Item, mainTheme: HTMLDivElement, parent: HTMLDivElement, marketplace: Marketplace) => {
-        const items = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.themes)) || [];
+        const main = document.createElement("div");
-        const promises = items.map(getItem);
+        main.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer", "border-text-color");
-        const dataArray = await Promise.all(promises);
+        main.dataset.name = item.package_name
-        const accumulatedData = dataArray.filter((data) => data !== null);
-        return accumulatedData;
-    }
 
-    const attachThemeEvent = (elem: HTMLElement, def: boolean | Assets) => {
+        const click = document.createElement("div");
-        elem.addEventListener("click", async () => {
+        click.classList.add("w-full"); 
-            if (def === true || def === false) return mp.theme({ type: "remove" })
-            await mp.theme({ type: "normal", payload: def.payload, sources: { video: def.background_video, bg: def.background_image }, name: def.package_name })
-        });
-    };
 
-    const attachDeleteEvent = (elem: HTMLElement, mainElem: HTMLElement, parentElem: HTMLElement, asset: Assets) => {
+        const img = document.createElement("img");
-        elem.addEventListener("click", async () => {
+        img.classList.add("aspect-[16/9]", "rounded-t-3xl");
-            await mp.uninstallTheme({ name: asset.package_name });
+        img.src = `/packages/${item.package_name}/${item.image}`;
-            await mp.theme({ type: 'remove' });
+        img.alt = `${item.type}-${item.package_name}`;
-            parentElem.removeChild(mainElem);
+        img.loading = "lazy";
-        });
-    }
-    
-    const createElem = (asset: Assets) => {
-        const parent = document.getElementById("parent");
-        const mainDiv = document.createElement("div");
-        mainDiv.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer");
 
-        const clickDiv = document.createElement("div");
+        const info = document.createElement("div");
-        clickDiv.classList.add("w-full");
+        info.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
-        attachThemeEvent(clickDiv, asset);
-        const imgDiv = document.createElement("img");
-        imgDiv.classList.add("aspect-[16/9]", "rounded-t-3xl");
-        imgDiv.src = `/packages/${asset.package_name}/${asset.image}`;
-        imgDiv.alt = `${asset.type}-${asset.title}`;
-        clickDiv.appendChild(imgDiv);
 
-        const infoDiv = document.createElement("div");
-        infoDiv.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
         const infoTitle = document.createElement("p");
         infoTitle.classList.add("text-2xl");
-        infoTitle.innerHTML = asset.title;
+        infoTitle.innerHTML = item.title;
 
-        const elemInfoMain = document.createElement("div");
+        const infoInner = document.createElement("div");
-        elemInfoMain.classList.add("flex", "flex-row");
+        infoInner.classList.add("flex", "flex-row");
-        const deleteButton = document.createElement("div");
-        deleteButton.classList.add("h-8", "w-8", "cursor-pointer");
-        attachDeleteEvent(deleteButton, mainDiv, parent!, asset);
-        //FUCK SVG's
-        const deleteButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`
-        deleteButton.innerHTML= deleteButtonSVG;
-        elemInfoMain.appendChild(deleteButton);
 
-        const openButton = document.createElement("a");
+        const infoInnerDelete = document.createElement("div");
-        openButton.classList.add("h-8", "w-8", "cursor-pointer");
+        infoInnerDelete.classList.add("h-8", "w-8", "cursor-pointer");
-        openButton.href = `../catalog/package/${asset.package_name}`
+        // This is cursed yes. SVG's SUUUCK
-        const openButtonSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`
+        infoInnerDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`; 
-        openButton.innerHTML = openButtonSVG;
-        elemInfoMain.appendChild(openButton);
 
-        infoDiv.appendChild(elemInfoMain);
+        const infoInnerOpen = document.createElement("a");
-        infoDiv.appendChild(infoTitle);
+        infoInnerOpen.classList.add("h-8", "w-8", "cursor-pointer");
+        infoInnerOpen.href = `../catalog/package/${item.package_name}`;
+        infoInnerOpen.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`;
+
+        click.appendChild(img);
+        infoInner.appendChild(infoInnerDelete);
+        infoInner.appendChild(infoInnerOpen);
+        info.appendChild(infoTitle);
+        info.appendChild(infoInner);
+        main.appendChild(click);
+        main.appendChild(info);
+        parent.appendChild(main);
+
+        Elements.attachEvent(mainTheme, "click", () => {
+            main.classList.remove("border", "border-2");
+            mainTheme.classList.add("border", "border-2");
+            marketplace.theme({ type: 'remove' });
+        });
+
+        Elements.attachEvent(click, "click", async () => {
+            mainTheme.classList.remove("border", "border-2");
+            main.classList.add("border-2", "border");
+            await marketplace.theme(
+                { 
+                    type: 'normal', 
+                    payload: item.payload, 
+                    sources: {
+                        video: item.background_video,
+                        bg: item.background_image
+                    },
+                    name: item.package_name
+                }
+            );
+        });
+
+        Elements.attachEvent(infoInnerDelete, "click", async () => {
+            main.classList.remove("border", "border-2");
+            mainTheme.classList.add("border-2", "border");
+            await marketplace.uninstallTheme({ name: item.package_name });
+            parent.removeChild(main);
+            await marketplace.theme({ type: 'remove' });
+        });
         
-
+        const themeName = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.name);
-        mainDiv.appendChild(clickDiv);
+        if (themeName !== null && main.dataset.name === themeName) {
-        mainDiv.appendChild(infoDiv);
+            mainTheme.classList.remove("border-2", "border");
-        parent?.appendChild(mainDiv);
+            main.classList.add("border-2", "border");
-        console.log(mainDiv);
-    }
-    
-    //I don't actually want this to run on every page but defining a custom component is an easy way around it.
-    class AssetLoader extends HTMLElement {
-        constructor() {
-            super();
-            (async function() {
-                const mainElem = document.getElementById("main-theme");
-                try { attachThemeEvent(mainElem!, true) } catch(_) {}
-                const assets = await getAssets();
-                console.log(assets);
-                assets.map((asset) => { createElem(asset); });
-            })();
         }
     }
-    customElements.define('asset-loader', AssetLoader);
+
+    const init = async () => {
+        await Marketplace.ready();
+        const mp = Marketplace.getInstances().next().value!;
+        const els = Elements.select([
+            { type: 'id', val: 'main-theme' },
+            { type: 'id', val: 'parent' }
+        ]);
+        const itemsJSON = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.themes)) || [];
+        const itemPromises = itemsJSON.map(getItem);
+        const itemsArray = await Promise.all(itemPromises);
+        return {
+            items: itemsArray.filter((data) => data !== null),
+            elements: els,
+            marketplace: mp
+        }
+    }
+
+    Elements.createCustomElement("asset-loader", async () => {
+        const { items, elements, marketplace } = await init();
+        const mainTheme = Elements.exists<HTMLDivElement>(await elements.next()); 
+        const parentElem = Elements.exists<HTMLDivElement>(await elements.next());
+        const promises = items.map(item => constructElements(item, mainTheme, parentElem, marketplace));
+        await Promise.all(promises);
+    });
 </script>

src/components/settings/Loader.astro

@@ -4,6 +4,7 @@
     import { Settings } from "@utils/settings";
     import { log } from "@utils/index";
     import { Marketplace } from "@utils/marketplace";
+    import { SettingsVals } from "@utils/values";
     const titleText = ` 
      _   _      _           _         ____                  _               
     | \\ | | ___| |__  _   _| | __ _  / ___|  ___ _ ____   _(_) ___ ___  ___ 
@@ -13,7 +14,7 @@
     `;
     const info = "Hello developer or curious individual & welcome to the console! \nThere isn't a whole lot here for you unless you have run into an error.";
     const sysInfo = `In which case please include the info below when opening the issue: \n\nOS: ${navigator.platform} \nBrowser: ${navigator.userAgent} \nService workers: ${"serviceWorker" in navigator ? "Yes" : "No"}`
-    const init = async () => {
+    const init = async (): Promise<Marketplace> => {
         log({ type: 'normal', bg: false, prefix: false }, titleText);
         log({ type: 'normal', bg: true, prefix: false }, info);
         log({ type: 'normal', bg: true, prefix: false }, sysInfo);
@@ -24,25 +25,43 @@
         await checkProxyScripts();
         const conn = await createBareMuxConn("/baremux/worker.js");
         const sw = new SW(conn);
-        new Marketplace();
+        const mp = new Marketplace();
-        // We don't do anything with the values (they aren't even any), so we just are iterating.
-        for await (const _ of Settings.initDefaults());
         const { serviceWorker, bareMuxConn, sj } = await sw.getSWInfo();
         log({ type: 'info', bg: true, prefix: true }, `General init completed! \n\nServiceWorker: ${serviceWorker.active?.state} \nBareMuxConn: ${bareMuxConn ? 'Active': 'Not active'} \nScramjetController: ${sj ? 'Active' : 'Not active'}`);
-    } 
+        return mp;
-    const initSettings = async () => {
+    }
+    
+    const handleTheme = async (marketplace: Marketplace) => {
+        const name = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.name);
+        const payload = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.payload);
+        const video = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.video);
+        const image = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.image);
+        if (name !== null) {
+            marketplace.theme({
+                type: 'normal',
+                name: name,
+                payload: payload,
+                sources: {
+                    video: video,
+                    bg: image 
+                }
+            });
+        }
+    }
+
+    const initSettings = async (marketplace: Marketplace) => {
         log({ type: 'info', bg: true, prefix: true }, "Initializing settings...");
+        for await (const _ of Settings.initDefaults());
+        await handleTheme(marketplace);
         log({ type: 'info', bg: true, prefix: true }, "Initialized Settings!");
     }
 
     const eventHandler = new EventHandler({
         events: {
             "DOMContentLoaded": async () => {
-                await init();
+                const mp = await init();
-                await initSettings();
+                await initSettings(mp);
-            },
+            }
-            "astro:after-swap": (async () => { 
-            })
         },
         logging: true 
     });

src/pages/[lang]/settings/misc.astro

@@ -30,57 +30,10 @@ const t = useTranslations(lang);
                 ]
             }}
             both={{enabled: false}}
-        />
+        /> 
-        <SettingsCard
-            title="Proxy Catalog"
-            description="Whether or not to proxy the Catalog"
-            input={{input: false}}
-            button={{name: 'Set', id: 'setmp' }}
-            select={{
-                select: true,
-                name: 'mp',
-                options: [
-                    {name: 'False', value: 'false', disabled: false},
-                    {name: 'True', value: 'true', disabled: false}
-                ]
-                }}
-                both={{enabled: false}}
-            />
-        <SettingsCard
-            title="Catalog URL"
-            description="Change which marketplace your using"
-            input={{
-                input: true,
-                required: true,
-                placeholder: `${origin}/api/catalog-assets`
-            }}
-            button={{name: 'Change', id: 'setcataloghostname' }}
-            select={{select: false}}
-            both={{enabled: false}}
-        />
     </SettingsSection>
   </SettingsLayout>
-  <ToastWrapper client:load>
+ <script>
-    <Toast toastProp={{
-            toastType: 'success',
-            text: 'Catalog is now proxied',
-            class: 'mpMessage'
-        }}
-    client:load />
-    <Toast toastProp={{
-        toastType: 'success',
-        text: 'Catalog URL set!',
-        class: 'cataloghostnameSuccess'
-        }}
-    client:load />
-    <Toast toastProp={{
-        toastType: 'error',
-        text: "Catalog doesn't exist!",
-        class: 'cataloghosnameError'
-      }}
-    client:load/>
-  </ToastWrapper>
-<script>
     import { EventHandler } from "@utils/events";
     import { navigate } from "astro:transitions/client";
     import { defaultStore } from "@utils/storage";
@@ -95,7 +48,7 @@ const t = useTranslations(lang);
         const lang = defaultStore.getVal(SettingsVals.i18n.lang);
         const val = Elements.exists<HTMLSelectElement>(await els.next());
         const button = Elements.exists<HTMLButtonElement>(await els.next());
-        val.value = lang;
+        val.value = lang || "en_US";
         Elements.attachEvent(button, "click", () => {
             defaultStore.setVal(SettingsVals.i18n.lang, val.value);
             navigate(`${window.location.origin}/${val.value}/settings/misc`);
@@ -106,7 +59,7 @@ const t = useTranslations(lang);
         events: {
             "astro:page-load": handler
         },
-        logging: true
+        logging: false
     })
     .bind();
 </script>

src/utils/index.ts

@@ -74,6 +74,20 @@ class Elements {
     static attachEvent<Element extends HTMLElement, EType extends keyof HTMLElementEventMap>(item: Element, event: EType, fn: () => unknown) {
         item.addEventListener(event, fn);
     }
+
+    static createCustomElement(name: string, fn: () => unknown) {
+        class CustomEl extends HTMLElement {
+            constructor() {
+                super();
+                (async () => await fn())();
+            }
+        }
+
+        if (customElements.get(name)) return log({ type: "error", bg: true, prefix: false, throw: false }, `An element with the name ${name} already exists! This WILL not work! And`);
+
+        log({ type: 'info', bg: false, prefix: true }, `Creating custom element with the name ${name}`);
+        customElements.define(name, CustomEl);
+    }
 }
 
 /**

src/utils/marketplace.ts

@@ -94,9 +94,23 @@ class Marketplace {
     static *getInstances() {
         //Marketplace.instances.forEach((val) => yield val);
         for (const item of Marketplace.#instances.keys()) {
-            yield item;
+            yield item! as Marketplace;
         }
     }
+
+    /**
+        * Detect if our Marketplace is ready or not. If it's not, don't resolve until it IS
+    */
+    static ready(): Promise<boolean> { 
+        return new Promise((resolve) => {
+            const t = setInterval(() => {
+                if (Marketplace.#instances.size !== 0) {
+                    clearInterval(t);
+                    resolve(true);
+                }
+            }, 100);
+        });
+    }
     
     /**
         * Install a theme into both localstorage AND set the theme.
@@ -132,11 +146,11 @@ class Marketplace {
     }
 
     async uninstallTheme(theme: Omit<Theme, "payload" | "video" | "bgImage">) {
-        const items = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
+        const items = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
-        if (!items.find((th: string) => th === theme.name)) { 
+        if (!items.find((th: string) => th === theme.name)) {
             return log({ type: 'error', bg: false, prefix: false, throw: true }, `Theme: ${theme.name} is not installed!`);
         }
-        const idx = items.indexOf(theme.name.toLowerCase());
+        const idx = items.indexOf(theme.name);
         items.splice(idx, 1);
         this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(items));
     }
@@ -257,8 +271,8 @@ class Marketplace {
            if (tsp !== opts.payload) {
                this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.payload, opts.payload);
                this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.name, opts.name);
-               s.href = `/packages/${opts.name}/${opts.payload}`;
            }
+           s.href = `/packages/${opts.name}/${opts.payload}`;
         }
         else {
             if (tsp) return s.href = `/packages/${tsn}/${tsp}`;