From ff2241daa8c1d9dc72156e979d0073b09dd77e9b Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Wed, 22 Nov 2023 00:10:11 +0800
Subject: [PATCH 01/23] Add status badges

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 67e69df..b1d8aed 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
 # Linux Odyssey
 
+[![Production](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/production.yml/badge.svg)](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/production.yml)
+[![Staging](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/staging.yml/badge.svg)](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/staging.yml)
+
 ## Requirements
 
 - NodeJS

From 89f86fad304680157932c492a20d8ce88b75e8aa Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Wed, 22 Nov 2023 14:46:41 +0800
Subject: [PATCH 02/23] feat: add username to navbar, pass title by props

---
 app/src/components/GameHeaderPart.vue | 30 ++++++++++++++++++++++++---
 app/src/store/userProfile.js          | 30 +++++++++++++++++++++++++++
 app/src/views/GamePage.vue            |  2 +-
 app/src/views/QuestMapPage.vue        |  8 +++----
 4 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 app/src/store/userProfile.js

diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index 60b7980..af8361f 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/app/src/components/GameHeaderPart.vue
@@ -1,9 +1,11 @@
 <script setup>
+import { defineProps, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../utils/auth'
 import { bugReportUrl } from '../config'
-import sessionStore, { reset } from '../store/session'
+import { reset } from '../store/session'
+import userProfileStore, { loadUserProfile } from '../store/userProfile'
 
 const router = useRouter()
 
@@ -29,6 +31,22 @@ const handleMap = async () => {
     console.error(err)
   }
 }
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+})
+
+onMounted(async () => {
+  try {
+    await loadUserProfile()
+  } catch (err) {
+    // toast.error('Failed to load user profile')
+    toast.error('無法讀取使用者資料')
+  }
+})
 </script>
 
 <template>
