4 files changed, 40 insertions, 6 deletions
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 827ee13..ff84d46 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -18,7 +18,7 @@ export interface CleanMemberProfilePlayer extends CleanPlayer {
 	fairySouls: FairySouls
 	inventories?: Inventories
 	objectives: Objective[]
-	skills: Skill[]
+	skills: Skills
 	zones: Zone[]
 	collections: Collection[]
 	slayers: SlayerData
@@ -39,7 +39,7 @@ export interface CleanMember extends CleanBasicMember {
 	fairySouls: FairySouls
 	inventories?: Inventories
 	objectives: Objective[]
-	skills: Skill[]
+	skills: Skills
 	zones: Zone[]
 	collections: Collection[]
 	slayers: SlayerData
@@ -397,3 +397,25 @@ export interface LeaderboardBasicPlayer {
 		color: string
 	}
 }
+
+
+export interface Skill {
+	id: string
+	xp: number
+	level: number
+
+	maxLevel: number
+
+	levelXp: number
+	levelXpRequired: number
+}
+
+export interface Skills {
+	list: Skill[]
+	/**
+	 * Whether the player has their skills API enabled. If this is off, that
+	 * means the data doesn't include xp and is per-player. You should show a
+	 * warning to the user.
+	 */
+	apiEnabled: boolean
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 243cf2b..689a952 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1 +1,2 @@
+// the trailing slash is required
 export const API_URL = 'https://skyblock-api.matdoes.dev/'
diff --git a/src/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte
index 56d9164..8fc5aaf 100644
--- a/src/lib/sections/Skills.svelte
+++ b/src/lib/sections/Skills.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Emoji from '$lib/Emoji.svelte'
+
 	import Tooltip from '$lib/Tooltip.svelte'
 	import { cleanId, formatNumber } from '$lib/utils'
 
@@ -19,11 +21,16 @@
 	export let data
 </script>
 
+{#if !data.member.skills.apiEnabled}
+	<p class="skills-api-warning">
+		<Emoji value="⚠" /> Skills API is disabled for this profile, so the values shown may be inaccurate.
+	</p>
+{/if}
 <ul>
-	{#each data.member.skills as skill}
+	{#each data.member.skills.list as skill}
 		<li
 			class="list-item-with-icon"
-			style="background: url({skillImages[skill.name]}) 0 0/1em no-repeat"
+			style="background: url({skillImages[skill.id]}) 0 0/1em no-repeat"
 		>
 			<Tooltip>
 				<span slot="tooltip">
@@ -36,7 +43,7 @@
 					{/if}
 				</span>
 				<span>
-					{cleanId(skill.name)}
+					{cleanId(skill.id)}
 					<span class="skill-level" class:skill-maxed={skill.level === skill.maxLevel}>
 						{skill.level}
 					</span>
@@ -63,6 +70,10 @@
 		image-rendering: pixelated;
 	}
 
+	.skills-api-warning {
+		margin-top: 0;
+	}
+
 	ul {
 		margin-top: 0;
 		display: flex;
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 0e54b0f..62f77b9 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -145,7 +145,7 @@
 
 	<Toc {categories} />
 
-	{#if data.member.skills && data.member.skills.length > 0}
+	{#if data.member.skills && data.member.skills.list.length > 0}
 		<section id="skills" class="profile-skills">
 			<h2>Skills</h2>
 			<Skills {data} />