From ddaefca5fb8b3e23be73261af335824ea6e6748c Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Fri, 1 Mar 2024 17:34:02 +0800
Subject: [PATCH] fix using Ref<any> type

---
 app/src/components/AuthForm.vue          |  4 ++--
 app/src/components/DynamicBackground.vue | 21 ++++++++++++++++-----
 app/src/components/TerminalPart.vue      |  5 +++--
 app/src/components/VisualizationPart.vue |  8 ++++++--
 app/src/views/LeaderboardPage.vue        | 10 ++++++++--
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/app/src/components/AuthForm.vue b/app/src/components/AuthForm.vue
index 7805e1d..7d05cb6 100644
--- a/app/src/components/AuthForm.vue
+++ b/app/src/components/AuthForm.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, Ref, ref } from 'vue'
+import { computed, onMounted, 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<any> = ref({})
+const availableMethods = ref<{ [key: string]: boolean }>({})
 onMounted(async () => {
   const res = await api.get('/auth/available-methods')
   availableMethods.value = res.data
diff --git a/app/src/components/DynamicBackground.vue b/app/src/components/DynamicBackground.vue
index adbd261..11bc5f6 100644
--- a/app/src/components/DynamicBackground.vue
+++ b/app/src/components/DynamicBackground.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, Ref } from 'vue'
+import { ref, onMounted } from 'vue'
 
 const cw = ref(0)
 const ch = ref(0)
-const fallingCharArr: any = ref([])
+const fallingCharArr = ref<
+  { value: string; x: number; y: number; speed: number }[]
+>([])
 const fontSize = ref(16)
 const maxColums = ref(0)
 const charArr = ['0', '1', '', '', '']
-const ctx: Ref<any> = ref(null)
+const ctx = ref<CanvasRenderingContext2D | null>(null)
 
 const randomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min) + min)
@@ -17,10 +19,16 @@ const randomFloat = (min: number, max: number) => {
   return Math.random() * (max - min) + min
 }
 
-const draw = (point: any) => {
+const draw = (point: {
+  value: string
+  x: number
+  y: number
+  speed: number
+}) => {
   point.value = charArr[randomInt(0, charArr.length)].toUpperCase()
   if (point.y < 0) point.speed = randomFloat(10, 20)
 
+  if (ctx.value === null) return
   ctx.value.fillStyle = '#0F0'
   ctx.value.font = `${fontSize.value}px san-serif`
   ctx.value.fillText(point.value, point.x, point.y)
@@ -33,6 +41,7 @@ const draw = (point: any) => {
 }
 
 const update = () => {
+  if (ctx.value === null) return
   ctx.value.fillStyle = 'rgba(0,0,0,0.05)'
   ctx.value.fillRect(0, 0, cw.value, ch.value)
 
@@ -48,7 +57,7 @@ onMounted(() => {
   ch.value = document.documentElement.clientHeight
   maxColums.value = cw.value / fontSize.value
 
-  const canvas: any = document.querySelector('canvas')
+  const canvas = document.querySelector('canvas') as HTMLCanvasElement
   ctx.value = canvas.getContext('2d')
 
   canvas.width = cw.value
@@ -58,6 +67,8 @@ onMounted(() => {
     fallingCharArr.value.push({
       x: i * fontSize.value,
       y: randomFloat(-500, 0),
+      value: '',
+      speed: 0,
     })
   }
 
diff --git a/app/src/components/TerminalPart.vue b/app/src/components/TerminalPart.vue
index 64cca2c..0780a69 100644
--- a/app/src/components/TerminalPart.vue
+++ b/app/src/components/TerminalPart.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { Ref, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useTerminal } from '../store/session'
 
-const terminal: Ref<any> = ref(null)
+const terminal = ref<HTMLElement | null>(null)
 
 onMounted(() => {
   const term = useTerminal()
+  if (!terminal.value) return
   term.mount(terminal.value)
   window.addEventListener('resize', () => term.resizeScreen())
 })
diff --git a/app/src/components/VisualizationPart.vue b/app/src/components/VisualizationPart.vue
index 32d2c9f..bbbafe4 100644
--- a/app/src/components/VisualizationPart.vue
+++ b/app/src/components/VisualizationPart.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { Ref, ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import TreeChart from './TreeChart.vue'
 
-const treeRef: Ref<any> = ref(null)
+const treeRef = ref<HTMLElement | null>(null)
 let pos = { top: 0, left: 0, x: 0, y: 0 }
 
 function mouseMoveHandler(e: any) {
   const dx = e.clientX - pos.x
   const dy = e.clientY - pos.y
 
+  if (treeRef.value === null) return
   treeRef.value.scrollTop = pos.top - dy
   treeRef.value.scrollLeft = pos.left - dx
 }
 
 function mouseUpHandler() {
+  if (treeRef.value === null) return
   treeRef.value.style.cursor = 'grab'
   treeRef.value.style.removeProperty('user-select')
 
@@ -22,6 +24,7 @@ function mouseUpHandler() {
 }
 
 function mouseDownHandler(e: any) {
+  if (treeRef.value === null) return
   treeRef.value.style.cursor = 'grabbing'
   treeRef.value.style.userSelect = 'none'
 
@@ -37,6 +40,7 @@ function mouseDownHandler(e: any) {
 }
 
 onMounted(() => {
+  if (treeRef.value === null) return
   treeRef.value.style.cursor = 'grab'
   treeRef.value.addEventListener('mousedown', mouseDownHandler)
 })
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 0cc2151..b3bb207 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
-import { Ref, ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
 import GameHeaderPart from '../components/GameHeaderPart.vue'
 import api from '../utils/api'
 
-const leaderboard: Ref<any> = ref([])
+const leaderboard = ref<
+  {
+    username: string
+    score: number
+    completedQuests: string[]
+  }[]
+>([])
 
 const toast = useToast()
 async function getLeaderboard() {