Feat/update ranking scoreboard #96

.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

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 updateInterval segundos para actualizar la información, 0 para no actualizar la información
+ */
+export function Podium({ updateInterval = 0 }: { updateInterval?: number }) {
   const [loading, setloading] = useState<boolean>(true);
 
   const [students, setStudents] = useState<
@@ -38,7 +42,16 @@ export function Podium() {
   useEffect(() => {
     handlerGetPodiumStudents();
     setloading(false);
-  }, []);
+
+    if (updateInterval > 0) {
+      const interval = setInterval(() => {
+        console.log("actualizado");
+        handlerGetPodiumStudents();
+      }, updateInterval * 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [updateInterval]);
 
   useEffect(() => {
     setSortedStudents(() => {
@@ -74,7 +87,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 +118,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>
                 ),

src/components/league/sections/ranking.tsx

@@ -1,12 +1,18 @@
 import RankingComponent from "../ui/ranking-component";
+import { Podium } from "./podium";
 
 export const Ranking = () => {
   return (
     <div>
+      <Podium updateInterval={15} />
       <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}
+            updateInterval={15}
+          />
         </RankingComponent.Padding>
       </RankingComponent.RankingContainer>
     </div>

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>
   );
 };

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 updateInterval segundos para actualizar la información, 0 para no actualizar la información
+ */
 const RankingList = ({
   className = "",
   student_number = 20,
+  offset = 0,
+  updateInterval = 0,
 }: {
   className?: string;
   student_number?: number;
+  offset?: number;
+  updateInterval?: number;
 }) => {
   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,36 @@ const RankingList = ({
 
   useEffect(() => {
     handlerGetRankingStudents();
-  }, []);
+
+    if (updateInterval > 0) {
+      const interval = setInterval(() => {
+        handlerGetRankingStudents();
+      }, updateInterval * 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [updateInterval]);
 
   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;

src/controllers/student.controller.ts

@@ -31,12 +31,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,
     ),
   );