wip: design leaderboard

app/src/components/GameHeaderPart.vue

@@ -69,10 +69,17 @@ onMounted(async () => {
             class="text-text-tertiary h-full w-full"
           />
         </button> -->
-        <p
+        <button
           id="HeaderText"
           class="text-text-primary inline-block font-bold whitespace-nowrap"
           style="font-size: 2vh"
+        >
+          Linux Odyssey
+        </button>
+        <p
+          id="HeaderText"
+          class="text-text inline-block font-bold whitespace-nowrap"
+          style="font-size: 2vh"
         >
           {{ title }}
         </p>

app/src/views/LeaderboardPage.vue

@@ -1,6 +1,8 @@
 <script setup>
 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([])
@@ -22,11 +24,57 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
-    <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 class="w-screen h-screen bg-bg">
+    <DynamicBackground class="w-full h-full" />
+    <div
+      class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
+    >
+      <div class="absolute top-0 h-[6vh] w-full">
+        <GameHeaderPart title="排行榜" />
+      </div>
+      <div class="w-fit h-full">
+        <div
+          class="bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
+        >
+          <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
+          <div class="max-h-300 overflow-y-auto">
+            <table class="w-full text-sm text-left text-text">
+              <thead
+                class="text-xs text-text-secondary uppercase bg-bg-secondary"
+              >
+                <tr>
+                  <th scope="col" class="px-6 py-3">使用者名稱</th>
+                  <th scope="col" class="px-6 py-3">分數</th>
+                  <th scope="col" class="px-6 py-3">完成關卡</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="user in leaderboard"
+                  :key="user.username"
+                  class="border-b bg-bg"
+                >
+                  <th
+                    scope="row"
+                    class="px-6 py-4 font-medium text-text-primary whitespace-nowrap"
+                  >
+                    {{ user.username }}
+                  </th>
+                  <td class="px-6 py-4">{{ user.score }}</td>
+                  <td class="px-6 py-4 text-text-secondary">
+                    <span
+                      class="mr-2"
+                      v-for="quest in user.completedQuests"
+                      :key="quest"
+                    >
+                      {{ quest }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
     </div>
   </div>

server/src/api/controllers/leaderboardController.js

@@ -8,5 +8,10 @@ export default asyncHandler(async (req, res) => {
     completedQuests: user.completedQuests,
     score: user.score * 1000,
   }))
-  res.json(response)
+  // duplicate the response 100 times
+  const fakeResponse = []
+  for (let i = 0; i < 100; i++) {
+    fakeResponse.push(...response)
+  }
+  res.json(fakeResponse)
 })