diff options
Diffstat (limited to 'src/lib/sections')
| -rw-r--r-- | src/lib/sections/AccessoryBagUpgrades.svelte | 100 | ||||
| -rw-r--r-- | src/lib/sections/Inventories.svelte | 27 |
2 files changed, 119 insertions, 8 deletions
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 :( */ |