diff --git a/app/ui-tarot-lightbox.js b/app/ui-tarot-lightbox.js index 16e14f1..fa8e35b 100644 --- a/app/ui-tarot-lightbox.js +++ b/app/ui-tarot-lightbox.js @@ -8,6 +8,8 @@ let settingsPanelEl = null; let helpButtonEl = null; let helpPanelEl = null; + let helpTitleEl = null; + let helpListEl = null; let compareButtonEl = null; let deckCompareButtonEl = null; let mobileInfoButtonEl = null; @@ -115,6 +117,50 @@ return Number(window.innerWidth) <= 900; } + function getLightboxHelpTitle() { + return isCompactLightboxLayout() ? "Lightbox Gestures" : "Lightbox Shortcuts"; + } + + function getLightboxHelpLines() { + if (isCompactLightboxLayout()) { + return [ + "Pinch the card: zoom in or out", + "Drag while zoomed: pan around the card", + "Tap the side arrows: move between cards, or move the overlay card in compare mode", + "Tap Overlay: choose a second card to compare", + "Tap Compare: show the same card from other registered decks", + "Tap outside the card or use Close Lightbox to exit" + ]; + } + + return [ + "Click card: toggle zoom at the clicked point", + "Left / Right: move cards, or move overlay card in compare mode", + "Overlay: pick a second card to compare", + "Compare: show the same card from other registered decks", + "Space: swap base and overlay cards", + "R: rotate base card, or rotate overlay card in compare mode", + "+ / -: zoom in or out in steps", + "W A S D: pan while zoomed", + "Escape or backdrop click: close" + ]; + } + + function syncHelpContent() { + if (!helpTitleEl || !helpListEl) { + return; + } + + helpTitleEl.textContent = getLightboxHelpTitle(); + helpListEl.replaceChildren(); + + getLightboxHelpLines().forEach((line) => { + const lineEl = document.createElement("div"); + lineEl.textContent = line; + helpListEl.appendChild(lineEl); + }); + } + function hasSequenceNavigation() { return Array.isArray(lightboxState.sequenceIds) && lightboxState.sequenceIds.length > 1 @@ -2065,6 +2111,8 @@ return; } + syncHelpContent(); + const canShow = lightboxState.isOpen && !zoomed; helpButtonEl.style.display = canShow ? "inline-flex" : "none"; helpPanelEl.style.display = canShow && lightboxState.helpOpen ? "flex" : "none"; @@ -2688,32 +2736,18 @@ helpPanelEl.style.pointerEvents = "auto"; helpPanelEl.style.zIndex = "2"; - const helpTitleEl = document.createElement("div"); + helpTitleEl = document.createElement("div"); helpTitleEl.textContent = "Lightbox Shortcuts"; helpTitleEl.style.font = "700 13px/1.3 sans-serif"; - const helpListEl = document.createElement("div"); + helpListEl = document.createElement("div"); helpListEl.style.display = "flex"; helpListEl.style.flexDirection = "column"; helpListEl.style.gap = "6px"; helpListEl.style.font = "500 12px/1.4 sans-serif"; helpListEl.style.color = "rgba(226, 232, 240, 0.92)"; - [ - "Click card: toggle zoom at the clicked point", - "Left / Right: move cards, or move overlay card in compare mode", - "Overlay: pick a second card to compare", - "Compare: show the same card from other registered decks", - "Space: swap base and overlay cards", - "R: rotate base card, or rotate overlay card in compare mode", - "+ / -: zoom in or out in steps", - "W A S D: pan while zoomed", - "Escape or backdrop click: close" - ].forEach((line) => { - const lineEl = document.createElement("div"); - lineEl.textContent = line; - helpListEl.appendChild(lineEl); - }); + syncHelpContent(); helpPanelEl.append(helpTitleEl, helpListEl); @@ -2852,6 +2886,22 @@ exportButtonEl.style.cursor = "pointer"; exportButtonEl.style.backdropFilter = "blur(12px)"; + const closeLightboxButtonEl = document.createElement("button"); + closeLightboxButtonEl.type = "button"; + closeLightboxButtonEl.textContent = "Close Lightbox"; + closeLightboxButtonEl.style.display = "inline-flex"; + closeLightboxButtonEl.style.alignItems = "center"; + closeLightboxButtonEl.style.justifyContent = "center"; + closeLightboxButtonEl.style.width = "100%"; + closeLightboxButtonEl.style.border = "1px solid rgba(248, 250, 252, 0.18)"; + closeLightboxButtonEl.style.background = "rgba(127, 29, 29, 0.72)"; + closeLightboxButtonEl.style.color = "#f8fafc"; + closeLightboxButtonEl.style.borderRadius = "999px"; + closeLightboxButtonEl.style.padding = "10px 14px"; + closeLightboxButtonEl.style.font = "600 13px/1.1 sans-serif"; + closeLightboxButtonEl.style.cursor = "pointer"; + closeLightboxButtonEl.style.backdropFilter = "blur(12px)"; + deckComparePanelEl = document.createElement("div"); deckComparePanelEl.style.position = "fixed"; deckComparePanelEl.style.top = "24px"; @@ -2963,7 +3013,8 @@ exportButtonEl, helpButtonEl, zoomControlEl, - opacityControlEl + opacityControlEl, + closeLightboxButtonEl ); toolbarEl.append(settingsButtonEl); @@ -3535,6 +3586,11 @@ event.stopPropagation(); await exportCurrentLightboxView(); }); + closeLightboxButtonEl.addEventListener("click", (event) => { + event.preventDefault(); + event.stopPropagation(); + close(); + }); opacitySliderEl.addEventListener("change", restoreLightboxFocus); opacitySliderEl.addEventListener("pointerup", restoreLightboxFocus); mobilePrevButtonEl.addEventListener("click", (event) => { diff --git a/index.html b/index.html index 429e5cc..8afe813 100644 --- a/index.html +++ b/index.html @@ -1331,7 +1331,7 @@ - +