feat: install echarts and initialize graph chart

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,188 @@
+<template>
+  <div>
+    <h1 class="text-text-primary text-xl">Quest Map</h1>
+    <!-- <div class="flex flex-col items-center">
+      <div v-for="layer in layers" :key="layer" class="flex flex-row">
+        <div v-for="node in layer" :key="node.name">
+          <div class="text-text m-5">{{ node.name }}</div>
+        </div>
+      </div>
+    </div> -->
+    <div ref="chartContainer" style="width: 410px; height: 450px"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { use, init } from 'echarts/core'
+import { GraphChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import { TitleComponent, TooltipComponent } from 'echarts/components'
+
+const chartContainer = ref(null)
+let chartInstance = null
+const layers = [
+  [
+    {
+      name: 'helloworld',
+    },
+  ],
+  [
+    {
+      name: 'spell',
+    },
+  ],
+  [
+    {
+      name: 'read',
+    },
+    {
+      name: 'discover',
+    },
+  ],
+  [
+    {
+      name: 'remove',
+    },
+  ],
+]
+
+const edges = [
+  {
+    source: 'helloworld',
+    target: 'spell',
+  },
+  {
+    source: 'spell',
+    target: 'read',
+  },
+  {
+    source: 'spell',
+    target: 'discover',
+  },
+  {
+    source: 'read',
+    target: 'remove',
+  },
+  {
+    source: 'discover',
+    target: 'remove',
+  },
+]
+
+function toNodes(layers) {
+  return [
+    {
+      name: 'helloworld',
+      x: 100,
+      y: 100,
+    },
+  ]
+}
+
+use([GraphChart, CanvasRenderer, TitleComponent, TooltipComponent])
+
+const option = {
+  title: {
+    text: 'Quest Map',
+  },
+  rendener: 'canvas',
+  tooltip: {},
+  animationDurationUpdate: 1500,
+  animationEasingUpdate: 'quinticInOut',
+  series: [
+    {
+      type: 'graph',
+      layout: 'none',
+      symbolSize: 50,
+      roam: true,
+      label: {
+        show: true,
+      },
+      edgeSymbol: ['circle', 'arrow'],
+      edgeSymbolSize: [4, 10],
+      edgeLabel: {
+        fontSize: 20,
+      },
+      data: [
+        {
+          name: 'Node 1',
+          x: 300,
+          y: 300,
+        },
+        {
+          name: 'Node 2',
+          x: 800,
+          y: 300,
+        },
+        {
+          name: 'Node 3',
+          x: 550,
+          y: 100,
+        },
+        {
+          name: 'Node 4',
+          x: 550,
+          y: 500,
+        },
+      ],
+      // links: [],
+      links: [
+        {
+          source: 0,
+          target: 1,
+          symbolSize: [5, 20],
+          label: {
+            show: true,
+          },
+          lineStyle: {
+            width: 5,
+            curveness: 0.2,
+          },
+        },
+        {
+          source: 'Node 2',
+          target: 'Node 1',
+          label: {
+            show: true,
+          },
+          lineStyle: {
+            curveness: 0.2,
+          },
+        },
+        {
+          source: 'Node 1',
+          target: 'Node 3',
+        },
+        {
+          source: 'Node 2',
+          target: 'Node 3',
+        },
+        {
+          source: 'Node 2',
+          target: 'Node 4',
+        },
+        {
+          source: 'Node 1',
+          target: 'Node 4',
+        },
+      ],
+      lineStyle: {
+        opacity: 0.9,
+        width: 2,
+        curveness: 0,
+      },
+    },
+  ],
+}
+
+function initChart() {
+  console.log('initChart', chartContainer.value)
+  chartInstance = init(chartContainer.value)
+  chartInstance.setOption(option)
+}
+
+onMounted(() => {
+  initChart()
+})
+</script>

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,11 @@
+<template>
+  <div class="flex flex-col justify-center items-center">
+    <h1 class="text-text-primary text-xl">Quest Map</h1>
+    <p>Quest Map Page</p>
+    <QuestMap />
+  </div>
+</template>
+
+<script setup>
+import QuestMap from '../components/QuestMap.vue'
+</script>

yarn.lock

@@ -2253,6 +2253,14 @@ ecdsa-sig-formatter@1.0.11:
   dependencies:
     safe-buffer "^5.0.1"
 
+echarts@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
+  integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.4"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -5963,6 +5971,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^2.1.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
@@ -6395,3 +6408,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zrender@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261"
+  integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==
+  dependencies:
+    tslib "2.3.0"