${value || "—"}
`; + + const title = document.createElement("strong"); + title.textContent = label; + card.appendChild(title); + + if (value instanceof Node) { + card.appendChild(value); + } else { + const body = document.createElement("p"); + body.className = "planet-text"; + body.textContent = value || "—"; + card.appendChild(body); + } + return card; } + function appendInlineParts(target, parts) { + (Array.isArray(parts) ? parts : []).forEach((part) => { + if (part instanceof Node) { + target.appendChild(part); + return; + } + + const text = String(part ?? ""); + if (text) { + target.appendChild(document.createTextNode(text)); + } + }); + } + + function createInlineEventLink(label, eventName, detail) { + const btn = document.createElement("button"); + btn.type = "button"; + btn.className = "detail-inline-link"; + btn.textContent = String(label || "—"); + btn.addEventListener("click", () => { + document.dispatchEvent(new CustomEvent(eventName, { detail })); + }); + return btn; + } + + function inlineValue(parts) { + const body = document.createElement("p"); + body.className = "planet-text detail-inline-value"; + appendInlineParts(body, parts); + return body; + } + function createNavButton(label, eventName, detail) { const btn = document.createElement("button"); btn.type = "button"; @@ -91,31 +136,22 @@ return btn; } - function appendLinkRow(card, buttons) { - if (!buttons?.length) return; - const row = document.createElement("div"); - row.className = "kab-god-links"; - buttons.forEach((button) => row.appendChild(button)); - card.appendChild(row); - } - function buildPlanetLuminaryCard(planetValue, context) { - const card = metaCard("Planet / Luminary", planetValue); const planetId = context.resolvePlanetId(planetValue); if (planetId) { - appendLinkRow(card, [ - createNavButton(`View ${PLANET_ID_TO_LABEL[planetId] || planetValue} in Planets`, "nav:planet", { planetId }) - ]); - return card; + return metaCard("Planet / Luminary", inlineValue([ + createInlineEventLink(PLANET_ID_TO_LABEL[planetId] || planetValue, "nav:planet", { planetId }) + ])); } const zodiacId = context.resolveZodiacId(planetValue); if (zodiacId) { - appendLinkRow(card, [ - createNavButton(`View ${zodiacId.charAt(0).toUpperCase() + zodiacId.slice(1)} in Zodiac`, "nav:zodiac", { signId: zodiacId }) - ]); + return metaCard("Planet / Luminary", inlineValue([ + createInlineEventLink(zodiacId.charAt(0).toUpperCase() + zodiacId.slice(1), "nav:zodiac", { signId: zodiacId }) + ])); } - return card; + + return metaCard("Planet / Luminary", planetValue); } function extractMinorRank(attribution) { @@ -131,61 +167,70 @@ } function buildTarotAttributionCard(attribution) { - const card = metaCard("Tarot Attribution", attribution); const minorCards = buildMinorTarotNames(attribution); if (minorCards.length) { - appendLinkRow(card, minorCards.map((cardName) => - createNavButton(cardName, "nav:tarot-trump", { cardName }) - )); + const parts = []; + minorCards.forEach((cardName, index) => { + if (index > 0) { + parts.push(", "); + } + parts.push(createInlineEventLink(cardName, "nav:tarot-trump", { cardName })); + }); + return metaCard("Tarot Attribution", inlineValue(parts)); } - return card; + + return metaCard("Tarot Attribution", attribution); } function buildAstrologyCard(astrology, context) { - const astroText = astrology ? `${astrology.name} (${astrology.type})` : "—"; - const card = metaCard("Astrology", astroText); if (astrology?.type === "planet") { const planetId = context.resolvePlanetId(astrology.name); if (planetId) { - appendLinkRow(card, [ - createNavButton(`View ${PLANET_ID_TO_LABEL[planetId] || astrology.name} in Planets`, "nav:planet", { planetId }) - ]); + return metaCard("Astrology", inlineValue([ + createInlineEventLink(PLANET_ID_TO_LABEL[planetId] || astrology.name, "nav:planet", { planetId }), + " (planet)" + ])); } } else if (astrology?.type === "zodiac") { const signId = context.resolveZodiacId(astrology.name); if (signId) { - appendLinkRow(card, [ - createNavButton(`View ${signId.charAt(0).toUpperCase() + signId.slice(1)} in Zodiac`, "nav:zodiac", { signId }) - ]); + return metaCard("Astrology", inlineValue([ + createInlineEventLink(signId.charAt(0).toUpperCase() + signId.slice(1), "nav:zodiac", { signId }), + " (zodiac)" + ])); } } - return card; + + return metaCard("Astrology", astrology ? `${astrology.name} (${astrology.type})` : "—"); } function buildConnectsCard(path, fromName, toName) { - const card = metaCard("Connects", `${fromName} → ${toName}`); - appendLinkRow(card, [ - createNavButton(`View ${fromName}`, "nav:kabbalah-path", { pathNo: Number(path.connects.from) }), - createNavButton(`View ${toName}`, "nav:kabbalah-path", { pathNo: Number(path.connects.to) }) - ]); - return card; + return metaCard("Connects", inlineValue([ + createInlineEventLink(fromName, "nav:kabbalah-path", { pathNo: Number(path.connects.from) }), + " → ", + createInlineEventLink(toName, "nav:kabbalah-path", { pathNo: Number(path.connects.to) }) + ])); } function buildHebrewLetterCard(letter, context) { - const label = `${letter.char || ""} ${letter.transliteration || ""} — "${letter.meaning || ""}" (${letter.letterType || ""})`; - const card = metaCard("Hebrew Letter", label); const hebrewLetterId = context.resolveHebrewLetterId(letter.transliteration || letter.char || ""); + const letterLabel = `${letter.char || ""} ${letter.transliteration || ""}`.replace(/\s+/g, " ").trim() || "Letter"; + const suffix = [ + letter.meaning ? ` — "${letter.meaning}"` : "", + letter.letterType ? ` (${letter.letterType})` : "" + ].join(""); if (hebrewLetterId) { - appendLinkRow(card, [ - createNavButton(`View ${letter.transliteration || letter.char || "Letter"} in Alphabet`, "nav:alphabet", { + return metaCard("Hebrew Letter", inlineValue([ + createInlineEventLink(letterLabel, "nav:alphabet", { alphabet: "hebrew", hebrewLetterId - }) - ]); + }), + suffix + ])); } - return card; + return metaCard("Hebrew Letter", `${letterLabel}${suffix}`); } function buildFourWorldsCard(tree, activeHebrewToken, context) { @@ -228,11 +273,11 @@ soulLine.textContent = `${layer.soulLayer} — ${layer.soulTitle}: ${layer.soulDescription}`; row.appendChild(soulLine); - const buttonRow = []; + const parts = []; const hebrewLetterId = context.resolveHebrewLetterId(layer.hebrewToken); if (hebrewLetterId) { - buttonRow.push( - createNavButton(`View ${layer.letterChar} in Alphabet`, "nav:alphabet", { + parts.push( + createInlineEventLink(layer.letterChar || layer.hebrewToken, "nav:alphabet", { alphabet: "hebrew", hebrewLetterId }) @@ -241,12 +286,17 @@ const linkedPath = context.findPathByHebrewToken(tree, layer.hebrewToken); if (linkedPath?.pathNumber != null) { - buttonRow.push( - createNavButton(`View Path ${linkedPath.pathNumber}`, "nav:kabbalah-path", { pathNo: Number(linkedPath.pathNumber) }) + if (parts.length) { + parts.push(" · "); + } + parts.push( + createInlineEventLink(`Path ${linkedPath.pathNumber}`, "nav:kabbalah-path", { pathNo: Number(linkedPath.pathNumber) }) ); } - appendLinkRow(row, buttonRow); + if (parts.length) { + row.appendChild(inlineValue(parts)); + } if (isActive) { row.style.borderColor = "#818cf8"; @@ -293,23 +343,18 @@ card.appendChild(meta); } - const row = document.createElement("div"); - row.className = "kab-god-links"; - - names.forEach((name) => { - const btn = document.createElement("button"); - btn.type = "button"; - btn.className = "kab-god-link"; - btn.textContent = name; - btn.addEventListener("click", () => { - document.dispatchEvent(new CustomEvent("nav:gods", { - detail: { godName: name, pathNo: Number(pathNo) } - })); - }); - row.appendChild(btn); + const parts = []; + names.forEach((name, index) => { + if (index > 0) { + parts.push(", "); + } + parts.push(createInlineEventLink(name, "nav:gods", { + godName: name, + pathNo: Number(pathNo) + })); }); - card.appendChild(row); + card.appendChild(inlineValue(parts)); return card; } @@ -450,16 +495,12 @@ tarotLabel.textContent = "Tarot"; tarotMetaCard.appendChild(tarotLabel); if (path.tarot?.card && path.tarot.trumpNumber != null) { - const tarotBtn = document.createElement("button"); - tarotBtn.type = "button"; - tarotBtn.className = "kab-tarot-link"; - tarotBtn.textContent = `${path.tarot.card} · Trump ${path.tarot.trumpNumber}`; + const tarotBtn = createInlineEventLink( + `${path.tarot.card} · Trump ${path.tarot.trumpNumber}`, + "kab:view-trump", + { trumpNumber: path.tarot.trumpNumber } + ); tarotBtn.title = "Open in Tarot section"; - tarotBtn.addEventListener("click", () => { - document.dispatchEvent(new CustomEvent("kab:view-trump", { - detail: { trumpNumber: path.tarot.trumpNumber } - })); - }); tarotMetaCard.appendChild(tarotBtn); } else { const tarotP = document.createElement("p"); diff --git a/app/ui-planets.js b/app/ui-planets.js index c3d0bbb..783353c 100644 --- a/app/ui-planets.js +++ b/app/ui-planets.js @@ -238,6 +238,41 @@ return getTarotCardDisplayName(cardName) || cardName; } + function appendInlineParts(target, parts) { + (Array.isArray(parts) ? parts : []).forEach((part) => { + if (part instanceof Node) { + target.appendChild(part); + return; + } + + const text = String(part ?? ""); + if (text) { + target.appendChild(document.createTextNode(text)); + } + }); + } + + function createInlineButton(label, onActivate) { + const button = document.createElement("button"); + button.type = "button"; + button.className = "detail-inline-link"; + button.textContent = String(label || "—"); + button.addEventListener("click", () => { + onActivate?.(); + }); + return button; + } + + function appendInlineLine(containerEl, prefix, parts) { + const line = document.createElement("p"); + line.className = "planet-text detail-inline-value"; + if (prefix) { + line.appendChild(document.createTextNode(prefix)); + } + appendInlineParts(line, parts); + containerEl.appendChild(line); + } + function renderCorrespondence(entry, containerEl) { if (!containerEl) return; containerEl.innerHTML = ""; @@ -249,6 +284,7 @@ fallback.className = "planet-text"; fallback.textContent = "No tarot/day correspondence in current local dataset."; containerEl.appendChild(fallback); + return; } const symbol = correspondence?.symbol || ""; @@ -265,85 +301,61 @@ containerEl.appendChild(line); } - // Tarot card link if (arcana) { - const btn = document.createElement("button"); - btn.type = "button"; - btn.className = "kab-tarot-link"; - btn.style.marginTop = "8px"; - btn.textContent = trumpNo != null ? `${arcanaLabel} \u00b7 Trump ${trumpNo}` : arcanaLabel; + const btn = createInlineButton( + trumpNo != null ? `${arcanaLabel} · Trump ${trumpNo}` : arcanaLabel, + () => { + document.dispatchEvent(new CustomEvent("nav:tarot-trump", { + detail: { trumpNumber: trumpNo ?? null, cardName: arcana } + })); + } + ); btn.title = "Open in Tarot section"; - btn.addEventListener("click", () => { - document.dispatchEvent(new CustomEvent("nav:tarot-trump", { - detail: { trumpNumber: trumpNo ?? null, cardName: arcana } - })); - }); - containerEl.appendChild(btn); + appendInlineLine(containerEl, "Tarot ", [btn]); } const planetId = toPlanetId(correspondence?.id || entry?.id || entry?.name) || normalizePlanetToken(correspondence?.id || entry?.id || entry?.name); const kabbalahTargets = state.kabbalahTargetsByPlanetId[planetId] || []; if (kabbalahTargets.length) { - const row = document.createElement("div"); - row.className = "kab-god-links"; - row.style.marginTop = "8px"; - - kabbalahTargets.forEach((target) => { - const btn = document.createElement("button"); - btn.type = "button"; - btn.className = "kab-god-link"; - btn.textContent = `View ${target.label} ↗`; - btn.addEventListener("click", () => { + const parts = []; + kabbalahTargets.forEach((target, index) => { + if (index > 0) { + parts.push(", "); + } + parts.push(createInlineButton(target.label, () => { document.dispatchEvent(new CustomEvent("nav:kabbalah-path", { detail: { pathNo: Number(target.number) } })); - }); - row.appendChild(btn); + })); }); - - containerEl.appendChild(row); + appendInlineLine(containerEl, "Kabbalah ", parts); } const monthRefs = state.monthRefsByPlanetId.get(planetId) || []; if (monthRefs.length) { - const meta = document.createElement("div"); - meta.className = "kab-god-meta"; - meta.textContent = "Calendar month correspondences"; - containerEl.appendChild(meta); - - const row = document.createElement("div"); - row.className = "kab-god-links"; - monthRefs.forEach((month) => { - const btn = document.createElement("button"); - btn.type = "button"; - btn.className = "kab-god-link"; - btn.textContent = `${month.label || month.name} ↗`; - btn.addEventListener("click", () => { + const parts = []; + monthRefs.forEach((month, index) => { + if (index > 0) { + parts.push(", "); + } + parts.push(createInlineButton(month.label || month.name, () => { document.dispatchEvent(new CustomEvent("nav:calendar-month", { detail: { monthId: month.id } })); - }); - row.appendChild(btn); + })); }); - containerEl.appendChild(row); + appendInlineLine(containerEl, "Calendar months ", parts); } const cubePlacements = state.cubePlacementsByPlanetId.get(planetId) || []; if (cubePlacements.length) { - const meta = document.createElement("div"); - meta.className = "kab-god-meta"; - meta.textContent = "Cube placements"; - containerEl.appendChild(meta); - - const row = document.createElement("div"); - row.className = "kab-god-links"; - cubePlacements.forEach((placement) => { - const btn = document.createElement("button"); - btn.type = "button"; - btn.className = "kab-god-link"; - btn.textContent = `${placement.label} ↗`; - btn.addEventListener("click", () => { + const parts = []; + cubePlacements.forEach((placement, index) => { + if (index > 0) { + parts.push(", "); + } + parts.push(createInlineButton(placement.label, () => { document.dispatchEvent(new CustomEvent("nav:cube", { detail: { planetId, @@ -351,10 +363,9 @@ edgeId: placement.edgeId } })); - }); - row.appendChild(btn); + })); }); - containerEl.appendChild(row); + appendInlineLine(containerEl, "Cube placements ", parts); } } diff --git a/app/ui-zodiac.js b/app/ui-zodiac.js index 0dfc1b7..1193652 100644 --- a/app/ui-zodiac.js +++ b/app/ui-zodiac.js @@ -164,22 +164,14 @@ sections.push(``); if (cubePlacement) { sections.push(``); } @@ -193,21 +185,13 @@ ${hl.char || ""}