feat: integrate form after finishing quest

app/src/components/game/CompleteModal.vue

@@ -1,32 +1,15 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
-import { ref} from 'vue'
+import { ref } from 'vue'
 import { Vue3Lottie } from 'vue3-lottie'
 // import { surveyUrl } from '../config'
 import CompleteAnimation from '../../img/complete-animation.json'
-import formbricks from "@formbricks/js/website";
-
-
-formbricks.init({
-  environmentId: "clyffbuq50bbxwh63thlfs1lb", 
-  apiHost: "https://app.formbricks.com",
-  attributes: {
-    language: "zh", // optional
-  },
-});
 
 const showModal = ref(true) // Controls whether the modal is visible or not
 const router = useRouter()
 const toast = useToast()
 
-if (typeof window !== "undefined") {
-  formbricks.init({
-    environmentId: "clyffbuq50bbxwh63thlfs1lb", 
-    apiHost: "https://app.formbricks.com",
-  });
-}
-
 const closeModal = () => {
   showModal.value = false
 }
@@ -55,7 +38,6 @@ const backtoMap = async () => {
 setTimeout(() => {
   showModal.value = true
 }, 5000) // Show modal after 5 seconds
-
 </script>
 
 <template>
@@ -88,14 +70,22 @@ setTimeout(() => {
         >回到地圖</a
       >
     </div>
-    <div style="position: relative; height:100vh; overflow:auto;"> 
-      <iframe 
-        src="https://app.formbricks.com/s/clyffdm0c0be2wh6335clle0l" 
-        frameborder="0" style="position: absolute; left:0; top:0; width:100%; height:100%; border:0;">
+    <div style="position: relative; height: 100vh; overflow: auto">
+      <iframe
+        src="https://app.formbricks.com/s/clyffdm0c0be2wh6335clle0l"
+        frameborder="0"
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        "
+      >
       </iframe>
     </div>
   </div>
-
 </template>
 
 <style scoped>

app/src/store/session.ts

@@ -61,8 +61,15 @@ const useSession = defineStore('session', {
       if (response.tasks) {
         this.session.tasks = response.tasks
       }
+      if (
+        response.status === 'finished' &&
+        this.session.status !== 'finished'
+      ) {
+        this.finish()
+      }
       this.session.status = response.status
     },
+    finish() {},
     reset() {
       socket.reset()
       term.reset()

app/src/views/GamePage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import useSession from '../store/session'
+import useUserProfile from '../store/userProfile'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 import DescriptionPart from '../components/game/DescriptionPart.vue'
@@ -10,13 +11,29 @@ import VisualizationPart from '../components/game/VisualizationPart.vue'
 import ControlPalette from '../components/game/ControlPalette.vue'
 import CompleteModal from '../components/game/CompleteModal.vue'
 import StartButton from '../components/game/StartButton.vue'
+import formbricks from '../utils/formbricks'
 
 const sessionStore = useSession()
+const userStore = useUserProfile()
 
 const completed = computed(() => {
   return sessionStore.session?.status === 'finished'
 })
 
+watch(completed, (newValue, oldValue) => {
+  if (newValue && !oldValue) {
+    console.log('finish', userStore)
+    formbricks.track('quest_completed', {
+      hiddenFields: {
+        quest: sessionStore.questId,
+        session: sessionStore.session?._id,
+        username: userStore.username,
+        email: userStore.email,
+      },
+    })
+  }
+})
+
 const props = defineProps({
   questId: {
     type: String,