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

package/packages/classic-quiz-play/src/components/Variants/Standard/SignIn/StandardSignIn.styles.js

@@ -0,0 +1,52 @@
+const o = (r) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Sign in button
+  signInButton: {
+    borderRadius: r.buttonRadius,
+    py: "10px",
+    px: "16px",
+    bgcolor: r.primaryColor,
+    color: r.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    alignSelf: "center",
+    "&:hover": {
+      bgcolor: r.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: r.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: r.primaryColor,
+      color: r.onPrimaryColor,
+      opacity: "12%"
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Sign in button text
+  signInButtonText: {
+    fontFamily: r.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: r.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};

package/packages/classic-quiz-play/src/components/Variants/Standard/StandardVariant.js

@@ -0,0 +1,209 @@
+import { j as t } from "../../../../../../node_modules/react/jsx-runtime.js";
+import ce from "react";
+import { Box as s, AspectRatio as W, Typography as O, Button as ue } from "@mui/joy";
+import { useInternalTheme as me, isMobile as de, isExtraSmall as xe, useColors as m, useFontFamily as ge, useCornerRadius as h, useSpacingScale as he } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as fe } 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 Ce } from "../../../../../common/src/enums/enums.js";
+import { useConstantContext as ye } from "../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as Qe } from "../../../../../common/src/providers/ConstantsProvider.js";
+import je from "../../../../../common/src/components/Skeletons/Standard/StandardSkeleton.js";
+import { useImageUrl as be } from "../../../../../common/src/hooks/useImageUrl.js";
+import { useImageVariant as ze } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import M from "../../../../../../node_modules/@mui/icons-material/esm/ArrowRightAlt.js";
+import Se from "../../Shared/Button.js";
+import qe from "../../Shared/Answers/Answers.js";
+import we from "../../Shared/Stepper.js";
+import Te from "../../Shared/Stopwatch.js";
+import Pe from "../../Shared/MainCard.js";
+import Be from "../../Shared/PresentedBy.js";
+import { quizTypes as Le } from "../../../constants/constants.js";
+import { useEmbedCode as Ie } from "../../../hooks/useEmbedCodeContainer.js";
+import { createStyles as Re } from "./StandardVariant.styles.js";
+import Ae from "../../Leads/CollectLeadWrapper.js";
+import { useTranslation as De } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ot = (e) => {
+  var C, y, Q, j, b, z, S, q, w, T, P, B, L, I, R, A, D, F;
+  const [V, _] = ce.useState(
+    ((C = e.leads) == null ? void 0 : C.position) === "before" && e.classicQuiz.authRequirement === "LEAD"
+  ), { optionsLayout: G } = ye(Qe), $ = Ie(
+    e.question.embedCode,
+    e.applyFilterScreen
+  ), H = me(), d = be(e.question.images), { t: o } = De(), r = de(), J = xe(), i = ((y = e.classicQuiz.branding) == null ? void 0 : y.colors) || null, c = r ? ((Q = e.classicQuiz.branding) == null ? void 0 : Q.images.mobileLogo) || ((j = e.classicQuiz.branding) == null ? void 0 : j.images.mainLogo) || "" : ((b = e.classicQuiz.branding) == null ? void 0 : b.images.mainLogo) || "", K = e.imagePosition || "left", x = ze(
+    {
+      images: e.classicQuiz.images,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    Ce.STANDARD
+  ), X = e.currentQuestion === e.classicQuiz.questionsCount && ((z = e.leads) == null ? void 0 : z.position) === "after" ? o("classicQuiz.buttons.continue") : e.currentQuestion === e.classicQuiz.questionsCount ? o("classicQuiz.buttons.finish") : o("classicQuiz.buttons.next"), g = J || r && !!x, l = (i == null ? void 0 : i.contentColor) || m().textColor, Y = ge().primary, Z = (i == null ? void 0 : i.backgroundColor) || m().surfaceVariant, p = h().md, ee = h().sm, f = (i == null ? void 0 : i.primaryColor) || m().palette.primary.plainColor, te = m().palette.primary.onPrimary, ie = h().xl, ne = he(), n = Re({
+    spacingScale: ne,
+    fontFamilyPrimary: Y,
+    textColor: l,
+    bgcolor: fe(Z || ""),
+    mdBorderRadius: p,
+    smBorderRadius: ee,
+    primaryColor: f,
+    onPrimaryColor: te,
+    buttonRadius: ie,
+    isExtraSmall: g,
+    isMobile: r
+  }), se = () => {
+    _(!1);
+  }, ae = (a) => {
+    a.preventDefault(), a.stopPropagation(), e.startPlaying();
+  }, oe = () => /* @__PURE__ */ t.jsx(
+    ue,
+    {
+      variant: "soft",
+      sx: {
+        ...n.startButton,
+        ...n.pulseAnimation
+      },
+      endDecorator: /* @__PURE__ */ t.jsx(M, {}),
+      onClick: ae,
+      children: /* @__PURE__ */ t.jsx(O, { sx: n.startButtonText, children: o("classicQuiz.buttons.start") })
+    }
+  ), u = (a, re) => {
+    var U, k, v, E, N;
+    return /* @__PURE__ */ t.jsx(
+      Be,
+      {
+        brandingLogo: c,
+        textColor: a,
+        label: ((U = e.classicQuiz.labels) == null ? void 0 : U.sponsor) || null,
+        primaryUrl: (v = (k = e.classicQuiz.branding) == null ? void 0 : k.urls) == null ? void 0 : v.primaryUrl,
+        secondaryUrl: (N = (E = e.classicQuiz.branding) == null ? void 0 : E.urls) == null ? void 0 : N.secondaryUrl,
+        isCentered: re
+      }
+    );
+  }, le = (a) => /* @__PURE__ */ t.jsxs(s, { sx: n.startButtonContainer, children: [
+    oe(),
+    u(a || l, !0)
+  ] });
+  return /* @__PURE__ */ t.jsx(Pe, { brandingBorderColor: (i == null ? void 0 : i.borderColor) || null, children: /* @__PURE__ */ t.jsx(
+    je,
+    {
+      entity: e.classicQuiz,
+      headline: o("classicQuiz.headline"),
+      finalImage: x,
+      imagePosition: K,
+      rulesDisplay: e.rulesDisplay,
+      filterScreenContent: e.applyFilterScreen ? le(
+        x && r ? (i == null ? void 0 : i.contentColor) || H.colorSchemes.dark.textColor : void 0
+      ) : void 0,
+      children: e.applyFilterScreen ? null : /* @__PURE__ */ t.jsx(t.Fragment, { children: V ? /* @__PURE__ */ t.jsx(s, { sx: n.leadCollectionContainer, children: /* @__PURE__ */ t.jsxs(s, { sx: n.leadQuestionContainer, children: [
+        /* @__PURE__ */ t.jsx(s, { sx: n.leadContentContainer, children: /* @__PURE__ */ t.jsx(
+          Ae,
+          {
+            sdk: e.sdk,
+            startGame: se,
+            contentId: e.classicQuiz.id,
+            contentName: e.classicQuiz.title,
+            brandingColors: (S = e.classicQuiz.branding) == null ? void 0 : S.colors,
+            brandingUrls: (q = e.classicQuiz.branding) == null ? void 0 : q.urls,
+            campaignId: (w = e.leads) == null ? void 0 : w.campaignId,
+            campaignName: (T = e.leads) == null ? void 0 : T.campaignName,
+            fields: (P = e.leads) == null ? void 0 : P.fields,
+            leadTitle: (B = e.classicQuiz.labels) == null ? void 0 : B.leadTitle,
+            leadDescription: (L = e.classicQuiz.labels) == null ? void 0 : L.leadDescription,
+            syncWithProfile: (I = e.leads) == null ? void 0 : I.syncWithProfile,
+            leadCta: (R = e.classicQuiz.labels) == null ? void 0 : R.leadCta,
+            leadSuccessTitle: (A = e.classicQuiz.labels) == null ? void 0 : A.leadSuccessTitle,
+            leadSuccessDescription: (D = e.classicQuiz.labels) == null ? void 0 : D.leadSuccessDescription
+          }
+        ) }),
+        u(l, !1)
+      ] }) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        Le.includes(
+          (F = e.classicQuiz.type) == null ? void 0 : F.toLocaleLowerCase()
+        ) && /* @__PURE__ */ t.jsx(s, { sx: n.stopwatchContainer, children: /* @__PURE__ */ t.jsx(
+          Te,
+          {
+            isRunning: e.isStopwatchRunning,
+            timer: e.stopwatchTime,
+            quizType: e.classicQuiz.type,
+            initialTime: e.classicQuiz.time || 10,
+            brandingPrimaryColor: (i == null ? void 0 : i.primaryColor) || null,
+            onTimeUpdate: e.onTimeUpdate
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(s, { sx: n.paginationContainer, children: /* @__PURE__ */ t.jsx(
+          we,
+          {
+            classicQuiz: e.classicQuiz,
+            currentQuestion: e.currentQuestion,
+            userParticipation: e.userParticipation,
+            brandingPrimaryColor: i == null ? void 0 : i.primaryColor
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(s, { sx: n.questionArea, children: /* @__PURE__ */ t.jsxs(s, { sx: n.questionContainer, children: [
+          /* @__PURE__ */ t.jsxs(s, { sx: n.questionContentContainer, children: [
+            e.question.embedCode && /* @__PURE__ */ t.jsx(
+              W,
+              {
+                ratio: "16/9",
+                sx: n.aspectRatioContainer,
+                children: /* @__PURE__ */ t.jsx(s, { ref: $ })
+              }
+            ),
+            !e.question.embedCode && d && /* @__PURE__ */ t.jsx(
+              W,
+              {
+                ratio: "16/9",
+                sx: n.questionImageContainer,
+                children: /* @__PURE__ */ t.jsx(s, { sx: n.questionImageBox, children: /* @__PURE__ */ t.jsx(
+                  "img",
+                  {
+                    src: d,
+                    alt: "Question illustration",
+                    style: n.questionImage
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ t.jsx(s, { sx: n.questionTextContainer, children: /* @__PURE__ */ t.jsx(O, { level: "body-lg", sx: n.questionText, children: e.question.question }) }),
+            /* @__PURE__ */ t.jsx(
+              qe,
+              {
+                options: e.question.options || [],
+                answerQuestion: e.answerQuestion,
+                selectedOption: e.selectedOption,
+                showAnswer: e.showAnswer,
+                optionsLayout: G ?? "twoByTwo",
+                questionImage: d,
+                brandingColors: i
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t.jsxs(
+            s,
+            {
+              sx: c ? n.footerContainer : n.footerContainerNoLogo,
+              children: [
+                c && !g ? u(l, !1) : /* @__PURE__ */ t.jsx(t.Fragment, {}),
+                /* @__PURE__ */ t.jsx(s, { sx: n.navigationContainer, children: /* @__PURE__ */ t.jsx(
+                  Se,
+                  {
+                    showAnswer: e.showAnswer,
+                    selectedOption: e.selectedOption,
+                    endDecorator: /* @__PURE__ */ t.jsx(M, {}),
+                    label: X,
+                    buttonColor: f,
+                    isSubmitting: e.isSubmitting,
+                    onClick: e.handleNext
+                  }
+                ) })
+              ]
+            }
+          ),
+          c && g ? u(l, !1) : /* @__PURE__ */ t.jsx(t.Fragment, {})
+        ] }) })
+      ] }) })
+    }
+  ) });
+};
+export {
+  ot as default
+};

package/packages/classic-quiz-play/src/components/Variants/Standard/StandardVariant.styles.js

@@ -0,0 +1,182 @@
+const a = (e) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Start button container
+  startButtonContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: e.spacingScale["2xl"]
+  },
+  // Start button
+  startButton: {
+    borderRadius: e.buttonRadius,
+    py: "10px",
+    pr: "12px",
+    pl: "16px",
+    bgcolor: e.primaryColor,
+    color: e.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    alignSelf: "center",
+    "&:hover": {
+      bgcolor: e.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: e.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      opacity: "12%"
+    },
+    "--Icon-color": e.onPrimaryColor,
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Start button text
+  startButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  },
+  // Stopwatch container
+  stopwatchContainer: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Pagination container
+  paginationContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "centered",
+    gap: e.spacingScale.md
+  },
+  // Lead collection container
+  leadCollectionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    p: 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.mdBorderRadius,
+    px: e.spacingScale.md,
+    pt: e.spacingScale.md,
+    pb: e.spacingScale.lg,
+    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.spacingScale.md
+  },
+  // Question container
+  questionContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.isMobile ? e.spacingScale.lg : e.spacingScale.md
+  },
+  // Question content container
+  questionContentContainer: {
+    borderRadius: e.mdBorderRadius,
+    px: e.spacingScale.md,
+    pt: e.spacingScale.md,
+    pb: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)"
+  },
+  // Aspect ratio container for embed/image
+  aspectRatioContainer: {
+    borderRadius: e.smBorderRadius
+  },
+  // Question image container
+  questionImageContainer: {
+    overflow: "hidden",
+    borderRadius: e.smBorderRadius
+  },
+  // Question image box
+  questionImageBox: {
+    borderRadius: e.smBorderRadius,
+    overflow: "hidden",
+    height: "auto"
+  },
+  // Question image
+  questionImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  // Question text container
+  questionTextContainer: {
+    gap: "8px",
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Question text
+  questionText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.textColor
+  },
+  // 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 {
+  a as createStyles
+};

package/packages/classic-quiz-play/src/constants/constants.js

@@ -0,0 +1,4 @@
+const o = ["timed", "countdown"];
+export {
+  o as quizTypes
+};

package/packages/classic-quiz-play/src/hooks/useClassicQuizById.js

@@ -0,0 +1,18 @@
+import { ClassicQuizFullModel as u } from "fansunited-sdk-esm";
+import { useState as l, useEffect as o } from "react";
+const m = (t, c) => {
+  const [i, s] = l(
+    null
+  ), r = async () => {
+    try {
+      const e = await c.miniGames.getClassicQuizById(t, !0, !0);
+      s(e);
+    } catch (e) {
+      console.error(e), s(new u());
+    }
+  };
+  return o(() => (r(), () => s(null)), [t, c]), i;
+};
+export {
+  m as useClassicQuizById
+};

package/packages/classic-quiz-play/src/hooks/useEmbedCodeContainer.js

@@ -0,0 +1,30 @@
+import { useRef as f, useEffect as m } from "react";
+const p = (c, a) => {
+  const r = f(null);
+  return m(() => {
+    var s;
+    if (c && r.current) {
+      r.current.innerHTML = c;
+      const i = r.current.getElementsByTagName("iframe");
+      for (let t = 0; t < i.length; t++) {
+        const e = i[t], n = e.src;
+        e.src = "", setTimeout(() => {
+          e.src = n;
+        }, 100);
+      }
+      const o = r.current.getElementsByTagName("script");
+      for (let t = 0; t < o.length; t++) {
+        const e = o[t], n = document.createElement("script");
+        Array.from(e.attributes).forEach((u) => {
+          n.setAttribute(u.name, u.value);
+        }), n.innerHTML = e.innerHTML, (s = e.parentNode) == null || s.replaceChild(n, e);
+      }
+    }
+    return () => {
+      r.current && (r.current.innerHTML = "");
+    };
+  }, [c, a]), r;
+};
+export {
+  p as useEmbedCode
+};

package/packages/classic-quiz-play/src/hooks/useMyParticipation.js

@@ -0,0 +1,40 @@
+import { ClassicQuizUserParticipationModel as g } from "fansunited-sdk-esm";
+import { useState as a, useEffect as m } from "react";
+const P = (s, e, u) => {
+  const [f, o] = a(null), [p, r] = a(!1), [l, t] = a(!1), d = async () => {
+    try {
+      const i = await e.miniGames.getMyClassicQuizParticipations({
+        classicQuizIds: [s]
+      });
+      o(i);
+    } catch (i) {
+      if (o([new g()]), e.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const c = i;
+        if (c.error.code === 401 || c.error.code === 403) {
+          r(!0);
+          return;
+        }
+        t(!0);
+        return;
+      }
+      const n = i;
+      if (n.data.error.code === 401 || n.data.error.code === 403) {
+        r(!0);
+        return;
+      }
+      t(!0);
+    }
+  };
+  return m(() => (d(), () => {
+    o([]), r(!1), t(!1);
+  }), [s, e, u]), {
+    myParticipation: f,
+    isUnauthorized: p,
+    isApiError: l,
+    setIsUnauthorized: r,
+    setIsApiError: t
+  };
+};
+export {
+  P as useMyParticipation
+};

package/packages/classic-quiz-play/src/hooks/useScoreStateHelpers.js

@@ -0,0 +1,117 @@
+import { useMemo as g } from "react";
+import "../../../common/src/providers/ContainerProvider.js";
+import { isAndroid as S } 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";
+import b from "../assets/hexagons/shape-hexagon-warning.svg.js";
+import Q from "../assets/hexagons/shape-hexagon-danger.svg.js";
+import D from "../assets/hexagons/shape-hexagon-success.svg.js";
+import z from "../assets/emojis/sports-medal.svg.js";
+import C from "../assets/emojis/trophy.svg.js";
+import w from "../assets/emojis/crown.svg.js";
+import x from "../assets/emojis/thumbs-down.svg.js";
+import I from "../assets/emojis/person-facepalming.svg.js";
+import k from "../assets/emojis/upside-down-face.svg.js";
+import E from "../assets/emojis/hundred-points.svg.js";
+import M from "../assets/emojis/direct-hit.svg.js";
+import H from "../assets/emojis/bottle-with-popping-cork.svg.js";
+import v from "../assets/emojis/3dicons-thumb-down-dynamic-color.svg.js";
+import y from "../assets/emojis/3dicons-medal-dynamic-color.svg.js";
+import R from "../assets/emojis/3dicons-flag-dynamic-color.svg.js";
+import $ from "../assets/emojis/3dicons-target-dynamic-color.svg.js";
+import B from "../assets/emojis/3dicons-bookmark-fav-dynamic-color.svg.js";
+import T from "../assets/emojis/3dicons-rocket-dynamic-color.svg.js";
+import A from "../assets/emojis/3dicons-crow-dynamic-color.svg.js";
+import F from "../assets/emojis/3dicons-fire-dynamic-color.svg.js";
+import { useTranslation as j } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const p = {
+  perfectScore: {
+    light: [C, w, E],
+    dark: [T, A, F]
+  },
+  averageScore: {
+    light: [z, H, M],
+    dark: [y, B, $]
+  },
+  badScore: {
+    light: [x, I, k],
+    dark: [v, R]
+  }
+}, u = {
+  danger: Q,
+  warning: b,
+  success: D
+}, bo = ({
+  summary: s,
+  totalTime: n,
+  classicQuiz: c
+}) => {
+  const { t: r } = j(), o = g(
+    () => Math.round(s.correct / s.classicQuizQuestions * 100),
+    [s.correct, s.classicQuizQuestions]
+  ), f = () => o <= 30 ? u.danger : o === 100 ? u.success : u.warning, m = () => {
+    const t = Math.floor(n / 60), e = n % 60;
+    return t === 0 ? `${e} ${r("common.labels.sec")}` : `${t} ${r("common.labels.min")} ${e} ${r(
+      "common.labels.sec"
+    )}`;
+  };
+  return {
+    scorePercentage: o,
+    getHexagonBackground: f,
+    formatTime: m,
+    displayCongratulations: () => o <= 30 ? r("classicQuiz.congratulations.lowScore", {
+      score: s.correct,
+      questionsCount: s.classicQuizQuestions
+    }) : o === 100 ? r("classicQuiz.congratulations.perfectScore") : o >= 70 ? r("classicQuiz.congratulations.goodScore", {
+      score: s.correct,
+      questionsCount: s.classicQuizQuestions
+    }) : r("classicQuiz.congratulations.mediumScore"),
+    getRandomEmoji: (t) => {
+      let e;
+      o === 100 ? e = p.perfectScore[t] : o > 30 ? e = p.averageScore[t] : e = p.badScore[t];
+      const i = Math.floor(Math.random() * e.length);
+      return e[i];
+    },
+    shareResult: () => {
+      var h, d;
+      const t = window.location.href.split("?")[0], e = n ? r("classicQuiz.share.timedTitle", {
+        scorePercentage: o,
+        time: m()
+      }) : r("classicQuiz.share.title", {
+        scorePercentage: o
+      }), i = n ? r("classicQuiz.share.timedBody", {
+        scorePercentage: o,
+        titleQuiz: c.title,
+        time: m(),
+        hashtags: ((h = c.labels) == null ? void 0 : h.hashtags) || ""
+      }) : r("classicQuiz.share.body", {
+        scorePercentage: o,
+        titleQuiz: c.title,
+        hashtags: ((d = c.labels) == null ? void 0 : d.hashtags) || ""
+      });
+      if (navigator.share)
+        navigator.share({
+          title: e,
+          text: i,
+          url: t
+        }).then(() => console.log("Successfully shared")).catch((a) => console.error("Error sharing:", a));
+      else if (S())
+        try {
+          Android.shareData(e, i, t);
+        } catch (a) {
+          console.error("Error sharing on android:", a);
+        }
+      else
+        (() => {
+          const l = document.createElement("textarea");
+          l.value = i + " " + t, document.body.appendChild(l), l.select(), document.execCommand("copy"), document.body.removeChild(l);
+        })();
+    }
+  };
+};
+export {
+  bo as useScoreStateHelpers
+};

package/packages/classic-quiz-play/src/index.js

@@ -0,0 +1,4 @@
+import o from "./main.js";
+export {
+  o as default
+};

package/packages/classic-quiz-play/src/main.js

@@ -0,0 +1,7 @@
+import { j as r } from "../../../node_modules/react/jsx-runtime.js";
+import i from "./components/ClassicQuizPlay.js";
+import s from "../../common/src/components/Portal.js";
+const e = (a) => /* @__PURE__ */ r.jsx(s, { packageName: "classic-quiz-play", ...a, children: /* @__PURE__ */ r.jsx(i, { ...a }) });
+export {
+  e as default
+};