feat: cleanup (#156)

.eslintrc.js

@@ -5,8 +5,8 @@ module.exports = {
   },
   'extends': [
     'plugin:vue/vue3-essential',
-    "plugin:vue/vue3-strongly-recommended",
-    "plugin:vue/vue3-recommended",
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
     'plugin:import/recommended',
     '@vue/typescript/recommended',
@@ -25,18 +25,19 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/no-deprecated-slot-attribute': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-    "import/order": [
-      "error",
+    'import/order': [
+      'error',
       {
         groups: [
-          "builtin", "external", "internal", "parent", "sibling", "index", "object"
+          'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object'
         ]
       }
     ],
-    "semi": ["error", "never"],
-    "@typescript-eslint/ban-ts-comment": "off"
+    'semi': ['error', 'never'],
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'quotes': ['error', 'single'],
   },
-  ignorePatterns: ["dist/**"],
+  ignorePatterns: ['dist/**'],
   overrides: [
     {
       files: [

playwright.config.ts

@@ -49,26 +49,26 @@ const config: PlaywrightTestConfig = {
 
   /* Configure projects for major browsers */
   projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
+    // {
+    //   name: 'chromium',
+    //   use: {
+    //     ...devices['Desktop Chrome'],
+    //   },
+    // },
 
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
 
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
 
     /* Test against mobile viewports. */
     {

src/App.vue

@@ -9,7 +9,7 @@ import { IonApp, IonRouterOutlet } from '@ionic/vue'
 
 // Notch!
 try {
-  if (window.location.search.includes("demo")) {
+  if (window.location.search.includes('demo')) {
     var css = `:root {
       --ion-safe-area-top: 20px;
       --ion-safe-area-bottom: 22px;

src/app/Application.ts

@@ -1,6 +1,6 @@
 import { InMemoryRepository } from '@akdasa-studios/framework'
 import { SyncRepository } from '@akdasa-studios/framework-sync'
-import { Application, InboxCard, Repositories, ReviewCard, Verse, VerseStatus } from "@akdasa-studios/shlokas-core"
+import { Application, InboxCard, Repositories, ReviewCard, Verse, VerseStatus } from '@akdasa-studios/shlokas-core'
 import { Capacitor } from '@capacitor/core'
 import {
   CouchDB, InboxCardDeserializer,
@@ -13,7 +13,7 @@ export let couchDB: CouchDB
 
 export async function createShlokasApplication() {
   couchDB = new CouchDB(
-    "local",
+    'local',
     Capacitor.getPlatform() == 'ios' ? 'cordova-sqlite' : undefined
   )
 
@@ -22,19 +22,19 @@ export async function createShlokasApplication() {
     // @ts-ignore
     new PouchRepository<VerseStatus>(
       couchDB,
-      "verseStatus",
+      'verseStatus',
       new VerseStatusSerializer(),
       new VerseStatusDeserializer()
     ),
     new SyncRepository(new PouchRepository<InboxCard>(
       couchDB,
-      "inbox",
+      'inbox',
       new InboxCardSerializer(),
       new InboxCardDeserializer()
     )),
     new SyncRepository(new PouchRepository<ReviewCard>(
       couchDB,
-      "review",
+      'review',
       new ReviewCardSerializer(),
       new ReviewCardDeserializer()
     )),

src/app/Events.ts

@@ -3,5 +3,5 @@ import { Command, AnyResult } from '@akdasa-studios/framework'
 export type Events = {
   commandExecuted: Command<unknown, AnyResult>
   syncCompleted: void,
-  appOpened: void
+  appStateChanged: { isActive: boolean }
 }

src/app/composables/useDialog.ts

@@ -1,4 +1,4 @@
-import { Ref, ref } from "vue"
+import { Ref, ref } from 'vue'
 
 export function useDialog<T>(defaultData: any) {
   const isOpen = ref(false)

src/app/composables/useToast.ts

@@ -1,4 +1,4 @@
-import { Ref, ref } from "vue"
+import { Ref, ref } from 'vue'
 
 interface ToastArgs {
   message?: string
@@ -7,11 +7,11 @@ interface ToastArgs {
 
 export function useToast() {
   const isOpen = ref(false)
-  const message = ref("")
+  const message = ref('')
   const data: Ref<Record<string, unknown>> = ref({})
 
   function open(options?: ToastArgs) {
-    message.value = options?.message || ""
+    message.value = options?.message || ''
     data.value = options?.data
     isOpen.value = true
   }

src/app/decks/UserMovesCards.ts

@@ -1,5 +1,5 @@
-import { CardViewModel } from "./shared/CardViewModel"
-import { Vector3d } from "./shared/Vector3d"
+import { CardViewModel } from './shared/CardViewModel'
+import { Vector3d } from './shared/Vector3d'
 
 export class DeckCardInteraction {
   constructor(

src/app/decks/inbox/components/InboxDeckPage.vue

@@ -17,7 +17,7 @@
       :scroll-x="false"
     >
       <CardsDeck
-        v-if="cardsMemorization.cards.length > 0"
+        v-if="!isEmpty"
         v-slot="data"
         :cards="cardsToShow"
         @place="onCardPlaced"
@@ -42,11 +42,11 @@
       <ion-toast
         position="top"
         :message="$t('cards.memorized')"
-        :buttons="[{ text: $t('common.revert'), role: 'cancel', handler: onRevert }]"
-        :is-open="cardsMemorization.cardMemorizedToast.isOpen.value"
+        :buttons="[{ text: $t('common.revert'), role: 'cancel', handler: revert }]"
+        :is-open="cardMemorizedToast.isOpen.value"
         :duration="2000"
         color="dark"
-        @did-dismiss="cardsMemorization.cardMemorizedToast.close()"
+        @did-dismiss="cardMemorizedToast.close()"
       />
     </ion-content>
   </ion-page>
@@ -58,41 +58,54 @@ import {
   IonContent, IonHeader, IonPage, IonTitle,
   IonToast, IonToolbar
 } from '@ionic/vue'
-import { computed, inject } from 'vue'
+import { inject } from 'vue'
+import { Application } from '@akdasa-studios/shlokas-core'
 import {
-  CardsDeck , StackedDeckBehaviour, Vector3d, VerseCardViewModel,
-  TutorialCard, TutorialCardViewModel
+  CardsDeck, Vector3d, VerseCardViewModel,
+  TutorialCard, TutorialCardViewModel, useStackedDeck
 } from '@/app/decks/shared'
 import {
   InboxCard, InboxCardViewModel, InboxDeckEmpty,
-  InboxDeckTutorialController,
   InboxVerseCardViewModel,
-  MemorizingStatus, InboxDeckCardsController
+  MemorizingStatus, useInboxDeck, useInboxDeckTutorial,
 } from '@/app/decks/inbox'
 import { testId } from '@/app/TestId'
 
-const cardsMemorization = inject('inboxDeckCardsController') as InboxDeckCardsController
-const inboxDeckTutorial = inject('inboxDeckTutorialController') as InboxDeckTutorialController
+const app = inject('app') as Application
+
+const {
+  isEmpty, cardsToShow, cardMemorizedToast,
+  shiftTopCard, memorizeTopCard, topCard, revert
+} = useInboxDeck(app)
+const {
+  tutorialCardSwiped, addTutorialCards
+} = useInboxDeckTutorial()
+const {
+  updateInactiveCard,
+  updateMovingCard,
+  updateMovedCard,
+  swipeThreshold
+} = useStackedDeck()
+
+addTutorialCards()
+
+
 
-const deck = new StackedDeckBehaviour()
 
-const cardsToShow = computed(() =>
-  cardsMemorization.cards.filter(x => x.index < 3)
-)
 
 function onCardPlaced(card: VerseCardViewModel) {
-  deck.updateInactiveCard(card)
+  updateInactiveCard(card)
 }
 
 function onCardMoving(
   card: InboxCardViewModel,
   deltaPos: Vector3d,
   deltaPosTotal: Vector3d
 ) {
-  deck.updateMovingCard(card, deltaPos)
+  updateMovingCard(card, deltaPos)
 
-  if (card.type === "tutorial") { return }
-  if (deltaPosTotal.length < deck.swipeThreshold) {
+  if (card instanceof TutorialCardViewModel) { return }
+  if (deltaPosTotal.length < swipeThreshold) {
     card.memorizingStatus = MemorizingStatus.Unknown
   } else {
     card.memorizingStatus = deltaPosTotal.isLeftOrRight
@@ -102,29 +115,25 @@ function onCardMoving(
 }
 
 function onCardMoved(card: InboxCardViewModel, deltaPos: Vector3d) {
-  deck.updateMovedCard(card, deltaPos)
-  if (deltaPos.length < deck.swipeThreshold) { return }
+  updateMovedCard(card, deltaPos)
+  if (deltaPos.length < swipeThreshold) { return }
   setTimeout(() => {
-    if (card.type === "tutorial") {
-      inboxDeckTutorial.tutorialCardSwiped(card as TutorialCardViewModel)
+    if (card instanceof TutorialCardViewModel) {
+      tutorialCardSwiped(card as TutorialCardViewModel)
       return
     }
 
     if (deltaPos.isLeftOrRight) {
-      cardsMemorization.shiftTopCard()
+      shiftTopCard()
     } else {
-      cardsMemorization.memorizeTopCard()
+      memorizeTopCard()
     }
     card.memorizingStatus = MemorizingStatus.Unknown
 
-    if (cardsMemorization.cards.length === 1) {
-      onCardPlaced(cardsMemorization.topCard)
-      cardsMemorization.topCard.showFrontSide()
+    if (cardsToShow.value.length === 1) {
+      onCardPlaced(topCard.value)
+      topCard.value.showFrontSide()
     }
   }, 250)
 }
-
-async function onRevert() {
-  await cardsMemorization.revert()
-}
 </script>

src/app/decks/inbox/components/cards/InboxCard.vue

@@ -74,8 +74,8 @@ const appearance = useAppearanceStore()
 const { colorfulCards } = toRefs(appearance)
 const style = computed(() => {
   return colorfulCards.value
-    ? "side-color-" + (1+(hashString(props.card.verseNumber + props.card.type.toString()) % 8)).toString()
-    : "side-color-0"
+    ? 'side-color-' + (1+(hashString(props.card.verseNumber + props.card.type.toString()) % 8)).toString()
+    : 'side-color-0'
   })
 </script>
 

src/app/decks/inbox/composables/useInboxDeck.ts

@@ -0,0 +1,51 @@
+import { Application, InboxCardMemorized, UpdateVerseStatus } from '@akdasa-studios/shlokas-core'
+import { useArrayFilter, useArrayFind } from '@vueuse/core'
+import { computed } from 'vue'
+import { InboxVerseCardViewModel, useInboxDeckStore } from '@/app/decks/inbox'
+import { useToast } from '@/app/composables'
+
+
+export function useInboxDeck(app: Application) {
+  const inboxDeckStore     = useInboxDeckStore()
+  const cardMemorizedToast = useToast()
+  const cardsToShow = useArrayFilter(inboxDeckStore.cards, x => x.index < 3)
+  const topCard     = useArrayFind(inboxDeckStore.cards, x => x.index === 0)
+  const isEmpty     = computed(() => inboxDeckStore.cards.length === 0)
+
+  /**
+   * Shifts the top card to the bottom of the deck.
+   */
+  function shiftTopCard() {
+    inboxDeckStore.shiftTopCard()
+  }
+
+  /**
+   * Removes the top card from the deck and marks it as memorized.
+   */
+  async function memorizeTopCard() {
+    const cardViewModel = inboxDeckStore.removeTopCard() as InboxVerseCardViewModel
+    if (cardViewModel) {
+      const inboxCard = cardViewModel.card
+      await app.processor.execute(new InboxCardMemorized(inboxCard))
+      await app.processor.execute(new UpdateVerseStatus(inboxCard.verseId))
+      cardMemorizedToast.open()
+    }
+  }
+
+  /**
+   * Reverts the last action.
+   */
+  async function revert() {
+    await app.processor.revert()
+  }
+
+  return {
+    cardsToShow, isEmpty,
+    cardMemorizedToast,
+    shiftTopCard,
+    memorizeTopCard,
+    revert,
+    topCard,
+    // addCardsToDeck
+  }
+}