refactor: extract core code

cuixueshe · Jan 25, 2024 · dc0e280 · dc0e280
1 parent 7ce4079
commit dc0e280
Show file tree

Hide file tree

Showing 19 changed files with 157 additions and 178 deletions.
diff --git a/apps/client/api/courses.ts b/apps/client/api/courses.ts
@@ -1,5 +1,4 @@
-import { type Course } from "~/store/course-new";
-import { useFetchPlus } from "~/composables/useFetch";
+import { type Course } from "~/store/course";
 import { http } from "./http";
 
 export async function fetchCourse(courseId: number) {
@@ -8,9 +7,4 @@ export async function fetchCourse(courseId: number) {
 
 export async function fetchNextCourse(courseId: number) {
   return await http.get<Course, Course>(`/courses/${courseId}/next`);
-  // const { data: courses } = await useFetchPlus<Course>(
-  //   `/courses/${courseId}/next`
-  // );
-
-  // return courses.value;
 }
diff --git a/apps/client/components/Footer/index.vue → apps/client/components/Footer.vue b/apps/client/components/Footer/index.vue → apps/client/components/Footer.vue
diff --git a/apps/client/components/Navbar/index.vue → apps/client/components/Navbar.vue b/apps/client/components/Navbar/index.vue → apps/client/components/Navbar.vue
@@ -1,3 +1,45 @@
+<template>
+  <nav class="h-20 flex items-center justify-between">
+    <NuxtLink to="/">
+      <div class="logo flex items-center">
+        <img width="48" height="48" class="rounded-md overflow-hidden mr-6" src="/logo.png" alt="earth-worm-logo">
+        <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
+      </div>
+    </NuxtLink>
+    <div class="flex items-center">
+      <button v-if="!userInfo && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2"
+        @click="handleLogin">
+        Log in
+      </button>
+      <button v-else-if="!userInfo && route.name !== 'Auth-Signup'" class="btn btn-sm btn-ghost mx-1 h-8 px-2"
+        @click="handleSignup">
+        Sign up
+      </button>
+      <div v-else class="dropdown dropdown-end">
+        <button tabindex="0" class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+            class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round"
+              d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+          </svg>
+        </button>
+        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
+          <li><a>User info</a></li>
+          <li @click="handleLogout"><a>Log out</a></li>
+          <!-- <li><a>Item 2</a></li> -->
+        </ul>
+      </div>
+      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+          class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round"
+            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+        </svg>
+      </button>
+    </div>
+  </nav>
+</template>
+
 <script setup lang="ts">
 import type { UserInfo } from '~/api/auth';
 const route = useRoute()
@@ -6,7 +48,7 @@ const userInfo = useState<null | UserInfo>('userInfo', () => JSON.parse(localSto
 
 const toggleDarkMode = () => {
   if (document.documentElement.classList.contains('dark')) {
-    document.documentElement.setAttribute("data-theme", "light"); 
+    document.documentElement.setAttribute("data-theme", "light");
   } else {
     document.documentElement.setAttribute("data-theme", "dark");
   }
@@ -18,7 +60,7 @@ const setDarkMode = (state = false) => {
     document.documentElement.setAttribute("data-theme", "dark");
     document.documentElement.classList.add('dark')
   } else {
-    document.documentElement.setAttribute("data-theme", "light");       
+    document.documentElement.setAttribute("data-theme", "light");
     document.documentElement.classList.remove('dark')
   }
 }
@@ -41,40 +83,4 @@ onMounted(() => {
   setDarkMode(state)
 })
 
-</script>
-
-<template>
-  <nav class="h-20 flex items-center justify-between">
-    <NuxtLink to="/">
-      <div class="logo flex items-center">
-        <img width="48" height="48" class="rounded-md overflow-hidden mr-6" src="/logo.png" alt="earth-worm-logo">
-        <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
-      </div>
-    </NuxtLink>
-    <div class="flex items-center">
-      <button v-if="!userInfo && route.name !== 'Auth-Login'" class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleLogin">
-        Log in
-      </button> 
-      <button v-else-if="!userInfo && route.name !== 'Auth-Signup' " class="btn btn-sm btn-ghost mx-1 h-8 px-2" @click="handleSignup">
-        Sign up
-      </button>
-      <div v-else class="dropdown dropdown-end">
-        <button tabindex="0" class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
-          </svg>
-        </button>
-        <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-32">
-          <li><a>User info</a></li>
-          <li @click="handleLogout"><a>Log out</a></li>
-          <!-- <li><a>Item 2</a></li> -->
-        </ul>
-      </div>
-      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-        </svg>
-      </button>
-    </div>
-  </nav>
-</template>
+</script>
diff --git a/...lient/components/CourseItemCard/index.vue → .../client/components/courses/CourseCard.vue b/...lient/components/CourseItemCard/index.vue → .../client/components/courses/CourseCard.vue
@@ -1,13 +1,13 @@
-<script setup lang="ts">
-defineProps<{
-  title: string
-}>()
-</script>
-
 <template>
   <div class="w-[330px] h-[220px] flex flex-col cursor-pointer border border-slate-400 rounded-xl px-6 py-4 hover:shadow-lg hover:shadow-purple-400/50 hover:border-purple-400 transition-all mb-4">
     <p class="text-2xl leading-loose font-bold">{{ title }}</p>
     <div class="mb-4"></div>
     <div>this is the course's description</div>
   </div>
-</template>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
diff --git a/apps/client/components/main/Answer.vue b/apps/client/components/main/Answer.vue
@@ -2,26 +2,19 @@
   <div class="text-center mb-20 mt-10">
     <div class="text-5xl mb-3 text-fuchsia-500 dark:text-gray-50">
       {{ courseStore.currentStatement?.english }}
-      <svg
-        class="w-7 h-7 inline-block ml-1 cursor-pointer"
-        viewBox="0 0 1024 1024"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        @click="handlePlaySound"
-      >
+      <svg class="w-7 h-7 inline-block ml-1 cursor-pointer" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" @click="handlePlaySound">
         <path
           d="M342.4 384H128v256h214.4L576 826.8V197.2L342.4 384zM64 320h256L640 64v896L320 704H64V320z m640 256h256v-64H704v64z m16.8 159.5l181 181 45.3-45.3-181-181-45.3 45.3z m33.9-343.9l181-181-45.3-45.3-181 181 45.3 45.3z"
-          fill="#666666"
-        ></path>
+          fill="#666666"></path>
       </svg>
     </div>
     <div class="text-2xl text-slate-600">
       {{ courseStore.currentStatement?.soundmark }}
     </div>
     <button
       class="border-solid border-2 border-slate-400 bg-slate-100 dark:bg-fuchsia-500 rounded-lg mt-8 mb-11 indent-1 h-10 text-2xl pl-10 pr-10 hover:bg-slate-200"
-      @click="goToNextQuestion"
-    >
+      @click="goToNextQuestion">
       next
     </button>
   </div>
@@ -30,8 +23,9 @@
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
 import { registerShortcut, cancelShortcut } from "~/utils/keyboardShortcuts";
-import { useMode } from "./game";
-import { useSummary } from "./summary";
+import { useGameMode } from "~/composables/main/game";
+import { useSummary } from "~/composables/main/summary";
+import { useCurrentStatementEnglishSound } from '~/composables/main/englishSound';
 
 const courseStore = useCourseStore();
 registerShortcutKeyForNextQuestion();
@@ -67,7 +61,7 @@ function registerShortcutKeyForNextQuestion() {
 }
 
 function goToNextQuestion() {
-  const { showQuestion } = useMode();
+  const { showQuestion } = useGameMode();
   const { showSummary } = useSummary();
 
   if (courseStore.isAllDone()) {
@@ -78,5 +72,4 @@ function goToNextQuestion() {
   courseStore.toNextStatement();
   showQuestion();
 }
-</script>
-~/store/course-new
+</script>
diff --git a/apps/client/components/main/CourseProgress.vue b/apps/client/components/main/CourseProgress.vue
@@ -1,23 +1,15 @@
 <template>
-  <progress class="progress w-56 m-2" :value="currentSchedule" :max="max"></progress>
-  <div class="text-center">({{ currentSchedule }} / {{ max }})</div>
+  <progress class="progress w-56 m-2" :value="currentSchedule" :max="courseStore.totalQuestionsCount"></progress>
+  <div class="text-center">({{ currentSchedule }} / {{ courseStore.totalQuestionsCount }})</div>
 </template>
 
 <script setup lang="ts">
-import { useCourseStore  } from "~/store/course";
+import { useCourseStore } from "~/store/course";
 
 const courseStore = useCourseStore();
 
-
 const currentSchedule = computed(() => {
   return courseStore.statementIndex + 1;
 });
 
-const max = computed(() => {
-  return courseStore.currentCourse?.statements.length || 0;
-});
-
 </script>
-
-<style scoped></style>
-~/store/course~/store/course-new
diff --git a/apps/client/components/main/Game.vue b/apps/client/components/main/Game.vue
@@ -22,9 +22,9 @@ import Answer from "./Answer.vue";
 import CourseProgress from "./CourseProgress.vue";
 import Summary from "./Summary.vue";
 import Tips from "./Tips.vue";
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 
-const { mode } = useMode();
+const { mode } = useGameMode();
 </script>
 
-<style scoped></style>
+<style scoped></style>
diff --git a/apps/client/components/main/Question.vue b/apps/client/components/main/Question.vue
@@ -36,7 +36,7 @@
 
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 
 const courseStore = useCourseStore();
 const { userInputWords, activeInputIndex, inputValue } = useInput();
@@ -62,7 +62,7 @@ function useInput() {
 }
 
 function registerShortcutKeyForInputEl() {
-  const { showAnswer } = useMode();
+  const { showAnswer } = useGameMode();
 
   function handleKeyup(e: KeyboardEvent) {
     if (e.code === "Enter") {
@@ -139,5 +139,4 @@ function useFocus() {
 .active {
   border-bottom: 3px solid #1e80ff !important;
 }
-</style>
-~/store/course-new~/store/course
+</style>
diff --git a/apps/client/components/main/Summary.vue b/apps/client/components/main/Summary.vue
@@ -1,19 +1,13 @@
 <template>
   <div>
     <n-modal v-model:show="showModal" transform-origin="center">
-      <n-card
-        style="width: 800px; height: 400px"
-        title="结算面板"
-        :bordered="false"
-        size="huge"
-        role="dialog"
-        aria-modal="true"
-      >
+      <n-card style="width: 800px; height: 400px" title="结算面板" :bordered="false" size="huge" role="dialog"
+        aria-modal="true">
         不错不错 又学到了那么多句子和单词 加油 坚持就是胜利:)
         <template #footer>
           <div class="flex">
             <n-button @click="handleDoAgain">再来一次</n-button>
-            <n-button @click="handleToNextCourse">开始下一课</n-button>
+            <n-button @click="handleGoToNextCourse">开始下一课</n-button>
           </div>
         </template>
       </n-card>
@@ -23,29 +17,52 @@
 
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
-import { useSummary } from "./summary";
-import { useMode } from "./game";
+import { useSummary } from "~/composables/main/summary";
+import { useGameMode } from "~/composables/main/game";
 
 const courseStore = useCourseStore();
-const { showQuestion } = useMode();
 const { showModal, hideSummary } = useSummary();
-const router = useRouter();
 
-function handleDoAgain() {
-  courseStore.doAgain();
-  hideSummary();
-  showQuestion();
+const { handleDoAgain } = useDoAgain()
+const { handleGoToNextCourse } = useGoToNextCourse()
+
+
+function useDoAgain() {
+  const { showQuestion } = useGameMode();
+
+  function handleDoAgain() {
+    courseStore.doAgain();
+    hideSummary();
+    showQuestion();
+  }
+
+  return {
+    handleDoAgain
+  }
+
 }
 
-async function handleToNextCourse() {
-  const course = await courseStore.toNextCourse(
-    +router.currentRoute.value.params.id
-  );
-  router.push(`/main/${course.value.id}`);
-  hideSummary();
-  showQuestion();
+function useGoToNextCourse() {
+  const { showQuestion } = useGameMode();
+  const router = useRouter();
+
+  async function handleGoToNextCourse() {
+    await courseStore.goToNextCourse(
+      +router.currentRoute.value.params.id
+    );
+
+    router.push(`/main/${courseStore.currentCourse?.id}`);
+    hideSummary();
+    showQuestion();
+  }
+
+
+  return {
+    handleGoToNextCourse
+  };
 }
+
+
 </script>
 
-<style scoped></style>
-~/store/course~/store/course-new
+<style scoped></style>
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
@@ -12,8 +12,9 @@
 </template>
 
 <script setup lang="ts">
-import { useMode } from "./game";
+import { useGameMode } from "~/composables/main/game";
 import { registerShortcut, cancelShortcut } from "~/utils/keyboardShortcuts";
+import { useCurrentStatementEnglishSound } from '~/composables/main/englishSound';
 
 
 const { handlePlaySound } = usePlaySound()
@@ -41,7 +42,7 @@ function usePlaySound() {
 }
 
 function useShowAnswer() {
-  const { showAnswer } = useMode();
+  const { showAnswer } = useGameMode();
 
   onMounted(() => {
     registerShortcut("ctrl+n", handleShowAnswer);
@@ -60,4 +61,4 @@ function useShowAnswer() {
   }
 
 }
-</script>
+</script>