add skin on registration complete page

package-lock.json

@@ -32,6 +32,7 @@
 				"prettier": "^3.1.0",
 				"prettier-plugin-svelte": "^3.1.2",
 				"sass": "^1.69.5",
+				"skinview3d": "^3.0.1",
 				"svelte": "^4.2.7",
 				"svelte-check": "^3.6.2",
 				"svelte-heros-v2": "^0.10.12",
@@ -1060,11 +1061,35 @@
 			"integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
 			"dev": true
 		},
+		"node_modules/@types/stats.js": {
+			"version": "0.17.3",
+			"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+			"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+			"dev": true
+		},
+		"node_modules/@types/three": {
+			"version": "0.156.0",
+			"resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz",
+			"integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/stats.js": "*",
+				"@types/webxr": "*",
+				"fflate": "~0.6.10",
+				"meshoptimizer": "~0.18.1"
+			}
+		},
 		"node_modules/@types/validator": {
 			"version": "13.11.7",
 			"resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.11.7.tgz",
 			"integrity": "sha512-q0JomTsJ2I5Mv7dhHhQLGjMvX0JJm5dyZ1DXQySIUzU1UlwzB8bt+R6+LODUbz0UDIOvEzGc28tk27gBJw2N8Q=="
 		},
+		"node_modules/@types/webxr": {
+			"version": "0.5.10",
+			"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
+			"integrity": "sha512-n3u5sqXQJhf1CS68mw3Wf16FQ4cRPNBBwdYLFzq3UddiADOim1Pn3Y6PBdDilz1vOJF3ybLxJ8ZEDlLIzrOQZg==",
+			"dev": true
+		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "6.13.1",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.1.tgz",
@@ -2557,6 +2582,12 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.6.10",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+			"integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+			"dev": true
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3307,6 +3338,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/meshoptimizer": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+			"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+			"dev": true
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -4592,6 +4629,23 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/skinview-utils": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.7.1.tgz",
+			"integrity": "sha512-4eLrMqR526ehlZbsd8SuZ/CHpS9GiH0xUMoV+PYlJVi95ZFz5HJu7Spt5XYa72DRS7wgt5qquvHZf0XZJgmu9Q==",
+			"dev": true
+		},
+		"node_modules/skinview3d": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/skinview3d/-/skinview3d-3.0.1.tgz",
+			"integrity": "sha512-2LUSkzGxlZrTQelGT10jcW4TLiFTg5aZqXMEuqAFoWtk3qtaNu0qRFtwK5dN8zEXyKUJ3xlxah5eGtKY/NifQg==",
+			"dev": true,
+			"dependencies": {
+				"@types/three": "^0.156.0",
+				"skinview-utils": "^0.7.1",
+				"three": "^0.156.1"
+			}
+		},
 		"node_modules/slash": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -5166,6 +5220,12 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/three": {
+			"version": "0.156.1",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.156.1.tgz",
+			"integrity": "sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==",
+			"dev": true
+		},
 		"node_modules/tiny-glob": {
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",

package.json

@@ -29,6 +29,7 @@
 		"prettier": "^3.1.0",
 		"prettier-plugin-svelte": "^3.1.2",
 		"sass": "^1.69.5",
+		"skinview3d": "^3.0.1",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.2",
 		"svelte-heros-v2": "^0.10.12",

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>