add icons to inventory tabs

8 files changed, 62 insertions, 18 deletions

diff --git a/README.md b/README.md
index 63a7649..db12190 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,6 @@
 # SkyBlock Stats
 
+This is the frontend for [skyblock-api](https://github.com/skyblockstats/skyblock-api).
+
+
+
diff --git a/src/_donators.json b/src/_donators.json
index 706fcee..647c633 100644
--- a/src/_donators.json
+++ b/src/_donators.json
@@ -1 +1 @@
-[{"uuid":"1915444928b64d8b8973df8044f8cdb7","username":"LeaPhant","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§d+§b]"},"socials":{"discord":"LeaPhant#2456","forums":"https://hypixel.net/members/leaphant.687175/"}},{"uuid":"4c6beeff830e4bc1b9bc876e9ee8f357","username":"ItzMonday","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§5+§b]"},"socials":{"discord":"ItzMonday#8949","forums":"https://hypixel.net/members/itzmonday.2651009/"}},{"uuid":"585b739ac76d40a8a95604ea052930c7","username":"Canadas","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§0+§b]"},"socials":{"discord":"Canadas#6600","forums":"https://hypixel.net/members/canadas.675999/"}},{"uuid":"25e670e88a104f96bbe6f5545170682f","username":"RunicYoungDragon","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§8+§b]"},"socials":{"discord":"RunicYoungDragon#8156","forums":"https://hypixel.net/members/minihouse.1063296/"}},{"uuid":"64e5da31f6ae40caa6e77cebd7694df8","username":"ImEvoke","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§6+§b]"},"socials":{"discord":"floog 1#5533","forums":null}},{"uuid":"26398ec782e5440cbcbb94c58b8b60a2","username":"jasperazzi","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§0+§b]"},"socials":{"discord":"jasperazzi#6422","forums":"https://hypixel.net/members/ceejcake.2183776/"}},{"uuid":"a7b317669c3945a380cd96d1f516b858","username":"nullDorito","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§9+§b]"},"socials":{"discord":"rito#3599","forums":"https://hypixel.net/members/nulldorito.3985801/"}},{"uuid":"951801c9765944bbbd1adf22cc90294e","username":"oxnan","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§0+§b]"},"socials":{"discord":"oxnan#1337","forums":"https://hypixel.net/members/oxnan.2000303/"}},{"uuid":"c558970dca7343a79083825bacfa65c7","username":"FingaMan","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§4+§b]"},"socials":{"discord":"Fing#8864","forums":"https://hypixel.net/members/fingalickindood.141993/"}},{"uuid":"7e534bf90cc24b4689e9ab380aab9877","username":"CalebDavisPvP","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§c+§b]"},"socials":{"discord":"CalebDavisPvP#1337","forums":null}}]
\ No newline at end of file
+[{"uuid":"951801c9765944bbbd1adf22cc90294e","username":"oxnan","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§0+§b]"},"socials":{"discord":"oxnan#1337","forums":"https://hypixel.net/members/oxnan.2000303/"}},{"uuid":"c558970dca7343a79083825bacfa65c7","username":"FingaMan","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§4+§b]"},"socials":{"discord":"Fing#8864","forums":"https://hypixel.net/members/fingalickindood.141993/"}},{"uuid":"1915444928b64d8b8973df8044f8cdb7","username":"LeaPhant","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§d+§b]"},"socials":{"discord":"LeaPhant#2456","forums":"https://hypixel.net/members/leaphant.687175/"}},{"uuid":"585b739ac76d40a8a95604ea052930c7","username":"Canadas","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§0+§b]"},"socials":{"discord":"Canadas#6600","forums":"https://hypixel.net/members/canadas.675999/"}},{"uuid":"7e534bf90cc24b4689e9ab380aab9877","username":"CalebDavisPvP","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§c+§b]"},"socials":{"discord":"CalebDavisPvP#1337","forums":null}},{"uuid":"64e5da31f6ae40caa6e77cebd7694df8","username":"ImEvoke","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§6+§b]"},"socials":{"discord":"floog 1#5533","forums":null}},{"uuid":"26398ec782e5440cbcbb94c58b8b60a2","username":"jasperazzi","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§0+§b]"},"socials":{"discord":"jasperazzi#6422","forums":"https://hypixel.net/members/ceejcake.2183776/"}},{"uuid":"a7b317669c3945a380cd96d1f516b858","username":"nullDorito","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§9+§b]"},"socials":{"discord":"rito#3599","forums":"https://hypixel.net/members/nulldorito.3985801/"}},{"uuid":"25e670e88a104f96bbe6f5545170682f","username":"RunicYoungDragon","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§8+§b]"},"socials":{"discord":"RunicYoungDragon#8156","forums":"https://hypixel.net/members/minihouse.1063296/"}},{"uuid":"4c6beeff830e4bc1b9bc876e9ee8f357","username":"ItzMonday","rank":{"name":"MVP+","color":"#3ffefe","colored":"§b[MVP§5+§b]"},"socials":{"discord":"ItzMonday#8949","forums":"https://hypixel.net/members/itzmonday.2651009/"}}]
\ No newline at end of file
diff --git a/src/app.css b/src/app.css
index 154cdc0..334ecbc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,6 +4,8 @@
 	--theme-lightest-background: #333;
 	--theme-main-text: #eee;
 	--theme-darker-text: #999;
