better loading screen
This commit is contained in:
parent
2decc0694e
commit
296a21aec2
19 changed files with 96 additions and 122 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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);
|
||||
|
|
BIN
public/img/1.jpg
BIN
public/img/1.jpg
Binary file not shown.
Before Width: | Height: | Size: 422 KiB |
BIN
public/img/11.jpg
Normal file
BIN
public/img/11.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 264 KiB |
BIN
public/img/2.jpg
BIN
public/img/2.jpg
Binary file not shown.
Before Width: | Height: | Size: 306 KiB |
BIN
public/img/3.jpg
BIN
public/img/3.jpg
Binary file not shown.
Before Width: | Height: | Size: 291 KiB |
BIN
public/img/7.jpg
BIN
public/img/7.jpg
Binary file not shown.
Before Width: | Height: | Size: 379 KiB |
|
@ -1,58 +1,56 @@
|
|||
<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="flex my-auto space-x-2">
|
||||
<div class="animate-spin my-auto">
|
||||
<Disc3 />
|
||||
<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">
|
||||
<span class="overflow-hidden flex-1 my-auto font-bold whitespace-nowrap"
|
||||
>{$statusChanged.status}</span
|
||||
>
|
||||
</div>
|
||||
<span class="flex-1 my-auto whitespace-nowrap overflow-hidden font-bold">{$title}</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">{$gameDetails?.mapname}</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<Gamepad2 />
|
||||
<p class="font-bold">{$gameDetails?.gamemode}</p>
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<Gamepad2 />
|
||||
<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 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}
|
||||
|
|
|
@ -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" }
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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}
|
||||
|
|
17
src/lib/User.svelte
Normal file
17
src/lib/User.svelte
Normal file
|
@ -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}
|
|
@ -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));
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue