diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/sections/Auctions.svelte | 120 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 11 |
2 files changed, 130 insertions, 1 deletions
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> diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte index 82d5471..27e61de 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 @@ -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} |