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

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

@@ -0,0 +1,548 @@
+import "react";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { hexToRgb as t } 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 "../../../../../../../node_modules/react/jsx-runtime.js";
+import "@mui/joy";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+const y = (e) => {
+  var i, n, a;
+  return {
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      display: "flex",
+      flexDirection: "column",
+      p: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
+    },
+    // Question area
+    questionArea: {
+      display: "flex",
+      flexDirection: "column",
+      pt: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
+    },
+    // Question container
+    questionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.isMobile ? e.spacingScale.lg : e.spacingScale.md
+    },
+    // Question content container
+    questionContentContainer: {
+      borderRadius: e.borderRadius.md,
+      gap: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column"
+    },
+    // 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.isMobile ? 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: e.surfaceVariant,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)"
+    },
+    // CTA container
+    ctaContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    // CTA content wrapper
+    ctaContentWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: e.spacingScale.lg
+    },
+    // Thanks for playing text
+    thanksText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "1.25em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "120%",
+      letterSpacing: "0.15px"
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: e.isMobile ? "column" : "row",
+      gap: e.spacingScale.md
+    },
+    // Vote again button
+    voteAgainButton: {
+      display: "flex",
+      py: e.spacingScale.xs,
+      px: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      border: e.borderSize + " solid " + e.primaryColor,
+      bgcolor: e.buttonBgColor,
+      "&:hover": {
+        bgcolor: e.onSurfaceColor,
+        borderColor: e.primaryColor
+      },
+      fontSize: "0.8125em"
+    },
+    // Play again button content
+    playAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Play again icon
+    playAgainIcon: {
+      display: "flex",
+      width: "16px",
+      height: "16px",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Play again text
+    playAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.8125em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "22px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    },
+    // Presented by container
+    presentedByContainer: {
+      display: "flex",
+      flexDirection: e.isExtraSmall ? "column-reverse" : "row",
+      alignItems: "center",
+      px: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      gap: e.spacingScale.sm
+    },
+    // 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"
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale["2xl"],
+      textAlign: "center"
+    },
+    // 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",
+      flex: "0.5",
+      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: ((i = e.brandingColors) == null ? void 0 : i.secondaryColor) || 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: ((n = e.brandingColors) == null ? void 0 : n.contentColor) || 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: ((a = e.brandingColors) == null ? void 0 : a.secondaryColor) || 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
+    },
+    // Alternative title section
+    alternativeTitleSection: {
+      gap: "8px",
+      display: "flex",
+      justifyContent: "center"
+    },
+    // Alternative title text
+    alternativeTitleText: {
+      fontFamily: e.fontFamilyPrimary,
+      lineHeight: "150%",
+      letterSpacing: "0.15px",
+      fontWeight: 500,
+      fontSize: "1.25em",
+      textAlign: "center",
+      color: e.textColor
+    },
+    // Safe area indicator for Standard variant (30% width containers)
+    imageSafeArea: {
+      position: "relative",
+      zIndex: 2,
+      width: "165px",
+      // Safe area: 165px
+      height: "100%"
+      // Visual indicator for development (remove in production)
+      // border: "1px dashed rgba(255,255,255,0.7)",
+    },
+    // Leaderboard styles
+    leaderboardContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md
+    },
+    leaderboardTitle: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 700,
+      fontSize: "1.25em",
+      color: e.textColor,
+      textAlign: "center",
+      marginBottom: e.spacingScale.sm
+    },
+    leaderboardList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.xs
+    },
+    leaderboardItem: {
+      display: "flex",
+      alignItems: "center",
+      gap: e.spacingScale.sm,
+      padding: e.spacingScale.sm,
+      borderRadius: e.borderRadius.md,
+      backgroundColor: `rgba(${t(e.surfaceVariant)}, 0.3)`,
+      border: `1px solid rgba(${t(e.primaryColor)}, 0.1)`
+    },
+    leaderboardPosition: {
+      minWidth: "32px",
+      display: "flex",
+      justifyContent: "center"
+    },
+    positionText: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: e.textColor
+    },
+    leaderboardAvatar: {
+      width: "32px",
+      height: "32px",
+      fontSize: "0.875em",
+      fontWeight: 600,
+      backgroundColor: e.primaryColor,
+      color: e.onPrimaryColor
+    },
+    leaderboardInfo: {
+      flex: 1,
+      minWidth: 0
+    },
+    leaderboardName: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: e.textColor,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    leaderboardPoints: {
+      display: "flex",
+      alignItems: "center"
+    },
+    pointsText: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: e.textColor
+    },
+    // Table styles
+    tableContainer: {
+      overflowX: "auto",
+      borderRadius: e.borderRadius.md,
+      border: `1px solid rgba(${t(e.primaryColor)}, 0.2)`
+    },
+    table: {
+      backgroundColor: e.surfaceVariant,
+      "--TableCell-paddingX": "0.5rem",
+      "--TableCell-paddingY": "0.375rem",
+      fontSize: "1em",
+      cursor: "default",
+      "& > tbody > tr:hover": {
+        backgroundColor: "transparent"
+      },
+      "& > thead > tr > th": {
+        backgroundColor: e.surfaceVariant,
+        verticalAlign: "middle",
+        fontFamily: e.fontFamilyPrimary,
+        fontWeight: 600,
+        color: e.textPrimary
+      },
+      "& > tbody > tr > td": {
+        verticalAlign: "middle",
+        borderBottom: `1px solid rgba(${t(e.primaryColor)}, 0.1)`
+      },
+      "& > tbody > tr:last-child > td": {
+        borderBottom: "none"
+      }
+    },
+    headerCell: {
+      textAlign: "left",
+      padding: "0.375rem 0.5rem"
+    },
+    headerCellPosition: {
+      textAlign: "center",
+      padding: "0.375rem 0.5rem",
+      width: "10%"
+    },
+    headerCellName: {
+      textAlign: "left",
+      padding: "0.375rem 0.5rem",
+      width: "80%"
+    },
+    headerCellPoints: {
+      textAlign: "center",
+      padding: "0.375rem 0.5rem",
+      width: "10%"
+    },
+    tableCell: {
+      padding: "0.375rem 0.5rem"
+    },
+    tableCellPosition: {
+      padding: "0.375rem 0.5rem",
+      width: "10%",
+      textAlign: "center"
+    },
+    tableCellName: {
+      padding: "0.375rem 0.5rem",
+      width: "80%"
+    },
+    tableCellPoints: {
+      padding: "0.375rem 0.5rem",
+      width: "10%",
+      textAlign: "center"
+    },
+    userRow: {
+      backgroundColor: `rgba(${t(e.primaryColor)}, 0.1)`
+    },
+    nameCell: {
+      display: "flex",
+      alignItems: "center",
+      gap: e.spacingScale.xs
+    },
+    nameText: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: e.textColor,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    avatarIcon: {
+      fontSize: "1em",
+      color: e.onPrimaryColor
+    },
+    // Pagination styles
+    paginationContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: e.isExtraSmall ? "center" : "flex-end",
+      gap: e.spacingScale.sm
+    },
+    paginationButton: {
+      color: e.textColor,
+      "&:hover": {
+        backgroundColor: `rgba(${t(e.primaryColor)}, 0.1)`
+      },
+      "&:disabled": {
+        color: `rgba(${t(e.textColor)}, 0.3)`
+      }
+    },
+    paginationText: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: e.textColor,
+      textAlign: "center"
+    },
+    // Score state wrapper container
+    scoreStateWrapperContainer: {
+      display: "flex",
+      flexDirection: e.isMobile ? "column" : "row",
+      width: "100%"
+    }
+  };
+};
+export {
+  y as createStyles
+};

