feat: add to back previous statement (cuixueshe#425)

* feat: addPreviousButton * fix: VariableValue * refactor: delete message * test: add test case for previous --------- Co-authored-by: cuixiaorui <[email protected]>
Torstentjh · Mar 29, 2024 · ff902d2 · ff902d2
1 parent bfd82e7
commit ff902d2
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 1 deletion.
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
@@ -27,6 +27,15 @@
       </button>
       <span class="ml-2">下一题</span>
     </div>
+    <div class="w-[210px] mb-4">
+      <button
+        class="tip-btn mr-1"
+        @click="backPreviousQuestion"
+      >
+        ⌃ {{ shortcutKeys.previous }}
+      </button>
+      <span class="ml-2">上一题</span>
+    </div>
     <div class="w-[210px]">
       <button class="tip-btn">Space</button>
       <span class="ml-2">{{ spaceTipText }} </span>
@@ -48,6 +57,9 @@ const { shortcutKeys } = useShortcutKeyMode();
 const { playSound } = usePlaySound(shortcutKeys.value.sound);
 const { toggleGameMode } = useShowAnswer(shortcutKeys.value.answer);
 const { goToNextQuestion } = useSkipThisQuestion(shortcutKeys.value.skip);
+const { backPreviousQuestion } = usePreviosQuestion(
+  shortcutKeys.value.previous
+);
 const { showQuestion } = useGameMode();
 const { showSummary } = useSummary();
 const courseStore = useCourseStore();
@@ -167,6 +179,27 @@ function useSkipThisQuestion(key: string) {
     goToNextQuestion,
   };
 }
+function usePreviosQuestion(key: string) {
+  function backPreviousQuestion() {
+    courseStore.toPreviousStatement();
+    showQuestion();
+  }
+  function handleShortcut() {
+    onMounted(() => {
+      registerShortcut(key, backPreviousQuestion);
+    });
+
+    onUnmounted(() => {
+      cancelShortcut(key, backPreviousQuestion);
+    });
+  }
+
+  handleShortcut();
+
+  return {
+    backPreviousQuestion,
+  };
+}
 </script>
 
 <style scoped>

diff --git a/apps/client/components/user/Setting.vue b/apps/client/components/user/Setting.vue
@@ -47,6 +47,18 @@
               </button>
             </td>
           </tr>
+          <tr class="hover">
+            <td class="label-text">返回上个问题</td>
+            <td class="text-center">{{ shortcutKeys.previous }}</td>
+            <td class="text-center">
+              <button
+                class="btn btn-sm btn-outline btn-secondary"
+                @click="handleEdit('previous')"
+              >
+                编辑
+              </button>
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>

diff --git a/apps/client/composables/user/shortcutKey.ts b/apps/client/composables/user/shortcutKey.ts
@@ -5,6 +5,7 @@ export const DEFAULT_SHORTCUT_KEYS = {
   sound: "Ctrl+'",
   answer: "Ctrl+;",
   skip: "Ctrl+.",
+  previous: "Ctrl+,",
 };
 export const KEYBOARD = {
   ESC: "Esc",
@@ -56,7 +57,7 @@ export function useShortcutKeyMode() {
   function setShortcutKeys() {
     const localKeys = localStorage.getItem(SHORTCUT_KEYS);
     if (localKeys) {
-      shortcutKeys.value = {...shortcutKeys.value ,...JSON.parse(localKeys)};
+      shortcutKeys.value = { ...shortcutKeys.value, ...JSON.parse(localKeys) };
     } else {
       localStorage.setItem(SHORTCUT_KEYS, JSON.stringify(shortcutKeys.value));
     }

diff --git a/apps/client/composables/user/tests/shortcutKey.spec.ts b/apps/client/composables/user/tests/shortcutKey.spec.ts
@@ -25,6 +25,7 @@ describe("user defined shortcut key", () => {
     it("should be equal to cache data if localStorage has cache", () => {
       const storeShortcutKeys = {
         sound: "Ctrl+s",
+        previous: "Ctrl+,",
         answer: "Ctrl+8",
         skip: "Ctrl+.",
       };

diff --git a/apps/client/store/course.ts b/apps/client/store/course.ts
@@ -57,6 +57,12 @@ export const useCourseStore = defineStore("course", () => {
   function toSpecificStatement(index: number) {
     statementIndex.value = index;
   }
+  function toPreviousStatement() {
+    const prevIndex = statementIndex.value - 1;
+    statementIndex.value = prevIndex >= 0 ? prevIndex : 0;
+
+    return statementIndex.value;
+  }
 
   function isAllDone() {
     // NOTE: 避免出现异常导致 statementIndex 越界无法完成当前课程的情况，只要大于等于当前题目长度就算完成啦
@@ -117,5 +123,6 @@ export const useCourseStore = defineStore("course", () => {
     cleanProgress,
     resetStatementIndex,
     toSpecificStatement,
+    toPreviousStatement,
   };
 });