diff options
| author | mat <27899617+mat-1@users.noreply.github.com> | 2022-05-19 02:34:18 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-19 02:34:18 +0000 |
| commit | 9b714fe39c83794538e0b38a63afd2bf39664c2f (patch) | |
| tree | e0b638cad2b38c17f84fe5270f360a21756f6728 /src/lib/AuctionPreviewTooltip.svelte | |
| parent | 41dc70e3af49fc11383d0dff3bbe8f006272bed9 (diff) | |
| parent | 97688e22c8335642b72d200ce0a865353bef5207 (diff) | |
| download | skyblock-stats-9b714fe39c83794538e0b38a63afd2bf39664c2f.tar.gz skyblock-stats-9b714fe39c83794538e0b38a63afd2bf39664c2f.tar.bz2 skyblock-stats-9b714fe39c83794538e0b38a63afd2bf39664c2f.zip | |
Merge pull request #3 from skyblockstats/auctions
Auction Prices
Diffstat (limited to 'src/lib/AuctionPreviewTooltip.svelte')
| -rw-r--r-- | src/lib/AuctionPreviewTooltip.svelte | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte new file mode 100644 index 0000000..26b01d9 --- /dev/null +++ b/src/lib/AuctionPreviewTooltip.svelte @@ -0,0 +1,56 @@ +<script lang="ts"> + import type { PreviewedAuctionData } from './utils' + import { fade } from 'svelte/transition' + + export let preview: PreviewedAuctionData | null + let lastPreview: PreviewedAuctionData | null + + $: { + lastPreview = preview ?? lastPreview + } + + 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 + lastPreview = null + } + } +</script> + +<svelte:body on:mousemove={onMouseMove} /> + +{#if lastPreview} + <div + id="auction-preview-tooltip-container" + style={lastPreview ? `left: ${lastPreview.pageX}px; top: ${lastPreview.pageY}px` : undefined} + out:fade={{ duration: 100 }} + in:fade={{ duration: 100 }} + > + <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-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; + } + + p { + margin: 0; + } + + time { + color: var(--theme-darker-text); + } +</style> |