diff --git a/src/routes/flashcards/+page.svelte b/src/routes/flashcards/+page.svelte index 409e5d6..4fd1731 100644 --- a/src/routes/flashcards/+page.svelte +++ b/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); });
{#if stats.isDeckEmpty}
-

Hey, You learned everything!

- +

Choose a Deck To learn from!

+
+ +
{:else} -
+
-
+
diff --git a/src/routes/flashcards/editCards.svelte b/src/routes/flashcards/editCards.svelte index 9830e5e..8a73dfc 100644 --- a/src/routes/flashcards/editCards.svelte +++ b/src/routes/flashcards/editCards.svelte @@ -1,24 +1,38 @@
+
+ + +
+
Question Answer - +
- {#each LocalDeck as card, i} + + {#each deck[CurrentlyEditingDeckId].cards as card, i}
@@ -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"> + +
{/each}
diff --git a/src/routes/flashcards/logic.svelte.js b/src/routes/flashcards/logic.svelte.js index c2ba1a4..3fbb82f 100644 --- a/src/routes/flashcards/logic.svelte.js +++ b/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(); } diff --git a/src/routes/flashcards/tempelateDeck.json b/src/routes/flashcards/tempelateDeck.json index cb40c1f..55cf87d 100644 --- a/src/routes/flashcards/tempelateDeck.json +++ b/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" } + ] + } ] diff --git a/src/routes/nav.svelte b/src/routes/nav.svelte index ca99afc..f9c8bd3 100644 --- a/src/routes/nav.svelte +++ b/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"; @@ -123,7 +123,7 @@ - + {/if}