moved to API

app/ui-tarot-spread.js

@@ -1,9 +1,12 @@
 (function () {
   "use strict";
 
+  const dataService = window.TarotDataService || {};
+
   let initialized = false;
   let activeTarotSpread = null;
   let activeTarotSpreadDraw = [];
+  let activeTarotSpreadLoading = false;
   let config = {
     ensureTarotSection: null,
     getReferenceData: () => null,
@@ -59,22 +62,6 @@
     return value === "celtic-cross" ? "celtic-cross" : "three-card";
   }
 
-  function drawNFromDeck(n) {
-    const allCards = window.TarotSectionUi?.getCards?.() || [];
-    if (!allCards.length) return [];
-
-    const shuffled = [...allCards];
-    for (let index = shuffled.length - 1; index > 0; index -= 1) {
-      const swapIndex = Math.floor(Math.random() * (index + 1));
-      [shuffled[index], shuffled[swapIndex]] = [shuffled[swapIndex], shuffled[index]];
-    }
-
-    return shuffled.slice(0, n).map((card) => ({
-      ...card,
-      reversed: Math.random() < 0.3
-    }));
-  }
-
   function escapeHtml(value) {
     return String(value || "")
       .replace(/&/g, "&amp;")
@@ -88,15 +75,27 @@
     return spreadId === "celtic-cross" ? CELTIC_CROSS_POSITIONS : THREE_CARD_POSITIONS;
   }
 
-  function regenerateTarotSpreadDraw() {
+  async function regenerateTarotSpreadDraw() {
     const normalizedSpread = normalizeTarotSpread(activeTarotSpread);
     const positions = getSpreadPositions(normalizedSpread);
-    const cards = drawNFromDeck(positions.length);
-    activeTarotSpreadDraw = positions.map((position, index) => ({
-      position,
-      card: cards[index] || null,
-      revealed: false
-    }));
+
+    activeTarotSpreadLoading = true;
+    try {
+      const payload = await dataService.pullTarotSpread?.(normalizedSpread);
+      const apiPositions = Array.isArray(payload?.positions) ? payload.positions : [];
+      activeTarotSpreadDraw = apiPositions.map((entry, index) => ({
+        position: entry?.position || positions[index] || null,
+        card: entry?.card
+          ? {
+              ...entry.card,
+              reversed: Boolean(entry?.reversed ?? entry.card?.reversed)
+            }
+          : null,
+        revealed: false
+      }));
+    } finally {
+      activeTarotSpreadLoading = false;
+    }
   }
 
   function renderTarotSpreadMeanings() {
@@ -158,8 +157,20 @@
       || ""
     ).trim();
 
+    if (activeTarotSpreadLoading) {
+      tarotSpreadBoardEl.innerHTML = '<div class="spread-empty">Loading spread from API...</div>';
+      if (tarotSpreadMeaningsEl) {
+        tarotSpreadMeaningsEl.innerHTML = "";
+      }
+      return;
+    }
+
     if (!activeTarotSpreadDraw.length) {
-      regenerateTarotSpreadDraw();
+      tarotSpreadBoardEl.innerHTML = '<div class="spread-empty">Loading spread...</div>';
+      if (tarotSpreadMeaningsEl) {
+        tarotSpreadMeaningsEl.innerHTML = "";
+      }
+      return;
     }
 
     tarotSpreadBoardEl.className = `tarot-spread-board tarot-spread-board--${isCeltic ? "celtic" : "three"}`;
@@ -267,10 +278,14 @@
 
   function showTarotSpreadView(spreadId = "three-card") {
     activeTarotSpread = normalizeTarotSpread(spreadId);
-    regenerateTarotSpreadDraw();
+    activeTarotSpreadLoading = true;
+    activeTarotSpreadDraw = [];
     applyViewState();
     ensureTarotBrowseData();
     renderTarotSpread();
+    void regenerateTarotSpreadDraw().then(() => {
+      renderTarotSpread();
+    });
   }
 
   function setSpread(spreadId, openTarotSection = false) {
@@ -281,8 +296,12 @@
   }
 
   function revealAll() {
+    if (activeTarotSpreadLoading) {
+      return;
+    }
+
     if (!activeTarotSpreadDraw.length) {
-      regenerateTarotSpreadDraw();
+      return;
     }
 
     activeTarotSpreadDraw.forEach((entry) => {
@@ -376,8 +395,12 @@
 
     if (tarotSpreadRedrawEl) {
       tarotSpreadRedrawEl.addEventListener("click", () => {
-        regenerateTarotSpreadDraw();
+        activeTarotSpreadLoading = true;
+        activeTarotSpreadDraw = [];
         renderTarotSpread();
+        void regenerateTarotSpreadDraw().then(() => {
+          renderTarotSpread();
+        });
       });
     }