chore: solved cards

src/app/challenges/page.tsx

@@ -37,9 +37,36 @@ function getTypesFromMask(mask: number) {
 export default function ChallengesPage() {
   const [type, setType] = useState("all");
   const [challenges, setChallenges] = useState<ChallengeData[]>([]);
+  const [solved, setSolved] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const { toast } = useToast();
 
+  const checkSolved = async () => {
+    await axios
+      .get(`${BACKEND_URL}/ctf/completed`, {
+        headers: {
+          Authorization: `Bearer ${window.localStorage.getItem("token")}`,
+        },
+      })
+      .then((res) => {
+        const data = res.data as {
+          id: string;
+        }[];
+        const all = [];
+        for (const item of data) {
+          all.push(item.id);
+        }
+        setSolved(all);
+      })
+      .catch(() => {
+        toast({
+          title: "Error",
+          description: "Failed to check if challenge is solved",
+          duration: 5000,
+        });
+      });
+  };
+
   useEffect(() => {
     if (!window.localStorage.getItem("token")) {
       window.location.href = "/signin";
@@ -57,7 +84,7 @@ export default function ChallengesPage() {
           Authorization: `Bearer ${window.localStorage.getItem("token")}`,
         },
       })
-      .then((res) => {
+      .then(async (res) => {
         const data = res.data as {
           id: string;
           name: string;
@@ -76,6 +103,7 @@ export default function ChallengesPage() {
           } as unknown as ChallengeData;
         });
         setChallenges(challenges);
+        await checkSolved();
         setLoading(false);
       })
       .catch(() => {
@@ -139,6 +167,7 @@ export default function ChallengesPage() {
               types={challenge.types}
               // description={challenge.description}
               points={challenge.points}
+              solved={solved.includes(challenge.id)}
               // solves={challenge.solves}
               onClick={() => setChallenge(challenge.id)}
             />

src/components/challengeCard.tsx

@@ -3,12 +3,14 @@ import Text from "~/components/text";
 import { BsNut } from "react-icons/bs";
 
 import React, { type HTMLAttributes } from "react";
+import { cn } from "~/lib/utils";
 
 export interface ChallengeItem {
   title: string;
   types: string[];
   // description: string;
   points: number;
+  solved?: boolean;
   // solves: number;
 }
 
@@ -22,12 +24,16 @@ const ChallengeCard: React.FC<ChallengeProps> = ({
   types,
   // description,
   points,
+  solved = false,
   ...other
 }) => {
   return (
     <div
       {...other}
-      className={`transition-bg mb-5 cursor-pointer rounded-lg bg-[#2D2D2D80] p-6 duration-200 ease-in-out hover:border-2 hover:border-[#ff0000] hover:shadow-sm hover:shadow-[#ff0000]`}
+      className={cn(
+        `transition-bg mb-5 cursor-pointer rounded-lg bg-[#2D2D2D80] p-6 duration-200 ease-in-out hover:border-2 hover:border-[#ff0000] hover:shadow-sm hover:shadow-[#ff0000]`,
+        solved ? "border border-green-500" : "",
+      )}
     >
       <div className="flex flex-col">
         <BsNut size={52} className="rotate-90 text-white" />