From f9bb90cab81e7c7f8c2a7e932bbf2ddbf7b51f1f Mon Sep 17 00:00:00 2001 From: mat Date: Tue, 17 May 2022 18:50:49 +0000 Subject: auction search and fixes --- src/lib/AuctionPreviewTooltip.svelte | 4 ++-- src/lib/AuctionPriceScatterplot.svelte | 15 ++++++++++++--- src/routes/auctionprices.svelte | 26 +++++++++++++++++--------- 3 files changed, 31 insertions(+), 14 deletions(-) (limited to 'src') 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} @@ -78,4 +83,8 @@ height: 10em; width: 100%; } + + .selected-auction { + stroke: #06e7; + } 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 @@