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 @@