feat : backend integration

aswanthabam · Mar 2, 2024 · 2839fbe · 2839fbe
1 parent abd6d8b
commit 2839fbe
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 32 deletions.
diff --git a/src/apis/cryptaquest.tsx b/src/apis/cryptaquest.tsx
@@ -0,0 +1,58 @@
+import { publicRouter } from "./api";
+
+export const submitAnswer = async (participantId: string, answer: string) : Promise<SubmitResponse | null> => {
+    try{
+        var res = await publicRouter.post("/api/cq/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/cq/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/cq/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 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;
+};
diff --git a/src/assets/congrats.png b/src/assets/congrats.png
diff --git a/src/pages/CryptaQuest/CryptaQuest.module.css b/src/pages/CryptaQuest/CryptaQuest.module.css
@@ -35,6 +35,31 @@
       left: 0;
     }
   }
+
+  .won {
+    background: white;
+    width: 50%;
+    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;
+    }
+  }
+
   .content {
     z-index: 2;
     width: 100%;
@@ -53,7 +78,20 @@
       font-family: "Micro 5", sans-serif;
       z-index: 2;
     }
-    .submitPage {
+    .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: 50%;
       padding: 20px;
@@ -69,13 +107,20 @@
         font-size: 200%;
         color: #3f3d17f4;
       }
-      .result {
+      .result, input {
         width: 100%;
         height: 150px;
         border-radius: 20px;
         padding: 1.5%;
         font-size: 110%;
       }
+      & input {
+        width: 70%;
+        height: 30%;
+        border: none;
+        box-shadow: 1px 1px 10px 1px #0000001f;
+        padding: 2% 3%;
+      }
 
       .button {
         outline: none;
@@ -126,7 +171,7 @@
     left: 2%;
     max-height: 20%;
     overflow: auto;
-    width: 17%;
+    min-width: 17%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -144,5 +189,9 @@
       display: flex;
       font-weight: normal;
     }
+    & p {
+      color: #111;
+      font-size: 70%;
+    }
   }
 }