package/packages/event-game-play/src/components/Variants/Standard/ScoreState/EventGameStandardScoreState.js

@@ -0,0 +1,117 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as i } from "@mui/joy";
+import { useInternalTheme as B, isMobile as D, useColors as a, useFontFamily as x, useCornerRadius as M, useSpacingScale as E, useImageBackgroundGradient as k, useBorderSize as z } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as U } 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 y } from "../../../../../../common/src/enums/enums.js";
+import q from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import V from "../../../../../../common/src/components/Skeletons/Standard/StandardSkeleton.js";
+import { useImageVariant as w } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import N from "../../../Shared/MainCard.js";
+import { createStyles as O } from "./EventGameStandardScoreState.styles.js";
+import W from "../../../Shared/AlertMessage.js";
+import $ from "../../../Shared/Summary/PredictionSummary.js";
+import { useTranslation as H } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const de = (e) => {
+  const f = B(), c = w(
+    {
+      images: e.eventGame.images,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    y.STANDARD
+  ), { t: s } = H(), g = null, n = D(), h = e.imagePosition || "left", S = e.eventGame.status === "OPEN", C = (I) => {
+    console.log(`Edit prediction for fixture at index: ${I}`);
+  }, p = a().textColor, b = x().secondary, d = x().primary, m = M(), o = E(), j = `rgba(${U(a().surfaceVariant)}, 0.5)`, P = k(
+    y.STANDARD
+  ), T = "60%", u = a().textSecondary, l = a().secondaryContainer, A = z().size, r = O({
+    finalImage: c,
+    spacingScale: o,
+    borderRadius: m,
+    fontFamilyPrimary: d,
+    fontFamilySecondary: b,
+    textColor: p,
+    surfaceVariant: j,
+    brandingColors: g,
+    isMobile: n,
+    imageBackgroundGradient: P,
+    darkTextColor: f.colorSchemes.dark.textColor,
+    opacity: T,
+    secondaryColor: u
+  }), v = {
+    display: "flex",
+    py: n ? o.xs : o.sm,
+    px: n ? o.sm : o.md,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: m.xl,
+    border: A + " solid " + l,
+    bgcolor: l,
+    "&:hover": {
+      bgcolor: l,
+      opacity: 0.9
+    }
+  }, R = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  }, F = {
+    color: u,
+    fontFamily: d,
+    fontSize: n ? "0.750em" : "0.8125em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "22px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  }, G = () => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    e.isUnauthorized ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+      W,
+      {
+        variant: "error",
+        title: s("common.authentication.accessRequired"),
+        message: s("common.authentication.invalidOrMissingAuth")
+      }
+    ) }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(i, { sx: r.questionArea, children: /* @__PURE__ */ t.jsx(i, { sx: r.questionContainer, children: /* @__PURE__ */ t.jsx(i, { sx: r.questionContentContainer, children: S ? /* @__PURE__ */ t.jsx(
+      $,
+      {
+        fixtures: e.eventGame.fixtures,
+        prediction: e.prediction,
+        onEditPrediction: C,
+        onPredictionUpdate: e.onPredictionUpdate,
+        play: e.play,
+        view: "score",
+        onPlayResult: e.onPlayResult
+      }
+    ) : null }) }) }) }),
+    e.additionalCTA && /* @__PURE__ */ t.jsx(i, { sx: r.footerContainer, children: /* @__PURE__ */ t.jsx(
+      q,
+      {
+        additionalCTA: e.additionalCTA,
+        buttonStyle: v,
+        buttonContentStyle: R,
+        textStyle: F
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ t.jsx(N, { brandingBorderColor: null, children: /* @__PURE__ */ t.jsx(
+    V,
+    {
+      entity: { ...e.eventGame, labels: null },
+      headline: s("eventGame.headline"),
+      finalImage: c,
+      imagePosition: h,
+      rulesDisplay: e.rulesDisplay,
+      children: G()
+    }
+  ) });
+};
+export {
+  de as default
+};