we like mobile too

base-org · Sep 13, 2024 · 5b02bd0 · 5b02bd0
1 parent c5d3733
commit 5b02bd0
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/apps/web/src/components/base-org/Card/context.tsx b/apps/web/src/components/base-org/Card/context.tsx
@@ -49,16 +49,19 @@ export default function CardsProvider({ children }: CardsProviderProps) {
   const [cards, setCards] = useState<Record<string, CardRef>>({});
 
   useEffect(() => {
-    const handleMouseMove = (ev: MouseEvent) => {
+    const handleInteraction = (ev: MouseEvent | TouchEvent) => {
+      const clientX = 'touches' in ev ? ev.touches[0].clientX : ev.clientX;
+      const clientY = 'touches' in ev ? ev.touches[0].clientY : ev.clientY;
+
       Object.values(cards).forEach(({ blobRef, fakeBlobRef }) => {
         if (blobRef.current && fakeBlobRef.current) {
           const rec = fakeBlobRef.current.getBoundingClientRect();
 
           blobRef.current.animate(
             [
               {
-                transform: `translate(${ev.clientX - rec.left - rec.width / 2}px,${
-                  ev.clientY - rec.top - rec.height / 2
+                transform: `translate(${clientX - rec.left - rec.width / 2}px,${
+                  clientY - rec.top - rec.height / 2
                 }px)`,
               },
             ],
@@ -72,10 +75,12 @@ export default function CardsProvider({ children }: CardsProviderProps) {
       });
     };
 
-    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mousemove', handleInteraction);
+    window.addEventListener('touchmove', handleInteraction);
 
     return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mousemove', handleInteraction);
+      window.removeEventListener('touchmove', handleInteraction);
     };
   }, [cards]);