goyimnose/TaroTime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix and phone view optimizations

Browse Source
This commit is contained in:
Nose
2026-03-12 02:35:02 -07:00
parent d3d96912c1
commit c6b21095d9
5 changed files with 561 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/ui-tarot-lightbox.js
View File

@@ -369,8 +369,8 @@
if (lightboxState.deckCompareMode) {
compareGridSlots.forEach((slot) => {
if (slot?.imageEl) {
slot.imageEl.style.transformOrigin = nextOrigin;
if (slot?.zoomLayerEl) {
slot.zoomLayerEl.style.transformOrigin = nextOrigin;
}
});
return;
@@ -392,11 +392,12 @@
if (lightboxState.deckCompareMode) {
compareGridSlots.forEach((slot) => {
if (!slot?.imageEl) {
if (!slot?.imageEl || !slot?.zoomLayerEl) {
return;
}
slot.imageEl.style.transform = `scale(${activeZoomScale}) ${buildRotationTransform(lightboxState.primaryRotated)}`;
slot.zoomLayerEl.style.transform = `scale(${activeZoomScale})`;
slot.imageEl.style.transform = buildRotationTransform(lightboxState.primaryRotated);
});
applyTransformOrigins();
@@ -734,6 +735,9 @@
slot.slotEl.style.display = "none";
slot.imageEl.removeAttribute("src");
slot.imageEl.alt = "Tarot compare image";
if (slot.zoomLayerEl) {
slot.zoomLayerEl.style.display = "none";
}
slot.imageEl.style.display = "none";
slot.fallbackEl.style.display = "none";
});
@@ -749,6 +753,9 @@
if (!cardRequest) {
slot.slotEl.style.display = "none";
slot.imageEl.removeAttribute("src");
if (slot.zoomLayerEl) {
slot.zoomLayerEl.style.display = "none";
}
slot.imageEl.style.display = "none";
slot.fallbackEl.style.display = "none";
return;
@@ -761,11 +768,17 @@
if (cardRequest.src) {
slot.imageEl.src = cardRequest.src;
slot.imageEl.alt = cardRequest.altText || cardRequest.label || "Tarot compare image";
if (slot.zoomLayerEl) {
slot.zoomLayerEl.style.display = "flex";
}
slot.imageEl.style.display = "block";
slot.fallbackEl.style.display = "none";
} else {
slot.imageEl.removeAttribute("src");
slot.imageEl.alt = "";
if (slot.zoomLayerEl) {
slot.zoomLayerEl.style.display = "none";
}
slot.imageEl.style.display = "none";
slot.fallbackEl.textContent = cardRequest.missingReason || "Card image unavailable for this deck.";
slot.fallbackEl.style.display = "block";
@@ -983,12 +996,13 @@
applyZoomTransform();
}
function updateZoomOrigin(clientX, clientY, targetImage = imageEl) {
if (!zoomed || !targetImage) {
function updateZoomOrigin(clientX, clientY, targetImage = imageEl, targetFrame = null) {
const referenceEl = targetFrame || targetImage;
if (!zoomed || !referenceEl) {
return;
}
const rect = targetImage.getBoundingClientRect();
const rect = referenceEl.getBoundingClientRect();
if (!rect.width || !rect.height) {
return;
}
@@ -1000,12 +1014,13 @@
applyTransformOrigins();
}
function isPointOnCard(clientX, clientY, targetImage = imageEl) {
if (!targetImage) {
function isPointOnCard(clientX, clientY, targetImage = imageEl, targetFrame = null) {
const frameElForHitTest = targetFrame || targetImage;
if (!targetImage || !frameElForHitTest) {
return false;
}
const rect = targetImage.getBoundingClientRect();
const rect = frameElForHitTest.getBoundingClientRect();
const naturalWidth = targetImage.naturalWidth;
const naturalHeight = targetImage.naturalHeight;
@@ -1350,13 +1365,23 @@
mediaEl.style.background = "rgba(2, 6, 23, 0.4)";
mediaEl.style.overflow = "hidden";
const zoomLayerEl = document.createElement("div");
zoomLayerEl.style.position = "absolute";
zoomLayerEl.style.inset = "16px";
zoomLayerEl.style.display = "flex";
zoomLayerEl.style.alignItems = "center";
zoomLayerEl.style.justifyContent = "center";
zoomLayerEl.style.transform = "scale(1)";
zoomLayerEl.style.transformOrigin = "50% 50%";
zoomLayerEl.style.transition = "transform 120ms ease-out";
const compareImageEl = document.createElement("img");
compareImageEl.alt = "Tarot compare image";
compareImageEl.style.width = "100%";
compareImageEl.style.height = "100%";
compareImageEl.style.objectFit = "contain";
compareImageEl.style.cursor = "zoom-in";
compareImageEl.style.transform = "scale(1) rotate(0deg)";
compareImageEl.style.transform = "rotate(0deg)";
compareImageEl.style.transformOrigin = "center center";
compareImageEl.style.transition = "transform 120ms ease-out";
compareImageEl.style.userSelect = "none";
@@ -1369,13 +1394,16 @@
fallbackEl.style.font = "600 13px/1.45 sans-serif";
fallbackEl.style.color = "rgba(226, 232, 240, 0.88)";
mediaEl.append(compareImageEl, fallbackEl);
zoomLayerEl.appendChild(compareImageEl);
mediaEl.append(zoomLayerEl, fallbackEl);
slotEl.append(headerEl, mediaEl);
return {
slotEl,
badgeEl,
cardLabelEl,
mediaEl,
zoomLayerEl,
imageEl: compareImageEl,
fallbackEl
};
@@ -1716,7 +1744,7 @@
compareGridSlots.forEach((slot) => {
slot.imageEl.addEventListener("click", (event) => {
event.stopPropagation();
if (!isPointOnCard(event.clientX, event.clientY, slot.imageEl)) {
if (!isPointOnCard(event.clientX, event.clientY, slot.imageEl, slot.mediaEl)) {
close();
return;
}
@@ -1724,7 +1752,7 @@
if (!zoomed) {
zoomed = true;
applyZoomTransform();
updateZoomOrigin(event.clientX, event.clientY, slot.imageEl);
updateZoomOrigin(event.clientX, event.clientY, slot.imageEl, slot.mediaEl);
applyComparePresentation();
return;
}
@@ -1734,7 +1762,7 @@
});
slot.imageEl.addEventListener("mousemove", (event) => {
updateZoomOrigin(event.clientX, event.clientY, slot.imageEl);
updateZoomOrigin(event.clientX, event.clientY, slot.imageEl, slot.mediaEl);
});
slot.imageEl.addEventListener("mouseleave", () => {