Strikethrough members who left :tada:

3 files changed, 51 insertions, 3 deletions

diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index b8b0ed5..8a4ca76 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -23,6 +23,25 @@ export interface CleanMemberProfilePlayer extends CleanPlayer {
 	slayers: SlayerData
 }
 
+export interface CleanMember extends CleanBasicMember {
+	purse: number
+	stats: StatItem[]
+	rawHypixelStats: {
+		[key: string]: number
+	}
+	minions: CleanMinion[]
+	fairySouls: FairySouls
+	inventories?: Inventories
+	objectives: Objective[]
+	skills: Skill[]
+	zones: Zone[]
+	collections: Collection[]
+	slayers: SlayerData
+	/** Whether the user left the coop */
+	left: boolean
+}
+
+
 export interface CleanBasicPlayer {
 	uuid: string
 	username: string
@@ -218,4 +237,5 @@ export interface CleanBasicMember {
 	lastSave: number
 	firstJoin: number
 	rank: CleanRank
+	left?: boolean
 }
diff --git a/src/lib/minecraft/Username.svelte b/src/lib/minecraft/Username.svelte
index 7f9f3bd..54c803e 100644
--- a/src/lib/minecraft/Username.svelte
+++ b/src/lib/minecraft/Username.svelte
@@ -8,6 +8,9 @@
 	export let headType: null | '3d' | '2d' = null
 	export let hyperlinkToProfile = false
 	export let prefix = false
+
+	/** whether the username should be crossed out */
+	export let strikethrough = false
 </script>
 
 <!-- {%- macro username(player, headType=none, hyperlinkToProfile=false, prefix=false) -%}
@@ -28,7 +31,10 @@
 		<span class="username-rank-prefix">
 			{@html formattingCodeToHtml(player.rank.colored)}
 		</span>
-	{/if}<span class="username" style="color: {player.rank.color}">{player.username}</span>
+	{/if}<span class="username" style="color: {player.rank.color}">
+		{#if strikethrough}<span class="strikethrough" />{/if}
+		{player.username}
+	</span>
 </ConditionalLink>
 
 <style>
@@ -38,6 +44,19 @@
 		/* reduce the size of the text because the font is too big */
 		font-size: 0.8em;
 		overflow-wrap: anywhere;
+		width: 100%;
+		/* display: inline-block; */
+		position: relative;
+	}
+
+	.strikethrough {
+		position: absolute;
+		right: 0;
+		left: 0;
+		top: 0.7em;
+		display: inline-block;
+		width: auto;
+		border-bottom: 2px solid #fff;
 	}
 
 	.username-rank-prefix {
diff --git a/src/routes/player/[player]/index.svelte b/src/routes/player/[player]/index.svelte
index ac7292c..b9970c8 100644
--- a/src/routes/player/[player]/index.svelte
+++ b/src/routes/player/[player]/index.svelte
@@ -95,7 +95,7 @@
 				</a>
 				<span class="profile-members">
 					{#if (profile.members?.length ?? 0) > 1}
-						{#each profile.members ?? [] as player}
+						{#each profile.members?.filter(m => !m.left) ?? [] as player}
 							<span class="member">
 								<Username
 									{player}
@@ -104,6 +104,16 @@
 								/>
 							</span>
 						{/each}
+						{#each profile.members?.filter(m => m.left) ?? [] as player}
+							<span class="member">
+								<Username
+									{player}
+									headType="2d"
+									hyperlinkToProfile={player.uuid != data.player?.uuid}
+									strikethrough
+								/>
+							</span>
+						{/each}
 					{:else}
 						Solo
 					{/if}
@@ -117,7 +127,6 @@
 	.profile-name {
 		margin-right: 0.5em;
 	}
-
 	.profile-members {
 		color: var(--theme-main-text);
 	}