feat: add Skin3D component for enhanced player avatar visualization i…

…n stats layout
SkyCryptWebsite · Dec 7, 2024 · adc7333 · adc7333
1 parent 419c478
commit adc7333
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 20 deletions.
diff --git a/src/lib/components/Skin3D.svelte b/src/lib/components/Skin3D.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { cn } from "$lib/shared/utils";
+  import type { Stats as StatsType } from "$lib/types/stats";
+  import * as skinview3d from "skinview3d";
+  import { getContext, onDestroy, onMount } from "svelte";
+
+  const profile = getContext<StatsType>("profile");
+
+  let { class: className }: { class: string | undefined } = $props();
+  let viewer: skinview3d.SkinViewer;
+  let minecraftAvatar: HTMLCanvasElement;
+  let canvasIsLoading = $state<boolean>(true);
+
+  onMount(async () => {
+    const minecraftAvatarContainerDimensions = minecraftAvatar.getBoundingClientRect();
+    const cape = await fetch(`https://crafatar.com/capes/${profile.uuid}`, {
+      method: "HEAD"
+    }).catch(() => ({ ok: false }));
+    viewer = new skinview3d.SkinViewer({
+      canvas: minecraftAvatar,
+      width: minecraftAvatarContainerDimensions.width,
+      height: minecraftAvatarContainerDimensions.height,
+      skin: `https://crafatar.com/skins/${profile.uuid}`,
+      cape: cape.ok ? `https://crafatar.com/capes/${profile.uuid}` : undefined,
+      animation: new skinview3d.IdleAnimation()
+    });
+
+    viewer.camera.position.set(-18, -3, 78);
+    viewer.controls.enableZoom = true;
+    viewer.controls.enablePan = true;
+    viewer.controls.enableRotate = true;
+    viewer.canvas.removeAttribute("tabindex");
+
+    canvasIsLoading = false;
+
+    return new Promise((resolve) => {
+      resolve(() => {
+        viewer.dispose();
+      });
+    });
+  });
+
+  onDestroy(() => {
+    canvasIsLoading = true;
+    viewer.dispose();
+  });
+</script>
+
+<canvas bind:this={minecraftAvatar} class={cn("size-full transform-gpu overflow-hidden transition-opacity duration-[3s]", className)} class:opacity-100={!canvasIsLoading} class:opacity-0={canvasIsLoading}></canvas>
diff --git a/src/lib/layouts/stats/Main.svelte b/src/lib/layouts/stats/Main.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Skin3D from "$lib/components/Skin3D.svelte";
   import AdditionalStats from "$lib/layouts/stats/AdditionalStats.svelte";
   import PlayerProfile from "$lib/layouts/stats/PlayerProfile.svelte";
   import Skills from "$lib/layouts/stats/Skills.svelte";
@@ -25,26 +26,30 @@
   setContext<StatsType>("profile", profile);
 </script>
 
-<main class="mx-auto space-y-5 p-8">
-  <PlayerProfile />
-  <Skills />
-  <Stats />
-  <AdditionalStats />
-  <Armor />
-  <Weapons />
-  <Accessories />
-  <Pets />
-  <Inventory />
-  <SkillsSection />
-  <Dungeons />
-  <Slayer />
-  <Minions />
-  <Bestiary />
-  <Collections />
-  <CrimsonIsle />
-  <Rift />
-  <MiscSection />
-</main>
+<div class="relative">
+  <Skin3D class="fixed left-0 top-1/2 z-10 h-dvh w-[30vw] -translate-y-1/2" />
+  <div class="fixed right-0 top-0 h-dvh w-[calc(100%-30vw)] backdrop-blur-lg backdrop-brightness-50"></div>
+  <main class="relative mx-auto ml-[30vw] space-y-5 p-8">
+    <PlayerProfile />
+    <Skills />
+    <Stats />
+    <AdditionalStats />
+    <Armor />
+    <Weapons />
+    <Accessories />
+    <Pets />
+    <Inventory />
+    <SkillsSection />
+    <Dungeons />
+    <Slayer />
+    <Minions />
+    <Bestiary />
+    <Collections />
+    <CrimsonIsle />
+    <Rift />
+    <MiscSection />
+  </main>
+</div>
 
 <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="position: fixed;">
   <filter id="enchanted-glint">