feat: improve tutorial (#194)

.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 }}

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,14 +74,15 @@
 
 <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'
 import { StackedFlipCardsDeck , useIndexedList, useLibraryCache } from '@/app/decks/shared'
 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)
 
 
 /* -------------------------------------------------------------------------- */

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 }
+}

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'
+export * from './composables/useLogger'
+export * from './composables/useTimeMachine'

src/app/statistics/index.ts

@@ -1,2 +1,2 @@
 export * from './stores/useStatisticsStore'
-export * from './tasks/UpdateStatisticsTask'
+export * from './tasks/runUpdateStatisticsTask'

src/app/statistics/tasks/UpdateStatisticsTask.ts → 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() }

src/app/tutorial/components/TutorialPlayer.vue

@@ -22,13 +22,15 @@ 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                                */
 /* -------------------------------------------------------------------------- */
 
 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()

src/app/tutorial/stores/useTutorialStore.ts

@@ -25,17 +25,17 @@ 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) {
       currentStepIdx.value += 1
     }
 
     if (currentStep.value?.onEnter && (step+1) === currentStepIdx.value) {
-      currentStep.value.onEnter()
+      await currentStep.value.onEnter()
     }
   }
 

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!"
 		}
 	}
 }

src/locale/ru/tutorial.json

@@ -2,6 +2,7 @@
   "tutorial": {
     "introduction": "Добро пожаловать в 'Учи Шлоки!' Пандитджи, желаете ли пройти обучение?",
     "congratulations": "Поздравляем! Пандитджи, вы закончили обучение!",
+    "daysInFuture": "+{count} день в будущем",
 
     "library": {
       "introduction": "Это библиотека. Тут вы можете найти шлоку которую хотите выучить",