diff --git a/app/styles.css b/app/styles.css index ee8ef78..cf2d41f 100644 --- a/app/styles.css +++ b/app/styles.css @@ -1255,6 +1255,7 @@ .tarot-frame-panel { --frame-grid-zoom-scale: 1; + --frame-card-overlay-scale: clamp(1, calc(0.92 + ((var(--frame-grid-zoom-scale) - 1) * 0.14)), 2.3); --frame-base-cell-width: clamp(32px, 2.6vw, 46px); --frame-cell-width: calc(var(--frame-base-cell-width) * var(--frame-grid-zoom-scale)); --frame-cell-height: calc(var(--frame-cell-width) * 1.5); @@ -1946,14 +1947,14 @@ .tarot-frame-card-badge { position: absolute; - left: 4px; - right: 4px; - bottom: 4px; - padding: 4px 5px; - border-radius: 8px; + left: calc(4px * var(--frame-card-overlay-scale)); + right: calc(4px * var(--frame-card-overlay-scale)); + bottom: calc(4px * var(--frame-card-overlay-scale)); + padding: calc(4px * var(--frame-card-overlay-scale)) calc(5px * var(--frame-card-overlay-scale)); + border-radius: calc(8px * var(--frame-card-overlay-scale)); background: rgba(2, 6, 23, 0.84); color: #f8fafc; - font-size: clamp(8px, 0.72vw, 10px); + font-size: calc(clamp(8px, 0.72vw, 10px) * var(--frame-card-overlay-scale)); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; diff --git a/app/ui-tarot-frame.js b/app/ui-tarot-frame.js index 37321ce..4fb79b9 100644 --- a/app/ui-tarot-frame.js +++ b/app/ui-tarot-frame.js @@ -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; diff --git a/index.html b/index.html index 3ef99fe..6c00bb6 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - +