skyblockstats · nea89o · May 27, 2023
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
@@ -101,7 +101,12 @@ export declare const INVENTORIES: {
 	wardrobe: string,
 	personal_vault: string
 }
-export declare type Inventories = {
+export declare type Backpack = {
+	icon: Item | null,
+	items: Item[],
+	slot: string,
+};
+export declare type Inventories = { backpacks: Backpack[] } & {
 	[name in keyof typeof INVENTORIES]: Item[]
 }
 

diff --git 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>
diff --git a/src/lib/minecraft/ItemIcon.svelte b/src/lib/minecraft/ItemIcon.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { MatcherFile } from 'skyblock-assets'
+	import { itemToUrl } from './inventory'
+	import { removeFormattingCode } from '$lib/utils'
+
+	export let isslot = true
+	export let item: any | null
+	export let pack: MatcherFile | undefined = undefined
+	export let headSize: number | undefined = undefined
+	let imageUrl: string | null
+	$: imageUrl = item ? itemToUrl(item, pack, headSize) : null
+</script>
+
+{#if item}
+	<span class="item" class:item-slot={isslot}>
+		{#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>
+{:else}
+	<!-- don't do all that if the item doesn't actually exist -->
+	<span class="item" class:item-slot={isslot} />
+{/if}
+
+<style>
+	.item-count {
+		font-size: 0.45em;
+		float: right;
+		position: relative;
+		top: 1.21em;
+		right: 0.1em;
+		font-family: Minecraft, 'Atkinson Hyperlegible', sans-serif;
+	}
+	.item-slot {
+		border: 1px solid #888;
+		border-radius: 0.1em;
+		margin: 0.05em;
+	}
+
+	.item {
+		display: inline-block;
+		font-size: 32px;
+		width: 1.2em;
+		height: 1.2em;
+		transition-property: font-size;
+		transition-duration: 500ms;
+	}
+	.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;
+	}
+</style>
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
@@ -30,6 +30,7 @@ const INVENTORIES = {
     fishing_bag: 'fishing_bag',
     quiver: 'quiver',
     trick_or_treat_bag: 'candy_inventory_contents',
+    backpack: 'backpack_contents',
     wardrobe: 'wardrobe_contents',
     personal_vault: 'personal_vault_contents'
 }
@@ -79,6 +80,13 @@ export const inventoryIconMap: Record<string, string | Item> = {
         },
         headTexture: 'e50f712e877dfd910c97f3819a200a05d49ee6b83b592686e099b9ecd443f228',
     },
+    backpacks: {
+        vanillaId: 'skull:3',
+        display: {
+            name: 'Backpacks',
+        },
+        headTexture: '1f8405116c1daa7ce2f012591458d50246d0a467bcb95a5a2c033aefd6008b63'
+    },
     personal_vault: {
         vanillaId: 'iron_door',
         display: {

diff --git a/src/routes/player/[player]/[profile]/sections/Inventories.svelte b/src/routes/player/[player]/[profile]/sections/Inventories.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { inventoryIconMap, skyblockItemToUrl, type Item } from '$lib/minecraft/inventory'
+	import { inventoryIconMap, skyblockItemToUrl } from '$lib/minecraft/inventory'
 	import Inventory from '$lib/minecraft/Inventory.svelte'
 	import type { MatcherFile } from 'skyblock-assets'
 	import { cleanId } from '$lib/utils'
 	import AccessoryBagUpgrades from './AccessoryBagUpgrades.svelte'
 	import type { CleanMemberProfile } from '$lib/APITypes'
+	import ItemIcon from '$lib/minecraft/ItemIcon.svelte'
 
 	export let data: CleanMemberProfile
 	export let pack: MatcherFile
@@ -40,11 +41,24 @@
 {#if data.member.inventories}
 	{#each displayingInventories as inventoryName}
 		{#if inventoryName === selectedInventoryName}
-			<span id={inventoryName} class="inventory-content">
-				<Inventory items={data.member.inventories[inventoryName]} {pack} name={inventoryName} />
-			</span>
-			{#if inventoryName == 'accessory_bag'}
-				<AccessoryBagUpgrades {data} />
+			{#if inventoryName == 'backpacks'}
+				{#each data.member.inventories.backpacks as backpack}
+					<p class="backpack-name">
+						{#if backpack.icon}
+							<ItemIcon {pack} headSize={50} item={backpack.icon} isslot={false} />
+						{/if} Backpack #{backpack.slot}
+					</p>
+					<span id={inventoryName} class="inventory-content">
+						<Inventory items={backpack.items} {pack} name={'backpack'} />
+					</span>
+				{/each}
+			{:else}
+				<span id={inventoryName} class="inventory-content">
+					<Inventory items={data.member.inventories[inventoryName]} {pack} name={inventoryName} />
+				</span>
+				{#if inventoryName == 'accessory_bag'}
+					<AccessoryBagUpgrades {data} />
+				{/if}
 			{/if}
 		{/if}
 	{/each}
@@ -102,4 +116,8 @@
 			font-size: 16px !important;
 		}
 	}
+	.backpack-name {
+		display: flex;
+		align-items: center;
+	}
 </style>