diff options
| -rw-r--r-- | src/lib/AuctionPreviewTooltip.svelte | 40 | ||||
| -rw-r--r-- | src/lib/AuctionPriceScatterplot.svelte | 68 | ||||
| -rw-r--r-- | src/lib/utils.ts | 4 | ||||
| -rw-r--r-- | svelte.config.js | 18 |
4 files changed, 89 insertions, 41 deletions
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, + }, + } + : {}, }, } } |