From dd67bcb1bdb764116e8dbca59186e33477a1d250 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:11:27 +0800
Subject: [PATCH 1/7] Add: Quest Introduction

---
 app/src/components/QuestIntro.vue | 129 ++++++++++++++++++++++++++++++
 app/src/components/QuestMap.vue   |  42 +++++++---
 2 files changed, 162 insertions(+), 9 deletions(-)
 create mode 100644 app/src/components/QuestIntro.vue

diff --git a/app/src/components/QuestIntro.vue b/app/src/components/QuestIntro.vue
new file mode 100644
index 0000000..450050a
--- /dev/null
+++ b/app/src/components/QuestIntro.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { ref, defineProps, onMounted } from 'vue'
+import { getQuest } from '../utils/api'
+import MarkdownText from './MarkdownText.vue'
+
+const props = defineProps({
+  questTitle: {
+    type: String,
+    required: true,
+  },
+  questId: {
+    type: String,
+    required: true,
+  },
+  questCompleted: {
+    type: Boolean,
+    required: true,
+  },
+  questUnlocked: {
+    type: Boolean,
+    required: true,
+  },
+})
+const emit = defineEmits(['closeIntro'])
+const showIntro = ref(true) // Controls whether the modal is visible or not
+const router = useRouter()
+const toast = useToast()
+const { questTitle, questId, questCompleted, questUnlocked } = props
+const questInstruction = ref('')
+const questColor = ref('')
+const questTextColor = ref('')
+const closeModal = () => {
+  showIntro.value = false
+  emit('closeIntro', true)
+  router.push({ name: 'map' })
+}
+const handleQuests = (id: string) => {
+  console.log(id)
+  if (questUnlocked) {
+    router.push({ name: 'game', params: { questId: id } })
+  } else {
+    toast.warning('你還沒完成前一個關卡!')
+  }
+}
+const handleColour = () => {
+  if (questCompleted) {
+    questColor.value = '#00ff00'
+    questTextColor.value = '#000000'
+  } else if (questUnlocked) {
+    questColor.value = '#8c8c92'
+    questTextColor.value = '#ffffff'
+  } else {
+    questColor.value = '#505050'
+    questTextColor.value = '#a0a0a0'
+  }
+}
+onMounted(async () => {
+  const quest = await getQuest(questId)
+  questInstruction.value = quest.instruction
+  handleColour()
+})
+</script>
+
+<template>
+  <div v-if="showIntro" class="modal">
+    <div class="modal-content bg-bg-secondary rounded-lg">
+      <span class="close text-text content-between" @click="closeModal"
+        >&times;</span
+      >
+
+      <h2
+        id="QuestTitle"
+        class="text-2xl text-text mb-5 w-full inline-flex justify-center"
+      >
+        {{ questTitle }}
+      </h2>
+      <div class="w-full h-3/5 p-8">
+        <div class="px-5 whitespace-pre-wrap">
+          <MarkdownText
+            class="text-text markdown-content"
+            :content="questInstruction"
+          />
+        </div>
+      </div>
+      <a
+        id="StartAdventure"
+        target="_blank"
+        @click="handleQuests(questId)"
+        :style="{ backgroundColor: questColor, color: questTextColor }"
+        class="inline-flex justify-center rounded-lg text-base font-black py-3 mt-5 w-full text-lg"
+        >開始冒險</a
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1;
+}
+
+.modal-content {
+  position: relative;
+  margin: 10% auto;
+  padding: 20px;
+  width: 60%;
+  height: 50%;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 30px;
+  cursor: pointer;
+}
+.markdown-content {
+  text-align: left;
+}
+</style>
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 680743d..52d0260 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { DAG } from '@linux-odyssey/utils'
 import { getQuests } from '../utils/api'
 import useUserProfile from '../store/userProfile'
+import QuestIntro from './QuestIntro.vue'
 
 const store = useUserProfile()
-const router = useRouter()
 const toast = useToast()
 
 const svgWidth = ref(window.innerWidth)
@@ -18,7 +17,15 @@ const marginY = 120
 
 const nodeWidth = 160
 const nodeHeight = 50
-
+const opened = ref<Node>({
+  id: '',
+  title: '',
+  x: 0,
+  y: 0,
+  index: 0,
+  completed: false,
+  unlocked: false,
+})
 type Node = {
   id: string
   title: string
@@ -101,12 +108,21 @@ async function computeGraphData() {
     toast.error('Failed to load quest data')
   }
 }
