refactor: centralize all variable to sessionManager

app/src/components/ControlPalette.vue

@@ -30,13 +30,9 @@
 
 <script setup>
 import sessionManager from '../utils/session'
-import socket from '../utils/socket'
-import socketTerminal from '../utils/terminal'
 
 const reset = async () => {
   console.log('resetting...')
   await sessionManager.createSession()
-  socket.connect(sessionManager.getSession())
-  socketTerminal.clear()
 }
 </script>

app/src/components/TerminalPart.vue

@@ -10,12 +10,12 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import socketTerminal from '../utils/terminal'
+import sessionManager from '../utils/session'
 
 const terminal = ref(null)
 
 onMounted(() => {
-  socketTerminal.mount(terminal.value)
-  window.addEventListener('resize', () => socketTerminal.resizeScreen())
+  sessionManager.term.mount(terminal.value)
+  window.addEventListener('resize', () => sessionManager.term.resizeScreen())
 })
 </script>

app/src/utils/session.js

@@ -1,6 +1,8 @@
 import { ref } from 'vue'
 import { FileGraph } from '@linux-odyssey/file-graph'
 import api from './api'
+import Socket from './socket'
+import SocketTerminal from './terminal'
 
 class SessionManager {
   constructor(questId) {
@@ -16,6 +18,30 @@ class SessionManager {
     )
     this.pwd = ref('')
     this.status = ref('inactive')
+    this.socket = new Socket()
+    this.term = new SocketTerminal(40, 80)
+  }
+
+  init() {
+    this.socket.on('terminal', (data) => {
+      this.term.write(data)
+    })
+    this.term.onData((data) => {
+      this.socket.emit('terminal', data)
+    })
+    this.socket.on('graph', (event) => {
+      this.handleGraphUpdate(event)
+    })
+    this.socket.on('hints', (event) => {
+      this.handleHintUpdate(event)
+    })
+    this.socket.on('tasks', (tasks) => {
+      this.setTasks(tasks)
+    })
+    this.socket.on('status', (event) => {
+      this.handleStatusUpdate(event)
+    })
+    return this.getActiveSession()
   }
 
   getSession() {
@@ -27,6 +53,8 @@ class SessionManager {
     this.graph.value = new FileGraph(session.graph)
     this.hints.value = session.hints
     this.status.value = session.status
+    this.term.clear()
+    this.socket.connect(session)
   }
 
   handleGraphUpdate(event) {

app/src/utils/socket.js

@@ -22,6 +22,14 @@ class SocketWrapper {
       console.log('Socket connected to session', session._id)
     })
 
+    this.socket.on('disconnect', () => {
+      console.log('Socket disconnected from session', session._id)
+    })
+
+    this.socket.on('error', (err) => {
+      console.log('Socket error', err)
+    })
+
     this.bindListeners()
   }
 
@@ -32,6 +40,12 @@ class SocketWrapper {
     }
   }
 
+  once(event, callback) {
+    if (this.socket) {
+      this.socket.once(event, callback)
+    }
+  }
+
   bindListeners() {
     this.listeners.forEach(({ event, callback }) => {
       this.socket.on(event, callback)
@@ -47,4 +61,4 @@ class SocketWrapper {
   }
 }
 
-export default new SocketWrapper()
+export default SocketWrapper

app/src/utils/terminal.js

@@ -1,6 +1,5 @@
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
-import socket from './socket'
 import 'xterm/css/xterm.css'
 
 class SocketTerminal {
@@ -24,13 +23,14 @@ class SocketTerminal {
     this.fitAddon = new FitAddon()
     this.term.loadAddon(this.fitAddon)
     this.fitAddon.fit()
-    this.socket = socket
-    this.socket.on('terminal', (message) => {
-      this.term.write(message)
-    })
-    this.term.onData((key) => {
-      this.socket.emit('terminal', key)
-    })
+  }
+
+  write(message) {
+    this.term.write(message)
+  }
+
+  onData(callback) {
+    this.term.onData(callback)
   }
 
   resizeScreen() {
@@ -48,4 +48,4 @@ class SocketTerminal {
   }
 }
 
-export default new SocketTerminal(40, 100)
+export default SocketTerminal

app/src/views/GamePage.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, onMounted } from 'vue'
-import socket from '../utils/socket'
 import sessionManager from '../utils/session'
 import GameHeaderPart from '../components/GameHeaderPart.vue'
 import CommandlistPart from '../components/CommandlistPart.vue'
@@ -16,27 +15,7 @@ const completed = computed(() => {
 })
 
 onMounted(async () => {
-  await sessionManager.getActiveSession()
-  socket.connect(sessionManager.getSession())
-  socket.on('connect', function open() {
-    console.log('Connected to the server.')
-  })
-  socket.on('disconnect', function close() {
-    console.log('Disconnected from the server.')
-  })
-  socket.on('graph', (event) => {
-    sessionManager.handleGraphUpdate(event)
-  })
-  socket.on('hints', (event) => {
-    sessionManager.handleHintUpdate(event)
-  })
-  socket.on('tasks', (tasks) => {
-    sessionManager.setTasks(tasks)
-  })
-  socket.on('message', console.log)
-  socket.on('status', (event) => {
-    sessionManager.handleStatusUpdate(event)
-  })
+  await sessionManager.init()
 })
 </script>