From f008fb9f6082577b4f38fe802f245d722ccad295 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Fri, 24 Nov 2023 12:49:17 +0800
Subject: [PATCH] modify quest map

---
 app/src/components/AuthForm.vue |  2 +-
 app/src/components/QuestMap.vue | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index ad3d1a6..9bc0865 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -90,7 +90,7 @@ const handleChange = () => {
     class="bg-bg border-8 border-bg-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
     <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
-    <div class="text-error inline-flex justify-center items-center xl:hidden">
+    <div class="text-error inline-flex justify-center items-center md:hidden">
       <font-awesome-icon
         :icon="['fas', 'circle-exclamation']"
         class="px-1 text-sm"
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index e668479..56013d6 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -15,8 +15,8 @@ import { DAG } from '@linux-odyssey/utils'
 import api from '../utils/api'
 import { NodeImage } from '../img/svg.js'
 
-const marginX = 200
-const marginY = 65
+const marginX = 500
+const marginY = 300
 const chartContainer = ref(null)
 let chartInstance = null
 const fullwidth = window.screen.width
@@ -71,9 +71,10 @@ const genOption = (nodes, edges) => ({
       symbol: () => {
         return NodeImage
       },
-      symbolSize: [fullwidth / 10, fullwidth / 25],
+      symbolSize: [fullwidth / 13, fullwidth / 30],
       roam: 'move',
-      zoom: 1,
+      zoom: 1.5,
+      center: ['150%', '50%'],
       label: {
         show: true,
         fontSize: fullwidth / 90,
@@ -103,7 +104,7 @@ const genOption = (nodes, edges) => ({
           if (unlocked) {
             return '#ADADB5'
           }
-          return '454552'
+          return '#505050'
         },
       },
     },