add inventories

5 files changed, 86 insertions, 70 deletions

diff --git a/src/lib/minecraft/Inventory.svelte b/src/lib/minecraft/Inventory.svelte
index 3d3b9c0..d29b1e0 100644
--- a/src/lib/minecraft/Inventory.svelte
+++ b/src/lib/minecraft/Inventory.svelte
@@ -4,6 +4,7 @@
 	export let items
 	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
@@ -13,14 +14,14 @@
 	let itemGroups = []
 	$: {
 		itemGroups = []
-		for (let i = 0; i < items.length; i += 9) {
-			itemGroups.push(items.slice(i, i + 9))
+		for (let i = 0; i < items.length; i += groupLimit) {
+			itemGroups.push(items.slice(i, i + groupLimit))
 		}
 	}
 </script>
 
 <div class:inventory-container-{name}={name !== ''}>
-	{#each itemGroups as itemGroup, groupIndex}
+	{#each itemGroups as itemGroup}
 		<div>
 			{#each itemGroup as item}
 				<Item {item} {pack} isslot />
@@ -28,18 +29,3 @@
 		</div>
 	{/each}
 </div>
-
-<!-- {%- macro inventory(items, name='', pack='') -%}
-	<div{% if name %} class="inventory-container-{{ name }}"{% endif %}>
-		{%- if name == 'inventory' -%}
-			{%- set items = items|slice(9)|append(items|slice(0, 9)) -%}
-		{%- endif -%}
-
-		{%- for itemData in items -%}
-			{%- if loop.index0 > 0 and loop.index0 % 9 == 0 %}</div>{%- endif -%}
-			{%- if loop.index0 % 9 == 0 %}<div>{%- endif -%}
-			{{- item(itemData, slot=true, pack=pack) -}}
-		{%- endfor -%}
-		</div>
-	</div>
-{%- endmacro -%} -->
diff --git a/src/lib/minecraft/Item.svelte b/src/lib/minecraft/Item.svelte
index 8ddc4a8..c944f1b 100644
--- a/src/lib/minecraft/Item.svelte
+++ b/src/lib/minecraft/Item.svelte
@@ -1,22 +1,26 @@
 <script lang="ts">
 	import MinecraftTooltip from './MinecraftTooltip.svelte'
 	import { formattingCodeToHtml, removeFormattingCode } from '$lib/utils'
-	import { itemToUrlCached } from './inventory'
+	import { itemToUrl } from './inventory'
 
 	export let item: any | null
 	export let isslot = true
 	export let pack = ''
 
-	$: itemLoreHtml = item.display.lore.map(l => formattingCodeToHtml(l)).join('<br>')
-	$: itemNameHtml = formattingCodeToHtml(item.display.name)
+	let itemLoreHtml: string | null
+	let itemNameHtml: string | null
+	let imageUrl: string | null
 
-	$: imageUrl = itemToUrlCached(item, pack)
+	$: itemLoreHtml = item ? item.display.lore.map(l => formattingCodeToHtml(l)).join('<br>') : null
+	$: itemNameHtml = item ? formattingCodeToHtml(item.display.name) : null
+
+	$: imageUrl = item ? itemToUrl(item, pack) : null
 </script>
 
 <MinecraftTooltip>
 	<span slot="name">{@html itemNameHtml}</span>
 	<span slot="lore">{@html itemLoreHtml}</span>
-	<span class="item item-slot" class:item-slot={isslot}>
+	<span class="item" class:item-slot={isslot}>
 		<!-- we have an if here because the item might be air -->
 		{#if item}
 			{#if imageUrl}
@@ -60,6 +64,13 @@
 		image-rendering: pixelated;
 	}
 
+	img.item-custom-head {
+		width: 0.75em;
+		height: 0.75em;
+		margin-top: 0.1875em;
+		margin-left: 0.1875em;
+	}
+
 	.item-slot {
 		margin: 0.05em;
 	}
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index fa75887..cb926b4 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -1,7 +1,7 @@
-import vanillaDamages from 'skyblock-assets/data/vanilla_damages.json'
 import * as skyblockAssets from 'skyblock-assets'
+import vanilla from 'skyblock-assets/matchers/vanilla.json'
+import packshq from 'skyblock-assets/matchers/vanilla.json'
 
-const itemToUrlCache: Record<string, string> = {}
 
 interface Item {
     id?: string
@@ -36,10 +36,7 @@ const INVENTORIES = {
 
 export type Inventories = { [name in keyof typeof INVENTORIES]: Item[] }
 
-export async function itemToUrl(item: Item, packName?: string): Promise<string> {
-    const stringifiedItem = (packName ?? 'packshq') + JSON.stringify(item)
-    if (stringifiedItem in itemToUrlCache)
-        return itemToUrlCache[stringifiedItem]
+export function itemToUrl(item: Item, packName?: string): string {
     const itemNbt: skyblockAssets.NBT = {
         display: {
             Name: item.display?.name
@@ -52,21 +49,22 @@ export async function itemToUrl(item: Item, packName?: string): Promise<string>
     if (item.head_texture)
         textureUrl = `https://mc-heads.net/head/${item.head_texture}`
     else
-        textureUrl = await skyblockAssets.getTextureUrl({
+        textureUrl = skyblockAssets.getTextureUrl({
             id: item.vanillaId,
             nbt: itemNbt,
-            pack: packName ?? 'packshq'
+            packs: [packshq, vanilla]
         })
     if (!textureUrl)
         console.log('no texture', item)
-    itemToUrlCache[stringifiedItem] = textureUrl
     return textureUrl
 }
+
 export async function skyblockItemToUrl(skyblockItemName: string) {
     const item = skyblockItemNameToItem(skyblockItemName)
     const itemTextureUrl = await itemToUrl(item, 'packshq')
     return itemTextureUrl
 }
+
 export function skyblockItemNameToItem(skyblockItemName: string): Item {
     let item: Item
     if (Object.keys(skyblockItems).includes(skyblockItemName)) {
@@ -78,6 +76,7 @@ export function skyblockItemNameToItem(skyblockItemName: string): Item {
     }
     return item
 }
+
 const skyblockItems: { [itemName: string]: Item } = {
     ink_sac: { vanillaId: 'minecraft:dye' },
     cocoa_beans: { vanillaId: 'minecraft:dye:3' },
@@ -102,41 +101,4 @@ const skyblockItems: { [itemName: string]: Item } = {
         head_texture: '39b6e047d3b2bca85e8cc49e5480f9774d8a0eafe6dfa9559530590283715142'
     },
     hard_stone: { vanillaId: 'minecraft:stone' },
-}
-
-export function itemToUrlCached(item: Item, packName?: string): string {
-    if (!item) return null
-    if (typeof item === 'string') {
-        let itemId: string = vanillaDamages[item] ?? item
-        let damage: number = null
-        // remove the minecraft: namespace since we already know it's all vanilla
-        if (itemId.startsWith('minecraft:')) itemId = itemId.slice('minecraft:'.length)
-        // split the damage into its own variable
-        if (itemId.includes(':')) {
-            damage = parseInt(itemId.split(':')[1])
-            itemId = itemId.split(':')[0]
-        }
-        item = {
-            count: 1,
-            display: {
-                glint: false,
-                lore: null,
-                name: null
-            },
-            id: null,
-            // vanillaId: damage === null ? `minecraft:${itemId}` : `minecraft:${itemId}:${damage}`
-            vanillaId: `minecraft:${itemId}`
-        }
-    }
-    const stringifiedItem = (packName ?? 'packshq') + JSON.stringify(item)
-    return itemToUrlCache[stringifiedItem]
-}
-/** Get all the items in an inventories object to cache them */
-export async function cacheInventories(inventories: Inventories, packName?: string) {
-    const promises: Promise<any>[] = []
-    for (const inventoryItems of Object.values(inventories ?? {}))
-        for (const inventoryItem of inventoryItems)
-            if (inventoryItem)
-                promises.push(itemToUrl(inventoryItem, packName))
-    await Promise.all(promises)
 }
\ No newline at end of file
diff --git a/src/lib/sections/Armor.svelte b/src/lib/sections/Armor.svelte
index c4e7950..ab0e73b 100644
--- a/src/lib/sections/Armor.svelte
+++ b/src/lib/sections/Armor.svelte
@@ -4,4 +4,6 @@
 	export let pack
 </script>
 
-<Inventory items={data.member.inventories.armor} name="armor" {pack} />
+<span>
+	<Inventory items={data.member.inventories.armor} name="armor" groupLimit={1} {pack} />
+</span>
diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte
new file mode 100644
index 0000000..49a00c2
--- /dev/null
+++ b/src/lib/sections/Inventories.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import Inventory from '$lib/minecraft/Inventory.svelte'
+	import { fade } from 'svelte/transition'
+	import { cleanId } from '$lib/utils'
+
+	export let data
+	export let pack
+
+	let displayingInventories: string[] = []
+	for (const inventoryName in data.member.inventories)
+		if (inventoryName !== 'armor') displayingInventories.push(inventoryName)
+
+	let selectedInventoryName: string = displayingInventories[0]
+</script>
+
+<div id="inventory-tabs">
+	{#each displayingInventories as inventoryName}
+		<button
+			class="inventory-tab"
+			class:inventory-tab-active={inventoryName === selectedInventoryName}
+			on:click={() => (selectedInventoryName = inventoryName)}
+		>
+			{cleanId(inventoryName)}
+		</button>
+	{/each}
+</div>
+{#each displayingInventories as inventoryName}
+	{#if inventoryName === selectedInventoryName}
+		<div id={inventoryName} class="inventory-content">
+			<Inventory items={data.member.inventories[inventoryName]} {pack} />
+		</div>
+	{/if}
+{/each}
+
+<style>
+	#inventory-tabs {
+		margin-bottom: 1em;
+		overflow: hidden;
+		border-radius: 1em;
+		max-width: max-content;
+		width: min(40em, 100%);
+	}
+	.inventory-tab {
+		background-color: var(--theme-lighter-background);
+		color: var(--theme-main-text);
+		border: none;
+		padding: 1em;
+		cursor: pointer;
+		transition-duration: 200ms;
+	}
+	.inventory-tab:hover,
+	.inventory-tab-active {
+		background-color: var(--theme-lightest-background);
+	}
+</style>