From a7bc98c22707ad6adaae976783dcceb1d3009ca5 Mon Sep 17 00:00:00 2001
From: KoalaTrapLord <265133236+KoalaTrapLord@users.noreply.github.com>
Date: Sat, 21 Mar 2026 21:52:11 -0400
Subject: [PATCH] feat(ui): add 450ms hover delay to card preview popup

- Add _hoverTimer and HOVER_DELAY (450ms) properties to CardPreview
- mouseenter starts a delay timer before showing the popup
- mousemove only repositions if popup is already visible
- mouseleave clears the timer and hides immediately
- hide() now also clears any pending timer
---
 ui/deckbuilder.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/deckbuilder.js b/ui/deckbuilder.js
index 95ede77..0578945 100644
--- a/ui/deckbuilder.js
+++ b/ui/deckbuilder.js
@@ -98,7 +98,7 @@ const ToastManager = {
 const CardPreview = {
     el: null,
     img: null,
-    visible: false,
+    visible: false,   _hoverTimer: null,   HOVER_DELAY: 450,
 
     init() {
         this.el = qs('#deck-card-preview');
@@ -126,14 +126,14 @@ const CardPreview = {
     },
 
     hide() {
-        if (this.el) this.el.style.display = 'none';
+        clearTimeout(this._hoverTimer); if (this.el) this.el.style.display = 'none';
         this.visible = false;
     },
 
     attach(nameEl, scryfallId) {
         if (!scryfallId) return;
-        nameEl.addEventListener('mouseenter', (e) => this.show(scryfallId, e.clientX, e.clientY));
-        nameEl.addEventListener('mousemove',  (e) => this.show(scryfallId, e.clientX, e.clientY));
+        let lastE = null; nameEl.addEventListener('mouseenter', (e) => { lastE = e; clearTimeout(this._hoverTimer); this._hoverTimer = setTimeout(() => { if (lastE) this.show(scryfallId, lastE.clientX, lastE.clientY); }, this.HOVER_DELAY); });
+        nameEl.addEventListener('mousemove', (e) => { lastE = e; if (this.visible) this.show(scryfallId, e.clientX, e.clientY); });
         nameEl.addEventListener('mouseleave', () => this.hide());
     }
 };