Clue pages (#92)

* feat: anti cheat logic integrated with backend

* feat: Add deductScore API endpoint and integrate with clue page

src/api/api-urls.ts

@@ -9,18 +9,19 @@ export const REGISTER_URL = "/team/register";
  */
 export const LOGIN_URL = "/team/login";
 
+//---------------------------------------------Clues-----------------------------------------------------------------
 /**
  * Clue URLs
  */
 
+export const GET_CLUE_URL = "/clue/get";
+export const MARK_CLUE_URL = "/clue/mark";
+
 export const CLUE_URLS = {
-  GET_CLUE_URL: "/clue/get",
-  MARK_CLUE_URL: "/clue/mark",
+  GET_CLUE_URL,
+  MARK_CLUE_URL,
 };
 
-export const GET_CLUE_URL = CLUE_URLS.GET_CLUE_URL;
-export const MARK_CLUE_URL = CLUE_URLS.MARK_CLUE_URL;
-
 //---------------------------------------------Puzzle-----------------------------------------------------------------
 /**
  * Get Crossword Details
@@ -31,3 +32,15 @@ export const GET_CROSSWORD_DETAILS = "/crossword/get";
  * Update Crossword
  */
 export const UPDATE_CROSSWORD = "/crossword/update";
+
+//---------------------------------------------Score-----------------------------------------------------------------
+
+/**
+ * Deduct Score
+ */
+
+export const DEDUCT_SCORE_URL = "/score/deduct";
+
+export const SCORE_URLS = {
+  DEDUCT_SCORE_URL,
+};

src/api/score/deductScore.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+
+import { DEDUCT_SCORE_URL } from "../api-urls";
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+axios.defaults.baseURL = BASE_URL;
+
+async function deductScore(
+  senderEmail: string,
+  receiverEmail: string,
+  points: number = 5,
+) {
+  try {
+    const response = await axios.post(`
+      ${DEDUCT_SCORE_URL}/${senderEmail}/${receiverEmail}/${points}`);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+}
+
+export { deductScore };

src/app/clue/[key]/page.tsx → src/app/(client)/(pages)/clue/[key]/page.tsx

@@ -8,12 +8,20 @@ import { useSearchParams } from "next/navigation";
 
 import { getClue } from "@/api/clue/getClue";
 import { markClue } from "@/api/clue/markClue";
+import { deductScore } from "@/api/score/deductScore";
+
+import { Button } from "@/components/ui/button";
 
 interface Clue {
-  id: number;
-  clue: string;
-  answer: string;
-  key: string;
+  ID: number;
+  CreatedAt: string;
+  UpdatedAt: string;
+  DeletedAt: string;
+  clue_id: string;
+  clue_hint: string;
+  clue_points: number;
+  clue_box_number: number;
+  clue_box_direction: string;
 }
 
 function CluePage({ params }: { params: { key: string } }) {
@@ -31,38 +39,71 @@ function CluePage({ params }: { params: { key: string } }) {
 
   function checkCheat() {
     const actkn = searchParams.get("actkn");
+    const localTeamEmail = window.localStorage.getItem("email");
+    const auth = window.localStorage.getItem("auth");
+
+    if (!localTeamEmail || !auth) {
+      setMessageText("Please login first...");
+      setMessage(true);
+
+      setTimeout(() => {
+        router.push("/login");
+      }, 3000);
+      return;
+    }
 
     if (actkn && window) {
-      let currentTeamName = "Team 1"; // fetch it from the backend using session cookie
-      let involvedTeamName = "Team 1"; // fetch it from the backend using actkn
+      const fingerprintedTeam = atob(actkn);
 
-      if (currentTeamName === involvedTeamName) {
+      if (localTeamEmail === fingerprintedTeam) {
         return;
       }
 
       setMessageText(
-        `Team ${currentTeamName} has cheated by looking at the clue, illegally shared by Team ${involvedTeamName}`,
+        `You have been caught cheating! Talk to one of the officials to get unbanned and continue playing... points were deducted from both teams scores as a penatly!`,
       );
       setMessage(true);
+
+      deductScore(localTeamEmail, fingerprintedTeam, 5).catch((error) => {
+        console.error(error);
+      });
     } else {
-      const actknsig = "some-random-string"; // fetch it from the backend by providing the team id who found the clue
+      const actknsig = btoa(localTeamEmail);
+
       router.push(`/clue/${key}?actkn=${actknsig}`);
+
+      markClue(key, localTeamEmail).catch((error) => {
+        console.error(error);
+      });
     }
   }
 
   useEffect(() => {
     getClue(key)
       .catch((error) => {
         setMessageText("Clue not found! Redirecting to the home page...");
+        console.error(error);
         setMessage(true);
 
         setTimeout(() => {
           router.push("/");
         }, 3000);
       })
       .then((data) => {
-        setClue(data);
-        checkCheat();
+        if (data) {
+          setClue(data.clue);
+        } else {
+          return;
+        }
+        try {
+          checkCheat();
+        } catch (error) {
+          console.error(error);
+          setMessageText(
+            "An unknown error occurred check your connection and try reloading the page...",
+          );
+          setMessage(true);
+        }
         setLoading(false);
       });
   }, []);
@@ -115,9 +156,31 @@ function CluePage({ params }: { params: { key: string } }) {
                   {messageText}
                 </label>
               ) : (
-                <h1 className="text-center">
-                  {clue ? <>Clue: {clue.clue}</> : <>Clue not found</>}
-                </h1>
+                <>
+                  <h1 className="text-center">
+                    {clue ? (
+                      <>
+                        {clue.clue_box_number}{" "}
+                        {clue.clue_box_direction == "a" ? "across" : "down"} :{" "}
+                        {clue.clue_hint}
+                      </>
+                    ) : (
+                      <>Clue not found</>
+                    )}
+                  </h1>
+
+                  {clue && (
+                    <Button
+                      onClick={() => {
+                        router.push(
+                          `/play?number=${clue.clue_box_number}&direction=${clue.clue_box_direction}`,
+                        );
+                      }}
+                    >
+                      Fill Puzzel
+                    </Button>
+                  )}
+                </>
               )}
             </>
           )}

src/components/login/LoginForm.tsx

@@ -71,6 +71,7 @@ export default function LoginForm() {
       });
     } finally {
       setLoading(false);
+      window.localStorage.setItem("email", email);
     }
   };