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

package/packages/event-game-play/src/components/Shared/Summary/PredictionSummary.js

@@ -0,0 +1,118 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as y } from "react";
+import { Box as m, Typography as u, Sheet as O, Table as F, IconButton as M } from "@mui/joy";
+import { useColors as R, useCornerRadius as V, useFontFamily as g, useSpacingScale as w, isMobile as I } 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 "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import { createStyles as G } from "./PredictionSummary.styles.js";
+import { EventGameOutcomeTypeEnum as h } from "fansunited-sdk-esm";
+import U from "../../../../../../node_modules/@mui/icons-material/esm/Edit.js";
+import A from "./EditPredictionModal.js";
+import { clampNumberPrediction as N } from "../../../helpers/helpers.js";
+import { useTranslation as k } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ee = (i) => {
+  const { t: c } = k(), o = R(), j = V(), x = g(), v = w(), P = I(), [b, f] = y(!1), [s, p] = y(null), t = G({
+    spacingScale: v,
+    borderRadius: j,
+    fontFamilyPrimary: x.primary,
+    fontFamilySecondary: x.secondary,
+    textPrimary: o.textPrimary,
+    textSecondary: o.textSecondary,
+    primaryColor: o.palette.primary.plainColor,
+    surfaceVariant: o.surfaceVariant,
+    outlineEnabledBorder: o.outlineEnabledBorder,
+    outlinedBorder: o.palette.neutral.outlinedBorder,
+    neutralSoftBg: o.palette.neutral.softBg,
+    isMobile: P,
+    isSplitVariant: i.isSplitVariant || !1
+  }), B = (r) => {
+    const n = i.fixtures[r];
+    p(n), f(!0);
+  }, C = () => {
+    if (i.view === "play" && s && s.outcomeType === h.NUMBER) {
+      const r = s.validOutcomes, n = i.prediction.fixtures.find(
+        (a) => a.id === s.id
+      );
+      if (n && typeof n.prediction == "number") {
+        const a = N(n.prediction, r);
+        if (a !== n.prediction) {
+          const l = { ...i.prediction }, d = l.fixtures.findIndex(
+            (E) => E.id === s.id
+          );
+          d !== -1 && (l.fixtures[d] = {
+            ...l.fixtures[d],
+            prediction: a
+          }, i.onPredictionUpdate(l));
+        }
+      }
+    }
+    f(!1), p(null);
+  }, S = (r) => {
+    i.onPredictionUpdate(r);
+  }, T = (r) => {
+    var l;
+    const n = (l = i.prediction.fixtures) == null ? void 0 : l.find(
+      (d) => d.id === r.id
+    );
+    if (!n) return null;
+    if (r.outcomeType === h.BOOLEAN) {
+      const d = n.prediction === !0;
+      return /* @__PURE__ */ e.jsx(m, { sx: t.predictionBox, children: /* @__PURE__ */ e.jsx(u, { sx: t.selectionText, children: c(d ? "eventGame.fixtures.yes" : "eventGame.fixtures.no") }) });
+    }
+    return /* @__PURE__ */ e.jsx(m, { sx: t.predictionBox, children: /* @__PURE__ */ e.jsx(u, { sx: t.selectionText, children: n.prediction }) });
+  };
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(m, { sx: t.container, children: [
+    /* @__PURE__ */ e.jsx(u, { sx: t.title, children: c("eventGame.summary.title") }),
+    /* @__PURE__ */ e.jsx(O, { sx: t.tableContainer, children: /* @__PURE__ */ e.jsxs(
+      F,
+      {
+        variant: "outlined",
+        hoverRow: !1,
+        borderAxis: "bothBetween",
+        size: "sm",
+        sx: t.table,
+        children: [
+          /* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("th", { style: t.headerCell, children: c("eventGame.summary.prediction") }),
+            /* @__PURE__ */ e.jsx("th", { style: t.headerCellAction })
+          ] }) }),
+          /* @__PURE__ */ e.jsx("tbody", { children: i.fixtures.map((r, n) => /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("td", { style: t.predictionCell, children: /* @__PURE__ */ e.jsxs(m, { sx: t.predictionContent, children: [
+              /* @__PURE__ */ e.jsx(u, { sx: t.questionText, children: r.question }),
+              T(r)
+            ] }) }),
+            /* @__PURE__ */ e.jsx("td", { style: t.actionCell, children: /* @__PURE__ */ e.jsx(
+              M,
+              {
+                variant: "plain",
+                size: "sm",
+                sx: t.editIconButton,
+                onClick: () => B(n),
+                children: /* @__PURE__ */ e.jsx(U, {})
+              }
+            ) })
+          ] }, `${r.id}-${n}`)) })
+        ]
+      }
+    ) }),
+    s && /* @__PURE__ */ e.jsx(
+      A,
+      {
+        isOpen: b,
+        onClose: C,
+        fixture: s,
+        prediction: i.prediction,
+        onPredictionUpdate: S,
+        play: i.play,
+        view: i.view,
+        isOverlayVariant: i.isOverlayVariant,
+        onPlayResult: i.onPlayResult
+      }
+    )
+  ] }) });
+};
+export {
+  ee as default
+};

