Merge pull request #114 from CapituloJaverianoACM/feat/update-ranking-scoreboard

TalkySafe143 · web-flow · commit 1159b1e86b88 · 2026-01-07T01:59:13.000-05:00
Feat/update ranking scoreboard #96
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_BACKEND_URL=
 NEXT_PUBLIC_SUPABASE_URL=
-NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
+NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
+NEXT_PUBLIC_DEFAULT_IMAGE_URL=https://www.svgrepo.com/show/452030/avatar-default.svg
diff --git a/src/app/league/page.tsx b/src/app/league/page.tsx
@@ -10,6 +10,8 @@ import { Contest } from "@/models/contest.model";
 import Footer from "@/components/shared/footer";
 import { getContestsWithPictures } from "@/controllers/contest.controller";
 import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { suscribe_leaderboard } from "@/lib/supabase/channel_subscribe";
 
 const navLinks = [
   { key: "home", label: "Inicio", href: "/" },
@@ -20,6 +22,7 @@ const navLinks = [
     href: "#upcoming-events",
   },
   { key: "podium", label: "Podio", href: "#podium" },
+  { key: "rank", label: "Raking", href: "/rank" },
 ];
 
 export default function LeagueHomePage() {
@@ -31,19 +34,32 @@ export default function LeagueHomePage() {
     })[]
   >([]);
 
+  const [refresh_students, setRefreshStudents] = useState<boolean>(false);
+
   useEffect(() => {
     getContestsWithPictures()
       .then(setContests)
       .catch(() => setContests([]));
   }, []);
 
