Extract components

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@akdasa-studios/shlokas-core": "1.0.12",
-    "@akdasa-studios/shlokas-uikit": "0.0.11",
+    "@akdasa-studios/shlokas-uikit": "0.0.15",
     "@capacitor/app": "^4.1.1",
     "@capacitor/assets": "^2.0.4",
     "@capacitor/core": "4.6.3",

src/app/decks/Card.scss

@@ -20,7 +20,7 @@ $colors: (
 
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 8px;
   font-size: 25px;
   text-align: center;
 
@@ -79,4 +79,6 @@ $colors: (
       border-bottom-color: invert($darken-color);
     }
   }
-}
+}
+
+.padding { padding: 10px }

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

@@ -33,7 +33,7 @@
       </CardsDeck>
 
       <InboxDeckEmpty
-        v-else
+        v-show="isEmpty"
         data-testid="inboxEmpty"
       />
 

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

@@ -1,44 +1,39 @@
 <template>
   <FlipCard
     :data-testid="testId(card.verseNumber, 'card', card.type)"
-    :data-index="card.index"
-    :flipped="props.card.flipped || false"
-    @flip="props.card.flip()"
+    :data-index="index"
+    :flipped="flipped"
+    :side-class="'side ' + style"
+    card-class="padding"
+    :show-overlay="showOverlay"
+    @click="props.card.flip()"
   >
     <template #overlay>
-      <CardSide
-        v-if="card.memorizingStatus !== MemorizingStatus.Unknown"
-        :class="style"
-      >
-        <InboxCardSwipeOverlay
-          :memorizing-status="card.memorizingStatus"
-        />
-      </CardSide>
+      <InboxCardSwipeOverlay
+        class="overlay"
+        :memorizing-status="memorizingStatus"
+      />
     </template>
 
     <template #front>
-      <CardSide :class="style">
-        <InboxCardVerseTextSide
-          v-if="card.type === InboxCardType.Text"
-          :verse-number="card.verseNumber"
-          :lines="card.text"
-          :uri="card.textImageUri"
-        />
+      <InboxCardVerseTextSide
+        v-if="card.type === InboxCardType.Text"
+        :verse-number="card.verseNumber"
+        :lines="card.text"
+        :uri="card.textImageUri"
+      />
 
-        <InboxCardTranslationSide
-          v-if="card.type === InboxCardType.Translation"
-          :verse-number="card.verseNumber"
-          :translation="card.translation"
-        />
-      </CardSide>
+      <InboxCardTranslationSide
+        v-if="card.type === InboxCardType.Translation"
+        :verse-number="card.verseNumber"
+        :translation="card.translation"
+      />
     </template>
 
     <template #back>
-      <CardSide :class="style">
-        <InboxCardSynonymsSide
-          :words="card.synonyms"
-        />
-      </CardSide>
+      <InboxCardSynonymsSide
+        :words="card.synonyms"
+      />
     </template>
   </FlipCard>
 </template>
@@ -47,15 +42,14 @@
 <script lang="ts" setup>
 import { InboxCardType } from '@akdasa-studios/shlokas-core'
 import { computed, defineProps, toRefs } from 'vue'
-import { FlipCard, CardSide } from '@/app/decks/shared'
+import { FlipCard } from '@akdasa-studios/shlokas-uikit'
 import {
   InboxCardSwipeOverlay, InboxCardSynonymsSide,
   InboxCardTranslationSide, InboxCardVerseTextSide,
   InboxVerseCardViewModel, MemorizingStatus
 } from '@/app/decks/inbox'
 import { testId } from '@/app/TestId'
 import { useAppearanceStore } from '@/app/settings'
-import { hashString } from '@/app/utils/hashString'
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */
@@ -64,21 +58,20 @@ import { hashString } from '@/app/utils/hashString'
 const props = defineProps<{
   card: InboxVerseCardViewModel
 }>()
-const { card } = toRefs(props)
-
 
 /* -------------------------------------------------------------------------- */
-/*                                  Behaviour                                 */
+/*                                    State                                   */
 /* -------------------------------------------------------------------------- */
 
+const { card } = toRefs(props)
+const { flipped, index, memorizingStatus } = toRefs(card.value)
+const showOverlay = computed(() => memorizingStatus.value !== MemorizingStatus.Unknown)
+
+
 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'
-  })
+const style = computed(() => { return colorfulCards.value ? props.card.color : 'side-color-0' })
 </script>
 
 
-<style src="@/app/decks/Card.scss" lang="scss" scoped />
+<style src="@/app/decks/Card.scss" lang="scss" />

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

