feat : leaderboard

src/App.tsx

@@ -41,6 +41,7 @@ import AboutVijnana from "./pages/admin/admin_pages/about/AboutVijnana";
 import Participants from "./pages/admin/admin_pages/view_events/participants";
 import { RegisterEvent } from "./pages/register/events/RegisterEvents";
 import { CryptaQuest } from "./pages/CryptaQuest/CryptaQuest";
+import { Leaderboard } from "./pages/CryptaQuest/CryptaLeaderboard";
 
 function getTheme() {
   var theme = localStorage.getItem("theme");
@@ -257,6 +258,7 @@ function App() {
           </Route>
         </Route>
         <Route path="/cq" element={<CryptaQuest />}></Route>
+        <Route path="/cq/leaderboard" element={<Leaderboard />}></Route>
         <Route path="*" element={<Error404 />}></Route>
       </Routes>
     </div>

src/apis/cryptaquest.tsx

@@ -5,6 +5,17 @@ const publicRouter = axios.create({
     baseURL: api_url,
   });
 
+export const leaderboard = async () : Promise<LeaderboardResponse[] | null> => {
+    try{
+        var res = await publicRouter.get("/api/cq/leaderboard/");
+        return res.data.data as LeaderboardResponse[];
+    }catch(err){
+        console.log(err);
+        alert("An Error Occured! [E-04]");
+        return null;
+    }
+};
+
 export const submitAnswer = async (participantId: string, answer: string) : Promise<SubmitResponse | null> => {
     try{
         var res = await publicRouter.post("/api/cq/submit/", {participantId, answer});
@@ -40,7 +51,13 @@ export const getQuestion = async (participantId: string) : Promise<QuestionRespo
     }
 };
 
+export type LeaderboardResponse = {
+    participantId:number;
+    name:string;
+    level: number;
+    time: string;
 
+}
 export type QuestionResponse = {
     won: boolean;
     data: Question;

src/pages/CryptaQuest/CryptaLeaderboard.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { LeaderboardResponse, leaderboard } from "../../apis/cryptaquest";
+import styles from "./CryptaQuest.module.css";
+import { useNavigate } from "react-router-dom";
+
+export const Leaderboard = () => {
+    const [leaderboardList, setLeaderboardList] = useState<LeaderboardResponse[] | null>(null);
+    const redirect = useNavigate();
+    useEffect(()=>{
+        leaderboard().then((res)=>{
+            if(res){
+                setLeaderboardList(res);
+            }
+        });
+    })
+    return (
+        <div className={styles.container}>
+      <div className={styles.background}>
+        <div className={styles.one}></div>
+        <div className={styles.two}></div>
+      </div>
+      <div className={styles.content}>
+        <div className={styles.namePage}>
+            <h1>Leaderboard</h1>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Rank</th>
+                        <th>Name</th>
+                        <th>Level</th>
+                        <th>Time</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        leaderboardList?.map((item, index)=>{
+                            return (
+                                <tr>
+                                    <td>{index+1}</td>
+                                    <td>{item.name}</td>
+                                    <td>{item.level}</td>
+                                    <td>{new Date(item.time).toLocaleTimeString()}</td>
+                                </tr>
+                            );
+                        })
+                    }
+                </tbody>
+            </table>
+            <button onClick={()=>redirect("/cq")} className={styles.switchButton}> Go Back</button></div></div>
+        </div>
+    );};

src/pages/CryptaQuest/CryptaQuest.module.css

@@ -140,6 +140,22 @@
       overflow: auto;
       margin: 10px;
     }
+
+    & table {
+      width: 100%;
+      & tr {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 25% 25% 25% 25%;
+        & td, th {
+          border: 2px solid #00000090;
+          text-align: center;
+        }
+        & th {
+          background: #11111134;
+        }
+      }
+    }
   }
   .switchButton {
     position: fixed;
@@ -194,4 +210,23 @@
       font-size: 70%;
     }
   }
+
+  .leaderboardButton {
+    position: fixed;
+    bottom: 1%;
+    right: 1%;
+    outline: none;
+    border: none;
+    padding: 1% 2%;
+    font-size: 80%;
+    font-weight: bold;
+    border-radius: 10px;
+    background: #b5f7b8;
+    margin: 20px;
+    display: flex;
+    /* gap: 1%; */
+    align-items: center;
+    justify-content: center;
+    width: auto;
+  }
 }

src/pages/CryptaQuest/CryptaQuest.tsx

@@ -6,6 +6,7 @@ import "github-markdown-css/github-markdown-light.css";
 import { Question, getQuestion, initializeParticipant, submitAnswer } from "../../apis/cryptaquest";
 // import "./style.css";
 import congratsImg from "../../assets/congrats.png";
+import {  useNavigate } from "react-router-dom";
 interface CryptaQuestProps {}
 
 export const CryptaQuest: React.FC<CryptaQuestProps> = () => {
@@ -16,6 +17,7 @@ export const CryptaQuest: React.FC<CryptaQuestProps> = () => {
   const [won, setWon] = useState<boolean>(false);
   const [name, setName] = useState<string | null>(null);
   const [isName, setIsName] = useState<boolean>(false);
+  const redirect = useNavigate();
   const submitQuestionAnswer = () => {
     if (answer === "") {
       alert("Please enter the answer");
@@ -148,7 +150,9 @@ export const CryptaQuest: React.FC<CryptaQuestProps> = () => {
           </h2>
           <p>Your Name : <b>{name} ({participantId})</b></p>
         </div>
-      </div>}
+      </div>
+      }
+      <button className={styles.leaderboardButton} onClick={()=>redirect("/cq/leaderboard")}><i className="bi bi-1-circle"></i>&nbsp; Leaderboard</button>
     </div>
   );
 };