@@ -51,9 +69,8 @@ const handleMap = async () => {
           id="HeaderText"
           class="text-text-primary inline-block font-bold whitespace-nowrap"
           style="font-size: 2vh"
-          v-if="sessionStore.quest"
         >
-          {{ sessionStore.quest.title }}
+          {{ title }}
         </p>
       </div>
       <div class="h-full w-full flex gap-3 items-center justify-end">
@@ -75,6 +92,13 @@ const handleMap = async () => {
             class="text-text-primary h-full w-full"
           />
         </button> -->
+        <p
+          id="UsernameText"
+          class="text-text inline-block whitespace-nowrap"
+          style="font-size: 2vh"
+        >
+          {{ userProfileStore.username }}
+        </p>
         <button title="Map" @click="handleMap" class="h-5 w-5">
           <font-awesome-icon
             :icon="['fas', 'map']"
diff --git a/app/src/store/userProfile.js b/app/src/store/userProfile.js
new file mode 100644
index 0000000..dfe0d36
--- /dev/null
+++ b/app/src/store/userProfile.js
@@ -0,0 +1,30 @@
+import { reactive } from 'vue'
+import api from '../utils/api'
+
+const store = reactive({
+  username: '',
+  email: '',
+  progress: {},
+})
+
+export async function loadUserProfile() {
+  try {
+    const res = await api.get('/users/me')
+    const { username, email, progress } = res.data
+    store.username = username
+    store.email = email
+    store.progress = progress
+    return store
+  } catch (err) {
+    console.error(err)
+    throw new Error('Failed to load user profile', err)
+  }
+}
+
+export function resetUserProfile() {
+  store.username = ''
+  store.email = ''
+  store.progress = {}
+}
+
+export default store
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 915d2e8..b307d05 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -50,7 +50,7 @@ onMounted(async () => {
 <template>
   <!-- game header -->
   <div class="h-[6vh] w-full">
-    <GameHeaderPart />
+    <GameHeaderPart :title="sessionStore.quest?.title" />
   </div>
   <!-- current status indicator -->
   <input
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index 27803dc..40b31d0 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -5,14 +5,14 @@ import GameHeaderPart from '../components/GameHeaderPart.vue'
 
 <template>
   <div class="h-[6vh] w-full">
-    <GameHeaderPart />
-    <p
+    <GameHeaderPart title="關卡地圖" />
+    <!-- <p
       class="text-text-primary absolute z-1 font-bold inline-block tracking-widest"
       style="left: 1.2%; top: 1.5%; height: 100%; font-size: 2vh"
     >
-      <!-- Quest Map -->
+      Quest Map
       Unix編年史
-    </p>
+    </p> -->
   </div>
   <div class="flex flex-col justify-center items-center w-full h-[94vh]">
     <QuestMap />

From e360ebcf534b8d34db890bbeb384c24530611b43 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Wed, 22 Nov 2023 14:53:41 +0800
Subject: [PATCH 03/23] fix: reset user profile on logout

---
 app/src/components/GameHeaderPart.vue | 6 +++++-
 app/src/store/userProfile.js          | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index af8361f..3cbf961 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/app/src/components/GameHeaderPart.vue
@@ -5,7 +5,10 @@ import { useToast } from 'vue-toastification'
 import { logout } from '../utils/auth'
 import { bugReportUrl } from '../config'
 import { reset } from '../store/session'
-import userProfileStore, { loadUserProfile } from '../store/userProfile'
+import userProfileStore, {
+  loadUserProfile,
+  resetUserProfile,
+} from '../store/userProfile'
 
 const router = useRouter()
 
@@ -14,6 +17,7 @@ const toast = useToast()
 const handleLogout = async () => {
   try {
     await logout()
+    resetUserProfile()
     reset()
     router.push({ name: 'login' })
   } catch (err) {
diff --git a/app/src/store/userProfile.js b/app/src/store/userProfile.js
index dfe0d36..5206cdc 100644
--- a/app/src/store/userProfile.js
+++ b/app/src/store/userProfile.js
@@ -17,7 +17,7 @@ export async function loadUserProfile() {
     return store
   } catch (err) {
     console.error(err)
-    throw new Error('Failed to load user profile', err)
+    throw new Error(`Failed to load user profile: ${err.message}`)
   }
 }
 

From f9e6228226492e90725355128e8cfd35d88ab85a Mon Sep 17 00:00:00 2001
From: Annie <an-hua.huang@ibm.com>
Date: Thu, 23 Nov 2023 00:16:14 +0800
Subject: [PATCH 04/23] Add 3 stage color: locked, unlocked, completed

---
 app/src/components/QuestMap.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index a4fcc1d..b7e72c3 100644
--- a/app/src/components/QuestMap.vue
+++ b/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'
@@ -73,9 +74,25 @@ const genOption = (nodes, edges) => ({
       itemStyle: {
         color: (params) => {
           const {
-            data: { completed },
+            data: { completed, unlocked },
           } = params
-          return completed ? '#ADADB5' : '#454552'
+          switch (completed !== unlocked) {
+            case false: {
+              // completed==unlocked, when completed or not yet unlocked
+              if (completed) {
+                return '#00ff00'
+              }
+              return '#454552'
+            }
+            case true: {
+              // completed!=unlocked, only when unlocked but not completed
+              return '#ADADB5'
+            }
+            default: {
+              return '#454552'
+            }
+          }
+          // return completed ? '#ADADB5' : '#454552'
         },
       },
     },

From 63c2443802a0b91c64f84392b3213f89f9001564 Mon Sep 17 00:00:00 2001
From: AnnieHuang <annie.huang921002@mgmail.com>
Date: Thu, 23 Nov 2023 00:54:48 +0800
Subject: [PATCH 05/23] Add animejs for further usage

---
 app/src/components/QuestMap.vue |  2 +-
 app/src/views/GamePage.vue      |  1 +
 server/package.json             |  1 +
 yarn.lock                       | 12 ++++++------
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index b7e72c3..40e9a46 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -25,6 +25,7 @@ async function getQuests() {
     return res.data
   } catch (err) {
     console.error(err)
+
     throw err
   }
 }
@@ -92,7 +93,6 @@ const genOption = (nodes, edges) => ({
               return '#454552'
             }
           }
-          // return completed ? '#ADADB5' : '#454552'
         },
       },
     },
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index b307d05..9b656be 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
+import { anime } from 'animejs'
 import sessionStore, { init } from '../store/session'
 import GameHeaderPart from '../components/GameHeaderPart.vue'
 import CommandlistPart from '../components/CommandlistPart.vue'
diff --git a/server/package.json b/server/package.json
index b127f77..581bd9b 100644
--- a/server/package.json
+++ b/server/package.json
@@ -16,6 +16,7 @@
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/models": "*",
     "@linux-odyssey/utils": "*",
+    "animejs": "^3.2.1",
     "bcrypt": "^5.1.1",
     "commander": "^11.0.0",
     "connect-mongo": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index 98b13b0..501edf5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1328,6 +1328,11 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+animejs@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda"
+  integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==
+
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
@@ -1500,12 +1505,7 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
-async@^3.2.0:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
-  integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==
-
-async@^3.2.3:
+async@^3.2.0, async@^3.2.3:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
   integrity sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==

From 0d8ab8413a6044a3be14b3b2041bff05d24de5fb Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:04:39 +0800
Subject: [PATCH 06/23] feat: add leaderboard declarations

---
 app/src/router.js                                   | 6 ++++++
 app/src/views/LeaderboardPage.vue                   | 6 ++++++
 server/src/api/controllers/leaderboardController.js | 5 +++++
 server/src/api/routes/index.js                      | 3 +++
 4 files changed, 20 insertions(+)
 create mode 100644 app/src/views/LeaderboardPage.vue
 create mode 100644 server/src/api/controllers/leaderboardController.js

diff --git a/app/src/router.js b/app/src/router.js
index 76f8280..1d3b420 100644
--- a/app/src/router.js
+++ b/app/src/router.js
@@ -4,6 +4,7 @@ import LoginPage from './views/LoginPage.vue'
 import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import QuestMapPage from './views/QuestMapPage.vue'
+import LeaderboardPage from './views/LeaderboardPage.vue'
 import { isLoggedIn } from './utils/auth'
 
 const routes = [
@@ -45,6 +46,11 @@ const routes = [
     component: QuestMapPage,
     meta: { requiresAuth: true },
   },
+  {
+    path: '/leaderboard',
+    name: 'leaderboard',
+    component: LeaderboardPage,
+  },
 ]
 
 const router = createRouter({
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
new file mode 100644
index 0000000..55daefd
--- /dev/null
+++ b/app/src/views/LeaderboardPage.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Leaderboard</h1>
+    <p>Coming soon...</p>
+  </div>
+</template>
diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
new file mode 100644
index 0000000..1d351e3
--- /dev/null
+++ b/server/src/api/controllers/leaderboardController.js
@@ -0,0 +1,5 @@
+import { asyncHandler } from '../../middleware/error.js'
+
+export default asyncHandler(async (req, res) => {
+  res.json({ message: 'leaderboard' })
+})
diff --git a/server/src/api/routes/index.js b/server/src/api/routes/index.js
index 427cf91..2cfd5ec 100644
--- a/server/src/api/routes/index.js
+++ b/server/src/api/routes/index.js
@@ -7,6 +7,7 @@ import authRouter from './authRouter.js'
 import authRequired from '../../middleware/authRequired.js'
 import userRouter from './userRouter.js'
 import config from '../../config.js'
+import leaderboardController from '../controllers/leaderboardController.js'
 
 const router = Router()
 
@@ -48,4 +49,6 @@ router.get('/bug-report', (req, res) => {
   res.redirect(config.bugReportUrl)
 })
 
+router.get('/leaderboard', leaderboardController)
+
 export default router

From 196187d5c967d3c68b8c957a801db7a6b3ee0654 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:42:31 +0800
Subject: [PATCH 07/23] feat: add leaderboard api

---
 .../api/controllers/leaderboardController.js  |  9 +++-
 server/src/models/userManager.js              | 43 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index 1d351e3..e3cb7ee 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -1,5 +1,12 @@
 import { asyncHandler } from '../../middleware/error.js'
+import { leaderboard } from '../../models/userManager.js'
 
 export default asyncHandler(async (req, res) => {
-  res.json({ message: 'leaderboard' })
+  const users = await leaderboard()
+  const response = users.map((user) => ({
+    username: user.user.username,
+    completedQuests: user.completedQuests,
+    numberOfCompletedQuests: user.numberOfCompletedQuests,
+  }))
+  res.json(response)
 })
diff --git a/server/src/models/userManager.js b/server/src/models/userManager.js
index 46943dd..8168eb5 100644
--- a/server/src/models/userManager.js
+++ b/server/src/models/userManager.js
@@ -22,3 +22,46 @@ export async function createUser(username, email, { password, socialLogin }) {
 
   return user
 }
+
+export function leaderboard() {
+  return UserProfile.aggregate([
+    {
+      $project: {
+        user: true, // Include the user field in the projection
+        completedQuests: {
+          $map: {
+            input: {
+              $filter: {
+                input: { $objectToArray: '$progress' }, // Convert the progress map to an array
+                as: 'prog',
+                cond: { $eq: ['$$prog.v.completed', true] }, // Filter for completed quests
+              },
+            },
+            as: 'completedProg',
+            in: '$$completedProg.k', // Extract the quest IDs
+          },
+        },
+      },
+    },
+    {
+      $addFields: {
+        numberOfCompletedQuests: { $size: '$completedQuests' }, // Calculate the size of the completedQuests array
+      },
+    },
+    {
+      $match: {
+        numberOfCompletedQuests: { $gt: 0 }, // Filter out users who haven't completed any quests
+      },
+    },
+    { $sort: { numberOfCompletedQuests: -1 } },
+    {
+      $lookup: {
+        from: 'users',
+        localField: 'user',
+        foreignField: '_id',
+        as: 'user',
+      },
+    },
+    { $unwind: '$user' },
+  ])
+}

From 1a5655d7ced5f097ca4f6596b78c1a1b730f5fdf Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:49:06 +0800
Subject: [PATCH 08/23] feat: rename numberOfCompletedQuests to score

---
 server/src/api/controllers/leaderboardController.js | 2 +-
 server/src/models/userManager.js                    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index e3cb7ee..4f497a1 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -6,7 +6,7 @@ export default asyncHandler(async (req, res) => {
   const response = users.map((user) => ({
     username: user.user.username,
     completedQuests: user.completedQuests,
-    numberOfCompletedQuests: user.numberOfCompletedQuests,
+    score: user.score * 1000,
   }))
   res.json(response)
 })
diff --git a/server/src/models/userManager.js b/server/src/models/userManager.js
index 8168eb5..d2f5faf 100644
--- a/server/src/models/userManager.js
+++ b/server/src/models/userManager.js
@@ -45,15 +45,15 @@ export function leaderboard() {
     },
     {
       $addFields: {
-        numberOfCompletedQuests: { $size: '$completedQuests' }, // Calculate the size of the completedQuests array
+        score: { $size: '$completedQuests' }, // Calculate the size of the completedQuests array
       },
     },
     {
       $match: {
-        numberOfCompletedQuests: { $gt: 0 }, // Filter out users who haven't completed any quests
+        score: { $gt: 0 }, // Filter out users who haven't completed any quests
       },
     },
-    { $sort: { numberOfCompletedQuests: -1 } },
+    { $sort: { score: -1 } },
     {
       $lookup: {
         from: 'users',

From a90b0a3c83b487f78695bef79b38da3a6674e3f3 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:49:20 +0800
Subject: [PATCH 09/23] feat: load leadboard data in frontend

---
 app/src/views/LeaderboardPage.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 55daefd..779b066 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -1,6 +1,33 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useToast } from 'vue-toastification'
+import api from '../utils/api'
+
+const leaderboard = ref([])
+
+const toast = useToast()
+async function getLeaderboard() {
+  try {
+    const res = await api.get('/leaderboard')
+    leaderboard.value = res.data
+  } catch (err) {
+    console.error(err)
+    toast.error('讀取排行榜失敗')
+  }
+}
+
+onMounted(async () => {
+  await getLeaderboard()
+})
+</script>
+
 <template>
   <div>
-    <h1>Leaderboard</h1>
-    <p>Coming soon...</p>
+    <h1 class="text-text-primary">Leaderboard</h1>
+    <div>
+      <div class="text-text" v-for="user in leaderboard" :key="user.username">
+        {{ user.username }}: {{ user.score }} {{ user.completedQuests }}
+      </div>
+    </div>
   </div>
 </template>

From ce6d5aad666382dd103122d0ab68444f9581316f Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 16:16:20 +0800
Subject: [PATCH 10/23] Add complete animation

---
 app/package.json                     |  1 +
 app/src/components/CompleteModal.vue | 51 +++++++++++++++++++++++++---
 app/src/img/complete-animation.json  |  1 +
 app/src/main.js                      |  4 +++
 app/src/views/GamePage.vue           |  4 +--
 server/package.json                  |  1 -
 yarn.lock                            | 23 ++++++++++---
 7 files changed, 73 insertions(+), 12 deletions(-)
 create mode 100644 app/src/img/complete-animation.json

diff --git a/app/package.json b/app/package.json
index 4fbe9d2..6a326a0 100644
--- a/app/package.json
+++ b/app/package.json
@@ -26,6 +26,7 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
     "vue-toastification": "^2.0.0-rc.5",
+    "vue3-lottie": "^3.2.0",
     "xterm": "^5.2.1",
     "xterm-addon-attach": "^0.8.0",
     "xterm-addon-fit": "^0.7.0"
diff --git a/app/src/components/CompleteModal.vue b/app/src/components/CompleteModal.vue
index 628e11f..81e632d 100644
--- a/app/src/components/CompleteModal.vue
+++ b/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 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')
+    useToast().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>
diff --git a/app/src/img/complete-animation.json b/app/src/img/complete-animation.json
new file mode 100644
index 0000000..2ea189a
--- /dev/null
+++ b/app/src/img/complete-animation.json
@@ -0,0 +1 @@
+{"v":"5.5.9","fr":60,"ip":0,"op":90,"w":640,"h":640,"nm":"Lottie_petard","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","parent":2,"refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[320,320,0],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[358.25,238.75],[313.75,278],[456.813,424.5]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":3},{"ddd":0,"ind":2,"ty":0,"nm":"Pre-comp 1","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.47,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[318,312,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.47,"y":1},"o":{"x":0.167,"y":0.987},"t":6.5,"s":[328,316,0],"to":[0,0,0],"ti":[0,0,0]},{"t":45,"s":[318,312,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"confetti","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-61.57,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[345.257,314.37,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[272.458,139.571,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[-54,54,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"confetti","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-61.57,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[345.257,314.37,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[207.458,186.571,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[-54,54,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"confetti","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-61.57,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[345.257,314.37,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[274.458,236.571,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[-54,54,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"confetti","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-61.57,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[345.257,314.37,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[224.458,267.571,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[54,54,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":0,"nm":"confetti","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-61.57,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[345.257,314.37,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[326.458,202.571,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[54,54,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":0,"nm":"confetti","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-61.57,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[345.257,314.37,0],"to":[0,0,0],"ti":[0,0,0]},{"t":15,"s":[314.458,272.571,0]}],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[54,54,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 4","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[319.25,320.25,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,104.369,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-27.614,0],[0,-27.614],[27.568,-1.605],[0,27.614]],"o":[[27.614,0],[0,27.614],[-26.718,1.555],[0,-27.614]],"v":[[-9,-26.75],[41,23.25],[-11.439,70.948],[-59,23.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949020026712,0.886274988511,0.019608000213,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9,0.840928201114,0.008999999364,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8,-36.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.096,20.801],"ix":3},"r":{"a":0,"k":-45,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","parent":2,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":-1.603,"ix":10},"p":{"a":0,"k":[23.278,5.413,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[108.27,108.27,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"st","c":{"a":0,"k":[0.949020026712,0.886274988511,0.019608000213,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[3.848,1.142],[0,0],[0,0],[-4.591,-0.901]],"o":[[0,0],[0,0],[-3.729,-1.107],[0,0],[0,0],[6.638,1.114]],"v":[[4.433,-0.392],[-7.233,21.299],[-14.504,22.651],[-20.005,19.373],[-17.934,-2.933],[-5.75,0.771]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949020026712,0.886274988511,0.019608000213,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[77.972,56.427],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[144.424,100],"ix":3},"r":{"a":0,"k":-66.169,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 5","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[8.887,-0.001],[0,0],[0,0],[-9.317,-0.108]],"o":[[0,0],[0,0],[-9.475,0.001],[0,0],[0,0],[12.203,0.142]],"v":[[26.549,-0.922],[13.525,24.245],[-1.09,27.226],[-16.97,22.797],[-14.278,-4.079],[5.024,2.21]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949020026712,0.886274988511,0.019608000213,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.305,35.003],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[144.424,100],"ix":3},"r":{"a":0,"k":-65.117,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 4","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-4.946,1.851],[0.399,-0.528],[12.673,1.305],[0,0],[0,0],[-14.046,-2.021]],"o":[[0.331,0.155],[-0.341,0.451],[-14.916,-1.536],[0,0],[0,0],[13.908,2.001]],"v":[[40.116,5.833],[24.12,30.855],[2.577,33.979],[-26.572,21.48],[-21.918,-4.338],[4.064,10.804]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949020026712,0.886274988511,0.019608000213,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-3.401,-2.872],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[144.424,100],"ix":3},"r":{"a":0,"k":-72.437,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 3","np":3,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[318,312,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[92.362,92.362,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-17.758,4.325],[11.25,2.848]],"o":[[0,0],[17.758,-4.325],[-0.234,-0.023]],"v":[[100,0.5],[-100,50],[-100,-50]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949020026712,0.886274988511,0.019608000213,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.90096800561,0.237254901961,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[78,49],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":45,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0}]},{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 2","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":44,"ix":10},"p":{"a":0,"k":[320,320,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[83,83,100],"ix":6}},"ao":0,"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"ribbon4","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":80.648,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[48.5,31.477,0],"to":[0,0,0],"ti":[0,0,0]},{"t":88.5,"s":[-23.596,-174.981,0]}],"ix":2},"a":{"a":0,"k":[-107.25,54.857,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-19.058,-15.834],[-3.75,-18.12],[19,6],[-13.509,-13.509],[-14.808,-5.584],[27.5,12]],"o":[[0,0],[19.058,15.834],[5.131,24.793],[-19,-6],[10.071,10.071],[14.808,5.584],[-27.5,-12]],"v":[[-71,75.5],[-68.25,41.75],[-110.75,64.5],[-102.75,62.75],[-110,42.25],[-132.75,58],[-146.5,34.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949019607843,0.886274509804,0.019607843137,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[0.25]},"t":0,"s":[0]},{"t":58.16015625,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[-0.168]},"t":9.691,"s":[1]},{"t":67.849609375,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"ribbon2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":14.348,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[48.5,31.477,0],"to":[0,0,0],"ti":[0,0,0]},{"t":88.5,"s":[-150.102,-6.306,0]}],"ix":2},"a":{"a":0,"k":[-107.25,54.857,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-19.058,-15.834],[-3.75,-18.12],[19,6],[-13.509,-13.509],[-14.808,-5.584],[27.5,12]],"o":[[0,0],[19.058,15.834],[5.131,24.793],[-19,-6],[10.071,10.071],[14.808,5.584],[-27.5,-12]],"v":[[-71,75.5],[-68.25,41.75],[-110.75,64.5],[-102.75,62.75],[-110,42.25],[-132.75,58],[-146.5,34.5]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949019607843,0.886274509804,0.019607843137,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[0.25]},"t":0,"s":[0]},{"t":58.16015625,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[-0.168]},"t":9.691,"s":[1]},{"t":67.849609375,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"ribbon3","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":43.697,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[19.548,38.339,0],"to":[0,0,0],"ti":[0,0,0]},{"t":88.5,"s":[-174.392,-142.914,0]}],"ix":2},"a":{"a":0,"k":[-107.25,54.857,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[13.75,1.62],[-18,20.63],[19,6],[-20.25,-7.37],[27.5,12]],"o":[[-13.75,-1.62],[24.25,-12.88],[-19,-6],[23.037,8.384],[-27.5,-12]],"v":[[-50.25,78.25],[-87.5,60.5],[-94.5,70],[-104.75,51.5],[-140,55.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[0.25]},"t":0,"s":[0]},{"t":58.16015625,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[-0.168]},"t":9.691,"s":[1]},{"t":67.849609375,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"ribbon1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":110.237,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[46.054,37.134,0],"to":[0,0,0],"ti":[0,0,0]},{"t":88.5,"s":[64.163,-138.095,0]}],"ix":2},"a":{"a":0,"k":[-107.25,54.857,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[13.75,1.62],[-18,20.63],[19,6],[-20.25,-7.37],[27.5,12]],"o":[[-13.75,-1.62],[24.25,-12.88],[-19,-6],[23.037,8.384],[-27.5,-12]],"v":[[-50.25,78.25],[-87.5,60.5],[-94.5,70],[-104.75,51.5],[-140,55.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[0.25]},"t":0,"s":[0]},{"t":58.16015625,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.47],"y":[1]},"o":{"x":[0.167],"y":[-0.168]},"t":9.691,"s":[1]},{"t":67.849609375,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 15","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.809},"o":{"x":0.497,"y":0.21},"t":0,"s":[67.09,75.531,0],"to":[0,0,0],"ti":[39.24,43.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.32},"t":18,"s":[-42.76,-9.279,0],"to":[-39.24,-43.721,0],"ti":[0,0,0]},{"t":180,"s":[-66.681,-199.179,0]}],"ix":2},"a":{"a":0,"k":[-550,-531.25,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.128,0.128]},"t":0,"s":[52,52]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.623529411765,0.019607843137,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-550,-531.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":0,"s":[40,40]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Shape Layer 9","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.789},"o":{"x":0.497,"y":0.232},"t":0,"s":[69.5,36.977,0],"to":[0,0,0],"ti":[39.24,43.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.28},"t":18,"s":[47.601,-82.773,0],"to":[-39.24,-43.721,0],"ti":[0,0,0]},{"t":180,"s":[-163.066,-147.372,0]}],"ix":2},"a":{"a":0,"k":[-550,-531.25,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.128,0.128]},"t":0,"s":[52,52]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.623529411765,0.019607843137,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-550,-531.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":0,"s":[40,40]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 14","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.795},"o":{"x":0.497,"y":0.225},"t":0,"s":[47.88,64.019,0],"to":[0,0,0],"ti":[39.24,43.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.394},"t":18,"s":[-65.586,5.715,0],"to":[-39.24,-43.721,0],"ti":[0,0,0]},{"t":180,"s":[-158.181,-122.74,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":0,"s":[40,40]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":35,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Shape Layer 7","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.804},"o":{"x":0.497,"y":0.216},"t":0,"s":[78,78.477,0],"to":[0,0,0],"ti":[39.24,43.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.303},"t":18,"s":[56.101,-50.911,0],"to":[-39.24,-43.721,0],"ti":[0,0,0]},{"t":180,"s":[-91.916,-195.029,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":0,"s":[40,40]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.701960784314,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":35,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Shape Layer 13","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.809},"o":{"x":0.497,"y":0.209},"t":0,"s":[41.313,55.682,0],"to":[0,0,0],"ti":[39.24,43.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.586},"t":18,"s":[17.39,-77.718,0],"to":[-39.24,-43.721,0],"ti":[0,0,0]},{"t":180,"s":[-72.12,-133.173,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":0,"s":[40,40]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090196078431,0.435294117647,0.650980392157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":35,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Shape Layer 5","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.845},"o":{"x":0.497,"y":0.17},"t":0,"s":[63,54.477,0],"to":[0,0,0],"ti":[39.24,43.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.387},"t":18,"s":[-92.248,-13.863,0],"to":[-39.24,-43.721,0],"ti":[0,0,0]},{"t":180,"s":[-162.482,-158.475,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0.47,0.47],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":0,"s":[40,40]},{"t":60,"s":[0,0]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090196078431,0.435294117647,0.650980392157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":35,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Shape Layer 12","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.773},"o":{"x":0.497,"y":0.249},"t":0,"s":[31,64.477,0],"to":[0,0,0],"ti":[50.24,18.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.378},"t":18,"s":[-80.562,28.487,0],"to":[-50.24,-18.721,0],"ti":[0,0,0]},{"t":180,"s":[-196.699,-86.475,0]}],"ix":2},"a":{"a":0,"k":[-111,199.944,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.083]},"t":0,"s":[16]},{"t":90,"s":[0]}],"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":256,"ix":7,"x":"var $bm_rt;\n$bm_rt = $bm_mul(content('Polystar 1').content('Polystar Path 1').innerRadius, 2);"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.886274509804,0.019607843137,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-111,203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Shape Layer 6","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.753},"o":{"x":0.497,"y":0.271},"t":0,"s":[31,64.477,0],"to":[0,0,0],"ti":[-2.773,60.89,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.401},"t":18,"s":[57.993,-38.983,0],"to":[2.773,-60.89,0],"ti":[0,0,0]},{"t":180,"s":[3.301,-182.86,0]}],"ix":2},"a":{"a":0,"k":[-111,199.944,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.083]},"t":0,"s":[16]},{"t":90,"s":[0]}],"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":256,"ix":7,"x":"var $bm_rt;\n$bm_rt = $bm_mul(content('Polystar 1').content('Polystar Path 1').innerRadius, 2);"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.886274509804,0.019607843137,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-111,203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Shape Layer 11","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.685},"o":{"x":0.497,"y":0.346},"t":0,"s":[49,44.477,0],"to":[0,0,0],"ti":[27.987,69.408,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.347},"t":30,"s":[-51.128,-48.333,0],"to":[-27.987,-69.408,0],"ti":[0,0,0]},{"t":180,"s":[-64.41,-213.005,0]}],"ix":2},"a":{"a":0,"k":[-157,241.944,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.083]},"t":0,"s":[16]},{"t":90,"s":[0]}],"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":256,"ix":7,"x":"var $bm_rt;\n$bm_rt = $bm_mul(content('Polystar 1').content('Polystar Path 1').innerRadius, 2);"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090196078431,0.435294117647,0.650980392157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-157,245],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Shape Layer 8","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.663},"o":{"x":0.497,"y":0.37},"t":0,"s":[49,44.477,0],"to":[0,0,0],"ti":[32.806,65.794,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.399},"t":30,"s":[57.306,-80.863,0],"to":[-32.806,-65.794,0],"ti":[0,0,0]},{"t":180,"s":[60.892,-221.438,0]}],"ix":2},"a":{"a":0,"k":[-157,241.944,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.083]},"t":0,"s":[16]},{"t":90,"s":[0]}],"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":256,"ix":7,"x":"var $bm_rt;\n$bm_rt = $bm_mul(content('Polystar 1').content('Polystar Path 1').innerRadius, 2);"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.090196078431,0.435294117647,0.650980392157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-157,245],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Shape Layer 10","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.763},"o":{"x":0.497,"y":0.26},"t":0,"s":[29,25.477,0],"to":[0,0,0],"ti":[50.24,18.721,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.356},"t":18,"s":[-36.26,-60.779,0],"to":[-50.24,-18.721,0],"ti":[0,0,0]},{"t":180,"s":[-179.349,-161.089,0]}],"ix":2},"a":{"a":0,"k":[-111,199.944,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.083]},"t":0,"s":[16]},{"t":90,"s":[0]}],"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":256,"ix":7,"x":"var $bm_rt;\n$bm_rt = $bm_mul(content('Polystar 1').content('Polystar Path 1').innerRadius, 2);"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-111,203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Shape Layer 2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":180,"s":[360]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.698,"y":0.758},"o":{"x":0.497,"y":0.266},"t":0,"s":[29,25.477,0],"to":[0,0,0],"ti":[-36.507,51.252,0]},{"i":{"x":0.22,"y":1},"o":{"x":0.079,"y":0.49},"t":18,"s":[38.438,-78.851,0],"to":[36.507,-51.252,0],"ti":[0,0,0]},{"t":180,"s":[66.434,-200.848,0]}],"ix":2},"a":{"a":0,"k":[-111,199.944,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"sr","sy":1,"d":1,"pt":{"a":0,"k":5,"ix":3},"p":{"a":0,"k":[0,0],"ix":4},"r":{"a":0,"k":0,"ix":5},"ir":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.083]},"t":0,"s":[16]},{"t":90,"s":[0]}],"ix":6},"is":{"a":0,"k":0,"ix":8},"or":{"a":0,"k":256,"ix":7,"x":"var $bm_rt;\n$bm_rt = $bm_mul(content('Polystar 1').content('Polystar Path 1').innerRadius, 2);"},"os":{"a":0,"k":0,"ix":9},"ix":1,"nm":"Polystar Path 1","mn":"ADBE Vector Shape - Star","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.949019607843,0.019607843137,0.098039215686,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-111,203],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Polystar 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":600,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Cracker","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[368,426,0],"ix":2},"a":{"a":0,"k":[320,320,0],"ix":1},"s":{"a":0,"k":[150,150,100],"ix":6}},"ao":0,"w":640,"h":640,"ip":0,"op":600,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/app/src/main.js b/app/src/main.js
index e734fd9..9048f77 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import './library'
 /* import Vue Toastification */
 import Toast, { POSITION } from 'vue-toastification'
