Adding verification on puzzle

ui/Puzzle.tsx

@@ -20,8 +20,10 @@ type PuzzleData = {
 };
 
 type Granted = {
-  tries: number;
-  score?: number;
+  tries: number | null;
+  score?: number | null;
+  message?: string | null;
+  success?: boolean | null;
 };
 
 export default function Puzzle({ token, id }: { token: string; id: number }) {
@@ -58,10 +60,14 @@ export default function Puzzle({ token, id }: { token: string; id: number }) {
       }
     });
 
-    if (res.ok || res.status === 406) {
-      const data = (await res.json()) as { tries: number; score?: number };
-      if (data.score) mutate(`puzzles/${puzzle?.id}`);
-      else setGranted(data);
+    if (res.ok || res.status === 406 || res.status === 423) {
+      const data = res.ok || res.status === 406 ? ((await res.json()) as Granted) : null;
+      if (data && data.score) mutate(`puzzles/${puzzle?.id}`);
+      else if (data && data.tries) setGranted(data);
+      else if (res.ok && data?.success)
+        setGranted({ tries: null, score: null, message: 'Réponse correcte' });
+      else if (res.status === 423)
+        setGranted({ tries: null, score: null, message: 'Réponse incorrecte' });
     }
   }
 
@@ -99,8 +105,17 @@ export default function Puzzle({ token, id }: { token: string; id: number }) {
             />
             {granted && (
               <div className="flex flex-col">
-                <p className="text-sm text-muted">Tentatives actuelles : {granted.tries}</p>
-                {granted.score && <p className="text-sm text-muted">Score : {granted.score}</p>}
+                {granted.message && (
+                  <p className="text-sm text-highlight-secondary">{granted.message}</p>
+                )}
+                {granted.tries && (
+                  <p className="text-sm text-highlight-secondary">
+                    Tentatives actuelles : {granted.tries}
+                  </p>
+                )}
+                {granted.score && (
+                  <p className="highlight-secondary text-sm">Score : {granted.score}</p>
+                )}
               </div>
             )}
             {/* <Input

ui/Puzzles.tsx

@@ -42,16 +42,15 @@ export default function Puzzles({ token }: { token: string }) {
     );
   }
 
-  function isBetweenDates(chapter: Chapter) {
+  function isBeforeStart(chapter: Chapter) {
     if (!chapter.startDate || !chapter.endDate) {
       return false;
     }
 
     const startDate = new Date(chapter.startDate);
-    const endDate = new Date(chapter.endDate);
     const now = new Date();
 
-    if (startDate < now && endDate > now) {
+    if (now > startDate) {
       const minutes = 10 * 60 * 1000;
       if (startDate.getTime() + minutes < now.getTime()) {
         return true;
@@ -90,7 +89,7 @@ export default function Puzzles({ token }: { token: string }) {
             <div className="flex flex-col justify-between md:flex-row md:items-center">
               <div className="flex items-center gap-x-2">
                 <h1 className="text-xl font-semibold">{chapter.name}</h1>
-                {!isInEventGroup(chapter) && !isBetweenDates(chapter) && (
+                {!isInEventGroup(chapter) && isBeforeStart(chapter) && (
                   <Dialog
                     key={chapter.id}
                     title={chapter.name}
@@ -117,14 +116,16 @@ export default function Puzzles({ token }: { token: string }) {
                         day: 'numeric',
                         month: 'long',
                         year: 'numeric',
-                        hour: 'numeric'
+                        hour: 'numeric',
+                        minute: 'numeric'
                       })}{' '}
                       -{' '}
                       {new Date(chapter.endDate).toLocaleDateString('fr-FR', {
                         day: 'numeric',
                         month: 'long',
                         year: 'numeric',
-                        hour: 'numeric'
+                        hour: 'numeric',
+                        minute: 'numeric'
                       })}
                     </span>
                   </div>
@@ -211,15 +212,23 @@ export default function Puzzles({ token }: { token: string }) {
 }
 
 function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
-  const isPuzzleAvailable = (chapter: Chapter) => {
-    const today = new Date();
-    const startDate = new Date(chapter.startDate!);
-    const endDate = new Date(chapter.endDate!);
-    return (
-      (chapter.startDate && chapter.endDate && today >= startDate && today <= endDate) ||
-      (!chapter.startDate && !chapter.endDate)
-    );
-  };
+  function isBeforeStart(chapter: Chapter) {
+    if (!chapter.startDate || !chapter.endDate) {
+      return false;
+    }
+
+    const startDate = new Date(chapter.startDate);
+    const now = new Date();
+
+    if (now > startDate) {
+      const minutes = 10 * 60 * 1000;
+      if (startDate.getTime() + minutes < now.getTime()) {
+        return true;
+      }
+    }
+
+    return false;
+  }
   return (
     <li
       className={cn(
@@ -229,11 +238,11 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
           'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
           'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
           'border-highlight-primary': !puzzle.tags?.length,
-          'cursor-not-allowed': !isPuzzleAvailable(chapter)
+          'cursor-not-allowed': !isBeforeStart(chapter)
         }
       )}
     >
-      {isPuzzleAvailable(chapter) ? (
+      {isBeforeStart(chapter) ? (
         <AppLink
           className="flex h-full w-full items-center justify-between p-4"
           key={puzzle.id}