From 0b136a830aa641aad07d68c62af16e74af8389b5 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Sun, 28 Apr 2024 21:22:11 +0800
Subject: [PATCH 01/16] add start button - new stage will load previous stored
 data at first

---
 app/src/components/game/StartButton.vue | 51 +++++++++++++++++++++++
 app/src/library.ts                      |  4 +-
 app/src/utils/terminal.ts               |  2 +-
 app/src/views/GamePage.vue              | 55 ++++++++++++++-----------
 4 files changed, 87 insertions(+), 25 deletions(-)
 create mode 100644 app/src/components/game/StartButton.vue

diff --git a/app/src/components/game/StartButton.vue b/app/src/components/game/StartButton.vue
new file mode 100644
index 0000000..9e09810
--- /dev/null
+++ b/app/src/components/game/StartButton.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useToast } from 'vue-toastification'
+import { ref } from 'vue'
+import { init } from '../../store/session'
+import { LoadQuestError, LoadSessionError } from '../../utils/errors'
+
+const props = defineProps({
+  questId: {
+    type: String,
+    required: true,
+  },
+})
+
+const toast = useToast()
+const showCover = ref(true)
+const startSession = async () => {
+  showCover.value = false
+  try {
+    await init(props.questId)
+  } catch (err: any) {
+    if (err instanceof LoadQuestError) {
+      toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
+      return
+    }
+    if (err instanceof LoadSessionError) {
+      toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
+      return
+    }
+    console.error(err)
+    toast.error(err.message)
+  }
+}
+</script>
+<template>
+  <div
+    v-if="showCover"
+    class="bg-bg-secondary h-full w-1/2 fixed bg-opacity-50 flex justify-center items-center"
+  >
+    <button
+      id="start"
+      class="bg-bg-secondary rounded-lg p-3"
+      @click="startSession"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'play']"
+        class="text-text-primary h-full px-3"
+      />
+      <p class="text-text-primary inline ml-1 md:flex">開始</p>
+    </button>
+  </div>
+</template>
diff --git a/app/src/library.ts b/app/src/library.ts
index 7f3c00c..d56bf6d 100644
--- a/app/src/library.ts
+++ b/app/src/library.ts
@@ -19,6 +19,7 @@ import {
   faTrophy,
   faFileInvoice,
   faEnvelope,
+  faPlay,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faLightbulb,
@@ -54,5 +55,6 @@ library.add(
   faGoogle,
   faFileInvoice,
   faFacebook,
-  faEnvelope
+  faEnvelope,
+  faPlay
 )
diff --git a/app/src/utils/terminal.ts b/app/src/utils/terminal.ts
index 337047a..a97bdf5 100644
--- a/app/src/utils/terminal.ts
+++ b/app/src/utils/terminal.ts
@@ -46,7 +46,7 @@ class SocketTerminal {
 
   mount(reference: HTMLElement): void {
     this.term.open(reference)
-    this.term.focus()
+    // this.term.focus()
     this.resizeScreen()
   }
 
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 7325737..fcea8e4 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import { useToast } from 'vue-toastification'
-import sessionStore, { init } from '../store/session'
+import { computed } from 'vue'
+// import { onMounted } from 'vue'
+// import { useToast } from 'vue-toastification'
+import sessionStore from '../store/session'
+// import { init } from '../store/session'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 // import CommandlistPart from '../components/CommandlistPart.vue'
@@ -11,37 +13,43 @@ import TerminalPart from '../components/game/TerminalPart.vue'
 import VisualizationPart from '../components/game/VisualizationPart.vue'
 import ControlPalette from '../components/game/ControlPalette.vue'
 import CompleteModal from '../components/game/CompleteModal.vue'
-import { LoadQuestError, LoadSessionError } from '../utils/errors'
+// import { LoadQuestError, LoadSessionError } from '../utils/errors'
+import StartButton from '../components/game/StartButton.vue'
 
 const completed = computed(() => {
   return sessionStore.session.status === 'finished'
 })
 
-const props = defineProps({
+// const props = defineProps({
+//   questId: {
+//     type: String,
+//     required: true,
+//   },
+// })
+defineProps({
   questId: {
     type: String,
     required: true,
   },
 })
+// const toast = useToast()
 
-const toast = useToast()
-
-onMounted(async () => {
-  try {
-    await init(props.questId)
-  } catch (err: any) {
-    if (err instanceof LoadQuestError) {
-      toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
-      return
-    }
-    if (err instanceof LoadSessionError) {
-      toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
-      return
-    }
-    console.error(err)
-    toast.error(err.message)
-  }
-})
+// onMounted(async () => {
+//   try {
+//     await init(props.questId)
+//   } catch (err: any) {
+//     if (err instanceof LoadQuestError) {
+//       toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
+//       return
+//     }
+//     if (err instanceof LoadSessionError) {
+//       toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
+//       return
+//     }
+//     console.error(err)
+//     toast.error(err.message)
+//   }
+// })
 </script>
 
 <template>
@@ -72,6 +80,7 @@ onMounted(async () => {
     </div>
     <!-- Terminal and Hint -->
     <div class="bg-bg h-full rounded-lg w-1/2">
+      <StartButton :questId="$props.questId" />
       <section id="hint" class="h-3/5">
         <HintPart />
       </section>

From ea2ba2c7a023f348f7e2881004f73039c9b18fc4 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Mon, 24 Jun 2024 16:18:31 +0800
Subject: [PATCH 02/16] load quest info before start

---
 app/src/components/game/StartButton.vue |  3 ++-
 app/src/store/session.ts                | 16 ++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/src/components/game/StartButton.vue b/app/src/components/game/StartButton.vue
index 9e09810..7d01189 100644
--- a/app/src/components/game/StartButton.vue
+++ b/app/src/components/game/StartButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
 import { ref } from 'vue'
-import { init } from '../../store/session'
+import { init, setQuest } from '../../store/session'
 import { LoadQuestError, LoadSessionError } from '../../utils/errors'
 
 const props = defineProps({
@@ -13,6 +13,7 @@ const props = defineProps({
 
 const toast = useToast()
 const showCover = ref(true)
+setQuest(props.questId)
 const startSession = async () => {
   showCover.value = false
   try {
diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 233aabc..b633678 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -42,7 +42,7 @@ const store = reactive<Store>({
 const socket = new Socket()
 const term = new SocketTerminal(40, 80)
 
-function setQuest(questId: string) {
+export function setQuest(questId: string) {
   return api.get(`/quests/${questId}`).then((res) => {
     store.questId = res.data._id
     store.quest = res.data
@@ -121,13 +121,13 @@ export function reset() {
 
 export async function init(questId: string) {
   if (!questId) throw new Error('No quest ID provided')
-  reset()
-  try {
-    await setQuest(questId)
-  } catch (err) {
-    console.error(err)
-    throw new LoadQuestError('Failed to load quest', questId)
-  }
+  // reset()
+  // try {
+  //   await setQuest(questId)
+  // } catch (err) {
+  //   console.error(err)
+  //   throw new LoadQuestError('Failed to load quest', questId)
+  // }
   try {
     await getActiveSession(questId)
   } catch (err) {

From 15465feda9cc27819abfe0a94225c3d28084471e Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 25 Jun 2024 16:13:02 +0800
Subject: [PATCH 03/16] auto connect session, create session after button

---
 app/src/components/game/StartButton.vue | 26 +++++++++++++----
 app/src/store/session.ts                | 39 +++++++++++++------------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/app/src/components/game/StartButton.vue b/app/src/components/game/StartButton.vue
index 7d01189..998fa26 100644
--- a/app/src/components/game/StartButton.vue
+++ b/app/src/components/game/StartButton.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
 import { ref } from 'vue'
-import { init, setQuest } from '../../store/session'
+import { getActiveSession, setQuest, createSession } from '../../store/session'
 import { LoadQuestError, LoadSessionError } from '../../utils/errors'
 
 const props = defineProps({
@@ -12,12 +12,12 @@ const props = defineProps({
 })
 
 const toast = useToast()
-const showCover = ref(true)
-setQuest(props.questId)
-const startSession = async () => {
-  showCover.value = false
+const showCover = ref(false)
+
+function init(questId: string) {
+  if (!questId) throw new Error('No quest ID provided')
   try {
-    await init(props.questId)
+    getActiveSession(props.questId)
   } catch (err: any) {
     if (err instanceof LoadQuestError) {
       toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
@@ -27,6 +27,20 @@ const startSession = async () => {
       toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
       return
     }
+    console.error(err)
+    toast.warning('Failed to connect previous session. Creating a new one...')
+    showCover.value = true
+  }
+}
+
+init(props.questId)
+setQuest(props.questId)
+
+const startSession = async () => {
+  showCover.value = false
+  try {
+    createSession()
+  } catch (err: any) {
     console.error(err)
     toast.error(err.message)
   }
diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index b633678..d941721 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -80,14 +80,15 @@ export async function createSession() {
   }
 }
 
-async function getActiveSession(questId: string) {
+export async function getActiveSession(questId: string) {
   try {
     const res = await api.post('/sessions/active', { questId })
     await setSession(res.data)
   } catch (err) {
     console.error(err)
-    toast.warning('Failed to connect previous session. Creating a new one...')
-    await createSession()
+    throw new LoadSessionError('Failed to load session', questId)
+    // toast.warning('Failed to connect previous session. Creating a new one...')
+    // await createSession()
   }
 }
 
@@ -119,22 +120,22 @@ export function reset() {
   store.quest = null
 }
 
-export async function init(questId: string) {
-  if (!questId) throw new Error('No quest ID provided')
-  // reset()
-  // try {
-  //   await setQuest(questId)
-  // } catch (err) {
-  //   console.error(err)
-  //   throw new LoadQuestError('Failed to load quest', questId)
-  // }
-  try {
-    await getActiveSession(questId)
-  } catch (err) {
-    console.error(err)
-    throw new LoadSessionError('Failed to load session', questId)
-  }
-}
+// export async function init(questId: string) {
+//   if (!questId) throw new Error('No quest ID provided')
+// reset()
+// try {
+//   await setQuest(questId)
+// } catch (err) {
+//   console.error(err)
+//   throw new LoadQuestError('Failed to load quest', questId)
+// }
+//   try {
+//     await getActiveSession(questId)
+//   } catch (err) {
+//     console.error(err)
+//     throw new LoadSessionError('Failed to load session', questId)
+//   }
+// }
 
 function setup() {
   socket.on('terminal', (data: string) => {

From 2eaf3c8f24f984b571e50ab925e30a6f257ff712 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 25 Jun 2024 16:24:16 +0800
Subject: [PATCH 04/16] auto type echo start

---
 app/src/store/session.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index d941721..6171350 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -74,6 +74,7 @@ export async function createSession() {
     const res = await api.post('/sessions', { questId: store.questId })
     const { data } = res
     await setSession(data)
+    socket.emit('terminal', 'echo start')
   } catch (err) {
     console.error(err)
     toast.error('Failed to create a new session. Please try again later.')

From 4e6602d82faabc7eb10a2038754dbc0a42318aa1 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 25 Jun 2024 19:01:26 +0800
Subject: [PATCH 05/16] change post to get (not yet success)

---
 app/src/store/session.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 6171350..8bee28d 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -83,7 +83,10 @@ export async function createSession() {
 
 export async function getActiveSession(questId: string) {
   try {
-    const res = await api.post('/sessions/active', { questId })
+    // const res = await api.post('/sessions/active', { questId })
+    const res = await api.get(`/sessions/${questId}`, {
+      params: { status: 'active' },
+    })
     await setSession(res.data)
   } catch (err) {
     console.error(err)

From 103ce4774c61f81b66b25930285ba28029a238c0 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 10:31:26 +0800
Subject: [PATCH 06/16] refactor: rename dev docker compose file and remove
 unused services

---
 docker-compose.dev.yml | 95 ------------------------------------------
 docker-compose.yml     | 23 ++++++++++
 2 files changed, 23 insertions(+), 95 deletions(-)
 delete mode 100644 docker-compose.dev.yml
 create mode 100644 docker-compose.yml

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
deleted file mode 100644
index b35aba1..0000000
--- a/docker-compose.dev.yml
+++ /dev/null
@@ -1,95 +0,0 @@
-version: '3'
-services:
-  app:
-    depends_on:
-      - backend
-    build:
-      context: .
-      dockerfile: app/Dockerfile
-      target: dev
-    ports:
-      - 5173:5173
-    networks:
-      - internal
-    volumes:
-      - ./app:/app/app
-      - ./packages:/app/packages
-
-  backend:
-    depends_on:
-      - db
-    build:
-      context: .
-      dockerfile: server/Dockerfile
-      target: dev
-    networks:
-      - internal
-      - players
-    ports:
-      - '3000:3000'
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-      - ./server/src:/app/server/src
-      - ./server/dist:/app/server/dist
-      - ./server/swagger.yaml:/app/server/swagger.yaml
-      - ./packages:/app/packages
-      - ./quests:/app/quests
-      - ./logs:/app/logs
-    environment:
-      - BASE_URL=http://localhost:5173
-      - MONGO_URL=mongodb://db:27017/odyssey-test
-      - DOCKER_NETWORK=linux-odyssey-players
-      - SECRET_KEY=b1d2e917-17b9-4fce-9055-082dee6ec5d6 # Only for testing
-      - TRUSTED_PROXIES=${TRUSTED_PROXIES}
-      - SURVEY_URL=${SURVEY_URL}
-      - BUG_REPORT_URL=${BUG_REPORT_URL}
-      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
-      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
-      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
-      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
-      - TESTING=true
-      - TESTING_USERNAME=alex
-      - TESTING_PASSWORD=Alex1234
-      - HOST_PWD=${PWD}
-      - MOUNT_QUEST=${MOUNT_QUEST}
-
-  analytics:
-    build:
-      context: .
-      dockerfile: packages/analytics/Dockerfile
-      target: dev
-    depends_on:
-      - db
-    networks:
-      - internal
-    ports:
-      - '3001:3001'
-    environment:
-      - MONGO_URL=mongodb://db:27017/odyssey-test
-      - ADMIN_USERNAME=alex
-      - ADMIN_PASSWORD=Alex1234
-    volumes:
-      - ./packages/analytics:/app/packages/analytics
-      - ./packages/models:/app/packages/models
-
-  db:
-    image: mongo
-    restart: always
-    networks:
-      - internal
-    ports:
-      - '27017:27017'
-    volumes:
-      - ./data:/data/db
-
-  base:
-    image: linuxodyssey/quest-base
-    build:
-      context: .
-      dockerfile: ./quests/Dockerfile
-
-networks:
-  internal:
-  players:
-    name: linux-odyssey-players
-    internal: true
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..f7065bd
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,23 @@
+version: '3'
+services:
+  db:
+    image: mongo
+    restart: always
+    networks:
+      - internal
+    ports:
+      - '27017:27017'
+    volumes:
+      - ./data:/data/db
+
+  base:
+    image: linuxodyssey/quest-base
+    build:
+      context: .
+      dockerfile: ./quests/Dockerfile
+
+networks:
+  internal:
+  players:
+    name: linux-odyssey-players
+    internal: true

From 8a31a58c5674e04f25dc4496532c05b2b371d14e Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 10:48:08 +0800
Subject: [PATCH 07/16] refactor: rewrite user profile store using pinia

---
 README.md                                     |   2 +-
 app/package.json                              |   3 +-
 app/src/components/GameHeaderPart.vue         | 142 ------------------
 .../header/GameHeaderComponents.vue           |  12 +-
 app/src/main.ts                               |   4 +
 app/src/store/userProfile.ts                  |  59 ++++----
 app/src/utils/api.ts                          |   6 +
 yarn.lock                                     |  18 +++
 8 files changed, 68 insertions(+), 178 deletions(-)
 delete mode 100644 app/src/components/GameHeaderPart.vue

diff --git a/README.md b/README.md
index fd56c86..61bc910 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@
 
 Run mongoDB first:
 
-    docker compose -f docker-compose.dev.yml up -d db
+    docker compose up -d
 
 The db will automatically restarts by Docker.
 
diff --git a/app/package.json b/app/package.json
index f571179..8a0d3ad 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,13 +16,14 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@linux-odyssey/constants": "*",
     "@linux-odyssey/file-graph": "*",
-    "@linux-odyssey/utils": "*",
     "@linux-odyssey/models": "*",
+    "@linux-odyssey/utils": "*",
     "@types/dompurify": "^3.0.5",
     "axios": "^1.6.0",
     "dompurify": "^3.0.6",
     "echarts": "^5.4.3",
     "marked": "^10.0.0",
+    "pinia": "^2.1.7",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",
diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
deleted file mode 100644
index 986b6e0..0000000
--- a/app/src/components/GameHeaderPart.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { defineProps, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { logout } from '../utils/auth'
-import { bugReportUrl, surveyUrl } from '../config'
-import { reset } from '../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../store/userProfile'
-
-const router = useRouter()
-
-const toast = useToast()
-
-const handleLogout = async () => {
-  try {
-    await logout()
-    resetUserProfile()
-    reset()
-    router.push({ name: 'login' })
-  } catch (err) {
-    toast.error('登出失敗')
-    console.error(err)
-  }
-}
-
-defineProps({
-  title: {
-    type: String,
-    required: false,
-  },
-})
-
-onMounted(async () => {
-  try {
-    await loadUserProfile()
-  } catch (err) {
-    console.error(err)
-    toast.error('無法讀取使用者資料')
-  }
-})
-</script>
-
-<template>
-  <div id="header" class="bg-bg-secondary content-center h-full w-full p-1">
-    <div class="h-full flex items-center justify-center mx-3">
-      <div class="flex items-center gap-3">
-        <!-- <button id="stream" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'bars']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="backward" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-left']"
-            class="text-border h-full w-full"
-          />
-        </button> -->
-        <img src="../img/icon_totem.svg" class="h-5" />
-        <button
-          id="GameTitle"
-          class="text-text-primary inline-block font-bold whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          Linux Odyssey
-        </button>
-        <p
-          id="QuestTitle"
-          class="text-text inline-block font-bold whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          {{ title }}
-        </p>
-      </div>
-      <div class="h-full w-full flex gap-3 items-center justify-end">
-        <!-- <button id="warning" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="setting" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'gear']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="fullscreen" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'expand']"
-            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>
-        <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'file-invoice']"
-            class="text-text-primary h-full w-full"
-          />
-        </a>
-        <RouterLink title="LeaderBoard" to="/leaderboard" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'trophy']"
-            class="text-text-primary h-full w-full"
-          />
-        </RouterLink>
-        <RouterLink title="Map" to="/map" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'map']"
-            class="text-text-primary h-full w-full"
-          />
-        </RouterLink>
-        <a
-          title="Bug Report"
-          :href="bugReportUrl"
-          target="_blank"
-          class="h-5 w-5"
-        >
-          <font-awesome-icon
-            :icon="['fas', 'bug']"
-            class="text-text-primary h-full w-full"
-          />
-        </a>
-        <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-right-from-bracket']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index e69e758..c497807 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -5,11 +5,9 @@ import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
 import { bugReportUrl, surveyUrl } from '../../config'
 import { reset } from '../../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../../store/userProfile'
+import useUserProfile from '../../store/userProfile'
 
+const store = useUserProfile()
 const router = useRouter()
 
 const toast = useToast()
@@ -17,7 +15,7 @@ const toast = useToast()
 const handleLogout = async () => {
   try {
     await logout()
-    resetUserProfile()
+    store.resetUserProfile()
     reset()
     router.push({ name: 'login' })
   } catch (err) {
@@ -28,7 +26,7 @@ const handleLogout = async () => {
 
 onMounted(async () => {
   try {
-    await loadUserProfile()
+    await store.loadUserProfile()
   } catch (err) {
     toast.error('無法讀取使用者資料')
     console.error(err)
@@ -59,7 +57,7 @@ onMounted(async () => {
     class="text-text inline-block whitespace-nowrap px-1.5"
     style="font-size: 2vh"
   >
-    {{ userProfileStore.username }}
+    {{ store.username }}
   </p>
   <a
     title="Survey"
diff --git a/app/src/main.ts b/app/src/main.ts
index 9048f77..2a36c57 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
 import './style.css'
 /* import font awesome icon component */
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -13,9 +15,11 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
 
 app.component('font-awesome-icon', FontAwesomeIcon)
 
+app.use(pinia)
 app.use(router)
 
 const options = {
diff --git a/app/src/store/userProfile.ts b/app/src/store/userProfile.ts
index 27d60ad..7a154db 100644
--- a/app/src/store/userProfile.ts
+++ b/app/src/store/userProfile.ts
@@ -1,30 +1,35 @@
-import { reactive } from 'vue'
-import api from '../utils/api'
+import { defineStore } from 'pinia'
+import { getUserProfile } from '../utils/api'
 
-const store = reactive({
-  username: '',
-  email: '',
-  progress: {},
+interface IProgress {
+  quest: string
+  sessions: string[]
+  completed: boolean
+  startedAt: Date
+  finishedAt?: Date
+}
+
+export interface UserProfile {
+  username: string
+  email: string
+  progress: Map<string, IProgress>
+}
+
+const useUserProfile = defineStore('userProfile', {
+  state: (): UserProfile => ({
+    username: '',
+    email: '',
+    progress: new Map<string, IProgress>(),
+  }),
+  actions: {
+    async loadUserProfile() {
+      const res = await getUserProfile()
+      this.$patch(res)
+    },
+    async resetUserProfile() {
+      this.$reset()
+    },
+  },
 })
 
-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: any) {
-    console.error(err)
-    throw new Error(`Failed to load user profile: ${err.message}`)
-  }
-}
-
-export function resetUserProfile() {
-  store.username = ''
-  store.email = ''
-  store.progress = {}
-}
-
-export default store
+export default useUserProfile
diff --git a/app/src/utils/api.ts b/app/src/utils/api.ts
index a0bbef5..f298863 100644
--- a/app/src/utils/api.ts
+++ b/app/src/utils/api.ts
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { UserProfile } from '../store/userProfile'
 
 const api = axios.create({
   baseURL: '/api/v1',
@@ -8,3 +9,8 @@ const api = axios.create({
   withCredentials: true,
 })
 export default api
+
+export async function getUserProfile(): Promise<UserProfile> {
+  const res = await api.get<UserProfile>('/users/me')
+  return res.data
+}
diff --git a/yarn.lock b/yarn.lock
index a97122d..ab01e36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2479,6 +2479,11 @@
     "@vue/compiler-dom" "3.4.19"
     "@vue/shared" "3.4.19"
 
+"@vue/devtools-api@^6.5.0":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
+  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
+
 "@vue/devtools-api@^6.5.1":
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
@@ -6773,6 +6778,14 @@ pify@^2.2.0, pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+pinia@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
+  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 pirates@^4.0.1, pirates@^4.0.4:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
@@ -8160,6 +8173,11 @@ vite@^4.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@>=0.14.5:
+  version "0.14.8"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
+  integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==
+
 vue-eslint-parser@^9.4.2:
   version "9.4.2"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz#02ffcce82042b082292f2d1672514615f0d95b6d"

From 78b9529699ca8bfa04e165f4aa76a7685da314c5 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 10:52:02 +0800
Subject: [PATCH 08/16] refactor: rewrite map page using user profile store

---
 app/src/components/QuestMap.vue | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 235edd0..bc75ed7 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -14,7 +14,9 @@ import {
 import { DAG } from '@linux-odyssey/utils'
 import api from '../utils/api'
 import { NodeImage } from '../img/svg.js'
+import useUserProfile from '../store/userProfile'
 
+const store = useUserProfile()
 const marginX = 500
 const marginY = 300
 const chartContainer = ref(null)
@@ -40,16 +42,6 @@ async function getQuests() {
   }
 }
 
-async function getProgress() {
-  try {
-    const res = await api.get('/users/me')
-    return res.data.progress
-  } catch (err) {
-    console.error(err)
-    throw err
-  }
-}
-
 const genOption = (nodes: any, edges: any) => ({
   renderer: 'svg',
   tooltip: {},
@@ -163,8 +155,7 @@ function initChart(option: any) {
 
 onMounted(async () => {
   const quests = await getQuests()
-  const progress = await getProgress()
-  const option = getOption(quests, progress)
+  const option = getOption(quests, store.progress)
   initChart(option)
 })
 </script>

From 7cdc542c191152c72ba291e53f181a086c0a94a1 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 11:23:21 +0800
Subject: [PATCH 09/16] refactor: rewrite session store using pinia and fix
 start button

---
 app/src/components/game/ControlPalette.vue    |   9 +-
 app/src/components/game/HintPart.vue          |   3 +-
 app/src/components/game/QuestPart.vue         |   3 +-
 app/src/components/game/StartButton.vue       |  38 +---
 app/src/components/game/TreeChart.vue         |   4 +-
 .../header/GameHeaderComponents.vue           |  13 +-
 app/src/store/session.ts                      | 211 +++++++-----------
 app/src/utils/api.ts                          |  20 ++
 app/src/views/GamePage.vue                    |  28 +--
 packages/constants/index.ts                   |  13 +-
 packages/constants/package.json               |   3 +
 server/swagger.yaml                           |  13 ++
 yarn.lock                                     |   5 +
 13 files changed, 171 insertions(+), 192 deletions(-)

diff --git a/app/src/components/game/ControlPalette.vue b/app/src/components/game/ControlPalette.vue
index bd2bbf7..b423112 100644
--- a/app/src/components/game/ControlPalette.vue
+++ b/app/src/components/game/ControlPalette.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
-import { createSession } from '../../store/session'
+import useSession from '../../store/session'
 import { surveyUrl } from '../../config'
 
 const router = useRouter()
+const sessionStore = useSession()
 const reset = async () => {
   console.log('resetting...')
-  await createSession()
+  await sessionStore.createSession()
 }
 const continuePlay = async () => {
   try {
@@ -29,7 +30,7 @@ const continuePlay = async () => {
           :icon="['fas', 'file-invoice']"
           class="text-text-primary px-1"
         />
-        <p class="text-text-primary inline ml-1 hidden md:flex">問卷</p>
+        <p class="text-text-primary inline ml-1 md:flex">問卷</p>
       </a>
     </button>
     <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
@@ -37,7 +38,7 @@ const continuePlay = async () => {
         :icon="['far', 'circle-question']"
         class="text-text-disabled px-1"
       />
-      <p class="text-text-disabled inline ml-1 hidden md:flex">解答</p>
+      <p class="text-text-disabled inline ml-1 md:flex">解答</p>
     </button>
     <button id="reset" class="bg-bg-secondary rounded-lg p-2" @click="reset">
       <font-awesome-icon
diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index 864ac7f..8accec6 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import sessionStore from '../../store/session'
+import useSession from '../../store/session'
 import MarkdownText from '../MarkdownText.vue'
 
+const sessionStore = useSession()
 const current = ref(-1)
 watch(
   () => sessionStore.session.hints,
diff --git a/app/src/components/game/QuestPart.vue b/app/src/components/game/QuestPart.vue
index b199f9d..f65e647 100644
--- a/app/src/components/game/QuestPart.vue
+++ b/app/src/components/game/QuestPart.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownText from '../MarkdownText.vue'
-import sessionStore from '../../store/session'
+import useSession from '../../store/session'
 import { Task } from '../../types'
 
+const sessionStore = useSession()
 const tasks = computed(() => {
   return sessionStore.session.tasks.map((task: Task) => {
     const prefix = task.completed ? '✓' : '➤'
diff --git a/app/src/components/game/StartButton.vue b/app/src/components/game/StartButton.vue
index 998fa26..073c8e3 100644
--- a/app/src/components/game/StartButton.vue
+++ b/app/src/components/game/StartButton.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { ref } from 'vue'
-import { getActiveSession, setQuest, createSession } from '../../store/session'
-import { LoadQuestError, LoadSessionError } from '../../utils/errors'
+import { onMounted, ref } from 'vue'
+import useSession from '../../store/session'
 
 const props = defineProps({
   questId: {
@@ -12,34 +11,21 @@ const props = defineProps({
 })
 
 const toast = useToast()
-const showCover = ref(false)
+const showCover = ref(true)
+const sessionStore = useSession()
 
-function init(questId: string) {
-  if (!questId) throw new Error('No quest ID provided')
-  try {
-    getActiveSession(props.questId)
-  } catch (err: any) {
-    if (err instanceof LoadQuestError) {
-      toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
-      return
-    }
-    if (err instanceof LoadSessionError) {
-      toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
-      return
-    }
-    console.error(err)
-    toast.warning('Failed to connect previous session. Creating a new one...')
-    showCover.value = true
+onMounted(async () => {
+  sessionStore.setQuest(props.questId)
+  if (await sessionStore.getActiveSession()) {
+    showCover.value = false
   }
-}
-
-init(props.questId)
-setQuest(props.questId)
+  sessionStore.setup()
+})
 
 const startSession = async () => {
-  showCover.value = false
   try {
-    createSession()
+    await sessionStore.createSession()
+    showCover.value = false
   } catch (err: any) {
     console.error(err)
     toast.error(err.message)
diff --git a/app/src/components/game/TreeChart.vue b/app/src/components/game/TreeChart.vue
index 0c85c6d..a1f212e 100644
--- a/app/src/components/game/TreeChart.vue
+++ b/app/src/components/game/TreeChart.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import FileNode from '../FileNode.vue'
-import sessionStore from '../../store/session'
+import useSession from '../../store/session'
+
+const sessionStore = useSession()
 </script>
 
 <template>
diff --git a/app/src/components/header/GameHeaderComponents.vue b/app/src/components/header/GameHeaderComponents.vue
index c497807..ef9a685 100644
--- a/app/src/components/header/GameHeaderComponents.vue
+++ b/app/src/components/header/GameHeaderComponents.vue
@@ -4,10 +4,11 @@ import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
 import { bugReportUrl, surveyUrl } from '../../config'
-import { reset } from '../../store/session'
+import useSession from '../../store/session'
 import useUserProfile from '../../store/userProfile'
 
-const store = useUserProfile()
+const userStore = useUserProfile()
+const sessionStore = useSession()
 const router = useRouter()
 
 const toast = useToast()
@@ -15,8 +16,8 @@ const toast = useToast()
 const handleLogout = async () => {
   try {
     await logout()
-    store.resetUserProfile()
-    reset()
+    userStore.resetUserProfile()
+    sessionStore.reset()
     router.push({ name: 'login' })
   } catch (err) {
     toast.error('登出失敗')
@@ -26,7 +27,7 @@ const handleLogout = async () => {
 
 onMounted(async () => {
   try {
-    await store.loadUserProfile()
+    await userStore.loadUserProfile()
   } catch (err) {
     toast.error('無法讀取使用者資料')
     console.error(err)
@@ -57,7 +58,7 @@ onMounted(async () => {
     class="text-text inline-block whitespace-nowrap px-1.5"
     style="font-size: 2vh"
   >
-    {{ store.username }}
+    {{ userStore.username }}
   </p>
   <a
     title="Survey"
diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 8bee28d..61ec6ea 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -1,31 +1,13 @@
-import { reactive } from 'vue'
-import { useToast } from 'vue-toastification'
+import { defineStore } from 'pinia'
 import { FileGraph, FileObject } from '@linux-odyssey/file-graph'
 import { IQuest } from '@linux-odyssey/models'
-import api from '../utils/api'
+import { createSession, getQuest, getSessions } from '../utils/api'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'
-import { LoadQuestError, LoadSessionError } from '../utils/errors'
 import { Session, StageResponse } from '../types'
 
-const toast = useToast()
-
-function newSession() {
-  const graph = new FileGraph({
-    path: '/',
-    type: 'folder',
-    discovered: false,
-  })
-  return {
-    _id: '',
-    status: 'inactive',
-    graph,
-    pwd: '',
-    hints: [],
-    tasks: [],
-    responses: [],
-  }
-}
+const socket = new Socket()
+const term = new SocketTerminal(40, 80)
 
 interface Store {
   session: Session
@@ -33,97 +15,93 @@ interface Store {
   quest: IQuest | null
 }
 
-const store = reactive<Store>({
-  session: newSession(),
-  questId: '',
-  quest: null,
+const useSession = defineStore('session', {
+  state: (): Store => ({
+    session: {
+      _id: '',
+      status: 'inactive',
+      graph: new FileGraph({
+        path: '/',
+        type: 'folder',
+        discovered: false,
+      }),
+      pwd: '',
+      hints: [],
+      tasks: [],
+      responses: [],
+    },
+    questId: '',
+    quest: null,
+  }),
+  actions: {
+    async setQuest(questId: string) {
+      this.quest = await getQuest(questId)
+      this.questId = questId
+    },
+    async setSession(session: Session) {
+      this.session = session
+      this.session.graph = new FileGraph(session.graph)
+      term.reset()
+      await socket.connect(session)
+      term.focus()
+    },
+    async createSession() {
+      const session = await createSession(this.questId)
+      this.setSession(session)
+    },
+    async getActiveSession() {
+      const sessions = await getSessions({
+        questId: this.questId,
+        limit: 1,
+        order: 'desc',
+        status: 'active',
+      })
+      if (sessions.length > 0) {
+        this.setSession(sessions[0])
+        return true
+      }
+      return false
+    },
+    updateGraph(event: { discover?: FileObject[]; pwd?: string }) {
+      if (event.discover) {
+        this.session.graph.discover(event.discover)
+      }
+      if (event.pwd) {
+        this.session.pwd = event.pwd
+      }
+    },
+    newResponse(response: StageResponse) {
+      this.session.responses.push(response.responses)
+      this.session.hints.push(response.hints)
+      this.session.tasks = response.tasks
+      this.session.status = response.status
+    },
+    reset() {
+      socket.reset()
+      term.reset()
+      this.$reset()
+    },
+    setup() {
+      socket.on('terminal', (data: string) => {
+        term.write(data)
+      })
+      term.onData((data: string) => {
+        socket.emit('terminal', data)
+      })
+      socket.on('graph', (event: { discover: FileObject[]; pwd: string }) => {
+        this.updateGraph(event)
+      })
+      socket.on('response', (response: StageResponse) => {
+        this.newResponse(response)
+      })
+    },
+  },
 })
 
-const socket = new Socket()
-const term = new SocketTerminal(40, 80)
-
-export function setQuest(questId: string) {
-  return api.get(`/quests/${questId}`).then((res) => {
-    store.questId = res.data._id
-    store.quest = res.data
-  })
-}
-
-async function setSession(session: Session) {
-  try {
-    console.log('Setting session...', session)
-    store.session = session
-    store.session.graph = new FileGraph(session.graph)
-    term.reset()
-    await socket.connect(session)
-    term.focus()
-  } catch (err: any) {
-    console.error(err)
-    if (err instanceof Error) {
-      toast.error(err.message)
-    } else {
-      toast.error('Failed to connect to the session. Please try again later.')
-    }
-    throw err
-  }
-}
-
-export async function createSession() {
-  try {
-    console.log('Creating a new session...')
-    const res = await api.post('/sessions', { questId: store.questId })
-    const { data } = res
-    await setSession(data)
-    socket.emit('terminal', 'echo start')
-  } catch (err) {
-    console.error(err)
-    toast.error('Failed to create a new session. Please try again later.')
-  }
-}
-
-export async function getActiveSession(questId: string) {
-  try {
-    // const res = await api.post('/sessions/active', { questId })
-    const res = await api.get(`/sessions/${questId}`, {
-      params: { status: 'active' },
-    })
-    await setSession(res.data)
-  } catch (err) {
-    console.error(err)
-    throw new LoadSessionError('Failed to load session', questId)
-    // toast.warning('Failed to connect previous session. Creating a new one...')
-    // await createSession()
-  }
-}
-
-function updateGraph(event: { discover: FileObject[]; pwd: string }) {
-  if (event.discover) {
-    store.session.graph.discover(event.discover)
-  }
-  if (event.pwd) {
-    store.session.pwd = event.pwd
-  }
-}
-
-function newResponse(response: StageResponse) {
-  console.log('newResponse', response, 'session', store.session)
-  store.session.responses.push(response.responses)
-  store.session.hints.push(response.hints)
-  store.session.tasks = response.tasks
-  store.session.status = response.status
-}
-
 export function useTerminal() {
   return term
 }
 
-export function reset() {
-  socket.reset()
-  term.reset()
-  store.session = newSession()
-  store.quest = null
-}
-
 // export async function init(questId: string) {
 //   if (!questId) throw new Error('No quest ID provided')
 // reset()
@@ -141,21 +119,4 @@ export function reset() {
 //   }
 // }
 
-function setup() {
-  socket.on('terminal', (data: string) => {
-    term.write(data)
-  })
-  term.onData((data: string) => {
-    socket.emit('terminal', data)
-  })
-  socket.on('graph', (event: { discover: FileObject[]; pwd: string }) => {
-    updateGraph(event)
-  })
-  socket.on('response', (response: StageResponse) => {
-    newResponse(response)
-  })
-}
-
-setup()
-
-export default store
+export default useSession
diff --git a/app/src/utils/api.ts b/app/src/utils/api.ts
index f298863..a5808ac 100644
--- a/app/src/utils/api.ts
+++ b/app/src/utils/api.ts
@@ -1,4 +1,7 @@
 import axios from 'axios'
+import { IQuest } from '@linux-odyssey/models'
+import { GetSessionsRequest } from '@linux-odyssey/constants'
+import { Session } from '../types'
 import { UserProfile } from '../store/userProfile'
 
 const api = axios.create({
@@ -14,3 +17,20 @@ export async function getUserProfile(): Promise<UserProfile> {
   const res = await api.get<UserProfile>('/users/me')
   return res.data
 }
+
+export async function getQuest(id: string): Promise<IQuest> {
+  const res = await api.get<IQuest>(`/quests/${id}`)
+  return res.data
+}
+
+export async function createSession(questId: string): Promise<Session> {
+  const res = await api.post<Session>('/sessions', { questId })
+  return res.data
+}
+
+export async function getSessions(
+  request: GetSessionsRequest
+): Promise<Session[]> {
+  const res = await api.get<Session[]>('/sessions', { params: request })
+  return res.data
+}
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index fcea8e4..c18eee0 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 // import { onMounted } from 'vue'
 // import { useToast } from 'vue-toastification'
-import sessionStore from '../store/session'
+import useSession from '../store/session'
 // import { init } from '../store/session'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
@@ -13,19 +13,14 @@ import TerminalPart from '../components/game/TerminalPart.vue'
 import VisualizationPart from '../components/game/VisualizationPart.vue'
 import ControlPalette from '../components/game/ControlPalette.vue'
 import CompleteModal from '../components/game/CompleteModal.vue'
-// import { LoadQuestError, LoadSessionError } from '../utils/errors'
 import StartButton from '../components/game/StartButton.vue'
 
+const sessionStore = useSession()
+
 const completed = computed(() => {
   return sessionStore.session.status === 'finished'
 })
 
-// const props = defineProps({
-//   questId: {
-//     type: String,
-//     required: true,
-//   },
-// })
 defineProps({
   questId: {
     type: String,
@@ -33,23 +28,6 @@ defineProps({
   },
 })
 // const toast = useToast()
-
-// onMounted(async () => {
-//   try {
-//     await init(props.questId)
-//   } catch (err: any) {
-//     if (err instanceof LoadQuestError) {
-//       toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
-//       return
-//     }
-//     if (err instanceof LoadSessionError) {
-//       toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
-//       return
-//     }
-//     console.error(err)
-//     toast.error(err.message)
-//   }
-// })
 </script>
 
 <template>
diff --git a/packages/constants/index.ts b/packages/constants/index.ts
index 0ff060b..c555e8e 100644
--- a/packages/constants/index.ts
+++ b/packages/constants/index.ts
@@ -1,3 +1,5 @@
+import { z } from 'zod'
+
 export const passwordPolicy = {
   minLength: 8,
   minNumbers: 1,
@@ -6,6 +8,11 @@ export const passwordPolicy = {
   minSymbols: 0,
 }
 
-export default {
-  passwordPolicy,
-}
+export const getSessionsRequestSchema = z.object({
+  questId: z.string().optional(),
+  status: z.enum(['active', 'inactive', 'finished']).optional(),
+  limit: z.coerce.number().optional(),
+  order: z.enum(['asc', 'desc']).optional(),
+})
+
+export type GetSessionsRequest = z.infer<typeof getSessionsRequestSchema>
diff --git a/packages/constants/package.json b/packages/constants/package.json
index 39f0201..ec494fd 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -10,5 +10,8 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc -w"
+  },
+  "dependencies": {
+    "zod": "^3.23.8"
   }
 }
diff --git a/server/swagger.yaml b/server/swagger.yaml
index b2a0605..c5e854b 100644
--- a/server/swagger.yaml
+++ b/server/swagger.yaml
@@ -37,6 +37,19 @@ paths:
           schema:
             type: string
             enum: [active, finished, inactive]
+        - in: query
+          name: limit
+          description: limit the number of sessions to return
+          schema:
+            type: number
+            example: 10
+        - in: query
+          name: order
+          description: order the sessions by createdAt
+          schema:
+            type: string
+            enum: [asc, desc]
+            example: desc
       responses:
         '200':
           description: list of existing session
diff --git a/yarn.lock b/yarn.lock
index ab01e36..643f242 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8475,6 +8475,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zod@^3.23.8:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
+
 zrender@5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.5.0.tgz#54d0d6c4eda81a96d9f60a9cd74dc48ea026bc1e"

From c64043316eaa789679bb161599f7d665fb31560d Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 11:54:28 +0800
Subject: [PATCH 10/16] feat: replace getOrCreateActive session to
 getActiveSession

---
 server/src/api/controllers/sessionController.ts | 13 ++++++++-----
 server/src/api/routes/sessionRouter.ts          |  4 ++--
 server/src/models/sessionManager.ts             | 15 ---------------
 3 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/server/src/api/controllers/sessionController.ts b/server/src/api/controllers/sessionController.ts
index 6c4f348..85e48a9 100644
--- a/server/src/api/controllers/sessionController.ts
+++ b/server/src/api/controllers/sessionController.ts
@@ -3,7 +3,6 @@ import type { Express, Request, Response } from 'express'
 import { User, Session, ISession } from '@linux-odyssey/models'
 import {
   createNewSession,
-  getOrCreateActiveSession,
   isQuestUnlocked,
 } from '../../models/sessionManager.js'
 import { asyncHandler } from '../../middleware/error.js'
@@ -36,6 +35,7 @@ export const getSessionList = asyncHandler(
     const { questId, status } = matchedData(req)
     const query = { user: user.id, quest: questId, status }
     const sessions = await Session.find(query)
+    console.log(query, sessions)
     res.json(sessions.map(sessionSummary))
   }
 )
@@ -56,7 +56,6 @@ export const createSession = asyncHandler(
 export const getSessionById = asyncHandler(
   async (req: Request, res: Response) => {
     const { sessionId } = matchedData(req)
-    console.log(sessionId)
     const session = await Session.findOne({
       _id: sessionId,
       user: (req.user as Express.ExistingUser).id,
@@ -71,7 +70,7 @@ export const getSessionById = asyncHandler(
   }
 )
 
-export const getOrCreateSession = asyncHandler(
+export const getActiveSessionControler = asyncHandler(
   async (req: Request, res: Response) => {
     const { questId } = matchedData(req)
     const user = await User.findById((req.user as Express.ExistingUser).id)
@@ -79,8 +78,12 @@ export const getOrCreateSession = asyncHandler(
       user &&
       ((await isQuestUnlocked(user, questId)) || config.testing.enabled)
     ) {
-      const session = await getOrCreateActiveSession(user, questId)
-      res.json(sessionDetail(session))
+      const session = await Session.findOne({
+        user: user.id,
+        quest: questId,
+        status: 'active',
+      })
+      res.json(session ? sessionDetail(session) : null)
     } else {
       res.status(403).json({ message: 'Quest is locked.' })
     }
diff --git a/server/src/api/routes/sessionRouter.ts b/server/src/api/routes/sessionRouter.ts
index 52e4e0c..bd61b80 100644
--- a/server/src/api/routes/sessionRouter.ts
+++ b/server/src/api/routes/sessionRouter.ts
@@ -17,10 +17,10 @@ router.post(
   sessionRateLimit,
   sessionController.createSession
 )
-router.post(
+router.get(
   '/active',
   activeSessionValidator,
-  sessionController.getOrCreateSession
+  sessionController.getActiveSessionControler
 )
 router.get(
   '/:sessionId',
diff --git a/server/src/models/sessionManager.ts b/server/src/models/sessionManager.ts
index d6bfa2f..798732c 100644
--- a/server/src/models/sessionManager.ts
+++ b/server/src/models/sessionManager.ts
@@ -79,21 +79,6 @@ export async function createNewSession(
   return session
 }
 
-export async function getOrCreateActiveSession(
-  user: HydratedDocument<IUser>,
-  questId: string
-): Promise<ISession> {
-  const session = await Session.findOne({
-    user,
-    quest: questId,
-    status: 'active',
-  })
-  if (session) {
-    return session
-  }
-  return createNewSession(user, questId)
-}
-
 export async function finishSession(
   session: HydratedDocument<ISession>
 ): Promise<void> {

From 3398d18055fe573dce042a6dcfef185485458ef1 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 11:55:34 +0800
Subject: [PATCH 11/16] feat: load session and display start button if not
 exists

---
 app/src/components/game/HintPart.vue    | 24 ++++++++++------
 app/src/components/game/QuestPart.vue   |  2 +-
 app/src/components/game/StartButton.vue | 19 ++-----------
 app/src/components/game/TreeChart.vue   |  1 +
 app/src/store/session.ts                | 37 ++++++++-----------------
 app/src/utils/api.ts                    |  9 ++++++
 app/src/views/GamePage.vue              | 15 ++++++----
 7 files changed, 51 insertions(+), 56 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index 8accec6..f7faaf4 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import useSession from '../../store/session'
 import MarkdownText from '../MarkdownText.vue'
 
 const sessionStore = useSession()
 const current = ref(-1)
 watch(
-  () => sessionStore.session.hints,
+  () => sessionStore.session?.hints,
   (hints) => {
-    current.value = hints.length - 1
+    current.value = hints ? hints.length - 1 : -1
   },
   { deep: true }
 )
@@ -20,10 +20,18 @@ const left = () => {
 }
 
 const right = () => {
-  if (current.value < sessionStore.session.hints.length - 1) {
+  if (current.value < (sessionStore.session?.hints.length ?? 0) - 1) {
     current.value += 1
   }
 }
+
+const length = computed(() => {
+  return sessionStore.session?.hints.length ?? 0
+})
+
+const disabled = computed(() => {
+  return current.value === length.value - 1
+})
 </script>
 
 <template>
@@ -50,13 +58,13 @@ const right = () => {
         <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
         <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
         <p class="inline text-text font-xl w-1/14 p-2 m-1">
-          {{ sessionStore.session.hints.length }}
+          {{ length }}
         </p>
         <button
           class="p-2 m-1 w-1/8"
           id="Rbutton"
           @click="right"
-          :disabled="current === sessionStore.session.hints.length - 1"
+          :disabled="disabled"
         >
           <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
         </button>
@@ -65,7 +73,7 @@ const right = () => {
     <div id="hint" class="bg-bg p-8 overflow-y-auto">
       <ul>
         <li
-          v-for="response in sessionStore.session.responses[current]"
+          v-for="response in sessionStore.session?.responses[current]"
           :key="response.type"
           class="text-text font-xl whitespace-pre-wrap"
         >
@@ -74,7 +82,7 @@ const right = () => {
           </div>
         </li>
         <li
-          v-for="hint in sessionStore.session.hints[current]"
+          v-for="hint in sessionStore.session?.hints[current]"
           :key="hint"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
diff --git a/app/src/components/game/QuestPart.vue b/app/src/components/game/QuestPart.vue
index f65e647..f1cb41f 100644
--- a/app/src/components/game/QuestPart.vue
+++ b/app/src/components/game/QuestPart.vue
@@ -6,7 +6,7 @@ import { Task } from '../../types'
 
 const sessionStore = useSession()
 const tasks = computed(() => {
-  return sessionStore.session.tasks.map((task: Task) => {
+  return sessionStore.session?.tasks.map((task: Task) => {
     const prefix = task.completed ? '✓' : '➤'
     const color = task.completed ? 'text-text-primary' : 'text-text'
     return {
diff --git a/app/src/components/game/StartButton.vue b/app/src/components/game/StartButton.vue
index 073c8e3..e6aa077 100644
--- a/app/src/components/game/StartButton.vue
+++ b/app/src/components/game/StartButton.vue
@@ -1,31 +1,16 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { onMounted, ref } from 'vue'
+import { computed } from 'vue'
 import useSession from '../../store/session'
 
-const props = defineProps({
-  questId: {
-    type: String,
-    required: true,
-  },
-})
-
 const toast = useToast()
-const showCover = ref(true)
 const sessionStore = useSession()
 
-onMounted(async () => {
-  sessionStore.setQuest(props.questId)
-  if (await sessionStore.getActiveSession()) {
-    showCover.value = false
-  }
-  sessionStore.setup()
-})
+const showCover = computed(() => sessionStore.session === null)
 
 const startSession = async () => {
   try {
     await sessionStore.createSession()
-    showCover.value = false
   } catch (err: any) {
     console.error(err)
     toast.error(err.message)
diff --git a/app/src/components/game/TreeChart.vue b/app/src/components/game/TreeChart.vue
index a1f212e..21de693 100644
--- a/app/src/components/game/TreeChart.vue
+++ b/app/src/components/game/TreeChart.vue
@@ -10,6 +10,7 @@ const sessionStore = useSession()
     <ul>
       <li>
         <FileNode
+          v-if="sessionStore.session"
           :node="sessionStore.session.graph"
           :pwd="sessionStore.session.pwd"
         />
diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 61ec6ea..301b6c8 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { FileGraph, FileObject } from '@linux-odyssey/file-graph'
 import { IQuest } from '@linux-odyssey/models'
-import { createSession, getQuest, getSessions } from '../utils/api'
+import { createSession, getActiveSession, getQuest } from '../utils/api'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'
 import { Session, StageResponse } from '../types'
@@ -10,26 +10,14 @@ const socket = new Socket()
 const term = new SocketTerminal(40, 80)
 
 interface Store {
-  session: Session
+  session: Session | null
   questId: string
   quest: IQuest | null
 }
 
 const useSession = defineStore('session', {
   state: (): Store => ({
-    session: {
-      _id: '',
-      status: 'inactive',
-      graph: new FileGraph({
-        path: '/',
-        type: 'folder',
-        discovered: false,
-      }),
-      pwd: '',
-      hints: [],
-      tasks: [],
-      responses: [],
-    },
+    session: null,
     questId: '',
     quest: null,
   }),
@@ -50,19 +38,13 @@ const useSession = defineStore('session', {
       this.setSession(session)
     },
     async getActiveSession() {
-      const sessions = await getSessions({
-        questId: this.questId,
-        limit: 1,
-        order: 'desc',
-        status: 'active',
-      })
-      if (sessions.length > 0) {
-        this.setSession(sessions[0])
-        return true
+      const session = await getActiveSession(this.questId)
+      if (session) {
+        this.setSession(session)
       }
-      return false
     },
     updateGraph(event: { discover?: FileObject[]; pwd?: string }) {
+      if (!this.session) return
       if (event.discover) {
         this.session.graph.discover(event.discover)
       }
@@ -71,6 +53,7 @@ const useSession = defineStore('session', {
       }
     },
     newResponse(response: StageResponse) {
+      if (!this.session) return
       this.session.responses.push(response.responses)
       this.session.hints.push(response.hints)
       this.session.tasks = response.tasks
@@ -95,6 +78,10 @@ const useSession = defineStore('session', {
         this.newResponse(response)
       })
     },
+    setStatus(status: string) {
+      if (!this.session) return
+      this.session.status = status
+    },
   },
 })
 
diff --git a/app/src/utils/api.ts b/app/src/utils/api.ts
index a5808ac..3d22dcc 100644
--- a/app/src/utils/api.ts
+++ b/app/src/utils/api.ts
@@ -34,3 +34,12 @@ export async function getSessions(
   const res = await api.get<Session[]>('/sessions', { params: request })
   return res.data
 }
+
+export async function getActiveSession(
+  questId: string
+): Promise<Session | null> {
+  const res = await api.get<Session | null>('/sessions/active', {
+    params: { questId },
+  })
+  return res.data
+}
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index c18eee0..ce233a8 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 // import { onMounted } from 'vue'
 // import { useToast } from 'vue-toastification'
 import useSession from '../store/session'
@@ -18,16 +18,21 @@ import StartButton from '../components/game/StartButton.vue'
 const sessionStore = useSession()
 
 const completed = computed(() => {
-  return sessionStore.session.status === 'finished'
+  return sessionStore.session?.status === 'finished'
 })
 
-defineProps({
+const props = defineProps({
   questId: {
     type: String,
     required: true,
   },
 })
-// const toast = useToast()
+
+onMounted(async () => {
+  sessionStore.setup()
+  await sessionStore.setQuest(props.questId)
+  await sessionStore.getActiveSession()
+})
 </script>
 
 <template>
@@ -42,7 +47,7 @@ defineProps({
   <input
     type="hidden"
     id="currentStatus"
-    :value="sessionStore.session.status"
+    :value="sessionStore.session?.status"
   />
   <!-- main -->
   <div id="main" class="h-full pt-10 w-full flex p-3 space-x-3">

From 94ef3749f5bb2602d52814c289d140d58cc74e7e Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 12:04:35 +0800
Subject: [PATCH 12/16] fix: socket & terminal states across quests

---
 app/src/store/session.ts   | 3 +++
 app/src/views/GamePage.vue | 1 +
 2 files changed, 4 insertions(+)

diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 301b6c8..9db6e0f 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -8,6 +8,7 @@ import { Session, StageResponse } from '../types'
 
 const socket = new Socket()
 const term = new SocketTerminal(40, 80)
+let hasSetup = false
 
 interface Store {
   session: Session | null
@@ -65,6 +66,7 @@ const useSession = defineStore('session', {
       this.$reset()
     },
     setup() {
+      if (hasSetup) return
       socket.on('terminal', (data: string) => {
         term.write(data)
       })
@@ -77,6 +79,7 @@ const useSession = defineStore('session', {
       socket.on('response', (response: StageResponse) => {
         this.newResponse(response)
       })
+      hasSetup = true
     },
     setStatus(status: string) {
       if (!this.session) return
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index ce233a8..9fcd367 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -29,6 +29,7 @@ const props = defineProps({
 })
 
 onMounted(async () => {
+  sessionStore.reset()
   sessionStore.setup()
   await sessionStore.setQuest(props.questId)
   await sessionStore.getActiveSession()

From dcd8f441f8b966452cbfec99390ed137692767aa Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 27 Jun 2024 12:14:15 +0800
Subject: [PATCH 13/16] feat: echo start after creating session

---
 app/src/components/game/HintPart.vue | 31 +++++++++++++---------------
 app/src/store/session.ts             |  3 ++-
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index f7faaf4..f3487be 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -5,13 +5,18 @@ import MarkdownText from '../MarkdownText.vue'
 
 const sessionStore = useSession()
 const current = ref(-1)
-watch(
-  () => sessionStore.session?.hints,
-  (hints) => {
-    current.value = hints ? hints.length - 1 : -1
-  },
-  { deep: true }
-)
+const length = computed(() => {
+  console.log(sessionStore.session?.responses)
+  return sessionStore.session?.responses.length ?? 0
+})
+
+const disabled = computed(() => {
+  return current.value === length.value - 1
+})
+
+watch(length, () => {
+  current.value = length.value - 1
+})
 
 const left = () => {
   if (current.value > 0) {
@@ -20,18 +25,10 @@ const left = () => {
 }
 
 const right = () => {
-  if (current.value < (sessionStore.session?.hints.length ?? 0) - 1) {
+  if (current.value < length.value - 1) {
     current.value += 1
   }
 }
-
-const length = computed(() => {
-  return sessionStore.session?.hints.length ?? 0
-})
-
-const disabled = computed(() => {
-  return current.value === length.value - 1
-})
 </script>
 
 <template>
@@ -41,7 +38,7 @@ const disabled = computed(() => {
         :icon="['far', 'lightbulb']"
         class="text-yellow-200 p-2 content-center"
       />
-      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">提示</h1>
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">提示 {{ length }}</h1>
       <div v-if="current !== -1" class="flex w-full justify-end items-end">
         <button
           class="p-2 m-1 w-1/8"
diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 9db6e0f..af40272 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -36,7 +36,8 @@ const useSession = defineStore('session', {
     },
     async createSession() {
       const session = await createSession(this.questId)
-      this.setSession(session)
+      await this.setSession(session)
+      socket.emit('terminal', 'echo start\n')
     },
     async getActiveSession() {
       const session = await getActiveSession(this.questId)

From 48835f8830330de52ad180071fa9892cbd2eda9c Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 28 Jun 2024 11:41:12 +0800
Subject: [PATCH 14/16] feat: change e2e to not required

---
 .github/workflows/ci-checks.yml | 20 --------------------
 .github/workflows/e2e.yml       | 24 ++++++++++++++++++++++++
 2 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 .github/workflows/e2e.yml

diff --git a/.github/workflows/ci-checks.yml b/.github/workflows/ci-checks.yml
index be850ff..09bdc15 100644
--- a/.github/workflows/ci-checks.yml
+++ b/.github/workflows/ci-checks.yml
@@ -35,23 +35,3 @@ jobs:
 
       - name: Test
         run: yarn test
-
-  e2e:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v3
-
-      - name: Build Test Environment, Stage 1
-        run: docker-compose -f docker-compose.testing.yml build base backend app-test cypress
-
-      - name: Build Test Quests
-        run: docker-compose -f docker-compose.testing.yml run --rm backend yarn build:quests
-
-      - name: Run Cypress Tests
-        env:
-          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
-          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
-          GITHUB_CLIENT_ID: ${{ secrets.GH_CLIENT_ID }}
-          GITHUB_CLIENT_SECRET: ${{ secrets.GH_CLIENT_SECRET }}
-        run: docker-compose -f docker-compose.testing.yml run cypress
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
new file mode 100644
index 0000000..bf12175
--- /dev/null
+++ b/.github/workflows/e2e.yml
@@ -0,0 +1,24 @@
+name: E2E Tests
+
+on: [push, pull_request]
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Build Test Environment, Stage 1
+        run: docker-compose -f docker-compose.testing.yml build base backend app-test cypress
+
+      - name: Build Test Quests
+        run: docker-compose -f docker-compose.testing.yml run --rm backend yarn build:quests
+
+      - name: Run Cypress Tests
+        env:
+          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
+          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
+          GITHUB_CLIENT_ID: ${{ secrets.GH_CLIENT_ID }}
+          GITHUB_CLIENT_SECRET: ${{ secrets.GH_CLIENT_SECRET }}
+        run: docker-compose -f docker-compose.testing.yml run cypress

From 218d433c14ae0f8f8d83617fe74946ff50855afd Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 28 Jun 2024 16:05:45 +0800
Subject: [PATCH 15/16] fix: remove unused logging

---
 app/src/components/game/HintPart.vue            | 1 -
 server/src/api/controllers/sessionController.ts | 1 -
 server/src/api/socket.ts                        | 4 +---
 server/src/containers/docker.ts                 | 2 +-
 4 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/src/components/game/HintPart.vue b/app/src/components/game/HintPart.vue
index f3487be..724ef03 100644
--- a/app/src/components/game/HintPart.vue
+++ b/app/src/components/game/HintPart.vue
@@ -6,7 +6,6 @@ import MarkdownText from '../MarkdownText.vue'
 const sessionStore = useSession()
 const current = ref(-1)
 const length = computed(() => {
-  console.log(sessionStore.session?.responses)
   return sessionStore.session?.responses.length ?? 0
 })
 
diff --git a/server/src/api/controllers/sessionController.ts b/server/src/api/controllers/sessionController.ts
index 85e48a9..abbb299 100644
--- a/server/src/api/controllers/sessionController.ts
+++ b/server/src/api/controllers/sessionController.ts
@@ -35,7 +35,6 @@ export const getSessionList = asyncHandler(
     const { questId, status } = matchedData(req)
     const query = { user: user.id, quest: questId, status }
     const sessions = await Session.find(query)
-    console.log(query, sessions)
     res.json(sessions.map(sessionSummary))
   }
 )
diff --git a/server/src/api/socket.ts b/server/src/api/socket.ts
index 6ff4464..5395370 100644
--- a/server/src/api/socket.ts
+++ b/server/src/api/socket.ts
@@ -8,7 +8,6 @@ import SessionMiddleware from '../middleware/session.js'
 import { genJWT } from '../utils/auth.js'
 import logger from '../utils/logger.js'
 
-// eslint-disable-next-line no-unused-vars
 type SocketCallback = (event: string, ...args: any[]) => void
 
 const sessions = new Map<string, SocketCallback[]>()
@@ -44,7 +43,6 @@ async function connectContainer(socket: Socket, next: (err?: Error) => void) {
     next(new Error('User not found.'))
     return
   }
-  // console.log(socket.handshake)
   const { sessionId } = socket.handshake.query
   if (
     !sessionId ||
@@ -79,7 +77,7 @@ async function connectContainer(socket: Socket, next: (err?: Error) => void) {
       stream,
     }
     next()
-  } catch (err) {
+  } catch {
     next(new Error('Failed to start container.'))
   }
 }
diff --git a/server/src/containers/docker.ts b/server/src/containers/docker.ts
index a29fd85..fdf42f5 100644
--- a/server/src/containers/docker.ts
+++ b/server/src/containers/docker.ts
@@ -82,7 +82,7 @@ export async function deleteContainer(id: string) {
   }
   try {
     await container.stop()
-  } catch (error) {
+  } catch {
     logger.warn('Failed to stop container', id)
   }
   await container.remove()

From d795dbd78856cf93790a42e909371707760f0ece Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Fri, 28 Jun 2024 16:14:26 +0800
Subject: [PATCH 16/16] refactor: Remove commented out code and unused imports

---
 app/src/store/session.ts                        | 17 -----------------
 app/src/utils/terminal.ts                       |  1 -
 app/src/views/GamePage.vue                      |  4 ----
 server/src/api/controllers/sessionController.ts |  2 +-
 server/src/api/routes/sessionRouter.ts          |  2 +-
 server/src/game/commandHandler.ts               |  2 +-
 6 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index af40272..c4669c9 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -93,21 +93,4 @@ export function useTerminal() {
   return term
 }
 
-// export async function init(questId: string) {
-//   if (!questId) throw new Error('No quest ID provided')
-// reset()
-// try {
-//   await setQuest(questId)
-// } catch (err) {
-//   console.error(err)
-//   throw new LoadQuestError('Failed to load quest', questId)
-// }
-//   try {
-//     await getActiveSession(questId)
-//   } catch (err) {
-//     console.error(err)
-//     throw new LoadSessionError('Failed to load session', questId)
-//   }
-// }
-
 export default useSession
diff --git a/app/src/utils/terminal.ts b/app/src/utils/terminal.ts
index a97bdf5..969c000 100644
--- a/app/src/utils/terminal.ts
+++ b/app/src/utils/terminal.ts
@@ -46,7 +46,6 @@ class SocketTerminal {
 
   mount(reference: HTMLElement): void {
     this.term.open(reference)
-    // this.term.focus()
     this.resizeScreen()
   }
 
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 9fcd367..fae13bf 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
-// import { onMounted } from 'vue'
-// import { useToast } from 'vue-toastification'
 import useSession from '../store/session'
-// import { init } from '../store/session'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
-// import CommandlistPart from '../components/CommandlistPart.vue'
 import HintPart from '../components/game/HintPart.vue'
 import QuestPart from '../components/game/QuestPart.vue'
 import TerminalPart from '../components/game/TerminalPart.vue'
diff --git a/server/src/api/controllers/sessionController.ts b/server/src/api/controllers/sessionController.ts
index abbb299..9829a3e 100644
--- a/server/src/api/controllers/sessionController.ts
+++ b/server/src/api/controllers/sessionController.ts
@@ -69,7 +69,7 @@ export const getSessionById = asyncHandler(
   }
 )
 
-export const getActiveSessionControler = asyncHandler(
+export const getActiveSessionHandler = asyncHandler(
   async (req: Request, res: Response) => {
     const { questId } = matchedData(req)
     const user = await User.findById((req.user as Express.ExistingUser).id)
diff --git a/server/src/api/routes/sessionRouter.ts b/server/src/api/routes/sessionRouter.ts
index bd61b80..5e24fd2 100644
--- a/server/src/api/routes/sessionRouter.ts
+++ b/server/src/api/routes/sessionRouter.ts
@@ -20,7 +20,7 @@ router.post(
 router.get(
   '/active',
   activeSessionValidator,
-  sessionController.getActiveSessionControler
+  sessionController.getActiveSessionHandler
 )
 router.get(
   '/:sessionId',
diff --git a/server/src/game/commandHandler.ts b/server/src/game/commandHandler.ts
index 00ba2cd..e7b3dc0 100644
--- a/server/src/game/commandHandler.ts
+++ b/server/src/game/commandHandler.ts
@@ -112,7 +112,7 @@ export default class CommandHandler extends SessionHandler {
         )
       )
       return checks.every((c) => c === true)
-    } catch (e) {
+    } catch {
       return false
     }
   }