the card flip animation is legit

3 files changed, 358 insertions, 0 deletions

diff --git a/src/components/Flashcard/Card.tsx b/src/components/Flashcard/Card.tsx
new file mode 100644
index 0000000..7cada24
--- /dev/null
+++ b/src/components/Flashcard/Card.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { CardResponse } from "@/lib/types/cards";
+
+// export default function ({ user }: { user: { name: string; id: number } }) {
+//   const [state, formAction, isPending] = useActionState(postLogout, 0);
+//   return (
+//     <form action={formAction}>
+//       <Card>
+//         <CardHeader>
+//           <CardTitle>Profile</CardTitle>
+//           {state}
+//         </CardHeader>
+//         <CardContent>
+//           <p>Username: {user.name}</p>
+//           <p>User ID: {user.id}</p>
+//         </CardContent>
+//         <CardFooter>
+//           <Button type="submit">Log out</Button>
+//         </CardFooter>
+//       </Card>
+//     </form>
+//   );
+// }
+// "use client";
+
+// --- Flashcard Component ---
+interface FlashcardProps {
+  data: CardResponse;
+  isFlipped: boolean;
+  onFlip: () => void;
+  animationDirection:
+    | "enter-left"
+    | "enter-right"
+    | "exit-left"
+    | "exit-right"
+    | "none";
+}
+
+const Flashcard: React.FC<FlashcardProps> = ({
+  data,
+  isFlipped,
+  onFlip,
+  animationDirection,
+}) => {
+  const getAnimationClass = () => {
+    switch (animationDirection) {
+      case "enter-right":
+        return "animate-slide-in-right";
+      case "enter-left":
+        return "animate-slide-in-left";
+      case "exit-right":
+        return "animate-slide-out-right";
+      case "exit-left":
+        return "animate-slide-out-left";
+      default:
+        return "";
+    }
+  };
+
+  return (
+    <div
+      className={`w-full max-w-md h-80 perspective group ${getAnimationClass()}`}
+      onClick={onFlip}
+    >
+      <div
+        className={`relative w-full h-full rounded-xl shadow-xl transition-transform duration-700 ease-in-out transform-style-preserve-3d cursor-pointer ${
+          isFlipped ? "rotate-y-180" : ""
+        }`}
+      >
+        {/* Front of the card */}
+        <div className="absolute w-full h-full bg-white dark:bg-slate-800 rounded-xl backface-hidden flex flex-col justify-between items-center p-6">
+          <span className="text-xs text-slate-500 dark:text-slate-400 self-start">
+            {data.expression.ipa.map((ip, i) => (
+              <span key={ip.ipa + i} className="ipa">
+                {ip.ipa}
+              </span>
+            ))}
+          </span>
+          <p className="text-3xl md:text-4xl font-semibold text-slate-800 dark:text-slate-100 text-center">
+            {data.expression.spelling}
+          </p>
+          <div className="w-full h-6">
+            {" "}
+            {/* Placeholder for spacing, mimics bottom controls */}
+            <span className="text-xs text-slate-400 dark:text-slate-500 self-end invisible">
+              Flip
+            </span>
+          </div>
+        </div>
+
+        {/* Back of the card */}
+        <div className="absolute w-full h-full bg-slate-50 dark:bg-slate-700 rounded-xl backface-hidden rotate-y-180 flex flex-col justify-between items-center p-6">
+          <span className="text-lg text-slate-500 dark:text-slate-400 self-start">
+            {data.expression.senses.map((ss, i) => (
+              <div key={`ss${i}`}>
+                {ss.senses.map((sss, i) => (
+                  <div key={`sss${i}`}>
+                    {sss.glosses.map((ssss, i) => (
+                      <p key={ssss + i}>{ssss}</p>
+                    ))}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </span>
+          <p className="text-3xl md:text-4xl font-semibold text-slate-800 dark:text-slate-100 text-center">
+            {data.note}
+          </p>
+          <div className="w-full h-6">
+            <span className="text-xs text-slate-400 dark:text-slate-500 self-end invisible">
+              Flip
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Flashcard;
diff --git a/src/components/Flashcard/Deck.tsx b/src/components/Flashcard/Deck.tsx
new file mode 100644
index 0000000..d3c736f
--- /dev/null
+++ b/src/components/Flashcard/Deck.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { CardResponse, DeckResponse } from "@/lib/types/cards";
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { ChevronLeftIcon, ChevronRightIcon, RotateCcwIcon } from "lucide-react";
+import "./cards.css";
+import Flashcard from "./Card";
+
+// --- Main App Component ---
+function Deck({ data }: { data: DeckResponse }) {
+  const [currentPage, setCurrentPage] = useState<number>(0);
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [isFlipped, setIsFlipped] = useState<boolean>(false);
+  const [animationDirection, setAnimationDirection] = useState<
+    "enter-left" | "enter-right" | "exit-left" | "exit-right" | "none"
+  >("none");
+  const flashcards = data.cards;
+  const [isAnimating, setIsAnimating] = useState<boolean>(false);
+
+  const handleFlip = () => {
+    if (isAnimating) return;
+    setIsFlipped(!isFlipped);
+  };
+
+  const handleNext = useCallback(() => {
+    if (isAnimating || currentIndex >= flashcards.length - 1) return;
+    setIsAnimating(true);
+    setIsFlipped(false); // Flip back to front before changing card
+    setAnimationDirection("exit-left");
+
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) =>
+        Math.min(prevIndex + 1, flashcards.length - 1),
+      );
+      setAnimationDirection("enter-right");
+      setTimeout(() => {
+        setAnimationDirection("none");
+        setIsAnimating(false);
+      }, 500); // Duration of enter animation
+    }, 500); // Duration of exit animation
+  }, [currentIndex, flashcards.length, isAnimating]);
+
+  const handlePrev = useCallback(() => {
+    if (isAnimating || currentIndex <= 0) return;
+    setIsAnimating(true);
+    setIsFlipped(false); // Flip back to front
+    setAnimationDirection("exit-right");
+
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+      setAnimationDirection("enter-left");
+      setTimeout(() => {
+        setAnimationDirection("none");
+        setIsAnimating(false);
+      }, 500); // Duration of enter animation
+    }, 500); // Duration of exit animation
+  }, [currentIndex, isAnimating]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isAnimating) return;
+      if (event.key === "ArrowRight") {
+        handleNext();
+      } else if (event.key === "ArrowLeft") {
+        handlePrev();
+      } else if (event.key === " " || event.key === "Enter") {
+        // Space or Enter to flip
+        event.preventDefault(); // Prevent scrolling if space is pressed
+        handleFlip();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleNext, handlePrev, isAnimating]);
+
+  if (flashcards.length === 0) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex flex-col items-center justify-center p-4 font-inter text-slate-800 dark:text-slate-200">
+        <p>No flashcards available.</p>
+      </div>
+    );
+  }
+
+  const currentCard = flashcards[currentIndex];
+  if (!currentCard) return <p>wtf</p>;
+
+  return (
+    <div className="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 font-inter transition-colors duration-300">
+      <div className="w-full max-w-md mb-8 relative">
+        {/* This div is for positioning the card and managing overflow during animations */}
+        <div className="relative h-80">
+          {" "}
+          {/* Ensure this matches card height */}
+          <Flashcard
+            key={currentCard.id} // Important for re-rendering on card change with animation
+            data={currentCard}
+            isFlipped={isFlipped}
+            onFlip={handleFlip}
+            animationDirection={animationDirection}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between w-full max-w-md mb-6">
+        <Button
+          onClick={handlePrev}
+          disabled={currentIndex === 0 || isAnimating}
+          variant="outline"
+          size="icon"
+          aria-label="Previous card"
+        >
+          <ChevronLeftIcon />
+        </Button>
+        <div className="text-center">
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Card {currentIndex + 1} of {flashcards.length}
+          </p>
+          <Button
+            onClick={handleFlip}
+            variant="ghost"
+            size="sm"
+            className="mt-1 text-slate-600 dark:text-slate-400"
+            disabled={isAnimating}
+          >
+            <RotateCcwIcon className="w-4 h-4 mr-2" /> Flip Card
+          </Button>
+        </div>
+        <Button
+          onClick={handleNext}
+          disabled={currentIndex === flashcards.length - 1 || isAnimating}
+          variant="outline"
+          size="icon"
+          aria-label="Next card"
+        >
+          <ChevronRightIcon />
+        </Button>
+      </div>
+
+      <div className="text-xs text-slate-500 dark:text-slate-400 mt-8">
+        Use Arrow Keys (← →) to navigate, Space/Enter to flip.
+      </div>
+    </div>
+  );
+}
+
+export default Deck;
diff --git a/src/components/Flashcard/cards.css b/src/components/Flashcard/cards.css
new file mode 100644
index 0000000..2f75ad6
--- /dev/null
+++ b/src/components/Flashcard/cards.css
@@ -0,0 +1,86 @@
+body {
+  font-family: "Inter", sans-serif;
+}
+
+.perspective {
+  perspective: 1000px;
+}
+
+.transform-style-preserve-3d {
+  transform-style: preserve-3d;
+}
+
+.backface-hidden {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  /* Safari */
+}
+
+.rotate-y-180 {
+  transform: rotateY(180deg);
+}
+
+/* Slide animations */
+@keyframes slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.5s ease-out forwards;
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-in-left {
+  animation: slide-in-left 0.5s ease-out forwards;
+}
+
+@keyframes slide-out-left {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.animate-slide-out-left {
+  animation: slide-out-left 0.5s ease-in forwards;
+}
+
+@keyframes slide-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+.animate-slide-out-right {
+  animation: slide-out-right 0.5s ease-in forwards;
+}
\ No newline at end of file