refactor: rewrite session store using pinia and fix start button

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

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,

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 ? '✓' : '➤'

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)

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>

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"