+/* import Vue Lottie */
+import Vue3Lottie from 'vue3-lottie'
 import 'vue-toastification/dist/index.css'
 
 import App from './App.vue'
@@ -22,4 +24,6 @@ const options = {
 
 app.use(Toast, options)
 
+app.use(Vue3Lottie, { name: 'Vue3Lottie' })
+
 app.mount('#app')
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 9b656be..e641e93 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
-import { anime } from 'animejs'
 import sessionStore, { init } from '../store/session'
 import GameHeaderPart from '../components/GameHeaderPart.vue'
 import CommandlistPart from '../components/CommandlistPart.vue'
@@ -91,7 +90,8 @@ onMounted(async () => {
       </div>
       <ControlPalette />
     </div>
-    <CompleteModal v-if="completed" />
+    <CompleteModal />
+    <!-- v-if="completed" -->
   </div>
 </template>
 <script></script>
diff --git a/server/package.json b/server/package.json
index 581bd9b..b127f77 100644
--- a/server/package.json
+++ b/server/package.json
@@ -16,7 +16,6 @@
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/models": "*",
     "@linux-odyssey/utils": "*",
-    "animejs": "^3.2.1",
     "bcrypt": "^5.1.1",
     "commander": "^11.0.0",
     "connect-mongo": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index 501edf5..e5c7d07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1328,11 +1328,6 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-animejs@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda"
-  integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A==
-
 ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
@@ -4556,6 +4551,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.includes@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@@ -4636,6 +4636,11 @@ long-timeout@0.1.1:
   resolved "https://registry.yarnpkg.com/long-timeout/-/long-timeout-0.1.1.tgz#9721d788b47e0bcb5a24c2e2bee1a0da55dab514"
   integrity sha512-BFRuQUqc7x2NWxfJBCyUrN8iYUYznzL9JROmRz1gZ6KlOIgmoD+njPVbb+VNn2nGMKggMsK79iUNErillsrx7w==
 
+lottie-web@5.12.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -6620,6 +6625,14 @@ vue-toastification@^2.0.0-rc.5:
   resolved "https://registry.yarnpkg.com/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz#92798604d806ae473cfb76ed776fae294280f8f8"
   integrity sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==
 
+vue3-lottie@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vue3-lottie/-/vue3-lottie-3.2.0.tgz#7f95831d3483dc304c680a9b2cac6ed098070a2a"
+  integrity sha512-PtNXbv7iD4XGmK8CXd71aLWmILIR6P6VzLMDw6ZzmDAeuJZuJ0MdOVnn50LOARgq+cOFJsn/2z+7tZh0F9T9qw==
+  dependencies:
+    lodash-es "^4.17.21"
+    lottie-web "5.12.2"
+
 vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"

From 790e09b3153d523389d8760364761d0caa96b8e6 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 16:28:47 +0800
Subject: [PATCH 11/23] wip: design leaderboard

---
 app/src/components/GameHeaderPart.vue         |  9 ++-
 app/src/views/LeaderboardPage.vue             | 58 +++++++++++++++++--
 .../api/controllers/leaderboardController.js  |  7 ++-
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index 3cbf961..3c93ed9 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/app/src/components/GameHeaderPart.vue
@@ -69,10 +69,17 @@ onMounted(async () => {
             class="text-text-tertiary h-full w-full"
           />
         </button> -->
-        <p
+        <button
           id="HeaderText"
           class="text-text-primary inline-block font-bold whitespace-nowrap"
           style="font-size: 2vh"
+        >
+          Linux Odyssey
+        </button>
+        <p
+          id="HeaderText"
+          class="text-text inline-block font-bold whitespace-nowrap"
+          style="font-size: 2vh"
         >
           {{ title }}
         </p>
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 779b066..86ff408 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
 import api from '../utils/api'
 
 const leaderboard = ref([])
@@ -22,11 +24,57 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <h1 class="text-text-primary">Leaderboard</h1>
-    <div>
-      <div class="text-text" v-for="user in leaderboard" :key="user.username">
-        {{ user.username }}: {{ user.score }} {{ user.completedQuests }}
+  <div class="w-screen h-screen bg-bg">
+    <DynamicBackground class="w-full h-full" />
+    <div
+      class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="absolute top-0 h-[6vh] w-full">
+        <GameHeaderPart title="排行榜" />
+      </div>
+      <div class="w-fit h-full">
+        <div
+          class="bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
+        >
+          <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
+          <div class="max-h-300 overflow-y-auto">
+            <table class="w-full text-sm text-left text-text">
+              <thead
+                class="text-xs text-text-secondary uppercase bg-bg-secondary"
+              >
+                <tr>
+                  <th scope="col" class="px-6 py-3">使用者名稱</th>
+                  <th scope="col" class="px-6 py-3">分數</th>
+                  <th scope="col" class="px-6 py-3">完成關卡</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="user in leaderboard"
+                  :key="user.username"
+                  class="border-b bg-bg"
+                >
+                  <th
+                    scope="row"
+                    class="px-6 py-4 font-medium text-text-primary whitespace-nowrap"
+                  >
+                    {{ user.username }}
+                  </th>
+                  <td class="px-6 py-4">{{ user.score }}</td>
+                  <td class="px-6 py-4 text-text-secondary">
+                    <span
+                      class="mr-2"
+                      v-for="quest in user.completedQuests"
+                      :key="quest"
+                    >
+                      {{ quest }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index 4f497a1..bf56a79 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -8,5 +8,10 @@ export default asyncHandler(async (req, res) => {
     completedQuests: user.completedQuests,
     score: user.score * 1000,
   }))
-  res.json(response)
+  // duplicate the response 100 times
+  const fakeResponse = []
+  for (let i = 0; i < 100; i++) {
+    fakeResponse.push(...response)
+  }
+  res.json(fakeResponse)
 })

From dd3e6b4aac37029c4331d275d0dccd94a2881e45 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Thu, 23 Nov 2023 16:50:07 +0800
Subject: [PATCH 12/23] scroll leader board

---
 app/src/views/LeaderboardPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 86ff408..8373bae 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -32,12 +32,12 @@ onMounted(async () => {
       <div class="absolute top-0 h-[6vh] w-full">
         <GameHeaderPart title="排行榜" />
       </div>
-      <div class="w-fit h-full">
+      <div class="w-fit h-[94vh]">
         <div
-          class="bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
+          class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
         >
           <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
-          <div class="max-h-300 overflow-y-auto">
+          <div class="max-h-300 overflow-auto">
             <table class="w-full text-sm text-left text-text">
               <thead
                 class="text-xs text-text-secondary uppercase bg-bg-secondary"

From c9500c75752d6bbd5abe9832def958896573228d Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 16:51:18 +0800
Subject: [PATCH 13/23] set back if completed

---
 app/src/views/GamePage.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index e641e93..b307d05 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -90,8 +90,7 @@ onMounted(async () => {
       </div>
       <ControlPalette />
     </div>
-    <CompleteModal />
-    <!-- v-if="completed" -->
+    <CompleteModal v-if="completed" />
   </div>
 </template>
 <script></script>

From a7eeb8470aff3f71f7b61f198271405bb9c14565 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 16:55:34 +0800
Subject: [PATCH 14/23] edit link text

---
 tests/cypress/e2e/helloworld.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index aaba53f..5c5890b 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -187,7 +187,7 @@ describe('example helloworld app', () => {
         // Check survey dialog pop up
         cy.CheckTextElement('#QuestCompleted', '關卡完成！', 'Quest Completed!')
         cy.get('div[class="modal"]').find('p').should('be.visible')
-        cy.findByRole('link', { name: '填寫問卷' }).should('be.visible')
+        cy.findByRole('link', { name: '回到地圖' }).should('be.visible')
       })
     })
   })

From 84cf74cdfcbc8313a4864088ee3ad8df04929e6e Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 17:00:30 +0800
Subject: [PATCH 15/23] extend timeout

---
 tests/cypress/e2e/helloworld.cy.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index 5c5890b..a152066 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -187,7 +187,9 @@ describe('example helloworld app', () => {
         // Check survey dialog pop up
         cy.CheckTextElement('#QuestCompleted', '關卡完成！', 'Quest Completed!')
         cy.get('div[class="modal"]').find('p').should('be.visible')
-        cy.findByRole('link', { name: '回到地圖' }).should('be.visible')
+        cy.findByRole('link', { name: '回到地圖' }, { timeout: 30000 }).should(
+          'be.visible'
+        )
       })
     })
   })

