diff options
| author | mat <github@matdoes.dev> | 2022-02-20 02:16:09 -0600 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-02-20 02:16:09 -0600 |
| commit | 582409e7cb1598b65bee6d1023b77620bb3791af (patch) | |
| tree | 522b3cb23451c01d097386014e9b2632aab5bfbe /src/lib/sections | |
| parent | 2c09443ba23b8bfbac2eb667a036e7a7fa97b3fe (diff) | |
| download | skyblock-stats-582409e7cb1598b65bee6d1023b77620bb3791af.tar.gz skyblock-stats-582409e7cb1598b65bee6d1023b77620bb3791af.tar.bz2 skyblock-stats-582409e7cb1598b65bee6d1023b77620bb3791af.zip | |
add inventories
Diffstat (limited to 'src/lib/sections')
| -rw-r--r-- | src/lib/sections/Armor.svelte | 4 | ||||
| -rw-r--r-- | src/lib/sections/Inventories.svelte | 55 |
2 files changed, 58 insertions, 1 deletions
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> |