diff --git a/src/App.tsx b/src/App.tsx index 9987bce2..15e239e5 100644 --- a/src/App.tsx +++ b/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() { }> + }> }> diff --git a/src/apis/cryptaquest.tsx b/src/apis/cryptaquest.tsx index 8fbc9f9c..d0178af0 100644 --- a/src/apis/cryptaquest.tsx +++ b/src/apis/cryptaquest.tsx @@ -5,6 +5,17 @@ const publicRouter = axios.create({ baseURL: api_url, }); +export const leaderboard = async () : Promise => { + 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 => { try{ var res = await publicRouter.post("/api/cq/submit/", {participantId, answer}); @@ -40,7 +51,13 @@ export const getQuestion = async (participantId: string) : Promise { + const [leaderboardList, setLeaderboardList] = useState(null); + const redirect = useNavigate(); + useEffect(()=>{ + leaderboard().then((res)=>{ + if(res){ + setLeaderboardList(res); + } + }); + }) + return ( + + + + + + + + Leaderboard + + + + Rank + Name + Level + Time + + + + { + leaderboardList?.map((item, index)=>{ + return ( + + {index+1} + {item.name} + {item.level} + {new Date(item.time).toLocaleTimeString()} + + ); + }) + } + + + redirect("/cq")} className={styles.switchButton}> Go Back + + );}; \ No newline at end of file diff --git a/src/pages/CryptaQuest/CryptaQuest.module.css b/src/pages/CryptaQuest/CryptaQuest.module.css index 0e59c183..a4485279 100644 --- a/src/pages/CryptaQuest/CryptaQuest.module.css +++ b/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; + } } diff --git a/src/pages/CryptaQuest/CryptaQuest.tsx b/src/pages/CryptaQuest/CryptaQuest.tsx index 8db0c6c5..0d1f472a 100644 --- a/src/pages/CryptaQuest/CryptaQuest.tsx +++ b/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 = () => { @@ -16,6 +17,7 @@ export const CryptaQuest: React.FC = () => { const [won, setWon] = useState(false); const [name, setName] = useState(null); const [isName, setIsName] = useState(false); + const redirect = useNavigate(); const submitQuestionAnswer = () => { if (answer === "") { alert("Please enter the answer"); @@ -148,7 +150,9 @@ export const CryptaQuest: React.FC = () => { Your Name : {name} ({participantId}) - } + + } + redirect("/cq/leaderboard")}> Leaderboard ); };
Your Name : {name} ({participantId})