make so you can swipe the cards to i know or i dont know

src/routes/flashcards/+page.svelte

@@ -4,7 +4,7 @@
 	import StatsAndButtons from "./StatsAndButtons.svelte";
 </script>
 
-<div class="flex h-full flex-col">
+<div class="flex h-full flex-col overflow-hidden">
 	<div class="flex flex-1 flex-col items-center justify-center gap-5">
 		<div class="flex flex-col text-center gap-1"><Card /></div>
 		<div class="flex gap-4">

src/routes/flashcards/buttons.svelte

@@ -1,2 +1,11 @@
-<button aria-label="i don't know it" class="btn big red"> <i class="nf nf-md-close"></i></button>
+<script>
-<button aria-label="i know the it" class="btn big green"><i class="nf nf-md-check"></i></button>
+	import { nextCard } from "./logic.svelte.js";
+</script>
+
+<button aria-label="i don't know it" onclick={() => nextCard("left")} class="btn big red">
+	<i class="nf nf-md-close"></i>
+</button>
+
+<button aria-label="i know the it" onclick={() => nextCard("right")} class="btn big green">
+	<i class="nf nf-md-check"></i>
+</button>

src/routes/flashcards/card.svelte

@@ -1,20 +1,15 @@
 <script>
-	let card = {
+	import { card, statusOfCard } from "./logic.svelte.js";
-		Q: "What is the capital of France?",
-		a: "Paris",
-	};
-
-	let flipped = false;
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="peer aspect-video w-[600px] cursor-pointer transition perspective-[1000px] hover:scale-105"
-	on:click={() => (flipped = !flipped)}
+	on:click={() => (statusOfCard.flipped = !statusOfCard.flipped)}
 >
 	<div
-		class={`relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] ${flipped ? "rotate-y-180" : ""}`}
+		class={`relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] ${statusOfCard.flipped ? "rotate-y-180" : ""} ${statusOfCard.exiting ? (statusOfCard.exitingToRight? "card-exit-right" : "card-exit-left") : ""} ${statusOfCard.entering ? "card-enter" : ""} `}
 	>
 		<div
 			class="absolute flex h-full w-full flex-col items-center justify-center gap-5 rounded border-2 bg-blue-800 text-5xl text-white [backface-visibility:hidden]"
@@ -37,3 +32,40 @@
 >
 	Click to flip the card and see the answer ☝️
 </p>
+
+<style>
+	.card-exit-right {
+		animation: slideOutRight 0.4s ease forwards;
+	}
+
+	@keyframes slideOutRight {
+		to {
+			transform: translateX(100vw) rotate(10deg);
+			opacity: 0;
+		}
+	}
+	.card-exit-left {
+		animation: slideOutLeft 0.4s ease backwards;
+	}
+
+	@keyframes slideOutLeft {
+		to {
+			transform: translateX(-100vw) rotate(-10deg);
+			opacity: 0;
+		}
+	}
+	.card-enter {
+		animation: slideIn 0.4s ease;
+	}
+
+	@keyframes slideIn {
+		from {
+			transform: scale(0.5);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>

src/routes/flashcards/logic.svelte.js

@@ -0,0 +1,49 @@
+export let card = $state({ Q: "What is the capital of France?", a: "Paris" });
+
+export let statusOfCard = $state({
+	currentlyAnswered: false,
+	flipped: false,
+	exiting: false,
+	exitingToRight: false,
+	entering: false,
+});
+
+function AnimateCard() {
+	statusOfCard.exiting = true;
+
+	setTimeout(() => {
+		statusOfCard.exiting = false;
+		statusOfCard.entering = true;
+
+		setTimeout(() => {
+			statusOfCard.entering = false;
+
+			setTimeout(() => {
+				statusOfCard.currentlyAnswered = false;
+			}, 500);
+		}, 400);
+	}, 400);
+}
+
+export function nextCard(side) {
+	if (statusOfCard.currentlyAnswered) {
+		return;
+	}
+
+	statusOfCard.currentlyAnswered = true;
+
+	if (side == "right") {
+		statusOfCard.exitingToRight = true;
+	} else {
+		statusOfCard.exitingToRight = false;
+	}
+
+	if (statusOfCard.flipped) {
+		statusOfCard.flipped = false;
+		setTimeout(() => {
+			AnimateCard();
+		}, 300);
+	} else {
+		AnimateCard();
+	}
+}