building new tarot frame component for custom layout

This commit is contained in:
2026-04-01 12:31:56 -07:00
parent d47e63df6d
commit a7d956cee8
11 changed files with 2359 additions and 79 deletions

View File

@@ -27,7 +27,8 @@
planet: true,
zodiac: true,
trump: true,
path: true
path: true,
date: false
},
houseBottomCardsVisible: true,
houseBottomInfoModes: {
@@ -39,6 +40,7 @@
},
houseExportInProgress: false,
houseExportFormat: "png",
houseSettingsOpen: false,
magickDataset: null,
referenceData: null,
monthRefsByCardId: new Map(),
@@ -281,12 +283,15 @@
tarotHouseOfCardsEl: document.getElementById("tarot-house-of-cards"),
tarotBrowseViewEl: document.getElementById("tarot-browse-view"),
tarotHouseViewEl: document.getElementById("tarot-house-view"),
tarotHouseSettingsToggleEl: document.getElementById("tarot-house-settings-toggle"),
tarotHouseSettingsPanelEl: document.getElementById("tarot-house-settings-panel"),
tarotHouseTopCardsVisibleEl: document.getElementById("tarot-house-top-cards-visible"),
tarotHouseTopInfoHebrewEl: document.getElementById("tarot-house-top-info-hebrew"),
tarotHouseTopInfoPlanetEl: document.getElementById("tarot-house-top-info-planet"),
tarotHouseTopInfoZodiacEl: document.getElementById("tarot-house-top-info-zodiac"),
tarotHouseTopInfoTrumpEl: document.getElementById("tarot-house-top-info-trump"),
tarotHouseTopInfoPathEl: document.getElementById("tarot-house-top-info-path"),
tarotHouseTopInfoDateEl: document.getElementById("tarot-house-top-info-date"),
tarotHouseBottomCardsVisibleEl: document.getElementById("tarot-house-bottom-cards-visible"),
tarotHouseBottomInfoZodiacEl: document.getElementById("tarot-house-bottom-info-zodiac"),
tarotHouseBottomInfoDecanEl: document.getElementById("tarot-house-bottom-info-decan"),
@@ -544,6 +549,15 @@
elements.tarotHouseViewEl.classList.toggle("is-house-focus", Boolean(state.houseFocusMode));
}
if (elements?.tarotHouseSettingsToggleEl) {
elements.tarotHouseSettingsToggleEl.setAttribute("aria-expanded", state.houseSettingsOpen ? "true" : "false");
elements.tarotHouseSettingsToggleEl.textContent = state.houseSettingsOpen ? "Hide Settings" : "Settings";
}
if (elements?.tarotHouseSettingsPanelEl) {
elements.tarotHouseSettingsPanelEl.hidden = !state.houseSettingsOpen;
}
if (elements?.tarotHouseTopCardsVisibleEl) {
elements.tarotHouseTopCardsVisibleEl.checked = Boolean(state.houseTopCardsVisible);
elements.tarotHouseTopCardsVisibleEl.disabled = Boolean(state.houseExportInProgress);
@@ -554,6 +568,7 @@
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoZodiacEl, state.houseTopInfoModes.zodiac);
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoTrumpEl, state.houseTopInfoModes.trump);
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoPathEl, state.houseTopInfoModes.path);
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoDateEl, state.houseTopInfoModes.date);
if (elements?.tarotHouseBottomCardsVisibleEl) {
elements.tarotHouseBottomCardsVisibleEl.checked = Boolean(state.houseBottomCardsVisible);
@@ -839,6 +854,7 @@
getSelectedCardId: () => state.selectedCardId,
getHouseTopCardsVisible: () => state.houseTopCardsVisible,
getHouseTopInfoModes: () => ({ ...state.houseTopInfoModes }),
getMagickDataset: () => state.magickDataset,
getHouseBottomCardsVisible: () => state.houseBottomCardsVisible,
getHouseBottomInfoModes: () => ({ ...state.houseBottomInfoModes })
});
@@ -929,12 +945,47 @@
});
}
if (elements.tarotHouseSettingsToggleEl) {
elements.tarotHouseSettingsToggleEl.addEventListener("click", (event) => {
event.stopPropagation();
state.houseSettingsOpen = !state.houseSettingsOpen;
syncHouseControls(elements);
});
}
if (elements.tarotHouseSettingsPanelEl) {
elements.tarotHouseSettingsPanelEl.addEventListener("click", (event) => {
event.stopPropagation();
});
}
document.addEventListener("click", (event) => {
if (!state.houseSettingsOpen) {
return;
}
const target = event.target;
if (!(target instanceof Node)) {
return;
}
const settingsPanelEl = elements.tarotHouseSettingsPanelEl;
const settingsToggleEl = elements.tarotHouseSettingsToggleEl;
if (settingsPanelEl?.contains(target) || settingsToggleEl?.contains(target)) {
return;
}
state.houseSettingsOpen = false;
syncHouseControls(elements);
});
[
[elements.tarotHouseTopInfoHebrewEl, "hebrew"],
[elements.tarotHouseTopInfoPlanetEl, "planet"],
[elements.tarotHouseTopInfoZodiacEl, "zodiac"],
[elements.tarotHouseTopInfoTrumpEl, "trump"],
[elements.tarotHouseTopInfoPathEl, "path"]
[elements.tarotHouseTopInfoPathEl, "path"],
[elements.tarotHouseTopInfoDateEl, "date"]
].forEach(([checkbox, key]) => {
if (!checkbox) {
return;