diff options
| author | mat <github@matdoes.dev> | 2022-05-16 00:09:44 -0500 |
|---|---|---|
| committer | mat <github@matdoes.dev> | 2022-05-16 00:09:44 -0500 |
| commit | cd9748e59f1dd9ef31afb22195b8d5a1346ec5c3 (patch) | |
| tree | d6f134b778a6a2b9ff9f00a4f4d24196191dba53 /src/routes | |
| parent | 41dc70e3af49fc11383d0dff3bbe8f006272bed9 (diff) | |
| download | skyblock-stats-cd9748e59f1dd9ef31afb22195b8d5a1346ec5c3.tar.gz skyblock-stats-cd9748e59f1dd9ef31afb22195b8d5a1346ec5c3.tar.bz2 skyblock-stats-cd9748e59f1dd9ef31afb22195b8d5a1346ec5c3.zip | |
start adding auctionprices page
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/auctionprices.svelte | 114 | ||||
| -rw-r--r-- | src/routes/index.svelte | 2 |
2 files changed, 115 insertions, 1 deletions
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte new file mode 100644 index 0000000..f464f7b --- /dev/null +++ b/src/routes/auctionprices.svelte @@ -0,0 +1,114 @@ +<script lang="ts" context="module"> + import type { Load } from '@sveltejs/kit' + import { API_URL } from '$lib/api' + + export const load: Load = async ({ params, fetch }) => { + const data = await fetch(`${API_URL}auctionprices`).then(r => r.json()) + + return { + props: { + data, + }, + } + } +</script> + +<script lang="ts"> + import Header from '$lib/Header.svelte' + import Head from '$lib/Head.svelte' + import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils' + import type { ItemAuctionsSchema, ItemListData, ItemListItem } from '$lib/APITypes' + import Item from '$lib/minecraft/Item.svelte' + import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte' + + export let data: ItemAuctionsSchema[] + + let query: string = '' + + let pageHeight = 0 + $: { + pageHeight = 0 + } + + function checkScroll() { + let pageHeightTemp = window.scrollY + window.innerHeight + if (pageHeightTemp <= pageHeight) return + pageHeight = pageHeightTemp + if (pageHeight >= document.body.scrollHeight - 1000) { + } + } +</script> + +<Head title="SkyBlock Item List" /> +<Header /> + +<svelte:window on:scroll={checkScroll} /> + +<main> + <h1>SkyBlock Auction Prices</h1> + <div class="filter-items-settings"> + <input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} /> + </div> + <div class="item-list"> + {#each data as item (item._id)} + {@const binAuctions = item.auctions.filter(i => i.bin)} + {@const normalAuctions = item.auctions.filter(i => !i.bin)} + <div class="item-container"> + <h2>{cleanId(item._id.toLowerCase())}</h2> + <div class="auctions-info-text"> + {#if binAuctions.length > 0} + <p> + Lowest recent BIN: <b> + {binAuctions.reduce((a, b) => (a.coins < b.coins ? a : b)).coins.toLocaleString()} coins + </b> + </p> + {/if} + {#if normalAuctions.length > 0} + <p> + Lowest recent auction: <b> + {normalAuctions + .reduce((a, b) => (a.coins < b.coins ? a : b)) + .coins.toLocaleString()} coins + </b> + </p> + {/if} + </div> + <div class="item-scatterplot"> + <AuctionPriceScatterplot {item} /> + </div> + </div> + {/each} + {#if data.length === 0} + No results + {/if} + </div> +</main> + +<style> + p { + margin: 0; + } + .item-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); + grid-gap: 1em; + margin-top: 1em; + } + .item-container { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + } + + .item-scatterplot { + margin-top: 1em; + } + + .auctions-info-text { + color: var(--theme-darker-text); + } + .auctions-info-text b { + color: var(--theme-main-text); + } +</style> diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 4c11a88..d22f854 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -49,7 +49,7 @@ <section> <h2>Other SkyBlock tools</h2> <ul id="other-tools-list"> - <li><a>Auction prices (coming soon)</a></li> + <li><a href="/auctionprices">Auction prices</a></li> <li><a href="/leaderboards">Leaderboards</a></li> <li><a>Bazaar (coming soon)</a></li> <li><a href="/chat">Fake chat generator</a></li> |