+  useEffect(() => {
+    const supabase = createClient();
+    const channel = suscribe_leaderboard(supabase, () => {
+      setRefreshStudents((prev) => !prev);
+    });
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, []);
+
   return (
     <HeroUIProvider>
       <MainNavbar navLinks={navLinks} />
       <Hero />
       <Rules />
       <UpcomingEvents events={contests} loadingInitialState />
-      <Podium />
+      <Podium refresh_toggle={refresh_students} />
       <Footer />
     </HeroUIProvider>
   );
diff --git a/src/components/home/apple-cards-carousel.tsx b/src/components/home/apple-cards-carousel.tsx
@@ -204,7 +204,14 @@ export const Card = ({
   const containerRef = useRef<HTMLDivElement>(null);
   // Se quito currentIndex
   const { onCardClose } = useContext(CarouselContext);
+  const handleOpen = () => {
+    setOpen(true);
+  };
 
+  const handleClose = () => {
+    setOpen(false);
+    onCardClose(index);
+  };
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
       if (event.key === "Escape") {
@@ -224,15 +231,6 @@ export const Card = ({
 
   useOutsideClick(containerRef, () => handleClose());
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    onCardClose(index);
-  };
-
   return (
     <>
       <AnimatePresence>
diff --git a/src/components/league/sections/podium.tsx b/src/components/league/sections/podium.tsx
@@ -4,7 +4,11 @@ import { LevelEnum } from "@/models/level.enum";
 import { Student } from "@/models/student.model";
 import { useEffect, useState } from "react";
 
-export function Podium() {
+/**
+ * Muestra a los 3 mejores estudiantes de la liga
+ * @param refresh_toggle es un booleano que se recibe desde el componente padre para saber cuando tiene que pedir los estudiantes
+ */
+export function Podium({ refresh_toggle }: { refresh_toggle: boolean }) {
   const [loading, setloading] = useState<boolean>(true);
 
   const [students, setStudents] = useState<
@@ -21,6 +25,7 @@ export function Podium() {
   >([]);
 
   const handlerGetPodiumStudents = async () => {
+    console.log("Recuperando estudiantes...");
     try {
       const response = await getPodiumStudents();
 
@@ -38,7 +43,7 @@ export function Podium() {
   useEffect(() => {
     handlerGetPodiumStudents();
     setloading(false);
-  }, []);
+  }, [refresh_toggle]);
 
   useEffect(() => {
     setSortedStudents(() => {
@@ -74,7 +79,7 @@ export function Podium() {
                   <PodiumContainer.Step
                     showUserInfo
                     showNumber
-                    bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_0.2)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_0.5)]"
+                    bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_1)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_1)]"
                     className="border-[rgb(var(--azul-electrico-rgb)_/_0.2)] border-1"
                     student={{
                       order: s.order,
@@ -105,8 +110,7 @@ export function Podium() {
                     showCrown
                     showAvatar
                     showNumber
-                    bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_0.2)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_0.5)]"
-                    className="border-[rgb(var(--azul-electrico-rgb)_/_0.2)] border-1"
+                    bg_color="bg-[rgb(var(--azul-electrico-rgb)_/_1)] dark:bg-[rgb(var(--azul-electrico-rgb)_/_1)]"
                     student={s}
                   ></PodiumContainer.Step>
                 ),
diff --git a/src/components/league/sections/ranking.tsx b/src/components/league/sections/ranking.tsx
@@ -1,12 +1,37 @@
+import { useEffect, useState } from "react";
 import RankingComponent from "../ui/ranking-component";
+import { Podium } from "./podium";
+import { createClient } from "@/lib/supabase/client";
+import { suscribe_leaderboard } from "@/lib/supabase/channel_subscribe";
 
 export const Ranking = () => {
+  const [refresh, setRefresh] = useState<boolean>(false);
+
+  useEffect(() => {
+    const supabase = createClient();
+    const channel = suscribe_leaderboard(supabase, () =>
+      setRefresh((prev) => !prev),
+    );
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, []);
+
   return (
     <div>
+      <div className="mt-[-9vh]">
+        <h1 className="text-center text-6xl">Ranking global</h1>
+      </div>
+      <Podium refresh_toggle={refresh} />
       <RankingComponent.RankingContainer>
         <RankingComponent.Padding className="max-w-[65rem] mx-auto">
           <p className="text-lg font-semibold text-center">Ranking</p>
-          <RankingComponent.RankingList student_number={20} />
+          <RankingComponent.RankingList
+            student_number={5}
+            offset={3}
+            refresh_toggle={refresh}
+          />
         </RankingComponent.Padding>
       </RankingComponent.RankingContainer>
     </div>
diff --git a/src/components/league/ui/Events/event-card.tsx b/src/components/league/ui/Events/event-card.tsx
@@ -90,7 +90,7 @@ const WrapContainer = (props: {
   return <div className={`flex flex-wrap gap-2 ${className}`}>{children}</div>;
 };
 
-export default {
+const event_card = {
   Container,
   Image,
   Title,
@@ -99,3 +99,5 @@ export default {
   Description,
   WrapContainer,
 };
+
+export default event_card;
diff --git a/src/components/league/ui/podium/podium-component.tsx b/src/components/league/ui/podium/podium-component.tsx
@@ -20,7 +20,7 @@ const Container = (props: {
             style={{
               height: `${((0.8 / steps_count) * (steps_count - step.order) + 0.2) * 100}%`,
             }}
-            className="flex-grow"
+            className="flex-grow flex-1"
             key={step.order}
           >
             {step.children}
@@ -53,21 +53,45 @@ const Step = (props: {
     showCrown = false,
   } = props;
 
-  const val = 1 - student.order * 0.045;
+  const val = 1 - student.order * 0.25;
+
+  const roundedDirection =
+    student.order == 0 ? "rounded-tl-[8rem]" : "rounded-tr-[8rem]";
 
   return (
     <div className="flex flex-col gap-2 w-full h-full relative transition hover:scale-105 cursor-pointer">
-      <div
-        style={{
-          backdropFilter: `brightness(${val})`,
-        }}
-        className={`flex flex-col items-center justify-center rounded-3xl flex-grow ${bg_color} ${className} shadow-md`}
-      >
-        <div className="h-[1.5rem] w-full"></div>
+      <div className="relative flex flex-col items-center justify-center flex-grow overflow-hidden">
+        {/* Fondo */}
+        <div
+          className={`absolute inset-0 shadow-md flex flex-col items-center justify-end ${bg_color} ${roundedDirection} ${className}`}
+          style={{
+            filter: `brightness(${val})`,
+          }}
+        ></div>
 
-        {showNumber && (
-          <b className="text-6xl text-white">{student.order + 1}°</b>
-        )}
+        <div className="absolute h-full flex flex-col gap-2 items-center justify-end z-10">
+          {showNumber && (
+            <b className="relative z-10 text-6xl text-white text-bold font-[var(--font-primary)]">
+              #{student.order + 1}
+            </b>
+          )}
+          {showUserInfo && (
+            <div className=" text-white flex flex-col items-center justify-center p-2 text-center text-xs lg:text-base shadow font-[var(--font-secondary)]">
+              <p
+                className="m-0"
+                title={`${student.student.name} ${student.student.surname}`}
+              >
+                {student.student.name}
+              </p>
+              <p className="m-0 flex gap-1 items-center">
+                {" "}
+                <IconCrown className="text-yellow-500" size={15} />
+                {student.student.victory_count}{" "}
+                <span className="hidden lg:flex">Victorias</span>
+              </p>
+            </div>
+          )}
+        </div>
       </div>
 
       {showAvatar &&
@@ -99,23 +123,6 @@ const Step = (props: {
           <IconCrown className="flex lg:hidden" size={45} />
         </div>
       )}
-
-      {showUserInfo && (
-        <div className="glassmorphic dark:glassmorphic-dark dark:text-white flex flex-col items-center justify-center p-2 text-center text-xs lg:text-base h-16 shadow">
-          <p
-            className="m-0"
-            title={`${student.student.name} ${student.student.surname}`}
-          >
-            <b>{student.student.name}</b>
-          </p>
-          <p className="m-0 flex gap-1 items-center">
-            {" "}
-            <IconCrown className="text-yellow-500" size={15} />
-            {student.student.victory_count}{" "}
-            <span className="hidden lg:flex">Victorias</span>
-          </p>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/components/league/ui/ranking-component.tsx b/src/components/league/ui/ranking-component.tsx
@@ -66,12 +66,23 @@ const StudentComponent = ({
   );
 };
 
+/**
+ * Muestra la información de `student_number` estudiantes
+ * @param className clases normales de html, se puede agregar tailwind sin problema (a pesar que no sirva el autocompletado a veces)
+ * @param student_number cantidad de estudiantes maxima que puede mostrar el ranking
+ * @param offset cantidad de estudiantes a ignorar, se implemento para poner arriba el podio
+ * @param refresh_toggle es un booleano que se recibe desde el componente padre para saber cuando tiene que pedir los estudiantes
+ */
 const RankingList = ({
   className = "",
   student_number = 20,
+  offset = 0,
+  refresh_toggle,
 }: {
   className?: string;
   student_number?: number;
+  offset?: number;
+  refresh_toggle: boolean;
 }) => {
   const SKELETON_RANKING_USERS_COUNT = 5;
 
@@ -92,7 +103,10 @@ const RankingList = ({
 
   const handlerGetRankingStudents = async () => {
     try {
-      const response = await getRankingStudents({ student_number });
+      const response = await getRankingStudents({
+        student_number: student_number,
+        offset,
+      });
 
       setStudents(response);
     } catch {
@@ -104,21 +118,28 @@ const RankingList = ({
 
   useEffect(() => {
     handlerGetRankingStudents();
-  }, []);
+  }, [refresh_toggle]);
 
   return (
     <div className={`flex flex-col gap-2 ${className}`}>
       {students.map((s, i) => {
         return (
-          <StudentComponent skeleton={loading} student={s} key={i} pos={i} />
+          <StudentComponent
+            skeleton={loading}
+            student={s}
+            key={i}
+            pos={i + offset}
+          />
         );
       })}
     </div>
   );
 };
 
-export default {
+const exp = {
   RankingContainer,
   Padding,
   RankingList,
 };
+
+export default exp;
diff --git a/src/components/sign-up/sign-up-form.tsx b/src/components/sign-up/sign-up-form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState } from "react";
 import { Input } from "../shared/ui/input";
 import { Button } from "../shared/ui/button";
diff --git a/src/controllers/student.controller.ts b/src/controllers/student.controller.ts
@@ -75,12 +75,14 @@ export async function getPodiumStudents(): Promise<Student[]> {
 
 export async function getRankingStudents({
   student_number,
+  offset = 0,
 }: {
   student_number: number;
+  offset?: number;
 }): Promise<Student[]> {
   const res = await fetch(
     new URL(
-      `/students?limit=${student_number}&ordercol=victory_count&subordercol=matches_count&subasc=1`,
+      `/students?limit=${student_number}&ordercol=victory_count&subordercol=matches_count&subasc=1&offset=${offset}`,
       process.env.NEXT_PUBLIC_BACKEND_URL,
     ),
   );
diff --git a/src/lib/supabase/channel_subscribe.ts b/src/lib/supabase/channel_subscribe.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client";`
	`2`	`+`
`1`	`3`	`import { useState } from "react";`
`2`	`4`	`import { Input } from "../shared/ui/input";`
`3`	`5`	`import { Button } from "../shared/ui/button";`