start adding really basic tooltip

4 files changed, 59 insertions, 3 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
+}
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index f464f7b..4e7bfde 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -16,13 +16,23 @@
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
-	import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils'
+	import {
+		millisecondsToTime,
+		TIER_COLORS,
+		colorCodes,
+		cleanId,
+		toTitleCase,
+		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'
 
 	export let data: ItemAuctionsSchema[]
 
+	let currentlyPreviewedAuction: PreviewedAuctionData | null
+
 	let query: string = ''
 
 	let pageHeight = 0
@@ -44,6 +54,8 @@
 
 <svelte:window on:scroll={checkScroll} />
 
+<AuctionPreviewTooltip preview={currentlyPreviewedAuction} />
+
 <main>
 	<h1>SkyBlock Auction Prices</h1>
 	<div class="filter-items-settings">
@@ -74,7 +86,7 @@
 					{/if}
 				</div>
 				<div class="item-scatterplot">
-					<AuctionPriceScatterplot {item} />
+					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
 				</div>
 			</div>
 		{/each}