Merge pull request #4 from RezHackXYZ/add-multiple-decks-to-flashcards

Add multiple decks to flashcards

src/routes/flashcards/+page.svelte

@@ -3,25 +3,38 @@
 	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);
+		SetNewDeck(JSON.parse(localStorage.getItem("deck")) || tempelateDeck, true);
 	});
 </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">Hey, You learned everything!</h1>
-			<button onclick={() => resetDeck()} class="big btn green">Reset Deck</button>
+			<h1 class="text-4xl">Choose a Deck To learn from!</h1>
+			<div>
+				<select
+					id="ChooseTheDeck"
+					onchange={(event) => {
+						SelectNewDeck(event.target.value);
+					}}
+					class="input"
+				>
+					<option value="" disabled selected> goo ahead choose one! </option>
+					{#each StorageDeck.v as deckOption, i}
+						<option value={i}>{deckOption.deckName}</option>
+					{/each}
+				</select>
+			</div>
 		</div>
 	{:else}
-		<div class="flex flex-1 flex-col items-center justify-center gap-2">
+		<div class="flex flex-1 flex-col items-center justify-center">
 			<div class="flex flex-col gap-1 text-center">
-				<div class="flex items-center justify-center p-2">
+				<div class="flex flex-col items-center justify-center gap-5 p-2">
 					<StatsAndButtons />
 				</div>
 				<Card />

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

@@ -1,4 +1,3 @@
-
 export let card = $state({ Q: "", a: "" });
 
 export let statusOfCard = $state({
@@ -9,37 +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) {
-	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: false,
+	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();
 }

src/routes/flashcards/tempelateDeck.json

@@ -1,5 +1,26 @@
 [
-	{ "Q": "Best programer in the world?", "a": "RezHackXYZ" },
-	{ "Q": "Best coding community?", "a": "HackClub" },
-	{ "Q": "Will @Shub go totally bankrupt?", "a": "yes!" }
+	{
+		"deckName": "Tech",
+		"cards": [
+			{ "Q": "What is Svelte?", "a": "Best web dev Framework ever." },
+			{ "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" }
+		]
+	}
 ]

src/routes/nav.svelte

@@ -60,7 +60,7 @@
 	import { colseModal, ShowSeconds } from "./IdleScreen/logic/TimeAndTableData.svelte.js";
 	import EditTimetableDiv from "./IdleScreen/components/timetable/EditTimetable.svelte";
 	import { TabOpen } from "./randomname/+page.svelte";
-	import { resetDeck } from "./flashcards/logic.svelte";
+	import { resetDeck, stats } from "./flashcards/logic.svelte";
 	import EditCards from "./flashcards/editCards.svelte";
 </script>
 
@@ -123,7 +123,7 @@
 					<button class="btn dull mini">Edit Decks</button>
 				</Trigger>
 			</Modal>
-			<button class="btn dull mini" onclick={() => resetDeck}> Reset current Deck </button>
+			<button class="btn dull mini" onclick={() => (stats.isDeckEmpty = true)}> Change Deck</button>
 		{/if}
 	</div>
 </div>