diff --git a/app/src/components/ControlPalette.vue b/app/src/components/ControlPalette.vue
index bc14d7d..d8ad208 100644
--- a/app/src/components/ControlPalette.vue
+++ b/app/src/components/ControlPalette.vue
@@ -30,13 +30,9 @@
diff --git a/app/src/components/TerminalPart.vue b/app/src/components/TerminalPart.vue
index 3453db1..1bf86d8 100644
--- a/app/src/components/TerminalPart.vue
+++ b/app/src/components/TerminalPart.vue
@@ -10,12 +10,12 @@
diff --git a/app/src/utils/session.js b/app/src/utils/session.js
index a1317ee..b5655f7 100644
--- a/app/src/utils/session.js
+++ b/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) {
diff --git a/app/src/utils/socket.js b/app/src/utils/socket.js
index 69050ca..8f5334c 100644
--- a/app/src/utils/socket.js
+++ b/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
diff --git a/app/src/utils/terminal.js b/app/src/utils/terminal.js
index be6c381..d5cf72e 100644
--- a/app/src/utils/terminal.js
+++ b/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
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index e5550bc..075472b 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -1,6 +1,5 @@