Merge pull request #45 from linux-odyssey/quest

Add new functions for quest:

* new condition logic `or` & `not`: able to create nested condition
* new condition `files`: checks if a file or folder exists in the container
  * not support globbing yet
* send "pending" status when executing story, and set it back after execution
* include completed stage id in command

Dockerfile refactor:
* use multi-staged building
* remove Dockerfile.dev

Container:

* use axios instead of `fetch`

Other improvements:

* deactivate other sessions when creating a new one
* clear terminal on reset

app/Dockerfile

@@ -1,5 +1,5 @@
-# Build stage
-FROM node as build-stage
+# Base stage
+FROM node:20-alpine as base
 WORKDIR /app
 COPY package.json yarn.lock ./
 COPY app/package.json ./app/package.json
@@ -7,14 +7,21 @@ COPY packages/file-graph/package.json ./packages/file-graph/package.json
 COPY packages/utils/package.json ./packages/utils/package.json
 RUN yarn install --frozen-lockfile
 
-COPY app ./app
+# Dev stage
+FROM base as dev
+WORKDIR /app/app
+CMD [ "yarn", "dev:docker", "--host", "0.0.0.0" ]
+
+# Build stage
+FROM base as build
 COPY packages/file-graph ./packages/file-graph
 COPY packages/utils ./packages/utils
+COPY app ./app
 RUN yarn build
 
 # Production stage
-FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/app/dist /usr/share/nginx/html
+FROM nginx:stable-alpine as prod
+COPY --from=build /app/app/dist /usr/share/nginx/html
 COPY deployment/nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

app/Dockerfile.dev

@@ -1,11 +0,0 @@
-FROM node
-
-WORKDIR /app
-COPY package.json yarn.lock ./
-COPY app/package.json ./app/package.json
-COPY packages/file-graph/package.json ./packages/file-graph/package.json
-COPY packages/utils/package.json ./packages/utils/package.json
-RUN yarn install --frozen-lockfile
-
-WORKDIR /app/app
-CMD [ "yarn", "dev:docker", "--host", "0.0.0.0" ]

app/index.html

@@ -5,7 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
-    <script async defer data-domain="linuxodyssey.xyz" src="https://analytics.indie.tw/js/script.js"></script>
+    <script
+      async
+      defer
+      data-domain="linuxodyssey.xyz"
+      src="https://analytics.indie.tw/js/script.js"
+    ></script>
   </head>
   <body>
     <div id="app"></div>

app/src/components/ControlPalette.vue

@@ -31,10 +31,12 @@
 <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

@@ -9,57 +9,13 @@
 </template>
 
 <script setup>
-import { Terminal } from 'xterm'
-import { FitAddon } from 'xterm-addon-fit'
-import 'xterm/css/xterm.css'
 import { onMounted, ref } from 'vue'
-import socket from '../utils/socket'
+import socketTerminal from '../utils/terminal'
 
-const rows = ref(40)
-const cols = ref(100)
 const terminal = ref(null)
 
-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 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.error('e', e.message)
-  }
-}
-window.addEventListener('resize', resizeScreen)
-
 onMounted(() => {
-  term.open(terminal.value)
-  term.focus()
-  resizeScreen()
-  socket.on('terminal', (message) => {
-    term.write(message)
-  })
-  term.onData((key) => {
-    socket.emit('terminal', key)
-  })
+  socketTerminal.mount(terminal.value)
+  window.addEventListener('resize', () => socketTerminal.resizeScreen())
 })
 </script>

app/src/utils/session.js

@@ -15,6 +15,7 @@ class SessionManager {
       })
     )
     this.pwd = ref('')
+    this.status = ref('inactive')
   }
 
   getSession() {
@@ -22,10 +23,10 @@ class SessionManager {
   }
 
   setSession(session) {
-    console.log('Update session:', session)
     this.session.value = session
     this.graph.value = new FileGraph(session.graph)
     this.hints.value = session.hints
+    this.status.value = session.status
   }
 
   handleGraphUpdate(event) {
@@ -37,8 +38,12 @@ class SessionManager {
     }
   }
 
-  handleHintUpdate(event) {
-    this.hints.value = [...this.hints.value, ...event]
+  handleHintUpdate(hints) {
+    this.hints.value = [...this.hints.value, ...hints]
+  }
+
+  handleStatusUpdate(status) {
+    this.status.value = status
   }
 
   setTasks(tasks) {

app/src/utils/terminal.js

@@ -0,0 +1,51 @@
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import socket from './socket'
+import 'xterm/css/xterm.css'
+
+class SocketTerminal {
+  constructor(rows, cols) {
+    this.term = new Terminal({
+      rendererType: 'canvas', // 渲染类型
+      rows, // 行数
+      cols, // 不指定行数，自动回车后光标从下一行开始
+      convertEol: true, // 启用时，光标将设置为下一行的开头
+      // scrollback: 50, //终端中的回滚量
+      disableStdin: false, // 是否应禁用输入
+      // cursorStyle: "underline", //光标样式
+      cursorBlink: true, // 光标闪烁
+      theme: {
+        foreground: '#ECECEC', // 字体
+        background: '#000000', // 背景色
+        cursor: 'help', // 设置光标
+        lineHeight: 20,
+      },
+    })
+    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)
+    })
+  }
+
+  resizeScreen() {
+    this.fitAddon.fit()
+  }
+
+  mount(reference) {
+    this.term.open(reference)
+    this.term.focus()
+    this.resizeScreen()
+  }
+
+  clear() {
+    this.term.clear()
+  }
+}
+
+export default new SocketTerminal(40, 100)

app/src/views/GamePage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted } from 'vue'
 import socket from '../utils/socket'
 import sessionManager from '../utils/session'
 import GameHeaderPart from '../components/GameHeaderPart.vue'
@@ -11,7 +11,9 @@ import VisualizationPart from '../components/VisualizationPart.vue'
 import ControlPalette from '../components/ControlPalette.vue'
 import CompleteModal from '../components/CompleteModal.vue'
 
-const completed = ref(false)
+const completed = computed(() => {
+  return sessionManager.status.value === 'finished'
+})
 
 onMounted(async () => {
   await sessionManager.lastOrCreate()
@@ -33,12 +35,7 @@ onMounted(async () => {
   })
   socket.on('message', console.log)
   socket.on('status', (event) => {
-    console.log('status', event)
-    if (event === 'finished') {
-      setTimeout(() => {
-        completed.value = true
-      }, 5000)
-    }
+    sessionManager.handleStatusUpdate(event)
   })
 })
 </script>
@@ -48,6 +45,12 @@ onMounted(async () => {
   <div class="h-[5vh] w-full">
     <GameHeaderPart />
   </div>
+  <!-- current status indicator -->
+  <input
+    type="hidden"
+    id="currentStatus"
+    :value="sessionManager.status.value"
+  />
   <!-- main -->
   <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->