From eb45842314d2989bc0bb4dea5c9924480cc3ab42 Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Sat, 10 Aug 2024 11:39:34 +0800
Subject: [PATCH] feat: add mastered button on mobile

---
 .../main/QuestionInput/QuestionInput.vue      | 27 +++++++++++
 apps/client/components/main/Tips.vue          | 44 +++---------------
 apps/client/composables/main/useMastered.ts   | 46 +++++++++++++++++++
 3 files changed, 80 insertions(+), 37 deletions(-)
 create mode 100644 apps/client/composables/main/useMastered.ts

diff --git a/apps/client/components/main/QuestionInput/QuestionInput.vue b/apps/client/components/main/QuestionInput/QuestionInput.vue
index 0207ca05..eab0c160 100644
--- a/apps/client/components/main/QuestionInput/QuestionInput.vue
+++ b/apps/client/components/main/QuestionInput/QuestionInput.vue
@@ -57,6 +57,12 @@
           播放声音
         </button>
       </div>
+      <button
+        class="btn btn-outline btn-sm"
+        @click="handleMastered"
+      >
+        掌握
+      </button>
     </div>
   </div>
 </template>
@@ -64,11 +70,14 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from "vue";
 
+import Message from "~/components/main/Message/useMessage";
 import { courseTimer } from "~/composables/courses/courseTimer";
 import { useAnswerTip } from "~/composables/main/answerTip";
 import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
 import { isWord } from "~/composables/main/question";
+import { useMastered } from "~/composables/main/useMastered";
 import { useShowWordsWidth } from "~/composables/user/words";
+import { isAuthenticated } from "~/services/auth";
 import { useCourseStore } from "~/store/course";
 import { isWindows } from "~/utils/platform";
 import { getWordWidth, useQuestionInput } from "./questionInputHelper";
@@ -89,6 +98,7 @@ const {
 const { isShowWordsWidth } = useShowWordsWidth();
 const { toggleAnswerTip, isAnswerTip } = useAnswerTip();
 const { resetCloseTip } = useAnswerError();
+const { handleMastered } = useMasteredShortcut();
 initializeQuestionInput();
 focusInputWhenWIndowFocus();
 
@@ -127,6 +137,23 @@ function focusInputWhenWIndowFocus() {
   });
 }
 
