diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Auction.svelte | 60 | ||||
| -rw-r--r-- | src/lib/sections/Auctions.svelte | 112 |
2 files changed, 172 insertions, 0 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> |