7 files changed, 48 insertions, 31 deletions
diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte
index d29b1e0..3068f67 100644
--- a/src/lib/minecraft/Inventory.svelte
+++ b/src/lib/minecraft/Inventory.svelte
@@ -1,22 +1,24 @@
 <script lang="ts">
+	import type { Inventory, Item as APIItem } from '$lib/APITypes'
+
 	import Item from './Item.svelte'
 
-	export let items
+	export let items: Inventory
 	export let name = ''
 	export let pack = ''
 	export let groupLimit = 9
 
-	if (name === 'inventory')
-		// in the inventory, the first 9 items are the hotbar and should be at the end
-		items = items.slice(9).concat(items.slice(0, 9))
-
 	// each item group has 9 items
-	let itemGroups = []
+	let itemGroups: APIItem[][] = []
 	$: {
 		itemGroups = []
 		for (let i = 0; i < items.length; i += groupLimit) {
 			itemGroups.push(items.slice(i, i + groupLimit))
 		}
+		if (name === 'inventory') {
+			// in the inventory, the first 9 items are the hotbar and should be at the end
+			itemGroups = itemGroups.slice(1).concat(itemGroups.slice(0, 1))
+		}
 	}
 </script>
 
diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
index c944f1b..9f2dcc3 100644
--- a/src/lib/minecraft/Item.svelte
+++ b/src/lib/minecraft/Item.svelte
@@ -17,12 +17,12 @@
 	$: imageUrl = item ? itemToUrl(item, pack) : null
 </script>
 
-<MinecraftTooltip>
-	<span slot="name">{@html itemNameHtml}</span>
-	<span slot="lore">{@html itemLoreHtml}</span>
-	<span class="item" class:item-slot={isslot}>
-		<!-- we have an if here because the item might be air -->
-		{#if item}
+{#if item}
+	<MinecraftTooltip>
+		<span slot="name">{@html itemNameHtml}</span>
+		<span slot="lore">{@html itemLoreHtml}</span>
+		<span class="item" class:item-slot={isslot}>
+			<!-- we have an if here because the item might be air -->
 			{#if imageUrl}
 				<img
 					loading="lazy"
@@ -34,9 +34,12 @@
 			{#if item.count !== 1}
 				<span class="item-count">{item.count}</span>
 			{/if}
-		{/if}
-	</span>
-</MinecraftTooltip>
+		</span>
+	</MinecraftTooltip>
+{:else}
+	<!-- don't do all that if the item doesn't actually exist -->
+	<span class="item" class:item-slot={isslot} />
+{/if}
 
 <style>
 	.item {
diff --git a/src/lib/minecraft/MinecraftTooltip.svelte b/src/lib/minecraft/MinecraftTooltip.svelte
index 9c4e274..ae68f8b 100644
--- a/src/lib/minecraft/MinecraftTooltip.svelte
+++ b/src/lib/minecraft/MinecraftTooltip.svelte
@@ -3,15 +3,23 @@
 
     A tooltip that looks like when you hover over a Minecraft item in an inventory. This requires JavaScript.
  -->
+<script lang="ts">
+	import { registerItem } from '$lib/GlobalTooltip'
+	import { onMount } from 'svelte'
 
-<span class="minecraft-tooltip">
+	let el
+
+	onMount(() => {
+		registerItem(el)
+	})
+</script>
+
+<span class="minecraft-tooltip" bind:this={el}>
 	<span class="tooltip-name">
 		<slot name="name" />
-	</span>
-	<span class="tooltip-lore">
+	</span><span class="tooltip-lore">
 		<slot name="lore" />
-	</span>
-	<slot />
+	</span><slot />
 </span>
 
 <style>
diff --git a/src/lib/minecraft/Username.svelte b/src/lib/minecraft/Username.svelte
index 555a226..701e50c 100644
--- a/src/lib/minecraft/Username.svelte
+++ b/src/lib/minecraft/Username.svelte
@@ -22,16 +22,13 @@
 
 <ConditionalLink href="/player/{player.username}" isWrapped={hyperlinkToProfile}>
 	{#if headType == '3d'}
-		<Head3d {player} isPartOfUsername={true} />
-	{:else if headType == '2d'}
+		<Head3d {player} isPartOfUsername={true} />{:else if headType == '2d'}
 		<Head2d {player} isPartOfUsername={true} />
-	{/if}
-	{#if prefix}
+	{/if}{#if prefix}
 		<span class="username-rank-prefix">
 			{@html formattingCodeToHtml(player.rank.colored)}
 		</span>
-	{/if}
-	<span class="username" style="color: {player.rank.color}">{player.username}</span>
+	{/if}<span class="username" style="color: {player.rank.color}">{player.username}</span>
 </ConditionalLink>
 
 <style>
diff --git a/src/lib/minecraft/heads/Head2d.svelte b/src/lib/minecraft/heads/Head2d.svelte
index d4e9ca8..9d71551 100644
--- a/src/lib/minecraft/heads/Head2d.svelte
+++ b/src/lib/minecraft/heads/Head2d.svelte
@@ -6,7 +6,7 @@
 <img
 	loading="lazy"
 	class="head head2d"
-	class:userHead={isPartOfUsername}
+	class:player-head={isPartOfUsername}
 	src="https://crafatar.com/avatars/{player.uuid}?size=8&overlay"
 	alt="{player.username}'s face"
 />
@@ -27,4 +27,8 @@
 		height: 1em;
 		width: 1em;
 	}
+
+	.player-head {
+		margin-right: 0.2em;
+	}
 </style>
diff --git a/src/lib/minecraft/heads/Head3d.svelte b/src/lib/minecraft/heads/Head3d.svelte
index f8d2657..2400f4b 100644
--- a/src/lib/minecraft/heads/Head3d.svelte
+++ b/src/lib/minecraft/heads/Head3d.svelte
@@ -6,7 +6,7 @@
 <img
 	loading="lazy"
 	class="head head3d"
-	class:userHead={isPartOfUsername}
+	class:player-head={isPartOfUsername}
 	src="https://www.mc-heads.net/head/{player.uuid}/128"
 	alt="{player.username}'s head"
 />
@@ -24,4 +24,8 @@
 		height: 1em;
 		width: 1em;
 	}
+
+	.player-head {
+		margin-right: 0.2em;
+	}
 </style>
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index cb926b4..faaea85 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,6 +1,7 @@
 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'
 
 
 interface Item {
@@ -52,10 +53,8 @@ export function itemToUrl(item: Item, packName?: string): string {
         textureUrl = skyblockAssets.getTextureUrl({
             id: item.vanillaId,
             nbt: itemNbt,
-            packs: [packshq, vanilla]
+            packs: [furfsky_reborn, vanilla]
         })
-    if (!textureUrl)
-        console.log('no texture', item)
     return textureUrl
 }