heroes-of-chess-components 0.6.55 → 0.6.57

package/dist/lib/HocComponents/HRaceLive/HRaceLive.tsx

@@ -0,0 +1,400 @@
+import { useEffect, useState, useMemo } from "react";
+import styled, { keyframes } from "styled-components";
+import { HocIconBlueCar, HocIconLightBlueCar, HocIconRedCar, HocIconYellowCar } from "../../assets/race";
+import HBox from "../HBox/HBox";
+import HTitle from "../HTitle/HTitle";
+import HText from "../HText/HText";
+
+// ========== TYPES ==========
+
+interface RacePlayer {
+  idCustomer: {
+    _id?: string;
+    profileInfo?: {
+      name?: string;
+      lastName?: string;
+    };
+  } | string;
+  points: number;
+  username?: string;
+}
+
+interface HRaceLiveProps {
+  /** Lista de jugadores/posiciones */
+  positions: RacePlayer[];
+  /** Tiempo restante en segundos o formato "MM:SS" */
+  timeRemaining?: number | string;
+  /** ID del customer actual (para resaltar en modo compact) */
+  currentCustomerId?: string;
+  /** Modo de visualización: 'full' muestra todos, 'compact' muestra top 3 + yo */
+  mode?: "full" | "compact";
+  /** Tamaño de los autos */
+  carSize?: number;
+  /** Tamaño del texto */
+  fontSize?: number;
+  /** Mostrar título "Classifica" */
+  showTitle?: boolean;
+  /** Altura de cada fila */
+  rowHeight?: number;
+  /** Mostrar mensaje cuando no hay participantes */
+  emptyMessage?: string;
+}
+
+// ========== ANIMATIONS ==========
+
+const moveCar = keyframes`
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-2px); }
+`;
+
+// ========== STYLED COMPONENTS ==========
+
+const RaceTrackContainer = styled(HBox)<{ $isLast: boolean }>`
+  ${({ $isLast }) => ($isLast ? "" : "border-bottom: 5px dashed #7025BE")};
+  position: relative;
+  overflow: hidden;
+`;
+
+const RaceFinish = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  width: auto;
+  min-width: 40px;
+  flex-shrink: 0;
+`;
+
+const FinishSquare = styled.div<{ $isBlack: boolean }>`
+  width: 20px;
+  height: 20px;
+  background-color: ${({ $isBlack }) => ($isBlack ? "black" : "white")};
+`;
+
+const CarWrapper = styled.div<{ $mode: "full" | "compact" }>`
+  position: absolute;
+  left: ${({ $mode }) => ($mode === "full" ? "0" : "10px")};
+  top: 50%;
+  transform: translateY(-50%);
+  width: ${({ $mode }) =>
+    $mode === "full" ? "calc(100% - 60px)" : "calc(100% - 80px)"};
+  height: 100%;
+  pointer-events: none;
+`;
+
+const CarImage = styled.div<{
+  $progress: number;
+  $zIndex: number;
+  $mode: "full" | "compact";
+}>`
+  display: flex;
+  align-items: center;
+  gap: ${({ $mode }) => ($mode === "full" ? "8px" : "4px")};
+  animation: ${moveCar} 1s ease-in-out infinite;
+  position: absolute;
+  left: ${({ $progress, $mode }) =>
+    $mode === "full" ? `calc(${$progress}% - 20px)` : `${$progress}%`};
+  top: 50%;
+  transition: left 0.5s ease-out;
+  z-index: ${({ $zIndex }) => $zIndex};
+  flex-direction: row;
+
+  img {
+    width: ${({ $mode }) => ($mode === "full" ? "120px" : "60px")};
+    height: auto;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+  }
+`;
+
+const UsernameLabel = styled.span<{ $fontSize: number }>`
+  white-space: nowrap;
+  font-size: ${({ $fontSize }) => $fontSize}px;
+  font-weight: 600;
+  color: #7025be;
+  max-width: ${({ $fontSize }) => $fontSize * 5}px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+// ========== COMPONENT ==========
+
+export const HRaceLive: React.FC<HRaceLiveProps> = ({
+  positions,
+  timeRemaining,
+  currentCustomerId,
+  mode = "full",
+  carSize = 120,
+  fontSize = 18,
+  showTitle = false,
+  rowHeight = 70,
+  emptyMessage = "No hay participantes en la carrera",
+}) => {
+  const [renderPositions, setRenderPositions] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!positions?.length) {
+      setRenderPositions([]);
+      return;
+    }
+
+    // Ordenar por puntos
+    const sorted = [...positions].sort((a, b) => b.points - a.points);
+
+    // Determinar qué jugadores mostrar según el modo
+    let playersToShow = [];
+
+    if (mode === "compact" && currentCustomerId) {
+      const myPosition = sorted.findIndex((p) => {
+        const playerId =
+          typeof p.idCustomer === "string"
+            ? p.idCustomer
+            : p.idCustomer?._id;
+        return String(playerId) === String(currentCustomerId);
+      });
+
+      if (myPosition < 3) {
+        playersToShow = sorted.slice(0, 3);
+      } else {
+        playersToShow = [...sorted.slice(0, 3), sorted[myPosition]];
+      }
+    } else {
+      playersToShow = sorted;
+    }
+
+    // Asignar autos y normalizar datos
+    const mapped = playersToShow.map((point) => {
+      const realPosition = sorted.findIndex((p) => {
+        const pid1 =
+          typeof p.idCustomer === "string" ? p.idCustomer : p.idCustomer?._id;
+        const pid2 =
+          typeof point.idCustomer === "string"
+            ? point.idCustomer
+            : point.idCustomer?._id;
+        return String(pid1) === String(pid2);
+      });
+
+      let carIcon;
+      if (realPosition === 0) {
+        carIcon = HocIconRedCar;
+      } else if (realPosition === 1) {
+        carIcon = HocIconLightBlueCar;
+      } else if (realPosition === 2) {
+        carIcon = HocIconBlueCar;
+      } else {
+        carIcon = HocIconYellowCar;
+      }
+
+      const playerId =
+        typeof point.idCustomer === "string"
+          ? point.idCustomer
+          : point.idCustomer?._id;
+      const isMe =
+        currentCustomerId && String(playerId) === String(currentCustomerId);
+
+      // Obtener username
+      let username = "Usuario";
+      if (point.username) {
+        username = point.username;
+      } else if (
+        typeof point.idCustomer !== "string" &&
+        point.idCustomer?.profileInfo
+      ) {
+        username = `${point.idCustomer.profileInfo.name || ""} ${
+          point.idCustomer.profileInfo.lastName || ""
+        }`.trim();
+      }
+
+      return {
+        ...point,
+        car: carIcon,
+        realPosition: realPosition + 1,
+        points: Math.max(0, point.points || 0),
+        isMe,
+        username,
+      };
+    });
+
+    setRenderPositions(mapped);
+  }, [positions, currentCustomerId, mode]);
+
+  const maxPoints = useMemo(() => {
+    if (!renderPositions.length) return 0;
+    return Math.max(...renderPositions.map((p) => p.points || 0), 1);
+  }, [renderPositions]);
+
+  const calculateProgress = (
+    playerPoints: number,
+    position: number,
+    totalPlayers: number
+  ) => {
+    const safePoints = Math.max(0, playerPoints || 0);
+    if (safePoints === 0 || maxPoints === 0) return 0;
+
+    const TOTAL_RACE_TIME = 120; // 2 minutos
+    let timeElapsed = 0;
+
+    // Convertir timeRemaining a segundos transcurridos
+    if (timeRemaining !== undefined && timeRemaining !== null) {
+      if (typeof timeRemaining === "string") {
+        // Formato "MM:SS"
+        const [minutes, seconds] = timeRemaining.split(":").map(Number);
+        const remaining = minutes * 60 + seconds;
+        timeElapsed = Math.max(0, TOTAL_RACE_TIME - remaining);
+      } else {
+        // Número de segundos
+        timeElapsed = Math.max(0, TOTAL_RACE_TIME - timeRemaining);
+      }
+    } else {
+      timeElapsed = TOTAL_RACE_TIME / 2;
+    }
+
+    // Calcular progreso máximo según tiempo transcurrido
+    const maxProgressByTime =
+      mode === "full"
+        ? Math.min(100, 5 + (timeElapsed / TOTAL_RACE_TIME) * 95)
+        : Math.min(90, 5 + (timeElapsed / TOTAL_RACE_TIME) * 85);
+
+    // Calcular progreso relativo del jugador
+    const relativeProgress = (safePoints / maxPoints) * 100;
+
+    // Penalización por posición
+    const positionPenalty =
+      totalPlayers > 1 ? (position / totalPlayers) * (mode === "full" ? 5 : 3) : 0;
+
+    // Progreso final
+    const scaledProgress = (relativeProgress / 100) * maxProgressByTime;
+    const finalProgress = Math.max(0, scaledProgress - positionPenalty);
+
+    return finalProgress;
+  };
+
+  if (!renderPositions?.length) {
+    return mode === "full" ? (
+      <HBox padding="20px" justify="center">
+        <HTitle text={emptyMessage} color="purpleMedium" as="h4" />
+      </HBox>
+    ) : null;
+  }
+
+  const showEllipsis = mode === "compact" && renderPositions.length === 4;
+
+  return (
+    <HBox
+      direction="column"
+      width="100%"
+      overflowX="hidden"
+      overflowY="auto"
+      background={"shadePurpleLight"}
+      justify="flex-start"
+      gap="0"
+      padding={mode === "full" ? "10px 0" : "10px"}
+      borderRadius={mode === "compact" ? "10px" : "0"}
+      margin={mode === "compact" ? "20px 0 0 0" : "0"}
+    >
+      {showTitle && (
+        <HTitle as="h3" margin="0 0 10px 0" padding="0 10px">
+          Classifica
+        </HTitle>
+      )}
+
+      {renderPositions.map((point, index) => {
+        const progress = calculateProgress(
+          point.points,
+          index,
+          renderPositions.length
+        );
+
+        return (
+          <div
+            key={`race-${point.realPosition}-${index}`}
+            style={{ width: "100%" }}
+          >
+            {showEllipsis && index === 3 && (
+              <HText textAlign="center" margin="5px 0" fontSize="18px">
+                ...
+              </HText>
+            )}
+
+            <HBox
+              align="center"
+              justify="space-between"
+              width="100%"
+              margin="0"
+              gap="8px"
+              padding="0 10px"
+              background={
+                point.isMe ? "rgba(255, 215, 0, 0.2)" : "transparent"
+              }
+              borderRadius={point.isMe ? "8px" : "0"}
+            >
+              {/* Número de posición */}
+              <div
+                style={{
+                  minWidth: mode === "full" ? "50px" : "40px",
+                  flexShrink: 0,
+                }}
+              >
+                <HTitle
+                  text={point.realPosition}
+                  background={
+                    point.realPosition === 1 ? "shadeGold" : "purpleMedium"
+                  }
+                  color={
+                    point.realPosition === 1 ? "purpleMedium" : "purpleLight"
+                  }
+                  textAlign="center"
+                  borderRadius={"8px"}
+                  as={mode === "full" ? "h1" : "h3"}
+                  width={mode === "full" ? "40px" : "35px"}
+                  padding={mode === "full" ? "5px" : "3px"}
+                />
+              </div>
+
+              {/* Pista de carrera */}
+              <RaceTrackContainer
+                justify="flex-start"
+                align="center"
+                height={`${rowHeight}px`}
+                gap="0"
+                width="100%"
+                $isLast={index + 1 === renderPositions.length}
+                padding="0"
+              >
+                <CarWrapper $mode={mode}>
+                  <CarImage
+                    $progress={progress}
+                    $zIndex={renderPositions.length - index}
+                    $mode={mode}
+                  >
+                    <UsernameLabel $fontSize={fontSize}>
+                      {point.username}
+                    </UsernameLabel>
+                    <img
+                      src={point.car}
+                      alt={`${point.username} car`}
+                      draggable="false"
+                    />
+                  </CarImage>
+                </CarWrapper>
+              </RaceTrackContainer>
+
+              {/* Meta con patrón de cuadros */}
+              <RaceFinish>
+                {[...Array(6)].map((_, i) => (
+                  <FinishSquare
+                    key={`finish-${i}`}
+                    $isBlack={
+                      index % 2 === 0
+                        ? i % 2 !== Math.floor(i / 2) % 2
+                        : i % 2 === Math.floor(i / 2) % 2
+                    }
+                  />
+                ))}
+              </RaceFinish>
+            </HBox>
+          </div>
+        );
+      })}
+    </HBox>
+  );
+};
+
+export default HRaceLive;

