Quest: remove unnecessary ls-stages (#195)

* quest: remove ls-stages in create

* feat: prevent throwing errors when failed to copy files

* feat: log new command in dev mode

* quest: copy

* quest: mv

* quest: rm

* quest: execute. Add many exceptions

* feat: pwd discovers parent folders

.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:5173
+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/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,6 @@
+config 
+.quest
+
 # Logs
 logs
 *.log
@@ -85,6 +88,7 @@ built
 .env.test.local
 .env.production.local
 .env.local
+.env.prod
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

.vscode/settings.json

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

README.md

@@ -5,9 +5,15 @@
 
 ## 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 +21,66 @@
     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
+
+The backend will use a SSH key pair to login to the player's container. The private key is on the host, and the public key is copied to the player's container.
+
+The key pair is stored in `./config/ssh_key` and `./config/ssh_key.pub`. If it doesn't exist, the backend will generate a new pair and store them.
+
+## 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
+    yarn build:quests
 
-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 +96,49 @@ 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 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
+    /path/to/linux-odyssey/packages/container:/usr/local/lib/container
+
+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
+
+## Development
+
+Copy `.env.sample` to `.env` and customize it for your needs.
+
+Run dev server (frontend, backend):
+
+    yarn dev
+
+**IMPORTANT NOTE**: only the app and server have hot-reloading, other packages require manually running `yarn dev` in each package.
+
+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 +155,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,26 +1,15 @@
 # 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
 

app/package.json

@@ -5,24 +5,21 @@
   "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",
     "socket.io-client": "^4.7.1",
@@ -37,13 +34,14 @@
   },
   "devDependencies": {
     "@types/validator": "^13.11.9",
-    "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.3.13",
     "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"
+    "@vitejs/plugin-vue": "^5.2.2",
+    "@vue/tsconfig": "^0.7.0",
+    "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

@@ -2,7 +2,7 @@
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import useSession from '../../store/session'
-import { surveyUrl } from '../../config'
+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

@@ -5,8 +5,9 @@ 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

@@ -2,11 +2,11 @@
 import { computed } from 'vue'
 import MarkdownText from '../MarkdownText.vue'
 import useSession from '../../store/session'
-import { Task } from '../../types'
 
 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/TerminalPart.vue

@@ -1,23 +1,34 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useTerminal } from '../../store/session'
 
 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>
+    </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

@@ -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,7 +3,8 @@ 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 { trpc } from '../../utils/trpc'
+import { openBugReport } from '../../utils/formbricks'
 import useSession from '../../store/session'
 import useUserProfile from '../../store/userProfile'
 
@@ -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,19 +1,37 @@
 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', {
@@ -24,44 +42,50 @@ 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',
+      }
       term.reset()
-      await socket.connect(session)
+      await socket.connect(this.session)
       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')
     },
     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()
