feat: add reset function

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({
-    rendererType: 'canvas', // 渲染类型
-    rows: rows.value, // 行数
-    cols: cols.value, // 不指定行数，自动回车后光标从下一行开始
-    convertEol: true, // 启用时，光标将设置为下一行的开头
-    // scrollback: 50, //终端中的回滚量
-    disableStdin: false, // 是否应禁用输入
-    // cursorStyle: "underline", //光标样式
-    cursorBlink: true, // 光标闪烁
-    theme: {
-      foreground: '#ECECEC', // 字体
-      background: '#000000', // 背景色
-      cursor: 'help', // 设置光标
-      lineHeight: 20,
-    },
-  })
+const term = new Terminal({
+  rendererType: 'canvas', // 渲染类型
+  rows: rows.value, // 行数
+  cols: cols.value, // 不指定行数，自动回车后光标从下一行开始
+  convertEol: true, // 启用时，光标将设置为下一行的开头
+  // scrollback: 50, //终端中的回滚量
+  disableStdin: false, // 是否应禁用输入
+  // cursorStyle: "underline", //光标样式
+  cursorBlink: true, // 光标闪烁
+  theme: {
+    foreground: '#ECECEC', // 字体
+    background: '#000000', // 背景色
+    cursor: 'help', // 设置光标
+    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>