diff options
Diffstat (limited to 'src/lib/AuctionPreviewTooltip.svelte')
| -rw-r--r-- | src/lib/AuctionPreviewTooltip.svelte | 40 |
1 files changed, 35 insertions, 5 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> |