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/APITypes.d.ts                        |  17 ++++-
 src/lib/minecraft/inventory.ts               |   4 +-
 src/lib/sections/AccessoryBagUpgrades.svelte | 100 +++++++++++++++++++++++++++
 src/lib/sections/Inventories.svelte          |  27 +++++---
 4 files changed, 137 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/sections/AccessoryBagUpgrades.svelte

(limited to 'src/lib')

diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index ff84d46..6402721 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -26,6 +26,7 @@ export interface CleanMemberProfilePlayer extends CleanPlayer {
 	harp: HarpData
 	coopInvitation: CoopInvitation | null
 	farmingContests: FarmingContests
+	accessoryBagUpgrades: AccessoryBagUpgrades
 	left: boolean
 }
 
@@ -90,7 +91,7 @@ export declare const INVENTORIES: {
 	armor: string
 	inventory: string
 	ender_chest: string
-	talisman_bag: string
+	accessory_bag: string
 	potion_bag: string
 	fishing_bag: string
 	quiver: string
@@ -419,3 +420,17 @@ export interface Skills {
 	 */
 	apiEnabled: boolean
 }
+
+
+export interface AccessoryBagUpgrades {
+	tuningTemplates: Record<string, number>[]
+	upgrades: {
+		purchased: number
+		coinsSpent: number
+		extraSlots: number
+	}
+	powers: {
+		selected: string | null
+		list: string[]
+	}
+}
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index 1d950b8..1d2a91e 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -25,7 +25,7 @@ const INVENTORIES = {
     armor: 'inv_armor',
     inventory: 'inv_contents',
     ender_chest: 'ender_chest_contents',
-    talisman_bag: 'talisman_bag',
+    accessory_bag: 'talisman_bag',
     potion_bag: 'potion_bag',
     fishing_bag: 'fishing_bag',
     quiver: 'quiver',
@@ -44,7 +44,7 @@ export const inventoryIconMap: Record<string, string | Item> = {
         vanillaId: 'ender_chest',
         display: { name: '\\u00a7aEnder Chest' },
     },
-    talisman_bag: {
+    accessory_bag: {
         vanillaId: 'skull:3',
         display: { name: 'Accessory Bag' },
         headTexture: '961a918c0c49ba8d053e522cb91abc74689367b4d8aa06bfc1ba9154730985ff',
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