made multi deck work!

src/routes/flashcards/+page.svelte

@@ -3,60 +3,30 @@
 	import Card from "./card.svelte";
 	import StatsAndButtons from "./StatsAndButtons.svelte";
 
-	import { stats, resetDeck, SetNewDeck } from "./logic.svelte.js";
+	import { stats, SelectNewDeck, SetNewDeck, StorageDeck } from "./logic.svelte.js";
 	import { onMount } from "svelte";
 	import tempelateDeck from "./tempelateDeck.json";
 
 	onMount(() => {
 		SetNewDeck(JSON.parse(localStorage.getItem("deck")) || tempelateDeck, true);
 	});
-
-	let DemoDeck = [
-		{
-			deckName: "Tech",
-			cards: [
-				{ Q: "What is Svelte?", a: "A modern JavaScript framework for building user interfaces." },
-				{ Q: "What is a component?", a: "A reusable piece of UI in Svelte." },
-				{ Q: "How do you create a reactive variable?", a: "$: variableName = value;" },
-			],
-		},
-		{
-			deckName: "Math Basics",
-			cards: [
-				{ Q: "What is 2 + 2?", a: "4" },
-				{ Q: "What is the square root of 16?", a: "4" },
-				{ Q: "What is 5 * 6?", a: "30" },
-			],
-		},
-		{
-			deckName: "Geography",
-			cards: [
-				{ Q: "What is the capital of France?", a: "Paris" },
-				{ Q: "Which continent is Egypt in?", a: "Africa" },
-				{ Q: "What is the largest ocean?", a: "Pacific Ocean" },
-			],
-		},
-	];
 </script>
 
 <div class="flex h-full flex-col overflow-hidden">
 	{#if stats.isDeckEmpty}
 		<div class="flex flex-1 flex-col items-center justify-center gap-3">
-			<h1 class="text-4xl">Choose a Deck To lean from!</h1>
+			<h1 class="text-4xl">Choose a Deck To learn from!</h1>
 			<div>
 				<select
 					id="ChooseTheDeck"
 					onchange={(event) => {
-						const selectedDeck = DemoDeck.find((deck) => deck.deckName === event.target.value);
-						if (selectedDeck) {
-							SetNewDeck(selectedDeck.cards);
-						}
+						SelectNewDeck(event.target.value);
 					}}
 					class="input"
 				>
 					<option value="" disabled selected> goo ahead choose one! </option>
-					{#each DemoDeck as deckOption}
-						<option value={deckOption.deckName}>{deckOption.deckName}</option>
+					{#each StorageDeck.v as deckOption, i}
+						<option value={i}>{deckOption.deckName}</option>
 					{/each}
 				</select>
 			</div>

src/routes/flashcards/editCards.svelte

@@ -1,24 +1,38 @@
 <script>
-	import { SetNewDeck, deck, stats } from "./logic.svelte";
+	import { SetNewDeck, StorageDeck } from "./logic.svelte";
 	import toast from "svelte-5-french-toast";
 
-	let LocalDeck = $state($state.snapshot(deck));
-
 	function saveDeck() {
-		localStorage.setItem("deck", JSON.stringify(LocalDeck));
-		SetNewDeck(LocalDeck);
+		localStorage.setItem("deck", JSON.stringify(deck));
+		SetNewDeck(deck);
 		toast.success("Deck saved successfully! You can now close this window.");
 	}
+
+	let CurrentlyEditingDeckId = $state(0);
+
+	let deck = $state($state.snapshot(StorageDeck).v);
 </script>
 
 <div class="flex flex-col items-center gap-7 rounded border-2 bg-zinc-800 p-3">
 	<div class="flex w-full flex-col gap-2">
+		<div class="mb-2">
+			<label for="SelectOneDeckToEdit" class="text-lg leading-0.5 text-gray-500">
+				What deck do you want to edit?
+			</label>
+			<select bind:value={CurrentlyEditingDeckId} class="input" id="SelectOneDeckToEdit">
+				{#each deck as d, i}
+					<option value={i}>{d.deckName}</option>
+				{/each}
+			</select>
+		</div>
+
 		<div class="flex w-full gap-2 text-3xl">
 			<span class="flex-1">Question</span>
 			<span class="flex-1">Answer</span>
-			<button aria-label="delete" class="btn invisible"><i class="nf nf-md-delete"></i></button>
+			<button aria-label="delete" class="btn invisible h-0"><i class="nf nf-md-delete"></i></button>
 		</div>
-		{#each LocalDeck as card, i}
+
+		{#each deck[CurrentlyEditingDeckId].cards as card, i}
 			<div class="flex w-full gap-2">
 				<input type="text" class="input flex-1" bind:value={card.Q} />
 				<input type="text" class="input flex-1" bind:value={card.a} />
@@ -26,20 +40,20 @@
 					aria-label="delete"
 					onclick={() => {
 						if (confirm("Are you sure you want to delete this card?")) {
-							LocalDeck.splice(i, 1);
-							toast.success("Card deleted successfully! To make it apply, please save the deck.");
+							deck[CurrentlyEditingDeckId].cards.splice(i, 1);
 						}
 					}}
-					class="btn dull"><i class="nf nf-md-delete"></i></button
+					class="btn dull"
 				>
+					<i class="nf nf-md-delete"></i>
+				</button>
 			</div>
 		{/each}
 	</div>
 	<div class="flex gap-3">
 		<button
 			onclick={() => {
-				LocalDeck.push({ Q: "", a: "" });
-				toast.success("New card added! To make it apply, please save the deck.");
+				deck[CurrentlyEditingDeckId].cards.push({ Q: "", a: "" });
 			}}
 			class="btn"
 		>
@@ -47,8 +61,8 @@
 			Add New Card
 		</button>
 		<button onclick={saveDeck} class="btn">
-			<i class="nf nf-fa-save"></i>
-			Save
+			<i class="nf nf-md-content_save"></i>
+			Save All Changes You Made
 		</button>
 	</div>
 </div>

src/routes/flashcards/logic.svelte.js

@@ -8,38 +8,41 @@ export let statusOfCard = $state({
 	entering: false,
 });
 
-export 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 StorageDeck = $state({ v: [] });
 
-export function SetNewDeck(newDeck, ThisIsOfPageLoad = false) {
-	deck = newDeck;
+export let deck = $state({ v: [] });
+
+export function SetNewDeck(newDeck, ThisIsOfPageLoad = true) {
+	StorageDeck.v = newDeck;
 	resetDeck();
 	stats.isDeckEmpty = ThisIsOfPageLoad;
 }
 
+export function SelectNewDeck(deckNumber) {
+	deck.v = StorageDeck.v[deckNumber].cards;
+	resetDeck();
+}
+
 export let stats = $state({
 	isDeckEmpty: true,
 	AnswerKnown: 0,
 	AnswerNotKnown: 0,
-	AnswerNotChecked: deck.length,
+	AnswerNotChecked: deck.v.length,
 });
 
 let CurrentDeck = {
 	AnswersKnown: [],
 	AnswersNotKnown: [],
-	AnswersNotChecked: $state.snapshot(deck),
+	AnswersNotChecked: $state.snapshot(deck).v,
 };
 
 export function resetDeck() {
 	CurrentDeck.AnswersKnown = [];
 	CurrentDeck.AnswersNotKnown = [];
-	CurrentDeck.AnswersNotChecked = $state.snapshot(deck);
+	CurrentDeck.AnswersNotChecked = $state.snapshot(deck).v;
 	stats.AnswerKnown = 0;
 	stats.AnswerNotKnown = 0;
-	stats.AnswerNotChecked = deck.length;
+	stats.AnswerNotChecked = deck.v.length;
 	stats.isDeckEmpty = false;
 	SetNewCard();
 }