Add flip callbacks and go back and forth the cards

yasuflatland-lf · Jul 1, 2024 · f20cb2b · f20cb2b
1 parent 72879cc
commit f20cb2b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 47 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -27,9 +27,24 @@ html, body {
     font-size: 1.5em;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease;
+    transition: transform 0.6s ease;
+    transform-style: preserve-3d;
+}
+
+.swipeable-card.flipped {
+    transform: rotateY(180deg);
 }
 
 .swipeable-card:active {
     transform: scale(0.95);
 }
+
+.swipeable-card-content {
+    backface-visibility: hidden;
+}
+
+.swipeable-card-back {
+    position: absolute;
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+}
diff --git a/frontend/src/components/SwipeableCard.tsx b/frontend/src/components/SwipeableCard.tsx
@@ -7,48 +7,30 @@ interface SwipeableCardProps {
 }
 
 function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
-    const [flipped, setFlipped] = useState(false);
+    const [isFlipped, setIsFlipped] = useState(false);
 
     const handlers = useSwipeable({
-        onSwipedLeft: () => {
-            setFlipped(true);
-            setTimeout(() => {
-                onSwiped('left');
-                setFlipped(false);
-            }, 600);
-        },
-        onSwipedRight: () => {
-            setFlipped(true);
-            setTimeout(() => {
-                onSwiped('right');
-                setFlipped(false);
-            }, 600);
-        },
-        onSwipedUp: () => {
-            setFlipped(true);
-            setTimeout(() => {
-                onSwiped('up');
-                setFlipped(false);
-            }, 600);
-        },
-        onSwipedDown: () => {
-            setFlipped(true);
-            setTimeout(() => {
-                onSwiped('down');
-                setFlipped(false);
-            }, 600);
-        },
+        onSwipedLeft: () => handleSwipe('left'),
+        onSwipedRight: () => handleSwipe('right'),
+        onSwipedUp: () => handleSwipe('up'),
+        onSwipedDown: () => handleSwipe('down'),
     });
 
+    const handleSwipe = (dir: string) => {
+        setIsFlipped(true);
+        setTimeout(() => {
+            onSwiped(dir);
+            setIsFlipped(false);
+        }, 600); // Match the duration of the CSS transition
+    };
+
     return (
-        <div className={`swipeable-card ${flipped ? 'flipped' : ''}`} {...handlers}>
-            <div className="card-inner">
-                <div className="card-front">
-                    {content}
-                </div>
-                <div className="card-back">
-                    Swiped!
-                </div>
+        <div {...handlers} className={`swipeable-card ${isFlipped ? 'flipped' : ''}`}>
+            <div className="swipeable-card-content">
+                {content}
+            </div>
+            <div className="swipeable-card-back">
+                {content} (Back)
             </div>
         </div>
     );

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -1,7 +1,5 @@
 import React, {useState} from 'react';
 
-import ReactFullpage from '@fullpage/react-fullpage';
-
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/effect-coverflow";
@@ -13,19 +11,20 @@ import SwipeableCard from "../components/SwipeableCard.tsx";
 // SwiperCore.use([Navigation, Pagination]);
 
 function Home() {
-
     const [cards, setCards] = useState([
-        { id: 1, content: 'Card 1' },
-        { id: 2, content: 'Card 2' },
-        { id: 3, content: 'Card 3' },
+        {id: 1, content: 'Card 1'},
+        {id: 2, content: 'Card 2'},
+        {id: 3, content: 'Card 3'},
     ]);
 
     const [currentCardIndex, setCurrentCardIndex] = useState(0);
 
     const handleSwiped = (dir: string) => {
-        console.log(`Card ${cards[currentCardIndex].id} swiped ${dir}`);
-        // Move to the next card
-        setCurrentCardIndex((prev) => (prev + 1) % cards.length);
+        if (dir === 'left') {
+            setCurrentCardIndex((prev) => (prev > 0 ? prev - 1 : cards.length - 1));
+        } else if (dir === 'right') {
+            setCurrentCardIndex((prev) => (prev + 1) % cards.length);
+        }
     };
 
     return (