From cf649e8f9863369775b5a7c63ae90e5074fe2625 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Advaita=20K=E1=B9=9B=E1=B9=A3=E1=B9=87a=20D=C4=81sa?=
 <advaita.krishna.das@gmail.com>
Date: Fri, 31 Mar 2023 16:39:27 +0200
Subject: [PATCH] feat: improve tutorial (#194)

---
 .github/workflows/tests.yml                   | 28 ++++++++---------
 src/app/decks/review/pages/ReviewDeckPage.vue | 16 +++++++++-
 src/app/shared/composables/useTimeMachine.ts  | 21 +++++++++++++
 src/app/shared/index.ts                       |  3 +-
 src/app/statistics/index.ts                   |  2 +-
 ...ticsTask.ts => runUpdateStatisticsTask.ts} |  6 ++++
 .../tutorial/components/TutorialPlayer.vue    | 30 +++++++++++++------
 src/app/tutorial/stores/useTutorialStore.ts   |  6 ++--
 src/locale/en/tutorial.json                   |  6 ++--
 src/locale/ru/tutorial.json                   |  1 +
 10 files changed, 88 insertions(+), 31 deletions(-)
 create mode 100644 src/app/shared/composables/useTimeMachine.ts
 rename src/app/statistics/tasks/{UpdateStatisticsTask.ts => runUpdateStatisticsTask.ts} (87%)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 95a4d59b..5e079bcc 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -19,15 +19,15 @@ jobs:
           registry-url: 'https://npm.pkg.github.com'
           cache: npm
 
-      - name: 🫙 Cache NPM dependencies
-        uses: actions/cache@v3
-        id: cache-primes
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+      # - name: 🫙 Cache NPM dependencies
+      #   uses: actions/cache@v3
+      #   id: cache-primes
+      #   with:
+      #     path: node_modules
+      #     key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
 
       - name: 📦 Install dependencies
-        if: steps.cache-primes.outputs.cache-hit != 'true'
+        # if: steps.cache-primes.outputs.cache-hit != 'true'
         run: npm ci --audit=false
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -79,15 +79,15 @@ jobs:
       with:
         node-version: 18
 
-    - name: 📦 [Node] Cache packages
-      uses: actions/cache@v3
-      id: cache-primes
-      with:
-        path: node_modules
-        key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+    # - name: 📦 [Node] Cache packages
+    #   uses: actions/cache@v3
+    #   id: cache-primes
+    #   with:
+    #     path: node_modules
+    #     key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
 
     - name: 📦 [Node] Install packages
-      if: steps.cache-primes.outputs.cache-hit != 'true'
+      # if: steps.cache-primes.outputs.cache-hit != 'true'
       run: npm ci --audit=false
       env:
         NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/src/app/decks/review/pages/ReviewDeckPage.vue b/src/app/decks/review/pages/ReviewDeckPage.vue
index cc7a2117..adc435e8 100644
--- a/src/app/decks/review/pages/ReviewDeckPage.vue
+++ b/src/app/decks/review/pages/ReviewDeckPage.vue
@@ -6,6 +6,18 @@
         <ion-title>
           {{ $t('decks.review.title') }}
         </ion-title>
+
+        <ion-buttons
+          v-if="timeMachine.daysInFuture.value"
+          slot="primary"
+        >
+          <ion-button
+            fill="solid"
+            color="warning"
+          >
+            {{ $t("tutorial.daysInFuture", { count: timeMachine.daysInFuture.value }) }}
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
@@ -62,7 +74,7 @@
 
 <script lang="ts" setup>
 import { Application, ReviewCard, ReviewCardReviewed, ReviewGrade, Scheduler, UpdateVerseStatus, Verse, VerseId } from '@akdasa-studios/shlokas-core'
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter } from '@ionic/vue'
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, IonButton, IonButtons } from '@ionic/vue'
 import { computed, inject, reactive, ref, watch } from 'vue'
 import { useArrayFind } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
@@ -70,6 +82,7 @@ import { StackedFlipCardsDeck , useIndexedList, useLibraryCache } from '@/app/de
 import { ReviewFlipCard, ReviewDeckEmpty, ReviewCardSwipeOverlay, GradeCardButtons } from '@/app/decks/review'
 import { useSettingsStore } from '@/app/settings'
 import { TutorialSteps, useTutorialStore } from '@/app/tutorial'
+import { useTimeMachine } from '@/app/shared'
 
 
 /* -------------------------------------------------------------------------- */
@@ -81,6 +94,7 @@ const libraryCache = useLibraryCache(app)
 const indexedList = useIndexedList()
 const settings = useSettingsStore()
 const tutorial = useTutorialStore()
+const timeMachine = useTimeMachine(app)
 
 
 /* -------------------------------------------------------------------------- */
