add items

7 files changed, 114 insertions, 46 deletions

diff --git a/src/lib/GlobalTooltip.svelte b/src/lib/GlobalTooltip.svelte
index 61e5514..2f7b738 100644
--- a/src/lib/GlobalTooltip.svelte
+++ b/src/lib/GlobalTooltip.svelte
@@ -5,7 +5,8 @@
 
 	// this script handles the item hover lore tooltip
 	onMount(() => {
-		const itemEls = document.getElementsByClassName('item')
+		// TODO: have something that automatically registers the event listener when we create a new MinecraftTooltip
+		const itemEls = document.getElementsByClassName('minecraft-tooltip')
 		let tooltipLocked = false
 		function moveTooltipToMouse(e) {
 			const mouseX = e.pageX
@@ -38,23 +39,19 @@
 			}
 		})
 
-		for (const itemEl of itemEls) {
-			if (!(itemEl instanceof HTMLElement)) continue
+		for (const itemEl of itemEls as unknown as HTMLElement[]) {
+			// if (!(itemEl instanceof HTMLElement)) continue
 
 			// if the item doesn't have lore or a name, that must mean it's air
-			if (!itemEl.dataset.loreHtml && !itemEl.dataset.nameHtml) continue
+			// if (!itemEl.dataset.loreHtml && !itemEl.dataset.nameHtml) continue
 
 			itemEl.addEventListener('mouseover', e => {
 				if (!tooltipLocked) {
 					moveTooltipToMouse(e)
-					const loreHtml = itemEl.dataset.loreHtml
-						.replace(/&lt;/g, '<')
-						.replace(/&gt;/g, '>')
-						.replace(/&quot;/g, '"')
-					const nameHtml = itemEl.dataset.nameHtml
-						.replace(/&lt;/g, '<')
-						.replace(/&gt;/g, '>')
-						.replace(/&quot;/g, '"')
+					// copy the lore and name from the tooltip-lore and
+					// tooltip-name elements inside the item el
+					const loreHtml = itemEl.getElementsByClassName('tooltip-lore')[0].innerHTML
+					const nameHtml = itemEl.getElementsByClassName('tooltip-name')[0].innerHTML
 					tooltipEl.innerHTML = `<p class="item-lore-name">${nameHtml}</p><p class="item-lore-text">${loreHtml}</p>`
 				}
 				tooltipEl.style.display = 'block'
@@ -76,14 +73,8 @@
 					tooltipEl.style.userSelect = null
 					tooltipEl.style.pointerEvents = null
 				}
-				const loreHtml = itemEl.dataset.loreHtml
-					.replace(/&lt;/g, '<')
-					.replace(/&gt;/g, '>')
-					.replace(/&quot;/g, '"')
-				const nameHtml = itemEl.dataset.nameHtml
-					.replace(/&lt;/g, '<')
-					.replace(/&gt;/g, '>')
-					.replace(/&quot;/g, '"')
+				const loreHtml = itemEl.getElementsByClassName('tooltip-lore')[0].innerHTML
+				const nameHtml = itemEl.getElementsByClassName('tooltip-name')[0].innerHTML
 				tooltipEl.innerHTML = `<p class="item-lore-name">${nameHtml}</p><p class="item-lore-text">${loreHtml}</p>`
 			})
 			document.addEventListener('mousedown', e => {
@@ -99,3 +90,25 @@
 </script>
 
 <div id="global-tooltip" style="display: none" bind:this={tooltipEl} />
+
+<style>
+	#global-tooltip {
+		position: absolute;
+		user-select: none;
+		pointer-events: none;
+		overflow: hidden;
+		z-index: 100;
+		background-color: #0a0a0aee;
+		padding: 0 0.25rem;
+		border-radius: 3px;
+		box-shadow: 0 0 0 3px #206, 0 0 0 6px #000;
+		font-family: Minecraft;
+		white-space: nowrap;
+	}
+	#global-tooltip :global(p) {
+		margin: 0;
+	}
+	#global-tooltip :global(.item-lore-name) {
+		margin-bottom: 0.5em;
+	}
+</style>
diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 48f5167..b35a9a7 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation'
 
 	export let backArrowHref = '/'
-	let searchUserValue: string = ''
+	let searchUserValue = ''
 </script>
 
 <header id="main-header">
diff --git a/src/lib/Tooltip.svelte b/src/lib/Tooltip.svelte
index 55cbc21..1251634 100644
--- a/src/lib/Tooltip.svelte
+++ b/src/lib/Tooltip.svelte
@@ -2,7 +2,7 @@
     @component
 
     A tooltip that works without requiring JavaScript to be enabled.
-    When you hover or click on the element, it shows the value in a box above the element.
+    When you hover or click on the element, it shows the content in a box above the element.
  -->
 
 <span class="tooltip-container" tabindex="1">
@@ -14,7 +14,6 @@
 	</span>
 </span>
 
-<!-- <li class="tooltip list-item-with-icon" data-tooltip="{% if skill.levelXpRequired != null %}{{ ((skill.levelXp/skill.levelXpRequired)*100)|round }}% to next level, {{ skill.levelXp|round|cleannumber }}/{{ skill.levelXpRequired|formatnumber(3) }} xp{% else %}{{ skill.levelXp|round|cleannumber }} extra xp{% endif %}" tabindex="1" style="background: url('{{ imageUrl }}') 0 0/1em no-repeat;"></li> -->
 <style>
 	.tooltip-container {
 		position: relative;
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>
diff --git a/src/lib/sections/Infobox.svelte b/src/lib/sections/Infobox.svelte
index 3efc913..756987d 100644
--- a/src/lib/sections/Infobox.svelte
+++ b/src/lib/sections/Infobox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { generateInfobox, prettyTimestamp } from '$lib/profile'
+	import { generateInfobox } from '$lib/profile'
 	import Username from '$lib/minecraft/Username.svelte'
 	import Emoji from '$lib/Emoji.svelte'
 
diff --git a/src/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte
index 790da6d..7111c43 100644
--- a/src/lib/sections/Skills.svelte
+++ b/src/lib/sections/Skills.svelte
@@ -61,4 +61,14 @@
 		image-rendering: crisp-edges;
 		image-rendering: pixelated;
 	}
+
+	ul {
+		margin-top: 0;
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		grid-column-gap: 2em;
+	}
+	ul > li {
+		width: 10em;
+	}
 </style>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index ae0c5f0..f16021d 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -68,8 +68,11 @@ export function formattingCodeToHtml(formatted: string): string {
     reset()
     return htmlOutput
 }
+
+// we store the regex here so we don't have to build the object every time
+const formattingCodeRegex = new RegExp(colorCodeCharacter + '.', 'g')
 export function removeFormattingCode(formatted: string): string {
-    return formatted.replace(new RegExp(colorCodeCharacter + '.', 'g'), '')
+    return formatted.replace(formattingCodeRegex, '')
 }
 
 function moveToEndOfId(word: string, thing: string) {