From 8ba9c7090c88c04d43ca727b7ed012cf5a6b58c8 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 16 May 2022 15:36:06 +0000
Subject: start adding really basic tooltip

---
 svelte.config.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'svelte.config.js')

diff --git a/svelte.config.js b/svelte.config.js
index b4cc10d..23b0e12 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -42,15 +42,15 @@ const config = {
 				},
 			},
 			// if the user is on replit or gitpod, use a secure websocket
-			server:
-				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
-					? {
-						hmr: {
-							protocol: 'wss',
-							port: 443,
-						},
-					}
-					: {},
+			// server:
+			// 	process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
+			// 		? {
+			// 			hmr: {
+			// 				protocol: 'wss',
+			// 				port: 443,
+			// 			},
+			// 		}
+			// 		: {},
 		},
 	}
 }
-- 
cgit 


From b6d23f4334eae873e7d32a4d5bb5f8b3a1a67ce5 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 16:20:20 +0000
Subject: improved auction price scatterplot

---
 src/lib/AuctionPreviewTooltip.svelte   | 40 +++++++++++++++++---
 src/lib/AuctionPriceScatterplot.svelte | 68 +++++++++++++++++++++-------------
 src/lib/utils.ts                       |  4 +-
 svelte.config.js                       | 18 ++++-----
 4 files changed, 89 insertions(+), 41 deletions(-)

(limited to 'svelte.config.js')

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 226feee..223cec2 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -1,22 +1,52 @@
 <script lang="ts">
+	import { API_URL } from './api'
+
+	import Loader from './layout/Loader.svelte'
 	import type { PreviewedAuctionData } from './utils'
 
 	export let preview: PreviewedAuctionData | null
+	export let lastPreview: PreviewedAuctionData | null
+
+	$: lastPreview = preview ?? lastPreview
+
+	function onClick(e) {
+		// 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
+		// }
+	}
 </script>
 
-{#if preview}
-	<div id="auction-preview-tooltip" style="left: {preview.pageX}px; top: {preview.pageY}px">
-		<p>uuid: {JSON.stringify(preview)}</p>
+<svelte:body on:click={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"
+	>
+		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
+		<time>{date.toLocaleString()}</time>
 	</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);
+		padding: 0.5em;
+		transition: left 200ms, top 200ms;
 		pointer-events: none;
 	}
+
+	p {
+		margin: 0;
+	}
+
+	time {
+		color: var(--theme-darker-text);
+	}
 </style>
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index e416163..48a3fa5 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,34 +1,47 @@
 <script lang="ts">
-	import type { ItemAuctionsSchema } from './APITypes'
+	import type { ItemAuctionsSchema, SimpleAuctionSchema } from './APITypes'
 	import type { PreviewedAuctionData } from './utils'
 
 	export let item: ItemAuctionsSchema
 	export let currentlyPreviewedAuction: PreviewedAuctionData | null
 
+	let svgEl: SVGElement
 	let maxCoins: number = item.auctions.reduce((max, auction) => Math.max(max, auction.coins), 0)
-
 	let currentTimestamp = Math.floor(Date.now() / 1000)
-
-	let lowestCoinsAuction = item.auctions.reduce(
-		(min, auction) => (auction.coins < min.coins ? auction : min),
-		{ coins: Infinity, ts: currentTimestamp }
-	)
-
 	let earliestTimestamp = item.auctions.length > 0 ? item.auctions[0].ts : 0
-
 	let minutesBetween = (currentTimestamp - earliestTimestamp) / 360
-
 	let gridWidth = 100 / minutesBetween
 
