aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/lib/APITypes.d.ts7
-rw-r--r--src/lib/minecraft/Item.svelte68
-rw-r--r--src/lib/minecraft/ItemIcon.svelte75
-rw-r--r--src/lib/minecraft/inventory.ts8
-rw-r--r--src/routes/player/[player]/[profile]/sections/Inventories.svelte30
5 files changed, 117 insertions, 71 deletions
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index ac472d1..23329c9 100644
--- 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
index 42bc3ce..d2ac19d 100644
--- 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
new file mode 100644
index 0000000..b5506e2
--- /dev/null
+++ 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
index bd07d2a..535eaae 100644
--- 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
index 1dd7d28..ff82e8e 100644
--- 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>
generated by cgit (git 2.46.0) at 2025-06-18 15:24:28 +0000