From 6b7eda750275445f0f6112363a87792fd5584da7 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 16:23:13 -0500
Subject: Show player's sold auctions

---
 src/lib/sections/Auctions.svelte | 120 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 src/lib/sections/Auctions.svelte

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
new file mode 100644
index 0000000..63fe4a7
--- /dev/null
+++ b/src/lib/sections/Auctions.svelte
@@ -0,0 +1,120 @@
+<!-- 
+	@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'
+
+	export let data: CleanMemberProfile
+	export let stats: StatItem[]
+	export let pack: MatcherFile
+
+	let onlyThisProfile = true
+	let showingSoldAuctions = false
+</script>
+
+<div class="player-auctions-list-container">
+	{#if showingSoldAuctions}
+		{#await fetchApi(`playerauctions/${data.member.uuid}`, fetch).then(r => r.json())}
+			Loading...
+		{:then auctions}
+			{#if auctions.length > 0}
+				<div class="player-auctions-list">
+					{#each auctions as auction}
+						{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
+							<div class="auction">
+								<div class="item-slot-container">
+									<Item item={auction.item} {pack} />
+								</div>
+
+								<h2>
+									{removeFormattingCode(auction.item.display.name)}
+									<span class="auction-item-count">x{auction.item.count}</span>
+								</h2>
+								{#if auction.bin}
+									<b>Bin</b>
+								{/if}
+								<div class="auction-info-text">
+									<p>Coins: <b>{auction.coins.toLocaleString()}</b></p>
+									<p>{millisecondsToTime(auction.creationTimestamp)} ago</p>
+									Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile />
+								</div>
+							</div>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+		{/await}
+	{:else}
+		<button
+			on:click={() => {
+				showingSoldAuctions = true
+			}}>Show sold auctions</button
+		>
+	{/if}
+</div>
+
+<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>
+
+<style>
+	li {
+		position: relative;
+	}
+	ul {
+		padding-left: 1em;
+		margin-top: 0.5em;
+	}
+	p {
+		margin: 0;
+	}
+
+	.auction-info-text {
+		color: var(--theme-darker-text);
+	}
+	.auction-info-text b {
+		color: var(--theme-main-text);
+	}
+
+	.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;
+	}
+	.player-auctions-list {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 0.5rem;
+		row-gap: 0.5rem;
+	}
+	.item-slot-container {
+		float: right;
+	}
+	.auction-item-count {
+		color: var(--theme-darker-text);
+		font-weight: normal;
+	}
+	.player-auctions-list-container {
+		margin-top: 0.5em;
+	}
+</style>
-- 
cgit 


From c98d4c8ac700b89e10c785d887d49f078a6bb228 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 16:32:44 -0500
Subject: Make button toggle & redundant remove count

---
 src/lib/sections/Auctions.svelte | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
index 63fe4a7..cf128c9 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -20,6 +20,12 @@
 </script>
 
 <div class="player-auctions-list-container">
+	<button
+		on:click={() => {
+			showingSoldAuctions = !showingSoldAuctions
+		}}>{showingSoldAuctions ? 'Hide' : 'Show'} sold auctions</button
+	>
+
 	{#if showingSoldAuctions}
 		{#await fetchApi(`playerauctions/${data.member.uuid}`, fetch).then(r => r.json())}
 			Loading...
@@ -35,15 +41,14 @@
 
 								<h2>
 									{removeFormattingCode(auction.item.display.name)}
-									<span class="auction-item-count">x{auction.item.count}</span>
 								</h2>
 								{#if auction.bin}
 									<b>Bin</b>
 								{/if}
 								<div class="auction-info-text">
 									<p>Coins: <b>{auction.coins.toLocaleString()}</b></p>
+									<p>Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile /></p>
 									<p>{millisecondsToTime(auction.creationTimestamp)} ago</p>
-									Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile />
 								</div>
 							</div>
 						{/if}
@@ -51,12 +56,6 @@
 				</div>
 			{/if}
 		{/await}
-	{:else}
-		<button
-			on:click={() => {
-				showingSoldAuctions = true
-			}}>Show sold auctions</button
-		>
 	{/if}
 </div>
 
@@ -110,10 +109,6 @@
 	.item-slot-container {
 		float: right;
 	}
-	.auction-item-count {
-		color: var(--theme-darker-text);
-		font-weight: normal;
-	}
 	.player-auctions-list-container {
 		margin-top: 0.5em;
 	}
-- 
cgit 


From b4817dc7391beafa80e69c8e4ecc46e522be1962 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 16:37:57 -0500
Subject: Improve hide/show auctions button

---
 src/lib/sections/Auctions.svelte | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
index cf128c9..827b06b 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -20,17 +20,17 @@
 </script>
 
 <div class="player-auctions-list-container">
-	<button
-		on:click={() => {
-			showingSoldAuctions = !showingSoldAuctions
-		}}>{showingSoldAuctions ? 'Hide' : 'Show'} sold auctions</button
-	>
-
 	{#if showingSoldAuctions}
 		{#await fetchApi(`playerauctions/${data.member.uuid}`, fetch).then(r => r.json())}
 			Loading...
 		{:then auctions}
 			{#if auctions.length > 0}
+				<button
+					on:click={() => {
+						showingSoldAuctions = !showingSoldAuctions
+					}}>Hide sold auctions</button
+				>
+
 				<div class="player-auctions-list">
 					{#each auctions as auction}
 						{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
@@ -56,6 +56,12 @@
 				</div>
 			{/if}
 		{/await}
+	{:else}
+		<button
+			on:click={() => {
+				showingSoldAuctions = !showingSoldAuctions
+			}}>Show sold auctions</button
+		>
 	{/if}
 </div>
 
-- 
cgit 


From 504c34660c80f605da38426a7e18b9849e1e9923 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 17:34:46 -0500
Subject: Put auctions sold list next to auction stats

---
 src/lib/sections/Auctions.svelte | 69 ++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 34 deletions(-)

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
index 827b06b..38fcbe9 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -16,21 +16,31 @@
 	export let pack: MatcherFile
 
 	let onlyThisProfile = true
-	let showingSoldAuctions = false
 </script>
 
-<div class="player-auctions-list-container">
-	{#if showingSoldAuctions}
+<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">
 		{#await fetchApi(`playerauctions/${data.member.uuid}`, fetch).then(r => r.json())}
+			<h3>Auctions sold</h3>
 			Loading...
 		{:then auctions}
 			{#if auctions.length > 0}
-				<button
-					on:click={() => {
-						showingSoldAuctions = !showingSoldAuctions
-					}}>Hide sold auctions</button
-				>
-
+				<h3>Auctions sold</h3>
 				<div class="player-auctions-list">
 					{#each auctions as auction}
 						{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
@@ -39,16 +49,16 @@
 									<Item item={auction.item} {pack} />
 								</div>
 
-								<h2>
+								<h4 class="auction-item-name">
 									{removeFormattingCode(auction.item.display.name)}
-								</h2>
+								</h4>
 								{#if auction.bin}
 									<b>Bin</b>
 								{/if}
 								<div class="auction-info-text">
 									<p>Coins: <b>{auction.coins.toLocaleString()}</b></p>
 									<p>Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile /></p>
-									<p>{millisecondsToTime(auction.creationTimestamp)} ago</p>
+									<p>{millisecondsToTime(Date.now() - auction.creationTimestamp)} ago</p>
 								</div>
 							</div>
 						{/if}
@@ -56,30 +66,9 @@
 				</div>
 			{/if}
 		{/await}
-	{:else}
-		<button
-			on:click={() => {
-				showingSoldAuctions = !showingSoldAuctions
-			}}>Show sold auctions</button
-		>
-	{/if}
+	</div>
 </div>
 
-<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>
-
 <style>
 	li {
 		position: relative;
@@ -87,11 +76,17 @@
 	ul {
 		padding-left: 1em;
 		margin-top: 0.5em;
+		width: max-content;
 	}
 	p {
 		margin: 0;
 	}
 
+	.auction-stats-and-list-container {
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
 	.auction-info-text {
 		color: var(--theme-darker-text);
 	}
@@ -99,6 +94,11 @@
 		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);
@@ -117,5 +117,6 @@
 	}
 	.player-auctions-list-container {
 		margin-top: 0.5em;
+		margin-left: 0.5em;
 	}
 </style>
-- 
cgit 


From 1a9887df01f8112c3c47f9cb0f4b28e69bdb7141 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 19:00:37 -0500
Subject: add pagination to auctions

---
 src/lib/Auction.svelte           | 56 ++++++++++++++++++++++++
 src/lib/sections/Auctions.svelte | 92 ++++++++++++++++------------------------
 src/routes/items.svelte          |  8 ++--
 3 files changed, 98 insertions(+), 58 deletions(-)
 create mode 100644 src/lib/Auction.svelte

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/Auction.svelte b/src/lib/Auction.svelte
new file mode 100644
index 0000000..57d8cee
--- /dev/null
+++ b/src/lib/Auction.svelte
@@ -0,0 +1,56 @@
+<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>
+		<p>Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile /></p>
+		<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
index 38fcbe9..54f7cfe 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -10,12 +10,33 @@
 	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
+
+	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]
+	}
+
+	updateAuctions()
 </script>
 
 <div class="auction-stats-and-list-container">
@@ -35,37 +56,24 @@
 	</ul>
 
 	<div class="player-auctions-list-container">
-		{#await fetchApi(`playerauctions/${data.member.uuid}`, fetch).then(r => r.json())}
+		{#if loading || auctions.length > 0}
 			<h3>Auctions sold</h3>
-			Loading...
-		{:then auctions}
-			{#if auctions.length > 0}
-				<h3>Auctions sold</h3>
-				<div class="player-auctions-list">
-					{#each auctions as auction}
-						{#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid}
-							<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>
-									<p>Buyer: <Username player={auction.buyer} prefix hyperlinkToProfile /></p>
-									<p>{millisecondsToTime(Date.now() - auction.creationTimestamp)} ago</p>
-								</div>
-							</div>
-						{/if}
-					{/each}
-				</div>
+		{/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}
+				<button on:click={updateAuctions}>Show more</button>
 			{/if}
-		{/await}
+		{/if}
+		{#if loading}
+			Loading...
+		{/if}
 	</div>
 </div>
 
@@ -78,43 +86,17 @@
 		margin-top: 0.5em;
 		width: max-content;
 	}
-	p {
-		margin: 0;
-	}
-
 	.auction-stats-and-list-container {
 		display: grid;
 		grid-template-columns: 1fr auto;
 	}
 
-	.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;
-	}
 	.player-auctions-list {
 		display: flex;
 		flex-wrap: wrap;
 		column-gap: 0.5rem;
 		row-gap: 0.5rem;
 	}
-	.item-slot-container {
-		float: right;
-	}
 	.player-auctions-list-container {
 		margin-top: 0.5em;
 		margin-left: 0.5em;
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>
-- 
cgit 


From 566fdbd2df59bdd5a68d6e29f121ba8d89d0ab59 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 19:13:46 -0500
Subject: Don't show "show more" button on last page

---
 src/lib/sections/Auctions.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
index 54f7cfe..3db7cc0 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -23,6 +23,7 @@
 	let loading = true
 
 	let page = 0
+	let totalPages: number | undefined = undefined
 
 	async function updateAuctions() {
 		loading = true
@@ -34,6 +35,7 @@
 		).then(r => r.json())
 		loading = false
 		auctions = [...auctions, ...auctionsResponse.auctions]
+		totalPages = auctionsResponse.pages
 	}
 
 	updateAuctions()
@@ -67,7 +69,7 @@
 					{/if}
 				{/each}
 			</div>
-			{#if !loading}
+			{#if !loading && page != totalPages}
 				<button on:click={updateAuctions}>Show more</button>
 			{/if}
 		{/if}
-- 
cgit 


From 56a5049fe3aba1049b375f4838985404f0e0c354 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Fri, 1 Jul 2022 19:25:55 -0500
Subject: Wrap "auctions sold" on small screens

---
 src/lib/sections/Auctions.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/lib/sections/Auctions.svelte')

diff --git a/src/lib/sections/Auctions.svelte b/src/lib/sections/Auctions.svelte
index 3db7cc0..15c809f 100644
--- a/src/lib/sections/Auctions.svelte
+++ b/src/lib/sections/Auctions.svelte
@@ -93,6 +93,12 @@
 		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;
-- 
cgit 

