fix: analytics start path

feat: handle copy

feat: handle remove

feat: handle move and home ~ path

refactor: improve error handling in cmd-hook

feat: handlePwd

.dockerignore

@@ -1,4 +1,5 @@
 **/node_modules
 .git
 **/dist
-**/tsconfig.tsbuildinfo
+**/tsconfig.tsbuildinfo
+data

.env.prod.sample

@@ -0,0 +1,50 @@
+HOST=localhost
+PORT=3000
+BASE_URL=https://example.com
+SECRET_KEY=YOU_SHOULD_CHANGE_THIS
+BACKEND_URL=http://backend:3000
+DOCKER_NETWORK=linux-odyssey-players
+
+MONGO_ROOT_PASSWORD=adminpassword
+MONGO_USER=commander
+MONGO_PASS=commander
+MONGO_DB=linux-odyssey
+MONGO_URL=mongodb://commander:commander@db:27017/linux-odyssey
+
+# Admin user credentials for analytics
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=admin
+ADMIN_HOST=0.0.0.0
+ADMIN_PORT=3001
+# ADMIN_BASE_URL=http://0.0.0.0:3001
+
+# Optional
+# CONTAINER_EXPIRY=60     # 60 minutes
+# SESSION_MAX_AGE=168      # 7 days
+# TRUSTED_PROXIES=1.2.3.4    
+# valid configurations see isIP & isIPRange in  https://github.com/validatorjs/validator.js?tab=readme-ov-file#validators
+
+# RATE_LIMIT_MAX_FAILED_ATTEMPTS=5
+# RATE_LIMIT_LOCKOUT_TIME=10
+
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+# SURVEY_URL=
+# BUG_REPORT_URL=
+
+# Docker related config
+# DOCKER_NETWORK=host
+# QUEST_IMAGE=linuxodyssey/quest-base
+# DOCKER_PREFIX=linuxodyssey/quest-
+
+# To mount quest folder from host into container, for development purpose
+# MOUNT_QUEST=true
+
+# LOG_PATH=
+
+# Testing, create a user with the following credentials, disable rate limiting
+# TESTING=true
+# TESTING_USERNAME=alex
+# TESTING_PASSWORD=Alex1234

.env.sample

@@ -0,0 +1,38 @@
+HOST=localhost
+PORT=3000
+BASE_URL=http://localhost:8000
+MONGO_URL=mongodb://localhost:27017/odyssey-test
+SECRET_KEY=sample-secret
+DOCKER_NETWORK=linux-odyssey-players-dev
+
+# Optional
+# BACKEND_URL=http://host.docker.internal:3000
+# CONTAINER_EXPIRY=60     # 60 minutes
+# SESSION_MAX_AGE=168      # 7 days
+# TRUSTED_PROXIES=1.2.3.4    
+# valid configurations see isIP & isIPRange in  https://github.com/validatorjs/validator.js?tab=readme-ov-file#validators
+
+# RATE_LIMIT_MAX_FAILED_ATTEMPTS=5
+# RATE_LIMIT_LOCKOUT_TIME=10
+
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+# SURVEY_URL=
+# BUG_REPORT_URL=
+
+# Docker related config
+# DOCKER_NETWORK=host
+# QUEST_IMAGE=linuxodyssey/quest-base
+# DOCKER_PREFIX=linuxodyssey/quest-
+
+# To mount quest folder from host into container, for development purpose
+# MOUNT_QUEST=true
+
+# LOG_PATH=
+
+# Testing, create a user with the following credentials, disable rate limiting
+# TESTING=true
+# TESTING_USERNAME=alex
+# TESTING_PASSWORD=Alex1234

.eslintrc.js

@@ -20,9 +20,12 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        extensions: ['.js', '.ts'],
+        moduleDirectory: ['node_modules', 'packages', 'server/src'],
+      },
+      typescript: {
+        alwaysTryTypes: true,
       },