From 88d19e7f8760aae7e3e8c3ebfd8fac447e44896f Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 22:22:48 +0800
Subject: [PATCH 16/23] fix: navbar overlap leaderboard

---
 app/src/views/LeaderboardPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 8373bae..cf50a95 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -29,10 +29,10 @@ onMounted(async () => {
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="absolute top-0 h-[6vh] w-full">
+      <div class="h-[6vh] w-full">
         <GameHeaderPart title="排行榜" />
       </div>
-      <div class="w-fit h-[94vh]">
+      <div class="w-fit h-[94vh] m-3">
         <div
           class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
         >

From 52fa8d6f3a12a2f99fb95d619f1da44b99f3a8fa Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 22:28:23 +0800
Subject: [PATCH 17/23] fix: put leadeboard align top

---
 app/src/views/LeaderboardPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index cf50a95..dcba85e 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -34,7 +34,7 @@ onMounted(async () => {
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div
-          class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
+          class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center rounded-3xl p-10"
         >
           <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
           <div class="max-h-300 overflow-auto">

From 9e7065fbd74bc036213a12105dd105d381209584 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 22:28:36 +0800
Subject: [PATCH 18/23] fix: remove fake leaderboard responses

---
 server/src/api/controllers/leaderboardController.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index bf56a79..4f497a1 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -8,10 +8,5 @@ export default asyncHandler(async (req, res) => {
     completedQuests: user.completedQuests,
     score: user.score * 1000,
   }))
-  // duplicate the response 100 times
-  const fakeResponse = []
-  for (let i = 0; i < 100; i++) {
-    fakeResponse.push(...response)
-  }
-  res.json(fakeResponse)
+  res.json(response)
 })

From 66adfec365268ed815a9ccd1ef896e6fad7bdce3 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 22:48:26 +0800
Subject: [PATCH 19/23] fix method

---
 app/src/components/CompleteModal.vue |  4 ++--
 app/src/components/QuestMap.vue      | 21 ++++++---------------
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/app/src/components/CompleteModal.vue b/app/src/components/CompleteModal.vue
index 81e632d..057a474 100644
--- a/app/src/components/CompleteModal.vue
+++ b/app/src/components/CompleteModal.vue
@@ -8,7 +8,7 @@ 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
 }
