Skip to content

Commit 6fd8e21

Browse files
committed
feat: improve mobile touch behavior on Snellen chart
- Capture touch coordinates and apply radial gradient mask at touch point - Single touch now shows unblurred area exactly where user touched (matching mouse behavior) - Unblurs for 6 seconds then re-blurs automatically
1 parent 904a761 commit 6fd8e21

1 file changed

Lines changed: 13 additions & 3 deletions

File tree

src/components/error-pages/load-failed.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,20 +95,30 @@ export default function LoadFailedErrorPage() {
9595
}
9696
}, []);
9797

98-
// Touch handler for mobile (trigger brief unblur)
99-
const handleTouchStart = useCallback(() => {
98+
// Touch handler for mobile (trigger unblur with touch position)
99+
const handleTouchStart = useCallback((e: TouchEvent) => {
100100
if (touchTimeoutRef.current) {
101101
clearTimeout(touchTimeoutRef.current);
102102
}
103103

104+
// Get touch coordinates relative to container
105+
const touch = e.touches[0];
106+
const rect = containerRef.current?.getBoundingClientRect();
107+
if (rect && touch) {
108+
setMousePos({
109+
x: touch.clientX - rect.left,
110+
y: touch.clientY - rect.top,
111+
});
112+
}
113+
104114
setIsUnblurred(true);
105115
touchTimeoutRef.current = setTimeout(() => {
106116
setIsUnblurred(false);
107117
touchTimeoutRef.current = null;
108118
}, TOUCH_UNBLUR_DURATION);
109119
}, []);
110120

111-
// Clean up touch on touchend to allow state reset
121+
// Clean up touch on touchend
112122
const handleTouchEnd = useCallback(() => {
113123
// Timeout continues to manage the blur
114124
}, []);

0 commit comments

Comments
 (0)