add skin on registration complete page

src/routes/+layout.svelte

@@ -73,7 +73,7 @@
 />
 
 <main>
-	<div class="min-h-screen w-full">
+	<div class="min-h-screen h-screen w-full">
 		<slot />
 	</div>
 </main>

src/routes/register/+page.svelte

@@ -4,6 +4,7 @@
 	import Register from './Register.svelte';
 
 	let registered = false;
+	let username: string | null = null;
 </script>
 
 <svelte:head>
@@ -17,11 +18,16 @@
 >
 	{#if !registered}
 		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
-			<Register on:submit={() => (registered = true)} />
+			<Register
+				on:submit={(e) => {
+					registered = true;
+					username = e.detail.username;
+				}}
+			/>
 		</div>
 	{:else}
 		<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
-			<RegistrationComplete on:close={() => (registered = false)} />
+			<RegistrationComplete {username} on:close={() => (registered = false)} />
 		</div>
 	{/if}
 </div>

src/routes/register/Register.svelte

@@ -44,7 +44,7 @@
 				body: new FormData(document.forms[0])
 			});
 			if (response.ok) {
-				dispatch('submit', {});
+				dispatch('submit', { username: usernameInput.value });
 				resolve();
 			} else if (response.status < 500) {
 				reject(Error((await response.json()).message));

src/routes/register/RegistrationComplete.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { ChevronLeft } from 'svelte-heros-v2';
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 
+	export let username: string;
+
 	const dispatch = createEventDispatcher();
 
 	let startDayOptions: Intl.DateTimeFormatOptions = {
@@ -14,6 +16,29 @@
 		hour: '2-digit',
 		minute: '2-digit'
 	};
+	let skin: string | null = null;
+
+	onMount(async () => {
+		let skinview3d = await import('skinview3d');
+		let 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/${username}`);
+		skinViewer.render();
+		skin = skinViewer.canvas.toDataURL();
+
+		skinViewer.dispose();
+	});
 </script>
 
 <div class="flex items-center h-12 mb-2">
@@ -23,10 +48,20 @@
 	<h1 class="text-center text-xl sm:text-3xl m-auto">Registrierung erfolgreich</h1>
 </div>
 <p>
-	<b>Du hast Dich erfolgreich für Craftattack 6 registriert</b>. Spielstart ist am {new Date(
-		env.PUBLIC_START_DATE
-	).toLocaleString('de-DE', startDayOptions)} um {new Date(env.PUBLIC_START_DATE).toLocaleString(
-		'de-DE',
-		startTimeOptions
-	)} Uhr.
+	<b>Du hast Dich erfolgreich für Craftattack 6 registriert</b>. Spielstart ist am
+	<span class="underline"
+		>{new Date(env.PUBLIC_START_DATE).toLocaleString('de-DE', startDayOptions)}</span
+	>
+	um
+	<span class="underline"
+		>{new Date(env.PUBLIC_START_DATE).toLocaleString('de-DE', startTimeOptions)} Uhr</span
+	>.
 </p>
+<p>Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
+<div class="relative flex justify-center w-full h-[200px] my-4">
+	{#if skin}
+		<img class="absolute" src={skin} alt="" />
+	{:else}
+		<span class="loading loading-spinner loading-lg"></span>
+	{/if}
+</div>