fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersFixture.js

@@ -0,0 +1,79 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as i, Typography as S } from "@mui/joy";
+import { useColors as d, isExtraSmall as f, useCornerRadius as C, useFontFamily as h, useSpacingScale as E } from "../../../../../../common/src/functions/theme.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "react";
+import { useConstantContext as P } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import R from "./PlayersSelector.js";
+import { createStyles as F } from "./PlayersFixture.styles.js";
+import p from "../PointsDisplay/PointsDisplay.js";
+import { MatchQuizConstantsContext as T } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as L } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const v = (t) => {
+  const { t: r } = L(), a = d(), s = f(), m = C(), o = h(), c = E(), { points: x } = P(T), l = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : s, u = t.showPoints === void 0, n = F({
+    spacingScale: c,
+    borderRadius: m,
+    fontFamilyPrimary: o.primary,
+    fontFamilySecondary: o.secondary,
+    textPrimary: a.textPrimary,
+    textSecondary: a.textSecondary,
+    isExtraSmall: l
+  }), y = () => {
+    switch (t.market) {
+      case "PLAYER_SCORE":
+        return r("matchQuiz.fixtures.playerScoreFixtureTitle");
+      case "PLAYER_YELLOW_CARD":
+        return r("matchQuiz.fixtures.playerYellowCardFixtureTitle");
+      case "PLAYER_RED_CARD":
+        return r("matchQuiz.fixtures.playerRedCardFixtureTitle");
+      case "PLAYER_SCORE_FIRST_GOAL":
+        return r("matchQuiz.fixtures.playerScoreFirstGoalFixtureTitle");
+      case "PLAYER_SCORE_HATTRICK":
+        return r("matchQuiz.fixtures.playerScoreHattrickFixtureTitle");
+      case "PLAYER_SCORE_TWICE":
+        return r("matchQuiz.fixtures.playerScoreTwiceFixtureTitle");
+    }
+  };
+  return /* @__PURE__ */ e.jsxs(i, { sx: n.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      i,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        children: [
+          l ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(i, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(S, { level: "h3", sx: n.title, children: y() }),
+          /* @__PURE__ */ e.jsx(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: u && x.length > 0 && /* @__PURE__ */ e.jsx(
+            p,
+            {
+              market: t.market,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      R,
+      {
+        matchModel: t.matchModel,
+        onPlayerSelection: t.onPlayerSelection,
+        brandingPrimaryColor: t.brandingPrimaryColor,
+        prediction: t.prediction,
+        isSplitVariant: t.isSplitVariant,
+        useExtraSmallLayout: t.useExtraSmallLayout
+      }
+    )
+  ] });
+};
+export {
+  v as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersFixture.styles.js

@@ -0,0 +1,29 @@
+import { isMobile as e } from "../../../../../../common/src/functions/theme.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 "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+const p = (t) => {
+  const i = e();
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    title: {
+      fontFamily: t.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: i ? "1.125em" : "1.25em",
+      lineHeight: 1.2,
+      color: t.textPrimary,
+      textAlign: t.isExtraSmall ? "left" : "center"
+    }
+  };
+};
+export {
+  p as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersSelector.js

@@ -0,0 +1,213 @@
+import { j as o } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { memo as N, useState as d } from "react";
+import { Box as n, useTheme as E, Tabs as z, TabList as R, Tab as H, TabPanel as Q, Typography as _, FormControl as p, Checkbox as v } from "@mui/joy";
+import D from "../../../../../../../node_modules/@mui/icons-material/esm/PersonOutline.js";
+import { useColors as W, useCornerRadius as K, useFontFamily as V, useSpacingScale as $, isMobile as J, isExtraSmall as U } from "../../../../../../common/src/functions/theme.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { useConstantContext as X } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { createStyles as Y } from "./PlayersSelector.styles.js";
+import { MatchQuizConstantsContext as Z } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as q } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const w = N(({ player: t, isSelected: r, styles: i, handlePlayerSelection: m }) => {
+  var h;
+  return /* @__PURE__ */ o.jsx(
+    n,
+    {
+      sx: {
+        ...i.playerAvatar,
+        ...r ? i.selectedPlayerAvatar : {}
+      },
+      onClick: () => m(t.id),
+      title: t.name,
+      children: (h = t.assets) != null && h.headshot ? /* @__PURE__ */ o.jsx(
+        "img",
+        {
+          src: t.assets.headshot,
+          alt: t.name,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover"
+          }
+        }
+      ) : /* @__PURE__ */ o.jsx(
+        D,
+        {
+          sx: {
+            ...i.playerAvatarIcon,
+            ...r ? i.selectedPlayerAvatarIcon : {}
+          }
+        }
+      )
+    }
+  );
+});
+w.displayName = "PlayerAvatar";
+const xe = (t) => {
+  const r = W(), i = K(), m = V(), h = $(), F = J(), M = U(), x = E(), { t: f } = q(), { squads: S } = X(Z), T = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : M, [k, g] = d(t.prediction), [G, u] = d(t.prediction === "OWN_GOAL"), [A, b] = d(t.prediction === null), [c, y] = d("home"), [j, B] = d(0), a = Y({
+    spacingScale: h,
+    borderRadius: i,
+    fontFamilyPrimary: m.primary,
+    fontFamilySecondary: m.secondary,
+    textPrimary: r.textPrimary,
+    textSecondary: r.textSecondary,
+    neutralSoftBg: r.palette.neutral.softBg,
+    neutralOutlinedBorder: r.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: r.palette.neutral.plainHoverBg,
+    primary: t.brandingPrimaryColor || r.palette.primary.plainColor,
+    onPrimary: r.palette.primary.onPrimary,
+    isMobile: F,
+    isExtraSmall: T,
+    isSplitVariant: t.isSplitVariant || !1
+  }), C = (e) => {
+    u(!1), b(!1), g(e), t.onPlayerSelection(e);
+  }, I = (e) => {
+    e ? (g(null), b(!1), u(!0), t.onPlayerSelection("OWN_GOAL")) : (u(!1), t.onPlayerSelection(null));
+  }, O = (e) => {
+    e ? (g(null), u(!1), b(!0), t.onPlayerSelection(null)) : (b(!1), t.onPlayerSelection(null));
+  }, L = () => {
+    const e = c === "home" ? S.get(t.matchModel.homeTeam.id) : S.get(t.matchModel.awayTeam.id);
+    switch (j) {
+      case 0:
+        return (e == null ? void 0 : e.filter((l) => l.position === "forward")) || [];
+      case 1:
+        return (e == null ? void 0 : e.filter((l) => l.position === "midfielder")) || [];
+      case 2:
+        return (e == null ? void 0 : e.filter((l) => l.position === "defender")) || [];
+      case 3:
+        return (e == null ? void 0 : e.filter((l) => l.position === "keeper")) || [];
+      default:
+        return [];
+    }
+  }, P = ["attackers", "midfielders", "defenders", "goalkeepers"];
+  return /* @__PURE__ */ o.jsxs(n, { sx: a.container, children: [
+    /* @__PURE__ */ o.jsx(n, { sx: a.teamSelection, children: /* @__PURE__ */ o.jsxs(n, { sx: a.badgesRow, children: [
+      /* @__PURE__ */ o.jsx(
+        n,
+        {
+          sx: {
+            ...a.badge,
+            ...c === "home" ? a.badgeActive : {}
+          },
+          role: "button",
+          "aria-pressed": c === "home",
+          tabIndex: 0,
+          onClick: () => y("home"),
+          onKeyDown: (e) => {
+            (e.key === "Enter" || e.key === " ") && y("home");
+          },
+          children: t.matchModel.homeTeam.name
+        }
+      ),
+      /* @__PURE__ */ o.jsx(
+        n,
+        {
+          sx: {
+            ...a.badge,
+            ...c === "away" ? a.badgeActive : {}
+          },
+          role: "button",
+          "aria-pressed": c === "away",
+          tabIndex: 0,
+          onClick: () => y("away"),
+          onKeyDown: (e) => {
+            (e.key === "Enter" || e.key === " ") && y("away");
+          },
+          children: t.matchModel.awayTeam.name
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ o.jsx(n, { sx: a.tabsContainer, children: /* @__PURE__ */ o.jsxs(
+      z,
+      {
+        value: j,
+        onChange: (e, l) => B(l),
+        sx: a.tabs,
+        children: [
+          /* @__PURE__ */ o.jsx(R, { sx: a.tabList, children: P.map((e, l) => /* @__PURE__ */ o.jsx(H, { value: l, sx: a.tab, children: f(`matchQuiz.fixtures.${e}`) }, e)) }),
+          P.map((e, l) => /* @__PURE__ */ o.jsx(Q, { value: l, sx: a.tabPanel, children: /* @__PURE__ */ o.jsx(n, { sx: a.playersGrid, children: L().map((s) => /* @__PURE__ */ o.jsxs(n, { sx: a.playerContainer, children: [
+            /* @__PURE__ */ o.jsx(
+              w,
+              {
+                player: s,
+                isSelected: k === s.id,
+                styles: a,
+                handlePlayerSelection: C
+              }
+            ),
+            /* @__PURE__ */ o.jsx(
+              _,
+              {
+                level: "body-xs",
+                sx: {
+                  ...a.playerName,
+                  ...k === s.id ? a.selectedPlayerName : {}
+                },
+                onClick: () => C(s.id),
+                children: s.name
+              }
+            )
+          ] }, s.id)) }) }, l))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ o.jsxs(n, { sx: a.checkboxesContainer, children: [
+      /* @__PURE__ */ o.jsx(p, { size: "sm", children: /* @__PURE__ */ o.jsx(n, { sx: a.checkboxRow, children: /* @__PURE__ */ o.jsx(
+        v,
+        {
+          checked: G,
+          onChange: (e) => I(e.target.checked),
+          slotProps: {
+            checkbox: {
+              sx: {
+                "&.Mui-checked": {
+                  bgcolor: t.brandingPrimaryColor || r.palette.primary.plainColor,
+                  "--Icon-color": "#FFF"
+                },
+                "&:not(.Mui-checked):not(.Mui-disabled):hover": {
+                  bgcolor: x.colorSchemes.light.palette.neutral.outlinedHoverBg
+                },
+                bgcolor: x.colorSchemes.light.palette.background.surface
+              }
+            },
+            label: {
+              sx: a.checkboxLabel
+            }
+          },
+          label: f("matchQuiz.fixtures.ownGoal")
+        }
+      ) }) }),
+      /* @__PURE__ */ o.jsx(p, { size: "sm", children: /* @__PURE__ */ o.jsx(n, { sx: a.checkboxRow, children: /* @__PURE__ */ o.jsx(
+        v,
+        {
+          checked: A,
+          onChange: (e) => O(e.target.checked),
+          slotProps: {
+            checkbox: {
+              sx: {
+                "&.Mui-checked": {
+                  bgcolor: t.brandingPrimaryColor || r.palette.primary.plainColor,
+                  "--Icon-color": "#FFF"
+                },
+                "&:not(.Mui-checked):not(.Mui-disabled):hover": {
+                  bgcolor: x.colorSchemes.light.palette.neutral.outlinedHoverBg
+                },
+                bgcolor: x.colorSchemes.light.palette.background.surface
+              }
+            },
+            label: {
+              sx: a.checkboxLabel
+            }
+          },
+          label: f("matchQuiz.fixtures.noGoalWillBeScored")
+        }
+      ) }) })
+    ] })
+  ] });
+};
+export {
+  xe as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/Players/PlayersSelector.styles.js

@@ -0,0 +1,293 @@
+import { createTeamLogoStyles as a } from "../shared.styles.js";
+const l = (e) => {
+  const t = a({
+    spacingScale: e.spacingScale,
+    neutralSoftBg: e.neutralSoftBg,
+    neutralPlainHoverBg: e.neutralPlainHoverBg,
+    isMobile: e.isMobile,
+    primary: e.primary,
+    onPrimary: e.onPrimary
+  });
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.lg,
+      width: "100%"
+    },
+    // Team selection section
+    teamSelection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md,
+      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    iconsRow: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    labelsRow: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    iconContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: 1
+    },
+    labelContainer: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flex: 1
+    },
+    teamLogo: {
+      ...t.base,
+      cursor: "pointer"
+    },
+    selectedTeamLogo: t.selected,
+    teamLogoText: {
+      ...t.text,
+      fontFamily: e.fontFamilySecondary,
+      color: e.textSecondary
+    },
+    selectedTeamLogoText: t.selectedText,
+    teamName: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
+      fontWeight: 600,
+      textAlign: "center"
+    },
+    // Team badges (home/away)
+    badgesRow: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md
+    },
+    badge: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: `${e.spacingScale.xs} ${e.spacingScale.md}`,
+      borderRadius: 9999,
+      border: `1px solid ${e.neutralOutlinedBorder}`,
+      cursor: "pointer",
+      userSelect: "none",
+      fontFamily: e.fontFamilySecondary,
+      fontWeight: 500,
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
+      color: e.textSecondary,
+      backgroundColor: "transparent",
+      minWidth: e.isMobile ? "auto" : "120px",
+      textAlign: "center",
+      "&:hover": {
+        backgroundColor: e.neutralPlainHoverBg,
+        color: e.textPrimary,
+        borderColor: `${e.primary}40`
+      },
+      "&:active": {
+        transform: "scale(0.98)"
+      }
+    },
+    badgeActive: {
+      borderColor: e.primary,
+      color: e.primary,
+      backgroundColor: e.neutralPlainHoverBg,
+      fontWeight: 600,
+      "&:hover": {
+        borderColor: e.primary,
+        color: e.primary,
+        backgroundColor: e.neutralPlainHoverBg
+      }
+    },
+    // Tabs section
+    tabsContainer: {
+      width: "100%",
+      alignSelf: "flex-start"
+    },
+    tabs: {
+      backgroundColor: e.neutralSoftBg,
+      borderRadius: e.borderRadius.lg,
+      overflow: "hidden"
+    },
+    tabList: {
+      borderBottom: `1px solid ${e.neutralOutlinedBorder}`,
+      p: 0,
+      gap: 0,
+      justifyContent: "space-between",
+      flexWrap: e.isExtraSmall ? "wrap" : "nowrap",
+      "& .MuiTabList-root": {
+        bgcolor: "transparent"
+      }
+    },
+    tab: {
+      width: e.isExtraSmall ? "50%" : "25%",
+      fontFamily: e.fontFamilySecondary,
+      fontWeight: 500,
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
+      color: e.textSecondary,
+      bgcolor: "transparent",
+      border: "none",
+      borderBottom: "2px solid transparent",
+      transition: "all 0.2s ease",
+      minHeight: "auto",
+      py: e.spacingScale.sm,
+      px: e.spacingScale.xs,
+      "&:hover": {
+        bgcolor: `${e.neutralPlainHoverBg} !important`,
+        borderBottom: `2px solid ${e.primary}40`,
+        color: `${e.textPrimary} !important`
+      },
+      "&:not(.Mui-selected):hover": {
+        color: `${e.textPrimary} !important`
+      },
+      "&.Mui-selected": {
+        bgcolor: e.neutralPlainHoverBg,
+        color: e.textPrimary,
+        borderBottom: `2px solid ${e.primary}`,
+        fontWeight: 600
+      },
+      "&:first-of-type": {
+        borderTopLeftRadius: e.isExtraSmall ? 0 : e.borderRadius.lg
+      },
+      "&:last-of-type": {
+        borderTopRightRadius: e.isExtraSmall ? 0 : e.borderRadius.lg
+      },
+      "--Tab-indicatorColor": `2px solid ${e.primary} !important`
+    },
+    tabPanel: {
+      px: 0,
+      py: e.spacingScale.xs,
+      "& .MuiTabPanel-root": {
+        p: 0
+      }
+    },
+    // Players grid
+    playersGrid: {
+      display: "grid",
+      gridTemplateColumns: e.isMobile ? "repeat(auto-fit, minmax(70px, 1fr))" : "repeat(auto-fit, minmax(90px, 1fr))",
+      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      justifyContent: "center",
+      justifyItems: "center",
+      padding: e.spacingScale.sm,
+      maxWidth: "100%"
+    },
+    playerContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.xs,
+      cursor: "pointer",
+      transition: "all 0.2s ease-in-out",
+      width: "100%",
+      maxWidth: e.isMobile ? "70px" : "90px",
+      "&:hover": {
+        transform: "scale(1.02)"
+      }
+    },
+    // Player avatar styles
+    playerAvatar: {
+      width: e.isMobile ? "44px" : "52px",
+      height: e.isMobile ? "44px" : "52px",
+      borderRadius: "50%",
+      backgroundColor: e.neutralSoftBg,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      border: `2px solid ${e.neutralOutlinedBorder}`,
+      cursor: "pointer",
+      transition: "all 0.2s ease-in-out",
+      flexShrink: 0,
+      "&:hover": {
+        backgroundColor: e.neutralPlainHoverBg,
+        borderColor: e.primary,
+        transform: "scale(1.05)"
+      }
+    },
+    selectedPlayerAvatar: {
+      backgroundColor: e.primary,
+      borderColor: e.primary,
+      transform: "scale(1.1)",
+      "&:hover": {
+        backgroundColor: e.primary,
+        borderColor: e.primary,
+        transform: "scale(1.1)"
+      }
+    },
+    playerAvatarText: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textSecondary,
+      fontSize: e.isMobile ? "0.625em" : "0.75em",
+      fontWeight: 600,
+      textAlign: "center",
+      lineHeight: 1
+    },
+    selectedPlayerAvatarText: {
+      color: e.onPrimary
+    },
+    playerAvatarIcon: {
+      color: e.textSecondary,
+      fontSize: e.isMobile ? "1.25em" : "1.5em"
+    },
+    selectedPlayerAvatarIcon: {
+      color: e.onPrimary
+    },
+    playerName: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textSecondary,
+      fontSize: e.isMobile ? "0.625em" : "0.75em",
+      fontWeight: 500,
+      textAlign: "center",
+      lineHeight: 1.2,
+      cursor: "pointer",
+      transition: "color 0.2s ease-in-out",
+      wordBreak: "break-word",
+      hyphens: "auto",
+      width: "100%",
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: "vertical",
+      "&:hover": {
+        color: e.textPrimary
+      }
+    },
+    selectedPlayerName: {
+      color: e.primary,
+      fontWeight: 600
+    },
+    // Checkboxes section
+    checkboxesContainer: {
+      display: "flex",
+      gap: e.spacingScale.sm,
+      alignItems: e.isExtraSmall || e.isSplitVariant ? "flex-start" : "center",
+      justifyContent: e.isExtraSmall || e.isSplitVariant ? "flex-start" : "center",
+      flexDirection: e.isExtraSmall || e.isSplitVariant ? "column" : "row",
+      width: "100%",
+      maxWidth: "600px"
+    },
+    checkboxRow: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: e.spacingScale.xs
+    },
+    checkboxLabel: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.875em" : "1em",
+      fontWeight: 500
+    }
+  };
+};
+export {
+  l as createStyles
+};