Feat quests page (#67)

Feat quests page

app/Dockerfile

@@ -2,10 +2,10 @@
 FROM node:20-alpine as base
 WORKDIR /app
 COPY package.json yarn.lock ./
-COPY app/package.json ./app/package.json
 COPY packages/file-graph/package.json ./packages/file-graph/package.json
 COPY packages/utils/package.json ./packages/utils/package.json
 COPY packages/constants/package.json ./packages/constants/package.json
+COPY app/package.json ./app/package.json
 RUN yarn install --frozen-lockfile
 
 # Dev stage

app/package.json

@@ -20,6 +20,7 @@
     "@linux-odyssey/file-graph": "*",
     "@linux-odyssey/utils": "*",
     "axios": "^1.6.0",
+    "echarts": "^5.4.3",
     "socket.io-client": "^4.7.1",
     "validator": "^13.11.0",
     "vue": "^3.3.4",

app/src/components/QuestMap.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { use, init } from 'echarts/core'
+import { GraphChart } from 'echarts/charts'
+import { SVGRenderer } from 'echarts/renderers'
+import { TitleComponent, TooltipComponent } from 'echarts/components'
+import { DAG } from '@linux-odyssey/utils'
+import api from '../utils/api'
+import { NodeImage } from '../img/svg.js'
+
+const marginX = 100
+const marginY = 65
+const chartContainer = ref(null)
+let chartInstance = null
+
+use([GraphChart, SVGRenderer, TitleComponent, TooltipComponent])
+
+async function getQuests() {
+  try {
+    const res = await api.get('/quests')
+    return res.data
+  } catch (err) {
+    console.error(err)
+    throw err
+  }
+}
+
+async function getProgress() {
+  try {
+    const res = await api.get('/users/me')
+    return res.data.progress
+  } catch (err) {
+    console.error(err)
+    throw err
+  }
+}
+
+const genOption = (nodes, edges) => ({
+  renderer: 'svg',
+  tooltip: {},
+  animationDurationUpdate: 1500,
+  animationEasingUpdate: 'quinticInOut',
+  series: [
+    {
+      type: 'graph',
+      layout: 'none',
+      symbol: () => {
+        return NodeImage
+      },
+      symbolSize: [200, 100],
+      roam: true,
+      label: {
+        show: true,
+        fontSize: 22,
+      },
+      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) => {
+          const {
+            data: { completed },
+          } = params
+          return completed ? '#ADADB5' : '#454552'
+        },
+      },
+    },
+  ],
+})
+
+function getOption(quests, progress) {
+  const dag = new DAG(quests)
+
+  const nodes = dag.getNodes().map((node) => ({
+    id: node._id,
+    name: node.title,
+    x: marginX * node.index - (marginX * dag.getLayer(node._id)) / 2,
+    y: marginY * node.layer,
+    completed: progress[node._id]?.completed || false,
+    unlocked: node.requirements.every((req) => progress[req]?.completed),
+  }))
+  const lineAppearence = (node) => {
+    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) => ({
+    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) {
+  chartInstance = init(chartContainer.value)
+  chartInstance.setOption(option)
+  chartInstance.on('click', (params) => {
+    const {
+      data: { id, unlocked },
+    } = params
+
+    if (unlocked) {
+      router.push({ name: 'game', params: { questId: id } })
+    } else {
+      toast.warning('You have not completed the previous quest yet!')
+    }
+  })
+}
+
+onMounted(async () => {
+  const quests = await getQuests()
+  const progress = await getProgress()
+  const option = getOption(quests, progress)
+  initChart(option)
+})
+</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="text-text-primary text-xl p-2.5 absolute w-fit z-2 font-mono font-bold flex flax-wrap"
+    >
+      Get through your linux journey!
+    </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>
+    </div>
+  </div>
+</template>

app/src/img/rect.svg

@@ -0,0 +1,3 @@
+<svg width="272" height="139" viewBox="0 0 272 139" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.640015 25.0339C0.640015 11.2268 11.8329 0.0339355 25.64 0.0339355H246.36C260.167 0.0339355 271.36 11.2268 271.36 25.0339V113.14C271.36 126.948 260.167 138.14 246.36 138.14H25.64C11.8329 138.14 0.640015 126.948 0.640015 113.14V25.0339Z" fill="#454552"/>
+</svg>

app/src/img/svg.js

@@ -0,0 +1,2 @@
+export const NodeImage =
+  'path://M0.640015 25.0339C0.640015 11.2268 11.8329 0.0339355 25.64 0.0339355H246.36C260.167 0.0339355 271.36 11.2268 271.36 25.0339V113.14C271.36 126.948 260.167 138.14 246.36 138.14H25.64C11.8329 138.14 0.640015 126.948 0.640015 113.14V25.0339Z'

app/src/router.js

@@ -3,6 +3,7 @@ import GamePage from './views/GamePage.vue'
 import LoginPage from './views/LoginPage.vue'
 import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
+import QuestMapPage from './views/QuestMapPage.vue'
 import { isLoggedIn } from './utils/auth'
 
 const routes = [
@@ -40,6 +41,12 @@ const routes = [
     component: ChooseUsernamePage,
     meta: { requiresGuest: true },
   },
+  {
+    path: '/map',
+    name: 'map',
+    component: QuestMapPage,
+    meta: { requiresAuth: true },
+  },
 ]
 
 const router = createRouter({

app/src/views/QuestMapPage.vue

@@ -0,0 +1,19 @@
+<script setup>
+import QuestMap from '../components/QuestMap.vue'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
+</script>
+
+<template>
+  <div class="h-[6vh] w-full">
+    <GameHeaderPart />
+    <p
+      class="text-text-primary absolute z-1 font-bold inline-block"
+      style="left: 1.2%; top: 1.5%; height: 100%"
+    >
+      Quest Map
+    </p>
+  </div>
+  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
+    <QuestMap />
+  </div>
+</template>