1 files changed, 64 insertions, 21 deletions
diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
index 86bd8f1..8ddc4a8 100644
--- a/src/lib/minecraft/Item.svelte
+++ b/src/lib/minecraft/Item.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { formattingCodeToHtml } from '$lib/utils'
+	import MinecraftTooltip from './MinecraftTooltip.svelte'
+	import { formattingCodeToHtml, removeFormattingCode } from '$lib/utils'
+	import { itemToUrlCached } from './inventory'
 
 	export let item: any | null
 	export let isslot = true
@@ -7,26 +9,67 @@
 
 	$: itemLoreHtml = item.display.lore.map(l => formattingCodeToHtml(l)).join('<br>')
 	$: itemNameHtml = formattingCodeToHtml(item.display.name)
-</script>
 
-<!-- {#if data}{/if} -->
+	$: imageUrl = itemToUrlCached(item, pack)
+</script>
 
-<!-- {%- macro item(data, slot=true, pack='') -%}
-	{%- if data -%}
-		{%- set itemLoreHtml -%}
-			{%- for line in data.display.lore -%}
-				{{- line|formattingCodeToHtml -}}{% if not loop.last %}<br>{% endif %}
-			{%- endfor -%}
-		{%- endset -%}
-		{%- set itemNameHtml = data.display.name|formattingCodeToHtml -%}
-	{%- endif -%}
-	<span class="item{% if slot %} item-slot{% endif %}"{% if data %} data-lore-html="{{- itemLoreHtml -}}" data-name-html="{{- itemNameHtml -}}"{% endif %}>
-		{%- if data -%}
-			{%- set imageUrl = data|itemToUrl(pack) -%}
-			{%- if imageUrl -%}
-				<img loading="lazy" src="{{ imageUrl }}" alt="{{ data.display.name|removeFormattingCode }}"{% if imageUrl|startsWith('https://mc-heads.net/head/') %} class="item-custom-head"{% endif %}>
-			{%- endif -%}
-			{%- if data.count != 1 %}<span class="item-count">{{ data.count }}</span>{% endif -%}
-		{%- endif -%}
+<MinecraftTooltip>
+	<span slot="name">{@html itemNameHtml}</span>
+	<span slot="lore">{@html itemLoreHtml}</span>
+	<span class="item item-slot" class:item-slot={isslot}>
+		<!-- we have an if here because the item might be air -->
+		{#if item}
+			{#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 !== 1}
+				<span class="item-count">{item.count}</span>
+			{/if}
+		{/if}
 	</span>
-{%- endmacro -%} -->
+</MinecraftTooltip>
+
+<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;
+	}
+	.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;
+	}
+
+	.item-slot {
+		margin: 0.05em;
+	}
+
+	.item-count {
+		font-size: 0.45em;
+		float: right;
+		position: relative;
+		top: 1.21em;
+		right: 0.1em;
+		font-family: Minecraft;
+	}
+</style>