diff options
| -rw-r--r-- | src/lib/AuctionPreviewTooltip.svelte | 4 | ||||
| -rw-r--r-- | src/lib/AuctionPriceScatterplot.svelte | 15 | ||||
| -rw-r--r-- | src/routes/auctionprices.svelte | 26 | ||||
| -rw-r--r-- | svelte.config.js | 11 |
4 files changed, 38 insertions, 18 deletions
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte index 223cec2..417f8b3 100644 --- a/src/lib/AuctionPreviewTooltip.svelte +++ b/src/lib/AuctionPreviewTooltip.svelte @@ -5,7 +5,7 @@ import type { PreviewedAuctionData } from './utils' export let preview: PreviewedAuctionData | null - export let lastPreview: PreviewedAuctionData | null + let lastPreview: PreviewedAuctionData | null $: lastPreview = preview ?? lastPreview @@ -36,7 +36,7 @@ #auction-preview-tooltip { position: absolute; border: 1px solid rgba(255, 255, 255, 0.1); - background: var(--theme-lighter-background); + background: rgba(0, 0, 0, 0.1); padding: 0.5em; transition: left 200ms, top 200ms; pointer-events: none; diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte index 48a3fa5..1e774d0 100644 --- a/src/lib/AuctionPriceScatterplot.svelte +++ b/src/lib/AuctionPriceScatterplot.svelte @@ -25,7 +25,11 @@ let nearestDistance = Number.MAX_SAFE_INTEGER let nearestAuction: SimpleAuctionSchema | null = null for (const auction of item.auctions) { - const auctionCoords = getAuctionCoordinates(auction) + const auctionCoordsSvg = getAuctionCoordinates(auction) + const auctionCoords = [ + (auctionCoordsSvg[0] * rect.width) / 100, + (auctionCoordsSvg[1] * rect.height) / 100, + ] const distance = Math.pow(mouseCoords[0] - auctionCoords[0], 2) + Math.pow(mouseCoords[1] - auctionCoords[1], 2) @@ -35,7 +39,8 @@ } } if (nearestAuction) { - const [x, y] = getAuctionCoordinates(nearestAuction) + const [svgX, svgY] = getAuctionCoordinates(nearestAuction) + const [x, y] = [(svgX * rect.width) / 100, (svgY * rect.height) / 100] currentlyPreviewedAuction = { pageX: window.scrollX + rect.left + x, pageY: window.scrollY + rect.top + y, @@ -67,7 +72,7 @@ r="1" stroke-width="4" fill={auction.bin ? '#11b' : '#1b1'} - tabindex="-1" + class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id} /> {/each} <!-- {item.auctions} --> @@ -78,4 +83,8 @@ height: 10em; width: 100%; } + + .selected-auction { + stroke: #06e7; + } </style> diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte index 4e7bfde..d07c533 100644 --- a/src/routes/auctionprices.svelte +++ b/src/routes/auctionprices.svelte @@ -3,11 +3,14 @@ import { API_URL } from '$lib/api' export const load: Load = async ({ params, fetch }) => { + const auctionItemsPromise = fetch(`${API_URL}auctionitems`).then(r => r.json()) const data = await fetch(`${API_URL}auctionprices`).then(r => r.json()) + const auctionItems = await auctionItemsPromise return { props: { data, + auctionItems, }, } } @@ -16,24 +19,29 @@ <script lang="ts"> import Header from '$lib/Header.svelte' import Head from '$lib/Head.svelte' - import { - millisecondsToTime, - TIER_COLORS, - colorCodes, - cleanId, - toTitleCase, - type PreviewedAuctionData, - } from '$lib/utils' + import type { PreviewedAuctionData } from '$lib/utils' import type { ItemAuctionsSchema, ItemListData, ItemListItem } from '$lib/APITypes' import Item from '$lib/minecraft/Item.svelte' import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte' import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte' + import { browser } from '$app/env' export let data: ItemAuctionsSchema[] + export let auctionItems: Record<string, string> let currentlyPreviewedAuction: PreviewedAuctionData | null let query: string = '' + $: allMatchingItemIds = Object.entries(auctionItems) + .filter(a => a[1].includes(query)) + .map(a => a[0]) + $: { + if (browser) fetchItems(allMatchingItemIds.slice(0, 100)) + } + + async function fetchItems(itemIds: string[]) { + data = await fetch(`${API_URL}auctionprices?items=${itemIds.join(',')}`).then(r => r.json()) + } let pageHeight = 0 $: { @@ -66,7 +74,7 @@ {@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> + <h2>{auctionItems[item._id]}</h2> <div class="auctions-info-text"> {#if binAuctions.length > 0} <p> diff --git a/svelte.config.js b/svelte.config.js index 222cd8f..8d97638 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -45,10 +45,13 @@ const config = { server: process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID ? { - hmr: { - protocol: 'wss', - port: 3001, - }, + hmr: process.env.GITPOD_WORKSPACE_URL + ? { + host: process.env.GITPOD_WORKSPACE_URL.replace('https://', '3000-'), + protocol: "wss", + clientPort: 443 + } + : true } : {}, }, |