@@ -27,7 +27,7 @@ const backtoMap = async () => {
     router.push({ name: 'map' })
   } catch (err) {
     // useToast().error('Failed to load map')
-    useToast().error('無法讀取地圖')
+    toast.error('無法讀取地圖')
     console.error(err)
   }
 }
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 40e9a46..734c2ab 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -77,22 +77,13 @@ const genOption = (nodes, edges) => ({
           const {
             data: { completed, unlocked },
           } = params
-          switch (completed !== unlocked) {
-            case false: {
-              // completed==unlocked, when completed or not yet unlocked
-              if (completed) {
-                return '#00ff00'
-              }
-              return '#454552'
-            }
-            case true: {
-              // completed!=unlocked, only when unlocked but not completed
-              return '#ADADB5'
-            }
-            default: {
-              return '#454552'
-            }
+          if (completed) {
+            return '#00ff00'
           }
+          if (unlocked) {
+            return '#ADADB5'
+          }
+          return '454552'
         },
       },
     },

From 96c0785a7e1db0638ca8351690a382d7ad4a091b Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Thu, 23 Nov 2023 23:26:11 +0800
Subject: [PATCH 20/23] change e2e test

---
 tests/cypress/e2e/helloworld.cy.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index aaba53f..dd35431 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -78,9 +78,7 @@ describe('example helloworld app', () => {
       cy.PrepareForGame()
     })
     it('Check Header', () => {
-      cy.get('#HeaderText')
-        .should('contain', 'Hello, Linux World!')
-        .and('be.visible')
+      cy.get('#HeaderText').should('contain', 'Linux Odyssey').and('be.visible')
       cy.findByRole('link', { name: 'Bug Report' }).should('be.visible')
       cy.findByRole('button', { name: 'Sign Out' }).should('be.visible')
     })