diff --git a/src/app/shared/composables/useTimeMachine.ts b/src/app/shared/composables/useTimeMachine.ts
new file mode 100644
index 00000000..aa205983
--- /dev/null
+++ b/src/app/shared/composables/useTimeMachine.ts
@@ -0,0 +1,21 @@
+import { Application } from '@akdasa-studios/shlokas-core'
+import { ref } from 'vue'
+
+const now = ref(new Date())
+const daysInFuture = ref(0)
+
+export function useTimeMachine(app: Application) {
+  now.value = app.timeMachine.now
+
+  function set(date: Date) {
+    app.timeMachine.set(date)
+    now.value = new Date(date)
+  }
+
+  function goInFuture(days=1) {
+    daysInFuture.value = days
+    set(app.timeMachine.add(new Date(), 24*days, 'h'))
+  }
+
+  return { now, goInFuture, daysInFuture }
+}
\ No newline at end of file
diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts
index 7e0575cb..9705ad3f 100644
--- a/src/app/shared/index.ts
+++ b/src/app/shared/index.ts
@@ -6,4 +6,5 @@ export * from './services/downloadService'
 export * from './composables/useLinks'
 export * from './composables/useEnv'
 export * from './composables/useStringHasher'
-export * from './composables/useLogger'
\ No newline at end of file
+export * from './composables/useLogger'
+export * from './composables/useTimeMachine'
\ No newline at end of file
diff --git a/src/app/statistics/index.ts b/src/app/statistics/index.ts
index 1652f4a2..9aa95da6 100644
--- a/src/app/statistics/index.ts
+++ b/src/app/statistics/index.ts
@@ -1,2 +1,2 @@
 export * from './stores/useStatisticsStore'
-export * from './tasks/UpdateStatisticsTask'
\ No newline at end of file
+export * from './tasks/runUpdateStatisticsTask'
\ No newline at end of file
diff --git a/src/app/statistics/tasks/UpdateStatisticsTask.ts b/src/app/statistics/tasks/runUpdateStatisticsTask.ts
similarity index 87%
rename from src/app/statistics/tasks/UpdateStatisticsTask.ts
rename to src/app/statistics/tasks/runUpdateStatisticsTask.ts
index 290d37de..8d2a3b31 100644
--- a/src/app/statistics/tasks/UpdateStatisticsTask.ts
+++ b/src/app/statistics/tasks/runUpdateStatisticsTask.ts
@@ -1,11 +1,17 @@
 import { AddVerseToInboxDeck, Application, InboxCardMemorized, ReviewCardReviewed } from '@akdasa-studios/shlokas-core'
 import { EventEmitter2 } from 'eventemitter2'
 
+import { watch } from 'vue'
 import { useStatisticsStore } from '@/app/statistics'