-
-function handleNodeClick(node: { id: string; unlocked: boolean }) {
-  if (node.unlocked) {
-    router.push({ name: 'game', params: { questId: node.id } })
-  } else {
-    toast.warning('你還沒完成前一個關卡!')
+function handleNodeClick(node: Node) {
+  opened.value = node
+  console.log(opened.value)
+}
+function closeIntro(close: boolean) {
+  if (close) {
+    opened.value = {
+      id: '',
+      title: '',
+      x: 0,
+      y: 0,
+      index: 0,
+      completed: false,
+      unlocked: false,
+    }
   }
 }
 
@@ -202,6 +218,14 @@ const edgeStyle = computed(() => {
         </g>
       </g>
     </svg>
+    <QuestIntro
+      :questTitle="opened.title"
+      :questId="opened.id"
+      :questCompleted="opened.completed"
+      :questUnlocked="opened.unlocked"
+      v-if="opened.id !== ''"
+      @close-intro="closeIntro"
+    />
   </div>
 </template>
 

From 60641ba0ad8d521d1b1738faaa82e0b5b35ebf24 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:29:01 +0800
Subject: [PATCH 2/7] change background loading method

---
 app/src/components/QuestMap.vue | 123 ++++++++++++++++----------------
 app/tailwind.config.ts          |   3 +
 2 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 52d0260..993530e 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -161,71 +161,70 @@ const edgeStyle = computed(() => {
 
 <template>
   <div class="relative bg-black w-full h-full flex">
-    <img
-      src="../img/catelogbg.svg"
-      alt="bg"
-      class="p-2 stroke-2 scale-y-120 justify-center items-center"
-    />
-    <h1
-      class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
-      style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
+    <div
+      class="flex place-content-center w-full bg-catelogbg bg-cover bg-scroll"
     >
-      踏上你的Linux冒險之旅吧！
-    </h1>
-    <svg
-      :width="svgWidth"
-      :height="svgHeight"
-      class="absolute"
-      @mousedown="startDrag"
-      @mousemove="drag"
-      @mouseup="endDrag"
-      @mouseleave="endDrag"
-    >
-      <g :transform="`translate(${offsetX}, ${offsetY})`">
-        <g
-          v-for="edge in graphData.edges"
-          :key="`${edge.source.id}-${edge.target.id}`"
-        >
-          <path
-            :d="curvedPath(edge.source, edge.target)"
-            :class="['edge', edgeStyle(edge)]"
-          />
-        </g>
-        <g
-          v-for="node in graphData.nodes"
-          :key="node.id"
-          @click="handleNodeClick(node)"
-        >
-          <rect
-            :x="node.x - nodeWidth / 2"
-            :y="node.y - nodeHeight / 2"
-            :width="nodeWidth"
-            :height="nodeHeight"
-            rx="10"
-            ry="10"
-            :class="['node', nodeStyle(node)]"
-          />
-          <text
-            :x="node.x"
-            :y="node.y"
-            text-anchor="middle"
-            alignment-baseline="middle"
-            :class="['node-text', nodeStyle(node)]"
-            font-size="18"
+      <h1
+        class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
+        style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
+      >
+        踏上你的Linux冒險之旅吧！
+      </h1>
+      <svg
+        :width="svgWidth"
+        :height="svgHeight"
+        class="absolute"
+        @mousedown="startDrag"
+        @mousemove="drag"
+        @mouseup="endDrag"
+        @mouseleave="endDrag"
+      >
+        <g :transform="`translate(${offsetX}, ${offsetY})`">
+          <g
+            v-for="edge in graphData.edges"
+            :key="`${edge.source.id}-${edge.target.id}`"
           >
-            {{ node.title }}
-          </text>
+            <path
+              :d="curvedPath(edge.source, edge.target)"
+              :class="['edge', edgeStyle(edge)]"
+            />
+          </g>
+          <g
+            v-for="node in graphData.nodes"
+            :key="node.id"
+            @click="handleNodeClick(node)"
+          >
+            <rect
+              :x="node.x - nodeWidth / 2"
+              :y="node.y - nodeHeight / 2"
+              :width="nodeWidth"
+              :height="nodeHeight"
+              rx="10"
+              ry="10"
+              :class="['node', nodeStyle(node)]"
+            />
+            <text
+              :x="node.x"
+              :y="node.y"
+              text-anchor="middle"
+              alignment-baseline="middle"
+              :class="['node-text', nodeStyle(node)]"
+              font-size="18"
+            >
+              {{ node.title }}
+            </text>
+          </g>
         </g>
-      </g>
-    </svg>
-    <QuestIntro
-      :questTitle="opened.title"
-      :questId="opened.id"
-      :questCompleted="opened.completed"
-      :questUnlocked="opened.unlocked"
-      v-if="opened.id !== ''"
-      @close-intro="closeIntro"
-    />
+      </svg>
+      <QuestIntro
+        :questTitle="opened.title"
+        :questId="opened.id"
+        :questCompleted="opened.completed"
+        :questUnlocked="opened.unlocked"
+        v-if="opened.id !== ''"
+        @close-intro="closeIntro"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts
index 86b5160..7e2e587 100644
--- a/app/tailwind.config.ts
+++ b/app/tailwind.config.ts
@@ -24,6 +24,9 @@ export default {
           DEFAULT: '#FF0000',
         },
       },
+      backgroundImage: {
+        catelogbg: "url('src/img/catelogbg.svg')",
+      },
     },
   },
   plugins: [],

From ac89d521fc5b2bea9cddef4e870e7241cbc4aa2b Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:32:28 +0800
Subject: [PATCH 3/7] remove console log

---
 app/src/components/QuestIntro.vue | 1 -
 app/src/components/QuestMap.vue   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/app/src/components/QuestIntro.vue b/app/src/components/QuestIntro.vue
index 450050a..e1f301f 100644
--- a/app/src/components/QuestIntro.vue
+++ b/app/src/components/QuestIntro.vue
@@ -37,7 +37,6 @@ const closeModal = () => {
   router.push({ name: 'map' })
 }
 const handleQuests = (id: string) => {
-  console.log(id)
   if (questUnlocked) {
     router.push({ name: 'game', params: { questId: id } })
   } else {
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 993530e..1d28744 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -110,7 +110,6 @@ async function computeGraphData() {
 }
 function handleNodeClick(node: Node) {
   opened.value = node
-  console.log(opened.value)
 }
 function closeIntro(close: boolean) {
   if (close) {

From 334b34ef6551511b8e637327099c05328c6ce649 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:40:17 +0800
Subject: [PATCH 4/7] Green button for unlocked and completed quest

---
 app/src/components/QuestIntro.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/src/components/QuestIntro.vue b/app/src/components/QuestIntro.vue
index e1f301f..b23d741 100644
--- a/app/src/components/QuestIntro.vue
+++ b/app/src/components/QuestIntro.vue
@@ -44,12 +44,9 @@ const handleQuests = (id: string) => {
   }
 }
 const handleColour = () => {
-  if (questCompleted) {
+  if (questUnlocked) {
     questColor.value = '#00ff00'
     questTextColor.value = '#000000'
-  } else if (questUnlocked) {
-    questColor.value = '#8c8c92'
-    questTextColor.value = '#ffffff'
   } else {
     questColor.value = '#505050'
     questTextColor.value = '#a0a0a0'

From 4033eefa0d7d42935e576564fff07d30dce59d8d Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:41:55 +0800
Subject: [PATCH 5/7] remove redundant variable

---
 app/src/components/QuestIntro.vue | 6 +-----
 app/src/components/QuestMap.vue   | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/src/components/QuestIntro.vue b/app/src/components/QuestIntro.vue
index b23d741..efb5ab7 100644
--- a/app/src/components/QuestIntro.vue
+++ b/app/src/components/QuestIntro.vue
@@ -14,10 +14,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  questCompleted: {
-    type: Boolean,
-    required: true,
-  },
   questUnlocked: {
     type: Boolean,
     required: true,
@@ -27,7 +23,7 @@ const emit = defineEmits(['closeIntro'])
 const showIntro = ref(true) // Controls whether the modal is visible or not
 const router = useRouter()
 const toast = useToast()
-const { questTitle, questId, questCompleted, questUnlocked } = props
+const { questTitle, questId, questUnlocked } = props
 const questInstruction = ref('')
 const questColor = ref('')
 const questTextColor = ref('')
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 1d28744..bc85e52 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -218,7 +218,6 @@ const edgeStyle = computed(() => {
       <QuestIntro
         :questTitle="opened.title"
         :questId="opened.id"
-        :questCompleted="opened.completed"
         :questUnlocked="opened.unlocked"
         v-if="opened.id !== ''"
         @close-intro="closeIntro"

From c2c100e6e6d1c489b8ee5f0321350df0af95c0d8 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:55:24 +0800
Subject: [PATCH 6/7] simplify data usage

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

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index bc85e52..6efed0c 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -17,15 +17,16 @@ const marginY = 120
 
 const nodeWidth = 160
 const nodeHeight = 50
-const opened = ref<Node>({
-  id: '',
-  title: '',
-  x: 0,
-  y: 0,
-  index: 0,
-  completed: false,
-  unlocked: false,
-})
+// const opened = ref<Node>({
+//   id: '',
+//   title: '',
+//   x: 0,
+//   y: 0,
+//   index: 0,
+//   completed: false,
+//   unlocked: false,
+// })
+const opened = ref<Node | null>(null)
 type Node = {
   id: string
   title: string
@@ -113,15 +114,7 @@ function handleNodeClick(node: Node) {
 }
 function closeIntro(close: boolean) {
   if (close) {
-    opened.value = {
-      id: '',
-      title: '',
-      x: 0,
-      y: 0,
-      index: 0,
-      completed: false,
-      unlocked: false,
-    }
+    opened.value = null
   }
 }
 
@@ -219,7 +212,7 @@ const edgeStyle = computed(() => {
         :questTitle="opened.title"
         :questId="opened.id"
         :questUnlocked="opened.unlocked"
-        v-if="opened.id !== ''"
+        v-if="opened"
         @close-intro="closeIntro"
       />
     </div>

From acfb09c6ca464928a15c16099fb6e654d919b238 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Thu, 1 Aug 2024 19:58:13 +0800
Subject: [PATCH 7/7] delete redundant code

---
 app/src/components/QuestMap.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 6efed0c..95a003f 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -17,15 +17,6 @@ const marginY = 120
 
 const nodeWidth = 160
 const nodeHeight = 50
-// const opened = ref<Node>({
-//   id: '',
-//   title: '',
-//   x: 0,
-//   y: 0,
-//   index: 0,
-//   completed: false,
-//   unlocked: false,
-// })
 const opened = ref<Node | null>(null)
 type Node = {
   id: string