From e2506cac822f0b5ddbc285880c768eda9357e075 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 4 Mar 2022 23:05:09 -0600
Subject: dynamic packs and bug fixes

---
 src/lib/BackgroundImage.svelte              | 26 +++++++++++++
 src/lib/minecraft/Inventory.svelte          |  3 +-
 src/lib/minecraft/Item.svelte               |  5 ++-
 src/lib/minecraft/inventory.ts              | 25 ++++++++-----
 src/lib/sections/Armor.svelte               |  4 +-
 src/lib/sections/Collections.svelte         |  8 +++-
 src/lib/sections/Inventories.svelte         | 47 +++++++++++++++++++-----
 src/routes/player/[player]/[profile].svelte | 57 ++++++++++++++++++++---------
 src/routes/player/[player]/index.svelte     | 19 ++--------
 9 files changed, 137 insertions(+), 57 deletions(-)
 create mode 100644 src/lib/BackgroundImage.svelte

(limited to 'src')

diff --git a/src/lib/BackgroundImage.svelte b/src/lib/BackgroundImage.svelte
new file mode 100644
index 0000000..c059119
--- /dev/null
+++ b/src/lib/BackgroundImage.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { browser } from '$app/env'
+
+	import { onDestroy } from 'svelte'
+
+	export let url: string
+
+	// cursed svelte :D
+	$: bodyStyle =
+		'<sty' + 'le id="background-image-style">:root{--background:url(' + url + ')}</st' + 'yle>'
+
+	// get rid of the body style when we leave the page
+	// not doing this will sometimes cause the background to stay
+	onDestroy(() => {
+		bodyStyle = ''
+		// hack since sometimes the style is not removed
+		if (browser) {
+			let styleEl = document.getElementById('background-image-style')
+			if (styleEl) styleEl.remove()
+		}
+	})
+</script>
+
+<svelte:head>
+	{@html bodyStyle}
+</svelte:head>
diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte
index 0a6a179..b3c464d 100644
--- a/src/lib/minecraft/Inventory.svelte
+++ b/src/lib/minecraft/Inventory.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { Inventory, Item as APIItem } from '$lib/APITypes'
+	import type { MatcherFile } from 'skyblock-assets'
 
 	import Item from './Item.svelte'
 
 	export let items: Inventory
 	export let name = ''
-	export let pack = ''
+	export let pack: MatcherFile | undefined = undefined
 	export let groupLimit = 9
 
 	// each item group has 9 items
diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
index 13ca8c7..5553840 100644
--- a/src/lib/minecraft/Item.svelte
+++ b/src/lib/minecraft/Item.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-	import MinecraftTooltip from './MinecraftTooltip.svelte'
 	import { formattingCodeToHtml, removeFormattingCode } from '$lib/utils'
+	import MinecraftTooltip from './MinecraftTooltip.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
 	import { itemToUrl } from './inventory'
 
 	export let item: any | null
 	export let isslot = true
-	export let pack = ''
+	export let pack: MatcherFile | undefined = undefined
 
 	let itemLoreHtml: string | null
 	let itemNameHtml: string | null
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index 72d72ee..e9d840c 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,7 +1,6 @@
 import * as skyblockAssets from 'skyblock-assets'
 import vanilla from 'skyblock-assets/matchers/vanilla.json'