-      typescript: {},
     },
     vue: {
       version: '3.0', // Explicitly specify Vue 3
@@ -49,7 +52,7 @@ module.exports = {
 
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-vars': [
-      'error',
+      'warn',
       {
         args: 'after-used',
         argsIgnorePattern: '^_',
@@ -63,21 +66,44 @@ module.exports = {
 
     // Allow missing file extensions
     'import/extensions': [
-      'warn',
+      'off',
       'ignorePackages',
       {
-        js: 'off',
+        js: 'never',
         jsx: 'never',
         ts: 'never',
         tsx: 'never',
       },
     ],
+    'no-unused-vars': 'warn',
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 'error',
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': 'error',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+    'no-restricted-imports': ['error', '../*'],
+    'import/no-relative-packages': 'off',
+    'no-await-in-loop': 'off',
   },
   overrides: [
     {
-      files: ['**/tests/**/*.js', '**/tests/**/*.ts', '**/*.test.ts'], // Adjust the pattern to match your test files
+      files: ['**/tests/**/*.js', '**/tests/**/*.ts', '**/*.test.ts'],
       rules: {
-        'import/extensions': 'off', // Turn off the rule for test files
+        'import/extensions': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    {
+      files: ['server/**/*.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    {
+      files: ['**/packages/**/*.ts'],
+      rules: {
+        'no-restricted-imports': 'off',
         'import/no-extraneous-dependencies': 'off',
       },
     },

.github/workflows/build-docker-image.yml

@@ -18,9 +18,9 @@ on:
 
     secrets:
       DOCKERHUB_USERNAME:
-        required: true
+        required: false
       DOCKERHUB_TOKEN:
-        required: true
+        required: false
 
 jobs:
   build-and-push:
@@ -42,6 +42,7 @@ jobs:
             type=semver,pattern={{version}}
 
       - name: Login to Docker Hub
+        if: always()
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -53,5 +54,5 @@ jobs:
           context: .
           file: ${{ inputs.dockerfilePath }}
           target: ${{ inputs.target }}
-          push: true
+          push: ${{ secrets.DOCKERHUB_USERNAME != '' }}
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/build.yml

@@ -24,7 +24,7 @@ jobs:
     uses: ./.github/workflows/build-docker-image.yml
     with:
       imageName: 'linuxodyssey/analytics'
-      dockerfilePath: './packages/analytics/Dockerfile'
+      dockerfilePath: './services/analytics/Dockerfile'
       target: prod
     secrets: inherit
 

.github/workflows/ci-checks.yml

@@ -2,15 +2,6 @@ name: CI Checks
 
 on:
   workflow_call:
-    secrets:
-      GOOGLE_CLIENT_ID:
-        required: true
-      GOOGLE_CLIENT_SECRET:
-        required: true
-      GH_CLIENT_ID:
-        required: true
-      GH_CLIENT_SECRET:
-        required: true
 
 jobs:
   ci:

.github/workflows/e2e.yml

@@ -1,6 +1,7 @@
 name: E2E Tests
 
-on: [push, pull_request]
+on:
+  workflow_dispatch:
 
 jobs:
   e2e:

.github/workflows/production.yml

@@ -12,7 +12,6 @@ concurrency:
 jobs:
   ci-checks:
     uses: ./.github/workflows/ci-checks.yml
-    secrets: inherit
 
   build:
     needs: ci-checks

.github/workflows/pull-request.yml

@@ -10,7 +10,6 @@ concurrency:
 jobs:
   ci-checks:
     uses: ./.github/workflows/ci-checks.yml
-    secrets: inherit
 
   build:
     uses: ./.github/workflows/build.yml

.github/workflows/staging.yml

@@ -12,7 +12,6 @@ concurrency:
 jobs:
   ci-checks:
     uses: ./.github/workflows/ci-checks.yml
-    secrets: inherit
 
   build:
     needs: ci-checks

.gitignore

@@ -1,3 +1,9 @@
+config 
+.quest
+tmp
+services/terminal-service/terminal-service
+bin
+
 # Logs
 logs
 *.log
@@ -85,6 +91,7 @@ built
 .env.test.local
 .env.production.local
 .env.local
+.env.prod
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
@@ -137,4 +144,5 @@ dist
 .pnp.*
 
 #screenshots
-tests/cypress/screenshots
+tests/cypress/screenshots
+services/cmd-hook/cmd-hook

.vscode/settings.json

@@ -1,5 +1,11 @@
 {
   "editor.tabSize": 2,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "yaml.schemas": {
+    "packages/game/quest.json": "quests/**/game.yml"
+  },
+  "[go]": {
+    "editor.defaultFormatter": "golang.go"
+  }
 }

README.md

@@ -3,11 +3,24 @@
 [![Production](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/production.yml/badge.svg)](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/production.yml)
 [![Staging](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/staging.yml/badge.svg)](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/staging.yml)
 
+## TLDR
+
+    yarn install
+    cp .env.sample .env
+    docker compose up -d
+    yarn dev
+
 ## Requirements
 
-- NodeJS
+- NodeJS v20+
 - Docker
-- Yarn
+- Yarn: v1.22
+
+## Known Issues
+
+- MongoDB requires x86 architecture to run for v5+ versions. You can track [this issue](https://github.com/linux-odyssey/linux-odyssey/issues/166) for updates.
+
+Windows user please refer to [docs/windows-setup.md](docs/windows-setup.md) for setup instructions.
 
 ## Installation
 
@@ -15,30 +28,61 @@
     cd linux-odyssey
     yarn install
 
-## Development
+## Project Structures
 
-Run mongoDB first:
+1. **app**: frontend
+2. **server**: backend
+3. **quests**: tutorials scripts for each quest
+4. **packages**: other packages
+   1. **analytics**: admin dashboard to analyze collected data
+   2. **constants**: some shared config values for app and server
+   3. **container**: the script run in container to capture users' command
+   4. **file-graph**: the algorithm to construct and modify file graph, used in both app and server
+   5. **models**: definitions of MondoDB collections (data schema)
+   6. **utils**: other utility code shared between packages
+   7. **game (in the future)**: core logic of game playing, will be extracted from server
+
+## Configuration
+
+The configuration is stored in the `.env` file. You can copy from the sample file.
+
+    cp .env.sample .env
+
+## Docker Setup
+
+### Docker compose files explaination
+
+1. **docker-compose.yml**: The one used for development. It sets up MongoDB and builds base quest image.
+2. **docker-compose.prod.yml**: The one used for production deployment. It has a Nginx service, a backend, a database, an analytics service, and creates isolated networks for player containers.
+3. **docker-compose.testing.yml**: Similar to production config, but sets up an one-time environment for end-to-end testing.
+
+### Common Development Setup
+
+This sets up a development database, and running development server for frontend and backend.
+
+Pull the latest images:
+
+    docker compose pull
+
+Start the containers:
 
     docker compose up -d
 
-The db will automatically restarts by Docker.
+This will start the db. it will automatically restarts by Docker.
 
-Build up dependencies:
+Building quest images:
 
-    yarn build:deps
+    docker compose build base
 
-Run dev server (frontend, backend):
+### Build Quest Images in Details
 
-    yarn dev
+In each quest folder, there is a `game.yml` file, which is the quest definition.
 
-If you want to enable social login, you should have OAuth client token in a `.env` file:
-
-### Build Quest Images
-
-In each quest folder, there is a `game.yml` file, which is the quest definition. And a optional `Dockerfile` to overwrite the base image. If you want to include additional files, put them in a `home` folder. The files in `home` will **not** be copied to the image automatically, you have to copy them in the `Dockerfile`.
+If you want to include additional files, put them in a `home` folder. The files in `home` will be copied to the user's home on container creation automatically.
 
     quests/
     ├── Dockerfile      # Base image
+    ├── entrypoint.sh   # Entrypoint for the container
     ├── discover
     │   └── game.yml
     ├── helloworld
@@ -54,14 +98,56 @@ In each quest folder, there is a `game.yml` file, which is the quest definition.
         └── home
             └── ancient_scroll.txt
 
+An optional `Dockerfile` can overwrite the base image. You can use this to install additional dependencies or modify the environment.
+
+Customized `entrypoint.sh` for each quest is not yet supported.
+
 To build all quests:
 
     yarn build:quests
 
 The base image is built with docker-compose, so you can use `docker compose build base` to rebuild it. Once you rebuild the base image, you have to rebuild all quests.
 
+### Optional: Mounting Host Directory
+
+To update the home content of a quest, simply re-create a new session will do. The home content is mounted and copied on container creation.
+
+To further improve the development experience, we can mount the host directory to the container in the pattern:
+
+    /path/to/linux-odyssey/quests/${quest_id}/home:/home/commander
+
+You can edit the files on your host, and the changes will be reflected in the container. This is disabled by default. To enable it, you can set the following environment variables:
+
+    MOUNT_QUEST=true
+
+### Optional: Mounting terminal service & cmd-hook
+
+To make the development of terminal services & cmd-hook smoother, we can enable `MOUNT_CLI` to mount the local binaries into container.
+
+    MOUNT_CLI
+
+And you can run `air` inside of `services/terminal-service` or `services/cmd-hook` to get auto recompiling.
+
+## Development
+
+Copy `.env.sample` to `.env` and customize it for your needs.
+
+Run dev server (frontend, backend):
+
+    yarn dev
+
+To develop analytics dashboard:
+
+    yarn analytics
+
+The default username and password is `alex` and `Alex1234`.
+
 ## Testing
 
+Unit tests:
+
+    yarn test:unit
+
 Run Cypress locally, using the current development containers:
 
     docker compose up -d
@@ -78,76 +164,37 @@ Run Cypress in container, create brand-new containers along with it:
     # tearing off the containers
     ./docker-scripts.sh down
 
-### Deployment
+## Deployment
 
+Create production env
+
+    cp .env.prod.sample .env.prod
+
+Edit `.env.prod`
+
+    BASE_URL=https://yourdomain.com         # IMPORTANT to make login work
+    SECRET_KEY=xxxx                         # Change it to something safe!
+
+Start the service
+
+    # Build the images (only allowed for maintainers)
     docker compose -f docker-compose.prod.yml build
     docker compose -f docker-compose.prod.yml push
 
     # Server side
     docker compose -f docker-compose.prod.yml pull
+    yarn build:quests
     docker compose -f docker-compose.prod.yml up -d
 
+### Necessary Configuration
+
 To enable social login, you should have OAuth client token in a `.env` file:
-You can copy from `example.env`
+You can copy from `.env.sample`
 
-    # .env
-    BASE_URL=https://example.com
-    GOOGLE_CLIENT_ID=...
-    GOOGLE_CLIENT_SECRET=...
+**YOU MUST CHANGE THE SECRET_KEY** in `.env` file.
 
-To enable it:
+    SECRET_KEY=your-secret-key
 
-    docker compose --env-file .env -f docker-compose.prod.yml up -d
+You can generate a random key by running
 
-## Standalone App (without Docker)
-
-Source: `app/`
-
-    # Connect to dev server (https://odyssey.wancat.cc)
-    yarn app
-
-    # Connect to localhost (http://localhost:3000)
-    yarn app:local
-
-    # Connect to anyhost
-    API_ENDPOINT=http://example.com yarn app:local
-
-## Swagger
-
-    docker compose up -d swagger
-
-Open http://localhost:8080 to open Swagger
-
-## CLI terminal client (Docker not required)
-
-    yarn cli
-    Usage: client [options] [command]
-
-    Options:
-    -s, --session <string>  Session ID
-    -c, --create            Create a new session
-    -h, --host <string>     Server host (default: "http://localhost:3000")
-    --help                  display help for command
-
-    Commands:
-    list                    List all sessions
-
-connet to recent session:
-
-    yarn cli
-
-connect to new session:
-
-    yarn cli -c
-
-connect to specific session:
-
-    yarn cli -s 64d0de0367459c13004bc83f
-
-connect to other host:
-
-    yarn cli -h https://example.com
-
-list sessions:
-
-    yarn cli list
+    yarn setup

app/Dockerfile

@@ -1,31 +1,20 @@
 # Base stage
-FROM node:20-alpine as base
+FROM node:20-alpine AS build
 
 WORKDIR /app
-COPY package.json yarn.lock tsconfig.json ./
-COPY packages/file-graph/package.json ./packages/file-graph/package.json
-COPY packages/utils/package.json ./packages/utils/package.json
-COPY packages/constants/package.json ./packages/constants/package.json
-COPY packages/models/package.json ./packages/models/package.json
+COPY package.json yarn.lock ./
 COPY app/package.json ./app/package.json
+COPY server/package.json ./server/package.json
 RUN yarn install --frozen-lockfile
 
-# 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 packages/constants ./packages/constants
-COPY packages/models ./packages/models
+COPY tsconfig.json ./tsconfig.json
+COPY server ./server
+COPY packages ./packages
 COPY app ./app
 RUN yarn workspace app build
 
 # Production stage
-FROM nginx:stable-alpine as prod
+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

app/package.json

@@ -5,26 +5,24 @@
   "scripts": {
     "dev": "vite",
     "dev:docker": "API_TARGET=http://backend:3000 vite",
-    "build": "vue-tsc -b && vite build",
-    "type-check": "vue-tsc -b",
+    "build": "vue-tsc && vite build",
+    "type-check": "vue-tsc",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@formbricks/js": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@linux-odyssey/constants": "*",
-    "@linux-odyssey/file-graph": "*",
-    "@linux-odyssey/models": "*",
-    "@linux-odyssey/utils": "*",
+    "@trpc/client": "^11.1.0",
     "@types/dompurify": "^3.0.5",
-    "axios": "^1.6.0",
-    "dompurify": "^3.0.6",
-    "echarts": "^5.4.3",
+    "axios": "^1.8.2",
+    "dompurify": "^3.2.4",
     "marked": "^10.0.0",
     "pinia": "^2.1.7",
+    "reconnecting-websocket": "^4.4.0",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",
@@ -37,13 +35,14 @@
   },
   "devDependencies": {
     "@types/validator": "^13.11.9",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^5.2.2",
     "@vue/compiler-sfc": "^3.3.13",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.3.3",
-    "vite": "^4.5.3",
-    "vue-tsc": "^2.0.10"
+    "typescript": "~5.7.2",
+    "vite": "^6.3.1",
+    "vue-tsc": "^2.2.8"
   }
 }

app/src/components/FileNode.vue

@@ -20,7 +20,21 @@ function nodeClass() {
 </script>
 
 <template>
-  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
+  <a href="#" :class="nodeClass()">
+    <font-awesome-icon
+      v-if="node.type === 'directory'"
+      :icon="['far', 'folder']"
+      class="text-text-primary size-8"
+    />
+    <font-awesome-icon
+      v-else
+      :icon="['far', 'file']"
+      class="text-text-primary size-8"
+    />
+    <br />
+    {{ node.discovered ? node.name : '???' }}
+    {{ node.name === '' && node.discovered ? '/' : '' }}
+  </a>
   <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
     <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
       <FileNode :node="child" :pwd="pwd" />

app/src/components/MarkdownText.vue

@@ -25,14 +25,37 @@ const html = computed(() => {
   line-height: 1;
 }
 
+.markdown-content :deep(p) {
+  line-height: 1.5;
+}
 .markdown-content :deep(ol) {
   list-style: decimal;
   padding-left: 1em;
+  line-height: 1.2;
 }
-.markdown-content :deep(code) {
-  background-color: #282a33;
+.markdown-content :deep(ul) {
+  list-style: disc;
+  padding-left: 1em;
+  line-height: 1.2;
+}
+.markdown-content :deep(pre) {
+  background-color: #2e3440;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.9rem;
+  color: #d8dee9;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #4c566a;
+  line-height: 1.5;
+  font-family: 'monospace';
+}
+
+.markdown-content :deep(code:not(pre code)) {
+  background-color: #2e3440;
   border-radius: 0.25rem;
-  padding: 0.25rem;
-  font-size: 0.875rem;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.9rem;
+  color: #d8dee9;
+  font-family: 'monospace';
 }
 </style>

app/src/components/QuestIntro.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { ref, defineProps, onMounted } from 'vue'
+import MarkdownText from './MarkdownText.vue'
+import { trpc } from '../utils/trpc'
+
+const props = defineProps({
+  questTitle: {
+    type: String,
+    required: true,
+  },
+  questId: {
+    type: String,
+    required: true,
+  },
+  questUnlocked: {
+    type: Boolean,
+    required: true,
+  },
+})
+const emit = defineEmits(['closeIntro'])
+const showIntro = ref(true) // Controls whether the modal is visible or not
+const router = useRouter()
+const toast = useToast()
+const { questTitle, questId, questUnlocked } = props
+const questInstruction = ref('')
+const questColor = ref('')
+const questTextColor = ref('')
+const closeModal = () => {
+  showIntro.value = false
+  emit('closeIntro', true)
+  router.push({ name: 'map' })
+}
+const handleQuests = (id: string) => {
+  if (questUnlocked) {
+    router.push({ name: 'game', params: { questId: id } })
+  } else {
+    toast.warning('你還沒完成前一個關卡!')
+  }
+}
+const handleColour = () => {
+  if (questUnlocked) {
+    questColor.value = '#00ff00'
+    questTextColor.value = '#000000'
+  } else {
+    questColor.value = '#505050'
+    questTextColor.value = '#a0a0a0'
+  }
+}
+onMounted(async () => {
+  const quest = await trpc.quests.getQuestDetail.query(questId)
+  questInstruction.value = quest.instruction
+  handleColour()
+})
+</script>
+
+<template>
+  <div v-if="showIntro" class="modal">
+    <div class="modal-content bg-bg-secondary rounded-lg">
+      <span class="close text-text content-between" @click="closeModal"
+        >&times;</span
+      >
+
+      <h2
+        id="QuestTitle"
+        class="text-2xl text-text mb-5 w-full inline-flex justify-center"
+      >
+        {{ questTitle }}
+      </h2>
+      <div class="w-full h-3/5 p-8">
+        <div class="px-5 whitespace-pre-wrap">
+          <MarkdownText
+            class="text-text markdown-content"
+            :content="questInstruction"
+          />
+        </div>
+      </div>
+      <a
+        id="StartAdventure"
+        target="_blank"
+        @click="handleQuests(questId)"
+        :style="{ backgroundColor: questColor, color: questTextColor }"
+        class="inline-flex justify-center rounded-lg text-base font-black py-3 mt-5 w-full text-lg"
+        >開始冒險</a
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1;
+}
+
+.modal-content {
+  position: relative;
+  margin: 10% auto;
+  padding: 20px;
+  width: 60%;
+  height: 50%;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 30px;
+  cursor: pointer;
+}
+.markdown-content {
+  text-align: left;
+}
+</style>

app/src/components/QuestMap.vue

@@ -1,181 +1,254 @@
-<!-- eslint-disable no-console -->
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted, watch, computed } from 'vue'
 import { useToast } from 'vue-toastification'
-import { use, init } from 'echarts/core'
-import { GraphChart } from 'echarts/charts'
-import { SVGRenderer } from 'echarts/renderers'
-import {
-  TitleComponent,
-  TooltipComponent,
-  DataZoomComponent,
-} from 'echarts/components'
-import { DAG } from '@linux-odyssey/utils'
-import api from '../utils/api'
-import { NodeImage } from '../img/svg.js'
+import { DAG } from '../../../packages/utils'
+import { trpc } from '../utils/trpc'
 import useUserProfile from '../store/userProfile'
+import QuestIntro from './QuestIntro.vue'
 
 const store = useUserProfile()
-const marginX = 500
-const marginY = 300
-const chartContainer = ref(null)
-let chartInstance = null
-const fullwidth = window.screen.width
-
-use([
-  GraphChart,
-  SVGRenderer,
-  TitleComponent,
-  TooltipComponent,
-  DataZoomComponent,
-])
-
-async function getQuests() {
-  try {
-    const res = await api.get('/quests')
-    return res.data
-  } catch (err) {
-    console.error(err)
-
-    throw err
-  }
-}
-
-const genOption = (nodes: any, edges: any) => ({
-  renderer: 'svg',
-  tooltip: {},
-  animationDurationUpdate: 1500,
-  animationEasingUpdate: 'quinticInOut',
-  // dataZoom: [
-  //   {
-  //     type: 'slider', // This type means "slider data zoom" which provides a slider bar for zooming
-  //     orient: 'vertical', // This makes the data zoom component vertical
-  //     start: 0, // The starting percentage of the window out of the data extent
-  //     end: 100, // The ending percentage of the window out of the data extent
-  //     show: true,
-  //   },
-  // ],
-  series: [
-    {
-      type: 'graph',
-      layout: 'none',
-      symbol: () => {
-        return NodeImage
-      },
-      symbolSize: [fullwidth / 13, fullwidth / 30],
-      roam: 'move',
-      zoom: 1.5,
-      center: ['120%', '30%'],
-      label: {
-        show: true,
-        fontSize: fullwidth / 90,
-      },
-      edgeSymbol: ['pin', 'arrow'],
-      edgeSymbolSize: [2, 15],
-      edgeLabel: {
-        fontSize: 25,
-      },
-      data: nodes,
-      // links: [],
-      links: edges,
-      lineStyle: {
-        width: 3,
-        color: 'gray',
-        opacity: 4,
-        curveness: 0.08,
-      },
-      itemStyle: {
-        color: (params: any) => {
-          const {
-            data: { completed, unlocked },
-          } = params
-          if (completed) {
-            return '#00ff00'
-          }
-          if (unlocked) {
-            return '#ADADB5'
-          }
-          return '#505050'
-        },
-      },
-    },
-  ],
-})
-
-function getOption(quests: any, progress: any) {
-  const dag = new DAG(quests)
-
-  const nodes = dag.getNodes().map((node) => ({
-    id: node._id,
-    name: node.title,
-    y: marginX * node.index - (marginX * dag.getLayer(node._id)) / 2,
-    x: marginY * node.layer * 2,
-    completed: progress[node._id]?.completed || false,
-    unlocked: node.requirements.every((req: any) => progress[req]?.completed),
-  }))
-  const lineAppearence = (node: any) => {
-    try {
-      const { unlocked } = node
-      return {
-        type: unlocked ? 'line' : 'dashed',
-        color: unlocked ? '#ADADB5' : '#454552',
-      }
-    } catch (err) {
-      console.error(err)
-      throw err
-    }
-  }
-  const edges = dag.getEdgesArray().map((edge: any) => ({
-    source: edge[0],
-    target: edge[1],
-    lineStyle: lineAppearence(nodes.find((node) => node.id === edge[1])),
-  }))
-  return genOption(nodes, edges)
-}
-
-const router = useRouter()
 const toast = useToast()
 
-function initChart(option: any) {
-  chartInstance = init(chartContainer.value)
-  chartInstance.setOption(option)
-  chartInstance.on('click', (params: any) => {
-    const {
-      data: { id, unlocked },
-    } = params
+const svgWidth = ref(window.innerWidth)
+const svgHeight = ref(window.innerHeight)
 
-    if (unlocked) {
-      router.push({ name: 'game', params: { questId: id } })
-    } else {
-      toast.warning('你還沒完成前一個關卡!')
-    }
-  })
+const marginX = 120
+const marginY = 120
+
+const nodeWidth = 160
+const nodeHeight = 50
+const opened = ref<Node | null>(null)
+type Node = {
+  id: string
+  title: string
+  x: number
+  y: number
+  index: number
+  completed: boolean
+  unlocked: boolean
+}
+
+type Edge = {
+  source: Node
+  target: Node
+}
+
+const graphData = ref<{ nodes: Node[]; edges: Edge[] }>({
+  nodes: [],
+  edges: [],
+})
+
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+const offsetX = ref(0)
+const offsetY = ref(0)
+
+function startDrag(event: MouseEvent) {
+  isDragging.value = true
+  dragStartX.value = event.clientX - offsetX.value
+  dragStartY.value = event.clientY - offsetY.value
+}
+
+function drag(event: MouseEvent) {
+  if (!isDragging.value) return
+  offsetX.value = event.clientX - dragStartX.value
+  offsetY.value = event.clientY - dragStartY.value
+}
+
+function endDrag() {
+  isDragging.value = false
+}
+
+async function computeGraphData() {
+  if (!store.progress) return
+
+  try {
+    const quests = await trpc.quests.getQuests.query()
+    const dag = new DAG(quests)
+    const nodesValues = dag.getNodes()
+
+    const nodes = nodesValues.map((node) => ({
+      id: node.id,
+      title: node.title,
+      x: marginX * node.layer * 2,
+      y:
+        marginY * node.index -
+        (marginX * dag.getLayer(node.id)) / 2 +
+        svgHeight.value / 2,
+      completed: store.progress[node.id]?.completed || false,
+      unlocked: node.requirements.every(
+        (req: string) => store.progress[req]?.completed
+      ),
+      index: node.index,
+    }))
+
+    const edges = dag
+      .getEdgesArray()
+      .map((edge) => ({
+        source: nodes.find((n) => n.id === edge[0]),
+        target: nodes.find((n) => n.id === edge[1]),
+      }))
+      .filter(
+        (edge): edge is Edge =>
+          edge.source !== undefined && edge.target !== undefined
+      )
+
+    graphData.value = { nodes, edges }
+  } catch (error) {
+    console.error('Error computing graph data:', error)
+    toast.error('Failed to load quest data')
+  }
+}
+function handleNodeClick(node: Node) {
+  opened.value = node
+}
+function closeIntro(close: boolean) {
+  if (close) {
+    opened.value = null
+  }
 }
 
 onMounted(async () => {
   await store.loadUserProfile()
-  const quests = await getQuests()
-  const option = getOption(quests, store.progress)
-  initChart(option)
+  await computeGraphData()
+})
+
+watch(() => store.progress, computeGraphData, { deep: true })
+
+const curvedPath = computed(() => {
+  return (source: Node, target: Node) => {
+    // const dx = target.x - source.x
+    // const dy = target.y - source.y
+    // const dr = Math.sqrt(dx * dx + dy * dy)
+    const dr = 0
+    const sweep = target.index > source.index ? 0 : 1 // Determines if the arc should curve up or down based on node index
+    return `M${source.x},${source.y}A${dr},${dr} 0 0,${sweep} ${target.x},${target.y}`
+  }
+})
+
+const nodeStyle = computed(() => {
+  return (node: Node) => {
+    if (node.completed) return 'completed'
+    if (node.unlocked) return 'unlocked'
+    return 'locked'
+  }
+})
+
+const edgeStyle = computed(() => {
+  return (edge: Edge) => {
+    return edge.target.unlocked ? 'unlocked' : 'locked'
+  }
 })
 </script>
 
 <template>
   <div class="relative bg-black w-full h-full flex">
-    <img
-      src="../img/catelogbg.svg"
-      alt="bg"
-      class="p-2 stroke-2 scale-y-120 justify-center items-center"
-    />
-    <h1
-      class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
-      style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
+    <div
+      class="flex place-content-center w-full bg-catelogbg bg-cover bg-scroll"
     >
-      踏上你的Linux冒險之旅吧！
-    </h1>
-    <div class="flex flex-wrap absolute w-full h-full z-1">
-      <div ref="chartContainer" class="w-full h-full flex flex-wrap"></div>
+      <h1
+        class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
+        style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
+      >
+        踏上你的Linux冒險之旅吧！
+      </h1>
+      <svg
+        :width="svgWidth"
+        :height="svgHeight"
+        class="absolute"
+        @mousedown="startDrag"
+        @mousemove="drag"
+        @mouseup="endDrag"
+        @mouseleave="endDrag"
+      >
+        <g :transform="`translate(${offsetX}, ${offsetY})`">
+          <g
+            v-for="edge in graphData.edges"
+            :key="`${edge.source.id}-${edge.target.id}`"
+          >
+            <path
+              :d="curvedPath(edge.source, edge.target)"
+              :class="['edge', edgeStyle(edge)]"
+            />
+          </g>
+          <g
+            v-for="node in graphData.nodes"
+            :key="node.id"
+            @click="handleNodeClick(node)"
+          >
+            <rect
+              :x="node.x - nodeWidth / 2"
+              :y="node.y - nodeHeight / 2"
+              :width="nodeWidth"
+              :height="nodeHeight"
+              rx="10"
+              ry="10"
+              :class="['node', nodeStyle(node)]"
+            />
+            <text
+              :x="node.x"
+              :y="node.y"
+              text-anchor="middle"
+              alignment-baseline="middle"
+              :class="['node-text', nodeStyle(node)]"
+              font-size="18"
+            >
+              {{ node.title }}
+            </text>
+          </g>
+        </g>
+      </svg>
+      <QuestIntro
+        :questTitle="opened.title"
+        :questId="opened.id"
+        :questUnlocked="opened.unlocked"
+        v-if="opened"
+        @close-intro="closeIntro"
+      />
     </div>
   </div>
 </template>
+
+<style scoped>
+svg {
+  overflow: visible;
+}
+
+.node {
+  &.completed {
+    fill: #6cf76c;
+  }
+  &.unlocked {
+    fill: #8c8c92;
+  }
+  &.locked {
+    fill: #505050;
+  }
+}
+
+.node-text {
+  &.completed {
+    fill: #1d1d1d;
+  }
+  &.unlocked {
+    fill: #ffffff;
+  }
+  &.locked {
+    fill: #a0a0a0;
+  }
+}
+
+.edge {
+  stroke-width: 3;
+  fill: none;
+  &.unlocked {
+    stroke: #adadb5;
+    stroke-dasharray: none;
+  }
+  &.locked {
+    stroke: #454552;
+    stroke-dasharray: 5, 5;
+  }
+}
+</style>

app/src/components/game/CompleteModal.vue

@@ -9,9 +9,11 @@ import CompleteAnimation from '../../img/complete-animation.json'
 const showModal = ref(true) // Controls whether the modal is visible or not
 const router = useRouter()
 const toast = useToast()
+
 const closeModal = () => {
   showModal.value = false
 }
+
 const defineComponent = () => ({
   components: {
     Vue3Lottie,
@@ -22,6 +24,7 @@ const defineComponent = () => ({
     }
   },
 })
+
 const backtoMap = async () => {
   try {
     router.push({ name: 'map' })
@@ -67,6 +70,21 @@ setTimeout(() => {
         >回到地圖</a
       >
     </div>
+    <div style="position: relative; height: 100vh; overflow: auto">
+      <iframe
+        src="https://app.formbricks.com/s/clyffdm0c0be2wh6335clle0l"
+        frameborder="0"
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        "
+      >
+      </iframe>
+    </div>
   </div>
 </template>
 

app/src/components/game/ControlPalette.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
-import useSession from '../../store/session'
-import { surveyUrl } from '../../config'
+import { useSession } from '../../store/session'
+import { openBugReport, openQuestSurvey } from '../../utils/formbricks'
 
 const router = useRouter()
 const sessionStore = useSession()
@@ -21,31 +21,39 @@ const continuePlay = async () => {
 </script>
 
 <template>
-  <section
-    class="h-fit w-fit px-1 py-1 grid grid-cols-4 gap-2 place-content-between"
-  >
-    <button id="survey" class="bg-bg-secondary rounded-lg p-2">
-      <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
-        <font-awesome-icon
-          :icon="['fas', 'file-invoice']"
-          class="text-text-primary px-1"
-        />
-        <p class="text-text-primary inline ml-1 md:flex">問卷</p>
-      </a>
+  <section class="mt-2 flex flex-row gap-3 justify-center">
+    <button
+      id="survey"
+      class="bg-bg-secondary rounded-lg p-2"
+      @click="openQuestSurvey"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'file-invoice']"
+        class="text-text-primary px-1"
+      />
+      <p class="text-text-primary inline md:flex">問卷</p>
     </button>
-    <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
+    <button
+      title="Bug Report"
+      @click="openBugReport"
+      class="bg-bg-secondary rounded-lg p-2"
+    >
+      <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
+      <p class="text-text-primary inline ml-1 md:flex">回報</p>
+    </button>
+    <!-- <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
         class="text-text-disabled px-1"
       />
       <p class="text-text-disabled inline ml-1 md:flex">解答</p>
-    </button>
+    </button> -->
     <button id="reset" class="bg-bg-secondary rounded-lg p-2" @click="reset">
       <font-awesome-icon
         :icon="['fas', 'arrow-rotate-left']"
         class="text-text-primary px-1"
       />
-      <p class="text-text-primary inline ml-1 hidden md:flex">重來</p>
+      <p class="text-text-primary inline ml-1 md:flex">重來</p>
     </button>
     <button
       id="continue"
@@ -56,7 +64,7 @@ const continuePlay = async () => {
         :icon="['far', 'circle-right']"
         class="text-text-primary px-1"
       />
-      <p class="text-text-primary inline ml-1 hidden md:flex">繼續</p>
+      <p class="text-text-primary inline ml-1 md:flex">繼續</p>
     </button>
   </section>
 </template>

app/src/components/game/DescriptionPart.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 import MarkdownText from '../MarkdownText.vue'
 
 const sessionStore = useSession()
 const current = ref(-1)
+const hintDetails = ref<HTMLDetailsElement | null>(null)
 const length = computed(() => {
-  return sessionStore.session?.responses.length ?? 0
+  return sessionStore.session?.responses?.length ?? 0
 })
 
 const disabled = computed(() => {
@@ -14,6 +15,7 @@ const disabled = computed(() => {
 })
 
 watch(length, () => {
+  console.log('length update', length.value)
   current.value = length.value - 1
 })
 
@@ -28,6 +30,19 @@ const right = () => {
     current.value += 1
   }
 }
+
+const response = computed(() => {
+  if (!sessionStore.session) return null
+  if (current.value < 0) return null
+  if (current.value >= sessionStore.session.responses.length) return null
+  return sessionStore.session.responses[current.value]
+})
+
+watch(response, () => {
+  if (hintDetails.value) {
+    hintDetails.value.open = false
+  }
+})
 </script>
 
 <template>
@@ -37,7 +52,7 @@ const right = () => {
         :icon="['far', 'lightbulb']"
         class="text-yellow-200 p-2 content-center"
       />
-      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">提示 {{ length }}</h1>
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">說明</h1>
       <div v-if="current !== -1" class="flex w-full justify-end items-end">
         <button
           class="p-2 m-1 w-1/8"
@@ -62,27 +77,30 @@ const right = () => {
           @click="right"
           :disabled="disabled"
         >
-          <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
+          <font-awesome-icon
+            :icon="['fas', 'arrow-right']"
+            :class="disabled ? 'text-gray-600' : 'text-text'"
+          />
         </button>
       </div>
     </div>
     <div id="hint" class="bg-bg p-8 overflow-y-auto">
       <ul>
         <li
-          v-for="response in sessionStore.session?.responses[current]"
+          v-if="response"
           :key="response.type"
           class="text-text font-xl whitespace-pre-wrap"
         >
-          <div v-for="content in response.content" :key="content">
-            <MarkdownText :content="content" />
-          </div>
+          <MarkdownText :content="response.content" />
         </li>
         <li
-          v-for="hint in sessionStore.session?.hints[current]"
-          :key="hint"
+          v-if="response?.hint"
           class="text-text-primary font-xl whitespace-pre-wrap"
         >
-          <MarkdownText :content="hint" />
+          <details ref="hintDetails">
+            <summary class="cursor-pointer">提示</summary>
+            <MarkdownText :content="response.hint" />
+          </details>
         </li>
       </ul>
       <br />

app/src/components/game/QuestPart.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownText from '../MarkdownText.vue'
-import useSession from '../../store/session'
-import { Task } from '../../types'
+import { useSession } from '../../store/session'
 
 const sessionStore = useSession()
 const tasks = computed(() => {
-  return sessionStore.session?.tasks.map((task: Task) => {
+  console.log('session', sessionStore.session)
+  return sessionStore.session?.tasks.map((task) => {
     const prefix = task.completed ? '✓' : '➤'
     const color = task.completed ? 'text-text-primary' : 'text-text'
     return {

app/src/components/game/StartButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
 import { computed } from 'vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 
 const toast = useToast()
 const sessionStore = useSession()

app/src/components/game/TerminalPart.vue

@@ -1,23 +1,44 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { useTerminal } from '../../store/session'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useSession, useTerminal } from '../../store/session'
+
+const sessionStore = useSession()
 
 const terminal = ref<HTMLElement | null>(null)
+const term = useTerminal()
 
 onMounted(() => {
-  const term = useTerminal()
   if (!terminal.value) return
   term.mount(terminal.value)
-  window.addEventListener('resize', () => term.resizeScreen())
+
+  const handleResize = () => term.resizeScreen()
+  window.addEventListener('resize', handleResize)
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
 })
 </script>
 
 <template>
-  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button id="Terminal" class="text-text h-[5%]">終端機</button>
-  <div
-    id="terminal"
-    ref="terminal"
-    class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
-  ></div>
+  <div class="flex flex-col h-full">
+    <div class="flex items-center gap-2 p-1">
+      <font-awesome-icon :icon="['fas', 'terminal']" class="text-text" />
+      <button id="Terminal" class="text-text">終端機</button>
+
+      <a
+        class="text-sm font-normal text-gray-200 ml-10"
+        :href="`/terminal/${sessionStore.session?.containerName}?token=${sessionStore.session?.token}`"
+        target="_blank"
+      >
+        Open Terminal in New Tab
+      </a>
+    </div>
+    <div
+      id="terminal"
+      ref="terminal"
+      class="bg-bg-secondary flex-grow overflow-hidden px-2"
+      style="height: calc(100vh - 40px)"
+    ></div>
+  </div>
 </template>

app/src/components/game/TreeChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import FileNode from '../FileNode.vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 
 const sessionStore = useSession()
 </script>
@@ -48,14 +48,14 @@ const sessionStore = useSession()
   position: absolute;
   top: 0;
   right: 50%;
-  border-top: 1px solid #00ff00;
+  border-top: 2px solid #00ff00;
   width: 50%;
   height: 20px;
 }
 .tree li::after {
   right: auto;
   left: 50%;
-  border-left: 1px solid #00ff00;
+  border-left: 2px solid #00ff00;
 }
 
 .tree li:only-child::after,
@@ -73,7 +73,7 @@ const sessionStore = useSession()
 }
 
 .tree li:last-child::before {
-  border-right: 1px solid #00ff00;
+  border-right: 2px solid #00ff00;
   border-radius: 0 5px 0 0;
   -webkit-border-radius: 0 5px 0 0;
   -moz-border-radius: 0 5px 0 0;
@@ -89,7 +89,7 @@ const sessionStore = useSession()
   position: absolute;
   top: 0;
   left: 50%;
-  border-left: 1px solid #00ff00;
+  border-left: 2px solid #00ff00;
   width: 0;
   height: 20px;
 }
@@ -100,7 +100,7 @@ const sessionStore = useSession()
   text-decoration: none;
   color: #ffffff;
   font-family: arial, verdana, tahoma;
-  font-size: 11px;
+  font-size: 12px;
   display: inline-block;
 
   border-radius: 5px;
@@ -112,18 +112,10 @@ const sessionStore = useSession()
   -moz-transition: all 0.5s;
 }
 
-a.discovered {
-  background: #526b4e;
-  color: #000;
-  border: 1px solid #94a0b4;
-}
-
-ul.discovered,
-li.discovered {
-  border-color: #94a0b4;
-}
-
-a.pwd {
-  box-shadow: 0 0 40px rgba(255, 255, 0, 20);
+.tree li a.pwd {
+  border: 3px solid #00ff00;
+  background: #008080;
+  font-weight: bold;
+  font-size: 13px;
 }
 </style>

app/src/components/header/GameHeaderComponents.vue

@@ -3,8 +3,9 @@ import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
-import { bugReportUrl, surveyUrl } from '../../config'
-import useSession from '../../store/session'
+import { trpc } from '../../utils/trpc'
+import { openBugReport } from '../../utils/formbricks'
+import { useSession } from '../../store/session'
 import useUserProfile from '../../store/userProfile'
 
 const userStore = useUserProfile()
@@ -25,6 +26,11 @@ const handleLogout = async () => {
   }
 }
 
+const openSurvey = async () => {
+  const surveyUrl = await trpc.links.surveyLink.query()
+  window.open(surveyUrl, '_blank')
+}
+
 onMounted(async () => {
   try {
     await userStore.loadUserProfile()
@@ -60,18 +66,18 @@ onMounted(async () => {
   >
     {{ userStore.username }}
   </p>
-  <a
+  <button
     title="Survey"
-    :href="surveyUrl"
     target="_blank"
     class="md:h-5 md:w-5 px-1.5 w-auto"
+    @click="openSurvey"
   >
     <font-awesome-icon
       :icon="['fas', 'file-invoice']"
       class="text-text-primary inline"
     />
     <span class="text-text sm:hidden px-2">Survey</span>
-  </a>
+  </button>
   <RouterLink
     title="LeaderBoard"
     to="/leaderboard"
@@ -84,15 +90,14 @@ onMounted(async () => {
     <font-awesome-icon :icon="['fas', 'map']" class="text-text-primary" />
     <span class="text-text sm:hidden px-2">Map</span>
   </RouterLink>
-  <a
+  <button
     title="Bug Report"
-    :href="bugReportUrl"
-    target="_blank"
+    @click="openBugReport"
     class="md:h-5 md:w-5 px-1.5 w-auto"
   >
     <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
     <span class="text-text sm:hidden px-2">Bug Report</span>
-  </a>
+  </button>
   <button
     title="Sign Out"
     @click="handleLogout"

app/src/library.ts

@@ -3,28 +3,30 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 
 /* import specific icons */
 import {
-  faBars,
   faArrowLeft,
-  faList,
-  faGear,
-  faTriangleExclamation,
-  faExpand,
-  faTerminal,
-  faArrowRotateLeft,
-  faArrowRightFromBracket,
   faArrowRight,
+  faArrowRightFromBracket,
+  faArrowRotateLeft,
+  faBars,
   faBug,
   faCircleExclamation,
-  faMap,
-  faTrophy,
-  faFileInvoice,
   faEnvelope,
+  faExpand,
+  faFileInvoice,
+  faGear,
+  faList,
+  faMap,
   faPlay,
+  faTerminal,
+  faTriangleExclamation,
+  faTrophy,
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faLightbulb,
   faCircleQuestion,
   faCircleRight,
+  faFile,
+  faFolder,
+  faLightbulb,
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faFacebook,
@@ -34,27 +36,29 @@ import {
 
 /* add icons to the library */
 library.add(
-  faBars,
   faArrowLeft,
-  faList,
-  faGear,
-  faTriangleExclamation,
-  faExpand,
-  faTerminal,
-  faArrowRotateLeft,
-  faArrowRightFromBracket,
   faArrowRight,
+  faArrowRightFromBracket,
+  faArrowRotateLeft,
+  faBars,
   faBug,
-  faMap,
-  faTrophy,
   faCircleExclamation,
-  faLightbulb,
+  faEnvelope,
+  faExpand,
+  faFileInvoice,
+  faGear,
+  faList,
+  faMap,
+  faPlay,
+  faTerminal,
+  faTriangleExclamation,
+  faTrophy,
   faCircleQuestion,
   faCircleRight,
-  faGithub,
-  faGoogle,
-  faFileInvoice,
+  faFile,
+  faFolder,
+  faLightbulb,
   faFacebook,
-  faEnvelope,
-  faPlay
+  faGithub,
+  faGoogle
 )

app/src/main.ts

@@ -10,9 +10,9 @@ import Toast, { POSITION } from 'vue-toastification'
 /* import Vue Lottie */
 import Vue3Lottie from 'vue3-lottie'
 import 'vue-toastification/dist/index.css'
-
 import App from './App.vue'
 import router from './router'
+import formbricks from './utils/formbricks'
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -22,6 +22,12 @@ app.component('font-awesome-icon', FontAwesomeIcon)
 app.use(pinia)
 app.use(router)
 
+router.afterEach(() => {
+  if (typeof formbricks !== 'undefined') {
+    formbricks.registerRouteChange()
+  }
+})
+
 const options = {
   position: POSITION.TOP_RIGHT,
 }

app/src/store/session.ts

@@ -1,22 +1,40 @@
 import { defineStore } from 'pinia'
-import { FileGraph, FileObject } from '@linux-odyssey/file-graph'
-import { IQuest } from '@linux-odyssey/models'
-import { createSession, getActiveSession, getQuest } from '../utils/api'
+import {
+  FileGraph,
+  type FileGraphUpdateEvent,
+} from '../../../packages/file-graph'
+import type { IResponse, ITask } from '../../../packages/game'
+import type { SessionDetail } from '../../../server/src/routers/sessionRouter'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'
-import { Session, StageResponse } from '../types'
+import type { Session } from '../types'
+import { trpc } from '../utils/trpc'
 
 const socket = new Socket()
-const term = new SocketTerminal(40, 80)
+const term = new SocketTerminal()
 let hasSetup = false
 
+interface QuestDetailResponse {
+  id: string
+  title: string
+  instruction: string
+  requirements: string[]
+}
+
+interface SessionUpdate {
+  status: string
+  responses: IResponse[]
+  tasks: ITask[]
+  graphUpdate: FileGraphUpdateEvent
+}
+
 interface Store {
   session: Session | null
   questId: string
-  quest: IQuest | null
+  quest: QuestDetailResponse | null
 }
 
-const useSession = defineStore('session', {
+export const useSession = defineStore('session', {
   state: (): Store => ({
     session: null,
     questId: '',
@@ -24,44 +42,54 @@ const useSession = defineStore('session', {
   }),
   actions: {
     async setQuest(questId: string) {
-      this.quest = await getQuest(questId)
+      this.quest = await trpc.quests.getQuestDetail.query(questId)
       this.questId = questId
     },
-    async setSession(session: Session) {
-      this.session = session
-      this.session.graph = new FileGraph(session.graph)
+    async setSession(session: SessionDetail) {
+      this.session = {
+        ...session,
+        graph: new FileGraph(session.graph),
+        pwd: '/home/commander',
+        containerName: session.containerName || '',
+      }
       term.reset()
-      await socket.connect(session)
+      await socket.connect(this.session)
+      await term.connect(
+        `/terminal/${session.containerName}/ws?token=${session.token}`
+      )
       term.focus()
     },
     async createSession() {
-      const session = await createSession(this.questId)
+      const session = await trpc.session.createSession.mutate({
+        questId: this.questId,
+      })
       await this.setSession(session)
-      socket.emit('terminal', 'echo start\n')
+      term.send('echo start\n')
     },
     async getActiveSession() {
-      const session = await getActiveSession(this.questId)
+      const session = await trpc.session.getActiveSession.query({
+        questId: this.questId,
+      })
       if (session) {
         this.setSession(session)
       }
     },
-    updateGraph(event: { discover?: FileObject[]; pwd?: string }) {
+    newUpdate(update: SessionUpdate) {
       if (!this.session) return
-      if (event.discover) {
-        this.session.graph.discover(event.discover)
-      }
-      if (event.pwd) {
-        this.session.pwd = event.pwd
-      }
+      this.session.responses = update.responses
+      this.session.tasks = update.tasks
+      this.session.status = update.status
+      // if (
+      //   response.status === 'finished' &&
+      //   this.session.status !== 'finished'
+      // ) {
+      //   this.finish()
+      // }
+      // this.session.status = response.status
     },
-    newResponse(response: StageResponse) {
+    finish() {
       if (!this.session) return
-      this.session.responses.push(response.responses)
-      this.session.hints.push(response.hints)
-      if (response.tasks) {
-        this.session.tasks = response.tasks
-      }
-      this.session.status = response.status
+      this.session.status = 'finished'
     },
     reset() {
       socket.reset()
@@ -70,17 +98,21 @@ const useSession = defineStore('session', {
     },
     setup() {
       if (hasSetup) return
-      socket.on('terminal', (data: string) => {
-        term.write(data)
+      // socket.on('terminal', (data: string) => {
+      //   term.write(data)
+      // })
+      // term.onData((data: string) => {
+      //   socket.emit('terminal', data)
+      // })
+      socket.on('graph', (event: FileGraphUpdateEvent) => {
+        if (!this.session) return
+        this.session.graph.handleEvent(event)
+        if (event.pwd) {
+          this.session.pwd = event.pwd
+        }
       })
-      term.onData((data: string) => {
-        socket.emit('terminal', data)
-      })
-      socket.on('graph', (event: { discover: FileObject[]; pwd: string }) => {
-        this.updateGraph(event)
-      })
-      socket.on('response', (response: StageResponse) => {
-        this.newResponse(response)
+      socket.on('update', (update: SessionUpdate) => {
+        this.newUpdate(update)
       })
       hasSetup = true
     },
@@ -94,5 +126,3 @@ const useSession = defineStore('session', {
 export function useTerminal() {
   return term
 }
-
-export default useSession

app/src/store/userProfile.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { getUserProfile } from '../utils/api'
+import { trpc } from '../utils/trpc'
 
 interface IProgress {
   quest: string
@@ -12,18 +12,18 @@ interface IProgress {
 export interface UserProfile {
   username: string
   email: string
-  progress: Map<string, IProgress>
+  progress: Record<string, IProgress>
 }
 
 const useUserProfile = defineStore('userProfile', {
   state: (): UserProfile => ({
     username: '',
     email: '',
-    progress: new Map<string, IProgress>(),
+    progress: {},
   }),
   actions: {
     async loadUserProfile() {
-      const res = await getUserProfile()
+      const res = await trpc.users.getMyProfile.query()
       this.$patch(res)
     },
     async resetUserProfile() {

app/src/types.ts

@@ -1,6 +1,5 @@
-import { FileGraph } from '@linux-odyssey/file-graph'
-// eslint-disable-next-line import/no-relative-packages
-import { IResponse } from '@linux-odyssey/models'
+import type { FileGraph } from '../../packages/file-graph'
+import type { IResponse, ITask } from '../../packages/game'
 
 export interface Task {
   id: number
@@ -20,7 +19,8 @@ export interface Session {
   status: string
   graph: FileGraph
   pwd: string
-  hints: string[][]
-  tasks: Task[]
-  responses: IResponse[][]
+  tasks: ITask[]
+  responses: IResponse[]
+  token: string
+  containerName: string
 }

app/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string
+  export default content
+}

app/src/utils/api.ts

@@ -1,8 +1,4 @@
 import axios from 'axios'
-import { IQuest } from '@linux-odyssey/models'
-import { GetSessionsRequest } from '@linux-odyssey/constants'
-import { Session } from '../types'
-import { UserProfile } from '../store/userProfile'
 
 const api = axios.create({
   baseURL: '/api/v1',
@@ -12,34 +8,3 @@ const api = axios.create({
   withCredentials: true,
 })
 export default api
-
-export async function getUserProfile(): Promise<UserProfile> {
-  const res = await api.get<UserProfile>('/users/me')
-  return res.data
-}
-
-export async function getQuest(id: string): Promise<IQuest> {
-  const res = await api.get<IQuest>(`/quests/${id}`)
-  return res.data
-}
-
-export async function createSession(questId: string): Promise<Session> {
-  const res = await api.post<Session>('/sessions', { questId })
-  return res.data
-}
-
-export async function getSessions(
-  request: GetSessionsRequest
-): Promise<Session[]> {
-  const res = await api.get<Session[]>('/sessions', { params: request })
-  return res.data
-}
-
-export async function getActiveSession(
-  questId: string
-): Promise<Session | null> {
-  const res = await api.get<Session | null>('/sessions/active', {
-    params: { questId },
-  })
-  return res.data
-}

app/src/utils/formbricks.ts

@@ -0,0 +1,40 @@
+import formbricks from '@formbricks/js/website'
+import { useSession } from '../store/session'
+import useUserProfile from '../store/userProfile'
+
+if (typeof window !== 'undefined') {
+  formbricks.init({
+    environmentId: 'clzcdqqn0000kadvtqykdo0pc',
+    apiHost: 'https://app.formbricks.com',
+  })
+}
+
+export function openQuestSurvey() {
+  const sessionStore = useSession()
+  const userStore = useUserProfile()
+
+  formbricks.track('quest_completed', {
+    hiddenFields: {
+      quest: sessionStore.questId,
+      session: sessionStore.session?._id,
+      username: userStore.username,
+      email: userStore.email,
+    },
+  })
+}
+
+export function openBugReport() {
+  const sessionStore = useSession()
+  const userStore = useUserProfile()
+
+  formbricks.track('bug_report', {
+    hiddenFields: {
+      quest: sessionStore.questId,
+      session: sessionStore.session?._id,
+      username: userStore.username,
+      email: userStore.email,
+    },
+  })
+}
+
+export default formbricks

app/src/utils/socket.ts

@@ -1,5 +1,5 @@
 import { io, Socket } from 'socket.io-client'
-import { Session } from '../types'
+import type { Session } from '../types'
 
 type SocketCallback = (data: any) => void
 
@@ -23,11 +23,9 @@ class SocketWrapper {
 
       this.socket.on('connect', () => {
         console.log('Socket connected to session', session._id)
-      })
-
-      this.socket.once('terminal', () => {
         resolve()
       })
+
       this.socket.on('connect_error', reject)
       this.bindListeners()
     })

app/src/utils/terminal.ts

@@ -1,47 +1,72 @@
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
+import ReconnectingWebSocket from 'reconnecting-websocket'
 import 'xterm/css/xterm.css'
 
 class SocketTerminal {
   private term: Terminal
   private fitAddon: FitAddon
+  private socket: ReconnectingWebSocket | null = null
 
-  constructor(rows: number, cols: number) {
+  constructor() {
     this.term = new Terminal({
-      rows, // 行数
-      cols, // 不指定行数，自动回车后光标从下一行开始
-      convertEol: true, // 启用时，光标将设置为下一行的开头
-      // scrollback: 50, //终端中的回滚量
-      disableStdin: false, // 是否应禁用输入
-      // cursorStyle: "underline", //光标样式
-      cursorBlink: true, // 光标闪烁
+      convertEol: true,
+      scrollback: 1000,
+      fontSize: 16,
       theme: {
-        foreground: '#ECECEC', // 字体
-        background: '#000000', // 背景色
-        cursor: 'help', // 设置光标
+        foreground: '#ECECEC',
+        background: '#000000',
+        cursor: 'help',
       },
-      fontSize: 18,
-      fontWeight: 'normal',
     })
     this.fitAddon = new FitAddon()
     this.term.loadAddon(this.fitAddon)
-    this.fitAddon.fit()
+    this.term.onData((data) => {
+      if (this.socket) {
+        this.socket.send(data)
+      }
+    })
   }
 
-  write(message: string): void {
-    this.term.write(message)
-  }
+  connect(url: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      console.log('Connecting to terminal', url)
+      this.term.write('\r\n\x1B[1;32mConnecting to terminal\x1B[0m\r\n')
+      this.socket = new ReconnectingWebSocket(url, [], {
+        connectionTimeout: 5000,
+        maxRetries: 10,
+      })
+      this.socket.onopen = () => {
+        console.log('Connected to terminal')
+        this.term.reset()
+        this.term.write('\r\n\x1B[1;32mConnected to terminal\x1B[0m\r\n')
+        resolve()
+      }
 
-  onData(callback: any): void {
-    this.term.onData(callback)
-  }
+      this.socket.onclose = () => {
+        console.log('Disconnected from terminal')
+      }
 
-  focus(): void {
-    this.term.focus()
+      this.socket.onerror = (error) => {
+        console.error('WebSocket error:', error)
+      }
+      this.socket.onmessage = (event) => {
+        console.log('Received message from terminal')
+        const data =
+          typeof event.data === 'string'
+            ? event.data
+            : new TextDecoder().decode(event.data)
+        this.term.write(data)
+      }
+    })
   }
 
   resizeScreen(): void {
-    this.fitAddon.fit()
+    try {
+      this.fitAddon.fit()
+    } catch (e) {
+      console.error('Failed to resize terminal:', e)
+    }
   }
 
   mount(reference: HTMLElement): void {
@@ -49,8 +74,19 @@ class SocketTerminal {
     this.resizeScreen()
   }
 
+  send(message: string): void {
+    if (this.socket) {
+      this.socket.send(message)
+    }
+  }
+
+  focus(): void {
+    this.term.focus()
+  }
+
   reset(): void {
     this.term.reset()
+    this.socket?.close()
   }
 }
 

app/src/utils/trpc.ts

@@ -0,0 +1,16 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import type { AppRouter } from '../../../server/src/routers'
+
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: '/trpc',
+      // You can pass any HTTP headers you wish here
+      // async headers() {
+      //   return {
+      //     authorization: getAuthCookie(),
+      //   }
+      // },
+    }),
+  ],
+})

app/src/views/ChooseUsernamePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isValidUsername } from '@linux-odyssey/utils'
+import { isValidUsername } from '../../../packages/utils'
 import AuthForm from '../components/AuthForm.vue'
 import Background from '../components/DynamicBackground.vue'
 import { TooManyRequestsError, ValidationError } from '../utils/errors'

app/src/views/GamePage.vue

@@ -1,22 +1,32 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
-import useSession from '../store/session'
+import { computed, onMounted, watch } from 'vue'
+import { useSession } from '../store/session'
+import useUserProfile from '../store/userProfile'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
-import HintPart from '../components/game/HintPart.vue'
+import DescriptionPart from '../components/game/DescriptionPart.vue'
 import QuestPart from '../components/game/QuestPart.vue'
 import TerminalPart from '../components/game/TerminalPart.vue'
 import VisualizationPart from '../components/game/VisualizationPart.vue'
 import ControlPalette from '../components/game/ControlPalette.vue'
 import CompleteModal from '../components/game/CompleteModal.vue'
 import StartButton from '../components/game/StartButton.vue'
+import { openQuestSurvey } from '../utils/formbricks'
 
 const sessionStore = useSession()
+const userStore = useUserProfile()
 
 const completed = computed(() => {
   return sessionStore.session?.status === 'finished'
 })
 
+watch(completed, (newValue, oldValue) => {
+  if (newValue && !oldValue) {
+    console.log('finish', userStore)
+    openQuestSurvey()
+  }
+})
+
 const props = defineProps({
   questId: {
     type: String,
@@ -62,7 +72,7 @@ onMounted(async () => {
     <div class="bg-bg h-full rounded-lg w-1/2">
       <StartButton :questId="$props.questId" />
       <section id="hint" class="h-3/5">
-        <HintPart />
+        <DescriptionPart />
       </section>
       <hr class="border-border border" />
       <section id="terminal" class="h-2/5 overflow-hidden">

app/src/views/RegisterPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import validator from 'validator'
-import { isValidUsername } from '@linux-odyssey/utils'
-import { passwordPolicy } from '@linux-odyssey/constants'
+import { isValidUsername } from '../../../packages/utils'
+import { passwordPolicy } from '../../../packages/constants'
 import AuthForm from '../components/AuthForm.vue'
 import DynamicBackground from '../components/DynamicBackground.vue'
 import HeaderPart from '../components/header/HeaderPart.vue'

app/tailwind.config.ts

@@ -24,6 +24,9 @@ export default {
           DEFAULT: '#FF0000',
         },
       },
+      backgroundImage: {
+        catelogbg: "url('/catelogbg.svg')",
+      },
     },
   },
   plugins: [],

app/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

app/tsconfig.json

@@ -1,30 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "files": [],
   "references": [
-    { "path": "../packages/utils" },
-    { "path": "../packages/constants" },
-    { "path": "../packages/file-graph" },
-    { "path": "../packages/models" }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
   ]
 }

app/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

app/vite.config.ts

@@ -1,11 +1,27 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@game': path.resolve(__dirname, '../packages/game'),
+      '@models': path.resolve(__dirname, '../packages/models'),
+      '@utils': path.resolve(__dirname, '../packages/utils'),
+      '@constants': path.resolve(__dirname, '../packages/constants'),
+      '@file-graph': path.resolve(__dirname, '../packages/file-graph'),
+    },
+  },
   server: {
+    host: '0.0.0.0',
     proxy: {
+      '/trpc': {
+        target: process.env.API_TARGET || 'http://localhost:3000',
+        changeOrigin: false,
+        xfwd: true,
+      },
       '/api': {
         target: process.env.API_TARGET || 'http://localhost:3000',
         changeOrigin: false,

deployment/nginx.conf

@@ -1,27 +1,10 @@
 server {
     listen       80;
+    error_log /var/log/nginx/error.log debug;
 
     location / {
         root   /usr/share/nginx/html;
         index  index.html;
         try_files $uri $uri/ /index.html;
     }
-
-    location /api/ {
-        proxy_pass http://backend:3000;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
-
-    location /api-docs/ {
-        proxy_pass http://backend:3000;
-    }
-
-    location /socket.io/ {
-        proxy_pass http://backend:3000;
-        proxy_http_version 1.1;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
-    }
 }

docker-compose.prod.yml

@@ -1,7 +1,23 @@
-version: '3'
 services:
+  traefik:
+    image: traefik:v3.6.9
+    ports:
+      - 8000:8000
+      - 8080:8080
+    networks:
+      - players
+      - internal
+    command:
+      - '--api.insecure=true'
+      - '--providers.docker=true'
+      - '--providers.docker.exposedbydefault=false'
+      - '--entrypoints.web.address=:8000'
+      - '--entrypoints.web.forwardedHeaders.insecure=true' # trust all X-Forwarded headers
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+
   app:
-    image: linuxodyssey/frontend
+    image: linuxodyssey/frontend:${IMAGE_TAG:-latest}
     depends_on:
       - backend
     restart: always
@@ -10,12 +26,16 @@ services:
       dockerfile: app/Dockerfile
       target: prod
     networks:
-      internal:
-    ports:
-      - 8080:80
+      - internal
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.app.entrypoints=web'
+      - 'traefik.http.routers.app.rule=PathPrefix(`/`)'
+      - 'traefik.http.routers.app.service=app'
+      - 'traefik.http.services.app.loadbalancer.server.port=80'
 
   backend:
-    image: linuxodyssey/backend
+    image: linuxodyssey/backend:${IMAGE_TAG:-latest}
     depends_on:
       - db
     restart: always
@@ -29,21 +49,35 @@ services:
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
       - ./logs:/app/logs
+      - ./config:/app/config
+      - ./quests:/app/quests:ro
     env_file:
-      - .env
+      - .env.prod
     environment:
-      - MONGO_URL=mongodb://${MONGO_USER}:${MONGO_PASSWORD}@db:27017/${MONGO_DB}
       - DOCKER_NETWORK=linux-odyssey-players
-      - SECRET_KEY=${SECRET_KEY}
-      - TRUSTED_PROXIES=${TRUSTED_PROXIES}
       - BACKEND_URL=http://backend:3000
-      - BASE_URL=${BASE_URL}
+      - HOST_PROJECT_ROOT=${PWD}
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.backend-api.entrypoints=web'
+      - 'traefik.http.routers.backend-api.rule=PathPrefix(`/api`)'
+      - 'traefik.http.routers.backend-api.service=backend'
+      - 'traefik.http.routers.backend-socket.entrypoints=web'
+      - 'traefik.http.routers.backend-socket.rule=PathPrefix(`/socket.io`)'
+      - 'traefik.http.routers.backend-socket.service=backend'
+      - 'traefik.http.routers.backend-trpc.entrypoints=web'
+      - 'traefik.http.routers.backend-trpc.rule=PathPrefix(`/trpc`)'
+      - 'traefik.http.routers.backend-trpc.service=backend'
+      - 'traefik.http.routers.backend-api-docs.entrypoints=web'
+      - 'traefik.http.routers.backend-api-docs.rule=PathPrefix(`/api-docs`)'
+      - 'traefik.http.routers.backend-api-docs.service=backend'
+      - 'traefik.http.services.backend.loadbalancer.server.port=3000'
 
   analytics:
-    image: linuxodyssey/analytics
+    image: linuxodyssey/analytics:${IMAGE_TAG:-latest}
     build:
       context: .
-      dockerfile: packages/analytics/Dockerfile
+      dockerfile: services/analytics/Dockerfile
       target: prod
     restart: always
     depends_on:
@@ -52,13 +86,11 @@ services:
       - internal
     ports:
       - '3001:3001'
-    environment:
-      - MONGO_URL=mongodb://${MONGO_USER}:${MONGO_PASSWORD}@db:27017/${MONGO_DB}
-      - ADMIN_USERNAME=${ADMIN_USERNAME}
-      - ADMIN_PASSWORD=${ADMIN_PASSWORD}
+    env_file:
+      - .env.prod
 
   db:
-    image: mongo
+    image: mongo:6
     restart: always
     networks:
       - internal
@@ -67,22 +99,11 @@ services:
     volumes:
       - mongo:/data/db
       - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
-    environment:
-      - BASE_URL=${BASE_URL}
-      - MONGO_INITDB_ROOT_USERNAME=admin
-      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_ROOT_PASSWORD}
-      - MONGO_USER=${MONGO_USER}
-      - MONGO_PASS=${MONGO_PASSWORD}
-      - MONGO_DB=${MONGO_DB}
-      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
-      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
-      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
-      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
-      - SURVEY_URL=${SURVEY_URL}
-      - BUG_REPORT_URL=${BUG_REPORT_URL}
+    env_file:
+      - .env.prod
 
   base:
-    image: linuxodyssey/quest-base
+    image: linuxodyssey/quest-base:${IMAGE_TAG:-latest}
     build:
       context: .
       dockerfile: ./quests/Dockerfile

docker-compose.yml

@@ -1,7 +1,27 @@
 version: '3'
 services:
+  traefik:
+    image: traefik:v3.6.9
+    networks:
+      - players-dev
+    command:
+      - '--api.insecure=true'
+      - '--providers.docker=true'
+      - '--providers.docker.exposedbydefault=false'
+      - '--providers.file.directory=/etc/traefik/conf'
+      - '--providers.file.watch=true'
+      - '--entrypoints.web.address=:8000'
+    ports:
+      - '8000:8000'
+      - '8080:8080'
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./traefik/conf:/etc/traefik/conf
+
   db:
-    image: mongo
+    image: mongo:6
     restart: always
     networks:
       - internal
@@ -12,12 +32,23 @@ services:
 
   base:
     image: linuxodyssey/quest-base
+    networks:
+      - players-dev
     build:
       context: .
       dockerfile: ./quests/Dockerfile
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.base.rule=PathPrefix(`/terminal/base`)'
+      - 'traefik.http.middlewares.base-stripprefix.stripprefix.prefixes=/terminal/base'
+      - 'traefik.http.routers.base.middlewares=base-stripprefix'
+      - 'traefik.http.routers.base.entrypoints=web'
+      - 'traefik.http.services.base.loadbalancer.server.port=9090'
 
 networks:
   internal:
-  players:
-    name: linux-odyssey-players
-    internal: true
+  players-dev:
+    name: linux-odyssey-players-dev
+    internal: false

docker-scripts.sh

@@ -32,15 +32,16 @@ down() {
 dump() {
   # Define service name and dump directory name
   SERVICE_NAME="db"
+  COMPOSE_FILE="docker-compose.prod.yml"
   DUMP_NAME="mongodump-$(date --iso).archive"
-  CONTAINER_ID=$(docker compose ps -q $SERVICE_NAME)
+  CONTAINER_ID=$(docker compose -f $COMPOSE_FILE ps -q $SERVICE_NAME)
 
   # Fetch credentials from Docker environment variables
-  MONGO_URL=$(docker compose exec -T backend printenv MONGO_URL)
+  MONGO_URL=$(docker compose -f $COMPOSE_FILE exec -T backend printenv MONGO_URL)
   echo mongo uri: $MONGO_URL
 
   # Dump MongoDB data using credentials
-  docker compose exec -T $SERVICE_NAME sh -c "mongodump --gzip --archive=/tmp/$DUMP_NAME -d odyssey-test" &&
+  docker compose -f $COMPOSE_FILE exec -T $SERVICE_NAME sh -c "mongodump --gzip --archive=/tmp/$DUMP_NAME --uri=$MONGO_URL" &&
 
   # Copy the dump from the container to the host
   # Note: You will need to know the exact container name for this step

docs/windows-setup.md

@@ -0,0 +1,141 @@
+# Windows Environment Setup
+
+## Install WSL and Ubuntu
+
+Please refer to the Official [Setup WSL](https://learn.microsoft.com/en-us/windows/wsl/setup/environment) on Microsoft's website.
+
+Run the following command in PowerShell as Administrator:
+
+    wsl --install
+
+Then restart the computer. After restarting, you can open Ubuntu terminal by searching "Ubuntu" in Start menu. You will be prompted to create a new user account. Once you have done that, you can continue with the following steps.
+
+## Setup Environment (In Ubuntu terminal)
+
+1. Update and upgrade
+
+   ```
+   sudo apt-get update
+   sudo apt-get upgrade
+   ```
+
+1. Install Git
+
+   ```
+   sudo apt-get install git
+   ```
+
+1. Install Node.js (Version 20.x)
+
+   ```
+   curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+   sudo apt-get install nodejs
+   sudo apt install build-essential
+   sudo npm install -g yarn
+   ```
+
+## Install Docker
+
+(Refer to [get.docker.com](https://get.docker.com/))
+
+To install the latest stable versions of Docker CLI, Docker Engine, and their
+dependencies:
+
+1. Download the script
+
+   ```
+   curl -fsSL https://get.docker.com -o install-docker.sh
+   ```
+
+1. verify the script's content
+
+   ```
+   cat install-docker.sh
+   ```
+
+1. run the script with --dry-run to verify the steps it executes
+
+   ```
+   sh install-docker.sh --dry-run
+   ```
+
+**NOTE: the script will recommend you to use Docker Desktop instead, but we need to use Docker inside WSL for the backend to work.** Just ignore it and wait for the installation to finish.
+
+1. run the script either as root, or using sudo to perform the installation.
+
+   ```
+   sudo sh install-docker.sh
+   ```
+
+1. Verify the installation
+
+   ```
+   docker --version
+   ```
+
+1. Add your user to the docker group
+
+   ```
+   sudo usermod -aG docker $USER
+   ```
+
+   **NOTE: You need to create a new WSL terminal to apply the changes.**
+
+1. Verify the installation
+
+   ```
+   docker ps
+   ```
+   This should return something like:
+
+   CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
+
+## Run the Project (In Ubuntu terminal)
+
+1.  Clone the repository
+
+    ```
+    git clone https://github.com/lancatlin/linux-odyssey.git
+    cd linux-odyssey
+    ```
+
+    Optional: To open the project in VSCode, run the following command inside the project folder:
+
+    ```
+    code .
+    ```
+
+1. Install dependencies
+
+    ```
+    yarn install
+    ```
+    It is ok if there are some warnings and `gyp: ERR` errors, just verify there is `done` at the end.
+
+1. Copy the environment variables
+
+    ```
+    cp .env.sample .env
+    ```
+
+1.  Docker setup
+
+    ```
+    docker compose pull
+    docker compose build
+    docker compose up -d db
+    ```
+
+    <!-- Check folder ./config exist and is empty -->
+    <!-- Check .env file exist -->
+
+1.  Run the project
+
+    ```
+    yarn build
+    yarn dev
+    ```
+
+    <!-- Check ./config/ssh_key.pub is a file not a folder -->
+
+Enjoy!

package.json

@@ -9,6 +9,7 @@
     "app",
     "server",
     "packages/*",
+    "services/*",
     "tests"
   ],
   "scripts": {
@@ -16,7 +17,6 @@
     "build": "yarn workspace server build && yarn workspace app build && yarn workspace analytics build",
     "dev": "concurrently -n \"App,Server\" -c \"bgBlue.bold,bgGreen.bold\" \"yarn workspace app dev\" \"yarn workspace server dev\"",
     "server": "yarn workspace server dev",
-    "cli": "yarn workspace client start",
     "lint": "eslint .",
     "format": "prettier --ignore-path .prettierignore --write app server",
     "test": "yarn node --experimental-vm-modules --no-warnings $(yarn bin jest)",
@@ -34,26 +34,29 @@
     "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.10.4",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "babel-jest": "^29.7.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8.44.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.15.1",
+    "globals": "^16.0.0",
     "jest": "^29.7.0",
     "prettier": "^3.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vue-eslint-parser": "^9.4.2",
+    "zod-to-json-schema": "^3.24.5"
   },
   "dependencies": {
-    "typescript-eslint": "^7.4.0"
-  }
+    "latest": "^0.2.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/analytics/Dockerfile

@@ -1,19 +0,0 @@
-FROM node:20-alpine as build
-
-WORKDIR /app
-COPY ./package.json yarn.lock tsconfig.json ./
-COPY packages/analytics/package.json ./packages/analytics/package.json
-COPY packages/models/package.json ./packages/models/package.json
-RUN yarn install --frozen-lockfile
-ENV HOST=0.0.0.0
-ENV PORT=3001
-EXPOSE 3001
-
-# Production stage
-FROM build as prod
-COPY packages/analytics ./packages/analytics
-COPY packages/models ./packages/models
-ENV NODE_ENV=production
-WORKDIR /app/packages/analytics
-RUN yarn build
-CMD [ "yarn", "start" ]

packages/analytics/nodemon.json

@@ -1,6 +0,0 @@
-{
-  "watch": ["src", "views"],
-  "ext": "ts,handlebars,js",
-  "ignore": ["src/**/*.spec.ts"],
-  "exec": "node --loader ts-node/esm src/index.ts"
-}

packages/constants/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@linux-odyssey/constants",
-  "type": "module",
-  "version": "1.0.0",
-  "private": true,
-  "main": "dist/index.js",
-  "exports": "./dist/index.js",
-  "types": "dist/index.d.ts",
-  "license": "GPL",
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc -w"
-  },
-  "dependencies": {
-    "zod": "^3.23.8"
-  }
-}

packages/constants/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "outDir": "./dist"
-  },
-  "include": ["*.js", "*.ts"],
-  "exclude": ["node_modules", "dist"]
-}

packages/constants/utils.ts

@@ -0,0 +1 @@
+export const toArray = (val: unknown) => (typeof val === 'string' ? [val] : val)

packages/container/cli.js

@@ -1,98 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-const fs = require('fs').promises
-const { exit } = require('process')
-const minimist = require('minimist')
-const axios = require('axios')
-const { colorize, printResponses, printHints } = require('./print.js')
-const discoverFiles = require('./discover.js')
-
-const {
-  API_ENDPOINT,
-  TOKEN,
-  PWD,
-  CMD_NAME,
-  CMD_OUTPUT_FILE,
-  CMD_ERROR_FILE,
-  CMD_EXIT_CODE,
-} = process.env
-
-const api = axios.create({
-  baseURL: `${API_ENDPOINT}/api/v1`,
-  headers: {
-    Authorization: `Bearer ${TOKEN}`,
-  },
-})
-
-async function readOrNone(file) {
-  try {
-    return await fs.readFile(file, 'utf8')
-  } catch (_) {
-    return ''
-  }
-}
-
-const commandListeners = {
-  ls: [discoverFiles],
-}
-
-async function handleCommand(command) {
-  const argv = minimist(command.split(' '))
-  const name = argv._[0]
-  const listeners = commandListeners[name]
-  if (!listeners) return {}
-  return listeners.reduce(async (result, listener) => {
-    const res = await listener(argv)
-    return { ...res, ...result }
-  }, {})
-}
-
-async function handleResponse({ responses, hints, end }) {
-  if (responses) {
-    await printResponses(responses, 90)
-  }
-  if (hints) {
-    await printHints(hints, 90)
-  }
-  if (end) {
-    console.log(colorize('Quest completed!', 'blue'))
-  }
-  await api.post('/commands/completed')
-}
-
-async function main() {
-  if (!CMD_NAME) exit(0)
-
-  const params = await handleCommand(CMD_NAME)
-
-  const output = await readOrNone(CMD_OUTPUT_FILE)
-  const error = await readOrNone(CMD_ERROR_FILE)
-  const payload = {
-    command: CMD_NAME,
-    output,
-    error,
-    exit_code: CMD_EXIT_CODE,
-    pwd: PWD,
-    params,
-  }
-  try {
-    const res = await api.post('/commands', payload)
-    if (!res.data || !res.data.responses) return
-    await handleResponse(res.data)
-  } catch (err) {
-    if (err.response) {
-      console.error(err.response.data)
-      return
-    }
-    console.error(err.message)
-  }
-}
-
-main()
-  .then(exit)
-  .catch((err) => {
-    console.log(
-      '發生預期外的錯誤，請嘗試重新啟動 Quest，如果問題持續發生，請幫我們填寫右上角的錯誤回報表單。'
-    )
-    console.error(err)
-    exit(1)
-  })

packages/container/discover.js

@@ -1,49 +0,0 @@
-const fs = require('fs').promises
-const path = require('path')
-
-async function collectFilesInfo(inputPath, level = 0, hiddenFiles = false) {
-  const stats = await fs.stat(inputPath)
-  const name = path.basename(inputPath)
-  const discovered = level <= 1 && (hiddenFiles || !name.startsWith('.'))
-  const files = [
-    {
-      path: inputPath,
-      name,
-      type: stats.isDirectory() ? 'folder' : 'file',
-      discovered,
-    },
-  ]
-  if (stats.isDirectory() && level < 2) {
-    try {
-      let entries = await fs.readdir(inputPath)
-      if (level > 0) {
-        entries = entries.slice(0, 5)
-      }
-      const result = await Promise.all(
-        entries.map((entry) =>
-          collectFilesInfo(path.join(inputPath, entry), level + 1, hiddenFiles)
-        )
-      )
-      files.push(...result.flat())
-    } catch (_) {
-      // ignore
-    }
-  }
-  return files
-}
-
-async function discoverFiles(argv) {
-  const targetPath = argv._.length < 2 ? ['.'] : argv._.slice(1)
-  try {
-    const result = await Promise.all(
-      targetPath
-        .map((p) => path.resolve(process.cwd(), p))
-        .map((p) => collectFilesInfo(p, 0, argv.a || argv.all))
-    )
-    return { discover: result.flat() }
-  } catch (_) {
-    return {}
-  }
-}
-
-module.exports = discoverFiles

packages/container/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "container",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
-  "scripts": {
-    "build": "",
-    "watch": ""
-  },
-  "dependencies": {
-    "axios": "^1.6.0",
-    "minimist": "^1.2.8"
-  }
-}

packages/container/print.js

@@ -1,115 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable no-await-in-loop */
-const readline = require('readline')
-
-const RETURN_SYMBOL = '\u21B5'
-
-// ANSI color map
-const ANSI_COLORS = {
-  default: 0,
-  black: 30,
-  red: 31,
-  green: 32,
-  yellow: 33,
-  blue: 34,
-  magenta: 35,
-  cyan: 36,
-  white: 37,
-}
-
-function colorCode(color) {
-  return `\x1b[${ANSI_COLORS[color]}m`
-}
-
-function colorize(content, color) {
-  if (!color) return content
-  return `${colorCode(color)}${content}${colorCode('default')}`
-}
-
-process.stdin.setRawMode(true)
-
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout,
-  terminal: false,
-})
-
-function waitForEnter() {
-  return new Promise((resolve) => {
-    rl.once('line', resolve)
-  })
-}
-
-function formatLine(content, color) {
-  let result = colorCode(color)
-  let codeBlock = false
-  for (const c of content) {
-    switch (c) {
-      case '`':
-        result += colorCode(codeBlock ? color : 'green')
-        codeBlock = !codeBlock
-        break
-
-      default:
-        result += c
-    }
-  }
-  return result + colorCode('default') + RETURN_SYMBOL
-}
-
-function printLine(content, delay, color) {
-  const printContent = formatLine(content, color)
-  return new Promise((resolve) => {
-    let i = 0
-    const timer = setInterval(() => {
-      process.stdout.write(printContent[i])
-      i += 1
-      if (i >= printContent.length) {
-        clearInterval(timer)
-        process.stdout.write('\n')
-        resolve()
-      }
-    }, delay)
-
-    waitForEnter().then(() => {
-      clearInterval(timer)
-      if (i >= printContent.length) return
-      process.stdout.write(printContent.slice(i))
-      process.stdout.write('\n')
-      resolve()
-    })
-  })
-}
-
-async function printResponses(responses, delay = 100) {
-  console.log()
-  console.log(colorize('==============================', 'green'))
-  for (const response of responses) {
-    const { type, content, speaker, color } = response
-    if (type === 'narrative') {
-      for (const line of content) {
-        await printLine(line, delay, color || 'cyan')
-      }
-    }
-    if (type === 'dialogue') {
-      console.log(colorize(`${speaker}:`, 'green'))
-      for (const line of content) {
-        await printLine(`  ${line}`, delay, color || 'cyan')
-      }
-    }
-    console.log(colorize('------------------------------', 'green'))
-    console.log()
-  }
-}
-
-async function printHints(hints, delay = 100) {
-  for (const hint of hints) {
-    await printLine(hint, delay, 'yellow')
-  }
-}
-
-module.exports = {
-  printResponses,
-  printHints,
-  colorize,
-}

packages/file-graph/file.ts

@@ -2,25 +2,28 @@ import { basename } from './utils.js'
 
 export interface FileObject {
   path: string
-  type: string
+  type: 'file' | 'directory'
   discovered: boolean
+  empty?: boolean
 }
 
 export default class File implements FileObject {
   path: string
   name: string
-  type: string
+  type: 'file' | 'directory'
   discovered: boolean
+  empty?: boolean
 
   constructor(obj: FileObject) {
     this.path = obj.path.trimEnd()
     this.name = basename(obj.path)
     this.type = obj.type
     this.discovered = obj.discovered
+    this.empty = obj.empty && obj.type === 'directory'
   }
 
   isDirectory() {
-    return this.type === 'folder'
+    return this.type === 'directory'
   }
 
   contains(file: FileObject) {

packages/file-graph/fileGraph.ts

@@ -1,10 +1,11 @@
 import { FileObject } from './file.js'
 import FileNode from './fileNode.js'
 
-export interface Event {
+export interface FileGraphUpdateEvent {
   add?: FileObject[]
   remove?: FileObject[]
   discover?: FileObject[]
+  pwd?: string
 }
 
 export default class FileGraph extends FileNode {
@@ -20,7 +21,7 @@ export default class FileGraph extends FileNode {
 
   remove(files: FileObject[]) {
     // Logic to remove a file node from the graph
-    // If the file node is a folder, also remove all children
+    // If the file node is a directory, also remove all children
     // If the file node doesn't exist, throw an error
 
     files.forEach((file) => {
@@ -33,6 +34,10 @@ export default class FileGraph extends FileNode {
     // Overwrite the file graph with the provided files
     // Remove file nodes that don't exist anymore and add new ones
 
+    if (eventFiles.length === 0) {
+      return
+    }
+
     const newNode = new FileNode(eventFiles[0])
 
     eventFiles.slice(1).forEach((file) => {
@@ -42,19 +47,16 @@ export default class FileGraph extends FileNode {
     this.merge(newNode)
   }
 
-  handleEvent(event: Event) {
+  handleEvent(event: FileGraphUpdateEvent) {
     // eslint-disable-next-line default-case
-    switch (true) {
-      case !!event.add:
-        this.add(event.add)
-        break
-      case !!event.remove:
-        this.remove(event.remove)
-        break
-      case !!event.discover:
-        this.discover(event.discover)
-        break
-      // Implement other cases if needed
+    if (event.add) {
+      this.add(event.add)
+    }
+    if (event.remove) {
+      this.remove(event.remove)
+    }
+    if (event.discover) {
+      this.discover(event.discover)
     }
   }
 }

packages/file-graph/fileNode.ts

@@ -1,15 +1,18 @@
 import File, { FileObject } from './file.js'
-import {
-  DuplicateItemError,
-  ParentNotExistsError,
-  FileNotExistsError,
-} from './errors.js'
+import { ParentNotExistsError, FileNotExistsError } from './errors.js'
 import { dirname } from './utils.js'
 
-export default class FileNode extends File {
+export interface IFileNode {
+  path: string
+  type: 'file' | 'directory'
+  discovered: boolean
+  children?: IFileNode[]
+}
+
+export default class FileNode extends File implements IFileNode {
   children: FileNode[]
 
-  constructor(file: FileObject | FileNode) {
+  constructor(file: FileObject | IFileNode) {
     super(file)
     this.children = []
     if ((<FileNode>file).children)
@@ -22,15 +25,24 @@ export default class FileNode extends File {
   ) {
     const file = new FileNode(fileInput)
     if (file.path === this.path) {
-      throw new DuplicateItemError(
-        `File ${file.path} already exists in the tree: ${this.toString()}`
-      )
+      if (!this.discovered) {
+        this.discovered = file.discovered
+      }
+      return
     }
 
-    if (this.children.some((child) => child.path === file.path)) {
-      throw new DuplicateItemError(
-        `File ${file.path} already exists in the tree: ${this.toString()}`
-      )
+    let existing = false
+    for (const child of this.children) {
+      if (child.path === file.path) {
+        existing = true
+        if (!child.discovered) {
+          child.discovered = file.discovered
+        }
+        break
+      }
+    }
+    if (existing) {
+      return
     }
 
     const parentPath = dirname(file.path)
@@ -41,11 +53,11 @@ export default class FileNode extends File {
       // Recursively call addChild on the correct child node
       const childNode = this.children.find((child) => child.contains(file))
       if (childNode) {
-        childNode.addChild(file)
+        childNode.addChild(file, { makeParents })
       } else if (makeParents) {
         const parent = new FileNode({
           path: parentPath,
-          type: 'folder',
+          type: 'directory',
           discovered: false,
           children: [file],
         })
@@ -88,6 +100,12 @@ export default class FileNode extends File {
       // Update the state of this node
       this.discovered = this.discovered || fileNode.discovered
 
+      // the provided directory is empty, remove all children
+      if (fileNode.empty) {
+        this.children = []
+        return
+      }
+
       fileNode.children.forEach((child) => {
         const existingChild = this.children.find((c) => c.path === child.path)
         if (existingChild) {
@@ -133,4 +151,11 @@ export default class FileNode extends File {
       .join('')
     return `${name}\n${childrenString}`
   }
+
+  include(filePath: string, type?: 'file' | 'directory'): boolean {
+    if (this.path === filePath) {
+      return type ? this.type === type : true
+    }
+    return this.children.some((child) => child.include(filePath, type))
+  }
 }

packages/file-graph/index.ts

@@ -0,0 +1,6 @@
+export { default as File } from './file'
+export type { FileObject } from './file'
+export { default as FileNode } from './fileNode'
+export type { IFileNode } from './fileNode'
+export { default as FileGraph } from './fileGraph'
+export type { FileGraphUpdateEvent } from './fileGraph'

packages/file-graph/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "@linux-odyssey/file-graph",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": "./dist/index.js",
-  "license": "MIT",
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc -w",
-    "test": "yarn build && jest"
-  }
-}

packages/file-graph/src/index.ts

@@ -1,3 +0,0 @@
-export { default as File, FileObject } from './file.js'
-export { default as FileNode } from './fileNode.js'
-export { default as FileGraph, Event } from './fileGraph.js'

packages/file-graph/tests/file.test.ts

@@ -1,10 +1,10 @@
 import { describe, test, expect } from '@jest/globals'
-import File from '../src/file.js'
+import File from '../file.js'
 
 describe('File', () => {
   let file: File
   beforeEach(() => {
-    file = new File({ path: '/home/user', type: 'folder', discovered: true })
+    file = new File({ path: '/home/user', type: 'directory', discovered: true })
   })
 
   const filesToCompare = [

packages/file-graph/tests/fileGraph.test.ts

@@ -1,6 +1,7 @@
 import { describe, test, expect } from '@jest/globals'
-import FileGraph from '../src/fileGraph.js'
-import FileNode from '../src/fileNode.js'
+import FileGraph from '../fileGraph.js'
+import FileNode from '../fileNode.js'
+import { FileObject } from '../file.js'
 
 describe('FileGraph', () => {
   let root: FileNode
@@ -8,7 +9,7 @@ describe('FileGraph', () => {
   beforeEach(() => {
     root = new FileNode({
       path: '/',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     })
   })
@@ -16,7 +17,7 @@ describe('FileGraph', () => {
   test('add files to graph', () => {
     const fileGraph = new FileGraph(root)
 
-    const filesToAdd = [
+    const filesToAdd: FileObject[] = [
       {
         path: '/home/user/file1.txt',
         type: 'file',
@@ -24,7 +25,12 @@ describe('FileGraph', () => {
       },
       {
         path: '/home/user/folder1',
-        type: 'folder',
+        type: 'directory',
+        discovered: true,
+      },
+      {
+        path: '/home/user/folder2/file2.txt',
+        type: 'file',
         discovered: true,
       },
     ]
@@ -32,7 +38,34 @@ describe('FileGraph', () => {
     fileGraph.add(filesToAdd)
 
     expect(fileGraph.children.length).toBe(1)
-    expect(fileGraph.children[0].children[0].children.length).toBe(2)
+    expect(fileGraph.children[0].children[0].children.length).toBe(3)
+  })
+
+  test('ignore files that already exist', () => {
+    const fileGraph = new FileGraph(root)
+
+    const filesToAdd: FileObject[] = [
+      {
+        path: '/home/user/folder1',
+        type: 'directory',
+        discovered: true,
+      },
+      {
+        path: '/home/user/folder1/file1.txt',
+        type: 'file',
+        discovered: true,
+      },
+    ]
+
+    fileGraph.add(filesToAdd)
+
+    expect(fileGraph.children.length).toBe(1)
+    expect(fileGraph.children[0].children[0].children.length).toBe(1)
+
+    fileGraph.add([filesToAdd[1]])
+
+    expect(fileGraph.children.length).toBe(1)
+    expect(fileGraph.children[0].children[0].children.length).toBe(1)
   })
 
   test('remove files from graph', () => {
@@ -41,12 +74,12 @@ describe('FileGraph', () => {
     const filesToAdd = [
       {
         path: '/home/user/folder1',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
         path: '/home/user/folder2',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
@@ -61,22 +94,22 @@ describe('FileGraph', () => {
       },
     ]
 
-    fileGraph.add(filesToAdd)
+    fileGraph.add(filesToAdd as FileObject[])
 
     const filesToRemove = [
       {
         path: '/home/user/folder1/file1.txt',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
         path: '/home/user/folder2',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
     ]
 
-    fileGraph.remove(filesToRemove)
+    fileGraph.remove(filesToRemove as FileObject[])
 
     expect(fileGraph.children[0].children[0].children.length).toBe(1)
     expect(fileGraph.children[0].children[0].children[0].name).toBe('folder1')
@@ -90,7 +123,7 @@ describe('FileGraph', () => {
     const discoverFiles = [
       {
         path: '/home/user/folder1',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
@@ -110,7 +143,7 @@ describe('FileGraph', () => {
       },
     ]
 
-    fileGraph.discover(discoverFiles)
+    fileGraph.discover(discoverFiles as FileObject[])
     expect(fileGraph.children[0].children[0].children[0].children.length).toBe(
       3
     )
@@ -122,12 +155,12 @@ describe('FileGraph', () => {
     const filesToAdd = [
       {
         path: '/home/user/folder1',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
         path: '/home/user/folder2',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
@@ -142,12 +175,12 @@ describe('FileGraph', () => {
       },
     ]
 
-    fileGraph.add(filesToAdd)
+    fileGraph.add(filesToAdd as FileObject[])
 
     const newFiles = [
       {
         path: '/home/user/folder1',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
@@ -167,11 +200,43 @@ describe('FileGraph', () => {
       },
     ]
 
-    fileGraph.discover(newFiles)
+    fileGraph.discover(newFiles as FileObject[])
 
     expect(fileGraph.children[0].children[0].children.length).toBe(2)
     expect(fileGraph.children[0].children[0].children[0].children.length).toBe(
       3
     )
   })
+
+  test('discover a empty directory which children just being deleted', () => {
+    const fileGraph = new FileGraph(root)
+    const discoverFiles = [
+      {
+        path: '/home/user/folder1',
+        type: 'directory',
+        discovered: true,
+      },
+      {
+        path: '/home/user/folder1/file1.txt',
+        type: 'file',
+        discovered: true,
+      },
+    ]
+
+    fileGraph.add(discoverFiles as FileObject[])
+    expect(fileGraph.include('/home/user/folder1/file1.txt', 'file')).toBe(true)
+
+    fileGraph.discover([
+      {
+        path: '/home/user/folder1',
+        type: 'directory',
+        discovered: true,
+        empty: true,
+      },
+    ])
+
+    expect(fileGraph.include('/home/user/folder1/file1.txt', 'file')).toBe(
+      false
+    )
+  })
 })

packages/file-graph/tests/fileNode.test.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect } from '@jest/globals'
-import { DuplicateItemError, ParentNotExistsError } from '../src/errors.js'
-import FileNode from '../src/fileNode.js'
-import { FileObject } from '../src/file.js'
+import { ParentNotExistsError } from '../errors.js'
+import FileNode, { IFileNode } from '../fileNode.js'
+import { FileObject } from '../file.js'
 
 function createNodeFromFiles(files: FileObject[]) {
   const node = new FileNode(files[0])
@@ -42,17 +42,16 @@ describe('FileNode', () => {
   beforeEach(() => {
     rootNode = new FileNode({
       path: '/home/rudeus',
-      name: 'rudeus',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     })
   })
 
-  test('should throw error when adding duplicate item', () => {
-    const child = {
+  test('should override discovered when adding duplicate item', () => {
+    const child: FileObject = {
       path: '/home/rudeus/test',
-      type: 'folder',
-      discovered: true,
+      type: 'directory',
+      discovered: false,
     }
 
     // Adding the child for the first time
@@ -61,16 +60,16 @@ describe('FileNode', () => {
     expect(rootNode.children.length).toBe(1)
 
     // Trying to add the same child again should throw an error
-    expect(() => {
-      rootNode.addChild(child)
-    }).toThrow(DuplicateItemError)
+    child.discovered = true
+    rootNode.addChild(child)
+
+    expect(rootNode.children[0].discovered).toBe(true)
   })
 
   test('should throw error when parent does not exist', () => {
-    const child = {
+    const child: FileObject = {
       path: '/home/rudeus/alphabet/test',
-      name: 'test',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     }
 
@@ -81,22 +80,19 @@ describe('FileNode', () => {
   })
 
   test('adds nested children to the tree', () => {
-    const files = [
+    const files: FileObject[] = [
       {
         path: '/home/rudeus/forgotten_scroll.txt',
-        name: 'forgotten_scroll.txt',
         type: 'file',
         discovered: true,
       },
       {
         path: '/home/rudeus/test',
-        name: 'test',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
       },
       {
         path: '/home/rudeus/test/a',
-        name: 'a',
         type: 'file',
         discovered: false,
       },
@@ -111,9 +107,8 @@ describe('FileNode', () => {
   })
 
   test('adds nested children to the tree with makeParents option', () => {
-    const file = {
+    const file: FileObject = {
       path: '/home/rudeus/test/a/b/c/d/e',
-      name: 'a',
       type: 'file',
       discovered: false,
     }
@@ -129,34 +124,34 @@ describe('FileNode', () => {
   })
 
   test('merge-subtree', () => {
-    const root = {
+    const root: FileObject = {
       path: '/',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     }
-    const files1 = [
+    const files1: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/d', type: 'file', discovered: true },
-      { path: '/b/c/f', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/d', type: 'file' as const, discovered: true },
+      { path: '/b/c/f', type: 'file' as const, discovered: true },
     ]
 
-    const files2 = [
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/e', type: 'file', discovered: true },
-      { path: '/b/c/g', type: 'file', discovered: true },
+    const files2: FileObject[] = [
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/e', type: 'file' as const, discovered: true },
+      { path: '/b/c/g', type: 'file' as const, discovered: true },
     ]
 
-    const expected = [
+    const expected: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/e', type: 'file', discovered: true },
-      { path: '/b/c/g', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/e', type: 'file' as const, discovered: true },
+      { path: '/b/c/g', type: 'file' as const, discovered: true },
     ]
 
     mergeTest(files1, files2, expected)
@@ -166,90 +161,94 @@ describe('FileNode', () => {
     // Test if the node to merge is only the middle part of the tree
     // (i.e. the node to merge doesn't contains all level of children)
     // The original tree should keep the children that are not in the node to merge
-    const root = {
+    const root: FileObject = {
       path: '/',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     }
-    const files1 = [
+    const files1: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/d', type: 'file', discovered: true },
-      { path: '/b/c/f', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/d', type: 'file' as const, discovered: true },
+      { path: '/b/c/f', type: 'file' as const, discovered: true },
     ]
 
-    const files2 = [
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/e', type: 'file', discovered: true },
+    const files2: FileObject[] = [
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/e', type: 'file' as const, discovered: true },
     ]
 
-    const expected = [
+    const expected: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/e', type: 'file', discovered: true },
-      { path: '/b/c/f', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/e', type: 'file' as const, discovered: true },
+      { path: '/b/c/f', type: 'file' as const, discovered: true },
     ]
 
     mergeTest(files1, files2, expected)
   })
 
   test('merge-hidden', () => {
-    const root = {
+    const root: FileObject = {
       path: '/',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     }
-    const files1 = [
+    const files1: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/.b', type: 'file', discovered: false },
-      { path: '/c', type: 'folder', discovered: true },
-      { path: '/c/.d', type: 'file', discovered: false },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/.b', type: 'file' as const, discovered: false },
+      { path: '/c', type: 'directory' as const, discovered: true },
+      { path: '/c/.d', type: 'file' as const, discovered: false },
     ]
 
-    const files2 = [
-      { path: '/c', type: 'folder', discovered: true },
-      { path: '/c/.d', type: 'file', discovered: true },
+    const files2: FileObject[] = [
+      { path: '/c', type: 'directory' as const, discovered: true },
+      { path: '/c/.d', type: 'file' as const, discovered: true },
     ]
 
-    const expected = [
+    const expected: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/.b', type: 'file', discovered: false },
-      { path: '/c', type: 'folder', discovered: true },
-      { path: '/c/.d', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/.b', type: 'file' as const, discovered: false },
+      { path: '/c', type: 'directory' as const, discovered: true },
+      { path: '/c/.d', type: 'file' as const, discovered: true },
     ]
 
     mergeTest(files1, files2, expected)
   })
 
   test('remove-child', () => {
-    const root = {
+    const root: FileObject = {
       path: '/',
-      type: 'folder',
+      type: 'directory',
       discovered: true,
     }
-    const files = [
+    const files: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/c', type: 'folder', discovered: true },
-      { path: '/b/d', type: 'file', discovered: true },
-      { path: '/b/c/f', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/c', type: 'directory' as const, discovered: true },
+      { path: '/b/d', type: 'file' as const, discovered: true },
+      { path: '/b/c/f', type: 'file' as const, discovered: true },
     ]
 
-    const fileToRemove = { path: '/b/c', type: 'folder', discovered: true }
+    const fileToRemove: FileObject = {
+      path: '/b/c',
+      type: 'directory',
+      discovered: true,
+    }
 
-    const expected = [
+    const expected: FileObject[] = [
       root,
-      { path: '/a', type: 'file', discovered: true },
-      { path: '/b', type: 'folder', discovered: true },
-      { path: '/b/d', type: 'file', discovered: true },
+      { path: '/a', type: 'file' as const, discovered: true },
+      { path: '/b', type: 'directory' as const, discovered: true },
+      { path: '/b/d', type: 'file' as const, discovered: true },
     ]
 
     removeChildTest(files, fileToRemove, expected)
@@ -257,9 +256,9 @@ describe('FileNode', () => {
 })
 
 test('load nested fileNode', () => {
-  const data = {
+  const data: IFileNode = {
     path: '/',
-    type: 'folder',
+    type: 'directory',
     discovered: true,
     children: [
       {
@@ -269,12 +268,12 @@ test('load nested fileNode', () => {
       },
       {
         path: '/b',
-        type: 'folder',
+        type: 'directory',
         discovered: true,
         children: [
           {
             path: '/b/c',
-            type: 'folder',
+            type: 'directory',
             discovered: true,
             children: [
               {

packages/file-graph/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "composite": true,
-    "outDir": "./dist"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

packages/game/Event.ts

@@ -0,0 +1,48 @@
+import { Condition } from './condition/Condition'
+import {
+  ICommand,
+  ICondition,
+  IFileExistenceChecker,
+  IRequirements,
+  IResponse,
+} from './schema'
+
+export class Event {
+  id: string
+  private condition: Condition
+  private requirements: string[]
+
+  constructor(
+    id: string,
+    condition: ICondition,
+    private response: IResponse,
+    requirements?: IRequirements
+  ) {
+    this.id = id
+    this.condition = new Condition(condition)
+    this.requirements = requirements || []
+  }
+
+  async satisfies(
+    command: ICommand,
+    checker: IFileExistenceChecker
+  ): Promise<boolean> {
+    return this.condition.satisfies(command, checker)
+  }
+
+  private checkRequirements(completed: string[]): boolean {
+    return this.requirements.every((req) => completed.includes(req))
+  }
+
+  private finished(completed: string[]): boolean {
+    return completed.includes(this.id)
+  }
+
+  active(completed: string[]): boolean {
+    return !this.finished(completed) && this.checkRequirements(completed)
+  }
+
+  getResponse(): IResponse {
+    return this.response
+  }
+}

packages/game/Exception.ts

@@ -0,0 +1,18 @@
+/* eslint-disable max-classes-per-file */
+import { Event } from './Event'
+import { IStageException, IGlobalException } from './schema/exception'
+
+export class StageException extends Event {
+  readonly catchAll: boolean
+
+  constructor({ id, condition, response, catchAll }: IStageException) {
+    super(id, condition, response)
+    this.catchAll = catchAll
+  }
+}
+
+export class GlobalException extends Event {
+  constructor({ id, condition, response, requirements }: IGlobalException) {
+    super(id, condition, response, requirements)
+  }
+}

packages/game/Quest.ts

@@ -0,0 +1,93 @@
+/* eslint-disable no-await-in-loop */
+import { Event } from './Event'
+import { GlobalException } from './Exception'
+import {
+  IQuest,
+  IFileExistenceChecker,
+  ICommand,
+  IResponse,
+  ITask,
+} from './schema'
+import { Stage } from './Stage'
+
+export class Quest {
+  private quest: IQuest
+  private stages: Stage[]
+  private exceptions: GlobalException[] = []
+  private events: Map<string, Event> = new Map()
+
+  constructor(
+    quest: IQuest,
+    private checker: IFileExistenceChecker
+  ) {
+    this.quest = quest
+    this.stages = quest.stages.map((stage) => new Stage(stage))
+    for (const stage of this.stages) {
+      this.events.set(stage.id, stage)
+      for (const exception of stage.getExceptions()) {
+        this.events.set(exception.id, exception)
+      }
+    }
+    for (const exception of quest.exceptions ?? []) {
+      const globalException = new GlobalException(exception)
+      this.exceptions.push(globalException)
+      this.events.set(globalException.id, globalException)
+    }
+  }
+
+  getActiveStages(completed: string[]) {
+    return this.stages.filter((stage) => stage.active(completed))
+  }
+
+  private getActiveExceptions(completed: string[]) {
+    return this.exceptions.filter((exception) => exception.active(completed))
+  }
+
+  async findSatisfiedEvent(
+    command: ICommand,
+    completed: string[]
+  ): Promise<string | null> {
+    const stages = this.getActiveStages(completed)
+    let catchAllException: string | null = null
+    for (const stage of stages) {
+      const satisfies = await stage.satisfies(command, this.checker)
+      if (satisfies) {
+        return stage.id
+      }
+    }
+    for (const exception of stages.flatMap((stage) => stage.getExceptions())) {
+      if (exception.catchAll && !catchAllException) {
+        catchAllException = exception.id
+      } else if (await exception.satisfies(command, this.checker)) {
+        return exception.id
+      }
+    }
+    for (const exception of this.getActiveExceptions(completed)) {
+      if (await exception.satisfies(command, this.checker)) {
+        return exception.id
+      }
+    }
+    return catchAllException
+  }
+
+  getResponses(completed: string[]): IResponse[] {
+    return completed.map((id) => this.events.get(id)!.getResponse())
+  }
+
+  getTasks(completed: string[]): ITask[] {
+    const completedSet = new Set(completed)
+    const completedStages = this.stages
+      .filter((stage) => completedSet.has(stage.id))
+      .map((stage) => ({
+        id: stage.id,
+        name: stage.name,
+        completed: true,
+      }))
+    const activeStages = this.getActiveStages(completed).map((stage) => ({
+      id: stage.id,
+      name: stage.name,
+      completed: false,
+    }))
+    return [...completedStages, ...activeStages]
+  }
+}

packages/game/Session.ts

@@ -0,0 +1,67 @@
+import { FileGraph, IFileNode } from '../file-graph'
+import { Quest } from './Quest'
+import {
+  IQuest,
+  ICommand,
+  ISession,
+  IFileExistenceChecker,
+  IResponse,
+  ITask,
+} from './schema'
+
+export class GameSession {
+  private completed: string[] = []
+  private quest: Quest
+  private graph: FileGraph
+
+  constructor(
+    { completedEvents, graph }: Partial<ISession>,
+    quest: IQuest,
+    checker: IFileExistenceChecker
+  ) {
+    this.completed = completedEvents || []
+    this.quest = new Quest(quest, checker)
+    this.graph = new FileGraph(
+      graph ?? { path: '/', type: 'directory', discovered: false }
+    )
+  }
+
+  get completedEvents() {
+    return this.completed
+  }
+
+  complete(stageId: string) {
+    this.completed.push(stageId)
+  }
+
+  getActiveStages(): string[] {
+    return this.quest.getActiveStages(this.completed).map((stage) => stage.id)
+  }
+
+  async runCommand(command: ICommand) {
+    if (command.params) {
+      this.graph.handleEvent(command.params)
+    }
+    const stageId = await this.quest.findSatisfiedEvent(command, this.completed)
+    if (stageId) {
+      this.complete(stageId)
+    }
+    return stageId
+  }
+
+  isFinished() {
+    return this.getActiveStages().length === 0
+  }
+
+  getResponses(): IResponse[] {
+    return this.quest.getResponses(this.completed)
+  }
+
+  getTasks(): ITask[] {
+    return this.quest.getTasks(this.completed)
+  }
+
+  getGraph(): IFileNode {
+    return this.graph
+  }
+}

packages/game/Stage.ts

@@ -0,0 +1,26 @@
+import { IStage } from './schema'
+import { StageException } from './Exception'
+import { Event } from './Event'
+
+export class Stage extends Event {
+  name: string
+  private exceptions: StageException[]
+
+  constructor({
+    id,
+    name,
+    condition,
+    requirements,
+    exceptions,
+    response,
+  }: IStage) {
+    super(id, condition, response, requirements)
+    this.name = name || ''
+    this.exceptions =
+      exceptions?.map((exception) => new StageException(exception)) || []
+  }
+
+  getExceptions(): StageException[] {
+    return this.exceptions
+  }
+}

packages/game/cli.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { zodToJsonSchema } from 'zod-to-json-schema'
+import fs from 'fs'
+import { questSchema } from './schema'
+
+const jsonSchema = zodToJsonSchema(questSchema)
+
+fs.writeFileSync('quest.json', JSON.stringify(jsonSchema, null, 2))

packages/game/condition/CommandMatcher.ts

@@ -0,0 +1,13 @@
+import { ICommand } from '../schema'
+import { Matcher } from './Matcher.js'
+
+export class CommandMatcher implements Matcher {
+  private matcher: RegExp
+  constructor(command: string, flags?: string) {
+    this.matcher = new RegExp(command, flags)
+  }
+
+  match(command: ICommand): boolean {
+    return !!command.command && this.matcher.test(command.command)
+  }
+}

packages/game/condition/Condition.ts

@@ -0,0 +1,53 @@
+import {
+  ICommand,
+  IFileExistenceChecker,
+  ICondition,
+  IFileExistenceInput,
+} from '../schema'
+import { PwdMatcher } from './PwdMatcher.js'
+import { CommandMatcher } from './CommandMatcher.js'
+import { ErrorMatcher } from './ErrorMatcher.js'
+import { Matcher } from './Matcher.js'
+import { OutputMatcher } from './OutputMatcher.js'
+import { OrMatcher } from './OrMatcher.js'
+import { NotMatcher } from './NotMatcher.js'
+import { checkFiles } from './FileMatcher.js'
+
+export class Condition {
+  private files: IFileExistenceInput[] = []
+  private matchers: Matcher[] = []
+
+  constructor({ command, output, error, pwd, or, not, files }: ICondition) {
+    if (command) this.matchers.push(new CommandMatcher(command))
+    if (output) this.matchers.push(new OutputMatcher(output))
+    if (pwd) this.matchers.push(new PwdMatcher(pwd))
+    if (or) {
+      const conditions = or.map((condition) => new Condition(condition))
+      this.matchers.push(new OrMatcher(conditions))
+    }
+    if (not) this.matchers.push(new NotMatcher(new Condition(not)))
+    if (files) this.files = files
+    this.matchers.push(new ErrorMatcher(error)) // always check unexpected error
+  }
+
+  match(command: ICommand): boolean {
+    return this.matchers.every((matcher) => {
+      return matcher.match(command)
+    })
+  }
+
+  async check(checker: IFileExistenceChecker): Promise<boolean> {
+    if (this.matchers.length === 0) return true
+    return checkFiles(checker, this.files)
+  }
+
+  async satisfies(
+    command: ICommand,
+    checker: IFileExistenceChecker
+  ): Promise<boolean> {
+    // Error matcher is always true
+    if (this.matchers.length === 1 && this.files.length === 0) return false
+    // eslint-disable-next-line no-return-await
+    return this.match(command) && (await this.check(checker))
+  }
+}

packages/game/condition/ErrorMatcher.ts

@@ -0,0 +1,18 @@
+import { Matcher } from './Matcher.js'
+import { ICommand } from '../schema'
+
+export class ErrorMatcher implements Matcher {
+  private matcher?: RegExp
+  constructor(errorPattern?: string) {
+    if (errorPattern) {
+      this.matcher = new RegExp(errorPattern)
+    }
+  }
+
+  match(command: ICommand): boolean {
+    if (!this.matcher) {
+      return !command.error
+    }
+    return this.matcher.test(command.error || '')
+  }
+}

packages/game/condition/FileMatcher.ts

@@ -0,0 +1,11 @@
+import { IFileExistenceInput, IFileExistenceChecker } from '../schema'
+
+export async function checkFiles(
+  checker: IFileExistenceChecker,
+  files: IFileExistenceInput[]
+) {
+  const existences = await Promise.all(
+    files.map((file) => checker.exists(file))
+  )
+  return existences.every((exists, index) => exists === files[index].exists)
+}

packages/game/condition/Matcher.ts

@@ -0,0 +1,5 @@
+import { ICommand } from '../schema'
+
+export interface Matcher {
+  match(command: ICommand): boolean
+}

packages/game/condition/NotMatcher.ts

@@ -0,0 +1,10 @@
+import { ICommand } from '../schema'
+import { Matcher } from './Matcher.js'
+
+export class NotMatcher implements Matcher {
+  constructor(private condition: Matcher) {}
+
+  match(command: ICommand): boolean {
+    return !this.condition.match(command)
+  }
+}

packages/game/condition/OrMatcher.ts

@@ -0,0 +1,10 @@
+import { ICommand } from '../schema'
+import { Matcher } from './Matcher.js'
+
+export class OrMatcher implements Matcher {
+  constructor(private conditions: Matcher[]) {}
+
+  match(command: ICommand): boolean {
+    return this.conditions.some((condition) => condition.match(command))
+  }
+}

packages/game/condition/OutputMatcher.ts

@@ -0,0 +1,13 @@
+import { ICommand } from '../schema'
+import { Matcher } from './Matcher.js'
+
+export class OutputMatcher implements Matcher {
+  private matcher: RegExp
+  constructor(pattern: string, args?: string) {
+    this.matcher = new RegExp(pattern, args)
+  }
+
+  match(command: ICommand): boolean {
+    return !!command.output && this.matcher.test(command.output.trim())
+  }
+}

packages/game/condition/PwdMatcher.ts

@@ -0,0 +1,10 @@
+import { ICommand } from '../schema'
+import { Matcher } from './Matcher.js'
+
+export class PwdMatcher implements Matcher {
+  constructor(private pwd: string) {}
+
+  match(command: ICommand): boolean {
+    return command.pwd === this.pwd
+  }
+}

packages/game/index.ts

@@ -0,0 +1,6 @@
+export * from './schema'
+export * from './Quest'
+export * from './Session'
+export * from './Event'
+export * from './Stage'
+export * from './Exception'

packages/game/quest.json

@@ -0,0 +1,159 @@
+{
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "image": {
+      "type": "string"
+    },
+    "instruction": {
+      "type": "string"
+    },
+    "requirements": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "default": []
+    },
+    "stages": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": "string",
+            "pattern": "^[a-zA-Z0-9_-]+$"
+          },
+          "name": {
+            "type": "string"
+          },
+          "requirements": {
+            "$ref": "#/properties/requirements",
+            "default": []
+          },
+          "condition": {
+            "type": "object",
+            "properties": {
+              "command": {
+                "type": "string"
+              },
+              "output": {
+                "type": "string"
+              },
+              "error": {
+                "type": "string"
+              },
+              "pwd": {
+                "type": "string"
+              },
+              "files": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "path": {
+                      "type": "string"
+                    },
+                    "type": {
+                      "type": "string",
+                      "enum": ["file", "directory"]
+                    },
+                    "exists": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": ["path", "type", "exists"],
+                  "additionalProperties": false
+                }
+              },
+              "or": {
+                "type": "array",
+                "items": {
+                  "$ref": "#/properties/stages/items/properties/condition"
+                }
+              },
+              "not": {
+                "$ref": "#/properties/stages/items/properties/condition"
+              }
+            },
+            "additionalProperties": false
+          },
+          "response": {
+            "type": "object",
+            "properties": {
+              "type": {
+                "type": "string",
+                "enum": ["narrative", "dialogue"],
+                "default": "narrative"
+              },
+              "content": {
+                "type": "string"
+              },
+              "hint": {
+                "type": "string"
+              }
+            },
+            "required": ["content"],
+            "additionalProperties": false
+          },
+          "exceptions": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "id": {
+                  "type": "string"
+                },
+                "condition": {
+                  "$ref": "#/properties/stages/items/properties/condition"
+                },
+                "response": {
+                  "$ref": "#/properties/stages/items/properties/response"
+                },
+                "catchAll": {
+                  "type": "boolean",
+                  "default": false
+                }
+              },
+              "required": ["id", "condition", "response"],
+              "additionalProperties": false
+            }
+          }
+        },
+        "required": ["id", "condition", "response"],
+        "additionalProperties": false
+      }
+    },
+    "exceptions": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "$ref": "#/properties/stages/items/properties/exceptions/items/properties/id"
+          },
+          "condition": {
+            "$ref": "#/properties/stages/items/properties/condition"
+          },
+          "response": {
+            "$ref": "#/properties/stages/items/properties/response"
+          },
+          "requirements": {
+            "$ref": "#/properties/requirements",
+            "default": []
+          }
+        },
+        "required": ["id", "condition", "response"],
+        "additionalProperties": false
+      }
+    }
+  },
+  "required": ["id", "title", "image", "instruction", "stages"],
+  "additionalProperties": false,
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

packages/game/schema/command.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+const fileSchema = z.object({
+  path: z.string(),
+  type: z.enum(['file', 'directory']),
+  discovered: z.boolean(),
+  empty: z.boolean().optional(),
+})
+
+export const commandParamsSchema = z.object({
+  discover: fileSchema.array().optional(),
+  add: fileSchema.array().optional(),
+  remove: fileSchema.array().optional(),
+  pwd: z.string().optional(),
+})
+
+export type ICommandParams = z.infer<typeof commandParamsSchema>
+
+export const commandSchema = z.object({
+  command: z.string().optional(),
+  output: z.string().optional(),
+  error: z.string().optional(),
+  pwd: z.string().optional(),
+  params: commandParamsSchema.optional().nullable(),
+})
+
+export type ICommand = z.infer<typeof commandSchema>

packages/game/schema/condition.ts

@@ -0,0 +1,44 @@
+import { z } from 'zod'
+
+export const fileInputSchema = z.object({
+  path: z.string(),
+  type: z.enum(['file', 'directory']),
+})
+
+export type IFileInput = z.infer<typeof fileInputSchema>
+
+export const fileExistenceInputSchema = fileInputSchema.extend({
+  exists: z.boolean(),
+})
+
+export type IFileExistenceInput = z.infer<typeof fileExistenceInputSchema>
+
+const baseConditionSchema = z.object({
+  command: z.string().optional(),
+  output: z.string().optional(),
+  error: z.string().optional(),
+  pwd: z.string().optional(),
+  files: z.array(fileExistenceInputSchema).optional(),
+})
+
+export type ICondition = z.infer<typeof baseConditionSchema> & {
+  or?: ICondition[]
+  not?: ICondition
+}
+
+export const conditionSchema: z.ZodType<ICondition> =
+  baseConditionSchema.extend({
+    or: z.lazy(() => z.array(conditionSchema).optional()),
+    not: z.lazy(() => conditionSchema.optional()),
+  })
+
+export interface IFileExistenceChecker {
+  exists(file: IFileInput): Promise<boolean>
+}
+
+export class VoidFileExistenceChecker implements IFileExistenceChecker {
+  // eslint-disable-next-line class-methods-use-this
+  async exists(): Promise<boolean> {
+    return false
+  }
+}

packages/game/schema/exception.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import { conditionSchema } from './condition.js'
+import { responseSchema } from './response.js'
+import { requirementsSchema } from './requirements.js'
+
+export const exceptionSchema = z.object({
+  id: z.string(),
+  condition: conditionSchema,
+  response: responseSchema,
+})
+
+export type IException = z.infer<typeof exceptionSchema>
+
+export const stageExceptionSchema = exceptionSchema.extend({
+  catchAll: z.boolean().default(false),
+})
+
+export type IStageException = z.infer<typeof stageExceptionSchema>
+
+export const globalExceptionSchema = exceptionSchema.extend({
+  requirements: requirementsSchema.default([]),
+})
+
+export type IGlobalException = z.infer<typeof globalExceptionSchema>

packages/game/schema/index.ts

@@ -0,0 +1,20 @@
+import { IFileNode } from '../../file-graph'
+
+export * from './condition.js'
+export * from './stage.js'
+export * from './requirements.js'
+export * from './response.js'
+export * from './quest.js'
+export * from './exception.js'
+export * from './command.js'
+
+export interface ISession {
+  completedEvents: string[]
+  graph: IFileNode
+}
+
+export interface ITask {
+  id: string
+  name: string
+  completed: boolean
+}

packages/game/schema/quest.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import { stageSchema } from './stage.js'
+import { requirementsSchema } from './requirements.js'
+import { globalExceptionSchema } from './exception.js'
+
+export const questSchema = z.object({
+  id: z.string(),
+  title: z.string(),
+  image: z.string(),
+  instruction: z.string(),
+  requirements: requirementsSchema.default([]),
+  stages: z.array(stageSchema),
+  exceptions: z.array(globalExceptionSchema).optional(),
+})
+
+export type IQuest = z.infer<typeof questSchema>

packages/game/schema/requirements.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod'
+
+export const requirementsSchema = z.array(z.string())
+
+export type IRequirements = z.infer<typeof requirementsSchema>

packages/game/schema/response.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const responseSchema = z.object({
+  type: z.enum(['narrative', 'dialogue']).default('narrative'),
+  content: z.string(),
+  hint: z.string().optional(),
+})
+
+export type IResponse = z.infer<typeof responseSchema>

packages/game/schema/stage.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod'
+import { conditionSchema } from './condition.js'
+import { responseSchema } from './response.js'
+import { stageExceptionSchema } from './exception.js'
+import { requirementsSchema } from './requirements.js'
+
+export const stageSchema = z.object({
+  id: z.string().regex(/^[a-zA-Z0-9_-]+$/),
+  name: z.string().optional(),
+  requirements: requirementsSchema.default([]),
+  condition: conditionSchema,
+  response: responseSchema,
+  exceptions: stageExceptionSchema.array().optional(),
+})
+
+export type IStage = z.infer<typeof stageSchema>