diff --git a/src/lib/component/util/skin-stealer.svelte b/src/lib/component/util/skin-stealer.svelte index b4479e5c..0b09e9f1 100644 --- a/src/lib/component/util/skin-stealer.svelte +++ b/src/lib/component/util/skin-stealer.svelte @@ -3,27 +3,32 @@ import { onMount } from "svelte" import {toast} from "@zerodevx/svelte-toast"; - const defaultSkin = "https://crafatar.com/skins/d556fff2-8f3c-43b3-9111-c288204f16e2?default=MHF_Steve" - let currentSearch: string let currentSkin: string + let skinContainer: HTMLCanvasElement let skinViewer: SkinViewer.SkinViewer - onMount(async () => { - const urlParams = new URLSearchParams(window.location.hash.slice(1)); - let ign = urlParams.get('ign') + let loading = false + let noAccountFound = false + async function loadSkinViewer() { skinViewer = new SkinViewer.SkinViewer({ - canvas: document.getElementById("skin_container") as HTMLCanvasElement, + canvas: skinContainer as HTMLCanvasElement, height: 400, - width: 300 - }) + width: 300, + skin: "https://crafatar.com/skins/d556fff2-8f3c-43b3-9111-c288204f16e2?default=MHF_Steve" // Steve skin + }); - skinViewer.autoRotate = false - skinViewer.fov = 10 - skinViewer.zoom = 0.70 + skinViewer.autoRotate = false; + skinViewer.fov = 10; + skinViewer.zoom = 0.70; - skinViewer.controls.enableZoom = false + skinViewer.controls.enableZoom = false; + } + + onMount(async () => { + const urlParams = new URLSearchParams(window.location.hash.slice(1)); + let ign = urlParams.get('ign') if (ign) { searchValue = ign @@ -39,19 +44,25 @@ if (!/^[a-zA-Z0-9_]+$/.test(username)) return if (username == currentSearch) return + loading = true currentSearch = username const response = await fetch(`/api/profile/${username}`) const data = await response.json() - if (data.status) { - skinViewer.loadSkin(defaultSkin) - } else { - currentSkin = data.skin.png.data - skinViewer.loadSkin(data.renders.skin) - } + loading = false + setTimeout(() => { // This is needed since otherwise it can't find the canvas for the skinViewer + loadSkinViewer() + if (data.status) { + noAccountFound = true + } else { + noAccountFound = false + currentSkin = data.skin.png.data + skinViewer.loadSkin(data.renders.skin) + } - skinViewer.nameTag = username + skinViewer.nameTag = username + }, 1) } let searchValue: string @@ -60,18 +71,8 @@ if (event.key === "Enter") updateSkin(searchValue) } - let debounceTimer: NodeJS.Timeout | null = null; const handleInput = () => { - link = "https://mcutils.com/skin-stealer#ign=" + searchValue - if (searchValue === "") return - - if (debounceTimer) { - clearTimeout(debounceTimer); - } - - debounceTimer = setTimeout(() => { - updateSkin(searchValue) - }, 500); // Adjust the debounce delay as needed + link = "https://mcutils.com/cape-stealer#ign=" + searchValue }; let link = "https://mcutils.com/skin-stealer#ign=" @@ -104,18 +105,29 @@ } - - - -