Feat complete animation (#73)

Add complete animation in complete modal
Add 3-state-colors on map: 
- green: completed 
- gray: unlocked
- dark: locked
* haven’t add back v-if because the pc is out of power

app/src/components/CompleteModal.vue

@@ -1,12 +1,36 @@
 <script setup>
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
 import { ref } from 'vue'
-import { surveyUrl } from '../config'
+import { Vue3Lottie } from 'vue3-lottie'
+// import { surveyUrl } from '../config'
+import CompleteAnimation from '../img/complete-animation.json'
 
 const showModal = ref(true) // Controls whether the modal is visible or not
-
+const router = useRouter()
+const toast = useToast()
 const closeModal = () => {
   showModal.value = false
 }
+const defineComponent = () => ({
+  components: {
+    Vue3Lottie,
+  },
+  setup() {
+    return {
+      CompleteAnimation,
+    }
+  },
+})
+const backtoMap = async () => {
+  try {
+    router.push({ name: 'map' })
+  } catch (err) {
+    // useToast().error('Failed to load map')
+    toast.error('無法讀取地圖')
+    console.error(err)
+  }
+}
 
 // Simulate completing a quest to show the modal
 setTimeout(() => {
@@ -18,6 +42,7 @@ setTimeout(() => {
   <div v-if="showModal" class="modal">
     <div class="modal-content bg-bg-secondary rounded-lg">
       <span class="close text-text" @click="closeModal">&times;</span>
+
       <h2
         id="QuestCompleted"
         class="text-2xl text-text mb-5 w-full inline-flex justify-center"
@@ -25,16 +50,34 @@ setTimeout(() => {
         <!-- Quest Completed! -->
         關卡完成！
       </h2>
-      <p class="text-base text-text">
+      <div class="z-10 right-1/2 top-1/2" @animationend="defineComponent">
+        <Vue3Lottie
+          :animationData="CompleteAnimation"
+          :height="200"
+          :width="200"
+        />
+      </div>
+      <p class="text-base text-text text-center">恭喜你完成這一關！</p>
+      <p class="text-base text-text text-center">
+        接下來回到地圖，迎接新的挑戰吧！
+      </p>
+      <!-- <p class="text-base text-text">
         您已成功完成挑戰，真的非常感謝您的參與！<br />
         如果您能撥冗填寫這份問卷，我們將不勝感激，這對我們非常重要！
-      </p>
-      <a
+      </p> -->
+      <!-- <a
         id="SurveyButton"
         :href="surveyUrl"
         target="_blank"
         class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
         >填寫問卷</a
+      > -->
+      <a
+        id="BacktoMap"
+        target="_blank"
+        @click="backtoMap"
+        class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
+        >回到地圖</a
       >
     </div>
   </div>

app/src/components/QuestMap.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable no-console -->
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -24,6 +25,7 @@ async function getQuests() {
     return res.data
   } catch (err) {
     console.error(err)
+
     throw err
   }
 }
@@ -73,9 +75,15 @@ const genOption = (nodes, edges) => ({
       itemStyle: {
         color: (params) => {
           const {
-            data: { completed },
+            data: { completed, unlocked },
           } = params
-          return completed ? '#ADADB5' : '#454552'
+          if (completed) {
+            return '#00ff00'
+          }
+          if (unlocked) {
+            return '#ADADB5'
+          }
+          return '454552'
         },
       },
     },