-import packshq from 'skyblock-assets/matchers/vanilla.json'
-import furfsky_reborn from 'skyblock-assets/matchers/furfsky_reborn.json'
+
 
 export interface Item {
     id?: string
@@ -36,7 +35,7 @@ const INVENTORIES = {
 
 export type Inventories = { [name in keyof typeof INVENTORIES]: Item[] }
 
-export function itemToUrl(item: Item, packName?: string): string {
+export function itemToUrl(item: Item, pack?: skyblockAssets.MatcherFile): string {
     const itemNbt: skyblockAssets.NBT = {
         display: {
             Name: item.display?.name
@@ -46,20 +45,28 @@ export function itemToUrl(item: Item, packName?: string): string {
         },
     }
     let textureUrl: string
-    if (item.head_texture)
-        textureUrl = `https://mc-heads.net/head/${item.head_texture}`
-    else
+    if (item.head_texture) {
+        // if it's a head, try without vanilla and if it fails just use the mc-heads url
+        textureUrl = skyblockAssets.getTextureUrl({
+            id: item.vanillaId,
+            nbt: itemNbt,
+            packs: pack ? [pack] : [],
+            noNullTexture: true
+        })
+        if (textureUrl === null)
+            textureUrl = `https://mc-heads.net/head/${item.head_texture}`
+    } else
         textureUrl = skyblockAssets.getTextureUrl({
             id: item.vanillaId,
             nbt: itemNbt,
-            packs: [furfsky_reborn, vanilla]
+            packs: pack ? [pack, vanilla as skyblockAssets.MatcherFile] : [vanilla as skyblockAssets.MatcherFile],
         })
     return textureUrl
 }
 
-export function skyblockItemToUrl(skyblockItem: string | Item) {
+export function skyblockItemToUrl(skyblockItem: string | Item, pack?: skyblockAssets.MatcherFile) {
     const item: Item = typeof skyblockItem === 'string' ? skyblockItemNameToItem(skyblockItem) : skyblockItem
-    const itemTextureUrl = itemToUrl(item, 'packshq')
+    const itemTextureUrl = itemToUrl(item, pack)
     return itemTextureUrl
 }
 
diff --git a/src/lib/sections/Armor.svelte b/src/lib/sections/Armor.svelte
index 655de31..285a898 100644
--- a/src/lib/sections/Armor.svelte
+++ b/src/lib/sections/Armor.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { CleanMemberProfile } from '$lib/APITypes'
 	import Inventory from '$lib/minecraft/Inventory.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
+
 	export let data: CleanMemberProfile
-	export let pack
+	export let pack: MatcherFile
 </script>
 
 {#if data.member.inventories}
diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
index 9624ec2..7ca1969 100644
--- a/src/lib/sections/Collections.svelte
+++ b/src/lib/sections/Collections.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+	import furfskyReborn from 'skyblock-assets/matchers/furfsky_reborn.json'
 	import type { CleanMemberProfile, Collection } from '$lib/APITypes'
 	import { skyblockItemToUrl } from '$lib/minecraft/inventory'
 	import ListItemWithIcon from '$lib/ListItemWithIcon.svelte'
-	import { cleanId } from '$lib/utils'
 	import Tooltip from '$lib/Tooltip.svelte'
+	import { cleanId } from '$lib/utils'
 
 	export let data: CleanMemberProfile
 
@@ -21,7 +22,10 @@
 		<h3>{cleanId(categoryName)}</h3>
 		<ul>
 			{#each collections as collection}
-				<ListItemWithIcon url={skyblockItemToUrl(collection.name)} alt={cleanId(collection.name)}>
+				<ListItemWithIcon
+					url={skyblockItemToUrl(collection.name, furfskyReborn)}
+					alt={cleanId(collection.name)}
+				>
 					<Tooltip>
 						<span slot="tooltip">
 							Amount: {collection.xp.toLocaleString()}
diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
index 8be6853..9001430 100644
--- a/src/lib/sections/Inventories.svelte
+++ b/src/lib/sections/Inventories.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+	import { skyblockItemToUrl, type Item } from '$lib/minecraft/inventory'
 	import Inventory from '$lib/minecraft/Inventory.svelte'
-	import { fade } from 'svelte/transition'
+	import type { MatcherFile } from 'skyblock-assets'
 	import { cleanId } from '$lib/utils'
-	import { skyblockItemToUrl, type Item } from '$lib/minecraft/inventory'
 
 	export let data
-	export let pack
+	export let pack: MatcherFile
 
 	let displayingInventories: string[] = []
 	for (const inventoryName in data.member.inventories)
@@ -19,11 +19,38 @@
 			vanillaId: 'nether_star',
 			display: { name: 'SkyBlock Menu' },
 		},
-		ender_chest: 'ender_chest',
-		potion_bag: 'potion',
-		fishing_bag: 'fishing_rod',
-		quiver: 'arrow',
-		wardrobe: 'leather_chestplate',
+		ender_chest: {
+			vanillaId: 'ender_chest',
+			display: { name: '\\u00a7aEnder Chest' },
+		},
+		talisman_bag: {
+			vanillaId: 'skull:3',
+			display: { name: 'Accessory Bag' },
+			head_texture: '961a918c0c49ba8d053e522cb91abc74689367b4d8aa06bfc1ba9154730985ff',
+		},
+		potion_bag: {
+			vanillaId: 'skull:3',
+			display: { name: 'Potion Bag' },
+			head_texture: '9f8b82427b260d0a61e6483fc3b2c35a585851e08a9a9df372548b4168cc817c',
+		},
+		fishing_bag: {
+			vanillaId: 'skull:3',
+			display: { name: 'Fishing Bag' },
+			head_texture: 'eb8e297df6b8dffcf135dba84ec792d420ad8ecb458d144288572a84603b1631',
+		},
+		quiver: {
+			vanillaId: 'skull:3',
+			display: {
+				name: 'Quiver',
+			},
+			head_texture: '4cb3acdc11ca747bf710e59f4c8e9b3d949fdd364c6869831ca878f0763d1787',
+		},
+		wardrobe: {
+			vanillaId: 'leather_chestplate',
+			display: {
+				name: '\\u00a7aWardrobe',
+			},
+		},
 	}
 </script>
 
@@ -38,7 +65,7 @@
 				<img
 					class="inventory-tab-icon"
 					loading="lazy"
-					src={skyblockItemToUrl(inventoryIconMap[inventoryName])}
+					src={skyblockItemToUrl(inventoryIconMap[inventoryName], pack)}
 					alt={cleanId(inventoryName)}
 				/>
 			{/if}
@@ -68,7 +95,7 @@
 		color: var(--theme-main-text);
 		border: none;
 		border-radius: 0;
-		/* padding: 0.8em; */
+		padding: 0 0.5em;
 		cursor: pointer;
 		transition-duration: 200ms;
 		height: 2.5em;
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index e8b601d..6cb5753 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -9,7 +9,40 @@
 			r.json()
 		)
 
-		const pack = params.pack ?? data?.customization?.pack
+		const packName = params.pack ?? data?.customization?.pack
+
+		let pack: MatcherFile | undefined
+
+		switch (packName) {
+			case 'ectoplasm':
+				pack = (await import('skyblock-assets/matchers/ectoplasm.json')) as any
+				break
+			case 'furfsky':
+				pack = (await import('skyblock-assets/matchers/furfsky.json')) as any
+				break
+			case 'furfsky_reborn':
+				pack = (await import('skyblock-assets/matchers/furfsky_reborn.json')) as any
+				break
+			case 'hypixel+':
+				pack = (await import('skyblock-assets/matchers/hypixel+.json')) as any
+				break
+			case 'packshq':
+				pack = (await import('skyblock-assets/matchers/packshq.json')) as any
+				break
+			case 'rnbw':
+				pack = (await import('skyblock-assets/matchers/rnbw.json')) as any
+				break
+			case 'vanilla':
+				pack = (await import('skyblock-assets/matchers/vanilla.json')) as any
+				break
+			case 'worlds_and_beyond':
+				pack = (await import('skyblock-assets/matchers/worlds_and_beyond.json')) as any
+				break
+			default:
+				// packshq is the default pack
+				pack = (await import('skyblock-assets/matchers/furfsky_reborn.json')) as any
+				break
+		}
 
 		return {
 			props: {
@@ -24,9 +57,11 @@
 	import Leaderboards from '$lib/sections/Leaderboards.svelte'
 	import Inventories from '$lib/sections/Inventories.svelte'
 	import Collections from '$lib/sections/Collections.svelte'
+	import BackgroundImage from '$lib/BackgroundImage.svelte'
 	import Username from '$lib/minecraft/Username.svelte'
 	import StatList from '$lib/sections/StatList.svelte'
 	import Infobox from '$lib/sections/Infobox.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
 	import Minions from '$lib/sections/Minions.svelte'
 	import Collapsible from '$lib/Collapsible.svelte'
 	import Skills from '$lib/sections/Skills.svelte'
@@ -40,10 +75,9 @@
 	import Toc from '$lib/Toc.svelte'
 
 	import type { CleanMemberProfile } from '$lib/APITypes'
-	import { onDestroy } from 'svelte'
 
 	export let data: CleanMemberProfile
-	export let pack: string
+	export let pack: MatcherFile
 
 	const categories = [
 		'deaths',
@@ -57,22 +91,11 @@
 		'collections',
 		'leaderboards',
 	]
-
-	// cursed svelte :D
-	$: bodyStyle = data.customization?.backgroundUrl
-		? `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
-		: ''
-
-	// get rid of the body style when we leave the page
-	// not doing this will sometimes cause the background to stay
-	onDestroy(() => {
-		bodyStyle = ''
-	})
 </script>
 
-<svelte:head>
-	{@html bodyStyle}
-</svelte:head>
+{#if data.customization?.backgroundUrl}
+	<BackgroundImage url={data.customization.backgroundUrl} />
+{/if}
 
 <Head
 	title="{data.member.username}'s SkyBlock profile ({data.member.profileName})"
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
index b20802f..97b7d78 100644
--- a/src/routes/player/[player]/index.svelte
+++ b/src/routes/player/[player]/index.svelte
@@ -28,10 +28,10 @@
 
 <script lang="ts">
 	import type { CleanProfile, CleanUser } from '$lib/APITypes'
+	import BackgroundImage from '$lib/BackgroundImage.svelte'
 	import Username from '$lib/minecraft/Username.svelte'
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
-	import { onDestroy } from 'svelte'
 
 	export let data: CleanUser
 
@@ -53,22 +53,11 @@
 
 		isActiveProfileOnline = Date.now() / 1000 - 60 < activeProfileLastSave
 	}
-
-	// cursed svelte :D
-	$: bodyStyle = data.customization?.backgroundUrl
-		? `<style>:root{--background:url(${data.customization.backgroundUrl})}</style>`
-		: ''
-
-	// get rid of the body style when we leave the page
-	// not doing this will sometimes cause the background to stay
-	onDestroy(() => {
-		bodyStyle = ''
-	})
 </script>
 
-<svelte:head>
-	{@html bodyStyle}
-</svelte:head>
+{#if data.customization?.backgroundUrl}
+	<BackgroundImage url={data.customization.backgroundUrl} />
+{/if}
 
 <Head title={data.player ? `${data.player.username}'s SkyBlock profiles` : 'Invalid player'} />
 <Header />
-- 
cgit