From cf07ceb8eda3d6e01713a50b18974c3ce8f45b0d Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Sun, 15 May 2022 15:40:11 -0500
Subject: accessory bag extra info

---
 src/lib/sections/AccessoryBagUpgrades.svelte | 100 +++++++++++++++++++++++++++
 src/lib/sections/Inventories.svelte          |  27 +++++---
 2 files changed, 119 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/sections/AccessoryBagUpgrades.svelte

(limited to 'src/lib/sections')

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 :( */
-- 
cgit