-	function showAuctionPreview(e, uuid: string) {
-		currentlyPreviewedAuction = {
-			pageX: e.pageX,
-			pageY: e.pageY,
-			uuid,
-		}
+	function getAuctionCoordinates(auction: SimpleAuctionSchema) {
+		const timestampPercentage =
+			(auction.ts - earliestTimestamp) / (currentTimestamp - earliestTimestamp)
+		return [timestampPercentage * 100, 100 - (auction.coins / maxCoins) * 100]
 	}
-	function hideAuctionPreview() {
-		currentlyPreviewedAuction = null
+
+	function updateNearest(e: MouseEvent) {
+		const rect = svgEl.getBoundingClientRect()
+
+		const mouseCoords = [e.clientX - rect.left, e.clientY - rect.top]
+		let nearestDistance = Number.MAX_SAFE_INTEGER
+		let nearestAuction: SimpleAuctionSchema | null = null
+		for (const auction of item.auctions) {
+			const auctionCoords = getAuctionCoordinates(auction)
+			const distance =
+				Math.pow(mouseCoords[0] - auctionCoords[0], 2) +
+				Math.pow(mouseCoords[1] - auctionCoords[1], 2)
+			if (distance < nearestDistance) {
+				nearestDistance = distance
+				nearestAuction = auction
+			}
+		}
+		if (nearestAuction) {
+			const [x, y] = getAuctionCoordinates(nearestAuction)
+			currentlyPreviewedAuction = {
+				pageX: window.scrollX + rect.left + x,
+				pageY: window.scrollY + rect.top + y,
+				auction: nearestAuction,
+			}
+		} else currentlyPreviewedAuction = null
 	}
 </script>
 
@@ -38,20 +51,23 @@
 			<path d="M {gridWidth} 0 L 0 0 0 10" fill="none" stroke="#fff2" stroke-width="1" />
 		</pattern>
 	</defs>
-	<rect width="100%" height="100%" fill="url(#grid-{item._id})" />
+	<rect
+		width="100%"
+		height="100%"
+		fill="url(#grid-{item._id})"
+		on:mousemove={updateNearest}
+		bind:this={svgEl}
+	/>
 
 	{#each item.auctions as auction}
-		{@const timestampPercentage =
-			(auction.ts - earliestTimestamp) / (currentTimestamp - earliestTimestamp)}
+		{@const [x, y] = getAuctionCoordinates(auction)}
 		<circle
-			cx={timestampPercentage * 100}
-			cy={100 - (auction.coins / maxCoins) * 100}
+			cx={x}
+			cy={y}
 			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}
+			tabindex="-1"
 		/>
 	{/each}
 	<!-- {item.auctions} -->
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index c2e4b86..c094db4 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,3 +1,5 @@
+import type { SimpleAuctionSchema } from "./APITypes"
+
 export const colorCodes: { [key: string]: string } = {
     '0': '#000000', // black
     '1': '#0000be', // blue
@@ -224,5 +226,5 @@ export function skyblockTime(year: number, month = 1, day = 1) {
 export interface PreviewedAuctionData {
     pageX: number
     pageY: number
-    uuid: string
+    auction: SimpleAuctionSchema
 }
diff --git a/svelte.config.js b/svelte.config.js
index 23b0e12..222cd8f 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -42,15 +42,15 @@ const config = {
 				},
 			},
 			// if the user is on replit or gitpod, use a secure websocket
-			// server:
-			// 	process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
-			// 		? {
-			// 			hmr: {
-			// 				protocol: 'wss',
-			// 				port: 443,
-			// 			},
-			// 		}
-			// 		: {},
+			server:
+				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
+					? {
+						hmr: {
+							protocol: 'wss',
+							port: 3001,
+						},
+					}
+					: {},
 		},
 	}
 }
-- 
cgit 


From f9bb90cab81e7c7f8c2a7e932bbf2ddbf7b51f1f Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 18:50:49 +0000
Subject: auction search and fixes

---
 src/lib/AuctionPreviewTooltip.svelte   |  4 ++--
 src/lib/AuctionPriceScatterplot.svelte | 15 ++++++++++++---
 src/routes/auctionprices.svelte        | 26 +++++++++++++++++---------
 svelte.config.js                       | 11 +++++++----
 4 files changed, 38 insertions(+), 18 deletions(-)

(limited to 'svelte.config.js')

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 223cec2..417f8b3 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -5,7 +5,7 @@
 	import type { PreviewedAuctionData } from './utils'
 
 	export let preview: PreviewedAuctionData | null
-	export let lastPreview: PreviewedAuctionData | null
+	let lastPreview: PreviewedAuctionData | null
 
 	$: lastPreview = preview ?? lastPreview
 
@@ -36,7 +36,7 @@
 	#auction-preview-tooltip {
 		position: absolute;
 		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: var(--theme-lighter-background);
