Fix lag

3 files changed, 83 insertions, 62 deletions

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 39a2370..26b01d9 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -5,9 +5,11 @@
 	export let preview: PreviewedAuctionData | null
 	let lastPreview: PreviewedAuctionData | null
 
-	$: lastPreview = preview ?? lastPreview
+	$: {
+		lastPreview = preview ?? lastPreview
+	}
 
-	function onClick(e: MouseEvent) {
+	function onMouseMove(e: MouseEvent) {
 		// commented out because it doesn't work: sometimes e.target is null when we click a point
 		if (e.target && !(e.target as HTMLElement).closest('.item-auction-history')) {
 			preview = null
@@ -16,29 +18,32 @@
 	}
 </script>
 
-<svelte:body on:mousemove={onClick} />
+<svelte:body on:mousemove={onMouseMove} />
 
 {#if lastPreview}
 	<div
-		id="auction-preview-tooltip"
-		class:hidden={preview === null}
-		style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px"
+		id="auction-preview-tooltip-container"
+		style={lastPreview ? `left: ${lastPreview.pageX}px; top: ${lastPreview.pageY}px` : undefined}
 		out:fade={{ duration: 100 }}
 		in:fade={{ duration: 100 }}
 	>
-		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
-		<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
+		<div id="auction-preview-tooltip">
+			<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
+			<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
+		</div>
 	</div>
 {/if}
 
 <style>
-	#auction-preview-tooltip {
+	#auction-preview-tooltip-container {
 		position: absolute;
+		pointer-events: none;
+		transition: left 200ms linear, top 200ms linear;
+	}
+	#auction-preview-tooltip {
 		border: 1px solid rgba(255, 255, 255, 0.1);
 		background: rgba(0, 0, 0, 0.1);
 		padding: 0.5em;
-		transition: left 200ms, top 200ms;
-		pointer-events: none;
 	}
 
 	p {
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 3b89149..6c59e70 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { browser } from '$app/env'
+
 	import type { ItemAuctionsSchema, SimpleAuctionSchema } from './APITypes'
 	import type { PreviewedAuctionData } from './utils'
 
@@ -50,12 +52,20 @@
 		if (nearestAuction) {
 			const [svgX, svgY] = getAuctionCoordinates(nearestAuction)
 			const [x, y] = [(svgX * rect.width) / 100, (svgY * rect.height) / 100]
+			if (currentlyPreviewedAuction?.auction.id === nearestAuction.id) return
 			currentlyPreviewedAuction = {
 				pageX: window.scrollX + rect.left + x,
 				pageY: window.scrollY + rect.top + y,
 				auction: nearestAuction,
 			}
-		} else currentlyPreviewedAuction = null
+			for (const el of document.getElementsByClassName('selected-auction'))
+				el.classList.remove('selected-auction')
+			document
+				.getElementsByClassName(`auction-point-${nearestAuction.id}`)[0]
+				.classList.add('selected-auction')
+		} else {
+			currentlyPreviewedAuction = null
+		}
 	}
 
 	function shortenBigNumber(n: number) {
@@ -67,55 +77,54 @@
 	}
 </script>
 
-{#if item.auctions.length > 0}
-	<svg viewBox="0 0 100 100" class="item-auction-history">
-		<defs>
-			<pattern
-				id="grid-{item.id}"
-				width={gridWidth}
-				height={gridHeight}
-				patternUnits="userSpaceOnUse"
-				x="0%"
-				y="100%"
-			>
-				<path
-					d="M {gridWidth} {gridHeight} L 0 {gridHeight} 0 0"
-					fill="none"
-					stroke="#fff2"
-					stroke-width="1"
-				/>
-			</pattern>
-		</defs>
-		{#each new Array(Math.floor(maxCoins / heightCoinInterval) + 1) as _, intervalIndex}
-			<text
-				x="-1"
-				y={Math.min(Math.max(5, 100 - intervalIndex * gridHeight + 2), 100)}
-				fill="var(--theme-darker-text)"
-				font-size="6px"
-				text-anchor="end">{shortenBigNumber(heightCoinInterval * intervalIndex)}</text
-			>
-		{/each}
-		<rect
-			width="100%"
-			height="100%"
-			fill="url(#grid-{item.id})"
-			on:mousemove={updateNearest}
-			bind:this={svgEl}
-		/>
-
-		{#each item.auctions as auction}
-			{@const [x, y] = getAuctionCoordinates(auction)}
-			<circle
-				cx={x}
-				cy={y}
-				r="1"
-				stroke-width="4"
-				fill={auction.bin ? '#11b' : '#1b1'}
-				class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
+<svg viewBox="0 0 100 100" class="item-auction-history">
+	<defs>
+		<pattern
+			id="grid-{item.id}"
+			width={gridWidth}
+			height={gridHeight}
+			patternUnits="userSpaceOnUse"
+			x="0%"
+			y="100%"
+		>
+			<path
+				d="M {gridWidth} {gridHeight} L 0 {gridHeight} 0 0"
+				fill="none"
+				stroke="#fff2"
+				stroke-width="1"
 			/>
-		{/each}
-	</svg>
-{/if}
+		</pattern>
+	</defs>
+	{#each new Array(Math.floor(maxCoins / heightCoinInterval) + 1) as _, intervalIndex}
+		<text
+			x="-1"
+			y={Math.min(Math.max(5, 100 - intervalIndex * gridHeight + 2), 100)}
+			fill="var(--theme-darker-text)"
+			font-size="6px"
+			text-anchor="end">{shortenBigNumber(heightCoinInterval * intervalIndex)}</text
+		>
+	{/each}
+	<rect
+		width="100%"
+		height="100%"
+		fill="url(#grid-{item.id})"
+		on:mousemove={updateNearest}
+		bind:this={svgEl}
+	/>
+
+	{#each item.auctions as auction (auction.id)}
+		{@const [x, y] = getAuctionCoordinates(auction)}
+		<circle
+			cx={x}
+			cy={y}
+			r="1"
+			stroke-width="4"
+			fill={auction.bin ? '#11b' : '#1b1'}
+			class="auction-point-{auction.id}"
+		/>
+		<!-- class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id} -->
+	{/each}
+</svg>
 
 <style>
 	.item-auction-history {
@@ -123,7 +132,7 @@
 		width: 100%;
 	}
 
-	.selected-auction {
+	svg :global(.selected-auction) {
 		stroke: #06e7;
 	}
 </style>
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index 3c57e1e..9e7615c 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -30,7 +30,7 @@
 	export let data: ItemAuctionsSchema[]
 	export let auctionItems: Record<string, { display: { name: string }; vanillaId?: string }>
 
-	let currentlyPreviewedAuction: PreviewedAuctionData | null
+	let currentlyPreviewedAuction: PreviewedAuctionData | null = null
 
 	let query: string = ''
 
@@ -89,6 +89,13 @@
 			loadingPage = false
 		}
 	}
+
+	$: {
+		if (browser && !currentlyPreviewedAuction) {
+			for (const el of document.getElementsByClassName('selected-auction'))
+				el.classList.remove('selected-auction')
+		}
+	}
 </script>
 
 <Head title="SkyBlock Auction Prices" />