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/AuctionPreviewTooltip.svelte | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

(limited to 'src/lib/AuctionPreviewTooltip.svelte')

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}
 
-- 
cgit