better loading screen

public/events.js

@@ -39,3 +39,25 @@ function SetStatusChanged(status) {
         })
     );
 }
+
+function SetFilesTotal(total) {
+    element.dispatchEvent(
+        new CustomEvent("setFilesTotal", {
+            detail: {
+                total,
+            },
+        })
+    );
+}
+
+function SetFilesNeeded(needed) {
+    element.dispatchEvent(
+        new CustomEvent("setFilesNeeded", {
+            detail: {
+                needed,
+            },
+        })
+    );
+}
+
+GameDetails("cirro's sandbox / FASTDL WIRE PAC3 ARC9 LVS", null, "gm_construct", null, null, "sandbox", null, null, null);

src/App.svelte

@@ -1,42 +1,39 @@
 <script>
     import { scale } from "svelte/transition";
-    import { Map, Gamepad2, Disc3 } from "lucide-svelte";
-    import { writable } from "svelte/store";
-    import { audioMethod } from "./config.json";
-
-    import { gameDetails } from "./lib/events";
+    import { Map, Gamepad2 } from "lucide-svelte";
+    import { staff } from "./config";
+    import { gameDetails, downloadingFile, statusChanged } from "./lib/events";
     import Slideshow from "./lib/Slideshow.svelte";
-    import Playlist from "./lib/Playlist.svelte";
-    import Radio from "./lib/Radio.svelte";
-
-    let title = writable();
+    import User from "./lib/User.svelte";
 </script>
 
 {#if $gameDetails}
-    <div in:scale class="h-screen w-screen">
-        <div class="h-full w-full flex justify-center items-center absolute blur-sm">
+    <div in:scale class="w-screen h-screen">
+        <div class="flex absolute justify-center items-center w-full h-full blur-sm">
             <Slideshow />
-            {#if audioMethod === "playlist"}
-                <Playlist {title} />
-            {:else if audioMethod === "radio"}
-                <Radio {title} />
-            {/if}
         </div>
-        <div class="h-full w-full flex justify-center items-center relative z-10">
+        <div class="flex relative z-10 justify-center items-center w-full h-full">
             <div class="w-[42rem] grid grid-cols-3 gap-2">
-                <div class="bg-black/65 col-span-3 p-2 rounded-lg shadow-lg">
+                <div class="col-span-3 p-2 rounded-lg shadow-lg bg-black/70">
                     <p class="text-center text-white/50">You're joining</p>
-                    <p class="text-center text-2xl">{$gameDetails?.servername}</p>
+                    <p class="text-2xl text-center">{$gameDetails?.servername}</p>
                 </div>
-                <div class="bg-black/65 col-span-2 p-2 rounded-lg shadow-lg flex overflow-hidden">
+                <div class="col-span-3 p-2 rounded-lg shadow-lg bg-black/70">
+                    <div class="flex gap-2 place-content-evenly pt-0.5">
+                        {#each staff as member}
+                            <User steamid={member.steamid} color={member.color}></User>
+                        {/each}
+                    </div>
+                </div>
+                <div class="flex col-span-3 gap-2 w-full">
+                    <div class="flex overflow-hidden flex-grow p-2 rounded-lg shadow-lg bg-black/70">
                         <div class="flex my-auto space-x-2">
-                        <div class="animate-spin my-auto">
-                            <Disc3 />
-                        </div>
-                        <span class="flex-1 my-auto whitespace-nowrap overflow-hidden font-bold">{$title}</span>
+                            <span class="overflow-hidden flex-1 my-auto font-bold whitespace-nowrap"
+                                >{$statusChanged.status}</span
+                            >
                         </div>
                     </div>
-                <div class="bg-black/65 col-span-1 p-2 rounded-lg shadow-lg">
+                    <div class="p-2 rounded-lg shadow-lg bg-black/70">
                         <div class="flex space-x-2">
                             <Map />
                             <p class="font-bold">{$gameDetails?.mapname}</p>
@@ -49,10 +46,11 @@
                 </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 class="w-screen h-screen">
+        <div class="flex justify-center items-center w-full h-full">
+            <span class="inline-flex w-6 h-6 rounded-full animate-ping bg-neutral-500"></span>
         </div>
     </div>
 {/if}

src/config.json

@@ -1,28 +1,13 @@
 {
     "imageDuration": 10,
-    "images": [
-        "/img/1.jpg",
-        "/img/2.jpg",
-        "/img/3.jpg",
-        "/img/4.jpg",
-        "/img/5.jpg",
-        "/img/6.jpg",
-        "/img/7.jpg",
-        "/img/8.jpg",
-        "/img/9.jpg",
-        "/img/10.jpg"
-    ],
-
-    "audioMethod": "playlist",
-
-    "radio": "https://noise.madhouselabs.net",
-    "radioServerName": "dope",
-
-    "playlist": [
-        { "title": "MF DOOM - Rapp Snitch Knishes", "location": "/audio/Rapp Snitch Knishes.mp3" },
-        { "title": "Modjo - Lady (Hear Me Tonight)", "location": "/audio/Lady.mp3" },
-        { "title": "King Geedorah - Lockjaw", "location": "/audio/Lockjaw.mp3" },
-        { "title": "OutKast - Ms. Jackson", "location": "/audio/Ms Jackson.mp3" },
-        { "title": "2 Mello - I Wanna Kno", "location": "/audio/I Wanna Kno.mp3" }
+    "images": ["/img/4.jpg", "/img/5.jpg", "/img/6.jpg", "/img/8.jpg", "/img/9.jpg", "/img/10.jpg", "/img/11.jpg"],
+    "staff": [
+        { "steamid": "76561198824911329", "color": "#c4bef3" },
+        { "steamid": "76561198112219274", "color": "#e21884", "_comment": "lilyith" },
+        { "steamid": "76561198107316900", "color": "#e21884", "_comment": "alexcat" },
+        { "steamid": "76561198101686025", "color": "#ffe23f", "_comment": "bluddfang" },
+        { "steamid": "76561198271335686", "color": "#ffe23f", "_comment": "shelby" },
+        { "steamid": "76561198196375903", "color": "#ffe23f", "_comment": "westernspy" },
+        { "steamid": "76561198277445333", "color": "#ffe23f", "_comment": "crate" }
     ]
 }

src/lib/Playlist.svelte

@@ -1,19 +0,0 @@
-<script>
-    import { playlist } from "../config.json";
-
-    export let title;
-    let index = Math.floor(Math.random() * playlist.length),
-        selected = playlist[index],
-        volume = 0.025;
-
-    title.set(selected.title);
-
-    function ended() {
-        index++;
-        if (index >= playlist.length) index = 0;
-        selected = playlist[index];
-        title.set(selected.title);
-    }
-</script>
-
-<audio src={selected.location} bind:volume autoplay on:ended={ended}></audio>

src/lib/Radio.svelte

@@ -1,38 +0,0 @@
-<script>
-    import { radio, radioServerName } from "../config.json";
-
-    export let title;
-    let listenUrl,
-        volume = 0.05;
-
-    setInterval(async () => {
-        const response = await fetch(radio + "/status-json.xsl");
-        const body = await response.json();
-
-        const data = body.source?.length
-            ? body.icestats.source?.find((s) => {
-                  return s.server_name === radioServerName;
-              })
-            : body.icestats.source;
-
-        title.set(`${data.artist} - ${data.title}`);
-    }, 1000 * 15);
-
-    async function main() {
-        const response = await fetch(radio + "/status-json.xsl");
-        const body = await response.json();
-
-        const data = body.source?.length
-            ? body.icestats.source?.find((s) => {
-                  return s.server_name === radioServerName;
-              })
-            : body.icestats.source;
-
-        listenUrl = data.listenurl;
-        title.set(`${data.artist} - ${data.title}`);
-    }
-
-    main();
-</script>
-
-<audio src={listenUrl} bind:volume autoplay></audio>

src/lib/Slideshow.svelte

@@ -1,6 +1,6 @@
 <script>
     import { fade, slide } from "svelte/transition";
-    import { images, imageDuration } from "../config.json";
+    import { images, imageDuration } from "../config";
 
     let index = Math.floor(Math.random() * images.length),
         selected = images[index];
@@ -20,6 +20,6 @@
 
 {#each images as image}
     {#if selected === image}
-        <img transition:fade class="absolute max-h-screen" src={image} alt="" />
+        <img transition:fade class="object-cover absolute w-screen h-screen" src={image} alt="" />
     {/if}
 {/each}

src/lib/User.svelte

@@ -0,0 +1,17 @@
+<script>
+    import steam from "./steam";
+
+    export let steamid, color;
+</script>
+
+{#await steam(steamid)}
+    <div class="flex flex-col w-20">
+        <div class="w-20 h-20" />
+        <p class="text-center" style="color: {color};">.</p>
+    </div>
+{:then { name, avatar }}
+    <div class="flex flex-col w-20">
+        <img class="w-20 h-20 rounded-full border-[3px]" style="border-color: {color};" src={avatar} alt="" />
+        <p class="text-sm font-bold text-center overflow-clip" style="color: {color};">{name}</p>
+    </div>
+{/await}

src/lib/events.js

@@ -4,7 +4,9 @@ const element = document.getElementsByTagName("html")[0];
 
 export const gameDetails = writable();
 export const downloadingFile = writable();
-export const statusChanged = writable();
+export const statusChanged = writable({ status: "" });
+export const setFilesTotal = writable();
+export const setFilesNeeded = writable();
 
 // @ts-ignore
 element.addEventListener("gameDetails", ({ detail }) => gameDetails.set(detail));
@@ -12,3 +14,7 @@ element.addEventListener("gameDetails", ({ detail }) => gameDetails.set(detail))
 element.addEventListener("downloadingFile", ({ detail }) => downloadingFile.set(detail));
 // @ts-ignore
 element.addEventListener("statusChanged", ({ detail }) => statusChanged.set(detail));
+// @ts-ignore
+element.addEventListener("setFilesTotal", ({ detail }) => setFilesTotal.set(detail));
+// @ts-ignore
+element.addEventListener("setFilesNeeded", ({ detail }) => setFilesNeeded.set(detail));

src/lib/steam.js

@@ -2,10 +2,13 @@
  * @param {string} steamid64
  */
 export default async function (steamid64) {
-    const response = await fetch(`https://steamcommunity.com/profiles/${steamid64}/?xml=1`);
+    const response = await fetch(`https://steam.dev.madhouselabs.net/profiles/${steamid64}/?xml=1`);
     const xml = await response.text();
 
     const document = new DOMParser().parseFromString(xml, "text/xml");
 
-    console.log(document);
+    return {
+        name: document.getElementsByTagName("steamID")[0].textContent,
+        avatar: document.getElementsByTagName("avatarFull")[0].textContent,
+    };
 }