package/packages/event-game-play/src/components/Shared/Summary/PredictionSummary.styles.js

@@ -0,0 +1,180 @@
+const t = (e) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.sm,
+    width: "100%"
+  },
+  title: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: "1em",
+    lineHeight: "1.25em",
+    color: e.textPrimary,
+    textAlign: "center",
+    marginBottom: e.spacingScale.sm
+  },
+  predictionsList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.xs,
+    backgroundColor: e.surfaceVariant,
+    borderRadius: e.borderRadius.md,
+    border: `1px solid ${e.outlineEnabledBorder}`,
+    overflow: "hidden"
+  },
+  predictionItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: `${e.spacingScale.sm} ${e.spacingScale.md}`,
+    borderBottom: `1px solid ${e.outlineEnabledBorder}`,
+    minHeight: "48px",
+    "&:last-child": {
+      borderBottom: "none"
+    }
+  },
+  questionText: {
+    fontFamily: e.fontFamilySecondary,
+    fontWeight: 400,
+    fontSize: "1em",
+    lineHeight: "1em",
+    color: e.textSecondary,
+    marginBottom: "2px"
+  },
+  answerContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.md
+  },
+  answerContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    minWidth: "120px"
+  },
+  teamLogo: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  selectionText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    color: e.textPrimary
+  },
+  editButton: {
+    padding: "2px 6px",
+    fontSize: "0.75em",
+    fontWeight: 500,
+    color: e.primaryColor,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: e.borderRadius.sm,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    fontFamily: e.fontFamilySecondary,
+    textDecoration: "underline",
+    minWidth: "auto",
+    "&:hover": {
+      backgroundColor: `${e.primaryColor}10`
+    }
+  },
+  // Table styles
+  tableContainer: {
+    overflowX: "auto",
+    borderRadius: e.borderRadius.md,
+    border: `1px solid ${e.outlineEnabledBorder}`
+  },
+  table: {
+    backgroundColor: e.surfaceVariant,
+    "--TableCell-paddingX": "0.5em",
+    "--TableCell-paddingY": "0.375em",
+    cursor: "default",
+    fontSize: "1em",
+    "& > 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 ${e.outlineEnabledBorder}`
+    },
+    "& > tbody > tr:last-child > td": {
+      borderBottom: "none"
+    }
+  },
+  headerCell: {
+    textAlign: "left",
+    padding: "0.375em 0.5em",
+    fontSize: "0.75em"
+  },
+  headerCellAction: {
+    textAlign: "center",
+    padding: "0.375em 0.5em",
+    width: "30px"
+  },
+  predictionCell: {
+    width: "calc(100% - 30px)"
+  },
+  actionCell: {
+    textAlign: "center",
+    width: "30px",
+    verticalAlign: "middle"
+  },
+  predictionContent: {
+    display: "flex",
+    gap: e.isMobile || e.isSplitVariant ? e.spacingScale["2xs"] : e.spacingScale.sm,
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  predictionBox: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "0.75em",
+    padding: "2px 6px",
+    minHeight: "20px",
+    borderRadius: e.borderRadius.sm,
+    border: `1px solid ${e.outlineEnabledBorder}`,
+    backgroundColor: e.neutralSoftBg,
+    width: "fit-content"
+  },
+  predictionChip: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "0.75em",
+    padding: "2px 6px",
+    minHeight: "20px"
+  },
+  editIconButton: {
+    padding: "4px",
+    minHeight: "24px",
+    minWidth: "24px",
+    color: e.textPrimary,
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: e.borderRadius.sm,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    "&:hover": {
+      backgroundColor: `${e.textPrimary}15`
+    },
+    "& svg": {
+      fontSize: "1em",
+      color: e.textPrimary
+    }
+  }
+});
+export {
+  t as createStyles
+};