package/dist/lib/HocComponents/HRaceLive/index.ts

@@ -0,0 +1,4 @@
+import HRaceLive from "./HRaceLive";
+
+export { HRaceLive };
+export default HRaceLive;

package/dist/lib/HocComponents/index.js

@@ -42,4 +42,5 @@ import { HNewsItem } from "./HNewsItem/HNewsItem";
 import { ErrorBoundary, ErrorScreen, ErrorTester } from "./HErrorBoundary";
 import HTrafficLight from "./HTrafficLight/HTrafficLight.tsx";
 import HRaceTable from "./HRaceTable/HRaceTable.tsx";
-export { HBackground, HBlackBack, HBox, HButton, HCalendar, HCalendarStyled, HDropdown, HInput, HRadio, HSearchInput, HTitle, HTabs, HCoinLabel, HCardLayout, HModal, HModalSecurityCode, HPopUpContainer, HPopUp, HCircularButton, HCircularTextButton, HToggleButton, HLoaderSpinner, HLogin, HPagination, HText, HInputArea, HVideoPlayerReact, HAccordion, HSlider, ClientMyReservationsComponent, ClientCalendarComponent, HModalData, HScoreBar, HProgressBar, HLevelUpAnimation, HToggleButtonCustom, HInitBackgroundAnimation, HTable, HNews, HNewsItem, HTrafficLight, HRaceTable, ErrorBoundary, ErrorScreen, ErrorTester };
+import HRaceLive from "./HRaceLive/HRaceLive.tsx";
+export { HBackground, HBlackBack, HBox, HButton, HCalendar, HCalendarStyled, HDropdown, HInput, HRadio, HSearchInput, HTitle, HTabs, HCoinLabel, HCardLayout, HModal, HModalSecurityCode, HPopUpContainer, HPopUp, HCircularButton, HCircularTextButton, HToggleButton, HLoaderSpinner, HLogin, HPagination, HText, HInputArea, HVideoPlayerReact, HAccordion, HSlider, ClientMyReservationsComponent, ClientCalendarComponent, HModalData, HScoreBar, HProgressBar, HLevelUpAnimation, HToggleButtonCustom, HInitBackgroundAnimation, HTable, HNews, HNewsItem, HTrafficLight, HRaceTable, HRaceLive, ErrorBoundary, ErrorScreen, ErrorTester };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroes-of-chess-components",
-  "version": "0.6.55",
+  "version": "0.6.57",
   "description": "Reusable React Components for Heroes of Chess Apps",
   "type": "module",
   "main": "dist/index.js",