Merge pull request #35 from Nauxscript/feature/progress-limit

Feature/progress limit

apps/client/components/main/AuthRequired.vue

@@ -0,0 +1,19 @@
+<template>
+  <dialog className="modal" :open="authRequireModalState">
+    <div className="modal-box">
+      <h3 className="font-bold text-lg mb-4">✨</h3>
+      <p class="text-xl px-4">注册以进行下一课</p>
+      <div className="modal-action">
+        <button class="btn" @click="hideAuthRequireModal">取消</button>
+        <button class="btn" @click="navigateTo('/auth/signup')">去注册</button>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { useAuthRequire } from "~/composables/main/authRequire";
+
+const { authRequireModalState, hideAuthRequireModal } = useAuthRequire()
+
+</script>

apps/client/components/main/CourseProgress.vue

@@ -1,6 +1,8 @@
 <template>
-  <progress class="progress w-56 m-2" :value="currentSchedule" :max="courseStore.totalQuestionsCount"></progress>
-  <div class="text-center">({{ currentSchedule }} / {{ courseStore.totalQuestionsCount }})</div>
+  <div class="py-6">
+    <progress class="progress w-56 m-2" :value="currentSchedule" :max="courseStore.totalQuestionsCount"></progress>
+    <div class="text-center">({{ currentSchedule }} / {{ courseStore.totalQuestionsCount }})</div>
+  </div>
 </template>
 
 <script setup lang="ts">

apps/client/components/main/Game.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full flex flex-col justify-center items-center">
+  <div class="w-full flex-1 flex flex-col justify-center items-center pb-12">
     <div class="flex-1 mb-8">
       <template v-if="isQuestion()">
         <Question></Question>
@@ -8,11 +8,12 @@
         <Answer></Answer>
       </template>
     </div>
-    <div class="">
+    <div class="py-8">
       <CourseProgress></CourseProgress>
       <Tips></Tips>
     </div>
     <Summary></Summary>
+    <AuthRequired></AuthRequired>
   </div>
 </template>
 
@@ -22,6 +23,7 @@ import Answer from "./Answer.vue";
 import CourseProgress from "./CourseProgress.vue";
 import Summary from "./Summary.vue";
 import Tips from "./Tips.vue";
+import AuthRequired from './AuthRequired.vue';
 import { useGameMode } from "~/composables/main/game";
 
 const { isAnswer, isQuestion } = useGameMode();

apps/client/components/main/Summary.vue

@@ -32,46 +32,19 @@ import { useDailySentence, useSummary } from "~/composables/main/summary";
 import { useGameMode } from "~/composables/main/game";
 import { fetchUpdateProgress } from "~/api/userProgress";
 import confetti from 'canvas-confetti';
+import { useAuthRequire } from "~/composables/main/authRequire";
+import { useUserStore } from "~/store/user";
 
-const useConfetti = () => {
-  const confettiCanvasRef = ref<HTMLCanvasElement>()
-
-  const playConfetti = () => {
-    console.log('----- 1');
-    const myConfetti = confetti.create(confettiCanvasRef.value, {
-      resize: true,
-      useWorker: true
-    })
-
-    myConfetti({
-      particleCount: 300,
-      spread: 180,
-      origin: { y: -0.1 },
-      startVelocity: -35
-    })
-  }
-
-  return {
-    confettiCanvasRef,
-    playConfetti,
-  }
-}
-
-const { confettiCanvasRef, playConfetti } = useConfetti()
 const courseStore = useCourseStore();
 const { showModal, hideSummary } = useSummary();
 
-watch(showModal, (val) => {
-  val && setTimeout(() => {
-    playConfetti() 
-  }, 300);
-})
-
 const { handleDoAgain } = useDoAgain()
 const { handleGoToNextCourse } = useGoToNextCourse()
 
 const { zhSentence, enSentence } = useDailySentence()
 
