diff options
Diffstat (limited to 'src/lib/sections/Inventories.svelte')
| -rw-r--r-- | src/lib/sections/Inventories.svelte | 47 |
1 files changed, 40 insertions, 7 deletions
diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte index e84950a..1f30255 100644 --- a/src/lib/sections/Inventories.svelte +++ b/src/lib/sections/Inventories.svelte @@ -2,6 +2,7 @@ import Inventory from '$lib/minecraft/Inventory.svelte' import { fade } from 'svelte/transition' import { cleanId } from '$lib/utils' + import { skyblockItemToUrl } from '$lib/minecraft/inventory' export let data export let pack @@ -11,6 +12,15 @@ if (inventoryName !== 'armor') displayingInventories.push(inventoryName) let selectedInventoryName: string = displayingInventories[0] + + const inventoryIconMap = { + inventory: 'nether_star', + ender_chest: 'ender_chest', + potion_bag: 'potion', + fishing_bag: 'cod', + quiver: 'arrow', + wardrobe: 'leather_chestplate', + } </script> <div id="inventory-tabs"> @@ -20,7 +30,15 @@ class:inventory-tab-active={inventoryName === selectedInventoryName} on:click={() => (selectedInventoryName = inventoryName)} > - {cleanId(inventoryName)} + {#if inventoryName in inventoryIconMap} + <img + class="inventory-tab-icon" + loading="lazy" + src={skyblockItemToUrl(inventoryIconMap[inventoryName])} + alt={cleanId(inventoryName)} + /> + {/if} + <span class="inventory-tab-name">{cleanId(inventoryName)}</span> </button> {/each} </div> @@ -37,20 +55,35 @@ margin-bottom: 1em; overflow: hidden; border-radius: 1em; - max-width: max-content; - width: min(40em, 100%); + max-width: 40em; + /* box-shadow: 0 0 1em #000; */ } .inventory-tab { - background-color: var(--theme-lighter-background); + /* background-color: var(--theme-lighter-background); */ + background-color: rgba(20, 20, 20, 0.4); color: var(--theme-main-text); border: none; - padding: 1em; + border-radius: 0; + /* padding: 0.8em; */ cursor: pointer; transition-duration: 200ms; - + height: 2.5em; + vertical-align: middle; + } + .inventory-tab-icon { + height: 1.5em; + width: 1.5em; + vertical-align: text-bottom; + position: relative; + top: 0.1em; + image-rendering: crisp-edges; + image-rendering: pixelated; + } + .inventory-tab-name { + vertical-align: middle; } .inventory-tab:hover, .inventory-tab-active { - background-color: var(--theme-lightest-background); + background-color: rgba(20, 20, 20, 0.9); } </style> |