From e839a5f61f0faa21ca8b4bd5767f7575d5e576ee Mon Sep 17 00:00:00 2001 From: polwex Date: Wed, 21 May 2025 14:00:28 +0700 Subject: the card flip animation is legit --- src/components/Flashcard/Card.tsx | 121 +++++++++++++++++++++++++++++ src/components/Flashcard/Deck.tsx | 151 +++++++++++++++++++++++++++++++++++++ src/components/Flashcard/cards.css | 86 +++++++++++++++++++++ 3 files changed, 358 insertions(+) create mode 100644 src/components/Flashcard/Card.tsx create mode 100644 src/components/Flashcard/Deck.tsx create mode 100644 src/components/Flashcard/cards.css (limited to 'src/components/Flashcard') 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 ( +//
+// +// +// Profile +// {state} +// +// +//

Username: {user.name}

+//

User ID: {user.id}

+// +// +// +// +// +//
+// ); +// } +// "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 = ({ + 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 ( +
+
+ {/* Front of the card */} +
+ + {data.expression.ipa.map((ip, i) => ( + + {ip.ipa} + + ))} + +

+ {data.expression.spelling} +

+
+ {" "} + {/* Placeholder for spacing, mimics bottom controls */} + + Flip + +
+
+ + {/* Back of the card */} +
+ + {data.expression.senses.map((ss, i) => ( +
+ {ss.senses.map((sss, i) => ( +
+ {sss.glosses.map((ssss, i) => ( +

{ssss}

+ ))} +
+ ))} +
+ ))} + +

+ {data.note} +

+
+ + Flip + +
+
+
+
+ ); +}; + +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(0); + const [currentIndex, setCurrentIndex] = useState(0); + const [isFlipped, setIsFlipped] = useState(false); + const [animationDirection, setAnimationDirection] = useState< + "enter-left" | "enter-right" | "exit-left" | "exit-right" | "none" + >("none"); + const flashcards = data.cards; + const [isAnimating, setIsAnimating] = useState(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 ( +
+

No flashcards available.

+
+ ); + } + + const currentCard = flashcards[currentIndex]; + if (!currentCard) return

wtf

; + + return ( +
+
+ {/* This div is for positioning the card and managing overflow during animations */} +
+ {" "} + {/* Ensure this matches card height */} + +
+
+ +
+ +
+

+ Card {currentIndex + 1} of {flashcards.length} +

+ +
+ +
+ +
+ Use Arrow Keys (← →) to navigate, Space/Enter to flip. +
+
+ ); +} + +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 -- cgit v1.2.3