start adding really basic tooltip

3 files changed, 45 insertions, 1 deletions

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
new file mode 100644
index 0000000..226feee
--- /dev/null
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { PreviewedAuctionData } from './utils'
+
+	export let preview: PreviewedAuctionData | null
+</script>
+
+{#if preview}
+	<div id="auction-preview-tooltip" style="left: {preview.pageX}px; top: {preview.pageY}px">
+		<p>uuid: {JSON.stringify(preview)}</p>
+	</div>
+{/if}
+
+<style>
+	#auction-preview-tooltip {
+		position: absolute;
+		width: 10em;
+		height: 10em;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: var(--theme-lighter-background);
+		pointer-events: none;
+	}
+</style>
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index f887725..e416163 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { ItemAuctionsSchema } from './APITypes'
+	import type { PreviewedAuctionData } from './utils'
 
 	export let item: ItemAuctionsSchema
+	export let currentlyPreviewedAuction: PreviewedAuctionData | null
 
 	let maxCoins: number = item.auctions.reduce((max, auction) => Math.max(max, auction.coins), 0)
 
@@ -17,6 +19,17 @@
 	let minutesBetween = (currentTimestamp - earliestTimestamp) / 360
 
 	let gridWidth = 100 / minutesBetween
+
+	function showAuctionPreview(e, uuid: string) {
+		currentlyPreviewedAuction = {
+			pageX: e.pageX,
+			pageY: e.pageY,
+			uuid,
+		}
+	}
+	function hideAuctionPreview() {
+		currentlyPreviewedAuction = null
+	}
 </script>
 
 <svg viewBox="0 0 100 100" class="item-auction-history">
@@ -36,6 +49,9 @@
 			r="1"
 			stroke-width="4"
 			fill={auction.bin ? '#11b' : '#1b1'}
+			on:mouseenter={e => showAuctionPreview(e, auction.id)}
+			on:click={e => showAuctionPreview(e, auction.id)}
+			on:mouseleave={hideAuctionPreview}
 		/>
 	{/each}
 	<!-- {item.auctions} -->
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e34d573..c2e4b86 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -219,4 +219,10 @@ export function skyblockTime(year: number, month = 1, day = 1) {
     if (month) time += 37200000 * (month - 1)
     if (day) time += 1200000 * (day - 1)
     return time
-}
\ No newline at end of file
+}
+
+export interface PreviewedAuctionData {
+    pageX: number
+    pageY: number
+    uuid: string
+}