From bad8a1f2c7519ef63350c26b539dfc6aeb9ab94c Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Thu, 17 Feb 2022 19:12:57 +0000
Subject: add items

---
 package.json                                |  3 +-
 src/lib/GlobalTooltip.svelte                | 53 +++++++++++-------
 src/lib/Header.svelte                       |  2 +-
 src/lib/Tooltip.svelte                      |  3 +-
 src/lib/minecraft/Item.svelte               | 85 ++++++++++++++++++++++-------
 src/lib/sections/Infobox.svelte             |  2 +-
 src/lib/sections/Skills.svelte              | 10 ++++
 src/lib/utils.ts                            |  5 +-
 src/routes/__layout.svelte                  |  3 +-
 src/routes/player/[player]/[profile].svelte | 16 +++++-
 yarn.lock                                   |  5 ++
 11 files changed, 138 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index da232c1..3b9bcfd 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
   "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
-    "cookie": "^0.4.1"
+    "cookie": "^0.4.1",
+    "skyblock-assets": "^1.1.12"
   },
   "packageManager": "yarn@3.1.1"
 }
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) {
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 2da6384..7cfa367 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import '../app.css'
+	import GlobalTooltip from '$lib/GlobalTooltip.svelte'
 </script>
 
+<GlobalTooltip />
 <nav />
-
 <slot />
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 36b731a..bd9402d 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+	import { cacheInventories } from '$lib/minecraft/inventory'
 	import type { Load } from '@sveltejs/kit'
 	import { API_URL } from '$lib/api'
 
@@ -9,10 +10,14 @@
 			r.json()
 		)
 
+		const pack = params.pack ?? data?.customization?.pack
+
+		await cacheInventories(data.member.inventories, pack)
+
 		return {
 			props: {
 				data,
-				pack: params.pack ?? data?.customization?.pack,
+				pack,
 			},
 		}
 	}
@@ -121,3 +126,12 @@
 		</div>
 	</div>
 </main>
+
+<style>
+	.profile-skills {
+		display: inline-block;
+		position: absolute;
+		margin: 1em;
+		margin-top: 1.6em;
+	}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 93774d0..7579f31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1571,6 +1571,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+skyblock-assets@^1.1.12:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/skyblock-assets/-/skyblock-assets-1.1.12.tgz#d6f11fc78b864daca571d8e99d39cda87793b334"
+  integrity sha512-IP/uPRhzMABhZ0snQ3zkn+kfxkpAvFsFF+f2CxF7LYnloK0qGEV9kD8HDSoty/yT2h62QF5s+ozYHTeouLWkCw==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
-- 
cgit