From c057eb0aaed4a746f2d3a4f15688ef21cc6213b3 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 20:48:54 -0500
Subject: fixes and improved tooltip

---
 src/lib/APITypes.d.ts                  |  2 +-
 src/lib/AuctionPreviewTooltip.svelte   | 20 +++++++++-----------
 src/lib/AuctionPriceScatterplot.svelte |  4 ++--
 src/lib/api.ts                         |  1 +
 src/routes/auctionprices.svelte        |  4 ++--
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 6429e8b..95231f7 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -450,6 +450,6 @@ export interface SimpleAuctionSchema {
 }
 export interface ItemAuctionsSchema {
 	/** The id of the item */
-	_id: string
+	id: string
 	auctions: SimpleAuctionSchema[]
 }
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 417f8b3..a3a73fb 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -1,34 +1,32 @@
 <script lang="ts">
-	import { API_URL } from './api'
-
-	import Loader from './layout/Loader.svelte'
 	import type { PreviewedAuctionData } from './utils'
+	import { fade } from 'svelte/transition'
 
 	export let preview: PreviewedAuctionData | null
 	let lastPreview: PreviewedAuctionData | null
 
 	$: lastPreview = preview ?? lastPreview
 
-	function onClick(e) {
+	function onClick(e: MouseEvent) {
 		// commented out because it doesn't work: sometimes e.target is null when we click a point
-		// if (!e.target.closest('.item-auction-history')) {
-		// 	preview = null
-		// 	lastPreview = null
-		// }
+		if (e.target && !(e.target as HTMLElement).closest('.item-auction-history')) {
+			preview = null
+			lastPreview = null
+		}
 	}
 </script>
 
-<svelte:body on:click={onClick} />
+<svelte:body on:mousemove={onClick} />
 
 {#if lastPreview}
-	{@const date = new Date(lastPreview.auction.ts * 1000)}
 	<div
 		id="auction-preview-tooltip"
 		class:hidden={preview === null}
 		style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px"
+		out:fade={{ duration: 100 }}
 	>
 		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
-		<time>{date.toLocaleString()}</time>
+		<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
 	</div>
 {/if}
 
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 0532f97..cfdbe9b 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -57,7 +57,7 @@
 <svg viewBox="0 0 100 100" class="item-auction-history">
 	<defs>
 		<pattern
-			id="grid-{item._id}"
+			id="grid-{item.id}"
 			width={gridWidth}
 			height={gridHeight}
 			patternUnits="userSpaceOnUse"
@@ -70,7 +70,7 @@
 	<rect
 		width="100%"
 		height="100%"
-		fill="url(#grid-{item._id})"
+		fill="url(#grid-{item.id})"
 		on:mousemove={updateNearest}
 		bind:this={svgEl}
 	/>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 689a952..1721d01 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,2 +1,3 @@
 // the trailing slash is required
 export const API_URL = 'https://skyblock-api.matdoes.dev/'
+// export const API_URL = 'http://localhost:8080/'
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index eccaab7..3c301d0 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -72,11 +72,11 @@
 		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
 	</div>
 	<div class="item-list">
-		{#each data as item (item._id)}
+		{#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>{auctionItems[item._id]}</h2>
+				<h2>{auctionItems[item.id]}</h2>
 				<div class="auctions-info-text">
 					{#if binAuctions.length > 0}
 						<p>
-- 
cgit