feat: add reset function

app/src/App.vue

@@ -6,6 +6,7 @@ import HintPart from './components/HintPart.vue'
 import QuestPart from './components/QuestPart.vue'
 import TerminalPart from './components/TerminalPart.vue'
 import VisualizationPart from './components/VisualizationPart.vue'
+import ControlPalette from './components/ControlPalette.vue'
 </script>
 
 <template>
@@ -44,31 +45,7 @@ import VisualizationPart from './components/VisualizationPart.vue'
             </section>
           </div>
         </div>
-        <section
+        <ControlPalette />
-          class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between"
-        >
-          <button id="solution" class="bg-background-secondary rounded-lg p-2">
-            <font-awesome-icon
-              :icon="['far', 'circle-question']"
-              class="text-text-primary"
-            />
-            <p class="text-text-primary inline">Solution</p>
-          </button>
-          <button id="reset" class="bg-background-secondary rounded-lg p-2">
-            <font-awesome-icon
-              :icon="['fas', 'arrow-rotate-left']"
-              class="text-text-primary"
-            />
-            <p class="text-text-primary inline">Reset</p>
-          </button>
-          <button id="continue" class="bg-disabled-background rounded-lg p-2">
-            <font-awesome-icon
-              :icon="['far', 'circle-right']"
-              class="text-disabled-text"
-            />
-            <p class="text-disabled-text inline">Continue</p>
-          </button>
-        </section>
       </div>
     </div>
   </div>

app/src/components/ControlPalette.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
+    <button id="solution" class="bg-background-secondary rounded-lg p-2">
+      <font-awesome-icon
+        :icon="['far', 'circle-question']"
+        class="text-text-primary"
+      />
+      <p class="text-text-primary inline">Solution</p>
+    </button>
+    <button
+      id="reset"
+      class="bg-background-secondary rounded-lg p-2"
+      @click="reset"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'arrow-rotate-left']"
+        class="text-text-primary"
+      />
+      <p class="text-text-primary inline">Reset</p>
+    </button>
+    <button id="continue" class="bg-disabled-background rounded-lg p-2">
+      <font-awesome-icon
+        :icon="['far', 'circle-right']"
+        class="text-disabled-text"
+      />
+      <p class="text-disabled-text inline">Continue</p>
+    </button>
+  </section>
+</template>
+
+<script setup>
+import sessionManager from '../utils/session'
+
+const reset = async () => {
+  console.log('resetting...')
+  await sessionManager.createSession()
+}
+</script>

app/src/components/TerminalPart.vue

@@ -12,14 +12,13 @@ import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import 'xterm/css/xterm.css'
 import { io } from 'socket.io-client'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import sessionManager from '../utils/session'
 
 const rows = ref(40)
 const cols = ref(100)
 const terminal = ref(null)
 
-onMounted(async () => {
 const term = new Terminal({
   rendererType: 'canvas', // 渲染类型
   rows: rows.value, // 行数
@@ -37,38 +36,11 @@ onMounted(async () => {
   },
 })
 
-  const session = await sessionManager.latestOrCreate()
-  const host = 'wss://odyssey.wancat.cc'
-
-  console.log(session)
-
-  const socket = io(host, {
-    query: {
-      session_id: session._id,
-    },
-  })
-  // console.log(sessionId)
-  socket.on('connect', function open() {
-    console.log('Connected to the server.')
-  })
-  socket.on('disconnect', function close() {
-    console.log('Disconnected from the server.')
-  })
-  socket.on('message', (message) => {
-    console.log(message)
-    term.write(message)
-    // (program.opts().create ? (await createdSession())._id : null) ||
-    // (await lastSession())._id
-  })
-  term.onData((key) => {
-    console.log(key)
-    socket.send(key)
-  })
-  term.open(terminal.value)
 const fitAddon = new FitAddon()
 term.loadAddon(fitAddon)
 fitAddon.fit()
 term.writeln('Welcome to \x1b[1;32mLinux Odyssey\x1b[0m!')
+
 function resizeScreen() {
   try {
     // 窗口大小改变时，触发xterm的resize方法使自适应
@@ -78,5 +50,48 @@ onMounted(async () => {
   }
 }
 window.addEventListener('resize', resizeScreen)
+
+onMounted(() => {
+  term.open(terminal.value)
+  term.focus()
+  resizeScreen()
+})
+
+let currentSocket = null
+
+watch(sessionManager.session, async (session) => {
+  if (!session) {
+    return
+  }
+  if (currentSocket) {
+    term.clear()
+    currentSocket.disconnect()
+    currentSocket.off()
+  }
+  const host = 'wss://odyssey.wancat.cc'
+
+  console.log(session)
+
+  const socket = io(host, {
+    query: {
+      session_id: session._id,
+    },
+  })
+  currentSocket = socket
+  // console.log(sessionId)
+  socket.on('connect', function open() {
+    console.log('Connected to the server.')
+  })
+  socket.on('disconnect', function close() {
+    console.log('Disconnected from the server.')
+  })
+  socket.on('message', (message) => {
+    term.write(message)
+    // (program.opts().create ? (await createdSession())._id : null) ||
+    // (await lastSession())._id
+  })
+  term.onData((key) => {
+    socket.send(key)
+  })
 })
 </script>

app/src/utils/session.js

@@ -1,16 +1,23 @@
+import { ref } from 'vue'
 import api from './api'
 
 class SessionManager {
   constructor(questId) {
     this.questId = questId
+    this.session = ref(null)
   }
 
-  async createdSession() {
+  setSession(session) {
+    console.log('Update session:', session)
+    this.session.value = session
+  }
+
+  async createSession() {
     console.log('Creating a new session...')
     const res = await api.post('/sessions', { quest_id: this.questId })
     const { data } = res
     console.log('Created Session ID:', data._id)
-    return data
+    this.setSession(data)
   }
 
   async getSessionList() {
@@ -24,20 +31,25 @@ class SessionManager {
   async lastSession() {
     const sessions = await this.getSessionList()
     if (sessions.length === 0) {
-      return null
+      return
     }
     const session = sessions[sessions.length - 1]
     console.log(
       `Last Session ID: ${session._id}, Quest: ${session.quest}, Created At: ${session.createdAt}`
     )
-    return session
+    this.setSession(session)
   }
 
-  async latestOrCreate() {
+  async lastOrCreate() {
-    return (await this.lastSession()) || this.createdSession()
+    await this.lastSession()
+    if (!this.session.value) {
+      await this.createSession()
+    }
   }
 }
 
 const sessionManager = new SessionManager('helloworld')
 
+sessionManager.lastOrCreate().catch(console.error)
+
 export default sessionManager