111 lines
3.2 KiB
Svelte
111 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import LoaderCircle from 'lucide-svelte/icons/loader-circle';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
|
|
import { Skeleton } from '$lib/components/ui/skeleton/index.js';
|
|
import DndGroup from '$lib/components/DNDGroup.svelte';
|
|
import type { PageData } from './$types';
|
|
import { enhance } from '$app/forms';
|
|
|
|
let { data, form }: { data: PageData; form: FormData } = $props();
|
|
|
|
let loading = $state(true);
|
|
let oldAlbums: SpotifyApi.AlbumObjectSimplified[] = $state([]);
|
|
|
|
$effect(() => {
|
|
// this is a hack to disable grayscale, please ignore
|
|
// eslint-disable-next-line no-constant-binary-expression
|
|
loading = false && form?.success;
|
|
});
|
|
|
|
// Used when user answers wrong and no new data comes in
|
|
$effect(() => {
|
|
if (data.streamed?.albums) {
|
|
data.streamed.albums.then((data) => {
|
|
oldAlbums = data;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#snippet footer(loading: boolean)}
|
|
<div class="flex justify-evenly">
|
|
<p class="text-lg font-semibold">Skoor: {data.stage}</p>
|
|
{#if loading}
|
|
<Button disabled>
|
|
<LoaderCircle class="animate-spin" />
|
|
Oota korra
|
|
</Button>
|
|
{:else}
|
|
<Button type="submit">Saada</Button>
|
|
{/if}
|
|
<p class="text-lg font-semibold">Parim: {data.highscore}</p>
|
|
</div>
|
|
{/snippet}
|
|
|
|
<AlertDialog.Root open={form?.solved === false}>
|
|
<AlertDialog.Content>
|
|
<AlertDialog.Header>
|
|
<AlertDialog.Title>
|
|
{#if data?.highscore && data?.stage && data.highscore === data.stage}
|
|
Uus parim tulemus!
|
|
{:else}
|
|
Seekord ei vedanud
|
|
{/if}
|
|
</AlertDialog.Title>
|
|
<AlertDialog.Description>
|
|
{#if data.stage === 0}
|
|
Valus. <strong>põrusid esimesel katsel.</strong>
|
|
{:else}
|
|
Vastasid õigesti <strong>{data.stage} korda.</strong>
|
|
{/if}
|
|
</AlertDialog.Description>
|
|
</AlertDialog.Header>
|
|
<AlertDialog.Footer>
|
|
<form action="?/restart" method="POST" use:enhance>
|
|
<AlertDialog.Action type="submit">Uuesti</AlertDialog.Action>
|
|
</form>
|
|
</AlertDialog.Footer>
|
|
</AlertDialog.Content>
|
|
</AlertDialog.Root>
|
|
|
|
<form
|
|
action="?/submit"
|
|
method="POST"
|
|
use:enhance
|
|
class="grid w-full gap-8 px-8 transition-all {loading || data?.playing === false
|
|
? 'grayscale'
|
|
: ''}"
|
|
>
|
|
{#if data?.streamed?.albums}
|
|
{#await data.streamed.albums}
|
|
{#each { length: 2 } as _}
|
|
<section class="grid grid-cols-3 items-center gap-16">
|
|
{#each { length: 3 } as _}
|
|
<Skeleton class="h-[6rem] w-full rounded-xl " />
|
|
{/each}
|
|
</section>
|
|
{/each}
|
|
|
|
<section class="grid grid-cols-3 items-center gap-16">
|
|
{#each { length: 3 } as _}
|
|
<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
|
|
{/each}
|
|
</section>
|
|
|
|
{@render footer(true)}
|
|
{:then albums}
|
|
<DndGroup items={albums.names} type="names"></DndGroup>
|
|
<DndGroup items={albums.artists} type="artists"></DndGroup>
|
|
<DndGroup items={albums.images} image type="images"></DndGroup>
|
|
|
|
{@render footer(false)}
|
|
{/await}
|
|
{:else}
|
|
<DndGroup items={oldAlbums.names} type="names"></DndGroup>
|
|
<DndGroup items={oldAlbums.artists} type="artists"></DndGroup>
|
|
<DndGroup items={oldAlbums.images} image type="images"></DndGroup>
|
|
|
|
{@render footer(false)}
|
|
{/if}
|
|
</form>
|