updated card images

2026-04-24 00:38:44 -07:00
parent a129f0db6a
commit 5744edadb9
6 changed files with 225 additions and 18 deletions
@@ -520,6 +520,143 @@
    renderEdgeCard(context, wall, bodyEl, wallEdgeDirections);
  }

+  function renderEdgeDetail(context) {
+    const {
+      state,
+      elements,
+      normalizeId,
+      normalizeEdgeId,
+      formatEdgeName,
+      getWallById,
+      getEdgeById,
+      getEdges,
+      getEdgeWalls,
+      getEdgeLetterId,
+      getEdgeLetter,
+      getEdgePathEntry,
+      getEdgeAstrologySymbol,
+      getHebrewLetterName,
+      toFiniteNumber,
+      onSelectWall
+    } = context;
+
+    const edge = getEdgeById(state.selectedEdgeId) || getEdges()[0] || null;
+    if (!edge || !elements?.detailNameEl || !elements?.detailSubEl || !elements?.detailBodyEl) {
+      return false;
+    }
+
+    const edgeId = normalizeEdgeId(edge.id);
+    const edgeWalls = getEdgeWalls(edge);
+    const currentWallId = normalizeId(state.selectedWallId);
+    const preferredWallId = edgeWalls.includes(currentWallId)
+      ? currentWallId
+      : normalizeId(edgeWalls[0]);
+
+    if (preferredWallId) {
+      state.selectedWallId = preferredWallId;
+    }
+    state.selectedEdgeId = edgeId;
+
+    const wallNames = edgeWalls
+      .map((wallId) => getWallById(wallId)?.name || wallId)
+      .filter(Boolean)
+      .join(" ↔ ");
+    const edgeName = toDisplayText(edge?.name) || formatEdgeName(edgeId);
+    const edgeLetterId = getEdgeLetterId(edge);
+    const edgeLetter = getEdgeLetter(edge);
+    const edgeLetterName = edgeLetterId ? (getHebrewLetterName(edgeLetterId) || edgeLetterId) : "";
+    const edgeLetterText = edgeLetterId
+      ? [edgeLetter, edgeLetterName].filter(Boolean).join(" ")
+      : "";
+    const edgePath = getEdgePathEntry(edge);
+    const astrologyType = toDisplayText(edgePath?.astrology?.type);
+    const astrologyName = toDisplayText(edgePath?.astrology?.name);
+    const astrologySymbol = getEdgeAstrologySymbol(edge);
+    const astrologyText = astrologySymbol && astrologyName
+      ? `${astrologySymbol} ${astrologyName}`
+      : astrologySymbol || astrologyName;
+    const tarotCard = toDisplayText(edgePath?.tarot?.card);
+    const tarotTrumpNumber = toFiniteNumber(edgePath?.tarot?.trumpNumber);
+    const pathNo = toFiniteNumber(edgePath?.pathNumber);
+
+    elements.detailNameEl.textContent = `${edgeName} Edge`;
+    elements.detailSubEl.textContent = [edgeLetterText, astrologyText].filter(Boolean).join(" · ") || "Cube Edge";
+
+    const bodyEl = elements.detailBodyEl;
+    bodyEl.innerHTML = "";
+
+    const summary = document.createElement("div");
+    summary.className = "planet-text";
+    summary.innerHTML = `
+      <dl class="alpha-dl">
+        <dt>Name</dt><dd>${toDetailValueMarkup(edgeName)}</dd>
+        <dt>Between</dt><dd>${toDetailValueMarkup(wallNames)}</dd>
+        <dt>Letter</dt><dd>${toDetailValueMarkup(edgeLetterText)}</dd>
+        <dt>Astrology</dt><dd>${toDetailValueMarkup(astrologyText)}</dd>
+        <dt>Tarot</dt><dd>${toDetailValueMarkup(tarotCard || (tarotTrumpNumber != null ? `Trump ${tarotTrumpNumber}` : ""))}</dd>
+        <dt>Path</dt><dd>${toDetailValueMarkup(pathNo != null ? `Path ${pathNo}` : "")}</dd>
+      </dl>
+    `;
+    bodyEl.appendChild(createMetaCard("Edge Details", summary));
+
+    if (Array.isArray(edge?.keywords) && edge.keywords.length) {
+      bodyEl.appendChild(createMetaCard("Keywords", edge.keywords.join(", ")));
+    }
+
+    if (edge?.description) {
+      bodyEl.appendChild(createMetaCard("Description", edge.description));
+    }
+
+    const linksCard = document.createElement("div");
+    linksCard.className = "planet-meta-card";
+    linksCard.innerHTML = "<strong>Correspondence Links</strong>";
+    const links = document.createElement("div");
+    links.className = "kab-god-links";
+
+    edgeWalls.forEach((wallId) => {
+      const wall = getWallById(wallId);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "kab-god-link";
+      button.textContent = `${wall?.name || wallId} Wall`;
+      button.addEventListener("click", () => {
+        onSelectWall(wallId);
+      });
+      links.appendChild(button);
+    });
+
+    if (edgeLetterId) {
+      links.appendChild(createNavButton(edgeLetter || "!", "nav:alphabet", {
+        alphabet: "hebrew",
+        hebrewLetterId: edgeLetterId
+      }));
+    }
+
+    if (astrologyType === "zodiac" && astrologyName) {
+      links.appendChild(createNavButton(astrologyName, "nav:zodiac", {
+        signId: normalizeId(astrologyName)
+      }));
+    }
+
+    if (tarotCard || tarotTrumpNumber != null) {
+      links.appendChild(createNavButton(tarotCard || `Trump ${tarotTrumpNumber}`, "nav:tarot-trump", {
+        cardName: tarotCard,
+        trumpNumber: tarotTrumpNumber
+      }));
+    }
+
+    if (pathNo != null) {
+      links.appendChild(createNavButton(`Path ${pathNo}`, "nav:kabbalah-path", { pathNo }));
+    }
+
+    if (links.childElementCount) {
+      linksCard.appendChild(links);
+      bodyEl.appendChild(linksCard);
+    }
+
+    return true;
+  }
+
  function renderDetail(context) {
    if (context.state.selectedNodeType === "connector" && renderConnectorDetail(context)) {
      return;
@@ -529,6 +666,10 @@
      return;
    }

+    if (context.state.selectedNodeType === "edge" && renderEdgeDetail(context)) {
+      return;
+    }
+
    renderWallDetail(context);
  }