1 files changed, 4 insertions, 64 deletions

diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
index 42bc3ce..d2ac19d 100644
--- a/src/lib/minecraft/Item.svelte
+++ b/src/lib/minecraft/Item.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { cleanId, formattingCodeToHtml, removeFormattingCode, TIER_COLORS } from '$lib/utils'
+	import { cleanId, formattingCodeToHtml, TIER_COLORS } from '$lib/utils'
 	import MinecraftTooltip from './MinecraftTooltip.svelte'
 	import type { MatcherFile } from 'skyblock-assets'
-	import { itemToUrl } from './inventory'
+	import ItemIcon from './ItemIcon.svelte'
 
 	export let item: any | null
 	export let isslot = true
@@ -11,7 +11,6 @@
 
 	let itemLoreHtml: string | null
 	let itemNameHtml: string | null
-	let imageUrl: string | null
 
 	let extraLore: string[] = []
 	if (!item?.display?.lore && item?.tier) {
@@ -42,74 +41,15 @@
 		}
 		itemNameHtml = itemDisplayName ? formattingCodeToHtml(itemDisplayName) : null
 	}
-
-	$: imageUrl = item ? itemToUrl(item, pack, headSize) : null
 </script>
 
 {#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"
-					src={imageUrl}
-					alt={removeFormattingCode(item.display.name)}
-					class:item-custom-head={imageUrl.startsWith('https://mc-heads.net/head/')}
-				/>
-			{/if}
-			{#if item.count !== undefined && item.count !== 1}
-				<span class="item-count">{item.count}</span>
-			{/if}
-		</span>
+		<ItemIcon {item} {isslot} {pack} {headSize} />
 	</MinecraftTooltip>
 {:else}
 	<!-- don't do all that if the item doesn't actually exist -->
-	<span class="item" class:item-slot={isslot} />
+	<ItemIcon {isslot} {item} />
 {/if}
-
-<style>
-	.item {
-		display: inline-block;
-		font-size: 32px;
-		width: 1.2em;
-		height: 1.2em;
-		transition-property: font-size;
-		transition-duration: 500ms;
-	}
-	.item-slot {
-		border: 1px solid #888;
-		border-radius: 0.1em;
-		margin: 0.05em;
-	}
-	.item img {
-		position: absolute;
-		margin-top: 0.075em;
-		margin-left: 0.075em;
-		width: 1em;
-		height: 1em;
-	}
-	/* only pixelate items if they're not a head */
-	.item img:not(.item-custom-head) {
-		image-rendering: crisp-edges;
-		image-rendering: pixelated;
-	}
-
-	img.item-custom-head {
-		width: 0.75em;
-		height: 0.75em;
-		margin-top: 0.1875em;
-		margin-left: 0.1875em;
-	}
-
-	.item-count {
-		font-size: 0.45em;
-		float: right;
-		position: relative;
-		top: 1.21em;
-		right: 0.1em;
-		font-family: Minecraft, 'Atkinson Hyperlegible', sans-serif;
-	}
-</style>