wip: migrate backend to new game package

app/src/components/game/DescriptionPart.vue

@@ -28,6 +28,10 @@ const right = () => {
     current.value += 1
   }
 }
+
+const response = computed(() => {
+  return sessionStore.session?.responses[current.value]
+})
 </script>
 
 <template>
@@ -69,21 +73,19 @@ const right = () => {
     <div id="hint" class="bg-bg p-8 overflow-y-auto">
       <ul>
         <li
-          v-for="response in sessionStore.session?.responses[current]"
+          v-if="response"
           :key="response.type"
           class="text-text font-xl whitespace-pre-wrap"
         >
-          <div v-for="content in response.content" :key="content">
-            <MarkdownText :content="content" />
-          </div>
+          <MarkdownText :content="response.content" />
         </li>
-        <li
-          v-for="hint in sessionStore.session?.hints[current]"
+        <!-- <li
+          v-for="hint in response?.hints"
           :key="hint"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
           <MarkdownText :content="hint" />
-        </li>
+        </li> -->
       </ul>
       <br />
     </div>

app/src/components/game/QuestPart.vue

@@ -2,11 +2,10 @@
 import { computed } from 'vue'
 import MarkdownText from '../MarkdownText.vue'
 import useSession from '../../store/session'
-import { Task } from '../../types'
 
 const sessionStore = useSession()
 const tasks = computed(() => {
-  return sessionStore.session?.tasks.map((task: Task) => {
+  return sessionStore.session?.tasks.map((task) => {
     const prefix = task.completed ? '✓' : '➤'
     const color = task.completed ? 'text-text-primary' : 'text-text'
     return {

app/src/store/session.ts

@@ -1,16 +1,23 @@
 import { defineStore } from 'pinia'
 import { FileGraph, FileObject } from '@linux-odyssey/file-graph'
-import { QuestDetailResponse } from '../../../packages/constants/dist/src'
+import { IResponse, ITask } from '@linux-odyssey/game'
 import { createSession, getActiveSession } from '../utils/api'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'
-import { Session, StageResponse } from '../types'
+import { Session } from '../types'
 import { trpc } from '../utils/trpc'
 
 const socket = new Socket()
 const term = new SocketTerminal(40, 80)
 let hasSetup = false
 
+interface QuestDetailResponse {
+  id: string
+  title: string
+  instruction: string
+  requirements: string[]
+}
+
 interface Store {
   session: Session | null
   questId: string
@@ -30,7 +37,7 @@ const useSession = defineStore('session', {
     },
     async setSession(session: Session) {
       this.session = session
-      this.session.graph = new FileGraph(session.graph)
+      // this.session.graph = new FileGraph(session.graph)
       term.reset()
       await socket.connect(session)
       term.focus()
@@ -55,22 +62,29 @@ const useSession = defineStore('session', {
         this.session.pwd = event.pwd
       }
     },
-    newResponse(response: StageResponse) {
+    newResponse(responses: IResponse[]) {
       if (!this.session) return
-      this.session.responses.push(response.responses)
-      this.session.hints.push(response.hints)
-      if (response.tasks) {
-        this.session.tasks = response.tasks
-      }
-      if (
-        response.status === 'finished' &&
-        this.session.status !== 'finished'
-      ) {
-        this.finish()
-      }
-      this.session.status = response.status
+      this.session.responses = responses
+      // this.session.hints.push(response.hints)
+      // if (response.tasks) {
+      //   this.session.tasks = response.tasks
+      // }
+      // if (
+      //   response.status === 'finished' &&
+      //   this.session.status !== 'finished'
+      // ) {
+      //   this.finish()
+      // }
+      // 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'
     },
-    finish() {},
     reset() {
       socket.reset()
       term.reset()
@@ -87,8 +101,11 @@ const useSession = defineStore('session', {
       socket.on('graph', (event: { discover: FileObject[]; pwd: string }) => {
         this.updateGraph(event)
       })
-      socket.on('response', (response: StageResponse) => {
-        this.newResponse(response)
+      socket.on('response', (responses: IResponse[]) => {
+        this.newResponse(responses)
+      })
+      socket.on('task', (tasks: ITask[]) => {
+        this.newTask(tasks)
       })
       hasSetup = true
     },

app/src/types.ts

@@ -1,6 +1,5 @@
 import { FileGraph } from '@linux-odyssey/file-graph'
-// eslint-disable-next-line import/no-relative-packages
-import { IResponse } from '@linux-odyssey/models'
+import { IResponse, ITask } from '@linux-odyssey/game'
 
 export interface Task {
   id: number
@@ -21,6 +20,6 @@ export interface Session {
   graph: FileGraph
   pwd: string
   hints: string[][]
-  tasks: Task[]
-  responses: IResponse[][]
+  tasks: ITask[]
+  responses: IResponse[]
 }

app/src/views/GamePage.vue

@@ -84,7 +84,7 @@ onMounted(async () => {
       <div class="bg-border rounded-xl h-[90%] p-2">
         <div class="bg-bg rounded-lg h-full p-2">
           <section id="visualization" class="bg-bg-primary h-full rounded-md">
-            <VisualizationPart />
+            <!-- <VisualizationPart /> -->
           </section>
         </div>
       </div>

app/src/views/RegisterPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import validator from 'validator'
 import { isValidUsername } from '@linux-odyssey/utils'
-import { passwordPolicy } from '../../../packages/constants/dist/src'
+import { passwordPolicy } from '@linux-odyssey/constants'
 import AuthForm from '../components/AuthForm.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
 import HeaderPart from '../components/header/HeaderPart.vue'