Merge pull request #5 from skyblockstats/sold-auctions

Show sold auctions in profile

4 files changed, 192 insertions, 5 deletions

diff --git a/src/lib/Auction.svelte b/src/lib/Auction.svelte
new file mode 100644
index 0000000..39f4904
--- /dev/null
+++ b/src/lib/Auction.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { MatcherFile } from 'skyblock-assets'
+	import Item from './minecraft/Item.svelte'
+	import Username from './minecraft/Username.svelte'
+	import { millisecondsToTime, removeFormattingCode } from './utils'
+
+	export let auction
+	export let pack: MatcherFile
+</script>
+
+<div class="auction">
+	<div class="item-slot-container">
+		<Item item={auction.item} {pack} />
+	</div>
+
+	<h4 class="auction-item-name">
+		{removeFormattingCode(auction.item.display.name)}
+	</h4>
+	{#if auction.bin}
+		<b>Bin</b>
+	{/if}
+	<div class="auction-info-text">
+		<p>Coins: <b>{auction.coins.toLocaleString()}</b></p>
+		{#if auction.buyer}
+			<p>Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile /></p>
+		{:else}
+			<p>No buyer</p>
+		{/if}
+		<p>{millisecondsToTime(Date.now() - auction.creationTimestamp)} ago</p>
+	</div>
+</div>
+
+<style>
+	.auction-info-text {
+		color: var(--theme-darker-text);
+	}
+	.auction-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.auction-item-name {
+		font-size: 1.5rem;
+		margin: 0;
+	}
+
+	.auction {
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: rgba(0, 0, 0, 0.1);
+		padding: 0.75em;
+		border-radius: 1em;
+		width: 18em;
+	}
+	.item-slot-container {
+		float: right;
+	}
+
+	p {
+		margin: 0;
+	}
+</style>
diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
new file mode 100644
index 0000000..15c809f
--- /dev/null
+++ b/src/lib/sections/Auctions.svelte
@@ -0,0 +1,112 @@
+<!-- 
+	@component
+
+	A list of the player's past auctions, and their auction stats.
+-->
+<script lang="ts">
+	import { cleanId, millisecondsToTime, removeFormattingCode } from '$lib/utils'
+	import type { CleanMemberProfile, StatItem } from '$lib/APITypes'
+	import { fetchApi } from '$lib/api'
+	import Item from '$lib/minecraft/Item.svelte'
+	import type { MatcherFile } from 'skyblock-assets'
+	import Username from '$lib/minecraft/Username.svelte'
+	import Auction from '$lib/Auction.svelte'
+	import { onMount } from 'svelte'
+
+	export let data: CleanMemberProfile
+	export let stats: StatItem[]
+	export let pack: MatcherFile
+
+	let onlyThisProfile = true
+
+	let auctions: any[] = []
+	let loading = true
+
+	let page = 0
+	let totalPages: number | undefined = undefined
+
+	async function updateAuctions() {
+		loading = true
+		const thisPage = page
+		page += 1
+		const auctionsResponse = await fetchApi(
+			`playerauctions/${data.member.uuid}?page=${thisPage}`,
+			fetch
+		).then(r => r.json())
+		loading = false
+		auctions = [...auctions, ...auctionsResponse.auctions]
+		totalPages = auctionsResponse.pages
+	}
+
+	updateAuctions()
+</script>
+
+<div class="auction-stats-and-list-container">
+	<ul>
+		{#each stats.sort((a, b) => b.value - a.value) as stat}
+			<li>
+				<span class="stat-name">{cleanId(stat.categorizedName)}:</span>
+				<span class="stat-value">
+					{#if stat.unit === 'time'}
+						{millisecondsToTime(stat.value)}
+					{:else}
+						{stat.value.toLocaleString()}
+					{/if}
+				</span>
+			</li>
+		{/each}
+	</ul>
+
+	<div class="player-auctions-list-container">
+		{#if loading || auctions.length > 0}
+			<h3>Auctions sold</h3>
+		{/if}
+		{#if auctions.length > 0}
+			<div class="player-auctions-list">
+				{#each auctions as auction}
+					{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
+						<Auction {auction} {pack} />
+					{/if}
+				{/each}
+			</div>
+			{#if !loading && page != totalPages}
+				<button on:click={updateAuctions}>Show more</button>
+			{/if}
+		{/if}
+		{#if loading}
+			Loading...
+		{/if}
+	</div>
+</div>
+
+<style>
+	li {
+		position: relative;
+	}
+	ul {
+		padding-left: 1em;
+		margin-top: 0.5em;
+		width: max-content;
+	}
+	.auction-stats-and-list-container {
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
+	@media (max-width: 600px) {
+		.auction-stats-and-list-container {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.player-auctions-list {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+	}
+	.player-auctions-list-container {
+		margin-top: 0.5em;
+		margin-left: 0.5em;
+	}
+</style>
diff --git a/src/routes/items.svelte b/src/routes/items.svelte
index f836de0..82b3ee3 100644
--- a/src/routes/items.svelte
+++ b/src/routes/items.svelte
@@ -71,9 +71,11 @@
 
 <main>
 	<div class="last-updated">
-		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"><time datetime="${data.lastUpdated}">
-			{millisecondsToTime(now - data.lastUpdated)} ago
-		</time></a>
+		Last updated: <a href="https://github.com/mat-1/skyblock-items-history/commits/main"
+			><time datetime="${data.lastUpdated}">
+				{millisecondsToTime(now - data.lastUpdated)} ago
+			</time></a
+		>
 	</div>
 	<h1>SkyBlock Item List</h1>
 	<p class="results-count">{filteredItems.length.toLocaleString()} items</p>
diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte
index 82d5471..de30c21 100644
--- a/src/routes/player/[player]/[profile].svelte
+++ b/src/routes/player/[player]/[profile].svelte
@@ -83,6 +83,7 @@
 	import Toc from '$lib/Toc.svelte'
 	import Achievements from '$lib/sections/Achievements.svelte'
 	import Essence from '$lib/sections/Essence.svelte'
+	import Auctions from '$lib/sections/Auctions.svelte'
 
 	export let data: CleanMemberProfile
 	export let pack: MatcherFile
@@ -135,7 +136,7 @@
 	blurred={data.customization?.blurBackground ?? false}
 />
 
-<main>
+<main class:has-blurred-background={data.customization?.blurBackground && backgroundUrl}>
 	{#if data.customization?.blurBackground && backgroundUrl}
 		<div class="blurred-background-container-container">
 			<div class="blurred-background-container">
@@ -203,7 +204,15 @@
 						<section>
 							<Collapsible id={category}>
 								<h2 slot="title">{cleanId(category)}</h2>
-								<StatList stats={data.member.stats.filter(s => s.category === category)} />
+								{#if category == 'auctions'}
+									<Auctions
+										stats={data.member.stats.filter(s => s.category === category)}
+										{data}
+										{pack}
+									/>
+								{:else}
+									<StatList stats={data.member.stats.filter(s => s.category === category)} />
+								{/if}
 							</Collapsible>
 						</section>
 					{/if}
@@ -400,4 +409,8 @@
 		color: var(--theme-darker-text);
 		font-size: 0.9rem;
 	}
+
+	.has-blurred-background #categories {
+		width: 47rem;
+	}
 </style>