From 63a57aa2cfec2e843cd5a4994d87097340c5ada4 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Mon, 26 Feb 2024 15:40:09 +0800
Subject: [PATCH] update components

---
 app/src/components/AuthForm.vue          |  8 ++---
 app/src/components/CompleteModal.vue     |  2 +-
 app/src/components/ControlPalette.vue    | 44 ++++++++++++------------
 app/src/components/DynamicBackground.vue | 16 ++++-----
 app/src/components/FileNode.vue          |  2 +-
 app/src/components/GameHeaderPart.vue    |  2 +-
 app/src/components/HintPart.vue          |  2 +-
 app/src/components/MarkdownText.vue      |  2 +-
 app/src/components/QuestMap.vue          | 18 +++++-----
 app/src/components/QuestPart.vue         |  4 +--
 app/src/components/TerminalPart.vue      | 26 +++++++-------
 app/src/components/TreeChart.vue         |  2 +-
 app/src/components/VisualizationPart.vue | 10 +++---
 app/src/store/session.ts                 |  2 +-
 14 files changed, 70 insertions(+), 70 deletions(-)

diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index e4f4645..d184d4c 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -1,5 +1,5 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { computed, onMounted, Ref, ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import api from '../utils/api'
@@ -27,7 +27,7 @@ const password = ref('')
 const errorMessage = ref('')
 const toast = useToast()
 
-const availableMethods = ref({})
+const availableMethods: Ref<any> = ref({})
 onMounted(async () => {
   const res = await api.get('/auth/available-methods')
   availableMethods.value = res.data
@@ -44,7 +44,7 @@ const success = () => {
   router.push({ name: 'map' })
 }
 
-const error = (err) => {
+const error = (err: string) => {
   errorMessage.value = err
 }
 
diff --git a/app/src/components/CompleteModal.vue b/app/src/components/CompleteModal.vue
index 057a474..b568fb8 100644
--- a/app/src/components/CompleteModal.vue
+++ b/app/src/components/CompleteModal.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { ref } from 'vue'
diff --git a/app/src/components/ControlPalette.vue b/app/src/components/ControlPalette.vue
index 6e6655a..af6c201 100644
--- a/app/src/components/ControlPalette.vue
+++ b/app/src/components/ControlPalette.vue
@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { createSession } from '../store/session'
+import { surveyUrl } from '../config'
+
+const router = useRouter()
+const reset = async () => {
+  console.log('resetting...')
+  await createSession()
+}
+const continuePlay = async () => {
+  try {
+    router.push({ name: 'map' })
+  } catch (err) {
+    // useToast().error('Failed to load map')
+    useToast().error('無法讀取地圖')
+    console.error(err)
+  }
+}
+</script>
+
 <template>
   <section class="h-[10%] p-3 grid grid-cols-4 gap-4 place-content-between">
     <button id="survey" class="bg-bg-secondary rounded-lg p-2">
@@ -48,25 +70,3 @@
     </button>
   </section>
 </template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { createSession } from '../store/session'
-import { surveyUrl } from '../config'
-
-const router = useRouter()
-const reset = async () => {
-  console.log('resetting...')
-  await createSession()
-}
-const continuePlay = async () => {
-  try {
-    router.push({ name: 'map' })
-  } catch (err) {
-    // useToast().error('Failed to load map')
-    useToast().error('無法讀取地圖')
-    console.error(err)
-  }
-}
-</script>
diff --git a/app/src/components/DynamicBackground.vue b/app/src/components/DynamicBackground.vue
index ef163c9..adbd261 100644
--- a/app/src/components/DynamicBackground.vue
+++ b/app/src/components/DynamicBackground.vue
@@ -1,23 +1,23 @@
-<script setup>
-import { ref, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted, Ref } from 'vue'
 
 const cw = ref(0)
 const ch = ref(0)
-const fallingCharArr = ref([])
+const fallingCharArr: any = ref([])
 const fontSize = ref(16)
 const maxColums = ref(0)
 const charArr = ['0', '1', '', '', '']
-const ctx = ref(null)
+const ctx: Ref<any> = ref(null)
 
-const randomInt = (min, max) => {
+const randomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min) + min)
 }
 
-const randomFloat = (min, max) => {
+const randomFloat = (min: number, max: number) => {
   return Math.random() * (max - min) + min
 }
 
-const draw = (point) => {
+const draw = (point: any) => {
   point.value = charArr[randomInt(0, charArr.length)].toUpperCase()
   if (point.y < 0) point.speed = randomFloat(10, 20)
 
@@ -48,7 +48,7 @@ onMounted(() => {
   ch.value = document.documentElement.clientHeight
   maxColums.value = cw.value / fontSize.value
 
-  const canvas = document.querySelector('canvas')
+  const canvas: any = document.querySelector('canvas')
   ctx.value = canvas.getContext('2d')
 
   canvas.width = cw.value
diff --git a/app/src/components/FileNode.vue b/app/src/components/FileNode.vue
index b2bf65b..4a784f2 100644
--- a/app/src/components/FileNode.vue
+++ b/app/src/components/FileNode.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
   node: {
     type: Object,
diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index 0072a4c..0a774bf 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/app/src/components/GameHeaderPart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { defineProps, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index beb0b0f..ed4ff05 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 import sessionStore from '../store/session'
 import MarkdownText from './MarkdownText.vue'
diff --git a/app/src/components/MarkdownText.vue b/app/src/components/MarkdownText.vue
index 686995f..5db8b94 100644
--- a/app/src/components/MarkdownText.vue
+++ b/app/src/components/MarkdownText.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed, defineProps } from 'vue'
 import markdown2HTML from '../utils/markdown'
 
diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index 88569f6..ba2c66b 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -1,5 +1,5 @@
 <!-- eslint-disable no-console -->
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
@@ -50,7 +50,7 @@ async function getProgress() {
   }
 }
 
-const genOption = (nodes, edges) => ({
+const genOption = (nodes: any, edges: any) => ({
   renderer: 'svg',
   tooltip: {},
   animationDurationUpdate: 1500,
@@ -94,7 +94,7 @@ const genOption = (nodes, edges) => ({
         curveness: 0.08,
       },
       itemStyle: {
-        color: (params) => {
+        color: (params: any) => {
           const {
             data: { completed, unlocked },
           } = params
@@ -111,7 +111,7 @@ const genOption = (nodes, edges) => ({
   ],
 })
 
-function getOption(quests, progress) {
+function getOption(quests: any, progress: any) {
   const dag = new DAG(quests)
 
   const nodes = dag.getNodes().map((node) => ({
@@ -120,9 +120,9 @@ function getOption(quests, progress) {
     y: marginX * node.index - (marginX * dag.getLayer(node._id)) / 2,
     x: marginY * node.layer * 2,
     completed: progress[node._id]?.completed || false,
-    unlocked: node.requirements.every((req) => progress[req]?.completed),
+    unlocked: node.requirements.every((req: any) => progress[req]?.completed),
   }))
-  const lineAppearence = (node) => {
+  const lineAppearence = (node: any) => {
     try {
       const { unlocked } = node
       return {
@@ -134,7 +134,7 @@ function getOption(quests, progress) {
       throw err
     }
   }
-  const edges = dag.getEdgesArray().map((edge) => ({
+  const edges = dag.getEdgesArray().map((edge: any) => ({
     source: edge[0],
     target: edge[1],
     lineStyle: lineAppearence(nodes.find((node) => node.id === edge[1])),
@@ -145,10 +145,10 @@ function getOption(quests, progress) {
 const router = useRouter()
 const toast = useToast()
 
-function initChart(option) {
+function initChart(option: any) {
   chartInstance = init(chartContainer.value)
   chartInstance.setOption(option)
-  chartInstance.on('click', (params) => {
+  chartInstance.on('click', (params: any) => {
     const {
       data: { id, unlocked },
     } = params
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index eeae92c..664e5f3 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -1,10 +1,10 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownText from './MarkdownText.vue'
 import sessionStore from '../store/session'
 
 const tasks = computed(() => {
-  return sessionStore.session.tasks.map((task) => {
+  return sessionStore.session.tasks.map((task: any) => {
     const prefix = task.completed ? '✓' : '➤'
     const color = task.completed ? 'text-text-primary' : 'text-text'
     return {
diff --git a/app/src/components/TerminalPart.vue b/app/src/components/TerminalPart.vue
index 3abc4d2..35b925c 100644
--- a/app/src/components/TerminalPart.vue
+++ b/app/src/components/TerminalPart.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { Ref, onMounted, ref } from 'vue'
+import { useTerminal } from '../store/session'
+
+const terminal: Ref<any> = ref(null)
+
+onMounted(() => {
+  const term = useTerminal()
+  term.mount(terminal.value)
+  window.addEventListener('resize', () => term.resizeScreen())
+})
+</script>
+
 <template>
   <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
   <button id="Terminal" class="text-text h-[5%]">
@@ -10,16 +23,3 @@
     class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
   ></div>
 </template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useTerminal } from '../store/session'
-
-const terminal = ref(null)
-
-onMounted(() => {
-  const term = useTerminal()
-  term.mount(terminal.value)
-  window.addEventListener('resize', () => term.resizeScreen())
-})
-</script>
diff --git a/app/src/components/TreeChart.vue b/app/src/components/TreeChart.vue
index cb096e7..aada966 100644
--- a/app/src/components/TreeChart.vue
+++ b/app/src/components/TreeChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import FileNode from './FileNode.vue'
 import sessionStore from '../store/session'
 </script>
diff --git a/app/src/components/VisualizationPart.vue b/app/src/components/VisualizationPart.vue
index 5c0468d..32d2c9f 100644
--- a/app/src/components/VisualizationPart.vue
+++ b/app/src/components/VisualizationPart.vue
@@ -1,11 +1,11 @@
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+<script setup lang="ts">
+import { Ref, ref, onMounted, onUnmounted } from 'vue'
 import TreeChart from './TreeChart.vue'
 
-const treeRef = ref(null)
+const treeRef: Ref<any> = ref(null)
 let pos = { top: 0, left: 0, x: 0, y: 0 }
 
-function mouseMoveHandler(e) {
+function mouseMoveHandler(e: any) {
   const dx = e.clientX - pos.x
   const dy = e.clientY - pos.y
 
@@ -21,7 +21,7 @@ function mouseUpHandler() {
   document.removeEventListener('mouseup', mouseUpHandler)
 }
 
-function mouseDownHandler(e) {
+function mouseDownHandler(e: any) {
   treeRef.value.style.cursor = 'grabbing'
   treeRef.value.style.userSelect = 'none'
 
diff --git a/app/src/store/session.ts b/app/src/store/session.ts
index 1a17c05..a0a01b7 100644
--- a/app/src/store/session.ts
+++ b/app/src/store/session.ts
@@ -24,7 +24,7 @@ function newSession() {
   }
 }
 
-const store = reactive({
+const store: any = reactive({
   session: newSession(),
   questId: '',
   quest: null,