From 0d8ab8413a6044a3be14b3b2041bff05d24de5fb Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:04:39 +0800
Subject: [PATCH 01/10] feat: add leaderboard declarations

---
 app/src/router.js                                   | 6 ++++++
 app/src/views/LeaderboardPage.vue                   | 6 ++++++
 server/src/api/controllers/leaderboardController.js | 5 +++++
 server/src/api/routes/index.js                      | 3 +++
 4 files changed, 20 insertions(+)
 create mode 100644 app/src/views/LeaderboardPage.vue
 create mode 100644 server/src/api/controllers/leaderboardController.js

diff --git a/app/src/router.js b/app/src/router.js
index 76f8280..1d3b420 100644
--- a/app/src/router.js
+++ b/app/src/router.js
@@ -4,6 +4,7 @@ import LoginPage from './views/LoginPage.vue'
 import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import QuestMapPage from './views/QuestMapPage.vue'
+import LeaderboardPage from './views/LeaderboardPage.vue'
 import { isLoggedIn } from './utils/auth'
 
 const routes = [
@@ -45,6 +46,11 @@ const routes = [
     component: QuestMapPage,
     meta: { requiresAuth: true },
   },
+  {
+    path: '/leaderboard',
+    name: 'leaderboard',
+    component: LeaderboardPage,
+  },
 ]
 
 const router = createRouter({
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
new file mode 100644
index 0000000..55daefd
--- /dev/null
+++ b/app/src/views/LeaderboardPage.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Leaderboard</h1>
+    <p>Coming soon...</p>
+  </div>
+</template>
diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
new file mode 100644
index 0000000..1d351e3
--- /dev/null
+++ b/server/src/api/controllers/leaderboardController.js
@@ -0,0 +1,5 @@
+import { asyncHandler } from '../../middleware/error.js'
+
+export default asyncHandler(async (req, res) => {
+  res.json({ message: 'leaderboard' })
+})
diff --git a/server/src/api/routes/index.js b/server/src/api/routes/index.js
index 427cf91..2cfd5ec 100644
--- a/server/src/api/routes/index.js
+++ b/server/src/api/routes/index.js
@@ -7,6 +7,7 @@ import authRouter from './authRouter.js'
 import authRequired from '../../middleware/authRequired.js'
 import userRouter from './userRouter.js'
 import config from '../../config.js'
+import leaderboardController from '../controllers/leaderboardController.js'
 
 const router = Router()
 
@@ -48,4 +49,6 @@ router.get('/bug-report', (req, res) => {
   res.redirect(config.bugReportUrl)
 })
 
+router.get('/leaderboard', leaderboardController)
+
 export default router

From 196187d5c967d3c68b8c957a801db7a6b3ee0654 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:42:31 +0800
Subject: [PATCH 02/10] feat: add leaderboard api

---
 .../api/controllers/leaderboardController.js  |  9 +++-
 server/src/models/userManager.js              | 43 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index 1d351e3..e3cb7ee 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -1,5 +1,12 @@
 import { asyncHandler } from '../../middleware/error.js'
+import { leaderboard } from '../../models/userManager.js'
 
 export default asyncHandler(async (req, res) => {
-  res.json({ message: 'leaderboard' })
+  const users = await leaderboard()
+  const response = users.map((user) => ({
+    username: user.user.username,
+    completedQuests: user.completedQuests,
+    numberOfCompletedQuests: user.numberOfCompletedQuests,
+  }))
+  res.json(response)
 })
diff --git a/server/src/models/userManager.js b/server/src/models/userManager.js
index 46943dd..8168eb5 100644
--- a/server/src/models/userManager.js
+++ b/server/src/models/userManager.js
@@ -22,3 +22,46 @@ export async function createUser(username, email, { password, socialLogin }) {
 
   return user
 }
+
+export function leaderboard() {
+  return UserProfile.aggregate([
+    {
+      $project: {
+        user: true, // Include the user field in the projection
+        completedQuests: {
+          $map: {
+            input: {
+              $filter: {
+                input: { $objectToArray: '$progress' }, // Convert the progress map to an array
+                as: 'prog',
+                cond: { $eq: ['$$prog.v.completed', true] }, // Filter for completed quests
+              },
+            },
+            as: 'completedProg',
+            in: '$$completedProg.k', // Extract the quest IDs
+          },
+        },
+      },
+    },
+    {
+      $addFields: {
+        numberOfCompletedQuests: { $size: '$completedQuests' }, // Calculate the size of the completedQuests array
+      },
+    },
+    {
+      $match: {
+        numberOfCompletedQuests: { $gt: 0 }, // Filter out users who haven't completed any quests
+      },
+    },
+    { $sort: { numberOfCompletedQuests: -1 } },
+    {
+      $lookup: {
+        from: 'users',
+        localField: 'user',
+        foreignField: '_id',
+        as: 'user',
+      },
+    },
+    { $unwind: '$user' },
+  ])
+}

From 1a5655d7ced5f097ca4f6596b78c1a1b730f5fdf Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 15:49:06 +0800
Subject: [PATCH 03/10] feat: rename numberOfCompletedQuests to score

---
 server/src/api/controllers/leaderboardController.js | 2 +-
 server/src/models/userManager.js                    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index e3cb7ee..4f497a1 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -6,7 +6,7 @@ export default asyncHandler(async (req, res) => {
   const response = users.map((user) => ({
     username: user.user.username,
     completedQuests: user.completedQuests,
-    numberOfCompletedQuests: user.numberOfCompletedQuests,
+    score: user.score * 1000,
   }))
   res.json(response)
 })
diff --git a/server/src/models/userManager.js b/server/src/models/userManager.js
index 8168eb5..d2f5faf 100644
--- a/server/src/models/userManager.js
+++ b/server/src/models/userManager.js
@@ -45,15 +45,15 @@ export function leaderboard() {
     },
     {
       $addFields: {
-        numberOfCompletedQuests: { $size: '$completedQuests' }, // Calculate the size of the completedQuests array
+        score: { $size: '$completedQuests' }, // Calculate the size of the completedQuests array
       },
     },
     {
       $match: {
-        numberOfCompletedQuests: { $gt: 0 }, // Filter out users who haven't completed any quests
+        score: { $gt: 0 }, // Filter out users who haven't completed any quests
       },
     },
-    { $sort: { numberOfCompletedQuests: -1 } },
+    { $sort: { score: -1 } },
     {
       $lookup: {
         from: 'users',

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 04/10] 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>

From 790e09b3153d523389d8760364761d0caa96b8e6 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 16:28:47 +0800
Subject: [PATCH 05/10] wip: design leaderboard

---
 app/src/components/GameHeaderPart.vue         |  9 ++-
 app/src/views/LeaderboardPage.vue             | 58 +++++++++++++++++--
 .../api/controllers/leaderboardController.js  |  7 ++-
 3 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/app/src/components/GameHeaderPart.vue b/app/src/components/GameHeaderPart.vue
index 3cbf961..3c93ed9 100644
--- a/app/src/components/GameHeaderPart.vue
+++ b/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>
diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 779b066..86ff408 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/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>
diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index 4f497a1..bf56a79 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/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)
 })

