goyimnose/TaroTime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test new global styles for inline buttons in details, and add links to tarot cards in planet details

Browse Source
This commit is contained in:
Nose
2026-04-24 01:08:00 -07:00
parent 789bb9cbbd
commit fe323552b2
7 changed files with 564 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/ui-planets.js
+69 -58
View File
@@ -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);
}
}