Skip to content

Commit

Permalink
feat(treasurehunt) : Treasure hunt UI
Browse files Browse the repository at this point in the history
  • Loading branch information
aswanthabam committed Mar 5, 2024
1 parent 98c1e2d commit ed4e1c0
Show file tree
Hide file tree
Showing 5 changed files with 531 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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>
Expand Down
80 changes: 80 additions & 0 deletions src/apis/treasurehunt.tsx
Original file line number Diff line number Diff line change
@@ -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;
};
242 changes: 242 additions & 0 deletions src/pages/TreasureHunt/TreasureHunt.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
Loading

0 comments on commit ed4e1c0

Please sign in to comment.