goated?

public/events.js

@@ -0,0 +1,41 @@
+const element = document.getElementsByTagName("html")[0];
+
+function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, lang, gamemodeNice) {
+    setInterval(() => {
+        element.dispatchEvent(
+            new CustomEvent("gameDetails", {
+                detail: {
+                    servername,
+                    serverurl,
+                    mapname,
+                    maxplayers,
+                    steamid,
+                    gamemode,
+                    volume,
+                    lang,
+                    gamemodeNice,
+                },
+            })
+        );
+    }, 1000);
+}
+
+function DownloadingFile(file) {
+    element.dispatchEvent(
+        new CustomEvent("downloadingFile", {
+            detail: {
+                file,
+            },
+        })
+    );
+}
+
+function SetStatusChanged(status) {
+    element.dispatchEvent(
+        new CustomEvent("statusChanged", {
+            detail: {
+                status,
+            },
+        })
+    );
+}

src/App.svelte

@@ -1,13 +1,12 @@
 <script>
     import { Map, Gamepad2, Disc3 } from "lucide-svelte";
-    import steam from "./lib/steam.js";
 
-    let status = false;
-
-    steam("76561198824911329");
+    import { gameDetails } from "./lib/events";
+    import { scale } from "svelte/transition";
 </script>
 
-<div class="h-screen w-screen">
+{#if $gameDetails}
+    <div in:scale class="h-screen w-screen">
         <div class="h-full w-full flex justify-center items-center absolute opacity-50 blur-sm">
             <!-- svelte-ignore a11y-media-has-caption -->
             <video src="garf.mp4" autoplay loop muted></video>
@@ -16,7 +15,7 @@
             <div class="w-[42rem] grid grid-cols-3 gap-2">
                 <div class="bg-black/65 col-span-3 p-2 rounded-lg shadow-lg">
                     <p class="text-center text-white/50">You're joining</p>
-                <p class="text-center text-2xl">MadHouseLABS | Wire Starfall Arc9 PAC LVS</p>
+                    <p class="text-center text-2xl">{$gameDetails?.servername}</p>
                 </div>
                 <div class="bg-black/65 col-span-2 p-2 rounded-lg shadow-lg flex">
                     <div class="flex my-auto space-x-2">
@@ -30,13 +29,20 @@
                 <div class="bg-black/65 col-span-1 p-2 rounded-lg shadow-lg">
                     <div class="flex space-x-2">
                         <Map />
-                    <p class="font-bold">gm_construct</p>
+                        <p class="font-bold">{$gameDetails?.mapname}</p>
                     </div>
                     <div class="flex space-x-2">
                         <Gamepad2 />
-                    <p class="font-bold">sandbox</p>
+                        <p class="font-bold">{$gameDetails?.gamemode}</p>
                     </div>
                 </div>
             </div>
         </div>
-</div>
+    </div>
+{:else}
+    <div class="h-screen w-screen">
+        <div class="h-full w-full flex justify-center items-center">
+            <span class="inline-flex rounded-full h-6 w-6 bg-neutral-500 animate-ping"></span>
+        </div>
+    </div>
+{/if}

src/lib/events.js

@@ -0,0 +1,14 @@
+import { writable } from "svelte/store";
+
+const element = document.getElementsByTagName("html")[0];
+
+export const gameDetails = writable();
+export const downloadingFile = writable();
+export const statusChanged = writable();
+
+// @ts-ignore
+element.addEventListener("gameDetails", ({ detail }) => gameDetails.set(detail));
+// @ts-ignore
+element.addEventListener("downloadingFile", ({ detail }) => downloadingFile.set(detail));
+// @ts-ignore
+element.addEventListener("statusChanged", ({ detail }) => statusChanged.set(detail));