Created Leaderboard Page

Author: EnderHubris

src/App.js

@@ -6,6 +6,7 @@ import { Profile } from './pages/profile.js'
 import { Register } from './pages/register.js'
 import { Challenges } from './pages/challenges.js'
 import { AdminPanel } from './pages/admin_panel.js'
+import { Leaderboard } from './pages/leaderboard.js'
 import { RatingPage } from './pages/rate_challenge.js'
 import { ChallengeDetail } from './pages/challenge_template.js'
 
@@ -17,11 +18,12 @@ function App() {
       <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/admin" element={<Admin />} />
-          <Route path="/admin/panel" element={<AdminPanel />} />
           <Route path="/login" element={<Login />} />
           <Route path="/profile" element={<Profile />} />
           <Route path="/register" element={<Register />} />
           <Route path="/compete" element={<Challenges />} />
+          <Route path="/admin/panel" element={<AdminPanel />} />
+          <Route path="/leaderboard" element={<Leaderboard />} />
           <Route path="/challenge" element={<ChallengeDetail />} />
           <Route path="/rate-challenge" element={<RatingPage />} />
       </Routes>

src/backend/db.js

@@ -320,6 +320,74 @@ async function GetChallengeInfo(data) {
     }
 }
 
+// if a player is not in a team calculate collected points and display their username
+// otherwise calculate points collected by the team and display the team name
+async function GetLeaderboardData() {
+    // { name: STRING, points: NUMBER }
+    // sort by point desending and if points match
+    // sort based on time of recent completion (time attribute (time | timestamp) on last completion)
+    let leaderboardData = []
+
+    const soloUsers = await UserCollection.find({ team_id: "None" }, { username: 1, completions: 1 })
+    const teams = await TeamCollection.find({}, { name: 1, completions: 1 })
+
+    let readableSoloUsers = [];
+    let readableTeams = [];
+
+    // for each user we need to calculate accumulated points
+    for (let userDoc of soloUsers) {
+        const user = userDoc.toObject(); // Make it modifiable
+    
+        user.points = 0;
+        user.name = user.username;
+    
+        for (const completion of user.completions) {
+            const challengeProfile = await ChallengeCollection.findOne({ _id: completion.id });
+            if (challengeProfile) {
+                user.points += challengeProfile.points;
+            }
+        }
+    
+        user.recent = user.completions.at(-1)?.time ?? 0;
+        delete user.completions;
+        delete user.username;
+        delete user._id;
+    
+        readableSoloUsers.push(user); // Save modified copy
+    }
+
+    // for each tean we need to calculate accumulated points
+    for (let teamDoc of teams) {
+        const team = teamDoc.toObject(); // Convert Mongoose document to plain object
+    
+        team.points = 0;
+        
+        for (const completion of team.completions) {
+            team.points += completion.points;
+        }
+        
+        team.recent = team.completions.at(-1)?.timestamp ?? 0;
+        delete team.completions;
+        delete team._id;
+    
+        readableTeams.push(team); // Store modified team object
+    }
+
+    // merge both lists (readableSoloUsers & readableTeams) in sorted fashion
+    const merged = [...readableSoloUsers, ...readableTeams];
+    merged.sort((a, b) => {
+        if (b.points !== a.points) {
+            // Sort by points descending
+            return b.points - a.points;
+        } else {
+            // If points are equal, sort by recent (epoch) ascending
+            return a.recent - b.recent;
+        }
+    });
+
+    return merged;
+}
+
 async function DoesExist(username, email) {
     username = SanitizeString(username);
     email = SanitizeString(email);
@@ -1719,4 +1787,4 @@ export { LoginUser, LoginAdmin, RegisterUser, GetUserProfile, UpdateUserProfile,
     GetChallengeInfo, GetAllUsers, GetAllTeams, RemoveTeam,
     RemoveUser, UpdateChallenge, AdminGetChallenges,
     CreateChallenge, DeleteChallenge, RegisterAdmin, RemoveAdmin,
-    GetAdmins, ValidateAdmin };
+    GetAdmins, ValidateAdmin, GetLeaderboardData };

src/backend/server.js

@@ -6,7 +6,7 @@ import GetChallenges, { LoginUser, LoginAdmin, RegisterUser,
     GetAllUsers, GetAllTeams, RemoveTeam, RemoveUser,
     UpdateChallenge, AdminGetChallenges, CreateChallenge,
     DeleteChallenge, RegisterAdmin, RemoveAdmin, GetAdmins,
-    ValidateAdmin } from './db.js';
+    ValidateAdmin, GetLeaderboardData } from './db.js';
 import rateLimit from 'express-rate-limit';
 import cookieParser from 'cookie-parser';
 import sanitize from 'sanitize-filename';
@@ -484,6 +484,13 @@ app.post('/data/get-completions', async (req, res) => {
     }
 });
 
+// leaderboard is publically accessible
+app.get('/data/leaderboard', async (req, res) => {
+    const data = await GetLeaderboardData();
+    console.log(data);
+    return res.json(data)
+});
+
 app.post('/rate-challenge', async (req, res) => {
     const token = req.cookies.khi_token;
     const data = req.body;

src/components/navbar.js

@@ -76,6 +76,9 @@ function Navbar() {
                       <li className="nav-item">
                           <Link className="nav-link" to="/compete">Compete</Link>
                       </li>
+                      <li className="nav-item">
+                          <Link className="nav-link" to="/leaderboard">Leaderboard</Link>
+                      </li>
 
                       {authenticated ? (
                         <>

src/pages/leaderboard.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import Navbar, { GetBackendHost } from '../components/navbar.js';
+import '../App.css';
+
+export function Leaderboard() {
+  const [leaderboard, setLeaderboard] = useState([]);
+
+  async function FetchLeaderboard() {
+    try {
+      const response = await fetch(`http://${GetBackendHost()}/data/leaderboard`, {
+        method: "GET",
+        credentials: 'include'  // ensures cookies are sent
+      });
+  
+      const data = await response.json();
+      setLeaderboard(data);
+    } catch (error) {
+      console.error("Error sending request:", error);
+    }
+  }
+
+  // runs periodically
+  useEffect(() => {
+    FetchLeaderboard()
+  }, []); // [] means execute this once on page-load
+
+  return (
+    <div className="App">
+      <Navbar />
+      <header
+        className="App-header"
+        style={{
+          display: 'block',
+          height: 'auto',
+          paddingTop: '15px',
+        }}>
+        <h1>KHI Leaderboard</h1>
+
+        <div className="container mt-4 d-flex justify-content-center">
+          <div className="card shadow-sm" style={{ minWidth: '200px', maxWidth: '500px', width: '100%' }}>
+            <div className="card-header bg-primary text-white text-center fw-bold">
+              Leaderboard
+            </div>
+            <ul className="list-group list-group-flush">
+              {leaderboard.map((item, index) => {
+                let badgeColor = "secondary";
+                if (index === 0) badgeColor = "warning";       // Gold
+                else if (index === 1) badgeColor = "secondary"; // Silver
+                else if (index === 2) badgeColor = "danger";    // Bronze
+
+                return (
+                  <li
+                    key={index}
+                    className="list-group-item d-flex justify-content-between align-items-center px-4 py-2"
+                    style={{ fontSize: "0.95rem" }}
+                  >
+                    <span>
+                      <span className={`badge bg-${badgeColor} me-2`}>
+                        {index + 1}
+                      </span>
+                      {item.name}
+                    </span>
+                    <span className="text-muted fw-bold">{item.points} pts</span>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+
+      </header>
+    </div>
+  );
+}