Fix lag

5 files changed, 92 insertions, 71 deletions

diff --git a/package.json b/package.json
index b2ba8a9..a2b2139 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,7 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
-    "svelte": "^3.46.4",
     "svelte-check": "^2.4.6",
-    "svelte-preprocess": "^4.10.4",
     "tslib": "^2.3.1",
     "typescript": "~4.6.4",
     "vite": "^2.8.6",
@@ -38,10 +36,12 @@
     "@sveltejs/adapter-node": "^1.0.0-next.68",
     "@sveltejs/adapter-static": "^1.0.0-next.28",
     "@sveltejs/adapter-vercel": "^1.0.0-next.43",
-    "@sveltejs/kit": "^1.0.0-next.330",
+    "@sveltejs/kit": "^1.0.0-next.335",
     "cookie": "^0.5.0",
     "dotenv": "^16.0.0",
     "skyblock-assets": "^2.0.8",
+    "svelte": "^3.48.0",
+    "svelte-preprocess": "^4.10.6",
     "typed-hypixel-api": "^1.1.0"
   },
   "packageManager": "yarn@3.1.1"
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" />
diff --git a/yarn.lock b/yarn.lock
index 758e549..dad6890 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -150,10 +150,10 @@
   dependencies:
     esbuild "^0.14.21"
 
-"@sveltejs/kit@^1.0.0-next.330":
-  version "1.0.0-next.330"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.330.tgz#1865ca9e38eb34633b0e469e833f4f51ebb5eb69"
-  integrity sha512-Wb95D5tOF8BViZuikqzZLAcupdS7TpXtadNPgpEOxKowmkrW8xjRrrfVdPIkNOLqAP1V+gKInmQ/gFYmnv5EjA==
+"@sveltejs/kit@^1.0.0-next.335":
+  version "1.0.0-next.335"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.335.tgz#14bd4016633605b9edc8b7a77cd393ca778449db"
+  integrity sha512-iZutvIJSSNJJGceZOX2ZWqcyRqp9MIPnNWOgOLXqBG/Z/+KLoN8MRI0U79XIw232SAEXhhkwaJtB3UnXQSu85A==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
     chokidar "^3.5.3"
@@ -1608,7 +1608,7 @@ svelte-hmr@^0.14.11:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.11.tgz#63d532dc9c2c849ab708592f034765fa2502e568"
   integrity sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==
 
-svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.4:
+svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.6:
   version "4.10.6"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz#5f9a53e7ed3b85fc7e0841120c725b76ac5a1ba8"
   integrity sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ==
@@ -1620,7 +1620,7 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.4:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.46.4:
+svelte@^3.48.0:
   version "3.48.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.48.0.tgz#f98c866d45e155bad8e1e88f15f9c03cd28753d3"
   integrity sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==