Add coop section

5 files changed, 106 insertions, 30 deletions

diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 2547669..bb0cd25 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -13,9 +13,7 @@ export interface CleanMemberProfilePlayer extends CleanPlayer {
 	lastSave: number | null
 	purse: number
 	stats: StatItem[]
-	rawHypixelStats: {
-		[key: string]: number
-	}
+	rawHypixelStats: { [key: string]: number }
 	minions: CleanMinion[]
 	fairySouls: FairySouls
 	inventories?: Inventories
@@ -28,6 +26,7 @@ export interface CleanMemberProfilePlayer extends CleanPlayer {
 	harp: HarpData
 	coopInvitation: CoopInvitation | null
 	farmingContests: FarmingContests
+	left: boolean
 }
 
 export interface CleanMember extends CleanBasicMember {
@@ -343,7 +342,7 @@ export interface FarmingContests {
 
 export interface CoopInvitation {
 	invitedTimestamp: number
-	invitedByUuid: string
+	invitedBy: CleanPlayer | null
 	accepted: boolean
 	acceptedTimestamp: number | null
 }
diff --git a/src/lib/minecraft/Username.svelte b/src/lib/minecraft/Username.svelte
index df9e093..6d45857 100644
--- a/src/lib/minecraft/Username.svelte
+++ b/src/lib/minecraft/Username.svelte
@@ -1,29 +1,24 @@
 <script lang="ts">
+	import type { CleanPlayer, CleanBasicMember } from '$lib/APITypes'
+
 	import ConditionalLink from '$lib/ConditionalLink.svelte'
 	import Head2d from '$lib/minecraft/heads/Head2d.svelte'
 	import Head3d from '$lib/minecraft/heads/Head3d.svelte'
 	import { formattingCodeToHtml } from '../utils'
 
-	export let player
+	export let player: CleanPlayer | CleanBasicMember
 	export let headType: null | '3d' | '2d' = null
-	export let hyperlinkToProfile = false
+	export let hyperlinkToProfile: boolean | string = false
 	export let prefix = false
 
 	/** whether the username should be crossed out and the avatar grayscaled */
 	export let disabled = false
 </script>
 
-<!-- {%- macro username(player, headType=none, hyperlinkToProfile=false, prefix=false) -%}
-{%- if hyperlinkToProfile %}<a href="/player/{{ player.username }}{% if hyperlinkToProfile|isString %}/{{ hyperlinkToProfile }}{% endif %}">{% endif -%}
-{%- if headType === '3d' %}{{ head3d(player, isPartOfUsername=true) -}}
-{%- elif headType === '2d' %}{{ head2d(player, isPartOfUsername=true) -}}
-{%- endif -%}
-{%- if prefix -%}<span class="username-rank-prefix">{{ player.rank.colored|formattingCodeToHtml|safe }} </span>{%- endif -%}
-		<span class="username" style="color: {{ player.rank.color }}">{{ player.username }}</span>
-{%- if hyperlinkToProfile %}</a>{% endif -%}
-{%- endmacro -%} -->
-
-<ConditionalLink href="/player/{player.username}" isWrapped={hyperlinkToProfile}>
+<ConditionalLink
+	href="/player/{typeof hyperlinkToProfile === 'string' ? hyperlinkToProfile : player.username}"
+	isWrapped={!!hyperlinkToProfile}
+>
 	{#if headType == '3d'}
 		<span class="head" class:grayscale={disabled}><Head3d {player} isPartOfUsername={true} /></span
 		>{:else if headType == '2d'}
diff --git a/src/lib/profile.ts b/src/lib/profile.ts
index cba7923..ceeac77 100644
--- a/src/lib/profile.ts
+++ b/src/lib/profile.ts
@@ -14,9 +14,14 @@ export function prettyTimestamp(ms: number) {
 export function generateInfobox(data: CleanMemberProfile): string[] {
     const result: string[] = []
 
-    result.push(`💾 Last save: ${prettyTimestamp(data.member.lastSave)}`)
+    if (data.member.left)
+        result.push(`🚪 Removed from profile`)
 
-    result.push(`🚶 Profile created: ${prettyTimestamp(data.member.firstJoin)}`)
+    if (data.member.lastSave)
+        result.push(`💾 Last save: ${prettyTimestamp(data.member.lastSave)}`)
+
+    if (data.member.firstJoin)
+        result.push(`🚶 Profile created: ${prettyTimestamp(data.member.firstJoin)}`)
 
     result.push(`✨ Fairy souls: ${data.member.fairySouls.total}/${data.member.fairySouls.max}`)
 
diff --git a/src/lib/sections/Coop.svelte b/src/lib/sections/Coop.svelte
new file mode 100644
index 0000000..867d878
--- /dev/null
+++ b/src/lib/sections/Coop.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { CleanMemberProfile } from '$lib/APITypes'
+	import Username from '$lib/minecraft/Username.svelte'
+	import { millisecondsToTime } from '$lib/utils'
+	export let data: CleanMemberProfile
+
+	$: isProfileCreator = data.member.coopInvitation?.invitedBy?.uuid == data.member.uuid
+</script>
+
+{#if data.member.coopInvitation}
+	<div class="info-text primary-info-text">
+		{#if isProfileCreator}
+			<p><b class="info-text-value">Created co-op</b></p>
+		{:else}
+			<p>
+				Invited by {#if data.member.coopInvitation.invitedBy}
+					<Username player={data.member.coopInvitation.invitedBy} prefix />
+				{:else}
+					<b>Unknown player</b>
+				{/if}
+			</p>
+		{/if}
+		<p>
+			{isProfileCreator ? 'Began creation' : 'Invited'}:
+			<span class="info-text-value coop-invited-timeago">
+				<b>{millisecondsToTime(Date.now() - data.member.coopInvitation.invitedTimestamp)}</b> ago
+			</span>
+		</p>
+		{#if data.member.coopInvitation.acceptedTimestamp}
+			<p>
+				{isProfileCreator ? 'Finished creation' : 'Accepted invite'}:
+				<span class="info-text-value coop-accepted-invite-after">
+					after <b>
+						{millisecondsToTime(
+							data.member.coopInvitation.acceptedTimestamp -
+								data.member.coopInvitation.invitedTimestamp
+						)}
+					</b>
+				</span>
+			</p>
+		{/if}
+	</div>
+	<h3>Members</h3>
+	{#each data.profile.members.filter(m => !m.left) as player}
+		<span class="member">
+			<Username {player} headType="2d" hyperlinkToProfile />
+		</span>
+	{/each}
+	{#if data.profile.members.filter(m => m.left).length > 0}
+		<h3 class="previous-members-title">Previous members</h3>
+		{#each data.profile.members.filter(m => m.left) as player}
+			<span class="member">
+				<Username
+					{player}
+					headType="2d"
+					hyperlinkToProfile="{player.username}/{data.profile.uuid}"
+				/>
+			</span>
+		{/each}
+	{/if}
+{/if}
+
+<style>
+	p {
+		margin: 0;
+	}
+	.primary-info-text {
+		margin: 0.5em 0;
+	}
+	.info-text {
+		color: var(--theme-darker-text);
+	}
+	.info-text .info-text-value {
+		color: var(--theme-main-text);
+	}
+
+	.member {
+		display: block;
+	}
+	.previous-members-title {
+		margin-top: 0.5rem;
+	}
+</style>
diff --git a/src/lib/sections/Infobox.svelte b/src/lib/sections/Infobox.svelte
index f454654..c524ca1 100644
--- a/src/lib/sections/Infobox.svelte
+++ b/src/lib/sections/Infobox.svelte
@@ -2,23 +2,17 @@
 	import { generateInfobox } from '$lib/profile'
 	import Username from '$lib/minecraft/Username.svelte'
 	import Emoji from '$lib/Emoji.svelte'
-	import { onMount } from 'svelte'
 
 	export let data
-
-	// onMount(() => {
-	// 	// reload the data every second so the infobox updates
-	// 	const interval = setInterval(() => {
-	// 		data = data
-	// 	}, 1000)
-
-	// 	return () => clearInterval(interval)
-	// })
 </script>
 
 <div id="infobox-container">
 	<div id="infobox">
-		<h2><Username player={data.member} prefix /> ({data.member.profileName})</h2>
+		<h2>
+			<Username player={data.member} prefix /> ({data.member.left
+				? 'Removed'
+				: data.member.profileName})
+		</h2>
 		{#each generateInfobox(data) as item}
 			<p><Emoji value={item} /></p>
 		{/each}