auction search and fixes

3 files changed, 31 insertions, 14 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>