blob: b3c464d6033a785d5744b3012b2dc95dc9f11d4e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<script lang="ts">
import type { Inventory, Item as APIItem } from '$lib/APITypes'
import type { MatcherFile } from 'skyblock-assets'
import Item from './Item.svelte'
export let items: Inventory
export let name = ''
export let pack: MatcherFile | undefined = undefined
export let groupLimit = 9
// each item group has 9 items
let itemGroups: APIItem[][] = []
$: {
itemGroups = []
for (let i = 0; i < items.length; i += groupLimit) {
itemGroups.push(items.slice(i, i + groupLimit))
}
if (name === 'inventory') {
// in the inventory, the first 9 items are the hotbar and should be at the end
itemGroups = itemGroups.slice(1).concat(itemGroups.slice(0, 1))
}
}
</script>
<div class="inventory-container" style="--group-limit:{groupLimit}">
{#each itemGroups as itemGroup}
{#each itemGroup as item}
<Item {item} {pack} isslot />
{/each}
{/each}
</div>
<style>
.inventory-container {
width: fit-content;
display: grid;
grid-template-columns: repeat(var(--group-limit), 1fr);
grid-gap: 0;
}
</style>
|
