103 lines
3.9 KiB
Svelte
103 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { registeredPopupState } from '@components/website/signup/RegisteredPopup.ts';
|
|
import Input from '@components/input/Input.svelte';
|
|
|
|
interface Props {
|
|
discordLink: string;
|
|
paypalLink: string;
|
|
teamspeakLink: string;
|
|
startDate: string;
|
|
}
|
|
|
|
let { discordLink, paypalLink, teamspeakLink, startDate }: Props = $props();
|
|
|
|
let skin: string | null = $state(null);
|
|
|
|
let modal: HTMLDialogElement;
|
|
|
|
registeredPopupState.subscribe(async (value) => {
|
|
if (!value) return;
|
|
|
|
modal.show();
|
|
|
|
const skinview3d = await import('skinview3d');
|
|
const skinViewer = new skinview3d.SkinViewer({
|
|
width: 200,
|
|
height: 300,
|
|
renderPaused: true
|
|
});
|
|
|
|
skinViewer.camera.rotation.x = -0.62;
|
|
skinViewer.camera.rotation.y = 0.534;
|
|
skinViewer.camera.rotation.z = 0.348;
|
|
skinViewer.camera.position.x = 30.5;
|
|
skinViewer.camera.position.y = 22.0;
|
|
skinViewer.camera.position.z = 42.0;
|
|
|
|
await skinViewer.loadSkin(`https://mc-heads.net/skin/${value.username}`);
|
|
skinViewer.render();
|
|
skin = skinViewer.canvas.toDataURL();
|
|
|
|
skinViewer.dispose();
|
|
});
|
|
</script>
|
|
|
|
<dialog class="modal" bind:this={modal} onclose={($registeredPopupState = null)}>
|
|
<form method="dialog" class="modal-box xl:w-5/12 max-w-10/12 z-10">
|
|
<h1 class="text-center text-xl sm:text-3xl mb-8">Registrierung erfolgreich</h1>
|
|
<p class="text-center font-bold">
|
|
<span>Du hast Dich erfolgreich mit dem Team </span>
|
|
<span class="inline-flex rounded-sm w-3 h-3" style="background-color: {$registeredPopupState?.teamColor}"></span>
|
|
<span>{$registeredPopupState?.team}</span>
|
|
<span> für Varo 4 registriert</span>. Spielstart ist am
|
|
<i>
|
|
{new Date(startDate).toLocaleString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })}
|
|
</i>
|
|
um
|
|
<i>
|
|
{new Date(startDate).toLocaleString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
|
|
</i>.
|
|
</p>
|
|
<p class="text-center">Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
|
|
<p class="mt-2">
|
|
Falls du uns unterstützen möchtest, kannst du dies ganz einfach über
|
|
<a class="link" href={paypalLink} target="_blank">PayPal</a>
|
|
tun. Antworten auf häufig gestellte Fragen findest du in unserer
|
|
<a class="link" href="faq" target="_blank">FAQ</a>. Außerdem freuen wir uns, dich auf unserem
|
|
<a class="link" href={teamspeakLink} target="_blank">TeamSpeak</a>
|
|
oder in unserem
|
|
<a class="link" href={discordLink} target="_blank">Discord</a>
|
|
begrüßen zu dürfen!
|
|
</p>
|
|
<div class="divider"></div>
|
|
<div class="flex justify-around mt-2 mb-4">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
|
|
<Input type="text" value={$registeredPopupState?.firstname} label="Vorname" disabled />
|
|
<Input type="text" value={$registeredPopupState?.lastname} label="Nachname" disabled />
|
|
<Input
|
|
type="date"
|
|
value={$registeredPopupState?.birthday.toISOString().substring(0, 10)}
|
|
label="Geburtstag"
|
|
size="sm"
|
|
disabled
|
|
/>
|
|
<Input type="tel" value={$registeredPopupState?.phone} label="Telefonnummer" disabled />
|
|
<Input type="text" value={$registeredPopupState?.username} label="Spielername" disabled />
|
|
<Input type="text" value={$registeredPopupState?.teamMember} label="Mitspieler" disabled />
|
|
</div>
|
|
<div class="relative hidden md:flex justify-center w-[200px] my-4">
|
|
{#if skin}
|
|
<img class="absolute" src={skin} alt="" />
|
|
{:else}
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="flex justify-center gap-8">
|
|
<button class="btn">Weitere Person anmelden</button>
|
|
</div>
|
|
</form>
|
|
<div class="absolute w-full h-full bg-black/50"></div>
|
|
</dialog>
|