From 803f72eb7162f8018ecfd9cbd65ac3d86b7ba076 Mon Sep 17 00:00:00 2001 From: dax Date: Tue, 4 Aug 2026 10:54:06 +0000 Subject: Previews appear as you scroll: current tile follows pan, tappable destination previews - Current tile follows the viewport while dragging (touch) or scrolling (wheel), throttled ~200ms, snapping to the nearest visible tile on gesture end. setCurrent(id, rect, recenter) so follow never fights the user's pan (no recenter, no zoom change). - Persistent destination previews: the current tile's free exits now render the destination photo (ghost) at each spot, always visible on mobile and desktop, replacing the old all-tile invisible dropzones and the hover-only dropzone ghost. Tapping/clicking a preview walks there. - Desktop hover ghost kept for non-current tiles only (the current tile's previews are already persistent, so no duplicate). - Dropzones/previews are current-tile-only; ghost preview on nav zones of the current tile suppressed. - Removed MAX_ZONE_TILES (unused after current-only previews). Tests: domtest 49/49 (rewritten ghost checks for persistent previews + follow-scroll), touchtest 19/19, exhaust 9/9, splash 6/6, fuzz clean, hoverlive against live data: 0 stray ghosts, 31 previews across 13 tiles. --- public/app.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'public/app.css') diff --git a/public/app.css b/public/app.css index 6d5e992..5640b1c 100644 --- a/public/app.css +++ b/public/app.css @@ -49,7 +49,18 @@ html, body { pointer-events: none; box-shadow: 0 0 0 2px rgba(125, 211, 252, .65); } -.dropzone { position: absolute; } +.dropzone { position: absolute; cursor: pointer; } +.dropzone .preview { + width: 100%; + height: 100%; + opacity: .5; + pointer-events: none; + border-radius: 6px; + box-shadow: 0 0 0 2px rgba(125, 211, 252, .5); + transition: opacity .15s; +} +.dropzone:hover .preview, +.dropzone:active .preview { opacity: .85; } @keyframes lock { 0% { transform: scale(.2); opacity: 0; } -- cgit v1.3.1