Adding how long it took to do cards

web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue

@@ -15,14 +15,32 @@
       type="card"
     />
     <div v-else-if="isEmpty(flashcards)"></div>
+    <div
+      v-else-if="isEmpty(queue)"
+      class="review-layout mt-10"
+    >
+      <v-icon
+        size="64"
+        color="success"
+      >
+        mdi-check-circle-outline
+      </v-icon>
+      <div class="text-h5">Done!</div>
+      <div class="text-medium-emphasis">
+        {{ numberOfCorrect }} correct &bull; {{ numberOfIncorrect }} incorrect
+      </div>
+      <div class="text-medium-emphasis text-caption">
+        {{ elapsedTime }}
+      </div>
+    </div>
     <div
       v-else
       class="review-layout"
     >
       <FlashcardReviewCard
-        :key="currentIndex"
+        :key="queue[currentIndex].id"
         class="mt-5"
-        :flashcard="flashcards[currentIndex]"
+        :flashcard="queue[currentIndex]"
       />
       <div class="review-nav">
         <v-btn
@@ -37,22 +55,24 @@
           color="error"
           variant="tonal"
           prepend-icon="mdi-close"
+          @click="markCurrentCardIncorrect"
         >
-          0
+          {{ numberOfIncorrect }}
         </v-btn>
         <v-btn
           class="ml-3"
           color="success"
           variant="tonal"
           append-icon="mdi-check"
+          @click="markCurrentCardCorrect"
         >
-          0
+          {{ numberOfCorrect }}
         </v-btn>
         <v-btn
           icon="mdi-chevron-right"
           variant="text"
           size="x-large"
-          :disabled="currentIndex === flashcards.length - 1"
+          :disabled="currentIndex === queue.length - 1"
           @click="next"
         />
       </div>
@@ -62,17 +82,16 @@
 
 <script setup lang="ts">
 import { isEmpty, isNil } from "lodash"
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 
 import useFlashcardDeck from "@/use/use-flashcard-deck"
-import useFlashcards, { FlashcardQueryOptions } from "@/use/use-flashcards"
+import useFlashcards, { type Flashcard, FlashcardQueryOptions } from "@/use/use-flashcards"
 
 import FlashcardReviewCard from "@/components/flashcards/FlashcardReviewCard.vue"
 
 const props = defineProps<{ flashcardDeckId: string }>()
 
 const flashcardDeckIdAsNumber = computed(() => parseInt(props.flashcardDeckId))
-
 const { flashcardDeck } = useFlashcardDeck(flashcardDeckIdAsNumber)
 
 const flashcardsQueryOptions = computed<FlashcardQueryOptions>(() => {
@@ -88,9 +107,37 @@ const { flashcards, isLoading } = useFlashcards(flashcardsQueryOptions, {
 })
 
 const currentIndex = ref(0)
+const queue = ref<Flashcard[]>([])
+const results = ref(new Map<number, "correct" | "incorrect">())
+const startTime = ref<number | null>(null)
+const endTime = ref<number | null>(null)
+
+const elapsedTime = computed(() => {
+  if (startTime.value === null || endTime.value === null) return ""
+  const seconds = Math.floor((endTime.value - startTime.value) / 1000)
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return m > 0 ? `${m}m ${s}s` : `${s}s`
+})
+
+watch(
+  flashcards,
+  (newFlashcards) => {
+    queue.value = [...newFlashcards]
+    if (newFlashcards.length > 0) startTime.value = Date.now()
+  },
+  { immediate: true }
+)
+
+const numberOfCorrect = computed(
+  () => [...results.value.values()].filter((r) => r === "correct").length
+)
+const numberOfIncorrect = computed(
+  () => [...results.value.values()].filter((r) => r === "incorrect").length
+)
 
 function next() {
-  if (currentIndex.value < flashcards.value.length - 1) {
+  if (currentIndex.value < queue.value.length - 1) {
     currentIndex.value++
   }
 }
@@ -100,6 +147,25 @@ function prev() {
     currentIndex.value--
   }
 }
+
+function markCurrentCard(result: "correct" | "incorrect") {
+  const card = queue.value[currentIndex.value]
+  results.value = new Map(results.value).set(card.id, result)
+  queue.value.splice(currentIndex.value, 1)
+  if (queue.value.length === 0) {
+    endTime.value = Date.now()
+  } else if (currentIndex.value >= queue.value.length) {
+    currentIndex.value--
+  }
+}
+
+function markCurrentCardCorrect() {
+  markCurrentCard("correct")
+}
+
+function markCurrentCardIncorrect() {
+  markCurrentCard("incorrect")
+}
 </script>
 
 <style scoped>