main-site/src/routes/servers/+page.svelte

47 lines
1 KiB
Svelte

<svelte:options runes={true} />
<script lang="ts">
import type { Server } from '$lib/types/data-types';
import ServerCard from '$lib/components/ServerCard.svelte';
let servers: readonly Server[] = $state.raw([]);
let icons: readonly string[] = $state.raw([]);
async function get(url: string): Promise<any> {
let res = await fetch(url);
if (res.ok) {
let data = await res.json();
return data;
} else {
return Promise.reject();
}
}
$effect(() => {
get('/data/servers').then((data: Server[]) => {
servers = data;
});
});
$effect(() => {
get('/assets/icons').then((data: string[]) => {
icons = data;
});
});
</script>
<svelte:head>
<title>Servers</title>
<meta name="description" content="Overview of Game Servers running on neshweb.net" />
</svelte:head>
<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
{#each servers as server}
{#if typeof server.id === 'undefined'}
<ServerCard {server} {icons} />
{:else}
<ServerCard {server} {icons} />
{/if}
{/each}
</div>