From a90b0a3c83b487f78695bef79b38da3a6674e3f3 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:49:20 +0800
Subject: [PATCH] feat: load leadboard data in frontend

---
 app/src/views/LeaderboardPage.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 55daefd..779b066 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -1,6 +1,33 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useToast } from 'vue-toastification'
+import api from '../utils/api'
+
+const leaderboard = ref([])
+
+const toast = useToast()
+async function getLeaderboard() {
+  try {
+    const res = await api.get('/leaderboard')
+    leaderboard.value = res.data
+  } catch (err) {
+    console.error(err)
+    toast.error('讀取排行榜失敗')
+  }
+}
+
+onMounted(async () => {
+  await getLeaderboard()
+})
+</script>
+
 <template>
   <div>
-    <h1>Leaderboard</h1>
-    <p>Coming soon...</p>
+    <h1 class="text-text-primary">Leaderboard</h1>
+    <div>
+      <div class="text-text" v-for="user in leaderboard" :key="user.username">
+        {{ user.username }}: {{ user.score }} {{ user.completedQuests }}
+      </div>
+    </div>
   </div>
 </template>