From 5b02bd06e3515dab955312c7dd3eee37a3b8de4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Galley?= <contact@kirkas.ch>
Date: Fri, 13 Sep 2024 13:26:01 -0400
Subject: [PATCH] we like mobile too

---
 apps/web/src/components/base-org/Card/context.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/base-org/Card/context.tsx b/apps/web/src/components/base-org/Card/context.tsx
index 483c74d695..a7d72d6fd6 100644
--- a/apps/web/src/components/base-org/Card/context.tsx
+++ b/apps/web/src/components/base-org/Card/context.tsx
@@ -49,7 +49,10 @@ 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();
@@ -57,8 +60,8 @@ export default function CardsProvider({ children }: CardsProviderProps) {
           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]);