From f9e6228226492e90725355128e8cfd35d88ab85a Mon Sep 17 00:00:00 2001
From: Annie <an-hua.huang@ibm.com>
Date: Thu, 23 Nov 2023 00:16:14 +0800
Subject: [PATCH] Add 3 stage color: locked, unlocked, completed

---
 app/src/components/QuestMap.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index a4fcc1d..b7e72c3 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable no-console -->
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -73,9 +74,25 @@ const genOption = (nodes, edges) => ({
       itemStyle: {
         color: (params) => {
           const {
-            data: { completed },
+            data: { completed, unlocked },
           } = params
-          return completed ? '#ADADB5' : '#454552'
+          switch (completed !== unlocked) {
+            case false: {
+              // completed==unlocked, when completed or not yet unlocked
+              if (completed) {
+                return '#00ff00'
+              }
+              return '#454552'
+            }
+            case true: {
+              // completed!=unlocked, only when unlocked but not completed
+              return '#ADADB5'
+            }
+            default: {
+              return '#454552'
+            }
+          }
+          // return completed ? '#ADADB5' : '#454552'
         },
       },
     },