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,32 +12,62 @@ 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({
-  const term = new Terminal({
+  rendererType: 'canvas', // 渲染类型
-    rendererType: 'canvas', // 渲染类型
+  rows: rows.value, // 行数
-    rows: rows.value, // 行数
+  cols: cols.value, // 不指定行数，自动回车后光标从下一行开始
-    cols: cols.value, // 不指定行数，自动回车后光标从下一行开始
+  convertEol: true, // 启用时，光标将设置为下一行的开头
-    convertEol: true, // 启用时，光标将设置为下一行的开头
+  // scrollback: 50, //终端中的回滚量
-    // scrollback: 50, //终端中的回滚量
+  disableStdin: false, // 是否应禁用输入
-    disableStdin: false, // 是否应禁用输入
+  // cursorStyle: "underline", //光标样式
-    // cursorStyle: "underline", //光标样式
+  cursorBlink: true, // 光标闪烁
-    cursorBlink: true, // 光标闪烁
+  theme: {
-    theme: {
+    foreground: '#ECECEC', // 字体
-      foreground: '#ECECEC', // 字体
+    background: '#000000', // 背景色
-      background: '#000000', // 背景色
+    cursor: 'help', // 设置光标
-      cursor: 'help', // 设置光标
+    lineHeight: 20,
-      lineHeight: 20,
+  },
-    },
+})
-  })
 
-  const session = await sessionManager.latestOrCreate()
+const fitAddon = new FitAddon()
+term.loadAddon(fitAddon)
+fitAddon.fit()
+term.writeln('Welcome to \x1b[1;32mLinux Odyssey\x1b[0m!')
+
+function resizeScreen() {
+  try {
+    // 窗口大小改变时，触发xterm的resize方法使自适应
+    fitAddon.fit()
+  } catch (e) {
+    console.log('e', e.message)
+  }
+}
+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)
@@ -47,6 +77,7 @@ onMounted(async () => {
       session_id: session._id,
     },
   })
+  currentSocket = socket
   // console.log(sessionId)
   socket.on('connect', function open() {
     console.log('Connected to the server.')
@@ -55,28 +86,12 @@ onMounted(async () => {
     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方法使自适应
-      fitAddon.fit()
-    } catch (e) {
-      console.log('e', e.message)
-    }
-  }
-  window.addEventListener('resize', resizeScreen)
 })
 </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