From 277d619518729ae50843f08f95f00e356334948c Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 23:27:58 +0800
Subject: [PATCH 21/23] fix cypress fail

---
 tests/cypress/e2e/helloworld.cy.js |  6 ++----
 tests/cypress/support/commands.js  | 14 +++++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index a152066..1dfcb9c 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -137,7 +137,7 @@ describe('example helloworld app', () => {
     it('Typing in Terminal', () => {
       cy.typeInCommand('12345{enter}')
       cy.get('@Terminaltextbox')
-        .should('contain', 'zsh: command not found: 12345')
+        .should('contain', 'zsh: command not found: 12345', { timeout: 50000 })
         .and('contain', '12345')
     })
     it('Complete the Game(relating UI)', () => {
@@ -187,9 +187,7 @@ describe('example helloworld app', () => {
         // Check survey dialog pop up
         cy.CheckTextElement('#QuestCompleted', '關卡完成！', 'Quest Completed!')
         cy.get('div[class="modal"]').find('p').should('be.visible')
-        cy.findByRole('link', { name: '回到地圖' }, { timeout: 30000 }).should(
-          'be.visible'
-        )
+        cy.get('#BacktoMap').should('contain', '回到地圖').and('be.visible')
       })
     })
   })
diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index de19392..9edb868 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -9,13 +9,21 @@ Cypress.Commands.add('LoginWithPassword', (username, password) => {
 })
 Cypress.Commands.add('PrepareForGame', () => {
   cy.visit('/')
+  // make sure the login page is loaded
+  cy.url().should('satisfy', (elements) => {
+    const text = elements
+    return text.includes('login') || text.includes('register')
+  })
   cy.LoginWithPassword(
     Cypress.env('defaultAccount'),
     Cypress.env('defaultPassword')
   )
+  // make sure the map page is loaded
   cy.url().should('include', '/map')
   cy.visit('/game/helloworld')
-  cy.get('.xterm-screen', { timeout: 10000 })
+  // make sure the game page is loaded
+  cy.url().should('include', '/game/helloworld')
+  cy.get('.xterm-screen', { timeout: 30000 })
     .as('Terminaltextbox')
     .should('be.visible')
   cy.CheckTextElement('#reset', '重來', 'Reset').click()
@@ -24,10 +32,6 @@ Cypress.Commands.add('PrepareForGame', () => {
     'contain',
     'commander:~ $'
   )
-  cy.get('@Terminaltextbox', { timeout: 150000 }).should(
-    'contain',
-    'commander:~ $'
-  )
 })
 Cypress.Commands.add('typeInCommand', (command) => {
   cy.get('.xterm-screen', { timeout: 150000 }).type(command)

From 1944a69b5311dfd052dc902f48bc74f10fd1ff97 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 23:30:38 +0800
Subject: [PATCH 22/23] extend timeout

---
 tests/cypress/support/commands.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js
index 9edb868..c5e99d1 100644
--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@@ -23,7 +23,7 @@ Cypress.Commands.add('PrepareForGame', () => {
   cy.visit('/game/helloworld')
   // make sure the game page is loaded
   cy.url().should('include', '/game/helloworld')
-  cy.get('.xterm-screen', { timeout: 30000 })
+  cy.get('.xterm-screen', { timeout: 50000 })
     .as('Terminaltextbox')
     .should('be.visible')
   cy.CheckTextElement('#reset', '重來', 'Reset').click()

From fe604f37816e26cbeddd256e45f0dc9d8ea9307b Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 23 Nov 2023 23:36:30 +0800
Subject: [PATCH 23/23] change verify order

---
 tests/cypress/e2e/helloworld.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index 1dfcb9c..533ae77 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -137,8 +137,8 @@ describe('example helloworld app', () => {
     it('Typing in Terminal', () => {
       cy.typeInCommand('12345{enter}')
       cy.get('@Terminaltextbox')
-        .should('contain', 'zsh: command not found: 12345', { timeout: 50000 })
-        .and('contain', '12345')
+        .should('contain', '12345')
+        .and('contain', 'zsh: command not found: 12345', { timeout: 50000 })
     })
     it('Complete the Game(relating UI)', () => {
       // get answersheet