fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

package/packages/event-game-play/src/components/Variants/Overlay/EventGameOverlayVariant.styles.js

@@ -1,213 +0,0 @@
-const t = (e) => ({
-  // Content container with backdrop
-  contentContainerWithBackdrop: {
-    borderRadius: e.mdBorderRadius,
-    p: e.spacingScale.md,
-    display: "flex",
-    flexDirection: "column",
-    gap: e.spacingScale.md,
-    backdropFilter: "blur(4px)",
-    position: "relative",
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: e.contentBgColor,
-      opacity: 0.5,
-      borderRadius: "inherit",
-      zIndex: 0
-    },
-    "& > *": {
-      position: "relative",
-      zIndex: 1
-    },
-    zIndex: 2
-  },
-  // Alternative title section
-  alternativeTitleSection: {
-    display: "flex",
-    gap: "8px",
-    alignItems: "flex-start",
-    justifyContent: "center"
-  },
-  // Alternative title text
-  alternativeTitleText: {
-    fontFamily: e.fontFamilyPrimary,
-    lineHeight: "150%",
-    letterSpacing: "0.15px",
-    fontWeight: 500,
-    fontSize: "1.25em",
-    textAlign: "center",
-    color: e.darkTextColor
-  },
-  // Bottom footer container
-  bottomFooterContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    flexDirection: e.isMobile ? "column-reverse" : "row",
-    gap: e.spacingScale.md
-  },
-  // Next button
-  nextButton: {
-    borderRadius: e.buttonRadius,
-    py: "10px",
-    px: "16px",
-    bgcolor: e.primaryColor,
-    color: e.onPrimaryColor,
-    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
-    transform: "scale(1)",
-    ml: { md: "auto" },
-    "&:hover": {
-      bgcolor: e.primaryColor,
-      transform: "scale(1.02)"
-    },
-    "&:active": {
-      color: e.onPrimaryColor,
-      transform: "scale(0.98)"
-    },
-    "&:disabled": {
-      bgcolor: e.primaryColor,
-      color: e.onPrimaryColor,
-      opacity: "34%"
-    },
-    "--Icon-color": e.onPrimaryColor,
-    fontSize: "0.9375em"
-  },
-  // Next button text
-  nextButtonText: {
-    fontFamily: e.fontFamilyPrimary,
-    fontWeight: 500,
-    fontSize: "0.9375em",
-    lineHeight: "24px",
-    letterSpacing: "0.46px",
-    textTransform: "uppercase",
-    color: e.onPrimaryColor,
-    gap: "8px",
-    display: "flex",
-    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 || e.darkTextColor,
-    lineHeight: 1.3
-  },
-  stateDescription: {
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "1.25em",
-    letterSpacing: "0.15px",
-    fontWeight: 400,
-    color: e.textColor || e.darkTextColor,
-    lineHeight: 1.4,
-    opacity: e.opacity || "60%"
-  },
-  liveIndicatorContainer: {
-    display: "flex",
-    alignItems: "center",
-    gap: e.spacingScale.xs,
-    marginTop: e.spacingScale.xs
-  },
-  liveIndicator: {
-    width: "12px",
-    height: "12px",
-    borderRadius: "50%",
-    backgroundColor: e.dangerColor || "#d32f2f",
-    animation: "pulse 2s infinite",
-    "@keyframes pulse": {
-      "0%": {
-        transform: "scale(0.95)",
-        boxShadow: `0 0 0 0 ${e.dangerColor || "#d32f2f"}40`
-      },
-      "70%": {
-        transform: "scale(1)",
-        boxShadow: `0 0 0 10px ${e.dangerColor || "#d32f2f"}00`
-      },
-      "100%": {
-        transform: "scale(0.95)",
-        boxShadow: `0 0 0 0 ${e.dangerColor || "#d32f2f"}00`
-      }
-    }
-  },
-  liveText: {
-    fontFamily: e.fontFamilyPrimary,
-    fontSize: "0.875em",
-    color: e.dangerColor || "#d32f2f",
-    fontWeight: 600,
-    textTransform: "uppercase",
-    letterSpacing: "0.5px"
-  },
-  closedStateHeader: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: e.spacingScale.sm,
-    flexWrap: "wrap"
-  },
-  // Match Result Badge Styles
-  matchResultBadge: {
-    display: "flex",
-    alignItems: "center",
-    gap: e.spacingScale.xs,
-    fontSize: "0.75em",
-    padding: "2px 6px",
-    borderRadius: e.mdBorderRadius,
-    border: `1px solid ${e.textColor || e.darkTextColor}20`,
-    backgroundColor: (e.textColor || e.darkTextColor) + "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 || e.darkTextColor,
-    lineHeight: 1
-  },
-  // 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
-  },
-  // Navigation container
-  navigationContainer: {
-    display: "flex",
-    gap: e.spacingScale.md,
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
-export {
-  t as createStyles
-};

package/packages/event-game-play/src/components/Variants/Overlay/FinishedGame/EventGameOverlayFinishedGame.js

@@ -1,130 +0,0 @@
-import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Box as o, Typography as l } from "@mui/joy";
-import { useSpacingScale as N, useInternalTheme as L, isMobile as W, isExtraSmall as w, useImageBackgroundGradient as z, useColors as t, useFontFamily as d, useCornerRadius as M, useBorderSize as A } from "../../../../../../common/src/functions/theme.js";
-import { hexToRgb as g, stripHtmlTags as H } 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 x } from "../../../../../../common/src/enums/enums.js";
-import U from "../../../../../../common/src/components/Rules.js";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import { useImageVariant as Y } from "../../../../../../common/src/hooks/useImageVariant.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import $ from "../../../../assets/default-quiz-bg.png.js";
-import q from "../../../../assets/default-quiz-bg-vertical.jpg.js";
-import { createStyles as J } from "./EventGameOverlayFinishedGame.styles.js";
-import K from "../../../Shared/FinishedGameWrapper/FinishedGameWrapper.js";
-import Q from "../../../Shared/Leaderboard/LeaderboardComponent.js";
-import X from "../../../Shared/Leaderboard/LeaderboardPagination.js";
-import { useEventRankings as Z } from "../../../../hooks/useEventRankings.js";
-import { useTranslation as _ } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const Ce = (r) => {
-  const i = N(), s = L(), { t: h } = _(), m = W(), u = w(), f = z(
-    x.OVERLAY
-  ), p = r.defaultImagePlaceholderUrl ? r.defaultImagePlaceholderUrl : m ? q : $, y = Y(
-    {
-      images: r.game.images,
-      imagePlaceholder: p
-    },
-    x.OVERLAY
-  ), P = t().textPrimary, C = t().palette.primary.plainColor, j = t().textColor, S = d().secondary, b = d().primary, v = t().surface, T = `rgba(${g(t().surfaceVariant)}, 0.5)`, I = t().onSurface, V = M(), k = A().size, R = `rgba(${g(
-    t().surfaceVariant || ""
-  )}, 0.5)`, B = t().textColor, E = "60%", { rankings: F, pagination: n, loading: D, goToNextPage: G, goToPreviousPage: O } = Z(r.game.id, r.sdk), a = J({
-    finalImage: y,
-    spacingScale: i,
-    borderRadius: V,
-    fontFamilyPrimary: b,
-    fontFamilySecondary: S,
-    textPrimary: P,
-    primaryColor: C,
-    textColor: j,
-    bgcolor: T,
-    buttonBgColor: v,
-    onSurfaceColor: I,
-    borderSize: k,
-    surfaceVariant: R,
-    imagePosition: "left",
-    successColor: s.colorSchemes.light.palette.success.plainColor,
-    dangerColor: s.colorSchemes.light.palette.danger.plainColor,
-    onPrimaryColor: s.colorSchemes.light.palette.primary.onPrimary,
-    isMobile: m,
-    imageBackgroundGradient: f,
-    darkTextColor: s.colorSchemes.dark.textColor,
-    opacity: E,
-    secondaryColor: B,
-    isExtraSmall: u
-  }), c = () => /* @__PURE__ */ e.jsxs(
-    o,
-    {
-      sx: { display: "flex", flexDirection: "column", gap: i.md },
-      children: [
-        /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsx(o, { sx: a.headlineSection, children: /* @__PURE__ */ e.jsx(o, { sx: a.headlineContent, children: /* @__PURE__ */ e.jsxs(o, { sx: a.headlineContentInner, children: [
-          /* @__PURE__ */ e.jsxs(
-            o,
-            {
-              sx: {
-                display: "flex",
-                alignItems: "center",
-                gap: i["3xs"]
-              },
-              children: [
-                /* @__PURE__ */ e.jsx(l, { level: "body-sm", sx: a.headlineText, children: h("eventGame.headline") }),
-                /* @__PURE__ */ e.jsx(
-                  U,
-                  {
-                    rules: r.game.rules || "",
-                    rulesDisplay: r.rulesDisplay,
-                    isOverlayVariant: !0
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(o, { sx: a.contentContainer, children: [
-            /* @__PURE__ */ e.jsx(l, { level: "h4", sx: a.titleText, children: r.game.title }),
-            r.game.description && /* @__PURE__ */ e.jsx(l, { level: "body-lg", sx: a.descriptionText, children: H(r.game.description) })
-          ] })
-        ] }) }) }) }),
-        /* @__PURE__ */ e.jsx(o, { sx: a.mainContentSection, children: /* @__PURE__ */ e.jsxs(o, { sx: a.contentContainerWithBackdrop, children: [
-          /* @__PURE__ */ e.jsx(
-            Q,
-            {
-              leaderboard: F,
-              userRanking: r.prediction,
-              showHeading: !r.showPredictionDetails,
-              isSplitVariant: !1,
-              loading: D
-            }
-          ),
-          n && (n.hasNextPage || n.hasPreviousPage) && /* @__PURE__ */ e.jsx(
-            X,
-            {
-              hasNextPage: n.hasNextPage,
-              hasPreviousPage: n.hasPreviousPage,
-              onNextPage: G,
-              onPreviousPage: O,
-              isOverlayVariant: !0,
-              justifyContent: "flex-end"
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: r.showPredictionDetails ? /* @__PURE__ */ e.jsx(o, { sx: a.mainContainerWithPredictionDetails, children: /* @__PURE__ */ e.jsx(
-    K,
-    {
-      prediction: r.prediction,
-      game: r.game,
-      isOverlayVariant: !0,
-      resultsTabPanelSxProps: {
-        py: i.lg,
-        px: i.xl
-      },
-      children: c()
-    }
-  ) }) : /* @__PURE__ */ e.jsx(o, { sx: a.mainContainer, children: c() }) });
-};
-export {
-  Ce as default
-};