Leaderboard WSS & types fix

lib/leaderboard.ts

@@ -68,7 +68,7 @@ export type ScoreEvent = {
         {
           pseudo: string;
           tries: number;
-          completions: number;
+          completion: number;
           score: number;
         }
       ];

ui/Leaderboard.tsx

@@ -14,6 +14,8 @@ const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
 export default function Leaderboard({ token }: { token: string }) {
   // const { data, isLoading } = useLeaderboard({ token });
 
+  const CHAPITRE_EVENT = 3;
+
   const subscription: SWRSubscription<string, ScoreEvent, Error> = (key, { next }) => {
     const socket = new WebSocket(key);
 
@@ -29,7 +31,7 @@ export default function Leaderboard({ token }: { token: string }) {
   };
 
   const { data } = useSWRSubscription(
-    `wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard`,
+    `wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard${CHAPITRE_EVENT}`,
     subscription
   );
 
@@ -39,9 +41,11 @@ export default function Leaderboard({ token }: { token: string }) {
 
   const { data: groups } = useGroups({ token });
 
+  console.log(groups);
+
   if (groups) {
     options = groups
-      .filter((group) => !group.chapter)
+      .filter((group) => group.chapter === null)
       .map((group) => ({ value: group.name, title: group.name }))
       .filter((group, index, self) => self.findIndex((g) => g.value === group.value) === index)
       .sort((a, b) => a.title.localeCompare(b.title));
@@ -56,8 +60,6 @@ export default function Leaderboard({ token }: { token: string }) {
     return data;
   }, [data, filter]);
 
-  console.log(filteredData);
-
   return (
     <section className="flex h-full w-full flex-col space-y-4">
       <header className="sticky flex items-center justify-between">
@@ -82,40 +84,49 @@ export default function Leaderboard({ token }: { token: string }) {
         )} */}
       </header>
       <main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
-        Waiting for the leaderboard to be implemented (Xavier WSS)
+        <ul className="flex flex-col space-y-2">
-        {/* <ul className="flex flex-col space-y-2">
+          {data?.groups.map((group, key) => (
-          {(!isLoading &&
+            <li key={key} className="flex justify-between space-x-2">
-            filteredData((group, key) => (
+              <div className="flex items-center space-x-4">
-              <li key={key} className="flex justify-between space-x-2">
+                <span className={cn('font-semibold', SCORE_COLORS[group.rank - 1])}>
-                <div className="flex items-center space-x-4">
+                  {group.rank}
-                  <span className={cn('font-semibold', SCORE_COLORS[score.rank - 1])}>
+                </span>
-                    {score.rank}
+                <div className="flex items-center space-x-2">
+                  <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
+                    <span className="text-lg">{group.name}</span>
+                    <span className="text-sm text-muted">
+                      {group.players && group.players.length > 1
+                        ? group.players
+                            .map((player) => player.pseudo || 'Anonyme')
+                            .sort((a, b) => a.localeCompare(b))
+                            .join(', ')
+                        : group.players[0].pseudo}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center space-x-4">
+                <div className="flex flex-col">
+                  <span className="text-sm font-semibold">Essaies</span>
+                  <span className="text-lg text-muted">
+                    {group.players.reduce((a, b) => a + b.tries, 0)}
                   </span>
-                  <div className="flex items-center space-x-2">
-                    <AvatarComponent name={score.pseudo} src={score.avatar} className="h-9 w-9" />
-                    <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
-                      <span className="text-lg">{score.pseudo}</span>
-                      <span className="text-sm text-muted">
-                        {score.groups
-                          ?.map((g) => g.name)
-                          .sort((a, b) => a.localeCompare(b))
-                          .join(', ')}
-                      </span>
-                    </div>
-                  </div>
                 </div>
-                <div className="flex items-center space-x-4">
+                {/* <div className="flex flex-col">
-                  <div className="flex flex-col">
+                  <span className="text-sm font-semibold">Puzzles</span>
-                    <span className="text-sm font-semibold">Puzzles</span>
+                  <span className="text-lg text-muted">
-                    <span className="text-lg text-muted">{score.completions}</span>
+                    {group.players.reduce((a, b) => a + b.completion, 0)}
-                  </div>
+                  </span>
-                  <div className="flex flex-col">
+                </div> */}
-                    <span className="text-sm font-semibold">Score</span>
+                <div className="flex flex-col">
-                    <span className="text-lg text-muted">{score.score}</span>
+                  <span className="text-sm font-semibold">Score</span>
-                  </div>
+                  <span className="text-lg text-muted">
+                    {group.players.reduce((a, b) => a + b.score, 0)}
+                  </span>
                 </div>
-              </li>
+              </div>
-            ))) ||
+            </li>
+          )) ||
             [...Array(20).keys()].map((i) => (
               <span
                 key={i}
@@ -126,7 +137,7 @@ export default function Leaderboard({ token }: { token: string }) {
                 }}
               />
             ))}
-        </ul> */}
+        </ul>
       </main>
     </section>
   );

ui/Puzzle.tsx

@@ -116,11 +116,11 @@ export default function Puzzle({ token, id }: { token: string; id: number }) {
       ) : (
         <div className="flex items-center justify-between">
           <div className=" items-center gap-x-2">
-            <p className="text-sm">
+            <p>
-              Tentatives : <span className="text-brand">{puzzle.tries}</span>
+              Tentatives : <span className="text-brand-accent">{puzzle.tries}</span>
             </p>
-            <p className="text-sm">
+            <p>
-              Score : <span className="text-brand">{puzzle.score}</span> (Score maximum:{' '}
+              Score : <span className="text-brand-accent">{puzzle.score}</span> (Score maximum:{' '}
               {puzzle.scoreMax})
             </p>
           </div>

ui/ToHTML.tsx

@@ -13,7 +13,7 @@ export default function ToHTML({ data, className }: { data: string; className?:
           a: ({ ...props }) => (
             <a
               {...props}
-              className="text-brand hover:text-brand/80 hover:underline"
+              className="text-brand-accent hover:text-brand hover:underline"
               // MAKE thIS SHIT DOWNLOAD
               target="_blank"
               rel="noopener"