updated: app/ui-tarot-card.js

This commit is contained in:
2026-04-06 20:22:31 -07:00
parent b7747794da
commit e0c0862f7a
3 changed files with 53 additions and 10 deletions

View File

@@ -48,9 +48,9 @@
pisces: "02-19"
};
const MASTER_GRID_SIZE = 14;
const FRAME_GRID_ZOOM_STEPS = [1, 1.2, 1.4, 1.7, 2, 2.4, 3, 3.6, 4.2];
const FRAME_GRID_ZOOM_STEPS = [1, 1.2, 1.4, 1.7, 2, 2.4, 3, 3.6, 4.2, 5.2, 6.4, 8, 10, 12, 14];
const FRAME_GRID_MIN_SCALE = 0.8;
const FRAME_GRID_MAX_SCALE = 5.2;
const FRAME_GRID_MAX_SCALE = 14;
const FRAME_CUSTOM_LAYOUTS_STORAGE_KEY = "tarot-frame-custom-layouts-v1";
const FRAME_ACTIVE_LAYOUT_STORAGE_KEY = "tarot-frame-active-layout-v1";
const FRAME_CARD_PICKER_QUERY_STORAGE_KEY = "tarot-frame-card-picker-query-v1";
@@ -201,6 +201,7 @@
},
suppressClick: false,
showInfo: true,
layoutGuideVisible: false,
settingsOpen: false,
layoutMenuOpen: false,
gridFocusMode: false,
@@ -736,6 +737,15 @@
}
}
function applyLayoutGuideUi() {
const { tarotFrameOverviewEl } = getElements();
if (!(tarotFrameOverviewEl instanceof HTMLElement)) {
return;
}
tarotFrameOverviewEl.hidden = !state.layoutGuideVisible;
}
function applyGridFocusModeUi() {
const {
tarotFrameSectionEl,
@@ -2335,6 +2345,20 @@
saveButtonEl.disabled = Boolean(state.exportInProgress);
tarotFrameLayoutPanelEl.appendChild(saveButtonEl);
const guideToggleEl = document.createElement("label");
guideToggleEl.className = "tarot-frame-toggle";
guideToggleEl.setAttribute("for", "tarot-frame-layout-guide-visible");
const guideToggleInputEl = document.createElement("input");
guideToggleInputEl.id = "tarot-frame-layout-guide-visible";
guideToggleInputEl.type = "checkbox";
guideToggleInputEl.checked = Boolean(state.layoutGuideVisible);
guideToggleInputEl.disabled = Boolean(state.exportInProgress);
guideToggleInputEl.dataset.layoutGuideVisible = "true";
const guideToggleLabelEl = document.createElement("span");
guideToggleLabelEl.textContent = "Show layout guide + notes";
guideToggleEl.append(guideToggleInputEl, guideToggleLabelEl);
tarotFrameLayoutPanelEl.appendChild(guideToggleEl);
const builtInHeadingEl = document.createElement("div");
builtInHeadingEl.className = "tarot-frame-layout-section-title";
builtInHeadingEl.textContent = "Built-in Layouts";
@@ -2874,6 +2898,7 @@
tarotFrameBoardEl.replaceChildren();
tarotFrameOverviewEl.appendChild(createOverview(layoutPreset, cards));
applyLayoutGuideUi();
const panelEl = document.createElement("section");
panelEl.className = "tarot-frame-panel tarot-frame-panel--master";
@@ -3965,6 +3990,17 @@
}
if (tarotFrameLayoutPanelEl) {
tarotFrameLayoutPanelEl.addEventListener("change", (event) => {
event.stopPropagation();
const target = event.target;
if (!(target instanceof HTMLInputElement) || target.dataset.layoutGuideVisible !== "true") {
return;
}
state.layoutGuideVisible = Boolean(target.checked);
applyLayoutGuideUi();
});
tarotFrameLayoutPanelEl.addEventListener("click", (event) => {
event.stopPropagation();
const target = event.target;