+	--theme-anchor-color: #19f;
+
 	--theme-transparent-border: rgba(128, 128, 128, 0.3);
 	--theme-yellow: #ff0;
 }
@@ -168,7 +170,7 @@ button:hover {
 
 /* base styles for anchor tags */
 a {
-	color: #19f;
+	color: var(--theme-anchor-color);
 	text-decoration: none;
 }
 
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index 161c70a..1990648 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -3,7 +3,6 @@ import vanilla from 'skyblock-assets/matchers/vanilla.json'
 import packshq from 'skyblock-assets/matchers/vanilla.json'
 import furfsky_reborn from 'skyblock-assets/matchers/furfsky_reborn.json'
 
-
 interface Item {
     id?: string
     count?: number
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>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f98682b..873b71d 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -69,8 +69,8 @@
 			Minecraft skin APIs: <a href="//mc-heads.net">mc-heads.net</a> for 3d renders and
 			<a href="//mc-crafatar.com">crafatar.com</a> for 2d heads.
 		</p>
-		<p>Emojis: <a href="https://twemoji.twitter.com/">Twemoji</a></p>
-		<p>Font: <a href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a></p>
+		<p>Emojis: <a href="//twemoji.twitter.com/">Twemoji</a>.</p>
+		<p>Font: <a href="//brailleinstitute.org/freefont">Atkinson Hyperlegible</a>.</p>
 	</section>
 </main>
 
diff --git a/src/routes/leaderboards/[name].svelte b/src/routes/leaderboards/[name].svelte
index 9163eda..bed26b2 100644
--- a/src/routes/leaderboards/[name].svelte
+++ b/src/routes/leaderboards/[name].svelte
@@ -44,7 +44,7 @@
 	{#if data.info}
 		<p class="leaderboard-info">
 			<span class="leaderboard-info-icon">ⓘ</span>
-			<span class="leaderboard-info-content">{data.info}</span>
+			<span class="leaderboard-info-content">{@html data.info}</span>
 		</p>
 	{/if}
 
@@ -54,7 +54,7 @@
 				<span>
 					{formatNumberFromUnit(
 						leaderboardItem.value,
-						leaderboardItem.unit ?? cleanId(data.name).toLowerCase()
+						data.unit ?? cleanId(data.name).toLowerCase()
 					)}
 				</span>
 				{#if leaderboardItem.player}
@@ -91,11 +91,15 @@
 		background-color: var(--theme-lighter-background);
 		padding: 0.5em 0.7em;
 		border-radius: 0.5rem;
-		width: max-content;
+		width: fit-content;
 
 		box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
 	}
 	.leaderboard-info-content {
 		font-style: italic;
 	}
+
+	.leaderboard-profile-list {
+		width: fit-content;
+	}
 </style>
diff --git a/svelte.config.js b/svelte.config.js
index b2099af..e20034a 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -47,9 +47,11 @@ console.log('svelte.config.js');
 			.then(r => JSON.parse(r).player)
 		)
 	)
-	await fs.promises.writeFile('src/_donators.json', JSON.stringify(shuffle(donators)), {
-		encoding: 'utf8'
-	})
+	await fs.promises.writeFile(
+		'src/_donators.json',
+		JSON.stringify(donators),
+		{ encoding: 'utf8' }
+	)
 	console.log('wrote file!')
 })()