+import { useTimeMachine } from '@/app/shared'
 
 
 export function runUpdateStatisticsTask(app: Application, emitter: EventEmitter2) {
   const statisticsStore = useStatisticsStore()
+  const timeMachine = useTimeMachine(app)
+
+
+  watch(timeMachine.now, async () => await updateStatistics())
 
   emitter.on('commandExecuted', async (e) => {
     if (e instanceof ReviewCardReviewed) { await updateStatistics() }
diff --git a/src/app/tutorial/components/TutorialPlayer.vue b/src/app/tutorial/components/TutorialPlayer.vue
index 704d2c65..5a90ada3 100644
--- a/src/app/tutorial/components/TutorialPlayer.vue
+++ b/src/app/tutorial/components/TutorialPlayer.vue
@@ -22,6 +22,7 @@ import { inject, ref } from 'vue'
 import { Application } from '@akdasa-studios/shlokas-core'
 import ConfettiExplosion from 'vue-confetti-explosion'
 import { TutorialCards, TutorialSteps, useTutorialStore } from '@/app/tutorial'
+import { useTimeMachine } from '@/app/shared'
 
 /* -------------------------------------------------------------------------- */
 /*                                Dependencies                                */
@@ -29,6 +30,7 @@ import { TutorialCards, TutorialSteps, useTutorialStore } from '@/app/tutorial'
 
 const app = inject('app') as Application
 const tutorialStore = useTutorialStore()
+const timeMachine = useTimeMachine(app)
 
 
 /* -------------------------------------------------------------------------- */
@@ -61,7 +63,6 @@ tutorialStore.registerSteps([
     onButtonClicked: (buttonId: string) => {
       if (buttonId === 'no') {
         tutorialStore.currentStep = 9999
-        console.log('NO',  tutorialStore.currentStep)
       }
       if (buttonId === 'yes') { goToTheNextStep() }
     }
@@ -153,7 +154,7 @@ tutorialStore.registerSteps([
       { id: 'go', text: 'common.forward', color: 'success' },
     ],
     onButtonClicked: () => {
-      nextDay()
+      timeMachine.goInFuture(1)
       goToTheNextStep()
     }
   },
@@ -182,7 +183,7 @@ tutorialStore.registerSteps([
     id: TutorialSteps.ReviewDeckGradeAllCards,
     text: 'tutorial.reviewDeck.gradeAllCards',
     duration: 5000,
-    onEnter: () => nextDay(7)
+    onEnter: () => timeMachine.goInFuture(7)
   },
 
   {
@@ -199,17 +200,28 @@ tutorialStore.registerSteps([
     onEnter: () => {
       showConfetti.value = true
     },
-    onTimeout() {
+    async onTimeout() {
       currentStep.value = TutorialSteps.TutorialEnd
+      await cleanup()
+      timeMachine.goInFuture(0)
     }
   },
-
 ])
 
-function nextDay(days=1) {
-  app.timeMachine.set(
-    app.timeMachine.add(app.timeMachine.now, 24*days, 'h')
-  )
+
+async function cleanup() {
+  const inboxCards = await app.repositories.inboxCards.all()
+  for (const inboxCard of inboxCards) {
+    await app.repositories.inboxCards.delete(inboxCard.id)
+  }
+  const reviewCards = await app.repositories.reviewCards.all()
+  for (const reviewCard of reviewCards) {
+    await app.repositories.reviewCards.delete(reviewCard.id)
+  }
+  const verseStatuses = await app.repositories.verseStatuses.all()
+  for (const verseStatus of verseStatuses) {
+    await app.repositories.verseStatuses.delete(verseStatus.id)
+  }
 }
 
 const tutorial = ref()
diff --git a/src/app/tutorial/stores/useTutorialStore.ts b/src/app/tutorial/stores/useTutorialStore.ts
index 17e041fc..0690c770 100644
--- a/src/app/tutorial/stores/useTutorialStore.ts
+++ b/src/app/tutorial/stores/useTutorialStore.ts
@@ -25,9 +25,9 @@ export const useTutorialStore = defineStore('tutorial', () => {
     steps.value = tutorialSteps
   }
 
-  function completeStep(step: number) {
+  async function completeStep(step: number) {
     if (currentStep.value?.onLeave && step === currentStepIdx.value) {
-      currentStep.value.onLeave()
+      await currentStep.value.onLeave()
     }
 
     if (currentStepIdx.value === step || step === undefined) {
@@ -35,7 +35,7 @@ export const useTutorialStore = defineStore('tutorial', () => {
     }
 
     if (currentStep.value?.onEnter && (step+1) === currentStepIdx.value) {
-      currentStep.value.onEnter()
+      await currentStep.value.onEnter()
     }
   }
 
diff --git a/src/locale/en/tutorial.json b/src/locale/en/tutorial.json
index d13bb97e..a376ab98 100644
--- a/src/locale/en/tutorial.json
+++ b/src/locale/en/tutorial.json
@@ -2,6 +2,8 @@
 	"tutorial": {
 		"introduction": "Welcome to Shlokas! Panditji, would you like to go throght training?",
 		"congratulations": "Congratulations! Panditji, you have graduated!",
+    "daysInFuture": "+{count} day in future",
+
 		"library": {
 			"introduction": "This is a library. Here you can find shlokas you want to learn",
 			"search": "You can search for shlokas in a list or by number and content. Try searching for a particular shloka",
@@ -21,10 +23,10 @@
 		"reviewDeck": {
 			"introduction": "This is the Review deck. This is where the cards you have already memorized go. You don't have any cards planned for today, but you do have some for tomorrow. Let's move to tomorrow",
 			"questionAndAnswer": "On the front of the card is the question and on the back is the answer. Remember the answer and turn the card over to test your knowledge",
-			"gradeCard": "Give yourself a grade. Depending on your grade, the next repetition period will change and is displayed on the",
+			"gradeCard": "Give yourself a grade. Depending on your grade, the next repetition period will change and is displayed on the button",
 			"goToFuture": "Great! Now let's move forward a week! Several cards with different questions are created for each verse. Let's see how it looks!",
 			"gradeAllCards": "Try to answer all the cards and give yourself a grade",
-			"end": "Great! You've looked at all the cards!"
+			"end": "Great! You've reviewd all the cards!"
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/locale/ru/tutorial.json b/src/locale/ru/tutorial.json
index be4598d1..d7905302 100644
--- a/src/locale/ru/tutorial.json
+++ b/src/locale/ru/tutorial.json
@@ -2,6 +2,7 @@
   "tutorial": {
     "introduction": "Добро пожаловать в 'Учи Шлоки!' Пандитджи, желаете ли пройти обучение?",
     "congratulations": "Поздравляем! Пандитджи, вы закончили обучение!",
+    "daysInFuture": "+{count} день в будущем",
 
     "library": {
       "introduction": "Это библиотека. Тут вы можете найти шлоку которую хотите выучить",