fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

package/packages/event-game-play/src/components/Variants/Standard/EventGameStandardVariant.styles.js

@@ -1,373 +0,0 @@
-const i = (e) => ({
-  // Mobile headline with image background
-  mobileHeadlineWithImage: {
-    display: e.isMobile ? "flex" : "none",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    gap: "10px",
-    backgroundImage: `url(${e.finalImage})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    borderTopLeftRadius: "5px",
-    borderTopRightRadius: "5px",
-    position: "relative",
-    minHeight: "210px",
-    overflow: "hidden",
-    height: "auto",
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      background: e.imageBackgroundGradient,
-      borderTopLeftRadius: "5px",
-      borderTopRightRadius: "5px"
-    }
-  },
-  // Mobile headline content
-  mobileHeadlineContent: {
-    zIndex: 1,
-    height: "100%",
-    p: e.spacingScale.xl,
-    gap: e.spacingScale["2xl"],
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between"
-  },
-  // Mobile headline without image
-  mobileHeadlineWithoutImage: {
-    display: e.isMobile ? "flex" : "none",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-    gap: e.spacingScale["2xl"]
-  },
-  // Headline typography (mobile with image)
-  headlineTypographyMobileImage: {
-    fontWeight: 500,
-    lineHeight: "166%",
-    letterSpacing: "1px",
-    fontSize: "0.75em",
-    color: e.darkTextColor,
-    opacity: "70%",
-    textTransform: "uppercase",
-    fontFamily: e.fontFamilySecondary,
-    textAlign: "center"
-  },
-  // Headline typography (mobile without image & desktop)
-  headlineTypography: {
-    fontWeight: 500,
-    lineHeight: "166%",
-    letterSpacing: "1px",
-    textTransform: "uppercase",
-    fontSize: "0.75em",
-    color: e.secondaryColor,
-    opacity: e.opacity,
-    fontFamily: e.fontFamilySecondary,
-    textAlign: e.isMobile ? "center" : "left"
-  },
-  // Headline typography (desktop centered)
-  headlineTypographyDesktop: {
-    fontWeight: 500,
-    lineHeight: "166%",
-    letterSpacing: "1px",
-    textTransform: "uppercase",
-    fontSize: "0.75em",
-    color: e.secondaryColor,
-    opacity: e.opacity,
-    fontFamily: e.fontFamilySecondary
-  },
-  // Content container
-  contentContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: e.spacingScale["3xs"]
-  },
-  // Title typography (mobile with image)
-  titleTypographyMobileImage: {
-    fontWeight: 700,
-    lineHeight: "133%",
-    fontSize: "1.5em",
-    letterSpacing: "0.15px",
-    color: e.darkTextColor,
-    fontFamily: e.fontFamilyPrimary,
-    textAlign: "center"
-  },
-  // Title typography (mobile without image & desktop responsive)
-  titleTypography: {
-    fontWeight: 700,
-    lineHeight: "133%",
-    letterSpacing: "0px",
-    fontSize: "1.5em",
-    color: e.textColor,
-    fontFamily: e.fontFamilyPrimary,
-    textAlign: e.isMobile ? "center" : "left"
-  },
-  // Title typography (desktop centered)
-  titleTypographyDesktop: {
-    fontWeight: 700,
-    lineHeight: "133%",
-    letterSpacing: "0px",
-    fontSize: "1.5em",
-    color: e.textColor,
-    fontFamily: e.fontFamilyPrimary
-  },
-  // Description typography (mobile with image)
-  descriptionTypographyMobileImage: {
-    fontWeight: 400,
-    lineHeight: "140%",
-    fontSize: "1.25em",
-    letterSpacing: "0.15px",
-    color: e.darkTextColor,
-    opacity: "70%",
-    fontFamily: e.fontFamilyPrimary,
-    textAlign: "center"
-  },
-  // Description typography (mobile without image & desktop responsive)
-  descriptionTypography: {
-    fontWeight: 400,
-    lineHeight: "140%",
-    letterSpacing: "0.15px",
-    fontSize: "1.25em",
-    color: e.secondaryColor,
-    opacity: e.opacity,
-    fontFamily: e.fontFamilyPrimary,
-    textAlign: e.isMobile ? "center" : "left"
-  },
-  // Description typography (desktop centered)
-  descriptionTypographyDesktop: {
-    fontWeight: 400,
-    lineHeight: "140%",
-    letterSpacing: "0.15px",
-    fontSize: "1.25em",
-    color: e.secondaryColor,
-    opacity: e.opacity,
-    fontFamily: e.fontFamilyPrimary
-  },
-  // Image container (left position)
-  imageContainerLeft: {
-    display: e.isMobile ? "none" : "block",
-    flex: "0.3",
-    overflow: "hidden",
-    height: "auto",
-    position: "relative",
-    minHeight: "auto",
-    backgroundImage: `url(${e.finalImage})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center center",
-    backgroundRepeat: "no-repeat",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // Image container (right position)
-  imageContainerRight: {
-    display: e.isMobile ? "none" : "block",
-    flex: "0.3",
-    overflow: "hidden",
-    height: "auto",
-    position: "relative",
-    minHeight: "auto",
-    backgroundImage: `url(${e.finalImage})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center center",
-    backgroundRepeat: "no-repeat",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // Main content area
-  mainContentArea: {
-    flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
-    display: "flex",
-    flexDirection: "column",
-    px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-    pt: e.spacingScale.lg,
-    pb: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-    gap: e.isExtraSmall ? e.spacingScale.sm : e.spacingScale.md
-  },
-  // Desktop headline container
-  desktopHeadlineContainer: {
-    display: e.isMobile ? "none" : "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    gap: e.spacingScale["2xl"],
-    textAlign: "center"
-  },
-  // Lead collection container
-  leadCollectionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
-  },
-  // Lead question container
-  leadQuestionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: e.isExtraSmall ? e.spacingScale.lg : e.spacingScale.md
-  },
-  // Lead content container
-  leadContentContainer: {
-    borderRadius: e.borderRadius.md,
-    p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
-    gap: e.spacingScale.md,
-    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-    display: "flex",
-    flexDirection: "column",
-    backdropFilter: "blur(4px)"
-  },
-  // Question area
-  questionArea: {
-    display: "flex",
-    flexDirection: "column",
-    p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
-  },
-  // Question container
-  questionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: e.isExtraSmall ? e.spacingScale.lg : e.spacingScale.md
-  },
-  // Question content container
-  questionContentContainer: {
-    borderRadius: e.borderRadius.md,
-    p: e.spacingScale.md,
-    gap: e.spacingScale.md,
-    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-    display: "flex",
-    flexDirection: "column",
-    backdropFilter: "blur(4px)",
-    position: "relative",
-    zIndex: 2
-  },
-  // Footer container
-  footerContainer: {
-    display: "flex",
-    flexDirection: e.isExtraSmall ? "column" : "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: e.spacingScale.lg
-  },
-  // Footer container (no logo)
-  footerContainerNoLogo: {
-    display: "flex",
-    flexDirection: e.isExtraSmall ? "column" : "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    gap: e.spacingScale.lg
-  },
-  // Presented by mobile
-  presentedByMobile: {
-    display: e.isExtraSmall ? "block" : "none"
-  },
-  // Pagination container
-  paginationContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: e.spacingScale.md
-  },
-  // Navigation container
-  navigationContainer: {
-    display: "flex",
-    gap: e.spacingScale.md,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  // Game State Styles
-  gameStateContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    textAlign: "center",
-    padding: `${e.spacingScale.xs} ${e.spacingScale.sm}`,
-    gap: e.spacingScale["3xs"]
-  },
-  stateTitle: {
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "1.5em",
-    fontWeight: 700,
-    color: e.textColor,
-    lineHeight: 1.3
-  },
-  stateDescription: {
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "1.25em",
-    letterSpacing: "0.15px",
-    fontWeight: 400,
-    color: e.secondaryColor,
-    lineHeight: 1.4,
-    opacity: e.opacity
-  },
-  liveIndicatorContainer: {
-    display: "flex",
-    alignItems: "center",
-    gap: e.spacingScale.xs,
-    marginTop: e.spacingScale.xs
-  },
-  liveIndicator: {
-    width: "12px",
-    height: "12px",
-    borderRadius: "50%",
-    backgroundColor: e.dangerColor,
-    animation: "pulse 2s infinite",
-    "@keyframes pulse": {
-      "0%": {
-        opacity: 1,
-        transform: "scale(1)"
-      },
-      "50%": {
-        opacity: 0.7,
-        transform: "scale(1.1)"
-      },
-      "100%": {
-        opacity: 1,
-        transform: "scale(1)"
-      }
-    }
-  },
-  liveText: {
-    fontFamily: e.fontFamilySecondary,
-    fontSize: "0.875em",
-    color: e.dangerColor,
-    fontWeight: 600,
-    textTransform: "uppercase",
-    letterSpacing: "0.5px"
-  },
-  closedStateHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: e.spacingScale.sm,
-    flexWrap: "wrap"
-  },
-  // Match Result Badge Styles (like prediction badges)
-  matchResultBadge: {
-    display: "flex",
-    alignItems: "center",
-    gap: e.spacingScale.xs,
-    fontSize: "0.75em",
-    padding: "2px 6px",
-    minHeight: "20px",
-    borderRadius: e.borderRadius.sm,
-    border: `1px solid ${e.textColor}20`,
-    backgroundColor: e.textColor + "10",
-    width: "fit-content"
-  },
-  matchResultTeamLogo: {
-    width: e.isExtraSmall ? "16px" : "20px",
-    height: e.isExtraSmall ? "16px" : "20px",
-    borderRadius: "50%",
-    overflow: "hidden",
-    flexShrink: 0
-  },
-  matchResultScoreText: {
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.75em",
-    fontWeight: 600,
-    color: e.textColor,
-    lineHeight: 1
-  }
-});
-export {
-  i as createStyles
-};

package/packages/event-game-play/src/components/Variants/Standard/FinishedGame/EventGameStandardFinishedGame.js

@@ -1,219 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as a, Typography as n } from "@mui/joy";
-import { useInternalTheme as w, isMobile as L, isExtraSmall as O, useColors as t, useFontFamily as f, useCornerRadius as q, useBorderSize as z, useSpacingScale as U, useImageBackgroundGradient as $ } from "../../../../../../common/src/functions/theme.js";
-import { hexToRgb as j, stripHtmlTags as g } from "../../../../../../common/src/functions/helpers.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { WidgetTemplate as p } from "../../../../../../common/src/enums/enums.js";
-import h from "../../../../../../common/src/components/Rules.js";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import { useImageVariant as J } from "../../../../../../common/src/hooks/useImageVariant.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import K from "../../../Shared/MainCard.js";
-import { createStyles as Q } from "./EventGameStandardFinishedGame.styles.js";
-import X from "../../../Shared/FinishedGameWrapper/FinishedGameWrapper.js";
-import Y from "../../../Shared/Leaderboard/LeaderboardComponent.js";
-import Z from "../../../Shared/Leaderboard/LeaderboardPagination.js";
-import { useEventRankings as _ } from "../../../../hooks/useEventRankings.js";
-import { useTranslation as ee } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const Ce = (i) => {
-  const c = w(), s = J(
-    {
-      images: i.eventGame.images,
-      imagePlaceholder: i.defaultImagePlaceholderUrl ? i.defaultImagePlaceholderUrl : ""
-    },
-    p.STANDARD
-  ), { t: d } = ee(), C = null, m = L(), u = O(), o = i.imagePosition || "left", v = t().textPrimary, P = t().palette.primary.plainColor, b = t().textColor, S = f().secondary, T = f().primary, G = t().surface, D = `rgba(${j(t().surfaceVariant)}, 0.5)`, I = t().onSurface, k = q(), R = z().size, x = U(), A = `rgba(${j(
-    t().surfaceVariant || ""
-  )}, 0.5)`, M = $(
-    p.STANDARD
-  ), V = "60%", F = t().textColor, { rankings: B, pagination: l, loading: H, goToNextPage: N, goToPreviousPage: E } = _(i.eventGame.id, i.sdk), r = Q({
-    finalImage: s,
-    spacingScale: x,
-    borderRadius: k,
-    fontFamilyPrimary: T,
-    fontFamilySecondary: S,
-    textPrimary: v,
-    primaryColor: P,
-    textColor: b,
-    bgcolor: D,
-    buttonBgColor: G,
-    onSurfaceColor: I,
-    borderSize: R,
-    surfaceVariant: A,
-    brandingColors: C,
-    imagePosition: o,
-    successColor: c.colorSchemes.light.palette.success.plainColor,
-    dangerColor: c.colorSchemes.light.palette.danger.plainColor,
-    onPrimaryColor: c.colorSchemes.light.palette.primary.onPrimary,
-    isMobile: m,
-    imageBackgroundGradient: M,
-    darkTextColor: c.colorSchemes.dark.textColor,
-    opacity: V,
-    secondaryColor: F,
-    isExtraSmall: u
-  }), y = () => /* @__PURE__ */ e.jsxs(a, { sx: r.mainContentArea, children: [
-    !m && /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsx(a, { sx: r.desktopHeadlineContainer, children: /* @__PURE__ */ e.jsxs(
-      a,
-      {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center"
-        },
-        children: [
-          /* @__PURE__ */ e.jsxs(
-            a,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: x["3xs"]
-              },
-              children: [
-                /* @__PURE__ */ e.jsx(
-                  n,
-                  {
-                    level: "body-sm",
-                    sx: r.headlineTypographyDesktop,
-                    children: d("eventGame.headline")
-                  }
-                ),
-                /* @__PURE__ */ e.jsx(
-                  h,
-                  {
-                    rules: i.eventGame.rules || "",
-                    rulesDisplay: i.rulesDisplay,
-                    isOverlayVariant: !1
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(a, { sx: r.contentContainer, children: [
-            /* @__PURE__ */ e.jsx(n, { level: "h4", sx: r.titleTypographyDesktop, children: i.eventGame.title }),
-            /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypographyDesktop, children: g(i.eventGame.description) })
-          ] })
-        ]
-      }
-    ) }) }),
-    /* @__PURE__ */ e.jsx(a, { sx: r.questionArea, children: /* @__PURE__ */ e.jsx(a, { sx: r.questionContainer, children: /* @__PURE__ */ e.jsx(a, { sx: r.questionContentContainer, children: /* @__PURE__ */ e.jsx(
-      Y,
-      {
-        leaderboard: B,
-        userRanking: i.prediction,
-        showHeading: !i.showPredictionDetails,
-        loading: H
-      }
-    ) }) }) }),
-    l && (l.hasNextPage || l.hasPreviousPage) && /* @__PURE__ */ e.jsx(a, { sx: r.presentedByContainer, children: /* @__PURE__ */ e.jsx(
-      a,
-      {
-        sx: {
-          ...r.paginationContainer,
-          ml: u ? "0" : "auto"
-        },
-        children: /* @__PURE__ */ e.jsx(
-          Z,
-          {
-            hasNextPage: l.hasNextPage,
-            hasPreviousPage: l.hasPreviousPage,
-            onNextPage: N,
-            onPreviousPage: E,
-            isOverlayVariant: !1,
-            justifyContent: "flex-start"
-          }
-        )
-      }
-    ) })
-  ] }), W = () => m ? s ? /* @__PURE__ */ e.jsx(a, { sx: r.mobileHeadlineWithImage, children: /* @__PURE__ */ e.jsx(a, { sx: r.mobileHeadlineContent, children: /* @__PURE__ */ e.jsxs(a, { children: [
-    /* @__PURE__ */ e.jsxs(
-      a,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: x["3xs"]
-        },
-        children: [
-          /* @__PURE__ */ e.jsx(
-            n,
-            {
-              level: "body-sm",
-              sx: r.headlineTypographyMobileImage,
-              children: d("eventGame.headline")
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            h,
-            {
-              rules: i.eventGame.rules || "",
-              rulesDisplay: i.rulesDisplay,
-              isOverlayVariant: !1
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsxs(a, { sx: r.contentContainer, children: [
-      /* @__PURE__ */ e.jsx(n, { sx: r.titleTypographyMobileImage, children: i.eventGame.title }),
-      /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypographyMobileImage, children: g(i.eventGame.description) })
-    ] })
-  ] }) }) }) : /* @__PURE__ */ e.jsx(a, { sx: r.mobileHeadlineWithoutImage, children: /* @__PURE__ */ e.jsxs(a, { children: [
-    /* @__PURE__ */ e.jsxs(
-      a,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: x["3xs"]
-        },
-        children: [
-          /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: r.headlineTypography, children: d("eventGame.headline") }),
-          /* @__PURE__ */ e.jsx(
-            h,
-            {
-              rules: i.eventGame.rules || "",
-              rulesDisplay: i.rulesDisplay,
-              isOverlayVariant: !1
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsxs(a, { sx: r.contentContainer, children: [
-      /* @__PURE__ */ e.jsx(n, { level: "h4", sx: r.titleTypography, children: i.eventGame.title }),
-      /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTypography, children: g(i.eventGame.description) })
-    ] })
-  ] }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
-  return /* @__PURE__ */ e.jsx(K, { brandingBorderColor: null, children: i.showPredictionDetails ? /* @__PURE__ */ e.jsx(
-    X,
-    {
-      prediction: i.prediction,
-      game: i.eventGame,
-      resultsTabPanelSxProps: {
-        display: "flex",
-        flexDirection: m ? "column" : "row",
-        px: 0,
-        pb: 0,
-        pt: 0
-      },
-      children: /* @__PURE__ */ e.jsxs(a, { sx: r.scoreStateWrapperContainer, children: [
-        s && o === "left" && /* @__PURE__ */ e.jsx(a, { sx: r.imageContainerLeft, children: /* @__PURE__ */ e.jsx(a, { sx: r.imageSafeArea }) }),
-        y(),
-        s && o === "right" && /* @__PURE__ */ e.jsx(a, { sx: r.imageContainerRight, children: /* @__PURE__ */ e.jsx(a, { sx: r.imageSafeArea }) })
-      ] })
-    }
-  ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    W(),
-    s && o === "left" && /* @__PURE__ */ e.jsx(a, { sx: r.imageContainerLeft, children: /* @__PURE__ */ e.jsx(a, { sx: r.imageSafeArea }) }),
-    y(),
-    s && o === "right" && /* @__PURE__ */ e.jsx(a, { sx: r.imageContainerRight, children: /* @__PURE__ */ e.jsx(a, { sx: r.imageSafeArea }) })
-  ] }) });
-};
-export {
-  Ce as default
-};