diff --git a/src/pages/CryptaQuest/CryptaQuest.tsx b/src/pages/CryptaQuest/CryptaQuest.tsx
@@ -3,74 +3,152 @@ import styles from "./CryptaQuest.module.css";
 import Markdown from "marked-react";
 // import { marked } from "marked";
 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";
 interface CryptaQuestProps {}
 
 export const CryptaQuest: React.FC<CryptaQuestProps> = () => {
-  const [isQuestionPage, setIsQuestionPage] = useState(false);
-  const [question, setQuestion] = useState<string>("");
-  const [step, setStep] = useState<number>(1);
-  const [stepName, setStepName] = useState<string>("Coding");
-  const [stepRating, setStepRating] = useState<number>(3);
+  const [isQuestionPage, setIsQuestionPage] = useState(true);
+  const [question, setQuestion] = useState<Question | null>();
+  const [participantId, setParticipantId] = useState<string>("");
+  const [answer, setAnswer] = useState<string>(""); 
+  const [won, setWon] = useState<boolean>(false);
+  const [name, setName] = useState<string | null>(null);
+  const [isName, setIsName] = useState<boolean>(false);
+  const submitQuestionAnswer = () => {
+    if (answer === "") {
+      alert("Please enter the answer");
+      return;
+    }setLoading(true);
+    submitAnswer(participantId, answer).then((res) => {
+      if (res) {
+        setLoading(false);
+        if (res.won) {
+          alert("Correct Answer!");
+          setWon(true);
+          return;
+        }
+        if (res.correct) {
+          setIsQuestionPage(true);
+          alert("Correct Answer!");
+        } else {
+          alert("Incorrect Answer! Please try again!");
+        }
+      }
+    });
+  };
+  const [loading, setLoading] = useState(false); 
   useEffect(() => {
     document.title = "Vijnana - Crypta Quest\n";
-    setQuestion(
-      "## Crypta Quest\n" +
-        `| Header 1 | Header 2 | Header 3 |
-| ---------|----------|----------|
-| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
-| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
-| Row 3, Col 1 | Row 3, Col 2 | Row 3, Col 3 |
-` +
-        "\n```python\nprint('Hello World')\na = a+b\n```"
-    );
-    setStep(1);
-    setStepName("Coding");
-    setStepRating(3);
+    var participantId = localStorage.getItem("participantId")
+    var name = localStorage.getItem("name") ?? "Unknown";
+    if (participantId === null) {
+      // setLoading(true);
+      // initializeParticipant().then((res) => {
+      //   console.log(res);
+      //   if (res) {
+      //     setLoading(false);
+      //     setParticipantId(res.participantId);
+      //     localStorage.setItem("participantId", res.participantId);
+      //   } 
+      // });
+    }else {
+      setIsName(true);
+      setParticipantId(participantId);
+      setName(name);
+    }
   }, []);
+
+  useEffect(() => {
+    if(participantId && isQuestionPage) {
+      setLoading(true);
+      getQuestion(participantId).then((res) => {
+        console.log(res);
+        if (res) {
+          setLoading(false);
+          if(res.won)
+          {
+            alert("You have already completed the quest!");
+            setWon(true);
+          }else {
+            setQuestion(res.data);
+          }
+        }
+      });
+    }
+  },[participantId, isQuestionPage]);
   return (
     <div className={styles.container}>
       <div className={styles.background}>
         <div className={styles.one}></div>
         <div className={styles.two}></div>
       </div>
-      <div className={styles.content}>
+      { won ? <div className={styles.won}>
+        <img src={congratsImg} alt="congrats" />
+        <h1>Hu rah! You have completed the quest!</h1>
+      </div> : <div className={styles.content}>
         <h1 className={styles.quest}>Crypta Quest</h1>
-
-        {isQuestionPage ? (
+        {loading ? <div className={styles.loading}>Loading ...</div> :(isName ? !isQuestionPage ? (
           <div className={styles.submitPage}>
             <h1>Submit Your Result</h1>
             <textarea
               placeholder="Enter The results here"
               className={styles.result}
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
             ></textarea>
-            <button className={styles.button}>Verify and Submit</button>
+            <button onClick={submitQuestionAnswer} className={styles.button}>Verify and Submit</button>
           </div>
         ) : (
           <div className={styles.questionPage + " " + "markdown-body"}>
-            <Markdown value={question}></Markdown>
+            <Markdown value={question?.question}></Markdown>
           </div>
-        )}
+        ) : <div className={styles.namePage}>
+          <h1>Enter Your Name</h1>
+          <input
+            type="text"
+            placeholder="Enter Your Name"
+            onChange={(e) => setName(e.target.value)}
+          />
+          <button className={styles.button}
+            onClick={() => {
+              localStorage.setItem("name", name ?? "Unknown");
+              setIsName(true);
+              initializeParticipant(name ?? "Unknown").then((res) => {
+                console.log(res);
+                if (res) {
+                  setLoading(false);
+                  setParticipantId(res.participantId);
+                  localStorage.setItem("participantId", res.participantId);
+                } 
+              });
+            }}
+          >
+            Submit
+          </button>
+        </div>)}
         <button
           className={styles.switchButton}
           onClick={() => setIsQuestionPage(!isQuestionPage)}
         >
           {" "}
           <i className="bi bi-arrow-repeat"></i>
-          {isQuestionPage ? "Back to question" : "Go to Submission Page"}
+          {!isQuestionPage ? "Back to question" : "Go to Submission Page"}
         </button>
         <div className={styles.info}>
-          <h1> {stepName}</h1>
+          <h1> {question?.name}</h1>
           <h2>
             {" "}
-            Question Number: &nbsp; &nbsp; <b>{step}</b>
+            Question Number: &nbsp; &nbsp; <b>{question?.order}</b>
           </h2>
           <h2>
             {" "}
-            Difficulty Rating: &nbsp; &nbsp;<b>{stepRating} / 5</b>
+            Difficulty Rating: &nbsp; &nbsp;<b>{(question?.difficulty ?? 10)+ " / 10"}</b>
           </h2>
+          <p>Your Name : <b>{name} ({participantId})</b></p>
         </div>
-      </div>
+      </div>}
     </div>
   );
 };