Merge pull request #1 from skyblockstats/slayers

Add slayers

5 files changed, 106 insertions, 5 deletions

diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 328f4cd..70bab46 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -192,3 +192,24 @@ export interface CleanSocialMedia {
 	discord: string | null
 	forums: string | null
 }
+
+export interface SlayerData {
+	xp: number
+	kills: number
+	bosses: Slayer[]
+}
+
+interface SlayerTier {
+	tier: number,
+	kills: number
+}
+
+export interface Slayer {
+	name?: SlayerName
+	raw_name: string
+	xp: number
+	level: number
+	kills: number
+	tiers: SlayerTier[]
+}
+
diff --git a/src/lib/Toc.svelte b/src/lib/Toc.svelte
index 7259fee..cced057 100644
--- a/src/lib/Toc.svelte
+++ b/src/lib/Toc.svelte
@@ -16,12 +16,12 @@
 <style>
 	#toc {
 		border: 1px solid rgba(255, 255, 255, 0.1);
-		max-width: max-content;
+		background: rgba(0, 0, 0, 0.1);
 		padding: 0.75em;
 		border-radius: 1em;
 
+		max-width: max-content;
 		display: inline-block;
-		background: rgba(0, 0, 0, 0.1);
 		margin-bottom: 1em;
 	}
 	#toc ul {
diff --git a/src/lib/sections/Minions.svelte b/src/lib/sections/Minions.svelte
index 63dda51..8fa5914 100644
--- a/src/lib/sections/Minions.svelte
+++ b/src/lib/sections/Minions.svelte
@@ -16,7 +16,7 @@
 		<tr>
 			<th>{cleanId(minion.name)}</th>
 			{#each minion.levels as unlocked, i}
-				<td class="minions-table" class:unlocked>
+				<td class="minion-table-item" class:unlocked>
 					{toRomanNumerals(i)}
 				</td>
 			{/each}
@@ -31,10 +31,10 @@
 	.minions-fraction {
 		color: var(--theme-main-text);
 	}
-	.minions-table:not(.unlocked) {
+	.minion-table-item:not(.unlocked) {
 		opacity: 0.2;
 	}
-	.minions-table.unlocked {
+	.minion-table-item.unlocked {
 		color: #3e3;
 	}
 </style>
diff --git a/src/lib/sections/Slayers.svelte b/src/lib/sections/Slayers.svelte
new file mode 100644
index 0000000..c5266df
--- /dev/null
+++ b/src/lib/sections/Slayers.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import { cleanId, toRomanNumerals } from '$lib/utils'
+
+	export let data: CleanMemberProfile
+</script>
+
+{#if data.member.slayers}
+	<div class="slayer-info-text">
+		<p>Xp: <b>{data.member.slayers.xp}</b></p>
+		<p>Kills: <b>{data.member.slayers.kills}</b></p>
+	</div>
+	<div class="slayers-list">
+		{#each data.member.slayers.bosses as slayer}
+			<div class="individual-slayer-data">
+				<h3>{slayer.name ? cleanId(slayer.name) : cleanId(slayer.raw_name)}</h3>
+				<div class="slayer-info-text">
+					<p>Xp: <b>{slayer.xp.toLocaleString()}</b></p>
+					<p>Level: <b>{slayer.level}</b></p>
+				</div>
+				<table>
+					<tr>
+						{#each slayer.tiers as tier}
+							<th>Tier {toRomanNumerals(tier.tier)}</th>
+						{/each}
+					</tr>
+					<tr>
+						{#each slayer.tiers as tier}
+							<td class="slayer-tier-kills">
+								{tier.kills.toLocaleString()}
+							</td>
+						{/each}
+					</tr>
+				</table>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	p {
+		margin: 0;
+	}
+
+	.slayer-tier-kills {
+		text-align: center;
+	}
+
+	.slayer-info-text {
+		color: var(--theme-darker-text);
+	}
+	.slayer-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.individual-slayer-data {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+	}
+
+	.slayers-list {
+		display: flex;
+		flex-wrap: wrap;
+		max-width: 40rem;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+	}
+</style>
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 2d3b955..b0143c4 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -45,6 +45,7 @@
 	import Head from '$lib/Head.svelte'
 	import Toc from '$lib/Toc.svelte'
 	import { chooseDefaultBackground } from '$lib/backgrounds'
+	import Slayers from '$lib/sections/Slayers.svelte'
 
 	export let data: CleanMemberProfile
 	export let pack: MatcherFile
@@ -59,6 +60,7 @@
 		if (data.member.stats?.find(s => s.category === 'races')) categories.push('races')
 		categories.push('misc')
 		categories.push('minions')
+		if (data.member.slayers) categories.push('slayers')
 		categories.push('zones')
 		if (data.member.collections && data.member.collections.length > 0)
 			categories.push('collections')
@@ -147,6 +149,14 @@
 					<Minions {data} />
 				</Collapsible>
 			</section>
+			{#if categories.includes('slayers')}
+				<section>
+					<Collapsible id="slayers">
+						<h2 slot="title">Slayers</h2>
+						<Slayers {data} />
+					</Collapsible>
+				</section>
+			{/if}
 			<section>
 				<Collapsible id="zones">
 					<h2 slot="title">Zones</h2>