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>