Fix test and adjust swiping

frontend/src/components/SwipeableCard.css

@@ -32,11 +32,21 @@
 }
 
 .watermark {
-  position: absolute;
+  position: fixed; /* Ensure the watermark is fixed to the screen */
   font-size: 6em;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%); /* Center the watermark */
   pointer-events: none;
-  z-index: 1;
+  z-index: 9999; /* Ensure it stays on top */
+}
+
+.swipe-left {
+  transition: transform 0.6s ease;
+  transform: translateX(-100%);
+}
+
+.swipe-right {
+  transition: transform 0.6s ease;
+  transform: translateX(100%);
 }

frontend/src/components/SwipeableCard.test.tsx

@@ -44,7 +44,6 @@ describe("SwipeableCard", () => {
   const swipeDirections = [
     { direction: "left", expectedClass: "text-pink-700 opacity-30" },
     { direction: "right", expectedClass: "text-green-700 opacity-30" },
-    { direction: "up", expectedClass: "" },
     { direction: "down", expectedClass: "text-green-700 opacity-30" },
   ];
 
@@ -71,4 +70,30 @@ describe("SwipeableCard", () => {
       }
     });
   });
+
+  it("flips the card on swiping up", () => {
+    const { container, getByText } = setup();
+    const card = container.querySelector(".swipeable-card");
+    fireEvent.touchStart(card, { touches: [{ clientY: 100 }] });
+    fireEvent.touchMove(card, { touches: [{ clientY: 50 }] });
+    fireEvent.touchEnd(card, { changedTouches: [{ clientY: 50 }] });
+    expect(getByText("Test Content (Back)")).toBeInTheDocument();
+  });
+
+  it("keeps the watermark centered during card flip", () => {
+    const { getByTestId, container } = setup();
+    const watermark = getByTestId("wartermark-id");
+    const card = container.querySelector(".swipeable-card");
+
+    // Check initial position
+    const initialRect = watermark.getBoundingClientRect();
+    fireEvent.touchStart(card, { touches: [{ clientY: 100 }] });
+    fireEvent.touchMove(card, { touches: [{ clientY: 50 }] });
+    fireEvent.touchEnd(card, { changedTouches: [{ clientY: 50 }] });
+
+    // Check position after swipe
+    const flippedRect = watermark.getBoundingClientRect();
+    expect(initialRect.top).toBe(flippedRect.top);
+    expect(initialRect.left).toBe(flippedRect.left);
+  });
 });

frontend/src/components/SwipeableCard.tsx

@@ -14,6 +14,7 @@ function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
   const [isFlipped, setIsFlipped] = useState(false);
   const [watermark, setWatermark] = useState<React.ReactNode>(null);
   const [watermarkColor, setWatermarkColor] = useState("");
+  const [swipeClass, setSwipeClass] = useState("");
 
   const handlers = useSwipeable({
     onSwipedLeft: () => handleSwipe("left"),
@@ -25,11 +26,12 @@ function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
   });
 
   const handleSwipe = (dir: string) => {
-    if(dir === "up" ) {
+    if (dir === "up") {
       setWatermark(null);
       setIsFlipped(true);
     } else {
       setWatermark(null);
+      setSwipeClass("");
       onSwiped(dir);
     }
   };
@@ -41,36 +43,42 @@ function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
 
   const handleSwiping = ({ dir }: { dir: string }) => {
     if (dir === "Left") {
+      setSwipeClass("swipe-left");
       setWatermark(<IoIosHeart />);
       setWatermarkColor("text-pink-700 opacity-30");
     } else if (dir === "Right") {
+      setSwipeClass("swipe-right");
       setWatermark(<AiFillDislike />);
       setWatermarkColor("text-green-700 opacity-30");
     } else if (dir === "Down") {
+      setSwipeClass("");
       setWatermark(<GrValidate />);
       setWatermarkColor("text-green-700 opacity-30");
     } else {
+      setSwipeClass("");
       setWatermark(null);
       setWatermarkColor("");
     }
   };
 
   return (
-    <div
-      {...handlers}
-      className={`swipeable-card ${isFlipped ? "flipped" : ""} justify-center p-8`}
-    >
+    <>
       <div
         data-testid="wartermark-id"
         className={`watermark ${watermarkColor}`}
       >
         {watermark}
       </div>
-      <h1 className="font-mono text-4xl font-extrabold swipeable-card-content">
-        {content}
-      </h1>
-      <div className="swipeable-card-back">{content} (Back)</div>
-    </div>
+      <div
+        {...handlers}
+        className={`swipeable-card ${isFlipped ? "flipped" : ""} ${swipeClass} justify-center p-8`}
+      >
+        <h1 className="font-mono text-4xl font-extrabold swipeable-card-content">
+          {content}
+        </h1>
+        <div className="swipeable-card-back">{content} (Back)</div>
+      </div>
+    </>
   );
 }