addded proper funtionalty of the flashcard app working, now you can slect if you know the awnser, if you dont then it will re ask you until you know all. its still bugy will work on more fetures and making it less bugy soon!

src/routes/flashcards/+page.svelte

@@ -2,16 +2,25 @@
 	import Buttons from "./buttons.svelte";
 	import Card from "./card.svelte";
 	import StatsAndButtons from "./StatsAndButtons.svelte";
+
+	import { stats, resetDeck } from "./logic.svelte.js";
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
-	<div class="flex flex-1 flex-col items-center justify-center gap-5">
+	{#if stats.isDeckEmpty}
-		<div class="flex flex-col text-center gap-1"><Card /></div>
+		<div class="flex flex-1 flex-col items-center justify-center gap-3">
-		<div class="flex gap-4">
+			<h1 class="text-4xl">Hey, You learned everything!</h1>
-			<Buttons />
+			<button onclick={() => resetDeck()} class="big btn green">Reset Deck</button>
 		</div>
-	</div>
+	{:else}
-	<div class="flex items-center justify-between p-2 text-gray-700">
+		<div class="flex flex-1 flex-col items-center justify-center gap-5">
-		<StatsAndButtons />
+			<div class="flex flex-col gap-1 text-center"><Card /></div>
-	</div>
+			<div class="flex gap-4">
+				<Buttons />
+			</div>
+		</div>
+		<div class="flex items-center justify-between p-2 text-gray-700">
+			<StatsAndButtons />
+		</div>
+	{/if}
 </div>

src/routes/flashcards/StatsAndButtons.svelte

@@ -1,10 +1,14 @@
+<script>
+	import { stats} from "./logic.svelte.js";
+</script>
+
 <div class="invisible">
 	<button class="btn mini"> Reset Deck </button>
 </div>
 <div class="flex gap-5">
-	<span class="text-green-500"><i class="nf nf-md-check"></i>: 20</span>
+	<span class="text-green-500"><i class="nf nf-md-check"></i>: {stats.AnswerKnown}</span>
-	<span class="text-red-500"><i class="nf nf-md-close"></i>: 20</span>
+	<span class="text-red-500"><i class="nf nf-md-close"></i>: {stats.AnswerNotKnown}</span>
-	<span class="text-blue-500"><i class="nf nf-md-help"></i>: 20</span>
+	<span class="text-blue-500"><i class="nf nf-md-help"></i>: {stats.AnswerNotChecked}</span>
 </div>
 <div>
 	<button class="btn mini"> Reset Deck </button>

src/routes/flashcards/logic.svelte.js

@@ -1,4 +1,4 @@
-export let card = $state({ Q: "What is the capital of France?", a: "Paris" });
+export let card = $state({ Q: "", a: "" });
 
 export let statusOfCard = $state({
 	currentlyAnswered: false,
@@ -8,12 +8,80 @@ export let statusOfCard = $state({
 	entering: false,
 });
 
+let deck = [
+	{ Q: "Best programer in the world?", a: "RezHackXYZ" },
+	{ Q: "Best coding community?", a: "HackClub" },
+	{ Q: "Will @Shub go totally bankrupt?", a: "yes!" },
+];
+
+export let stats = $state({
+	isDeckEmpty: false,
+	AnswerKnown: 0,
+	AnswerNotKnown: 0,
+	AnswerNotChecked: deck.length,
+});
+
+let CurrentDeck = {
+	AnswersKnown: [],
+	AnswersNotKnown: [],
+	AnswersNotChecked: $state.snapshot(deck),
+};
+
+export function resetDeck() {
+	CurrentDeck.AnswersKnown = [];
+	CurrentDeck.AnswersNotKnown = [];
+	CurrentDeck.AnswersNotChecked = $state.snapshot(deck);
+	stats.AnswerKnown = 0;
+	stats.AnswerNotKnown = 0;
+	stats.AnswerNotChecked = deck.length;
+	stats.isDeckEmpty = false;
+	SetNewCard();
+}
+
+function SetNewCard() {
+	// Check if deck is complete
+	if (CurrentDeck.AnswersNotChecked.length === 0 && CurrentDeck.AnswersNotKnown.length === 0) {
+		stats.isDeckEmpty = true;
+		return;
+	}
+
+	let sourceArray;
+
+	// First go through unchecked cards, then cycle through unknown cards
+	if (CurrentDeck.AnswersNotChecked.length > 0) {
+		sourceArray = CurrentDeck.AnswersNotChecked;
+	} else {
+		sourceArray = CurrentDeck.AnswersNotKnown;
+	}
+
+	let randomIndex = Math.floor(Math.random() * sourceArray.length);
+	let selectedCard = sourceArray[randomIndex];
+
+	card.Q = selectedCard.Q;
+	card.a = selectedCard.a;
+
+	// Remove from source array
+	sourceArray.splice(randomIndex, 1);
+
+	// Update stats
+	updateStats();
+}
+
+function updateStats() {
+	stats.AnswerKnown = CurrentDeck.AnswersKnown.length;
+	stats.AnswerNotKnown = CurrentDeck.AnswersNotKnown.length;
+	stats.AnswerNotChecked = CurrentDeck.AnswersNotChecked.length;
+}
+
+SetNewCard();
+
 function AnimateCard() {
 	statusOfCard.exiting = true;
 
 	setTimeout(() => {
 		statusOfCard.exiting = false;
 		statusOfCard.entering = true;
+		SetNewCard();
 
 		setTimeout(() => {
 			statusOfCard.entering = false;
@@ -30,6 +98,17 @@ export function nextCard(side) {
 		return;
 	}
 
+	// Create a copy of current card before moving to next
+	let currentCard = { Q: card.Q, a: card.a };
+
+	if (side == "right") {
+		// User knows this card
+		CurrentDeck.AnswersKnown.push(currentCard);
+	} else {
+		// User doesn't know this card - add to unknown pile for re-asking
+		CurrentDeck.AnswersNotKnown.push(currentCard);
+	}
+
 	statusOfCard.currentlyAnswered = true;
 
 	if (side == "right") {