refactor: update session management to handle tasks and responses in a single update

app/src/components/game/DescriptionPart.vue

@@ -6,7 +6,7 @@ import MarkdownText from '../MarkdownText.vue'
 const sessionStore = useSession()
 const current = ref(-1)
 const length = computed(() => {
-  return sessionStore.session?.responses.length ?? 0
+  return sessionStore.session?.responses?.length ?? 0
 })
 
 const disabled = computed(() => {
@@ -14,6 +14,7 @@ const disabled = computed(() => {
 })
 
 watch(length, () => {
+  console.log('length update', length.value)
   current.value = length.value - 1
 })
 
@@ -30,7 +31,10 @@ const right = () => {
 }
 
 const response = computed(() => {
-  return sessionStore.session?.responses[current.value]
+  if (!sessionStore.session) return null
+  if (current.value < 0) return null
+  if (current.value >= sessionStore.session.responses.length) return null
+  return sessionStore.session.responses[current.value]
 })
 </script>
 
@@ -41,7 +45,9 @@ const response = 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">
+        說明 {{ current }}/{{ length }}
+      </h1>
       <div v-if="current !== -1" class="flex w-full justify-end items-end">
         <button
           class="p-2 m-1 w-1/8"

app/src/components/game/QuestPart.vue

@@ -5,6 +5,7 @@ import useSession from '../../store/session'
 
 const sessionStore = useSession()
 const tasks = computed(() => {
+  console.log('session', sessionStore.session)
   return sessionStore.session?.tasks.map((task) => {
     const prefix = task.completed ? '✓' : '➤'
     const color = task.completed ? 'text-text-primary' : 'text-text'

app/src/store/session.ts

@@ -18,6 +18,12 @@ interface QuestDetailResponse {
   requirements: string[]
 }
 
+interface SessionUpdate {
+  status: string
+  responses: IResponse[]
+  tasks: ITask[]
+}
+
 interface Store {
   session: Session | null
   questId: string
@@ -36,7 +42,8 @@ const useSession = defineStore('session', {
       this.questId = questId
     },
     async setSession(session: Session) {
-      this.session = session
+      console.log('set session', session)
+      this.session = { ...session, tasks: [] }
       // this.session.graph = new FileGraph(session.graph)
       term.reset()
       await socket.connect(session)
@@ -62,9 +69,11 @@ const useSession = defineStore('session', {
         this.session.pwd = event.pwd
       }
     },
-    newResponse(responses: IResponse[]) {
+    newUpdate(update: SessionUpdate) {
       if (!this.session) return
-      this.session.responses = responses
+      this.session.responses = update.responses
+      this.session.tasks = update.tasks
+      this.session.status = update.status
       // this.session.hints.push(response.hints)
       // if (response.tasks) {
       //   this.session.tasks = response.tasks
@@ -77,10 +86,6 @@ const useSession = defineStore('session', {
       // }
       // this.session.status = response.status
     },
-    newTask(tasks: ITask[]) {
-      if (!this.session) return
-      this.session.tasks = tasks
-    },
     finish() {
       if (!this.session) return
       this.session.status = 'finished'
@@ -101,11 +106,8 @@ const useSession = defineStore('session', {
       socket.on('graph', (event: { discover: FileObject[]; pwd: string }) => {
         this.updateGraph(event)
       })
-      socket.on('response', (responses: IResponse[]) => {
-        this.newResponse(responses)
-      })
-      socket.on('task', (tasks: ITask[]) => {
-        this.newTask(tasks)
+      socket.on('update', (update: SessionUpdate) => {
+        this.newUpdate(update)
       })
       hasSetup = true
     },