@@ -76,11 +100,15 @@ const useSession = defineStore('session', {
       term.onData((data: string) => {
         socket.emit('terminal', data)
       })
-      socket.on('graph', (event: { discover: FileObject[]; pwd: string }) => {
-        this.updateGraph(event)
+      socket.on('graph', (event: FileGraphUpdateEvent) => {
+        if (!this.session) return
+        this.session.graph.handleEvent(event)
+        if (event.pwd) {
+          this.session.pwd = event.pwd
+        }
       })
-      socket.on('response', (response: StageResponse) => {
-        this.newResponse(response)
+      socket.on('update', (update: SessionUpdate) => {
+        this.newUpdate(update)
       })
       hasSetup = true
     },

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,6 @@ export interface Session {
   status: string
   graph: FileGraph
   pwd: string
-  hints: string[][]
-  tasks: Task[]
-  responses: IResponse[][]
+  tasks: ITask[]
+  responses: IResponse[]
 }

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
 

app/src/utils/terminal.ts

@@ -6,33 +6,39 @@ class SocketTerminal {
   private term: Terminal
   private fitAddon: FitAddon
 
-  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()
+  }
+
+  resizeScreen(): void {
+    try {
+      this.fitAddon.fit()
+    } catch (e) {
+      console.error('Failed to resize terminal:', e)
+    }
+  }
+
+  mount(reference: HTMLElement): void {
+    this.term.open(reference)
+    this.resizeScreen()
   }
 
   write(message: string): void {
     this.term.write(message)
   }
 
-  onData(callback: any): void {
+  onData(callback: (data: string) => void): void {
     this.term.onData(callback)
   }
 
@@ -40,15 +46,6 @@ class SocketTerminal {
     this.term.focus()
   }
 
-  resizeScreen(): void {
-    this.fitAddon.fit()
-  }
-
-  mount(reference: HTMLElement): void {
-    this.term.open(reference)
-    this.resizeScreen()
-  }
-
   reset(): void {
     this.term.reset()
   }

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 { 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,26 @@
 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: {
     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,5 +1,6 @@
 server {
     listen       80;
+    error_log /var/log/nginx/error.log debug;
 
     location / {
         root   /usr/share/nginx/html;
@@ -10,10 +11,29 @@ server {
     location /api/ {
         proxy_pass http://backend:3000;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+        proxy_buffering off;
+    }
+
+    location /trpc/ {
+        proxy_pass http://backend:3000;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+        proxy_buffering off;
     }
 
     location /api-docs/ {
         proxy_pass http://backend:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
     }
 
     location /socket.io/ {
@@ -23,5 +43,9 @@ server {
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+        proxy_buffering off;
     }
 }

docker-compose.prod.yml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   app:
     image: linuxodyssey/frontend
@@ -10,7 +9,7 @@ services:
       dockerfile: app/Dockerfile
       target: prod
     networks:
-      internal:
+      - internal
     ports:
       - 8080:80
 
@@ -29,15 +28,14 @@ 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}
 
   analytics:
     image: linuxodyssey/analytics
@@ -52,13 +50,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,19 +63,8 @@ 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

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   db:
-    image: mongo
+    image: mongo:6
     restart: always
     networks:
       - internal
@@ -12,12 +12,16 @@ services:
 
   base:
     image: linuxodyssey/quest-base
+    networks:
+      - players-dev
     build:
       context: .
       dockerfile: ./quests/Dockerfile
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
 
 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

@@ -16,7 +16,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 +33,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 +1,26 @@
 FROM node:20-alpine as build
 
 WORKDIR /app
-COPY ./package.json yarn.lock tsconfig.json ./
+COPY ./package.json yarn.lock ./
 COPY packages/analytics/package.json ./packages/analytics/package.json
-COPY packages/models/package.json ./packages/models/package.json
 RUN yarn install --frozen-lockfile
+
+COPY tsconfig.json ./tsconfig.json
+COPY packages ./packages
+
+RUN yarn workspace analytics build
+
+# Production stage
+FROM node:20-alpine as prod
+
+WORKDIR /app
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/packages/analytics ./packages/analytics
+
+ENV NODE_ENV=production
 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/analytics/package.json

@@ -3,30 +3,27 @@
   "version": "1.0.0",
   "main": "src/index.js",
   "private": true,
-  "type": "module",
   "license": "GPL",
   "scripts": {
-    "start": "node dist/index.js",
-    "build": "tsc -b -f",
-    "watch": "tsc -b --watch",
-    "dev": "nodemon"
+    "start": "node dist/analytics/src/index.js",
+    "build": "tsc",
+    "type-check": "tsc --noEmit",
+    "dev": "tsx watch src/index.ts"
   },
   "dependencies": {
-    "@linux-odyssey/models": "*",
     "dotenv": "^16.4.5",
-    "express": "^4.19.2",
+    "express": "^4.20.0",
     "express-basic-auth": "^1.2.1",
     "express-handlebars": "^7.1.2",
-    "mongoose": "^8.0.3"
+    "mongoose": "^8.9.5"
   },
   "devDependencies": {
     "@swc/core": "^1.4.2",
     "@swc/helpers": "^0.5.6",
     "@types/express": "^4.17.21",
     "@types/node": "^20.11.20",
-    "nodemon": "^3.1.0",
     "regenerator-runtime": "^0.14.1",
-    "ts-node": "^10.9.2",
+    "tsx": "^4.19.3",
     "typescript": "^5.3.3"
   }
 }

packages/analytics/src/config.ts

@@ -21,14 +21,16 @@ interface Config {
 }
 
 const config: Config = {
-  host: process.env.HOST || 'localhost',
-  port: process.env.PORT ? parseInt(process.env.PORT, 10) : 3001,
+  host: process.env.ADMIN_HOST || 'localhost',
+  port: process.env.ADMIN_PORT ? parseInt(process.env.ADMIN_PORT, 10) : 3001,
   db: process.env.MONGO_URL || 'mongodb://localhost:27017/odyssey-test',
   username: getOrFailed('ADMIN_USERNAME'),
   password: getOrFailed('ADMIN_PASSWORD'),
   baseUrl:
-    process.env.BASE_URL ||
-    `http://${process.env.HOST || 'localhost'}:${process.env.PORT ? parseInt(process.env.PORT, 10) : 3001}`,
+    process.env.ADMIN_BASE_URL ||
+    `http://${process.env.ADMIN_HOST || 'localhost'}:${
+      process.env.ADMIN_PORT ? parseInt(process.env.ADMIN_PORT, 10) : 3001
+    }`,
 }
 
 export default config

packages/analytics/src/controllers/commands.ts

@@ -1,6 +1,6 @@
 import type { Request, Response } from 'express'
-import Pagination from '../models/pagination.js'
-import { errorCommands } from '../models/commands.js'
+import Pagination from '../models/pagination'
+import { errorCommands } from '../models/commands'
 
 export async function commandListController(
   req: Request,

packages/analytics/src/controllers/index.ts

@@ -1,6 +1,6 @@
 import { Request, Response } from 'express'
-import { userCount } from '../models/users.js'
-import { questList } from '../models/quests.js'
+import { userCount } from '../models/users'
+import { questList } from '../models/quests'
 
 export async function homeController(req: Request, res: Response) {
   const quests = await questList()

packages/analytics/src/controllers/quests.ts

@@ -1,5 +1,5 @@
 import { Request, Response } from 'express'
-import { questList } from '../models/quests.js'
+import { questList } from '../models/quests'
 
 export async function questListController(req: Request, res: Response) {
   const quests = await questList()

packages/analytics/src/controllers/sessions.ts

@@ -1,6 +1,6 @@
 import { Request, Response } from 'express'
-import Pagination from '../models/pagination.js'
-import { sessionList, sessionDetail } from '../models/sessions.js'
+import Pagination from '../models/pagination'
+import { sessionList, sessionDetail } from '../models/sessions'
 
 export async function sessionListController(req: Request, res: Response) {
   const { nextKey, order } = req.query as { nextKey: string; order: string }

packages/analytics/src/controllers/users.ts

@@ -1,7 +1,7 @@
 import { Request, Response } from 'express'
 import mongoose from 'mongoose'
-import Pagination from '../models/pagination.js'
-import { userList, userDetail, idToUser } from '../models/users.js'
+import Pagination from '../models/pagination'
+import { userList, userDetail, idToUser } from '../models/users'
 
 export async function userListController(req: Request, res: Response) {
   const { nextKey, order } = req.query as { nextKey: string; order: string }

packages/analytics/src/index.ts

@@ -1,9 +1,9 @@
-import connectDB from '@linux-odyssey/models'
 import express from 'express'
 import { engine } from 'express-handlebars'
 import basicAuth from 'express-basic-auth'
-import config from './config.js'
-import router from './router.js'
+import { connectDB } from '../../models'
+import config from './config'
+import router from './router'
 
 async function main() {
   await connectDB(config.db)

packages/analytics/src/models/commands.ts

@@ -1,5 +1,5 @@
-import { Command } from '@linux-odyssey/models'
-import Pagination from './pagination.js'
+import { Command } from '../../../models'
+import Pagination from './pagination'
 
 // eslint-disable-next-line import/prefer-default-export
 export async function errorCommands(pagination: Pagination) {

packages/analytics/src/models/pagination.ts

@@ -1,5 +1,5 @@
 /* eslint-disable class-methods-use-this */
-// eslint-disable-next-line max-classes-per-file
+/* eslint-disable max-classes-per-file */
 import mongoose, { Types } from 'mongoose'
 
 export const DESC: string = 'desc'

packages/analytics/src/models/quests.ts

@@ -1,8 +1,14 @@
-/* eslint-disable object-shorthand */
-/* eslint-disable func-names */
-import { UserProfile } from '@linux-odyssey/models'
+import { UserProfile } from '../../../models'
 
-export function questList() {
+export interface QuestProgress {
+  _id: string
+  started: number
+  completed: number
+  completedRate: number
+  failed: number
+}
+
+export function questList(): Promise<QuestProgress[]> {
   return UserProfile.aggregate([
     {
       $project: {

packages/analytics/src/models/sessions.ts

@@ -1,5 +1,5 @@
-import { Command, Session } from '@linux-odyssey/models'
-import Pagination from './pagination.js'
+import { Command, Session } from '../../../models'
+import Pagination from './pagination'
 import {
   CommandObject,
   SessionDetail,

packages/analytics/src/models/users.ts

@@ -1,7 +1,7 @@
-import { Session, User } from '@linux-odyssey/models'
-import { Types } from 'mongoose'
-import Pagination from './pagination.js'
-import { IUser, UserSessionDetail } from '../interface.js'
+import { HydratedDocument, Types } from 'mongoose'
+import { Session, User, IUser, ISession } from '../../../models'
+import Pagination from './pagination'
+import { UserSessionDetail } from '../interface'
 
 function loginMethods(user: IUser): string[] {
   const methods: string[] = []
@@ -23,7 +23,11 @@ export function userCount() {
 }
 
 export async function userList(pagination: Pagination) {
-  const users = await Session.aggregate([
+  const users: {
+    userData: HydratedDocument<IUser>
+    count: number
+    lastActivityAt: Date
+  }[] = await Session.aggregate([
     pagination.match('user'),
     {
       $group: {
@@ -62,7 +66,7 @@ export async function userList(pagination: Pagination) {
 export async function userDetail(
   id: Types.ObjectId
 ): Promise<UserSessionDetail[]> {
-  const sessions = await Session.find({
+  const sessions: HydratedDocument<ISession>[] = await Session.find({
     user: id,
   })
   return sessions.map((session): UserSessionDetail => {

packages/analytics/src/router.ts

@@ -1,16 +1,13 @@
 import { Router } from 'express'
 
-import { homeController } from './controllers/index.js'
-import {
-  userListController,
-  userDetailController,
-} from './controllers/users.js'
-import { questListController } from './controllers/quests.js'
-import { commandListController } from './controllers/commands.js'
+import { homeController } from './controllers/index'
+import { userListController, userDetailController } from './controllers/users'
+import { questListController } from './controllers/quests'
+import { commandListController } from './controllers/commands'
 import {
   sessionDetailController,
   sessionListController,
-} from './controllers/sessions.js'
+} from './controllers/sessions'
 
 const router = Router()
 

packages/analytics/tsconfig.json

@@ -1,11 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "src",
     "outDir": "./dist"
   },
-  "include": ["src"],
-  "references": [{ "path": "../models" }],
+  "include": ["src", "../models"],
   "ts-node": {
     "swc": true
   }

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,10 +1,6 @@
-/* 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 handleCommand = require('./handleCommand.js')
 
 const {
   API_ENDPOINT,
@@ -16,13 +12,6 @@ const {
   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')
@@ -31,34 +20,6 @@ async function readOrNone(file) {
   }
 }
 
-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)
 
@@ -75,15 +36,21 @@ async function main() {
     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
+    const response = await fetch(`${API_ENDPOINT}/api/v1/commands`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${TOKEN}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+    if (!response.ok) {
+      console.error(`Failed to send command: ${response.statusText}`)
+      const responseBody = await response.text()
+      console.error(`Response Body: ${responseBody}`)
     }
-    console.error(err.message)
+  } catch (e) {
+    console.error('Error occurred while sending command:', e)
   }
 }
 
@@ -93,6 +60,10 @@ main()
     console.log(
       '發生預期外的錯誤，請嘗試重新啟動 Quest，如果問題持續發生，請幫我們填寫右上角的錯誤回報表單。'
     )
-    console.error(err)
+    if (err.response && err.response.data) {
+      console.log(err.response.data)
+    } else {
+      console.log(err)
+    }
     exit(1)
   })

packages/container/discover.js

@@ -1,21 +1,33 @@
 const fs = require('fs').promises
 const path = require('path')
+const { resolvePath } = require('./utils')
 
 async function collectFilesInfo(inputPath, level = 0, hiddenFiles = false) {
-  const stats = await fs.stat(inputPath)
+  let stats
+  try {
+    stats = await fs.stat(inputPath)
+  } catch (e) {
+    if (e.code === 'ENOENT') {
+      return []
+    }
+    throw e
+  }
   const name = path.basename(inputPath)
   const discovered = level <= 1 && (hiddenFiles || !name.startsWith('.'))
-  const files = [
-    {
-      path: inputPath,
-      name,
-      type: stats.isDirectory() ? 'folder' : 'file',
-      discovered,
-    },
-  ]
+  const self = {
+    path: inputPath,
+    name,
+    type: stats.isDirectory() ? 'directory' : 'file',
+    discovered,
+  }
+  const files = [self]
   if (stats.isDirectory() && level < 2) {
     try {
       let entries = await fs.readdir(inputPath)
+      if (entries.length === 0) {
+        self.empty = true
+        return files
+      }
       if (level > 0) {
         entries = entries.slice(0, 5)
       }
@@ -35,15 +47,23 @@ async function collectFilesInfo(inputPath, level = 0, hiddenFiles = false) {
 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() }
+    const result = (
+      await Promise.all(
+        targetPath
+          .map((p) => resolvePath(p))
+          .map((p) => collectFilesInfo(p, 0, argv.a || argv.all))
+      )
+    ).flat()
+    if (result.length === 0) {
+      return {}
+    }
+    return { discover: result }
   } catch (_) {
     return {}
   }
 }
 
-module.exports = discoverFiles
+module.exports = {
+  discoverFiles,
+  collectFilesInfo,
+}

packages/container/handleCommand.js

@@ -0,0 +1,174 @@
+const fs = require('fs').promises
+const path = require('path')
+const minimist = require('minimist')
+const { discoverFiles, collectFilesInfo } = require('./discover')
+const { resolvePath } = require('./utils')
+
+const commandListeners = {
+  ls: {
+    opts: {
+      boolean: ['a', 'l', 'h'],
+    },
+    handler: discoverFiles,
+  },
+  cd: {
+    handler: changeDirectory,
+  },
+  touch: {
+    handler: createFiles,
+  },
+  mkdir: {
+    opts: {
+      boolean: ['p'],
+    },
+    handler: createFiles,
+  },
+  cp: {
+    opts: {
+      boolean: ['r'],
+    },
+    handler: copyFiles,
+  },
+  rm: {
+    opts: {
+      boolean: ['r', 'f', 'v'],
+    },
+    handler: removeFiles,
+  },
+  rmdir: {
+    opts: {
+      boolean: ['p', 'v'],
+    },
+    handler: removeFiles,
+  },
+  mv: {
+    handler: moveFiles,
+  },
+  pwd: {
+    handler: showCurrentPath,
+  },
+}
+
+async function handleCommand(command) {
+  const name = command.split(' ')[0]
+  const listener = commandListeners[name]
+  if (!listener) return {}
+  const argv = minimist(command.split(' '), listener.opts)
+  return listener.handler(argv)
+}
+
+function changeDirectory() {
+  return {
+    pwd: process.cwd(),
+  }
+}
+
+async function createFiles(argv) {
+  const { _ } = argv
+  const files = _.slice(1)
+  const results = []
+  for (const file of files) {
+    const filePath = resolvePath(file)
+    try {
+      const exists = await fs.stat(filePath)
+      if (exists) {
+        results.push({
+          path: filePath,
+          type: exists.isFile() ? 'file' : 'directory',
+          discovered: true,
+        })
+      }
+    } catch (err) {
+      if (err.code !== 'ENOENT') {
+        throw err
+      }
+    }
+  }
+  return {
+    add: results,
+  }
+}
+
+async function copyFiles(argv) {
+  const { _ } = argv
+  const files = _.slice(1)
+  if (files.length === 0) {
+    return undefined
+  }
+  const dest = files.pop()
+  const destPath = resolvePath(dest)
+  return {
+    discover: await collectFilesInfo(destPath, 0, true),
+  }
+}
+
+async function removeFiles(argv) {
+  const files = argv._.slice(1)
+  const results = []
+  for (const file of files) {
+    const filePath = resolvePath(file)
+    try {
+      await fs.access(filePath, fs.constants.F_OK)
+    } catch {
+      results.push({
+        path: filePath,
+        type: 'file',
+        discovered: false,
+      })
+    }
+  }
+  return {
+    remove: results,
+  }
+}
+
+async function moveFiles(argv) {
+  const { _ } = argv
+  const sources = _.slice(1)
+  if (sources.length === 0) {
+    return undefined
+  }
+  const dest = sources.pop()
+  const results = {
+    add: [],
+    remove: [],
+  }
+  // check source
+  for (const source of sources) {
+    const sourcePath = resolvePath(source)
+    try {
+      await fs.access(sourcePath, fs.constants.F_OK)
+    } catch {
+      results.remove.push({
+        path: sourcePath,
+        type: 'file',
+        discovered: false,
+      })
+    }
+  }
+
+  // check dest
+  const destPath = resolvePath(dest)
+  results.add = await collectFilesInfo(destPath, 0, true)
+  return results
+}
+
+function showCurrentPath() {
+  const pwd = process.cwd()
+  const dirs = pwd.split('/')
+  let currentPath = '/'
+  const result = []
+  for (const dir of dirs) {
+    currentPath = path.join(currentPath, dir)
+    result.push({
+      path: currentPath,
+      type: 'directory',
+      discovered: true,
+    })
+  }
+  return {
+    add: result,
+  }
+}
+
+module.exports = handleCommand

packages/container/package.json

@@ -8,7 +8,6 @@
     "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/container/utils.js

@@ -0,0 +1,10 @@
+const os = require('os')
+const path = require('path')
+
+function resolvePath(p) {
+  return path.resolve(process.cwd(), p.replace('~', os.homedir()))
+}
+
+module.exports = {
+  resolvePath,
+}

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)
+  }
+}