fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

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

@@ -0,0 +1,373 @@
+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

@@ -0,0 +1,219 @@
+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
+};