From dd3e6b4aac37029c4331d275d0dccd94a2881e45 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Thu, 23 Nov 2023 16:50:07 +0800
Subject: [PATCH 06/10] scroll leader board

---
 app/src/views/LeaderboardPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 86ff408..8373bae 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -32,12 +32,12 @@ onMounted(async () => {
       <div class="absolute top-0 h-[6vh] w-full">
         <GameHeaderPart title="排行榜" />
       </div>
-      <div class="w-fit h-full">
+      <div class="w-fit h-[94vh]">
         <div
-          class="bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
+          class="h-full 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">
+          <div class="max-h-300 overflow-auto">
             <table class="w-full text-sm text-left text-text">
               <thead
                 class="text-xs text-text-secondary uppercase bg-bg-secondary"

From 88d19e7f8760aae7e3e8c3ebfd8fac447e44896f Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 22:22:48 +0800
Subject: [PATCH 07/10] fix: navbar overlap leaderboard

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

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index 8373bae..cf50a95 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -29,10 +29,10 @@ onMounted(async () => {
     <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">
+      <div class="h-[6vh] w-full">
         <GameHeaderPart title="排行榜" />
       </div>
-      <div class="w-fit h-[94vh]">
+      <div class="w-fit h-[94vh] m-3">
         <div
           class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
         >

From 52fa8d6f3a12a2f99fb95d619f1da44b99f3a8fa Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 22:28:23 +0800
Subject: [PATCH 08/10] fix: put leadeboard align top

---
 app/src/views/LeaderboardPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/views/LeaderboardPage.vue b/app/src/views/LeaderboardPage.vue
index cf50a95..dcba85e 100644
--- a/app/src/views/LeaderboardPage.vue
+++ b/app/src/views/LeaderboardPage.vue
@@ -34,7 +34,7 @@ onMounted(async () => {
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div
-          class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center justify-center rounded-3xl p-10"
+          class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center rounded-3xl p-10"
         >
           <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
           <div class="max-h-300 overflow-auto">

From 9e7065fbd74bc036213a12105dd105d381209584 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Thu, 23 Nov 2023 22:28:36 +0800
Subject: [PATCH 09/10] fix: remove fake leaderboard responses

---
 server/src/api/controllers/leaderboardController.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/server/src/api/controllers/leaderboardController.js b/server/src/api/controllers/leaderboardController.js
index bf56a79..4f497a1 100644
--- a/server/src/api/controllers/leaderboardController.js
+++ b/server/src/api/controllers/leaderboardController.js
@@ -8,10 +8,5 @@ export default asyncHandler(async (req, res) => {
     completedQuests: user.completedQuests,
     score: user.score * 1000,
   }))
-  // duplicate the response 100 times
-  const fakeResponse = []
-  for (let i = 0; i < 100; i++) {
-    fakeResponse.push(...response)
-  }
-  res.json(fakeResponse)
+  res.json(response)
 })

From 96c0785a7e1db0638ca8351690a382d7ad4a091b Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Thu, 23 Nov 2023 23:26:11 +0800
Subject: [PATCH 10/10] change e2e test

---
 tests/cypress/e2e/helloworld.cy.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/cypress/e2e/helloworld.cy.js b/tests/cypress/e2e/helloworld.cy.js
index aaba53f..dd35431 100644
--- a/tests/cypress/e2e/helloworld.cy.js
+++ b/tests/cypress/e2e/helloworld.cy.js
@@ -78,9 +78,7 @@ describe('example helloworld app', () => {
       cy.PrepareForGame()
     })
     it('Check Header', () => {
-      cy.get('#HeaderText')
-        .should('contain', 'Hello, Linux World!')
-        .and('be.visible')
+      cy.get('#HeaderText').should('contain', 'Linux Odyssey').and('be.visible')
       cy.findByRole('link', { name: 'Bug Report' }).should('be.visible')
       cy.findByRole('button', { name: 'Sign Out' }).should('be.visible')
     })