+		background: rgba(0, 0, 0, 0.1);
 		padding: 0.5em;
 		transition: left 200ms, top 200ms;
 		pointer-events: none;
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 48a3fa5..1e774d0 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -25,7 +25,11 @@
 		let nearestDistance = Number.MAX_SAFE_INTEGER
 		let nearestAuction: SimpleAuctionSchema | null = null
 		for (const auction of item.auctions) {
-			const auctionCoords = getAuctionCoordinates(auction)
+			const auctionCoordsSvg = getAuctionCoordinates(auction)
+			const auctionCoords = [
+				(auctionCoordsSvg[0] * rect.width) / 100,
+				(auctionCoordsSvg[1] * rect.height) / 100,
+			]
 			const distance =
 				Math.pow(mouseCoords[0] - auctionCoords[0], 2) +
 				Math.pow(mouseCoords[1] - auctionCoords[1], 2)
@@ -35,7 +39,8 @@
 			}
 		}
 		if (nearestAuction) {
-			const [x, y] = getAuctionCoordinates(nearestAuction)
+			const [svgX, svgY] = getAuctionCoordinates(nearestAuction)
+			const [x, y] = [(svgX * rect.width) / 100, (svgY * rect.height) / 100]
 			currentlyPreviewedAuction = {
 				pageX: window.scrollX + rect.left + x,
 				pageY: window.scrollY + rect.top + y,
@@ -67,7 +72,7 @@
 			r="1"
 			stroke-width="4"
 			fill={auction.bin ? '#11b' : '#1b1'}
-			tabindex="-1"
+			class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
 		/>
 	{/each}
 	<!-- {item.auctions} -->
@@ -78,4 +83,8 @@
 		height: 10em;
 		width: 100%;
 	}
+
+	.selected-auction {
+		stroke: #06e7;
+	}
 </style>
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index 4e7bfde..d07c533 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -3,11 +3,14 @@
 	import { API_URL } from '$lib/api'
 
 	export const load: Load = async ({ params, fetch }) => {
+		const auctionItemsPromise = fetch(`${API_URL}auctionitems`).then(r => r.json())
 		const data = await fetch(`${API_URL}auctionprices`).then(r => r.json())
+		const auctionItems = await auctionItemsPromise
 
 		return {
 			props: {
 				data,
+				auctionItems,
 			},
 		}
 	}
@@ -16,24 +19,29 @@
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
-	import {
-		millisecondsToTime,
-		TIER_COLORS,
-		colorCodes,
-		cleanId,
-		toTitleCase,
-		type PreviewedAuctionData,
-	} from '$lib/utils'
+	import 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'
+	import { browser } from '$app/env'
 
 	export let data: ItemAuctionsSchema[]
+	export let auctionItems: Record<string, string>
 
 	let currentlyPreviewedAuction: PreviewedAuctionData | null
 
 	let query: string = ''
+	$: allMatchingItemIds = Object.entries(auctionItems)
+		.filter(a => a[1].includes(query))
+		.map(a => a[0])
+	$: {
+		if (browser) fetchItems(allMatchingItemIds.slice(0, 100))
+	}
+
+	async function fetchItems(itemIds: string[]) {
+		data = await fetch(`${API_URL}auctionprices?items=${itemIds.join(',')}`).then(r => r.json())
+	}
 
 	let pageHeight = 0
 	$: {
@@ -66,7 +74,7 @@
 			{@const binAuctions = item.auctions.filter(i => i.bin)}
 			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
 			<div class="item-container">
-				<h2>{cleanId(item._id.toLowerCase())}</h2>
+				<h2>{auctionItems[item._id]}</h2>
 				<div class="auctions-info-text">
 					{#if binAuctions.length > 0}
 						<p>
diff --git a/svelte.config.js b/svelte.config.js
index 222cd8f..8d97638 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -45,10 +45,13 @@ const config = {
 			server:
 				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
 					? {
-						hmr: {
-							protocol: 'wss',
-							port: 3001,
-						},
+						hmr: process.env.GITPOD_WORKSPACE_URL
+							? {
+								host: process.env.GITPOD_WORKSPACE_URL.replace('https://', '3000-'),
+								protocol: "wss",
+								clientPort: 443
+							}
+							: true
 					}
 					: {},
 		},
-- 
cgit