@everymatrix/casino-lobby 1.42.0 → 1.42.69

package/stencil/casino-play-random-game-CE7d8ftV.js

@@ -0,0 +1,559 @@
+import { b as c, p as h, r as p, h as t, g } from "./index-bc02f5d1-CGWk9tpa.js";
+import { g as u } from "./app-globals-0f993ce5-D-kw1sls.js";
+var f = () => {
+  const n = import.meta.url, e = {};
+  return n !== "" && (e.resourcesUrl = new URL(".", n).href), h(e);
+};
+f().then(async (n) => (await u(), c([["casino-play-random-game", [[1, "casino-play-random-game", { endpoint: [513], datasource: [513], language: [513], specificCategory: [513, "specific-category"], iconVisible: [513, "icon-visible"], iconVisibleOnAnim: [513, "icon-visible-on-anim"], launchByGameCard: [513, "launch-by-game-card"], clientStyling: [513, "client-styling"], clientStylingUrl: [513, "client-styling-url"], translationUrl: [513, "translation-url"], hasErrors: [32], limitStylingAppends: [32], isLoading: [32], gamesToShow: [32], selectedGame: [32], animationDone: [32], animationStarted: [32] }, null, { endpoint: ["watchEndpoint"], datasource: ["watchEndpoint"], language: ["watchEndpoint"], translationUrl: ["handleNewTranslations"], iconVisible: ["handleIsIconVisible"] }]]]], n)));
+const w = () => {
+  let n = window.navigator.userAgent;
+  return n.toLowerCase().match(/android/i) ? "Android" : n.toLowerCase().match(/iphone/i) ? "iPhone" : n.toLowerCase().match(/ipad|ipod/i) ? "iPad" : "PC";
+}, x = "en", r = {
+  en: {
+    error: "Error",
+    randomGameLoading: "Loading ...",
+    playRandomGame: "Play a random game",
+    playNowRandomGame: "Play now",
+    spinRandomGame: "Spin"
+  },
+  ro: {
+    error: "Error",
+    randomGameLoading: "Loading ...",
+    playRandomGame: "Play a random game",
+    playNowRandomGame: "Play now",
+    spinRandomGame: "Spin"
+  },
+  fr: {
+    error: "Error",
+    randomGameLoading: "Loading ...",
+    playRandomGame: "Play a random game",
+    playNowRandomGame: "Play now",
+    spinRandomGame: "Spin"
+  },
+  hr: {
+    error: "Greška",
+    randomGameLoading: "Učitavanje ...",
+    playRandomGame: "Igraj nasumičnu igru",
+    playNowRandomGame: "Igraj sada",
+    spinRandomGame: "Zavrti"
+  },
+  hu: {
+    error: "Error",
+    randomGameLoading: "Loading ...",
+    playRandomGame: "Play a random game",
+    playNowRandomGame: "Play now",
+    spinRandomGame: "Spin"
+  },
+  tr: {
+    error: "Hata",
+    randomGameLoading: "Yükleniyor...",
+    playRandomGame: "Rasgele bir oyun oyna",
+    playNowRandomGame: "Şimdi Oyna",
+    spinRandomGame: "DEĞİŞTİR"
+  }
+}, l = (n) => new Promise((e) => {
+  fetch(n).then((i) => i.json()).then((i) => {
+    Object.keys(i).forEach((a) => {
+      r[a] || (r[a] = {});
+      for (let s in i[a])
+        r[a][s] = i[a][s];
+    }), e(!0);
+  });
+}), o = (n, e) => {
+  const i = e;
+  return r[i !== void 0 && i in r ? i : x][n];
+}, y = `:host {
+  display: block;
+  font-family: inherit;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+:host * {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.RandomGameWrapper {
+  width: 100%;
+  height: var(--emw--size-4x-medium, 700px);
+  background: transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+.GameContainerGradient {
+  position: absolute;
+  top: 10%;
+  left: -5px;
+  width: 100vw;
+  height: 80%;
+  background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);
+  pointer-events: none;
+  z-index: 1;
+  filter: blur(10px);
+}
+
+.GamesContainer {
+  display: flex;
+  height: var(--emw--size-4x-medium, 600px);
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: flex-start;
+  gap: var(--emw--spacing-large, 20px);
+}
+
+.RandomGameCard {
+  position: relative;
+  width: var(--emw--size-3x-medium, 300px);
+  height: var(--emw--size-4x-medium, 420px);
+  border-radius: var(--emw--border-radius-large, 20px);
+  top: 8%;
+  filter: blur(5px);
+}
+.RandomGameCard .RandomGameVendor {
+  position: absolute;
+  font-size: var(--emw--font-size-x-small, 12px);
+  bottom: var(--emw--spacing-small-minus, 10px);
+  left: var(--emw--spacing-small-minus, 10px);
+  color: var(--emw--color-typography, #FFFFFF);
+}
+
+.TheRandomGame {
+  animation-name: ZoomFadeIn;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+  -webkit-animation-name: ZoomFadeIn;
+  -webkit-animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+  opacity: 1;
+  cursor: pointer;
+  filter: blur(0);
+}
+
+.RandomGameImage {
+  width: inherit;
+  height: inherit;
+  object-fit: cover;
+  border-radius: var(--emw--border-radius-large, 20px);
+}
+
+.RandomGameDetails {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--emw--color-typography, #FFFFFF);
+  font-size: var(--emw--font-size-small, 14px);
+  width: 100%;
+}
+.RandomGameDetails .RandomGameTitle {
+  line-height: 18px;
+}
+.RandomGameDetails .RandomGameInfo {
+  border-radius: 50%;
+  width: var(--emw--spacing-medium, 16px);
+  height: var(--emw--spacing-medium, 16px);
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-normal, 400);
+  border: solid 1px var(--emw--color-typography, #FFFFFF);
+  text-align: center;
+  margin: var(--emw--spacing-2x-small, 4px) 0;
+  line-height: 14px;
+  cursor: pointer;
+}
+.RandomGameDetails .RandomGamePlay {
+  background: var(--emw--color-primary, #4bd004);
+  color: var(--emw--color-typography, #FFFFFF);
+  border: none;
+  border-radius: var(--emw--border-radius-medium, 5px);
+  width: 200px;
+  height: 40px;
+  font-size: var(--emw--font-size-small, 14px);
+  cursor: pointer;
+}
+
+.ButtonWrapper {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 20;
+}
+
+.ButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  position: relative;
+}
+
+.ButtonIcon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--emw--spacing-2x-small, 5px);
+}
+
+.QustionMark {
+  position: absolute;
+  font-family: sans-serif;
+  font-size: 120px;
+  font-weight: 900;
+  color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);
+  text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);
+  left: 50%;
+  top: -20%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+.HexagonMarkShadow {
+  width: 100px;
+  height: 115px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);
+  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
+}
+
+.HexagonMark {
+  position: absolute;
+  width: var(--emw--size-medium, 90px);
+  height: 105px;
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);
+  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
+}
+
+.RandomButtons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: var(--emw--spacing-2x-small, 5px);
+  width: 100%;
+  position: relative;
+  z-index: 10;
+}
+
+.RandomButton {
+  font-size: var(--emw--font-size-large, 20px);
+  text-transform: uppercase;
+  width: max-content;
+  border-radius: var(--emw--button-border-radius, 50px);
+  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);
+  border: solid 3px var(--emw--button-border-color, #063B17);
+  color: var(--emw--button-text-color, #FFFFFF);
+  opacity: 1;
+  animation: ButtonEffect 3s linear infinite;
+  background-image: linear-gradient(to right, var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E), black 30%), var(--emw--color-primary, #22B04E));
+  background-size: 300% 100%;
+  cursor: pointer;
+  position: relative;
+  z-index: 10;
+}
+.RandomButton:hover {
+  opacity: 0.8;
+}
+
+.HideAnimation {
+  filter: blur(5px);
+  animation: AnimateButton 0.2s forwards;
+}
+
+.Flip {
+  animation-name: Flip, Blur;
+  animation-duration: 0.75s, 3s;
+  animation-iteration-count: infinite, 1;
+  -webkit-animation-name: Flip, Blur;
+  -webkit-animation-duration: 0.75s, 3s;
+  -webkit-animation-iteration-count: infinite, 1;
+}
+
+@keyframes ButtonEffect {
+  0% {
+    background-position: 0% 50%;
+  }
+  33% {
+    background-position: 100% 50%;
+  }
+  66% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: 300% 50%;
+  }
+}
+@keyframes ZoomFadeIn {
+  0% {
+    transform: scale(0.2) translateY(0);
+    filter: blur(5px);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.1) translateY(-30px);
+    filter: blur(2px);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1) translateY(-30px);
+    filter: blur(0px);
+    opacity: 1;
+  }
+}
+@keyframes AnimateButton {
+  0% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}
+@keyframes Flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  50% {
+    transform: rotateY(180deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+@keyframes Blur {
+  0% {
+    filter: blur(0);
+  }
+  50% {
+    filter: blur(1px);
+  }
+  100% {
+    filter: blur(3px);
+  }
+}
+@container (max-width: 475px) {
+  .GamesContainer {
+    height: inherit;
+    gap: var(--emw--spacing-2x-small, 5px);
+  }
+  .RandomGameWrapper {
+    width: 100%;
+    height: 300px;
+    overflow: hidden;
+    background: transparent;
+    position: relative;
+  }
+  .GameContainerGradient {
+    position: absolute;
+    top: 10%;
+    left: -5px;
+    width: 100vw;
+    height: 80%;
+    background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);
+    pointer-events: none;
+    z-index: 1;
+    filter: blur(5px);
+  }
+  .RandomGameCard {
+    width: 100px;
+    height: 150px;
+    top: 0%;
+    border-radius: var(--emw--border-radius-medium, 4px);
+    filter: blur(5px);
+  }
+  .RandomGameImage {
+    width: 102px;
+    height: inherit;
+    top: 0%;
+  }
+  .RandomGameDetails {
+    font-size: 14px;
+    width: 100%;
+  }
+  .RandomGameDetails .RandomGameTitle {
+    line-height: 18px;
+    width: 75%;
+  }
+  .RandomGameDetails .RandomGameInfo {
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    font-size: var(--emw--font-size-x-small, 12px);
+    line-height: 14px;
+  }
+  .RandomGameDetails .RandomGamePlay {
+    background: var(--emw--color-primary, #52d004);
+    color: var(--emw--color-typography, #FFFFFF);
+    border: none;
+    border-radius: 5px;
+    width: 200px;
+    height: 40px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .RandomGameCard .RandomGameVendor {
+    font-size: var(--emw--font-size-x-small, 12px);
+    bottom: 5px;
+    right: 5px;
+  }
+  .RandomButtons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    width: 100%;
+  }
+  .RandomButton {
+    font-size: var(--emw--font-size-x-small, 12px);
+    padding: 10px 15px;
+    border: solid 1px var(--emw--button-border-color, #063B17);
+  }
+  .QustionMark {
+    font-size: 100px;
+    font-weight: 700;
+  }
+  .HexagonMarkShadow {
+    width: 80px;
+    height: 95px;
+  }
+  .HexagonMark {
+    width: 70px;
+    height: 85px;
+  }
+}`, G = y, b = class {
+  constructor(n) {
+    p(this, n), this.language = "en", this.specificCategory = "", this.iconVisible = "", this.iconVisibleOnAnim = "", this.launchByGameCard = "", this.clientStyling = "", this.clientStylingUrl = "", this.translationUrl = "", this.hasErrors = !1, this.limitStylingAppends = !1, this.isLoading = !0, this.selectedGame = null, this.animationDone = !1, this.animationStarted = !1, this.animation = null, this.selectedGameIndex = null, this.selectedGameEl = null, this.iconVisibility = null, this.shuffle = (e) => {
+      let i = e.length, a;
+      for (; i !== 0; )
+        a = Math.floor(Math.random() * i), i--, [e[i], e[a]] = [e[a], e[i]];
+      return e;
+    }, this.setClientStyling = () => {
+      let e = document.createElement("style");
+      e.innerHTML = this.clientStyling, this.host.shadowRoot.prepend(e);
+    }, this.setClientStylingURL = () => {
+      let e = new URL(this.clientStylingUrl), i = document.createElement("style");
+      fetch(e.href).then((a) => a.text()).then((a) => {
+        i.innerHTML = a, this.clientStyling = a, setTimeout(() => {
+          this.host.shadowRoot.prepend(i);
+        }, 1);
+      });
+    };
+  }
+  watchEndpoint(n, e) {
+    n && n != e && this.endpoint && this.fetchGameList();
+  }
+  handleNewTranslations() {
+    this.isLoading = !0, l(this.translationUrl).then(() => {
+      this.isLoading = !1;
+    });
+  }
+  handleIsIconVisible() {
+    this.iconVisibility = this.iconVisible === "true";
+  }
+  connectedCallback() {
+    this.handleIsIconVisible();
+  }
+  componentWillLoad() {
+    if (this.translationUrl.length > 2 && l(this.translationUrl), this.endpoint && this.language && this.datasource)
+      return this.fetchGameList();
+  }
+  componentDidLoad() {
+    !this.limitStylingAppends && this.host && (this.clientStyling && this.setClientStyling(), this.clientStylingUrl && this.setClientStylingURL(), this.limitStylingAppends = !0);
+  }
+  fetchGameList() {
+    let n = new URL(`${this.endpoint}/v1/casino/games`);
+    return n.searchParams.append("platform", w()), n.searchParams.append("datasource", this.datasource), n.searchParams.append("fields", "gId,id,href,thumbnail,name,vendor,launchUrl,subVendor"), n.searchParams.append("expand", "vendor"), n.searchParams.append("pagination", "offset=0,limit=423"), n.searchParams.append("language", this.language), this.specificCategory && n.searchParams.append("filter", `categories(id=${this.specificCategory})`), new Promise((e, i) => {
+      this.isLoading = !0, fetch(n.href).then((a) => a.json()).then((a) => {
+        this.gamesToShow = this.setUpGames(a?.items), e(!0);
+      }).catch((a) => {
+        console.error(a), this.hasErrors = !0, i(a);
+      }).finally(() => {
+        this.isLoading = !1;
+      });
+    });
+  }
+  setUpGames(n) {
+    const e = this.shuffle(n).slice(0, 40);
+    return e.concat(e);
+  }
+  selectRandomGame() {
+    const n = this.gamesToShow.length / 2;
+    this.selectedGameIndex = Math.floor(Math.random() * (n - 3)), this.selectedGameIndex += n, this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
+  }
+  playRandomGame() {
+    this.animateGames(), typeof gtag == "function" && gtag("event", "PlayRandomGame", {
+      context: "CasinoPlayRandomGame"
+    });
+  }
+  respin() {
+    this.animateGames(), typeof gtag == "function" && gtag("event", "RespinRandomGame", {
+      context: "CasinoPlayRandomGame"
+    });
+  }
+  animateGames() {
+    this.iconVisibility = this.iconVisibleOnAnim === "true", this.animationStarted = !0, this.animationDone = !1, this.animation && this.animation.cancel(), this.selectedGameEl && (this.selectedGameEl.classList.remove("TheRandomGame"), this.selectedGame = null, this.selectedGameIndex = null), this.selectRandomGame();
+    const n = window.getComputedStyle(this.gameContainer).getPropertyValue("gap"), e = parseInt(n, 10), i = this.selectedGameEl.offsetWidth, a = this.gameContainer.offsetWidth, s = (i + e) * this.selectedGameIndex + // Width of game cards up to the selected
+    i / 2 - // Additional half card width to center to the selected game
+    a / 2, m = [
+      { transform: "translateX(0px)", scale: 1 },
+      { scale: 0.75 },
+      { transform: `translateX(-${s}px)`, scale: 1 }
+    ], d = {
+      duration: 3e3,
+      easing: "cubic-bezier(0.5, 0, 0.5, 1.2)",
+      fill: "forwards"
+    };
+    this.animation = this.gameContainer.animate(m, d), this.animation.onfinish = () => {
+      this.animationDone = !0, this.selectedGameEl.classList.add("TheRandomGame"), this.selectedGame = this.gamesToShow[this.selectedGameIndex];
+    };
+  }
+  playGame() {
+    this.selectedGame && (window.postMessage({ type: "PlayRandomGame", gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href), typeof gtag == "function" && gtag("event", "OpenRandomGame", {
+      context: "CasinoPlayRandomGame"
+    }));
+  }
+  showGameInfo() {
+    window.postMessage({ type: "InfoRandomGame", gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href), typeof gtag == "function" && gtag("event", "OpenRandomGameInfo", {
+      context: "CasinoPlayRandomGame"
+    });
+  }
+  renderGameDetails() {
+    return t("div", { class: "RandomButtonsWrapper" }, t("div", { class: "RandomGameDetails" }, t("span", { class: "RandomGameTitle" }, this.selectedGame.name), t("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), t("div", { class: "RandomButtons" }, t("button", { class: "RandomButton On", onClick: () => this.respin() }, o("spinRandomGame", this.language)), !this.launchByGameCard && t("button", { class: "RandomButton On", onClick: () => this.playGame() }, o("playNowRandomGame", this.language))));
+  }
+  render() {
+    if (this.hasErrors)
+      return t("div", { class: "RandomGameError" }, t("div", { class: "Title" }, o("error", this.language)));
+    if (this.isLoading)
+      return t("div", { class: "RandomGameLoading" }, t("div", { class: "Title" }, o("randomGameLoading", this.language)));
+    if (!this.isLoading)
+      return t("div", { class: "RandomGameWrapper" }, t("div", { class: "GameContainerGradient" }), t("div", { class: "GamesContainer", ref: (n) => this.gameContainer = n }, this.gamesToShow && this.gamesToShow.map((n, e) => t("div", { class: "RandomGameCard", key: e, onClick: this.launchByGameCard === "true" ? () => this.playGame() : null }, t("div", { class: "RandomGameVendor" }, n.vendor.name), t("img", { class: "RandomGameImage", src: n.thumbnail, alt: n.name, title: n.name }), this.selectedGame && this.selectedGameIndex === e && this.renderGameDetails()))), t("div", { class: `ButtonWrapper  ${this.animationDone ? "HideAnimation" : ""}` }, t("div", { class: "ButtonContainer" }, this.iconVisibility && t("div", { class: `ButtonIcon ${this.animationStarted ? "Flip" : ""}` }, t("div", { class: "QustionMark" }, "?"), t("div", { class: "HexagonMarkShadow" }), t("div", { class: "HexagonMark" })), !this.animationStarted && t("div", { class: `RandomButton ${this.animationStarted ? "HideAnimation" : ""}`, onClick: () => this.playRandomGame() }, o("playRandomGame", this.language)))));
+  }
+  get host() {
+    return g(this);
+  }
+  static get watchers() {
+    return {
+      endpoint: ["watchEndpoint"],
+      datasource: ["watchEndpoint"],
+      language: ["watchEndpoint"],
+      translationUrl: ["handleNewTranslations"],
+      iconVisible: ["handleIsIconVisible"]
+    };
+  }
+};
+b.style = G;
+export {
+  b as casino_play_random_game
+};