MadHouse-Labs/simple-loading-screen
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

goated?

Browse source
This commit is contained in:
cirroskais 2024-03-28 16:30:51 -04:00
parent 1c9964496e
commit 31623e2fdf
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
3 changed files with 92 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
public/events.js Normal file
View file

@ -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,
},
})
);
}

68
src/App.svelte
View file

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

14
src/lib/events.js Normal file
View file

@ -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));