+const { confettiCanvasRef } = useConfetti()
+
 function useDoAgain() {
   const { showQuestion } = useGameMode();
 
@@ -84,20 +57,54 @@ function useDoAgain() {
   return {
     handleDoAgain
   }
+}
+
+function useConfetti(){
+  const confettiCanvasRef = ref<HTMLCanvasElement>()
 
+  const playConfetti = () => {
+    const myConfetti = confetti.create(confettiCanvasRef.value, {
+      resize: true,
+      useWorker: true
+    })
+
+    myConfetti({
+      particleCount: 300,
+      spread: 180,
+      origin: { y: -0.1 },
+      startVelocity: -35
+    })
+  }
+
+  watch(showModal, (val) => {
+    val && setTimeout(() => {
+      playConfetti() 
+    }, 300);
+  })
+
+  return {
+    confettiCanvasRef,
+  }
 }
 
 function useGoToNextCourse() {
   const { showQuestion } = useGameMode();
   const router = useRouter();
+  const { showAuthRequireModal } = useAuthRequire()
+
+  const userStore = useUserStore() 
 
   async function handleGoToNextCourse() {
+    if (!userStore.user) {
+      hideSummary()
+      showAuthRequireModal()
+      return
+    }
+
     await courseStore.goToNextCourse(
       +router.currentRoute.value.params.id
     );
 
-    console.log(courseStore.currentCourse.id)
-
     if (!courseStore.currentCourse.id) {
       return
     }
@@ -115,8 +122,6 @@ function useGoToNextCourse() {
     handleGoToNextCourse
   };
 }
-
-
 </script>
 
 <style scoped></style>

apps/client/composables/main/authRequire.ts

@@ -0,0 +1,17 @@
+const authRequireModalState = ref()
+
+export function useAuthRequire() {
+  function showAuthRequireModal() {
+    authRequireModalState.value = true;
+  }
+
+  function hideAuthRequireModal() {
+    authRequireModalState.value = false;
+  }
+
+  return {
+    showAuthRequireModal,
+    hideAuthRequireModal,
+    authRequireModalState
+  }
+}

apps/client/composables/userProgress.ts

@@ -0,0 +1,33 @@
+import { fetchUpdateProgress, fetchUserProgress } from "~/api/userProgress"
+
+export const ACTIVE_COURSE_ID = 'activeCourseId'
+export function useUserProgress() {
+
+  const activeCourseId = ref(1)
+
+  const initing = ref(false)
+  const initProgress = async () => {
+    initing.value = true
+    const { courseId } = await fetchUserProgress()
+    activeCourseId.value = +courseId
+    updateProgressLocal(+courseId)
+    initing.value = false
+  }
+
+  const updateProgress = async (courseId: number) => {
+    const { courseId: updatedCourseId } = await fetchUpdateProgress({courseId}) 
+    updateProgressLocal(updatedCourseId)
+  }
+
+  const updateProgressLocal = async (courseId: number) => {
+    localStorage.setItem(ACTIVE_COURSE_ID, `${courseId}`)
+  }
+
+  return {
+    activeCourseId,
+    initing,
+    updateProgressLocal,
+    updateProgress,
+    initProgress
+  }
+}

apps/client/layouts/default.vue

@@ -2,7 +2,7 @@
   <div class="w-full h-full bg-white dark:bg-slate-900 transition-colors dark:text-slate-300 text-slate-600">
     <div class="flex flex-col min-h-100vh min-h-screen xl:w-[1200px] m-auto xl:px-2 px-24">
       <Navbar></Navbar>
-      <div class="flex-1">
+      <div class="flex-1 flex flex-col">
         <slot></slot>
       </div>
       <Footer></Footer>

apps/client/middleware/auth.ts

@@ -0,0 +1,8 @@
+import { useUserStore } from "~/store/user"
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  const userStore = useUserStore()
+  if (!userStore.user && +to.params.id !== 1) {
+    return navigateTo("/auth/login");
+  }
+})

apps/client/pages/Main/[id].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="relative flex-1 flex flex-col">
     <Game></Game>
     <Tool></Tool>
     <ProgressRank />
@@ -12,6 +12,10 @@ import Tool from '~/components/main/Tool.vue';
 import ProgressRank from '~/components/rank/ProgressRank.vue';
 import { useCourseStore } from "~/store/course";
 
+definePageMeta({
+  middleware: 'auth'
+})
+
 const route = useRoute();
 const coursesStore = useCourseStore();
 

apps/client/pages/index.vue

@@ -77,49 +77,15 @@
 </template>
 
 <script setup lang="ts">
-import { fetchUpdateProgress, fetchUserProgress } from "~/api/userProgress";
 import { useUserStore } from "~/store/user";
 import { registerShortcut, cancelShortcut } from "~/utils/keyboardShortcuts";
 
-
-const useProgress = () => {
-
-  const activeCourseId = ref(1)
-  const ACTIVE_COURSE_ID = 'activeCourseId'
-
-  const initing = ref(false)
-  const initProgress = async () => {
-    initing.value = true
-    const { courseId } = await fetchUserProgress()
-    activeCourseId.value = +courseId
-    updateProgressLocal(+courseId)
-    initing.value = false
-  }
-
-  const updateProgress = async (courseId: number) => {
-    const { courseId: updatedCourseId } = await fetchUpdateProgress({courseId}) 
-    updateProgressLocal(updatedCourseId)
-  }
-
-  const updateProgressLocal = async (courseId: number) => {
-    localStorage.setItem(ACTIVE_COURSE_ID, `${courseId}`)
-  }
-  
-  return {
-    activeCourseId,
-    initing,
-    updateProgressLocal,
-    updateProgress,
-    initProgress
-  }
-}
-
 const { handleKeydown, initing } = useShortcutToGame();
 
 function useShortcutToGame() {
   const router = useRouter();
   const userStore = useUserStore();
-  const { activeCourseId, initing, initProgress } = useProgress()
+  const { activeCourseId, initing, initProgress } = useUserProgress()
 
   function handleKeydown() {
     if (userStore.user) {