@@ -24,11 +24,3 @@ const props = defineProps<{
 const isFinished = computed(() => props.memorizingStatus === MemorizingStatus.Memorized)
 </script>
 
-
-<style scoped>
-.invisible { opacity: 0; }
-.transition { transition: .25s; }
-</style>
-
-
-<style src="@/app/decks/Card.scss" lang="scss" scoped />

src/app/decks/inbox/viewModels/InboxVerseCardViewModel.ts

@@ -1,5 +1,6 @@
 import { InboxCard, Verse } from '@akdasa-studios/shlokas-core'
 import { VerseCardViewModel } from '@/app/decks/shared'
+import { hashString } from '@/app/utils/hashString'
 
 export enum MemorizingStatus {
   Unknown,
@@ -20,4 +21,6 @@ export class InboxVerseCardViewModel extends VerseCardViewModel {
   get id()      { return this.card.id.value }
   get type()    { return this.card.type }
   get addedAt() { return this.card.addedAt }
+
+  get color()   { return 'side-color-' + (1+(hashString(this.verseNumber + this.type.toString()) % 8)) }
 }

src/app/decks/review/components/ReviewDeckPage.vue

@@ -44,7 +44,7 @@
 
       <!-- Inbox deck is empty -->
       <ReviewDeckEmpty
-        v-if="isEmpty"
+        v-show="isEmpty"
         data-testid="reviewEmpty"
       />
     </ion-content>

src/app/decks/review/components/cards/ReviewCard.vue

@@ -3,46 +3,38 @@
     :data-testid="testId(props.card.verseNumber, 'card', props.card.type)"
     :data-index="props.card.index"
     :flipped="props.card.flipped"
-    @flip="props.card.flip()"
+    :side-class="'side ' + style"
+    card-class="padding"
+    :show-overlay="props.card.grade !== undefined"
+    @click="props.card.flip()"
   >
     <template #overlay>
       <ReviewCardSwipeOverlay
         :grade="props.card.grade"
         :interval="nextIntervals[props.card.grade || 0]"
         :class="style"
-        class="side"
       />
     </template>
 
     <template #front>
-      <CardSide
-        class="side"
-        :class="style"
-      >
-        <div class="question">
-          {{ getQuestion(type) }}
-        </div>
-        <component
-          :is="getSideComponent(type, true)"
-          :verse-number="verseNumber"
-          :lines="text"
-          :translation="translation"
-        />
-      </CardSide>
+      <div class="question">
+        {{ getQuestion(type) }}
+      </div>
+      <component
+        :is="getSideComponent(type, true)"
+        :verse-number="verseNumber"
+        :lines="text"
+        :translation="translation"
+      />
     </template>
 
     <template #back>
-      <CardSide
-        class="side"
-        :class="style"
-      >
-        <component
-          :is="getSideComponent(type, false)"
-          :verse-number="verseNumber"
-          :lines="text"
-          :translation="translation"
-        />
-      </CardSide>
+      <component
+        :is="getSideComponent(type, false)"
+        :verse-number="verseNumber"
+        :lines="text"
+        :translation="translation"
+      />
     </template>
   </FlipCard>
 </template>
@@ -51,11 +43,11 @@
 <script lang="ts" setup>
 import { computed, defineProps, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { FlipCard } from '@akdasa-studios/shlokas-uikit'
 import {
   ReviewCardSwipeOverlay, ReviewCardTextSide, ReviewCardTranslationSide,
   ReviewCardVerseNumberSide, ReviewVerseCardViewModel
 } from '@/app/decks/review'
-import { CardSide, FlipCard } from '@/app/decks/shared'
 import { useAppearanceStore } from '@/app/settings'
 import { testId } from '@/app/TestId'
 import { hashString } from '@/app/utils/hashString'
@@ -107,5 +99,5 @@ function getQuestion(cardType: string) {
 </script>
 
 
-<style src="@/app/decks/Card.scss" lang="scss" scoped />
+<style src="@/app/decks/Card.scss" lang="scss" />
 

src/app/decks/review/components/cards/ReviewCardSwipeOverlay.vue

@@ -1,10 +1,8 @@
 <template>
   <div
     class="big-text transition"
-    :class="{'invisible':!isVisible}"
   >
     <div
-      v-if="props.grade !== undefined"
       class="grade"
     >
       {{ t("cards.grade." + reviewGradeToName) }}
@@ -26,15 +24,13 @@ const props = defineProps<{
   interval: number
 }>()
 const { t } = useI18n()
-const isVisible = computed(() => props.grade !== undefined)
 const reviewGradeToName = computed(() =>
   props.grade !== undefined ? ReviewGrade[props.grade].toLowerCase() : ''
 )
 </script>
 
 
 <style scoped>
-.invisible { opacity: 0; }
 .grade { text-transform: uppercase; }
 
 .interval {
@@ -44,5 +40,3 @@ const reviewGradeToName = computed(() =>
   color: var(--ion-color-medium-shade);
 }
 </style>
-
-<style src="@/app/decks/Card.scss" lang="scss" scoped />