@everymatrix/casino-play-random-game 1.77.11 → 1.77.13

package/dist/casino-play-random-game/casino-play-random-game_3.entry.js

@@ -1 +1 @@
-import{r as n,c as e,h as t,g as i,H as a}from"./index-27b314b8.js";const o={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:"Rastgele Bir Oyun Oyna",playNowRandomGame:"Şimdi Oyna",spinRandomGame:"DEĞİŞTİR"}},r=n=>new Promise((e=>{fetch(n).then((n=>n.json())).then((n=>{Object.keys(n).forEach((e=>{o[e]||(o[e]={});for(let t in n[e])o[e][t]=n[e][t]})),e(!0)}))})),s=(n,e)=>o[void 0!==e&&e in o?e:"en"][n];function l(n,e){if(n){const t=document.createElement("style");t.innerHTML=e,n.appendChild(t)}}function h(n,e){const t=new URL(e);fetch(t.href).then((n=>n.text())).then((e=>{const t=document.createElement("style");t.innerHTML=e,n&&n.appendChild(t)})).catch((n=>{console.error("There was an error while trying to load client styling from URL",n)}))}const d=class{constructor(t){n(this,t),this.dataLoaded=e(this,"data-loaded",7),this.animation=null,this.selectedGameIndex=null,this.selectedGameEl=null,this.iconVisibility=null,this.shuffle=n=>{let e,t=n.length;for(;0!==t;)e=Math.floor(Math.random()*t),t--,[n[t],n[e]]=[n[e],n[t]];return n},this.endpoint=void 0,this.datasource=void 0,this.language="en",this.specificCategory="",this.iconVisible="",this.iconVisibleOnAnim="",this.launchByGameCard="",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.hasErrors=!1,this.isLoading=!0,this.gamesToShow=void 0,this.selectedGame=null,this.animationDone=!1,this.animationStarted=!1,this.imageLoadingType="lazy",this.detectDistance="200px"}watchEndpoint(n,e){n&&n!=e&&this.endpoint&&this.fetchGameList()}handleNewTranslations(){this.isLoading=!0,r(this.translationUrl).then((()=>{this.isLoading=!1}))}handleIsIconVisible(){this.iconVisibility="true"===this.iconVisible}handleClientStylingChange(n,e){n!=e&&l(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(n,e){n!=e&&this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){this.handleIsIconVisible()}componentWillLoad(){if(this.translationUrl.length>2&&r(this.translationUrl),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){"IntersectionObserver"in window&&(this.io=new IntersectionObserver((n=>{n.forEach((n=>{var e;n.isIntersecting&&(this.imageLoadingType="eager",null===(e=this.io)||void 0===e||e.unobserve(n.target))}))}),{root:null,rootMargin:this.detectDistance}),this.io.observe(this.host)),null!=window.emMessageBus?function(n,e){if(window.emMessageBus){const t=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{t.innerHTML=e,n&&n.appendChild(t)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&l(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){var n;null===(n=this.io)||void 0===n||n.disconnect(),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}fetchGameList(){let n=new URL(`${this.endpoint}/v1/casino/games`);return n.searchParams.append("platform",(()=>{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"})()),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,t)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{this.gamesToShow=this.setUpGames(null==n?void 0:n.items),e(!0)})).catch((n=>{console.error(n),this.hasErrors=!0,t(n)})).finally((()=>{this.isLoading=!1,this.dataLoaded.emit({target:this.host})}))}))}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(),"function"==typeof gtag&&gtag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&&gtag("event","RespinRandomGame",{context:"CasinoPlayRandomGame"})}animateGames(){this.iconVisibility="true"===this.iconVisibleOnAnim,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),t=this.selectedGameEl.offsetWidth;this.animation=this.gameContainer.animate([{transform:"translateX(0px)",scale:1},{scale:.75},{transform:`translateX(-${(t+e)*this.selectedGameIndex+t/2-this.gameContainer.offsetWidth/2}px)`,scale:1}],{duration:3e3,easing:"cubic-bezier(0.5, 0, 0.5, 1.2)",fill:"forwards"}),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),"function"==typeof gtag&&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),"function"==typeof gtag&&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()},s("spinRandomGame",this.language)),!this.launchByGameCard&&t("button",{class:"RandomButton On",onClick:()=>this.playGame()},s("playNowRandomGame",this.language))))}renderSkeleton(){const n=Array.from({length:5},((n,e)=>t("div",{class:"RandomGameCard",key:e},t("ui-skeleton",{structure:"rectangle",width:"300px",height:"420px",borderRadius:"10px",animation:!0}))));return t("div",{class:"RandomGameWrapper"},t("div",{class:"GameContainerGradient"}),t("div",{class:"GamesContainer"},n))}render(){return t("div",{key:"29fe3535d63177e6d1f30a757bf17b70d89ce386",ref:n=>this.stylingContainer=n},this.hasErrors?t("div",{class:"RandomGameError"},t("div",{class:"Title"},s("error",this.language))):this.isLoading?this.renderSkeleton():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:"true"===this.launchByGameCard?()=>this.playGame():void 0},t("div",{class:"RandomGameVendor"},n.vendor.name),t("ui-image",{class:"RandomGameImage",src:n.thumbnail,alt:n.name,title:n.name,loading:this.imageLoadingType}),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()},s("playRandomGame",this.language))))))}get host(){return i(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};d.style=":host {\n  display: block;\n  font-family: inherit;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n:host * {\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n.RandomGameWrapper {\n  width: 100%;\n  height: var(--emw--size-4x-medium, 700px);\n  background: transparent;\n  position: relative;\n  overflow: hidden;\n}\n\n.GameContainerGradient {\n  position: absolute;\n  top: 10%;\n  left: -5px;\n  width: 100vw;\n  height: 80%;\n  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%);\n  pointer-events: none;\n  z-index: 1;\n  filter: blur(10px);\n}\n\n.GamesContainer {\n  display: flex;\n  height: var(--emw--size-4x-medium, 600px);\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  align-content: flex-start;\n  gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n  position: relative;\n  width: var(--emw--size-3x-medium, 300px);\n  height: var(--emw--size-4x-medium, 420px);\n  border-radius: var(--emw--border-radius-large, 10px);\n  top: 8%;\n  filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n  position: absolute;\n  font-size: var(--emw--font-size-x-small, 12px);\n  bottom: var(--emw--spacing-small-minus, 10px);\n  left: var(--emw--spacing-small-minus, 10px);\n  color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n  animation-name: ZoomFadeIn;\n  animation-duration: 0.5s;\n  animation-fill-mode: forwards;\n  -webkit-animation-name: ZoomFadeIn;\n  -webkit-animation-duration: 0.5s;\n  -webkit-animation-fill-mode: forwards;\n  opacity: 1;\n  cursor: pointer;\n  filter: blur(0);\n}\n\n.RandomGameImage {\n  width: inherit;\n  height: inherit;\n  object-fit: cover;\n  border-radius: var(--emw--border-radius-large, 10px);\n}\n\n.RandomGameDetails {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--emw--color-typography, #FFFFFF);\n  font-size: var(--emw--font-size-small, 14px);\n  width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n  line-height: 18px;\n  margin: 5px 0;\n}\n.RandomGameDetails .RandomGameInfo {\n  border-radius: 50%;\n  width: var(--emw--spacing-medium, 16px);\n  height: var(--emw--spacing-medium, 16px);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-normal, 400);\n  border: solid 1px var(--emw--color-typography, #FFFFFF);\n  text-align: center;\n  margin: var(--emw--spacing-2x-small, 4px) 0;\n  line-height: 14px;\n  cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n  background: var(--emw--color-primary, #4bd004);\n  color: var(--emw--color-typography, #FFFFFF);\n  border: none;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  width: 200px;\n  height: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  cursor: pointer;\n}\n\n.ButtonWrapper {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n}\n\n.ButtonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  position: relative;\n}\n\n.ButtonIcon {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n  position: absolute;\n  font-family: sans-serif;\n  font-size: 120px;\n  font-weight: 900;\n  color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n  text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n  left: 50%;\n  top: -20%;\n  transform: translateX(-50%);\n  z-index: 10;\n}\n\n.HexagonMarkShadow {\n  width: 100px;\n  height: 115px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n  position: absolute;\n  width: var(--emw--size-medium, 90px);\n  height: 105px;\n  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%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n  width: 100%;\n  position: relative;\n  z-index: 10;\n}\n\n.RandomButton {\n  font-size: var(--emw--font-size-large, 12px);\n  text-transform: uppercase;\n  width: max-content;\n  border-radius: var(--emw--button-border-radius, 10px);\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n  border: solid 3px var(--emw--button-border-color, #063B17);\n  color: var(--emw--button-text-color, #FFFFFF);\n  opacity: 1;\n  animation: ButtonEffect 3s linear infinite;\n  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));\n  background-size: 300% 100%;\n  cursor: pointer;\n  position: relative;\n  z-index: 10;\n}\n.RandomButton:hover {\n  opacity: 0.8;\n}\n\n.HideAnimation {\n  filter: blur(5px);\n  animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n  animation-name: Flip, Blur;\n  animation-duration: 0.75s, 3s;\n  animation-iteration-count: infinite, 1;\n  -webkit-animation-name: Flip, Blur;\n  -webkit-animation-duration: 0.75s, 3s;\n  -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n  0% {\n    background-position: 0% 50%;\n  }\n  33% {\n    background-position: 100% 50%;\n  }\n  66% {\n    background-position: 200% 50%;\n  }\n  100% {\n    background-position: 300% 50%;\n  }\n}\n@keyframes ZoomFadeIn {\n  0% {\n    transform: scale(0.2) translateY(0);\n    filter: blur(5px);\n    opacity: 0.3;\n  }\n  50% {\n    transform: scale(1.1) translateY(-30px);\n    filter: blur(2px);\n    opacity: 0.7;\n  }\n  100% {\n    transform: scale(1) translateY(-30px);\n    filter: blur(0px);\n    opacity: 1;\n  }\n}\n@keyframes AnimateButton {\n  0% {\n    opacity: 0.7;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 0;\n    display: none;\n  }\n}\n@keyframes Flip {\n  0% {\n    transform: rotateY(0deg);\n  }\n  50% {\n    transform: rotateY(180deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n@keyframes Blur {\n  0% {\n    filter: blur(0);\n  }\n  50% {\n    filter: blur(1px);\n  }\n  100% {\n    filter: blur(3px);\n  }\n}\n@media screen and (max-width: 480px) {\n  .RandomButtons .RandomButton {\n    font-size: var(--emw--font-size-medium, 12px);\n  }\n}\n@container (max-width: 475px) {\n  .GamesContainer {\n    height: inherit;\n    gap: var(--emw--spacing-2x-small, 5px);\n  }\n  .RandomGameWrapper {\n    width: 100%;\n    height: 300px;\n    overflow: hidden;\n    background: transparent;\n    position: relative;\n  }\n  .GameContainerGradient {\n    position: absolute;\n    top: 10%;\n    left: -5px;\n    width: 100vw;\n    height: 80%;\n    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%);\n    pointer-events: none;\n    z-index: 1;\n    filter: blur(5px);\n  }\n  .RandomGameCard {\n    width: 100px;\n    height: 150px;\n    top: 0%;\n    border-radius: var(--emw--border-radius-medium, 4px);\n    filter: blur(5px);\n  }\n  .RandomGameImage {\n    width: 102px;\n    height: inherit;\n    top: 0%;\n  }\n  .RandomGameDetails {\n    font-size: 14px;\n    width: 100%;\n  }\n  .RandomGameDetails .RandomGameTitle {\n    margin: 5px 0;\n    line-height: 18px;\n    width: 75%;\n  }\n  .RandomGameDetails .RandomGameInfo {\n    border-radius: 50%;\n    width: 16px;\n    height: 16px;\n    font-size: var(--emw--font-size-x-small, 12px);\n    line-height: 14px;\n  }\n  .RandomGameDetails .RandomGamePlay {\n    background: var(--emw--color-primary, #52d004);\n    color: var(--emw--color-typography, #FFFFFF);\n    border: none;\n    border-radius: 5px;\n    width: 200px;\n    height: 40px;\n    font-size: 14px;\n    cursor: pointer;\n  }\n  .RandomGameCard .RandomGameVendor {\n    font-size: var(--emw--font-size-x-small, 12px);\n    bottom: 5px;\n    right: 5px;\n  }\n  .RandomButtons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n  }\n  .RandomButton {\n    font-size: var(--emw--font-size-x-small, 12px);\n    padding: 10px 15px;\n    border: solid 1px var(--emw--button-border-color, #063B17);\n  }\n  .QustionMark {\n    font-size: 100px;\n    font-weight: 700;\n  }\n  .HexagonMarkShadow {\n    width: 80px;\n    height: 95px;\n  }\n  .HexagonMark {\n    width: 70px;\n    height: 85px;\n  }\n}";const m=class{constructor(e){n(this,e),this.hasStarted=!1,this._onLoad=()=>{this.imgLoaded=!0},this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,this.hasStarted=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(n,e){n!==e&&(this.cleanupObserver(),"eager"===n?(this.imgEl&&this.src&&(this.imgEl.src=this.src),this.hasStarted=!0):(this.imgLoaded=!1,this.hasStarted=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.imgEl&&(this.imgEl.src="")}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((n=>{var e;for(const t of n)if(t.isIntersecting){this.beginLoad(),null===(e=this.io)||void 0===e||e.unobserve(t.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var n;null===(n=this.io)||void 0===n||n.disconnect(),this.io=void 0}beginLoad(){this.hasStarted||this.imgEl&&this.src&&(this.hasStarted=!0,this.imgEl.src=this.src,this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0))}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(a,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(a,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:n=>this.imgEl=n,src:void 0,decoding:"async",style:this.styles,onLoad:this._onLoad,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return i(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};m.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";const c=class{constructor(e){n(this,e),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(n,e){e!==n&&this.handleStructure(n)}handleStylingProps(n){switch(typeof n){case"number":return 0===n?0:`${n}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(n)||n.endsWith("px")||n.endsWith("%")?n:"unset"}}handleStructure(n){switch(n){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((n,e)=>t("div",{key:e,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let n="";switch(this.structure){case"logo":n=`\n          :host {\n            --emw-skeleton-logo-width: ${this.stylingValue.width};\n            --emw-skeleton-logo-height: ${this.stylingValue.height};\n            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"image":n=`\n          :host {\n            --emw-skeleton-image-width: ${this.stylingValue.width};\n            --emw-skeleton-image-height: ${this.stylingValue.height};\n            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"title":n=`\n          :host {\n            --emw-skeleton-title-width: ${this.stylingValue.width};\n            --emw-skeleton-title-height: ${this.stylingValue.height};\n            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"text":n=`\n          :host {\n            --emw-skeleton-text-width: ${this.stylingValue.width};\n            --emw-skeleton-text-height: ${this.stylingValue.height};\n            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"rectangle":n=`\n          :host {\n            --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n            --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"circle":n=`\n          :host {\n            --emw-skeleton-circle-size: ${this.stylingValue.size};\n          }\n        `;break;default:n=""}return t(a,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},n),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};c.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{d as casino_play_random_game,m as ui_image,c as ui_skeleton}
+import{r as n,c as e,h as t,g as i,H as a}from"./index-27b314b8.js";const o={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:"Rastgele Bir Oyun Oyna",playNowRandomGame:"Şimdi Oyna",spinRandomGame:"DEĞİŞTİR"}},r=n=>new Promise((e=>{fetch(n).then((n=>n.json())).then((n=>{Object.keys(n).forEach((e=>{o[e]||(o[e]={});for(let t in n[e])o[e][t]=n[e][t]})),e(!0)}))})),s=(n,e)=>o[void 0!==e&&e in o?e:"en"][n];function l(n,e){if(n){const t=document.createElement("style");t.innerHTML=e,n.appendChild(t)}}function h(n,e){const t=new URL(e);fetch(t.href).then((n=>n.text())).then((e=>{const t=document.createElement("style");t.innerHTML=e,n&&n.appendChild(t)})).catch((n=>{console.error("There was an error while trying to load client styling from URL",n)}))}const d=class{constructor(t){n(this,t),this.dataLoaded=e(this,"data-loaded",7),this.animation=null,this.selectedGameIndex=null,this.selectedGameEl=null,this.iconVisibility=null,this.shuffle=n=>{let e,t=n.length;for(;0!==t;)e=Math.floor(Math.random()*t),t--,[n[t],n[e]]=[n[e],n[t]];return n},this.endpoint=void 0,this.datasource=void 0,this.language="en",this.specificCategory="",this.iconVisible="",this.iconVisibleOnAnim="",this.launchByGameCard="",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.translationUrl="",this.hasErrors=!1,this.isLoading=!0,this.gamesToShow=void 0,this.selectedGame=null,this.animationDone=!1,this.animationStarted=!1,this.imageLoadingType="lazy",this.detectDistance="200px"}watchEndpoint(n,e){n&&n!=e&&this.endpoint&&this.fetchGameList()}handleNewTranslations(){this.isLoading=!0,r(this.translationUrl).then((()=>{this.isLoading=!1}))}handleIsIconVisible(){this.iconVisibility="true"===this.iconVisible}handleClientStylingChange(n,e){n!=e&&l(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(n,e){n!=e&&this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){this.handleIsIconVisible()}componentWillLoad(){if(this.translationUrl.length>2&&r(this.translationUrl),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){"IntersectionObserver"in window&&(this.io=new IntersectionObserver((n=>{n.forEach((n=>{var e;n.isIntersecting&&(this.imageLoadingType="eager",null===(e=this.io)||void 0===e||e.unobserve(n.target))}))}),{root:null,rootMargin:this.detectDistance}),this.io.observe(this.host)),null!=window.emMessageBus?function(n,e){if(window.emMessageBus){const t=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{t.innerHTML=e,n&&n.appendChild(t)}))}}(this.stylingContainer,`${this.mbSource}.Style`):(this.clientStyling&&l(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&h(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){var n;null===(n=this.io)||void 0===n||n.disconnect(),this.stylingSubscription&&this.stylingSubscription.unsubscribe()}fetchGameList(){let n=new URL(`${this.endpoint}/v1/casino/games`);return n.searchParams.append("platform",(()=>{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"})()),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,t)=>{this.isLoading=!0,fetch(n.href).then((n=>n.json())).then((n=>{this.gamesToShow=this.setUpGames(null==n?void 0:n.items),e(!0)})).catch((n=>{console.error(n),this.hasErrors=!0,t(n)})).finally((()=>{this.isLoading=!1,this.dataLoaded.emit({target:this.host})}))}))}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(),"function"==typeof gtag&&gtag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&&gtag("event","RespinRandomGame",{context:"CasinoPlayRandomGame"})}animateGames(){this.iconVisibility="true"===this.iconVisibleOnAnim,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),t=this.selectedGameEl.offsetWidth;this.animation=this.gameContainer.animate([{transform:"translateX(0px)",scale:1},{scale:.75},{transform:`translateX(-${(t+e)*this.selectedGameIndex+t/2-this.gameContainer.offsetWidth/2}px)`,scale:1}],{duration:3e3,easing:"cubic-bezier(0.5, 0, 0.5, 1.2)",fill:"forwards"}),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),"function"==typeof gtag&&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),"function"==typeof gtag&&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()},s("spinRandomGame",this.language)),!this.launchByGameCard&&t("button",{class:"RandomButton On",onClick:()=>this.playGame()},s("playNowRandomGame",this.language))))}renderSkeleton(){const n=Array.from({length:5},((n,e)=>t("div",{class:"RandomGameCard",key:e},t("ui-skeleton",{structure:"rectangle",width:"300px",height:"420px",borderRadius:"10px",animation:!0}))));return t("div",{class:"RandomGameWrapper"},t("div",{class:"GameContainerGradient"}),t("div",{class:"GamesContainer"},n))}render(){return t("div",{key:"29fe3535d63177e6d1f30a757bf17b70d89ce386",ref:n=>this.stylingContainer=n},this.hasErrors?t("div",{class:"RandomGameError"},t("div",{class:"Title"},s("error",this.language))):this.isLoading?this.renderSkeleton():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:"true"===this.launchByGameCard?()=>this.playGame():void 0},t("div",{class:"RandomGameVendor"},n.vendor.name),t("ui-image",{class:"RandomGameImage",src:n.thumbnail,alt:n.name,title:n.name,loading:this.imageLoadingType}),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()},s("playRandomGame",this.language))))))}get host(){return i(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};d.style=":host {\n  display: block;\n  font-family: inherit;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n:host * {\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n.RandomGameWrapper {\n  width: 100%;\n  height: var(--emw--size-4x-medium, 700px);\n  background: transparent;\n  position: relative;\n  overflow: hidden;\n}\n\n.GameContainerGradient {\n  position: absolute;\n  top: 10%;\n  left: -5px;\n  width: 100vw;\n  height: 80%;\n  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%);\n  pointer-events: none;\n  z-index: 1;\n  filter: blur(10px);\n}\n\n.GamesContainer {\n  display: flex;\n  height: var(--emw--size-4x-medium, 600px);\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  align-content: flex-start;\n  gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n  position: relative;\n  width: var(--emw--size-3x-medium, 300px);\n  height: var(--emw--size-4x-medium, 420px);\n  border-radius: var(--emw--border-radius-large, 10px);\n  top: 8%;\n  filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n  position: absolute;\n  font-size: var(--emw--font-size-x-small, 12px);\n  bottom: var(--emw--spacing-small-minus, 10px);\n  left: var(--emw--spacing-small-minus, 10px);\n  color: var(--emw--color-typography, #FFFFFF);\n}\n\n.TheRandomGame {\n  animation-name: ZoomFadeIn;\n  animation-duration: 0.5s;\n  animation-fill-mode: forwards;\n  -webkit-animation-name: ZoomFadeIn;\n  -webkit-animation-duration: 0.5s;\n  -webkit-animation-fill-mode: forwards;\n  opacity: 1;\n  cursor: pointer;\n  filter: blur(0);\n}\n\n.RandomGameImage {\n  width: inherit;\n  height: inherit;\n  object-fit: cover;\n  border-radius: var(--emw--border-radius-large, 10px);\n}\n\n.RandomGameDetails {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--emw--color-typography, #FFFFFF);\n  font-size: var(--emw--font-size-small, 14px);\n  width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n  line-height: 18px;\n  margin: 5px 0;\n}\n.RandomGameDetails .RandomGameInfo {\n  border-radius: 50%;\n  width: var(--emw--spacing-medium, 16px);\n  height: var(--emw--spacing-medium, 16px);\n  font-size: var(--emw--font-size-x-small, 12px);\n  font-weight: var(--emw--font-weight-normal, 400);\n  border: solid 1px var(--emw--color-typography, #FFFFFF);\n  text-align: center;\n  margin: var(--emw--spacing-2x-small, 4px) 0;\n  line-height: 14px;\n  cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n  background: var(--emw--color-primary, #4bd004);\n  color: var(--emw--color-typography, #FFFFFF);\n  border: none;\n  border-radius: var(--emw--border-radius-medium, 5px);\n  width: 200px;\n  height: 40px;\n  font-size: var(--emw--font-size-small, 14px);\n  cursor: pointer;\n}\n\n.ButtonWrapper {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n}\n\n.ButtonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  position: relative;\n}\n\n.ButtonIcon {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n  position: absolute;\n  font-family: sans-serif;\n  font-size: 120px;\n  font-weight: 900;\n  color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n  text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n  left: 50%;\n  top: -20%;\n  transform: translateX(-50%);\n  z-index: 10;\n}\n\n.HexagonMarkShadow {\n  width: 100px;\n  height: 115px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n  position: absolute;\n  width: var(--emw--size-medium, 90px);\n  height: 105px;\n  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%);\n  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: var(--emw--spacing-2x-small, 5px);\n  width: 100%;\n  position: relative;\n  z-index: 10;\n}\n\n.RandomButton {\n  font-size: var(--emw--font-size-large, 12px);\n  text-transform: uppercase;\n  width: max-content;\n  border-radius: var(--emw--button-border-radius, 10px);\n  padding: var(--emw--spacing-large, 20px) var(--emw--spacing-2x-large, 40px);\n  border: solid 3px var(--emw--button-border-color, #063B17);\n  color: var(--emw--button-text-color, #FFFFFF);\n  opacity: 1;\n  animation: ButtonEffect 3s linear infinite;\n  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));\n  background-size: 300% 100%;\n  cursor: pointer;\n  position: relative;\n  z-index: 10;\n}\n.RandomButton:hover {\n  opacity: 0.8;\n}\n\n.HideAnimation {\n  filter: blur(5px);\n  animation: AnimateButton 0.2s forwards;\n}\n\n.Flip {\n  animation-name: Flip, Blur;\n  animation-duration: 0.75s, 3s;\n  animation-iteration-count: infinite, 1;\n  -webkit-animation-name: Flip, Blur;\n  -webkit-animation-duration: 0.75s, 3s;\n  -webkit-animation-iteration-count: infinite, 1;\n}\n\n@keyframes ButtonEffect {\n  0% {\n    background-position: 0% 50%;\n  }\n  33% {\n    background-position: 100% 50%;\n  }\n  66% {\n    background-position: 200% 50%;\n  }\n  100% {\n    background-position: 300% 50%;\n  }\n}\n@keyframes ZoomFadeIn {\n  0% {\n    transform: scale(0.2) translateY(0);\n    filter: blur(5px);\n    opacity: 0.3;\n  }\n  50% {\n    transform: scale(1.1) translateY(-30px);\n    filter: blur(2px);\n    opacity: 0.7;\n  }\n  100% {\n    transform: scale(1) translateY(-30px);\n    filter: blur(0px);\n    opacity: 1;\n  }\n}\n@keyframes AnimateButton {\n  0% {\n    opacity: 0.7;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 0;\n    display: none;\n  }\n}\n@keyframes Flip {\n  0% {\n    transform: rotateY(0deg);\n  }\n  50% {\n    transform: rotateY(180deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n@keyframes Blur {\n  0% {\n    filter: blur(0);\n  }\n  50% {\n    filter: blur(1px);\n  }\n  100% {\n    filter: blur(3px);\n  }\n}\n@media screen and (max-width: 480px) {\n  .RandomButtons .RandomButton {\n    font-size: var(--emw--font-size-medium, 12px);\n  }\n}\n@container (max-width: 475px) {\n  .GamesContainer {\n    height: inherit;\n    gap: var(--emw--spacing-2x-small, 5px);\n  }\n  .RandomGameWrapper {\n    width: 100%;\n    height: 300px;\n    overflow: hidden;\n    background: transparent;\n    position: relative;\n  }\n  .GameContainerGradient {\n    position: absolute;\n    top: 10%;\n    left: -5px;\n    width: 100vw;\n    height: 80%;\n    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%);\n    pointer-events: none;\n    z-index: 1;\n    filter: blur(5px);\n  }\n  .RandomGameCard {\n    width: 100px;\n    height: 150px;\n    top: 0%;\n    border-radius: var(--emw--border-radius-medium, 4px);\n    filter: blur(5px);\n  }\n  .RandomGameImage {\n    width: 102px;\n    height: inherit;\n    top: 0%;\n  }\n  .RandomGameDetails {\n    font-size: 14px;\n    width: 100%;\n  }\n  .RandomGameDetails .RandomGameTitle {\n    margin: 5px 0;\n    line-height: 18px;\n    width: 75%;\n  }\n  .RandomGameDetails .RandomGameInfo {\n    border-radius: 50%;\n    width: 16px;\n    height: 16px;\n    font-size: var(--emw--font-size-x-small, 12px);\n    line-height: 14px;\n  }\n  .RandomGameDetails .RandomGamePlay {\n    background: var(--emw--color-primary, #52d004);\n    color: var(--emw--color-typography, #FFFFFF);\n    border: none;\n    border-radius: 5px;\n    width: 200px;\n    height: 40px;\n    font-size: 14px;\n    cursor: pointer;\n  }\n  .RandomGameCard .RandomGameVendor {\n    font-size: var(--emw--font-size-x-small, 12px);\n    bottom: 5px;\n    right: 5px;\n  }\n  .RandomButtons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 5px;\n    width: 100%;\n  }\n  .RandomButton {\n    font-size: var(--emw--font-size-x-small, 12px);\n    padding: 10px 15px;\n    border: solid 1px var(--emw--button-border-color, #063B17);\n  }\n  .QustionMark {\n    font-size: 100px;\n    font-weight: 700;\n  }\n  .HexagonMarkShadow {\n    width: 80px;\n    height: 95px;\n  }\n  .HexagonMark {\n    width: 70px;\n    height: 85px;\n  }\n}";const m=class{constructor(e){n(this,e),this._onLoad=()=>{this.imgLoaded=!0},this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.loading="lazy",this.imgLoaded=!1}onSrcChange(){"eager"!==this.loading&&(this.imgLoaded=!1,"undefined"!=typeof window&&"IntersectionObserver"in window||this.beginLoad())}onLoadingChange(n,e){n!==e&&(this.cleanupObserver(),"eager"===n?this.imgEl&&this.src&&(this.imgEl.src=this.src):(this.imgLoaded=!1,this.setupObserver()))}componentDidLoad(){"eager"!==this.loading&&this.setupObserver()}disconnectedCallback(){this.cleanupObserver(),this.imgEl&&(this.imgEl.src="")}canUseIO(){return"undefined"!=typeof window&&"IntersectionObserver"in window}setupObserver(){"eager"!==this.loading&&(this.canUseIO()?(this.io=new IntersectionObserver((n=>{var e;for(const t of n)if(t.isIntersecting){this.beginLoad(),null===(e=this.io)||void 0===e||e.unobserve(t.target),this.cleanupObserver();break}}),{root:null,rootMargin:this.detectDistance,threshold:0}),this.io.observe(this.el)):this.beginLoad())}cleanupObserver(){var n;null===(n=this.io)||void 0===n||n.disconnect(),this.io=void 0}beginLoad(){this.preloadAndSetSrc(),this.imgEl&&this.imgEl.complete&&this.imgEl.naturalWidth>0&&(this.imgLoaded=!0)}preloadAndSetSrc(){if(!this.src||!this.imgEl)return;const n=new Image;n.onload=()=>{this.imgEl&&(this.imgEl.src=n.src,this.imgLoaded=!0)},n.onerror=()=>{this.imgEl&&(this.imgEl.src=this.src)},n.src=this.src}get showSkeleton(){return"eager"!==this.loading&&!this.imgLoaded}renderEager(){return t(a,{class:"HostContainer"},t("img",{src:this.src,decoding:"async",style:this.styles,class:"UiContainer Visible",alt:this.alt,width:this.width,height:this.height,loading:"eager"}))}renderLazy(){return t(a,{class:"HostContainer","aria-busy":this.imgLoaded?"false":"true"},this.showSkeleton&&t("ui-skeleton",{class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{ref:n=>this.imgEl=n,src:void 0,decoding:"async",style:this.styles,onLoad:this._onLoad,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}render(){return"eager"===this.loading?this.renderEager():this.renderLazy()}get el(){return i(this)}static get watchers(){return{src:["onSrcChange"],loading:["onLoadingChange"]}}};m.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit;object-fit:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;border-radius:var(--emw--border-radius-medium, 10px);transition:opacity 0.5s ease-in-out}";const c=class{constructor(e){n(this,e),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight),size:this.handleStylingProps(this.size)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%"}handleStructureChange(n,e){e!==n&&this.handleStructure(n)}handleStylingProps(n){switch(typeof n){case"number":return 0===n?0:`${n}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(n)||n.endsWith("px")||n.endsWith("%")?n:"unset"}}handleStructure(n){switch(n){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((n,e)=>t("div",{key:e,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let n="";switch(this.structure){case"logo":n=`\n          :host {\n            --emw-skeleton-logo-width: ${this.stylingValue.width};\n            --emw-skeleton-logo-height: ${this.stylingValue.height};\n            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"image":n=`\n          :host {\n            --emw-skeleton-image-width: ${this.stylingValue.width};\n            --emw-skeleton-image-height: ${this.stylingValue.height};\n            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"title":n=`\n          :host {\n            --emw-skeleton-title-width: ${this.stylingValue.width};\n            --emw-skeleton-title-height: ${this.stylingValue.height};\n            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"text":n=`\n          :host {\n            --emw-skeleton-text-width: ${this.stylingValue.width};\n            --emw-skeleton-text-height: ${this.stylingValue.height};\n            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"rectangle":n=`\n          :host {\n            --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n            --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n          }\n        `;break;case"circle":n=`\n          :host {\n            --emw-skeleton-circle-size: ${this.stylingValue.size};\n          }\n        `;break;default:n=""}return t(a,{key:"e6b885bfd985ce7663d990756fe9101e25eb97f0"},t("style",{key:"06ae24c7bb74f4dacfc12ae58085333f9dc89da5"},n),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};c.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";export{d as casino_play_random_game,m as ui_image,c as ui_skeleton}

package/dist/cjs/casino-play-random-game_3.cjs.entry.js

@@ -403,7 +403,6 @@ const UiImageStyle0 = uiImageCss;
 const UiImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.hasStarted = false;
         this._onLoad = () => {
             this.imgLoaded = true;
         };
@@ -420,7 +419,6 @@ const UiImage = class {
         if (this.loading === 'eager')
             return;
         this.imgLoaded = false;
-        this.hasStarted = false;
         if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
             this.beginLoad();
         }
@@ -433,11 +431,9 @@ const UiImage = class {
             if (this.imgEl && this.src) {
                 this.imgEl.src = this.src;
             }
-            this.hasStarted = true;
         }
         else {
             this.imgLoaded = false;
-            this.hasStarted = false;
             this.setupObserver();
         }
     }
@@ -480,18 +476,28 @@ const UiImage = class {
         this.io = undefined;
     }
     beginLoad() {
-        if (this.hasStarted)
-            return;
-        if (!this.imgEl)
-            return;
-        if (!this.src)
-            return;
-        this.hasStarted = true;
-        this.imgEl.src = this.src;
-        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+        this.preloadAndSetSrc();
+        if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
             this.imgLoaded = true;
         }
     }
+    preloadAndSetSrc() {
+        if (!this.src || !this.imgEl)
+            return;
+        const preloaded = new Image();
+        preloaded.onload = () => {
+            if (this.imgEl) {
+                this.imgEl.src = preloaded.src;
+                this.imgLoaded = true;
+            }
+        };
+        preloaded.onerror = () => {
+            if (this.imgEl) {
+                this.imgEl.src = this.src;
+            }
+        };
+        preloaded.src = this.src;
+    }
     get showSkeleton() {
         return this.loading !== 'eager' && !this.imgLoaded;
     }

package/dist/esm/casino-play-random-game_3.entry.js

@@ -399,7 +399,6 @@ const UiImageStyle0 = uiImageCss;
 const UiImage = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.hasStarted = false;
         this._onLoad = () => {
             this.imgLoaded = true;
         };
@@ -416,7 +415,6 @@ const UiImage = class {
         if (this.loading === 'eager')
             return;
         this.imgLoaded = false;
-        this.hasStarted = false;
         if (typeof window === 'undefined' || !('IntersectionObserver' in window)) {
             this.beginLoad();
         }
@@ -429,11 +427,9 @@ const UiImage = class {
             if (this.imgEl && this.src) {
                 this.imgEl.src = this.src;
             }
-            this.hasStarted = true;
         }
         else {
             this.imgLoaded = false;
-            this.hasStarted = false;
             this.setupObserver();
         }
     }
@@ -476,18 +472,28 @@ const UiImage = class {
         this.io = undefined;
     }
     beginLoad() {
-        if (this.hasStarted)
-            return;
-        if (!this.imgEl)
-            return;
-        if (!this.src)
-            return;
-        this.hasStarted = true;
-        this.imgEl.src = this.src;
-        if (this.imgEl.complete && this.imgEl.naturalWidth > 0) {
+        this.preloadAndSetSrc();
+        if (this.imgEl && this.imgEl.complete && this.imgEl.naturalWidth > 0) {
             this.imgLoaded = true;
         }
     }
+    preloadAndSetSrc() {
+        if (!this.src || !this.imgEl)
+            return;
+        const preloaded = new Image();
+        preloaded.onload = () => {
+            if (this.imgEl) {
+                this.imgEl.src = preloaded.src;
+                this.imgLoaded = true;
+            }
+        };
+        preloaded.onerror = () => {
+            if (this.imgEl) {
+                this.imgEl.src = this.src;
+            }
+        };
+        preloaded.src = this.src;
+    }
     get showSkeleton() {
         return this.loading !== 'eager' && !this.imgLoaded;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-play-random-game",
-  "version": "1.77.11",
+  "version": "1.77.13",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",