package/packages/event-game-play/src/components/Variants/Overlay/Error/EventGameOverlayError.js

@@ -0,0 +1,30 @@
+import { j as r } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as m } 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 "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import i from "../../../../../../common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import l from "../../../../assets/default-quiz-bg.png.js";
+import n from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import { useTranslation as g } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const E = (e) => {
+  const { t } = g(), o = m(), a = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : o ? n : l;
+  return /* @__PURE__ */ r.jsx(
+    i,
+    {
+      entity: { ...e.eventGame, labels: null },
+      headline: t("eventGame.headline"),
+      tryAgainButtonText: t("eventGame.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: a,
+      isApiError: e.isApiError,
+      toggleTryAgain: e.toggleTryAgain,
+      renderPresentedBy: () => /* @__PURE__ */ r.jsx(r.Fragment, {})
+    }
+  );
+};
+export {
+  E as default
+};

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

@@ -0,0 +1,348 @@
+import { j as t } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as s, Button as J, Typography as u } from "@mui/joy";
+import ye, { useCallback as ve, useMemo as Se } from "react";
+import { useSpacingScale as je, useInternalTheme as Ce, isMobile as be, isExtraSmall as Ge } 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 { WidgetTemplate as Ee } from "../../../../../common/src/enums/enums.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import Te from "../../../../../common/src/components/Skeletons/Overlay/OverlaySkeleton.js";
+import { useImageVariant as we } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import Oe from "../../../assets/default-quiz-bg.png.js";
+import Pe from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import { createStyles as Ie } from "./EventGameOverlayVariant.styles.js";
+import { EventGameOutcomeTypeEnum as p } from "fansunited-sdk-esm";
+import ke from "../../Shared/Fixtures/Number/NumberFixture.js";
+import Fe from "../../Shared/Fixtures/Boolean/BooleanFixture.js";
+import K from "../../Shared/Fixtures/Text/TextFixture.js";
+import Ne from "../../Shared/Stepper.js";
+import Be from "../../Shared/Countdown.js";
+import Re from "../../Shared/Summary/PredictionSummary.js";
+import { isPredictionsCutoffPassed as $e, clampNumberPrediction as Ue } from "../../../helpers/helpers.js";
+import { useTranslation as Le } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const dt = (i) => {
+  var I, k, F, N, B, R, $, U, L, q, D, M, V, W, z, _;
+  const [o, G] = ye.useState(1), Q = je(), x = Ce(), { t: c } = Le(), P = be(), X = Ge(), Z = i.defaultImagePlaceholderUrl ? i.defaultImagePlaceholderUrl : P ? Pe : Oe, ee = we(
+    {
+      images: i.eventGame.images,
+      imagePlaceholder: Z
+    },
+    Ee.OVERLAY
+  ), te = x.customRadius.dark.md, ie = (k = (I = x.colorSchemes) == null ? void 0 : I.dark) == null ? void 0 : k.surfaceVariant, E = (N = (F = x.customRadius) == null ? void 0 : F.light) == null ? void 0 : N.xl, g = (U = ($ = (R = (B = x.colorSchemes) == null ? void 0 : B.light) == null ? void 0 : R.palette) == null ? void 0 : $.primary) == null ? void 0 : U.plainColor, h = (M = (D = (q = (L = x.colorSchemes) == null ? void 0 : L.light) == null ? void 0 : q.palette) == null ? void 0 : D.primary) == null ? void 0 : M.onPrimary, T = x.customFontFamily.dark.primary, ne = x.colorSchemes.dark.textColor, oe = (_ = (z = (W = (V = x.colorSchemes) == null ? void 0 : V.light) == null ? void 0 : W.palette) == null ? void 0 : z.danger) == null ? void 0 : _.plainColor, re = x.colorSchemes.dark.textColor, n = Ie({
+    spacingScale: Q,
+    mdBorderRadius: te,
+    contentBgColor: ie,
+    buttonRadius: E,
+    primaryColor: g,
+    onPrimaryColor: h,
+    fontFamilyPrimary: T,
+    darkTextColor: ne,
+    isMobile: P,
+    isExtraSmall: X,
+    dangerColor: oe,
+    textColor: re,
+    opacity: "60%"
+  }), v = ve(
+    (e, r) => {
+      i.setPrediction((l) => {
+        const m = { ...l }, d = m.fixtures.find((f) => f.id === e);
+        return d && (d.prediction = r), m;
+      });
+    },
+    [i.setPrediction]
+  ), y = i.eventGame.fixtures.length + 1, w = i.eventGame.status === "OPEN" && $e(i.eventGame.predictionsCutoff || ""), ae = () => {
+    var r, l;
+    const e = i.eventGame.fixtures[o - 1];
+    if (e && e.outcomeType === p.NUMBER) {
+      const m = e.validOutcomes, d = (l = (r = i.prediction) == null ? void 0 : r.fixtures) == null ? void 0 : l.find(
+        (f) => f.id === e.id
+      );
+      if (d && typeof d.prediction == "number") {
+        const f = Ue(
+          d.prediction,
+          m
+        );
+        f !== d.prediction && v(e.id, f);
+      }
+    }
+    o < y ? G(o + 1) : i.play();
+  }, O = () => {
+    var l, m;
+    if (o === y) return !0;
+    const e = i.eventGame.fixtures[o - 1];
+    if (!e) return !1;
+    const r = (m = (l = i.prediction) == null ? void 0 : l.fixtures) == null ? void 0 : m.find(
+      (d) => d.id === e.id
+    );
+    if (!r) return !1;
+    switch (e.outcomeType) {
+      case p.BOOLEAN:
+        return typeof r.prediction == "boolean";
+      case p.NUMBER:
+        return typeof r.prediction == "number";
+      case p.FREE_INPUT:
+        return typeof r.prediction == "string" && r.prediction.trim().length > 0;
+      case p.ENUM:
+        return typeof r.prediction == "string" && r.prediction.trim().length > 0;
+      default:
+        return !1;
+    }
+  }, se = () => {
+    o > 1 && G(o - 1);
+  }, ce = (e) => {
+    G(e + 1);
+  }, de = () => /* @__PURE__ */ t.jsx(s, { sx: n.contentContainerWithBackdrop, children: /* @__PURE__ */ t.jsxs(s, { sx: n.gameStateContainer, children: [
+    /* @__PURE__ */ t.jsx(u, { component: "h5", sx: n.stateTitle, children: c("eventGame.states.pending.title") }),
+    /* @__PURE__ */ t.jsx(u, { sx: n.stateDescription, children: c("eventGame.states.pending.description") })
+  ] }) }), le = () => /* @__PURE__ */ t.jsx(s, { sx: n.contentContainerWithBackdrop, children: /* @__PURE__ */ t.jsxs(s, { sx: n.gameStateContainer, children: [
+    /* @__PURE__ */ t.jsxs(s, { sx: n.liveIndicatorContainer, children: [
+      /* @__PURE__ */ t.jsx(s, { sx: n.liveIndicator }),
+      /* @__PURE__ */ t.jsx(u, { component: "h5", sx: n.liveText, children: c("eventGame.states.live.indicator") })
+    ] }),
+    /* @__PURE__ */ t.jsx(u, { sx: n.stateDescription, children: c("eventGame.states.live.description") })
+  ] }) }), me = () => /* @__PURE__ */ t.jsx(s, { sx: n.contentContainerWithBackdrop, children: /* @__PURE__ */ t.jsxs(s, { sx: n.gameStateContainer, children: [
+    /* @__PURE__ */ t.jsx(s, { sx: n.closedStateHeader, children: /* @__PURE__ */ t.jsx(u, { component: "h5", sx: n.stateTitle, children: c("eventGame.states.closed.title") }) }),
+    /* @__PURE__ */ t.jsx(u, { sx: n.stateDescription, children: c("eventGame.states.closed.description") })
+  ] }) }), ue = () => /* @__PURE__ */ t.jsxs(s, { sx: n.gameStateContainer, children: [
+    /* @__PURE__ */ t.jsx(u, { component: "h5", sx: n.stateTitle, children: c("eventGame.states.open.title") }),
+    /* @__PURE__ */ t.jsx(u, { sx: n.stateDescription, children: c("eventGame.states.open.description") })
+  ] }), xe = Se(() => i.eventGame.fixtures[o - 1], [i.eventGame.fixtures, o]), fe = () => {
+    var r, l, m, d, f, A, H, Y;
+    const e = xe;
+    if (w)
+      return ue();
+    if (e)
+      switch (e.outcomeType) {
+        case p.BOOLEAN:
+          const S = (l = (r = i.prediction) == null ? void 0 : r.fixtures) == null ? void 0 : l.find(
+            (a) => a.id === e.id
+          );
+          return /* @__PURE__ */ t.jsx(
+            Fe,
+            {
+              prediction: typeof (S == null ? void 0 : S.prediction) == "boolean" ? S.prediction : null,
+              onSelectionChange: (a) => {
+                v(e.id, a);
+              },
+              question: e.question,
+              fixtureId: e.id
+            },
+            `${e.outcomeType}-${o}-${e.id}`
+          );
+        case p.NUMBER:
+          const j = (d = (m = i.prediction) == null ? void 0 : m.fixtures) == null ? void 0 : d.find(
+            (a) => a.id === e.id
+          ), ge = e.validOutcomes;
+          return /* @__PURE__ */ t.jsx(
+            ke,
+            {
+              prediction: typeof (j == null ? void 0 : j.prediction) == "number" ? j.prediction : 0,
+              onChange: (a) => {
+                v(e.id, a);
+              },
+              question: e.question,
+              validOutcomes: ge || null,
+              fixtureId: e.id,
+              isOverlayVariant: !0
+            },
+            `${e.outcomeType}-${o}-${e.id}`
+          );
+        case p.FREE_INPUT:
+          const C = (A = (f = i.prediction) == null ? void 0 : f.fixtures) == null ? void 0 : A.find(
+            (a) => a.id === e.id
+          );
+          return /* @__PURE__ */ t.jsx(
+            K,
+            {
+              question: e.question,
+              prediction: typeof (C == null ? void 0 : C.prediction) == "string" ? C.prediction : null,
+              validOutcomes: null,
+              onTextChange: (a) => {
+                v(e.id, a);
+              },
+              fixtureId: e.id
+            },
+            `${e.outcomeType}-${o}-${e.id}`
+          );
+        case p.ENUM:
+          const b = (Y = (H = i.prediction) == null ? void 0 : H.fixtures) == null ? void 0 : Y.find(
+            (a) => a.id === e.id
+          );
+          return /* @__PURE__ */ t.jsx(
+            K,
+            {
+              question: e.question,
+              prediction: typeof (b == null ? void 0 : b.prediction) == "string" ? b.prediction : null,
+              validOutcomes: e.validOutcomes,
+              onTextChange: (a) => {
+                v(e.id, a);
+              },
+              fixtureId: e.id,
+              optionsLayout: i.optionsLayout
+            },
+            `${e.id}-${o}`
+          );
+        default:
+          return /* @__PURE__ */ t.jsx(t.Fragment, {});
+      }
+  }, pe = () => {
+    switch (i.eventGame.status) {
+      case "PENDING":
+        return de();
+      case "LIVE":
+        return le();
+      case "CLOSED":
+        return me();
+      default:
+        return he();
+    }
+  }, he = () => /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    i.showCountdown && i.eventGame.status === "OPEN" && /* @__PURE__ */ t.jsx(
+      Be,
+      {
+        predictionsCutoffTime: i.eventGame.predictionsCutoff || ""
+      }
+    ),
+    !w && /* @__PURE__ */ t.jsx(
+      Ne,
+      {
+        eventGame: i.eventGame,
+        currentStep: o,
+        totalSteps: y
+      }
+    ),
+    /* @__PURE__ */ t.jsx(s, { sx: n.contentContainerWithBackdrop, children: o === y ? /* @__PURE__ */ t.jsx(
+      Re,
+      {
+        fixtures: i.eventGame.fixtures,
+        prediction: i.prediction,
+        onEditPrediction: ce,
+        onPredictionUpdate: i.setPrediction,
+        view: "play",
+        play: async () => i.play(),
+        isOverlayVariant: !0
+      }
+    ) : fe() }),
+    /* @__PURE__ */ t.jsx(s, { sx: n.footerContainerNoLogo, children: /* @__PURE__ */ t.jsxs(s, { sx: n.navigationContainer, children: [
+      o > 1 && o < y && /* @__PURE__ */ t.jsx(
+        J,
+        {
+          variant: "outlined",
+          onClick: se,
+          sx: {
+            borderRadius: E,
+            py: "10px",
+            px: "16px",
+            borderColor: g,
+            color: h,
+            transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+            transform: "scale(1)",
+            alignSelf: "center",
+            "&:hover": {
+              borderColor: g,
+              backgroundColor: `${g}10`,
+              transform: "scale(1.02)",
+              boxShadow: "var(--joy-shadow-md)"
+            },
+            "&:active": {
+              transform: "scale(0.98)",
+              boxShadow: "var(--joy-shadow-md)"
+            },
+            fontSize: "0.9375em",
+            boxShadow: "var(--joy-shadow-md)"
+          },
+          children: /* @__PURE__ */ t.jsx(
+            u,
+            {
+              sx: {
+                fontFamily: T,
+                fontWeight: 500,
+                fontSize: "0.9375em",
+                lineHeight: "24px",
+                letterSpacing: "0.46px",
+                textTransform: "uppercase",
+                color: h,
+                gap: "8px",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: c("eventGame.buttons.back")
+            }
+          )
+        }
+      ),
+      !w && /* @__PURE__ */ t.jsx(
+        J,
+        {
+          variant: "soft",
+          onClick: O() ? ae : () => {
+          },
+          loading: i.isPlaying,
+          sx: {
+            borderRadius: E,
+            py: "10px",
+            px: "16px",
+            bgcolor: g,
+            color: h,
+            transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+            transform: "scale(1)",
+            alignSelf: "center",
+            cursor: O() ? "pointer" : "not-allowed",
+            opacity: O() ? "1" : "0.5",
+            "&:hover": {
+              bgcolor: g,
+              boxShadow: "var(--joy-shadow-md)",
+              transform: "scale(1.02)"
+            },
+            "&:active": {
+              color: h,
+              transform: "scale(0.98)",
+              boxShadow: "var(--joy-shadow-md)"
+            },
+            "&:disabled": {
+              bgcolor: g,
+              color: h,
+              opacity: "12%",
+              boxShadow: "var(--joy-shadow-md)"
+            },
+            "--Icon-color": h,
+            fontSize: "0.9375em",
+            boxShadow: "var(--joy-shadow-md)"
+          },
+          children: /* @__PURE__ */ t.jsx(
+            u,
+            {
+              sx: {
+                fontFamily: T,
+                fontWeight: 500,
+                fontSize: "0.9375em",
+                lineHeight: "24px",
+                letterSpacing: "0.46px",
+                textTransform: "uppercase",
+                color: h,
+                gap: "8px",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: c(o === y ? "eventGame.buttons.play" : "eventGame.buttons.next")
+            }
+          )
+        }
+      )
+    ] }) })
+  ] });
+  return /* @__PURE__ */ t.jsx(
+    Te,
+    {
+      entity: { ...i.eventGame, labels: null },
+      headline: c("eventGame.headline"),
+      finalImage: ee,
+      rulesDisplay: i.rulesDisplay,
+      children: pe()
+    }
+  );
+};
+export {
+  dt as default
+};