Change node shape, fix broke (y-axis), add header

app/src/components/QuestMap.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="p-2.5 bg-black w-screen h-screen">
+  <div class="p-2.5 bg-black w-full h-full flex">
-    <div class="text-slate-600 absolute w-screen z-0 p-2">
+    <div class="text-slate-600 absolute w-full z-0 p-2">
       <h1 class="relative left-1/3">01010111 01100101 01101100 01100011</h1>
       <h1 class="relative left-1/4">
         01101111 01101101 01100101 00100000 01110100 01101111
@@ -22,15 +22,11 @@
       </h1>
       <h1 class="relative left-1/4">01111001 00100001</h1>
     </div>
-    <h1 class="text-text-primary text-xl relative left-2 w-screen z-1">
+    <h1 class="text-text-primary text-xl absolute left-2 w-full z-1">
       Get through your linux journey!
     </h1>
-    <div class="p-2.5 absolute w-screen h-screen z-2">
+    <div class="p-2.5 relative w-full h-full z-2">
-      <div
+      <div ref="chartContainer" class="p-2.5 w-full h-full"></div>
-        ref="chartContainer"
-        class="p-2.5 relative w-screen h-screen"
-        style="width: 100%; height: 80%"
-      ></div>
     </div>
   </div>
 </template>
@@ -45,10 +41,10 @@ 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 = 70
-const rectImage = '../img/rectImg.png'
 const chartContainer = ref(null)
 let chartInstance = null
 
@@ -83,11 +79,14 @@ const genOption = (nodes, edges) => ({
     {
       type: 'graph',
       layout: 'none',
-      Symbol: `image://${rectImage}`,
+      symbol: () => {
-      symbolSize: [100, 50],
+        return NodeImage
+      },
+      symbolSize: [200, 100],
       roam: true,
       label: {
         show: true,
+        fontSize: 20,
       },
       edgeSymbol: ['circle', 'arrow'],
       edgeSymbolSize: [5, 12],
@@ -102,6 +101,7 @@ const genOption = (nodes, edges) => ({
         width: 3,
         curveness: 0,
       },
+      itemStyle: { color: '#454552' },
     },
   ],
 })

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/views/QuestMapPage.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="flex flex-col justify-center items-center">
+  <div class="h-[6vh] w-full">
-    <div class="p-3 bg-slate-700 w-screen flex">
+    <GameHeaderPart />
+  </div>
+  <div class="flex flex-col justify-center items-center h-[94vh]">
+    <QuestMap />
+    <!-- <div id="header" class="p-2 bg-slate-700 w-screen flex h-[6vh]">
       <h1 class="text-teal-300 text-4xl font-mono font-black skew-y-3">
         Quest Map
-      </h1>
+      </h1> -->
-      <p>Quest Map Page</p>
+    <!-- <p>Quest Map Page</p> -->
-    </div>
-    <QuestMap />
   </div>
+  <!-- </div> -->
 </template>
 
 <script setup>
 import QuestMap from '../components/QuestMap.vue'
+import GameHeaderPart from '../components/GameHeaderPart.vue'
 </script>