From dcf1fed0c3143cd8791d095da858b592857e36cf Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Thu, 12 Jun 2025 17:25:26 +0530 Subject: [PATCH 1/8] now you can learn from multiple decks, will implement editing the deaks soon! --- src/routes/flashcards/+page.svelte | 55 +++++++++++++++++++++--- src/routes/flashcards/logic.svelte.js | 6 +-- src/routes/flashcards/tempelateDeck.json | 27 ++++++++++-- src/routes/nav.svelte | 4 +- 4 files changed, 78 insertions(+), 14 deletions(-) diff --git a/src/routes/flashcards/+page.svelte b/src/routes/flashcards/+page.svelte index 409e5d6..6ba50e1 100644 --- a/src/routes/flashcards/+page.svelte +++ b/src/routes/flashcards/+page.svelte @@ -3,25 +3,68 @@ import Card from "./card.svelte"; import StatsAndButtons from "./StatsAndButtons.svelte"; - import { stats, resetDeck,SetNewDeck } from "./logic.svelte.js"; + import { stats, resetDeck, SetNewDeck } 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); }); + + 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" }, + ], + }, + ];
{#if stats.isDeckEmpty}
-

Hey, You learned everything!

- +

Choose a Deck To lean from!

+
+ +
{:else} -
+
-
+
diff --git a/src/routes/flashcards/logic.svelte.js b/src/routes/flashcards/logic.svelte.js index c2ba1a4..132b9ba 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({ @@ -15,13 +14,14 @@ export let deck = [ { Q: "Will @Shub go totally bankrupt?", a: "yes!" }, ]; -export function SetNewDeck (newDeck) { +export function SetNewDeck(newDeck, ThisIsOfPageLoad = false) { deck = newDeck; resetDeck(); + stats.isDeckEmpty = ThisIsOfPageLoad; } export let stats = $state({ - isDeckEmpty: false, + isDeckEmpty: true, AnswerKnown: 0, AnswerNotKnown: 0, AnswerNotChecked: deck.length, 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}
From 677176e0f9390c5b76db8ad924acb929966c6e90 Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Fri, 13 Jun 2025 16:12:51 +0530 Subject: [PATCH 2/8] made multi deck work! --- src/routes/flashcards/+page.svelte | 40 +++--------------------- src/routes/flashcards/editCards.svelte | 42 +++++++++++++++++--------- src/routes/flashcards/logic.svelte.js | 25 ++++++++------- 3 files changed, 47 insertions(+), 60 deletions(-) diff --git a/src/routes/flashcards/+page.svelte b/src/routes/flashcards/+page.svelte index 6ba50e1..4fd1731 100644 --- a/src/routes/flashcards/+page.svelte +++ b/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" }, - ], - }, - ];
{#if stats.isDeckEmpty}
-

Choose a Deck To lean from!

+

Choose a Deck To learn from!

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 132b9ba..3fbb82f 100644 --- a/src/routes/flashcards/logic.svelte.js +++ b/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(); } From f28f2caec50a805f93e39df04e84a61c4cf24763 Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Fri, 13 Jun 2025 17:10:09 +0530 Subject: [PATCH 3/8] you can now delete and rename deaks! --- src/routes/flashcards/editCards.svelte | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/routes/flashcards/editCards.svelte b/src/routes/flashcards/editCards.svelte index 8a73dfc..4dbe14f 100644 --- a/src/routes/flashcards/editCards.svelte +++ b/src/routes/flashcards/editCards.svelte @@ -26,6 +26,13 @@
+
+ + +
+
Question Answer @@ -51,6 +58,19 @@ {/each}
+
@@ -63,6 +90,7 @@ if (confirm("Are you sure you want to delete this deck?")) { deck.splice(CurrentlyEditingDeckId, 1); CurrentlyEditingDeckId = Math.max(0, CurrentlyEditingDeckId - 1); + DeckOptions.value = CurrentlyEditingDeckId.toString(); toast.success("Deck deleted successfully"); } }} From b470cf0e39000bda783de44aedef09f72f66cc74 Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Fri, 13 Jun 2025 17:26:13 +0530 Subject: [PATCH 5/8] fix where you could have 0 decks in flashcards --- src/routes/flashcards/editCards.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/routes/flashcards/editCards.svelte b/src/routes/flashcards/editCards.svelte index ed87239..5badab3 100644 --- a/src/routes/flashcards/editCards.svelte +++ b/src/routes/flashcards/editCards.svelte @@ -87,7 +87,9 @@