diff options
| -rw-r--r-- | src/lib/APITypes.d.ts | 17 | ||||
| -rw-r--r-- | src/lib/minecraft/inventory.ts | 4 | ||||
| -rw-r--r-- | src/lib/sections/AccessoryBagUpgrades.svelte | 100 | ||||
| -rw-r--r-- | src/lib/sections/Inventories.svelte | 27 |
4 files changed, 137 insertions, 11 deletions
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts index ff84d46..6402721 100644 --- a/src/lib/APITypes.d.ts +++ b/src/lib/APITypes.d.ts @@ -26,6 +26,7 @@ export interface CleanMemberProfilePlayer extends CleanPlayer { harp: HarpData coopInvitation: CoopInvitation | null farmingContests: FarmingContests + accessoryBagUpgrades: AccessoryBagUpgrades left: boolean } @@ -90,7 +91,7 @@ export declare const INVENTORIES: { armor: string inventory: string ender_chest: string - talisman_bag: string + accessory_bag: string potion_bag: string fishing_bag: string quiver: string @@ -419,3 +420,17 @@ export interface Skills { */ apiEnabled: boolean } + + +export interface AccessoryBagUpgrades { + tuningTemplates: Record<string, number>[] + upgrades: { + purchased: number + coinsSpent: number + extraSlots: number + } + powers: { + selected: string | null + list: string[] + } +} diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts index 1d950b8..1d2a91e 100644 --- a/src/lib/minecraft/inventory.ts +++ b/src/lib/minecraft/inventory.ts @@ -25,7 +25,7 @@ const INVENTORIES = { armor: 'inv_armor', inventory: 'inv_contents', ender_chest: 'ender_chest_contents', - talisman_bag: 'talisman_bag', + accessory_bag: 'talisman_bag', potion_bag: 'potion_bag', fishing_bag: 'fishing_bag', quiver: 'quiver', @@ -44,7 +44,7 @@ export const inventoryIconMap: Record<string, string | Item> = { vanillaId: 'ender_chest', display: { name: '\\u00a7aEnder Chest' }, }, - talisman_bag: { + accessory_bag: { vanillaId: 'skull:3', display: { name: 'Accessory Bag' }, headTexture: '961a918c0c49ba8d053e522cb91abc74689367b4d8aa06bfc1ba9154730985ff', diff --git a/src/lib/sections/AccessoryBagUpgrades.svelte b/src/lib/sections/AccessoryBagUpgrades.svelte new file mode 100644 index 0000000..74530d1 --- /dev/null +++ b/src/lib/sections/AccessoryBagUpgrades.svelte @@ -0,0 +1,100 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Emoji from '$lib/Emoji.svelte' + import ListItemWithIcon from '$lib/ListItemWithIcon.svelte' + import { cleanId, skyblockTime } from '$lib/utils' + + export let data: CleanMemberProfile + + $: bagData = data.member.accessoryBagUpgrades +</script> + +<span class="accessory-bag-upgrades"> + <h3>Upgrades</h3> + <div class="accessory-bag-info-text"> + <p>Purchased: <b>{bagData.upgrades.purchased}</b></p> + <p>Coins spent: <b>{bagData.upgrades.coinsSpent.toLocaleString()}</b></p> + <p>Extra slots: <b>{bagData.upgrades.extraSlots}</b></p> + </div> + + <h3>Powers</h3> + {#if bagData.powers.selected} + <p class="accessory-bag-info-text"> + Selected: <b>{cleanId(bagData.powers.selected)}</b> + </p> + {/if} + <ul> + {#each bagData.powers.list as power} + <li> + {#if bagData.powers.selected === power} + <b>{cleanId(power)}</b> + {:else} + {cleanId(power)} + {/if} + </li> + {/each} + </ul> + + <div class="tuning-templates"> + {#each bagData.tuningTemplates as template, template_index} + <div class="tuning-template"> + <h3>Template #{template_index + 1}</h3> + <div class="accessory-bag-info-text"> + {#each Object.entries(template) as [statName, statValue]} + <p>{cleanId(statName)}: <b>{statValue}</b></p> + {/each} + </div> + </div> + {/each} + </div> +</span> + +<style> + p, + ul { + margin: 0; + } + ul { + padding-left: 1.5em; + } + h3 { + margin: 0.5em 0 0 0; + } + + .accessory-bag-info-text { + color: var(--theme-darker-text); + } + .accessory-bag-info-text b { + color: var(--theme-main-text); + } + + .tuning-templates { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + margin-top: 1rem; + } + .tuning-template { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + } + .tuning-template h3 { + margin: 0; + } + + .accessory-bag-upgrades { + /* width: 5rem; */ + } + @media only screen and (min-width: 1160px) { + .accessory-bag-upgrades { + display: inline-grid; + position: relative; + top: -1.5em; + left: 0.5em; + } + } +</style> diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte index 07d5504..1dd7d28 100644 --- a/src/lib/sections/Inventories.svelte +++ b/src/lib/sections/Inventories.svelte @@ -3,8 +3,10 @@ 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' - export let data + export let data: CleanMemberProfile export let pack: MatcherFile let displayingInventories: string[] = [] @@ -35,13 +37,18 @@ {/each} </div> {/if} -{#each displayingInventories as inventoryName} - {#if inventoryName === selectedInventoryName} - <div id={inventoryName} class="inventory-content"> - <Inventory items={data.member.inventories[inventoryName]} {pack} name={inventoryName} /> - </div> - {/if} -{/each} +{#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} + {/if} + {/each} +{/if} <style> #inventory-tabs { @@ -80,6 +87,10 @@ background-color: rgba(40, 40, 40, 0.9); } + .inventory-content { + display: inline-grid; + } + @media only screen and (max-width: 480px) { .inventory-content :global(.item) { /* there's no good way to override the existing 32px size without !important :( */ |