added overlay function for tarot cards
This commit is contained in:
@@ -34,71 +34,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
function renderDetail(card, elements) {
|
||||
if (!card || !elements) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cardDisplayName = getDisplayCardName(card);
|
||||
const imageUrl = typeof resolveTarotCardImage === "function"
|
||||
? resolveTarotCardImage(card.name)
|
||||
: null;
|
||||
|
||||
if (elements.tarotDetailImageEl) {
|
||||
if (imageUrl) {
|
||||
elements.tarotDetailImageEl.src = imageUrl;
|
||||
elements.tarotDetailImageEl.alt = cardDisplayName || card.name;
|
||||
elements.tarotDetailImageEl.style.display = "block";
|
||||
elements.tarotDetailImageEl.style.cursor = "zoom-in";
|
||||
elements.tarotDetailImageEl.title = "Click to enlarge";
|
||||
} else {
|
||||
elements.tarotDetailImageEl.removeAttribute("src");
|
||||
elements.tarotDetailImageEl.alt = "";
|
||||
elements.tarotDetailImageEl.style.display = "none";
|
||||
elements.tarotDetailImageEl.style.cursor = "default";
|
||||
elements.tarotDetailImageEl.removeAttribute("title");
|
||||
}
|
||||
}
|
||||
|
||||
if (elements.tarotDetailNameEl) {
|
||||
elements.tarotDetailNameEl.textContent = cardDisplayName || card.name;
|
||||
}
|
||||
|
||||
if (elements.tarotDetailTypeEl) {
|
||||
elements.tarotDetailTypeEl.textContent = buildTypeLabel(card);
|
||||
}
|
||||
|
||||
if (elements.tarotDetailSummaryEl) {
|
||||
elements.tarotDetailSummaryEl.textContent = card.summary || "--";
|
||||
}
|
||||
|
||||
if (elements.tarotDetailUprightEl) {
|
||||
elements.tarotDetailUprightEl.textContent = card.meanings?.upright || "--";
|
||||
}
|
||||
|
||||
if (elements.tarotDetailReversedEl) {
|
||||
elements.tarotDetailReversedEl.textContent = card.meanings?.reversed || "--";
|
||||
}
|
||||
|
||||
const meaningText = String(card.meaning || card.meanings?.upright || "").trim();
|
||||
if (elements.tarotMetaMeaningCardEl && elements.tarotDetailMeaningEl) {
|
||||
if (meaningText) {
|
||||
elements.tarotMetaMeaningCardEl.hidden = false;
|
||||
elements.tarotDetailMeaningEl.textContent = meaningText;
|
||||
} else {
|
||||
elements.tarotMetaMeaningCardEl.hidden = true;
|
||||
elements.tarotDetailMeaningEl.textContent = "--";
|
||||
}
|
||||
}
|
||||
|
||||
clearChildren(elements.tarotDetailKeywordsEl);
|
||||
(card.keywords || []).forEach((keyword) => {
|
||||
const chip = document.createElement("span");
|
||||
chip.className = "tarot-keyword-chip";
|
||||
chip.textContent = keyword;
|
||||
elements.tarotDetailKeywordsEl?.appendChild(chip);
|
||||
});
|
||||
|
||||
function collectDetailRelations(card) {
|
||||
const allRelations = (card.relations || [])
|
||||
.map((relation, index) => normalizeRelationObject(relation, index))
|
||||
.filter(Boolean);
|
||||
@@ -224,15 +160,119 @@
|
||||
return String(left.label || "").localeCompare(String(right.label || ""));
|
||||
});
|
||||
|
||||
renderStaticRelationGroup(elements.tarotDetailPlanetEl, elements.tarotMetaPlanetCardEl, planetRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailElementEl, elements.tarotMetaElementCardEl, elementRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailTetragrammatonEl, elements.tarotMetaTetragrammatonCardEl, tetragrammatonRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailZodiacEl, elements.tarotMetaZodiacCardEl, zodiacRelationsWithRulership);
|
||||
renderStaticRelationGroup(elements.tarotDetailCourtDateEl, elements.tarotMetaCourtDateCardEl, mergedCourtDateRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailHebrewEl, elements.tarotMetaHebrewCardEl, hebrewRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailCubeEl, elements.tarotMetaCubeCardEl, cubeRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailIChingEl, elements.tarotMetaIChingCardEl, iChingRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailCalendarEl, elements.tarotMetaCalendarCardEl, mergedMonthRelations);
|
||||
return {
|
||||
planetRelations,
|
||||
elementRelations,
|
||||
tetragrammatonRelations,
|
||||
zodiacRelationsWithRulership,
|
||||
mergedCourtDateRelations,
|
||||
hebrewRelations,
|
||||
cubeRelations,
|
||||
iChingRelations,
|
||||
mergedMonthRelations
|
||||
};
|
||||
}
|
||||
|
||||
function buildCompareDetails(card) {
|
||||
if (!card) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const detailRelations = collectDetailRelations(card);
|
||||
const groups = [
|
||||
{ title: "Letter", relations: detailRelations.hebrewRelations },
|
||||
{ title: "Planet / Ruler", relations: detailRelations.planetRelations },
|
||||
{ title: "Sign / Decan", relations: detailRelations.zodiacRelationsWithRulership },
|
||||
{ title: "Element", relations: detailRelations.elementRelations },
|
||||
{ title: "Tetragrammaton", relations: detailRelations.tetragrammatonRelations },
|
||||
{ title: "Dates", relations: detailRelations.mergedCourtDateRelations },
|
||||
{ title: "Calendar", relations: detailRelations.mergedMonthRelations }
|
||||
];
|
||||
|
||||
return groups
|
||||
.map((group) => ({
|
||||
title: group.title,
|
||||
items: [...new Set((group.relations || []).map((relation) => String(relation?.label || "").trim()).filter(Boolean))]
|
||||
}))
|
||||
.filter((group) => group.items.length);
|
||||
}
|
||||
|
||||
function renderDetail(card, elements) {
|
||||
if (!card || !elements) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cardDisplayName = getDisplayCardName(card);
|
||||
const imageUrl = typeof resolveTarotCardImage === "function"
|
||||
? resolveTarotCardImage(card.name)
|
||||
: null;
|
||||
|
||||
if (elements.tarotDetailImageEl) {
|
||||
if (imageUrl) {
|
||||
elements.tarotDetailImageEl.src = imageUrl;
|
||||
elements.tarotDetailImageEl.alt = cardDisplayName || card.name;
|
||||
elements.tarotDetailImageEl.style.display = "block";
|
||||
elements.tarotDetailImageEl.style.cursor = "zoom-in";
|
||||
elements.tarotDetailImageEl.title = "Click to enlarge";
|
||||
} else {
|
||||
elements.tarotDetailImageEl.removeAttribute("src");
|
||||
elements.tarotDetailImageEl.alt = "";
|
||||
elements.tarotDetailImageEl.style.display = "none";
|
||||
elements.tarotDetailImageEl.style.cursor = "default";
|
||||
elements.tarotDetailImageEl.removeAttribute("title");
|
||||
}
|
||||
}
|
||||
|
||||
if (elements.tarotDetailNameEl) {
|
||||
elements.tarotDetailNameEl.textContent = cardDisplayName || card.name;
|
||||
}
|
||||
|
||||
if (elements.tarotDetailTypeEl) {
|
||||
elements.tarotDetailTypeEl.textContent = buildTypeLabel(card);
|
||||
}
|
||||
|
||||
if (elements.tarotDetailSummaryEl) {
|
||||
elements.tarotDetailSummaryEl.textContent = card.summary || "--";
|
||||
}
|
||||
|
||||
if (elements.tarotDetailUprightEl) {
|
||||
elements.tarotDetailUprightEl.textContent = card.meanings?.upright || "--";
|
||||
}
|
||||
|
||||
if (elements.tarotDetailReversedEl) {
|
||||
elements.tarotDetailReversedEl.textContent = card.meanings?.reversed || "--";
|
||||
}
|
||||
|
||||
const meaningText = String(card.meaning || card.meanings?.upright || "").trim();
|
||||
if (elements.tarotMetaMeaningCardEl && elements.tarotDetailMeaningEl) {
|
||||
if (meaningText) {
|
||||
elements.tarotMetaMeaningCardEl.hidden = false;
|
||||
elements.tarotDetailMeaningEl.textContent = meaningText;
|
||||
} else {
|
||||
elements.tarotMetaMeaningCardEl.hidden = true;
|
||||
elements.tarotDetailMeaningEl.textContent = "--";
|
||||
}
|
||||
}
|
||||
|
||||
clearChildren(elements.tarotDetailKeywordsEl);
|
||||
(card.keywords || []).forEach((keyword) => {
|
||||
const chip = document.createElement("span");
|
||||
chip.className = "tarot-keyword-chip";
|
||||
chip.textContent = keyword;
|
||||
elements.tarotDetailKeywordsEl?.appendChild(chip);
|
||||
});
|
||||
|
||||
const detailRelations = collectDetailRelations(card);
|
||||
|
||||
renderStaticRelationGroup(elements.tarotDetailPlanetEl, elements.tarotMetaPlanetCardEl, detailRelations.planetRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailElementEl, elements.tarotMetaElementCardEl, detailRelations.elementRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailTetragrammatonEl, elements.tarotMetaTetragrammatonCardEl, detailRelations.tetragrammatonRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailZodiacEl, elements.tarotMetaZodiacCardEl, detailRelations.zodiacRelationsWithRulership);
|
||||
renderStaticRelationGroup(elements.tarotDetailCourtDateEl, elements.tarotMetaCourtDateCardEl, detailRelations.mergedCourtDateRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailHebrewEl, elements.tarotMetaHebrewCardEl, detailRelations.hebrewRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailCubeEl, elements.tarotMetaCubeCardEl, detailRelations.cubeRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailIChingEl, elements.tarotMetaIChingCardEl, detailRelations.iChingRelations);
|
||||
renderStaticRelationGroup(elements.tarotDetailCalendarEl, elements.tarotMetaCalendarCardEl, detailRelations.mergedMonthRelations);
|
||||
|
||||
const kabPathEl = elements.tarotKabPathEl;
|
||||
if (kabPathEl) {
|
||||
@@ -304,6 +344,7 @@
|
||||
}
|
||||
|
||||
return {
|
||||
buildCompareDetails,
|
||||
renderStaticRelationGroup,
|
||||
renderDetail
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user