2 files changed, 88 insertions, 11 deletions
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}