@everymatrix/tournament-details-page 0.1.0 → 0.1.2

package/components/TournamentGames-32LeAEHF.js

@@ -0,0 +1,376 @@
+import { a as Fe, $ as qe, j as Je, b as Ke, p as _, u as Xe, d as ue, y as L, L as Qe, P as Ve, k as x, i as B, t as S, l as y, G as N, r as a, e as p, f as Ye, w as Ze, x as $e, s as et, q as f, h as w, v as l, g, m as tt, n as at, A as s, D as Q, E as V, B as Y, C as Z, z as ie, N as de } from "./TournamentDetailsPage-BL5YSX6c.js";
+function fe(D, c) {
+  Fe(D, c);
+}
+function ge(D) {
+  qe.set(D);
+}
+const be = {
+  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: "Önceki",
+    nextButton: "Sonraki",
+    casinoTab: "Casino",
+    sportsbookTab: "Spor Bahisleri",
+    gamesDescriptionTitle: "Katılımcı oyunlar",
+    gamesDescriptionSubtitle: "Oyunları keşfedin",
+    sportsRulesParseError: "Turnuva kuralları ayrıştırma hatası",
+    noAvailableGames: "Henüz oyun yapılandırılmamış!"
+  }
+}, nt = () => typeof window > "u";
+var ot = g('<div class="TournamentGamesTabs svelte-p7mf8l"><button> </button> <button> </button></div>'), rt = g('<p class="svelte-p7mf8l"> </p>'), st = g("<div></div>"), it = g('<div class="TournamentGameThumbnailSkeleton svelte-p7mf8l"></div>'), lt = g("<p> </p>"), pt = 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>'), mt = g('<span class="PaginationButton Elipsis svelte-p7mf8l">...</span>'), ct = g("<button> </button>"), vt = g('<div><button class="PaginationButton svelte-p7mf8l"> </button> <div class="PageNumberWrapper svelte-p7mf8l"></div> <button class="PaginationButton svelte-p7mf8l"> </button></div>'), ut = g('<div class="PaginationSkeleton svelte-p7mf8l"><div class="PaginationSkeletonButton svelte-p7mf8l"></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"></div> <div class="PaginationNumberSkeleton svelte-p7mf8l"></div> <div class="PaginationSkeletonButton svelte-p7mf8l"></div></div>'), dt = 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 ft = {
+  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;min-height:150px;}.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-fill, minmax(min(170px, 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: svelte-p7mf8l-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:where(.svelte-p7mf8l) {width:60px;height:35px;border-radius:6px;background-color:var(--emw-color-skeleton, #535353);overflow:hidden;position:relative;
+      animation: svelte-p7mf8l-pulse 1s infinite;}.PaginationNumberSkeleton:where(.svelte-p7mf8l) {width:40px;height:35px;border-radius:6px;background-color:var(--emw-color-skeleton, #535353);overflow:hidden;position:relative;
+      animation: svelte-p7mf8l-pulse 1s infinite;}}
+
+  @keyframes svelte-p7mf8l-pulse {
+      0% {
+        opacity: 0;
+      }
+      50% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+  }
+
+
+  @media (min-width: 750px) {.TournamentGamesTabs.svelte-p7mf8l {width:fit-content;}.PaginationWrapper.svelte-p7mf8l, .PaginationSkeleton.svelte-p7mf8l {justify-content:end;gap:10px;}.PaginationButton.svelte-p7mf8l {min-width:75px;}.PaginationSkeleton.svelte-p7mf8l {justify-content:end;gap:10px;.PaginationSkeletonButton:where(.svelte-p7mf8l) {width:auto;min-width:55px;}.PaginationNumberSkeleton:where(.svelte-p7mf8l) {width:35px;}}
+
+  }.Hidden.svelte-p7mf8l {display:none;}`
+};
+function gt(D, c) {
+  Je(c, !0), Ke(D, ft);
+  const b = () => Ze($e, "$_", he), [he, _e] = et(), R = _(c, "initialGames"), $ = _(c, "endpoint"), j = _(c, "language", 7, "en"), W = _(c, "session"), z = _(c, "tournamentid"), v = _(c, "gamesLimit", 7, 6), M = _(c, "totalGames"), ee = _(c, "platformProp", 7, null), E = _(c, "tournamentMetadata"), C = _(c, "translationurl"), xe = () => {
+    let e = new URL(C());
+    fetch(e.href).then((t) => t.json()).then((t) => {
+      Object.keys(t).forEach((n) => {
+        fe(n, t[n]);
+      });
+    }).catch((t) => {
+      console.log(t);
+    });
+  };
+  Object.keys(be).forEach((e) => {
+    fe(e, be[e]);
+  }), ge(j());
+  const ye = () => {
+    ge(j());
+  };
+  Xe(() => {
+    C() && xe();
+  }), ue(() => {
+    ye();
+  });
+  let te = L(Qe(R() || [])), H = L(!1), u = L(0), I = L(void 0), U = L(!0);
+  const we = nt() ? ee() ?? "dk" : Ve(window.navigator.userAgent), ae = async () => {
+    if (ne.has(a(F)))
+      return;
+    f(H, !0);
+    const e = new URL(`${$()}/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", j()), e.searchParams.append("expand", "games"), e.searchParams.append("pagination", `games(limit=${v()},offset=${a(u)})`), e.searchParams.append("platform", we), fetch(e, n).then((o) => o.json()).then((o) => {
+      f(te, o?.item?.games?.items, !0), ne.set(a(F), a(te)), a(U) || f(U, !0);
+    }).catch((o) => console.log(o)).finally(() => f(H, !1));
+  }, ke = () => {
+    const e = Math.ceil(M() / v()), t = Math.floor(a(u) / v()) + 1;
+    if (e <= 5)
+      return Array.from({ length: e }, (o, h) => h + 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;
+  }, Pe = () => {
+    a(u) < M() && (f(u, a(u) + v()), ae());
+  }, Te = () => {
+    a(u) !== 0 && (f(u, a(u) - v()), ae());
+  }, Ge = (e) => {
+    f(u, (e - 1) * v()), ae();
+  }, Se = ie(ke), F = ie(() => Math.floor(a(u) / v()) + 1);
+  let ne = /* @__PURE__ */ new Map([[1, R()]]), Ae = ie(() => ne.get(a(F)) ?? []), G = L("casino");
+  const Be = () => {
+    if (!E()) return;
+    const e = E().sports?.rules;
+    let t;
+    if (e)
+      try {
+        t = JSON.parse(e), f(I, t[j()] || t["*"], !0);
+      } catch (n) {
+        console.log(n), f(I, `${b()("sportsRulesParseError")}`);
+      }
+  }, Ne = (e) => {
+    window.postMessage(
+      {
+        type: "Tournaments:PlayGame",
+        launchUrl: e.launchUrl,
+        id: e.gameId,
+        thumbnail: e.thumbnail,
+        name: e.name
+      },
+      window.location.href
+    );
+  };
+  ue(() => {
+    Object.keys(E()).length !== 0 && Be();
+  });
+  var De = {
+    get initialGames() {
+      return R();
+    },
+    set initialGames(e) {
+      R(e), w();
+    },
+    get endpoint() {
+      return $();
+    },
+    set endpoint(e) {
+      $(e), w();
+    },
+    get language() {
+      return j();
+    },
+    set language(e = "en") {
+      j(e), w();
+    },
+    get session() {
+      return W();
+    },
+    set session(e) {
+      W(e), w();
+    },
+    get tournamentid() {
+      return z();
+    },
+    set tournamentid(e) {
+      z(e), w();
+    },
+    get gamesLimit() {
+      return v();
+    },
+    set gamesLimit(e = 6) {
+      v(e), w();
+    },
+    get totalGames() {
+      return M();
+    },
+    set totalGames(e) {
+      M(e), w();
+    },
+    get platformProp() {
+      return ee();
+    },
+    set platformProp(e = null) {
+      ee(e), w();
+    },
+    get tournamentMetadata() {
+      return E();
+    },
+    set tournamentMetadata(e) {
+      E(e), w();
+    },
+    get translationurl() {
+      return C();
+    },
+    set translationurl(e) {
+      C(e), w();
+    }
+  }, oe = dt(), re = l(oe), se = l(re), je = l(se, !0);
+  s(se);
+  var le = x(se, 2), Me = l(le, !0);
+  s(le), s(re);
+  var pe = x(re, 2);
+  {
+    var Ee = (e) => {
+      var t = ot(), n = l(t);
+      let o;
+      n.__click = () => f(G, "casino");
+      var h = l(n, !0);
+      s(n);
+      var r = x(n, 2);
+      let i;
+      r.__click = () => f(G, "sports");
+      var d = l(r, !0);
+      s(r), s(t), S(
+        (k, m) => {
+          o = N(n, 1, "Tab svelte-p7mf8l", null, o, { Active: a(G) === "casino" }), y(h, k), i = N(r, 1, "Tab svelte-p7mf8l", null, i, { Active: a(G) === "sports" }), y(d, m);
+        },
+        [() => b()("casinoTab"), () => b()("sportsbookTab")]
+      ), p(e, t);
+    };
+    B(pe, (e) => {
+      Object.keys(E()).length !== 0 && e(Ee);
+    });
+  }
+  var me = x(pe, 2);
+  {
+    var Le = (e) => {
+      var t = st();
+      let n;
+      Q(t, 21, () => a(I), V, (o, h) => {
+        var r = rt(), i = l(r);
+        s(r), S((d) => y(i, `${a(h).rule ?? ""} ${d ?? ""}`), [() => b()("contribution")]), p(o, r);
+      }), s(t), S(() => n = N(t, 1, "TournamentRulesWrapper svelte-p7mf8l", null, n, { Hidden: a(G) === "casino" })), p(e, t);
+    };
+    B(me, (e) => {
+      a(I) && e(Le);
+    });
+  }
+  var q = x(me, 2);
+  let ce;
+  var Oe = l(q);
+  {
+    var Re = (e) => {
+      var t = Y(), n = Z(t);
+      Q(n, 17, () => Array(v()), V, (o, h, r, i) => {
+        var d = it();
+        p(o, d);
+      }), p(e, t);
+    }, We = (e) => {
+      var t = Y(), n = Z(t);
+      {
+        var o = (r) => {
+          var i = lt();
+          let d;
+          var k = l(i, !0);
+          s(i), S(
+            (m) => {
+              d = N(i, 1, "NoGamesAvailable svelte-p7mf8l", null, d, { Hidden: a(G) === "sports" }), y(k, m);
+            },
+            [() => b()("noAvailableGames")]
+          ), p(r, i);
+        }, h = (r) => {
+          var i = Y(), d = Z(i);
+          Q(d, 17, () => a(Ae), V, (k, m) => {
+            var A = pt();
+            A.__click = () => Ne(a(m));
+            var J = l(A), O = l(J), K = x(O, 2), P = l(K), T = l(P, !0);
+            s(P), s(K), s(J), s(A), S(
+              (X) => {
+                de(O, "src", `https:${a(m).thumbnail}`), de(O, "alt", a(m).name), y(T, X);
+              },
+              [() => b()("play")]
+            ), p(k, A);
+          }), p(r, i);
+        };
+        B(
+          n,
+          (r) => {
+            !a(H) && a(te)?.length === 0 ? r(o) : r(h, !1);
+          },
+          !0
+        );
+      }
+      p(e, t);
+    };
+    B(Oe, (e) => {
+      a(H) ? e(Re) : e(We, !1);
+    });
+  }
+  s(q);
+  var ve = x(q, 2);
+  {
+    var ze = (e) => {
+      var t = vt();
+      let n;
+      var o = l(t);
+      o.__click = Te;
+      var h = l(o, !0);
+      s(o);
+      var r = x(o, 2);
+      Q(r, 21, () => a(Se), V, (k, m) => {
+        var A = Y(), J = Z(A);
+        {
+          var O = (P) => {
+            var T = mt();
+            p(P, T);
+          }, K = (P) => {
+            var T = ct();
+            let X;
+            T.__click = () => Ge(a(m));
+            var Ue = l(T, !0);
+            s(T), S(() => {
+              X = N(T, 1, "PaginationButton Number svelte-p7mf8l", null, X, { Active: a(m) === a(F) }), y(Ue, a(m));
+            }), p(P, T);
+          };
+          B(J, (P) => {
+            typeof a(m) != "number" ? P(O) : P(K, !1);
+          });
+        }
+        p(k, A);
+      }), s(r);
+      var i = x(r, 2);
+      i.__click = Pe;
+      var d = l(i, !0);
+      s(i), s(t), S(
+        (k, m) => {
+          n = N(t, 1, "PaginationWrapper svelte-p7mf8l", null, n, { Hidden: a(G) === "sports" }), o.disabled = a(u) === 0, y(h, k), i.disabled = a(u) >= M() - v(), y(d, m);
+        },
+        [() => b()("previousButton"), () => b()("nextButton")]
+      ), p(e, t);
+    };
+    B(ve, (e) => {
+      a(U) && M() > v() && e(ze);
+    });
+  }
+  var Ce = x(ve, 2);
+  {
+    var He = (e) => {
+      var t = ut();
+      p(e, t);
+    };
+    B(Ce, (e) => {
+      a(U) || e(He);
+    });
+  }
+  s(oe), S(
+    (e, t) => {
+      y(je, e), y(Me, t), ce = N(q, 1, "TournamentGamesContainer svelte-p7mf8l", null, ce, { Hidden: a(G) === "sports" });
+    },
+    [
+      () => b()("gamesDescriptionTitle"),
+      () => b()("gamesDescriptionSubtitle")
+    ]
+  ), p(D, oe);
+  var Ie = Ye(De);
+  return _e(), Ie;
+}
+tt(["click"]);
+customElements.define("tournament-games", at(
+  gt,
+  {
+    initialGames: {},
+    endpoint: {},
+    language: {},
+    session: {},
+    tournamentid: {},
+    gamesLimit: {},
+    totalGames: {},
+    platformProp: {},
+    tournamentMetadata: {},
+    translationurl: {}
+  },
+  [],
+  [],
+  !1
+));
+export {
+  gt as default
+};