feat(treasurehunt) : Treasure hunt UI

src/App.tsx

@@ -42,6 +42,8 @@ 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";
+import { TreasureHunt } from "./pages/TreasureHunt/TreasureHunt";
+import { THLeaderboard } from "./pages/TreasureHunt/TreasurehuntLeaderboard";
 
 function getTheme() {
   var theme = localStorage.getItem("theme");
@@ -259,6 +261,8 @@ function App() {
         </Route>
         <Route path="/cq" element={<CryptaQuest />}></Route>
         <Route path="/cq/leaderboard" element={<Leaderboard />}></Route>
+        <Route path="/th" element={<TreasureHunt />}></Route>
+        <Route path="/th/leaderboard" element={<THLeaderboard />}></Route>
         <Route path="*" element={<Error404 />}></Route>
       </Routes>
     </div>

src/apis/treasurehunt.tsx

@@ -0,0 +1,80 @@
+import axios from "axios";
+
+const api_url = import.meta.env.VITE_API_URL_EVENT;
+const publicRouter = axios.create({
+    baseURL: api_url,
+  });
+
+export const leaderboard = async () : Promise<LeaderboardResponse[] | null> => {
+    try{
+        var res = await publicRouter.get("/api/th/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/th/submit/", {participantId, answer});
+        return res.data.data as SubmitResponse;
+    }catch(err){
+        console.log(err);
+        alert("An Error Occured! [E-03]");
+        return null;
+    }
+}
+
+export const initializeParticipant = async (name: string) : Promise<InitializeResponse | null> => {
+    try{
+        var res = await publicRouter.post("/api/th/initialize/",{name: name});
+        var data = res.data.data as InitializeResponse;
+        return data;
+    }catch(err){
+        console.log(err);
+        alert("An Error Occured! [E-01]");
+        return null;
+    }
+};
+
+export const getQuestion = async (participantId: string) : Promise<QuestionResponse | null> => {
+    try {
+        var res = await publicRouter.get("/api/th/get-question/?participantId="+participantId);
+        var data = res.data.data as QuestionResponse;
+        return data;
+    }catch(err){
+        console.log(err);
+        alert("An Error Occured! [E-02]");
+        return null;
+    }
+};
+
+export type LeaderboardResponse = {
+    participantId:number;
+    name:string;
+    level: number;
+    time: string;
+
+}
+export type QuestionResponse = {
+    won: boolean;
+    data: Question;
+}
+export type Question = {
+    question: string;
+    order: number;
+    difficulty: number;
+    name: string;
+};
+
+export type InitializeResponse = {
+    participantId: string;
+    current_order: number;
+};
+
+export type SubmitResponse = {
+    won: boolean;
+    correct: boolean;
+};

src/pages/TreasureHunt/TreasureHunt.module.css

@@ -0,0 +1,242 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: #3a5ea7;
+  color: white;
+  position: relative;
+  font-family: "Crimson Text", serif;
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background-color: red;
+
+    .one {
+      background-color: rgb(255, 175, 36);
+      width: 100%;
+      height: 50%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .two {
+      background-color: rgb(54, 149, 245);
+      width: 100%;
+      height: 50%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .won {
+    background: white;
+    width: 80%;
+    min-height: 30%;
+    z-index: 2;
+    border-radius: 5%;
+    padding: 2%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: black;
+    gap: 10%;
+    & img {
+      width: 50%;
+      height: auto;
+      margin: 0;
+    }
+    & h1 {  
+      font-size: 100%;
+      color: green;
+      text-align: center;
+    }
+  }
+  .quest {
+    font-size: 100%;
+    color: rgb(22, 250, 94);
+    margin-bottom: 50px;
+    font-family: "Micro 5", sans-serif;
+    z-index: 2;
+    position: fixed;
+    bottom: -3%;
+    left: 3%;
+  }
+  .content {
+    z-index: 2;
+    width: 100%;
+    border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    /* transform: translateY(-80px); */
+    max-height: 100%;
+    color: black;
+
+
+    .loading {
+      width: 50%;
+      padding: 20px;
+      border-radius: 20px;
+      display: flex;
+      height: 200px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      background: #fcecec;
+      padding: 1% 3%;
+    }
+    .submitPage, .namePage {
+      z-index: 2;
+      width: 75%;
+      padding: 20px;
+      border-radius: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      background: #fcecec;
+      padding: 10% 10%;
+      & h1 {
+        font-size: 200%;
+        color: #3f3d17f4;
+      }
+      .result, input {
+        width: 100%;
+        height: 50px;
+        border-radius: 20px;
+        padding: 1.5%;
+        font-size: 110%;
+        text-align: center;
+      }
+      & input {
+        width: 70%;
+        height: 30%;
+        border: none;
+        box-shadow: 1px 1px 10px 1px #0000001f;
+        padding: 2% 3%;
+      }
+
+      .button {
+        outline: none;
+        border: none;
+        background: greenyellow;
+        padding: 15px 25px;
+        font-size: 100%;
+        border-radius: 10px;
+      }
+    }
+    .questionPage {
+      background: white;
+      width: 80%;
+      padding: 10% 5%;
+      border-radius: 20px;
+      max-height: 70%;
+      overflow: auto;
+      margin: 10px;
+      position: fixed;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    & 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;
+    top: 1%;
+    right: 1%;
+    outline: none;
+    border: none;
+    padding: 1% 2%;
+    font-size: 80%;
+    font-weight: bold;
+    border-radius: 10px;
+    background: #f7f7f7;
+    display: flex;
+    gap: 1%;
+    margin: 0 2%;
+    height:8%;
+    align-items: center;
+
+    & i {
+      font-size: 150%;
+    }
+  }
+
+  .info {
+    position: fixed;
+    background: #fff;
+    padding: 1% 2%;
+    border-radius: 10px;
+    top: 1%;
+    left: 1%;
+    height: 8%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1%;
+    margin: 0 2%;
+    & h1 {
+      font-size: 100%;
+      color: hsla(57, 47%, 17%, 0.957);
+      display: flex;
+    }
+    & h2 {
+      font-size: 80%;
+      color: hsla(57, 47%, 17%, 0.957);
+      display: flex;
+      font-weight: normal;
+    }
+    & p {
+      color: #111;
+      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;
+    z-index: 10;
+  }
+}