feat: install echarts and initialize graph chart

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>