Merge branch 'main' into app-neil

app/Dockerfile

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

app/Dockerfile.dev

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

app/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@linux-odyssey/file-graph": "*",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",

app/src/components/FileNode.vue

@@ -0,0 +1,29 @@
+<template>
+  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</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" />
+    </li>
+  </ul>
+</template>
+
+<script setup>
+const props = defineProps({
+  node: {
+    type: Object,
+    required: true,
+  },
+  pwd: {
+    type: String,
+    required: true,
+    default: '',
+  },
+})
+
+function nodeClass() {
+  const classes = []
+  if (props.node.discovered) classes.push('discovered')
+  if (props.node.path === props.pwd) classes.push('pwd')
+  return classes
+}
+</script>

app/src/components/QuestPart.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import api from '../utils/api'
+import sessionManager from '../utils/session'
 
 const questData = ref(null)
 const questErr = ref(null)
 
-api
-  .get('/quests/helloworld')
-  .then((res) => {
-    console.log(res.data)
+onMounted(async () => {
+  try {
+    const res = await api.get('/quests/helloworld')
     questData.value = res.data
-  })
-  .catch((err) => {
+  } catch (err) {
     questErr.value = err
-  })
+  }
+})
 </script>
 
 <template>
@@ -26,8 +26,24 @@ api
     </h1>
     <hr class="border-text-tertiary border-2 my-2" />
     <div>
-      <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
-      <p class="text-text" v-else-if="questData">{{ questData.instruction }}</p>
+      <div v-if="questData">
+        <p class="text-text">{{ questData.instruction }}</p>
+        <br />
+        <p class="text-text">Tasks:</p>
+        <ul v-if="sessionManager.session.value">
+          <li v-for="task in sessionManager.session.value.tasks" :key="task.id">
+            <p class="text-text">
+              <input
+                type="checkbox"
+                class="form-checkbox"
+                disabled
+                :checked="task.completed"
+              />{{ task.name }}
+            </p>
+          </li>
+        </ul>
+      </div>
+      <p class="text-red-500" v-else-if="questErr">{{ questErr.message }}</p>
       <p class="text-text" v-else>Loading...</p>
     </div>
   </div>

app/src/components/TreeChart.vue

@@ -1,56 +1,16 @@
-<script setup></script>
+<script setup>
+import FileNode from './FileNode.vue'
+import sessionManager from '../utils/session.js'
+</script>
 
 <template>
   <div class="tree w-max h-max">
     <ul>
       <li>
-        <a href="#">Parent</a>
-        <ul>
-          <li>
-            <a href="#">Child</a>
-            <ul>
-              <li>
-                <a href="#">Grand Child</a>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <a href="#">Child</a>
-            <ul>
-              <li><a href="#">Grand Child</a></li>
-              <li>
-                <a href="#">Grand Child</a>
-                <ul>
-                  <li>
-                    <a href="#">Great Grand Child</a>
-                  </li>
-                  <li>
-                    <a href="#">Great Grand Child</a>
-                  </li>
-                  <li>
-                    <a href="#">Great Grand Child</a>
-                    <ul>
-                      <li><a>Grand Child</a></li>
-                      <li>
-                        <a>Grand Child</a>
-                        <ul>
-                          <li>
-                            <a>Great Grand Child</a>
-                          </li>
-                          <li>
-                            <a>Great Grand Child</a>
-                          </li>
-                        </ul>
-                      </li>
-                      <li><a>Grand Child</a></li>
-                    </ul>
-                  </li>
-                </ul>
-              </li>
-              <li><a href="#">Grand Child</a></li>
-            </ul>
-          </li>
-        </ul>
+        <FileNode
+          :node="sessionManager.graph.value"
+          :pwd="sessionManager.pwd.value"
+        />
       </li>
     </ul>
   </div>
@@ -149,17 +109,18 @@
   -moz-transition: all 0.5s;
 }
 
-.tree li a:hover,
-.tree li a:hover + ul li a {
+a.discovered {
   background: #c8e4f8;
   color: #000;
   border: 1px solid #94a0b4;
 }
 
-.tree li a:hover + ul li::after,
-.tree li a:hover + ul li::before,
-.tree li a:hover + ul::before,
-.tree li a:hover + ul ul::before {
+ul.discovered,
+li.discovered {
   border-color: #94a0b4;
 }
+
+a.pwd {
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 水平偏移、垂直偏移、模糊半徑、顏色 */
+}
 </style>

app/src/utils/session.js

@@ -1,10 +1,19 @@
 import { ref } from 'vue'
+import { FileGraph } from '@linux-odyssey/file-graph'
 import api from './api'
 
 class SessionManager {
   constructor(questId) {
     this.questId = questId
     this.session = ref(null)
+    this.graph = ref(
+      new FileGraph({
+        path: '/',
+        type: 'folder',
+        discovered: false,
+      })
+    )
+    this.pwd = ref('')
   }
 
   getSession() {
@@ -14,6 +23,20 @@ class SessionManager {
   setSession(session) {
     console.log('Update session:', session)
     this.session.value = session
+    this.graph.value = new FileGraph(session.graph)
+  }
+
+  handleGraphUpdate(event) {
+    if (event.discover) {
+      this.graph.value.discover(event.discover)
+    }
+    if (event.pwd) {
+      this.pwd.value = event.pwd
+    }
+  }
+
+  setTasks(tasks) {
+    this.session.value.tasks = tasks
   }
 
   async createSession() {
@@ -37,7 +60,8 @@ class SessionManager {
     if (sessions.length === 0) {
       return
     }
-    const session = sessions[sessions.length - 1]
+    const { _id: sessionId } = sessions[sessions.length - 1]
+    const { data: session } = await api.get(`/sessions/${sessionId}`)
     console.log(
       `Last Session ID: ${session._id}, Quest: ${session.quest}, Created At: ${session.createdAt}`
     )
@@ -49,6 +73,7 @@ class SessionManager {
     if (!this.session.value) {
       await this.createSession()
     }
+    console.log(this.session.value)
   }
 }
 

app/src/views/GamePage.vue

@@ -18,6 +18,12 @@ onMounted(async () => {
   socket.on('disconnect', function close() {
     console.log('Disconnected from the server.')
   })
+  socket.on('graph', (event) => {
+    sessionManager.handleGraphUpdate(event)
+  })
+  socket.on('tasks', (tasks) => {
+    sessionManager.setTasks(tasks)
+  })
   socket.on('message', console.log)
 })
 </script>