@everymatrix/tournament-details-page 0.0.2 → 0.0.4

package/components/TournamentGames-CDfNoeoq.js

@@ -0,0 +1,335 @@
+import { b as Re, $ as Ie, p as Fe, g as He, h as w, u as pe, s as L, i as Xe, j as g, l as h, m as l, k as N, z as P, C as Ue, E as _, B as D, w as a, n as i, q as Je, r as qe, F as Ke, t as x, v as y, e as Qe, f as Ve, x as s, J as X, K as U, I as ee, y as te, L as ae, D as me } from "./TournamentDetails-glnpe9gf.js";
+import { g as Ye } from "./TournamentDetailsPage-DCB9anwm.js";
+function Ze(G, m) {
+  Re(G, m);
+}
+function $e(G) {
+  Ie.set(G);
+}
+const ve = {
+  en: {
+    previousButton: "Previous",
+    nextButton: "Next",
+    casinoTab: "Casino",
+    sportsbookTab: "Sportsbook",
+    gamesDescriptionTitle: "Participating games",
+    gamesDescriptionSubtitle: "Discover the games",
+    sportsRulesParseError: "Error parsing tournament rules",
+    noAvailableGames: "No games have been configured yet!"
+  },
+  tr: {
+    previousButton: "Previous",
+    nextButton: "Next",
+    casinoTab: "Casino",
+    sportsbookTab: "Sportsbook"
+  }
+}, et = () => typeof window > "u";
+var tt = g('<div class="TournamentGamesTabs svelte-p7mf8l"><button> </button> <button> </button></div>'), at = g('<p class="svelte-p7mf8l"> </p>'), nt = g("<div></div>"), ot = g('<div class="TournamentGameThumbnailSkeleton svelte-p7mf8l"></div>'), st = g('<div class="TournamentGameThumbnail svelte-p7mf8l"><div class="ImageContainer svelte-p7mf8l"><img class="svelte-p7mf8l"/> <div class="PlayButtonOverlay svelte-p7mf8l"><button class="PlayGameButton svelte-p7mf8l"> </button></div></div></div>'), rt = g('<span class="PaginationButton Elipsis svelte-p7mf8l">...</span>'), lt = g("<button> </button>"), it = g('<div><button class="PaginationButton svelte-p7mf8l"> </button> <div class="PageNumberWrapper svelte-p7mf8l"></div> <button class="PaginationButton svelte-p7mf8l"> </button></div>'), pt = g('<p class="NoGamesAvailable svelte-p7mf8l"> </p>'), mt = g('<div class="PaginationSkeleton svelte-p7mf8l"><div class="PaginationSkeletonButton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div> <div class="PaginationSkeletonButton svelte-p7mf8l"><div class="SkeletonShimmer svelte-p7mf8l"></div></div></div>'), vt = g('<div class="TournamentGamesWrapper svelte-p7mf8l"><div class="GamesDescription svelte-p7mf8l"><p class="GamesDescriptionTitle svelte-p7mf8l"> </p> <p class="GamesDescriptionSubTitle svelte-p7mf8l"> </p></div> <!> <!> <div><!></div> <!> <!></div>');
+const ct = {
+  hash: "svelte-p7mf8l",
+  code: `.svelte-p7mf8l,
+  .svelte-p7mf8l::before,
+  .svelte-p7mf8l::after {margin:0;padding:0;list-style:none;text-decoration:none;outline:none;box-sizing:border-box;font-family:inherit;}.GamesDescription.svelte-p7mf8l {display:flex;flex-direction:column;gap:6px;margin:10px 0;.GamesDescriptionTitle:where(.svelte-p7mf8l) {color:var(--emw-color-typography, #ffffff);font-size:16px;font-weight:600;}.GamesDescriptionSubTitle:where(.svelte-p7mf8l) {color:var(--emw-color-typography, #ffffff);font-size:14px;font-weight:200;}}.TournamentGamesTabs.svelte-p7mf8l {display:flex;border-radius:50px;background-color:var(--emw-color-bg-section, #434343);padding:6px;margin-bottom:6px;width:100%;justify-content:center;.Tab:where(.svelte-p7mf8l) {padding:5px 20px;color:var(--emw-color-typography, #ffffff);width:100%;border-radius:50px;background-color:transparent;border:none;cursor:pointer;}.Active:where(.svelte-p7mf8l) {background-color:var(--emw-color-bg-elements, #4A4A4A);border:none;}}.TournamentRulesWrapper.svelte-p7mf8l {display:flex;flex-direction:column;color:var(--emw-color-typography, #ffffff);font-size:14px;font-weight:400;margin:10px 0;}.TournamentGamesWrapper.svelte-p7mf8l {display:flex;flex-direction:column;gap:10px;background-color:var(--emw-color-bg-secondary, #333232);padding:10px;border-radius:6px;}.TournamentGamesContainer.svelte-p7mf8l {display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr));.TournamentGameThumbnailSkeleton:where(.svelte-p7mf8l) {position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:6px;background:linear-gradient(
+        to top,
+        var(--emw-color-primary, #FF1D4E),
+        transparent
+      );background-size:100% 200%;
+      animation: pulse 1.5s ease-in-out infinite;}.ImageContainer:where(.svelte-p7mf8l) {position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden;border-radius:6px;}img:where(.svelte-p7mf8l) {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:6px;}.PlayButtonOverlay:where(.svelte-p7mf8l) {position:absolute;top:0;left:0;bottom:0;right:0;background-color:rgba(0, 0, 0, 0.6);display:flex;justify-content:center;align-items:center;opacity:0;&:hover {opacity:1;transition:opacity 0.5s;}.PlayGameButton:where(.svelte-p7mf8l) {background-color:var(--emw-color-primary, #FF1D4E);border-radius:6px;color:var(--emw-color-typography, #ffffff);padding:10px;border:none;outline:none;min-width:50%;cursor:pointer;&:hover {background-color:var(--emw-color-primary-hover, #ff3a65);cursor:pointer;}&:active {transform:scale(0.9);}}}}.PaginationWrapper.svelte-p7mf8l {display:flex;justify-content:space-between;.PageNumberWrapper:where(.svelte-p7mf8l) {display:flex;gap:3px;}.PaginationButton:where(.svelte-p7mf8l) {background-color:var(--emw-color-bg-section, #434343);color:var(--emw-color-typography, #ffffff);border-radius:6px;border:none;outline:none;padding:10px;width:auto;cursor:pointer;&.Number {background-color:transparent;min-width:0;padding:0 10px;}&:hover {background-color:var(--emw-color-bg-elements, #4A4A4A);cursor:pointer;}&:active {transform:scale(0.9);}&:disabled {opacity:60%;pointer-events:none;}&.Active {background-color:var(--emw-color-bg-elements, #4A4A4A);}&.Elipsis {pointer-events:none;background-color:transparent;min-width:0;padding:0;align-self:center;}}}.NoGamesAvailable.svelte-p7mf8l {color:var(--emw-color-typography, #ffffff);font-size:14px;font-weight:300;}.PaginationSkeleton.svelte-p7mf8l {display:flex;justify-content:space-between;gap:6px;}.PaginationSkeletonButton.svelte-p7mf8l {width:80px;height:40px;border-radius:6px;background-color:var(--emw-color-skeleton, #333232);overflow:hidden;position:relative;}.PaginationNumberSkeleton.svelte-p7mf8l {width:40px;height:40px;border-radius:6px;background-color:var(--emw-color-skeleton, #333232);overflow:hidden;position:relative;}.SkeletonShimmer.svelte-p7mf8l {width:100%;height:100%;background:linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--emw-color-skeleton, #333232) 50%,
+      transparent 100%
+    );
+    animation: svelte-p7mf8l-loading 1.5s infinite;transform:translateX(-100%);}
+
+  @keyframes svelte-p7mf8l-loading {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @media (min-width: 750px) {.TournamentGamesTabs.svelte-p7mf8l {width:fit-content;}.PaginationWrapper.svelte-p7mf8l {justify-content:end;gap:10px;}.PaginationButton.svelte-p7mf8l {width:auto;min-width:75px;}
+  }.Hidden.svelte-p7mf8l {display:none;}`
+};
+function dt(G, m) {
+  Fe(m, !0), He(G, ct);
+  const b = () => Ue(Ke, "$_", ce), [ce, de] = qe(), O = w(m, "initialGames"), J = w(m, "endpoint"), M = w(m, "language", 7, "en"), W = w(m, "session"), z = w(m, "tournamentid"), d = w(m, "gamesLimit", 7, 6), j = w(m, "totalGames"), q = w(m, "platformProp", 7, null), A = w(m, "tournamentMetadata");
+  Object.keys(ve).forEach((e) => {
+    Ze(e, ve[e]);
+  });
+  const fe = () => {
+    $e(M());
+  };
+  pe(() => {
+    fe();
+  });
+  let C = L(Xe(O() || [])), E = L(!1), v = L(0), R = L(void 0);
+  const ue = et() ? q() ?? "dk" : Ye(window.navigator.userAgent), K = async () => {
+    if (Q.has(a(I)))
+      return;
+    x(E, !0);
+    const e = new URL(`${J()}/v1/tournaments/${z()}`), t = new Headers();
+    W() && t.append("X-SessionId", W());
+    const n = { method: "GET", headers: t };
+    e.searchParams.append("filter", `id=${z()}`), e.searchParams.append("language", M()), e.searchParams.append("expand", "games"), e.searchParams.append("pagination", `games(limit=${d()},offset=${a(v)})`), e.searchParams.append("platform", ue), fetch(e, n).then((o) => o.json()).then((o) => {
+      x(C, o?.item?.games?.items, !0), Q.set(a(I), a(C));
+    }).catch((o) => console.log(o)).finally(() => x(E, !1));
+  }, ge = () => {
+    const e = Math.ceil(j() / d()), t = Math.floor(a(v) / d()) + 1;
+    if (e <= 5)
+      return Array.from({ length: e }, (o, c) => c + 1);
+    const n = [];
+    return n.push(1), t <= 3 ? (n.push(2, 3), n.push("..."), n.push(e)) : t >= e - 2 ? (n.push("..."), n.push(e - 2, e - 1, e)) : (n.push("..."), n.push(t - 1, t, t + 1), n.push("..."), n.push(e)), n;
+  }, be = () => {
+    a(v) < j() && (x(v, a(v) + d()), K());
+  }, he = () => {
+    a(v) !== 0 && (x(v, a(v) - d()), K());
+  }, _e = (e) => {
+    x(v, (e - 1) * d()), K();
+  }, xe = ae(ge), I = ae(() => Math.floor(a(v) / d()) + 1);
+  let Q = /* @__PURE__ */ new Map([[1, O()]]), we = ae(() => Q.get(a(I)) ?? []), S = L("casino");
+  const ye = () => {
+    if (!A()) return;
+    const e = A().sports?.rules;
+    let t;
+    if (e)
+      try {
+        t = JSON.parse(e), x(R, t[M()] || t["*"], !0);
+      } catch (n) {
+        console.log(n), x(R, `${b()("sportsRulesParseError")}`);
+      }
+  }, ke = (e) => {
+    window.postMessage(
+      {
+        type: "Tournaments:PlayGame",
+        launchUrl: e.launchUrl,
+        id: e.gameId,
+        platform: e.platform,
+        thumbnail: e.thumbnail,
+        name: e.name
+      },
+      window.location.href
+    );
+  };
+  pe(() => {
+    Object.keys(A()).length !== 0 && ye();
+  });
+  var Pe = {
+    get initialGames() {
+      return O();
+    },
+    set initialGames(e) {
+      O(e), y();
+    },
+    get endpoint() {
+      return J();
+    },
+    set endpoint(e) {
+      J(e), y();
+    },
+    get language() {
+      return M();
+    },
+    set language(e = "en") {
+      M(e), y();
+    },
+    get session() {
+      return W();
+    },
+    set session(e) {
+      W(e), y();
+    },
+    get tournamentid() {
+      return z();
+    },
+    set tournamentid(e) {
+      z(e), y();
+    },
+    get gamesLimit() {
+      return d();
+    },
+    set gamesLimit(e = 6) {
+      d(e), y();
+    },
+    get totalGames() {
+      return j();
+    },
+    set totalGames(e) {
+      j(e), y();
+    },
+    get platformProp() {
+      return q();
+    },
+    set platformProp(e = null) {
+      q(e), y();
+    },
+    get tournamentMetadata() {
+      return A();
+    },
+    set tournamentMetadata(e) {
+      A(e), y();
+    }
+  }, V = vt(), Y = l(V), Z = l(Y), Se = l(Z, !0);
+  s(Z);
+  var ne = h(Z, 2), Te = l(ne, !0);
+  s(ne), s(Y);
+  var oe = h(Y, 2);
+  {
+    var Ge = (e) => {
+      var t = tt(), n = l(t);
+      let o;
+      n.__click = () => x(S, "casino");
+      var c = l(n, !0);
+      s(n);
+      var r = h(n, 2);
+      let p;
+      r.__click = () => x(S, "sports");
+      var f = l(r, !0);
+      s(r), s(t), P(
+        (k, u) => {
+          o = D(n, 1, "Tab svelte-p7mf8l", null, o, { Active: a(S) === "casino" }), _(c, k), p = D(r, 1, "Tab svelte-p7mf8l", null, p, { Active: a(S) === "sports" }), _(f, u);
+        },
+        [() => b()("casinoTab"), () => b()("sportsbookTab")]
+      ), i(e, t);
+    };
+    N(oe, (e) => {
+      Object.keys(A()).length !== 0 && e(Ge);
+    });
+  }
+  var se = h(oe, 2);
+  {
+    var Ae = (e) => {
+      var t = nt();
+      let n;
+      X(t, 21, () => a(R), U, (o, c) => {
+        var r = at(), p = l(r);
+        s(r), P((f) => _(p, `${a(c).rule ?? ""} ${f ?? ""}`), [() => b()("contribution")]), i(o, r);
+      }), s(t), P(() => n = D(t, 1, "TournamentRulesWrapper svelte-p7mf8l", null, n, { Hidden: a(S) === "casino" })), i(e, t);
+    };
+    N(se, (e) => {
+      a(R) && e(Ae);
+    });
+  }
+  var F = h(se, 2);
+  let re;
+  var Be = l(F);
+  {
+    var Ne = (e) => {
+      var t = ee(), n = te(t);
+      X(n, 17, () => Array(d()), U, (o, c, r, p) => {
+        var f = ot();
+        i(o, f);
+      }), i(e, t);
+    }, De = (e) => {
+      var t = ee(), n = te(t);
+      X(n, 17, () => a(we), U, (o, c) => {
+        var r = st();
+        r.__click = () => ke(a(c));
+        var p = l(r), f = l(p), k = h(f, 2), u = l(k), H = l(u, !0);
+        s(u), s(k), s(p), s(r), P(
+          ($) => {
+            me(f, "src", `https:${a(c).thumbnail}`), me(f, "alt", a(c).name), _(H, $);
+          },
+          [() => b()("play")]
+        ), i(o, r);
+      }), i(e, t);
+    };
+    N(Be, (e) => {
+      a(E) && a(C)?.length === 0 ? e(Ne) : e(De, !1);
+    });
+  }
+  s(F);
+  var le = h(F, 2);
+  {
+    var Me = (e) => {
+      var t = it();
+      let n;
+      var o = l(t);
+      o.__click = he;
+      var c = l(o, !0);
+      s(o);
+      var r = h(o, 2);
+      X(r, 21, () => a(xe), U, (k, u) => {
+        var H = ee(), $ = te(H);
+        {
+          var We = (B) => {
+            var T = rt();
+            i(B, T);
+          }, ze = (B) => {
+            var T = lt();
+            let ie;
+            T.__click = () => _e(a(u));
+            var Ce = l(T, !0);
+            s(T), P(() => {
+              ie = D(T, 1, "PaginationButton Number svelte-p7mf8l", null, ie, { Active: a(u) === a(I) }), _(Ce, a(u));
+            }), i(B, T);
+          };
+          N($, (B) => {
+            typeof a(u) != "number" ? B(We) : B(ze, !1);
+          });
+        }
+        i(k, H);
+      }), s(r);
+      var p = h(r, 2);
+      p.__click = be;
+      var f = l(p, !0);
+      s(p), s(t), P(
+        (k, u) => {
+          n = D(t, 1, "PaginationWrapper svelte-p7mf8l", null, n, { Hidden: a(S) === "sports" }), o.disabled = a(v) === 0, _(c, k), p.disabled = a(v) >= j() - d(), _(f, u);
+        },
+        [() => b()("previousButton"), () => b()("nextButton")]
+      ), i(e, t);
+    }, je = (e) => {
+      var t = pt(), n = l(t, !0);
+      s(t), P((o) => _(n, o), [() => b()("noAvailableGames")]), i(e, t);
+    };
+    N(le, (e) => {
+      !a(E) && a(C)?.length > 0 ? e(Me) : e(je, !1);
+    });
+  }
+  var Ee = h(le, 2);
+  {
+    var Le = (e) => {
+      var t = mt();
+      i(e, t);
+    };
+    N(Ee, (e) => {
+      a(E) && e(Le);
+    });
+  }
+  s(V), P(
+    (e, t) => {
+      _(Se, e), _(Te, t), re = D(F, 1, "TournamentGamesContainer svelte-p7mf8l", null, re, { Hidden: a(S) === "sports" });
+    },
+    [
+      () => b()("gamesDescriptionTitle"),
+      () => b()("gamesDescriptionSubtitle")
+    ]
+  ), i(G, V);
+  var Oe = Je(Pe);
+  return de(), Oe;
+}
+Qe(["click"]);
+customElements.define("tournament-games", Ve(
+  dt,
+  {
+    initialGames: {},
+    endpoint: {},
+    language: {},
+    session: {},
+    tournamentid: {},
+    gamesLimit: {},
+    totalGames: {},
+    platformProp: {},
+    tournamentMetadata: {}
+  },
+  [],
+  [],
+  !1
+));
+export {
+  dt as default
+};