added compare deck to house of card focus

app/ui-tarot.js

@@ -1,5 +1,12 @@
 (function () {
-  const { resolveTarotCardImage, resolveTarotCardThumbnail, getTarotCardDisplayName, getTarotCardSearchAliases } = window.TarotCardImages || {};
+  const {
+    resolveTarotCardImage,
+    resolveTarotCardThumbnail,
+    getTarotCardDisplayName,
+    getTarotCardSearchAliases,
+    getDeckOptions,
+    getActiveDeck
+  } = window.TarotCardImages || {};
   const tarotHouseUi = window.TarotHouseUi || {};
   const tarotRelationsUi = window.TarotRelationsUi || {};
   const tarotCardDerivations = window.TarotCardDerivations || {};
@@ -686,29 +693,60 @@
       ?.scrollIntoView({ block: "nearest" });
   }
 
-  function buildLightboxCardRequestById(cardIdToResolve) {
+  function getRegisteredDeckOptionMap() {
+    const entries = typeof getDeckOptions === "function" ? getDeckOptions() : [];
+    return new Map(
+      (Array.isArray(entries) ? entries : [])
+        .map((entry) => ({
+          id: String(entry?.id || "").trim(),
+          label: String(entry?.label || entry?.id || "").trim()
+        }))
+        .filter((entry) => entry.id)
+        .map((entry) => [entry.id, entry])
+    );
+  }
+
+  function getRegisteredDeckList() {
+    return Array.from(getRegisteredDeckOptionMap().values());
+  }
+
+  function buildDeckLightboxCardRequest(cardIdToResolve, deckIdToResolve = "") {
     const card = state.cards.find((entry) => entry.id === cardIdToResolve);
     if (!card) {
       return null;
     }
 
+    const resolvedDeckId = String(deckIdToResolve || getActiveDeck?.() || "").trim();
+    const trumpNumber = Number.isFinite(Number(card?.number)) ? Number(card.number) : undefined;
+    const deckOptions = resolvedDeckId ? { deckId: resolvedDeckId, trumpNumber } : { trumpNumber };
     const src = typeof resolveTarotCardImage === "function"
-      ? resolveTarotCardImage(card.name)
+      ? resolveTarotCardImage(card.name, deckOptions)
       : "";
-    if (!src) {
-      return null;
-    }
+    const deckMeta = resolvedDeckId ? getRegisteredDeckOptionMap().get(resolvedDeckId) : null;
+    const label = (typeof getTarotCardDisplayName === "function"
+      ? getTarotCardDisplayName(card.name, deckOptions)
+      : "") || getDisplayCardName(card) || card.name || "Tarot card enlarged image";
 
-    const label = getDisplayCardName(card) || card.name || "Tarot card enlarged image";
     return {
       src,
       altText: label,
       label,
       cardId: card.id,
+      deckId: resolvedDeckId,
+      deckLabel: deckMeta?.label || resolvedDeckId,
       compareDetails: tarotDetailRenderer.buildCompareDetails?.(card) || []
     };
   }
 
+  function buildLightboxCardRequestById(cardIdToResolve) {
+    const request = buildDeckLightboxCardRequest(cardIdToResolve, getActiveDeck?.() || "");
+    if (!request?.src) {
+      return null;
+    }
+
+    return request;
+  }
+
   function renderList(elements) {
     if (!elements?.tarotCardListEl) {
       return;
@@ -760,15 +798,25 @@
       openCardLightbox: (src, altText, options = {}) => {
         const cardId = String(options?.cardId || "").trim();
         const primaryCardRequest = cardId ? buildLightboxCardRequestById(cardId) : null;
+        const activeDeckId = String(getActiveDeck?.() || primaryCardRequest?.deckId || "").trim();
+        const availableCompareDecks = getRegisteredDeckList().filter((deck) => deck.id && deck.id !== activeDeckId);
         window.TarotUiLightbox?.open?.({
           src: primaryCardRequest?.src || src,
           altText: primaryCardRequest?.altText || altText || "Tarot card enlarged image",
           label: primaryCardRequest?.label || altText || "Tarot card enlarged image",
           cardId: primaryCardRequest?.cardId || cardId,
+          deckId: primaryCardRequest?.deckId || activeDeckId,
+          deckLabel: primaryCardRequest?.deckLabel || "",
           compareDetails: primaryCardRequest?.compareDetails || [],
           allowOverlayCompare: true,
+          allowDeckCompare: Boolean(cardId),
+          activeDeckId,
+          activeDeckLabel: primaryCardRequest?.deckLabel || "",
+          availableCompareDecks,
+          maxCompareDecks: 2,
           sequenceIds: state.cards.map((card) => card.id),
           resolveCardById: buildLightboxCardRequestById,
+          resolveDeckCardById: buildDeckLightboxCardRequest,
           onSelectCardId: (nextCardId) => {
             const latestElements = getElements();
             selectCardById(nextCardId, latestElements);