+function useMasteredShortcut() {
+  const { markStatementAsMastered } = useMastered();
+
+  function handleMastered() {
+    if (!isAuthenticated()) {
+      Message.warning("需要登录哦");
+      return;
+    }
+
+    markStatementAsMastered();
+  }
+
+  return {
+    handleMastered,
+  };
+}
+
 const { playSound } = useCurrentStatementEnglishSound();
 function handlePlaySound(e: MouseEvent) {
   e.preventDefault();
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
index a2f4637a..07b3c524 100644
--- a/apps/client/components/main/Tips.vue
+++ b/apps/client/components/main/Tips.vue
@@ -30,10 +30,9 @@ import { useAnswerTip } from "~/composables/main/answerTip";
 import { useCurrentStatementEnglishSound } from "~/composables/main/englishSound";
 import { useGameMode } from "~/composables/main/game";
 import { useSummary } from "~/composables/main/summary";
+import { useMastered } from "~/composables/main/useMastered";
 import { useShortcutKeyMode } from "~/composables/user/shortcutKey";
 import { isAuthenticated } from "~/services/auth";
-import { useCourseStore } from "~/store/course";
-import { useMasteredElementsStore } from "~/store/masteredElements";
 import { cancelShortcut, parseShortcutKeys, registerShortcut } from "~/utils/keyboardShortcuts";
 import { useAnswer } from "./QuestionInput/useAnswer";
 import { useWrapperQuestionInput } from "./QuestionInput/useWrapperQuestionInput";
@@ -41,10 +40,10 @@ import { useWrapperQuestionInput } from "./QuestionInput/useWrapperQuestionInput
 const { toggleAnswerTip, isAnswerTip } = useAnswerTip();
 const { shortcutKeys } = useShortcutKeyMode();
 const { playSound } = usePlaySound(shortcutKeys.value.sound);
-const { handleMastered } = useMastered();
 const { goToNextQuestion } = useAnswer();
 const { showQuestion, isQuestion } = useGameMode();
 const { submitAnswer } = useWrapperQuestionInput();
+const { handleMastered } = useMasteredShortcut();
 useShowAnswer(shortcutKeys.value.answer);
 
 const keybindings = computed(() => {
@@ -90,7 +89,7 @@ const keybindings = computed(() => {
     },
     {
       keys: shortcutKeys.value.mastered,
-      text: "掌握啦",
+      text: "掌握",
       eventFn: handleMastered,
     },
   ];
@@ -106,45 +105,16 @@ const keybindings = computed(() => {
   return resultItems;
 });
 
-function useMastered() {
-  const { shortcutKeys } = useShortcutKeyMode();
-  const courseStore = useCourseStore();
-  const masteredElements = useMasteredElementsStore();
-  const { showQuestion } = useGameMode();
-  const { showSummary } = useSummary();
+function useMasteredShortcut() {
+  const { markStatementAsMastered } = useMastered();
 
-  const addLoading = ref(false);
-  async function handleMastered() {
+  function handleMastered() {
     if (!isAuthenticated()) {
       Message.warning("需要登录哦");
       return;
     }
 
-    // updateMarketedStatements 会影响 isLastStatement 返回的结果
-    // 所以我们提前调用 isLastStatement 来记录好值
-    if (addLoading.value) return;
-    const isLastStatement = courseStore.isLastStatement();
-    addLoading.value = true;
-    await masteredElements.addElement({
-      english: courseStore.currentStatement?.english!,
-    });
-    addLoading.value = false;
-
-    courseStore.updateMarketedStatements();
-
-    if (isLastStatement) {
-      showSummary();
-    } else {
-      // 看看消完之后 是否全部都没有了
-      // 这个是在 updatemarketedStatements 之后
-      // 处理的 case 比如只剩下2个 good ，那么消除一个 good 之后 那么列表就应该为0了
-      if (courseStore.isAllMastered()) {
-        showSummary();
-        return;
-      }
-      courseStore.toNextStatement();
-      showQuestion();
-    }
+    markStatementAsMastered();
   }
 
   onMounted(() => {
diff --git a/apps/client/composables/main/useMastered.ts b/apps/client/composables/main/useMastered.ts
new file mode 100644
index 00000000..e584bf11
--- /dev/null
+++ b/apps/client/composables/main/useMastered.ts
@@ -0,0 +1,46 @@
+import { ref } from "vue";
+
+import { useGameMode } from "~/composables/main/game";
+import { useSummary } from "~/composables/main/summary";
+import { useCourseStore } from "~/store/course";
+import { useMasteredElementsStore } from "~/store/masteredElements";
+
+export function useMastered() {
+  const courseStore = useCourseStore();
+  const masteredElements = useMasteredElementsStore();
+  const { showQuestion } = useGameMode();
+  const { showSummary } = useSummary();
+
+  const addLoading = ref(false);
+  async function markStatementAsMastered() {
+    // updateMarketedStatements 会影响 isLastStatement 返回的结果
+    // 所以我们提前调用 isLastStatement 来记录好值
+    if (addLoading.value) return;
+    const isLastStatement = courseStore.isLastStatement();
+    addLoading.value = true;
+    await masteredElements.addElement({
+      english: courseStore.currentStatement?.english!,
+    });
+    addLoading.value = false;
+
+    courseStore.updateMarketedStatements();
+
+    if (isLastStatement) {
+      showSummary();
+    } else {
+      // 看看消完之后 是否全部都没有了
+      // 这个是在 updatemarketedStatements 之后
+      // 处理的 case 比如只剩下2个 good ，那么消除一个 good 之后 那么列表就应该为0了
+      if (courseStore.isAllMastered()) {
+        showSummary();
+        return;
+      }
+      courseStore.toNextStatement();
+      showQuestion();
+    }
+  }
+
+  return {
+    markStatementAsMastered,
+  };
+}