@everymatrix/casino-play-random-game 1.86.27 → 1.86.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/casino-play-random-game/casino-play-random-game_2.entry.js +1 -1
- package/dist/cjs/casino-play-random-game_2.cjs.entry.js +29 -9
- package/dist/collection/components/casino-play-random-game/casino-play-random-game.js +7 -2
- package/dist/collection/utils/locale.utils.js +11 -8
- package/dist/esm/casino-play-random-game_2.entry.js +29 -9
- package/dist/types/components/casino-play-random-game/casino-play-random-game.d.ts +1 -0
- package/dist/types/utils/locale.utils.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as n,c as e,h as t,g as a,H as i}from"./index-328e660d.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 m(n,e){if(!n||!e)return;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}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&&m(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(){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&&m(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){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&>ag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&>ag("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&>ag("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&>ag("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:"1f326cff688b0b71ca1d6efbc6766c6b768cb846",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("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()},s("playRandomGame",this.language))))))}get host(){return a(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 h=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:"SkeletonLogo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"SkeletonImage "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonTitle "+(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:"SkeletonText "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonRectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonCircle "+(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(i,{key:"c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8"},t("style",{key:"9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19"},n),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};h.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{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)}.SkeletonCircle{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%}.SkeletonText{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)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{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)}.SkeletonImage{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)}.SkeletonLogo{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,h as ui_skeleton}
|
|
1
|
+
import{r as n,c as e,h as t,g as a,H as i}from"./index-328e660d.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=>{l(n),e(!0)}))})),s=(n,e)=>o[void 0!==e&&e in o?e:"en"][n],l=n=>{Object.keys(n).forEach((e=>{o[e]||(o[e]={});for(let t in n[e])o[e][t]=n[e][t]}))};function m(n,e){if(n){const t=document.createElement("style");t.innerHTML=e,n.appendChild(t)}}function d(n,e){if(!n||!e)return;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 h=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}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&&m(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(n,e){n!=e&&this.clientStylingUrl&&d(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){this.handleIsIconVisible()}componentWillLoad(){if(this.translationUrl.length>2&&r(this.translationUrl),!Boolean(this.translationUrl)&&this.mbSource&&null!=window.emMessageBus&&(window.emMessageBus&&window.emMessageBus.subscribe(`${this.mbSource}.Translation`,l)),this.endpoint&&this.language&&this.datasource)return this.fetchGameList()}componentDidLoad(){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&&m(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&d(this.stylingContainer,this.clientStylingUrl))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe(),this.translationSubscription&&this.translationSubscription.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&>ag("event","PlayRandomGame",{context:"CasinoPlayRandomGame"})}respin(){this.animateGames(),"function"==typeof gtag&>ag("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&>ag("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&>ag("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:"a1e3f626fea9bcd6a351f1769675e11b21ac8fbd",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("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()},s("playRandomGame",this.language))))))}get host(){return a(this)}static get watchers(){return{endpoint:["watchEndpoint"],datasource:["watchEndpoint"],language:["watchEndpoint"],translationUrl:["handleNewTranslations"],iconVisible:["handleIsIconVisible"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};h.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 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:"SkeletonLogo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"SkeletonImage "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonTitle "+(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:"SkeletonText "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonRectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"SkeletonCircle "+(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(i,{key:"c2a2650acd416962a2bc4e1a7ee18bc6d8e2def8"},t("style",{key:"9bd7fc1f9e9ed9f17735a7b72fce6f09696f5e19"},n),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};c.style=":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.SkeletonRectangle{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)}.SkeletonCircle{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%}.SkeletonText{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)}.SkeletonText:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.SkeletonTitle{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)}.SkeletonImage{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)}.SkeletonLogo{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{h as casino_play_random_game,c as ui_skeleton}
|
|
@@ -68,14 +68,7 @@ const getTranslations = (url) => {
|
|
|
68
68
|
fetch(url)
|
|
69
69
|
.then((res) => res.json())
|
|
70
70
|
.then((data) => {
|
|
71
|
-
|
|
72
|
-
if (!TRANSLATIONS[lang]) {
|
|
73
|
-
TRANSLATIONS[lang] = {};
|
|
74
|
-
}
|
|
75
|
-
for (let key in data[lang]) {
|
|
76
|
-
TRANSLATIONS[lang][key] = data[lang][key];
|
|
77
|
-
}
|
|
78
|
-
});
|
|
71
|
+
setTranslation(data);
|
|
79
72
|
resolve(true);
|
|
80
73
|
});
|
|
81
74
|
});
|
|
@@ -84,6 +77,16 @@ const translate = (key, customLang) => {
|
|
|
84
77
|
const lang = customLang;
|
|
85
78
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
86
79
|
};
|
|
80
|
+
const setTranslation = (data) => {
|
|
81
|
+
Object.keys(data).forEach((lang) => {
|
|
82
|
+
if (!TRANSLATIONS[lang]) {
|
|
83
|
+
TRANSLATIONS[lang] = {};
|
|
84
|
+
}
|
|
85
|
+
for (let key in data[lang]) {
|
|
86
|
+
TRANSLATIONS[lang][key] = data[lang][key];
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
};
|
|
87
90
|
|
|
88
91
|
/**
|
|
89
92
|
* @name setClientStyling
|
|
@@ -144,6 +147,19 @@ function setStreamStyling(stylingContainer, domain, subscription) {
|
|
|
144
147
|
}
|
|
145
148
|
}
|
|
146
149
|
|
|
150
|
+
/**
|
|
151
|
+
* Subscribe to translation updates via emMessageBus.
|
|
152
|
+
*
|
|
153
|
+
* @param {string} domain - The channel or namespace to listen for translation updates.
|
|
154
|
+
* @param {any} subscription - The subscription object that will be assigned when subscribed.
|
|
155
|
+
* @param {Function} onChange - Callback function triggered when new translation data arrives.
|
|
156
|
+
*/
|
|
157
|
+
function getStreamTranslations(domain, subscription, onChange) {
|
|
158
|
+
if (window.emMessageBus) {
|
|
159
|
+
window.emMessageBus.subscribe(domain, onChange);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
147
163
|
const casinoPlayRandomGameCss = ":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}";
|
|
148
164
|
const CasinoPlayRandomGameStyle0 = casinoPlayRandomGameCss;
|
|
149
165
|
|
|
@@ -215,6 +231,9 @@ const CasinoPlayRandomGame = class {
|
|
|
215
231
|
if (this.translationUrl.length > 2) {
|
|
216
232
|
getTranslations(this.translationUrl);
|
|
217
233
|
}
|
|
234
|
+
if (!Boolean(this.translationUrl) && this.mbSource && window.emMessageBus != undefined) {
|
|
235
|
+
getStreamTranslations(`${this.mbSource}.Translation`, this.translationSubscription, setTranslation);
|
|
236
|
+
}
|
|
218
237
|
if (this.endpoint && this.language && this.datasource) {
|
|
219
238
|
return this.fetchGameList();
|
|
220
239
|
}
|
|
@@ -233,6 +252,7 @@ const CasinoPlayRandomGame = class {
|
|
|
233
252
|
}
|
|
234
253
|
disconnectedCallback() {
|
|
235
254
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
255
|
+
this.translationSubscription && this.translationSubscription.unsubscribe();
|
|
236
256
|
}
|
|
237
257
|
fetchGameList() {
|
|
238
258
|
let url = new URL(`${this.endpoint}/v1/casino/games`);
|
|
@@ -367,7 +387,7 @@ const CasinoPlayRandomGame = class {
|
|
|
367
387
|
return (index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: "GameContainerGradient" }), index.h("div", { class: "GamesContainer" }, skeletonCards)));
|
|
368
388
|
}
|
|
369
389
|
render() {
|
|
370
|
-
return (index.h("div", { key: '
|
|
390
|
+
return (index.h("div", { key: 'a1e3f626fea9bcd6a351f1769675e11b21ac8fbd', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (index.h("div", { class: "RandomGameError" }, index.h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: "GameContainerGradient" }), index.h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
|
|
371
391
|
this.gamesToShow.map((game, index$1) => (index.h("div", { class: "RandomGameCard", key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("img", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && (index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: "QustionMark" }, "?"), index.h("div", { class: "HexagonMarkShadow" }), index.h("div", { class: "HexagonMark" }))), !this.animationStarted && (index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
|
|
372
392
|
}
|
|
373
393
|
get host() { return index.getElement(this); }
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { getDevice } from "../../utils/utils";
|
|
3
|
-
import { getTranslations, translate } from "../../utils/locale.utils";
|
|
3
|
+
import { getTranslations, translate, setTranslation } from "../../utils/locale.utils";
|
|
4
4
|
import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
5
|
+
import { getStreamTranslations } from "../../../../../../../../libs/common/src/i18n/index";
|
|
5
6
|
import "../../../../../ui-skeleton/dist/types/index";
|
|
6
7
|
export class CasinoPlayRandomGame {
|
|
7
8
|
constructor() {
|
|
@@ -69,6 +70,9 @@ export class CasinoPlayRandomGame {
|
|
|
69
70
|
if (this.translationUrl.length > 2) {
|
|
70
71
|
getTranslations(this.translationUrl);
|
|
71
72
|
}
|
|
73
|
+
if (!Boolean(this.translationUrl) && this.mbSource && window.emMessageBus != undefined) {
|
|
74
|
+
getStreamTranslations(`${this.mbSource}.Translation`, this.translationSubscription, setTranslation);
|
|
75
|
+
}
|
|
72
76
|
if (this.endpoint && this.language && this.datasource) {
|
|
73
77
|
return this.fetchGameList();
|
|
74
78
|
}
|
|
@@ -87,6 +91,7 @@ export class CasinoPlayRandomGame {
|
|
|
87
91
|
}
|
|
88
92
|
disconnectedCallback() {
|
|
89
93
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
94
|
+
this.translationSubscription && this.translationSubscription.unsubscribe();
|
|
90
95
|
}
|
|
91
96
|
fetchGameList() {
|
|
92
97
|
let url = new URL(`${this.endpoint}/v1/casino/games`);
|
|
@@ -221,7 +226,7 @@ export class CasinoPlayRandomGame {
|
|
|
221
226
|
return (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer" }, skeletonCards)));
|
|
222
227
|
}
|
|
223
228
|
render() {
|
|
224
|
-
return (h("div", { key: '
|
|
229
|
+
return (h("div", { key: 'a1e3f626fea9bcd6a351f1769675e11b21ac8fbd', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
|
|
225
230
|
this.gamesToShow.map((game, index) => (h("div", { class: "RandomGameCard", key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && (h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" }))), !this.animationStarted && (h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
|
|
226
231
|
}
|
|
227
232
|
static get is() { return "casino-play-random-game"; }
|
|
@@ -48,14 +48,7 @@ export const getTranslations = (url) => {
|
|
|
48
48
|
fetch(url)
|
|
49
49
|
.then((res) => res.json())
|
|
50
50
|
.then((data) => {
|
|
51
|
-
|
|
52
|
-
if (!TRANSLATIONS[lang]) {
|
|
53
|
-
TRANSLATIONS[lang] = {};
|
|
54
|
-
}
|
|
55
|
-
for (let key in data[lang]) {
|
|
56
|
-
TRANSLATIONS[lang][key] = data[lang][key];
|
|
57
|
-
}
|
|
58
|
-
});
|
|
51
|
+
setTranslation(data);
|
|
59
52
|
resolve(true);
|
|
60
53
|
});
|
|
61
54
|
});
|
|
@@ -64,3 +57,13 @@ export const translate = (key, customLang) => {
|
|
|
64
57
|
const lang = customLang;
|
|
65
58
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
66
59
|
};
|
|
60
|
+
export const setTranslation = (data) => {
|
|
61
|
+
Object.keys(data).forEach((lang) => {
|
|
62
|
+
if (!TRANSLATIONS[lang]) {
|
|
63
|
+
TRANSLATIONS[lang] = {};
|
|
64
|
+
}
|
|
65
|
+
for (let key in data[lang]) {
|
|
66
|
+
TRANSLATIONS[lang][key] = data[lang][key];
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
};
|
|
@@ -64,14 +64,7 @@ const getTranslations = (url) => {
|
|
|
64
64
|
fetch(url)
|
|
65
65
|
.then((res) => res.json())
|
|
66
66
|
.then((data) => {
|
|
67
|
-
|
|
68
|
-
if (!TRANSLATIONS[lang]) {
|
|
69
|
-
TRANSLATIONS[lang] = {};
|
|
70
|
-
}
|
|
71
|
-
for (let key in data[lang]) {
|
|
72
|
-
TRANSLATIONS[lang][key] = data[lang][key];
|
|
73
|
-
}
|
|
74
|
-
});
|
|
67
|
+
setTranslation(data);
|
|
75
68
|
resolve(true);
|
|
76
69
|
});
|
|
77
70
|
});
|
|
@@ -80,6 +73,16 @@ const translate = (key, customLang) => {
|
|
|
80
73
|
const lang = customLang;
|
|
81
74
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
82
75
|
};
|
|
76
|
+
const setTranslation = (data) => {
|
|
77
|
+
Object.keys(data).forEach((lang) => {
|
|
78
|
+
if (!TRANSLATIONS[lang]) {
|
|
79
|
+
TRANSLATIONS[lang] = {};
|
|
80
|
+
}
|
|
81
|
+
for (let key in data[lang]) {
|
|
82
|
+
TRANSLATIONS[lang][key] = data[lang][key];
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
};
|
|
83
86
|
|
|
84
87
|
/**
|
|
85
88
|
* @name setClientStyling
|
|
@@ -140,6 +143,19 @@ function setStreamStyling(stylingContainer, domain, subscription) {
|
|
|
140
143
|
}
|
|
141
144
|
}
|
|
142
145
|
|
|
146
|
+
/**
|
|
147
|
+
* Subscribe to translation updates via emMessageBus.
|
|
148
|
+
*
|
|
149
|
+
* @param {string} domain - The channel or namespace to listen for translation updates.
|
|
150
|
+
* @param {any} subscription - The subscription object that will be assigned when subscribed.
|
|
151
|
+
* @param {Function} onChange - Callback function triggered when new translation data arrives.
|
|
152
|
+
*/
|
|
153
|
+
function getStreamTranslations(domain, subscription, onChange) {
|
|
154
|
+
if (window.emMessageBus) {
|
|
155
|
+
window.emMessageBus.subscribe(domain, onChange);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
143
159
|
const casinoPlayRandomGameCss = ":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}";
|
|
144
160
|
const CasinoPlayRandomGameStyle0 = casinoPlayRandomGameCss;
|
|
145
161
|
|
|
@@ -211,6 +227,9 @@ const CasinoPlayRandomGame = class {
|
|
|
211
227
|
if (this.translationUrl.length > 2) {
|
|
212
228
|
getTranslations(this.translationUrl);
|
|
213
229
|
}
|
|
230
|
+
if (!Boolean(this.translationUrl) && this.mbSource && window.emMessageBus != undefined) {
|
|
231
|
+
getStreamTranslations(`${this.mbSource}.Translation`, this.translationSubscription, setTranslation);
|
|
232
|
+
}
|
|
214
233
|
if (this.endpoint && this.language && this.datasource) {
|
|
215
234
|
return this.fetchGameList();
|
|
216
235
|
}
|
|
@@ -229,6 +248,7 @@ const CasinoPlayRandomGame = class {
|
|
|
229
248
|
}
|
|
230
249
|
disconnectedCallback() {
|
|
231
250
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
251
|
+
this.translationSubscription && this.translationSubscription.unsubscribe();
|
|
232
252
|
}
|
|
233
253
|
fetchGameList() {
|
|
234
254
|
let url = new URL(`${this.endpoint}/v1/casino/games`);
|
|
@@ -363,7 +383,7 @@ const CasinoPlayRandomGame = class {
|
|
|
363
383
|
return (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer" }, skeletonCards)));
|
|
364
384
|
}
|
|
365
385
|
render() {
|
|
366
|
-
return (h("div", { key: '
|
|
386
|
+
return (h("div", { key: 'a1e3f626fea9bcd6a351f1769675e11b21ac8fbd', ref: (el) => (this.stylingContainer = el) }, this.hasErrors ? (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language)))) : this.isLoading ? (this.renderSkeleton()) : (h("div", { class: "RandomGameWrapper" }, h("div", { class: "GameContainerGradient" }), h("div", { class: "GamesContainer", ref: (el) => (this.gameContainer = el) }, this.gamesToShow &&
|
|
367
387
|
this.gamesToShow.map((game, index) => (h("div", { class: "RandomGameCard", key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : undefined }, h("div", { class: "RandomGameVendor" }, game.vendor.name), h("img", { class: "RandomGameImage", src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index && this.renderGameDetails())))), h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, h("div", { class: "ButtonContainer" }, this.iconVisibility && (h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, h("div", { class: "QustionMark" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" }))), !this.animationStarted && (h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))))))));
|
|
368
388
|
}
|
|
369
389
|
get host() { return getElement(this); }
|
|
@@ -61,6 +61,7 @@ export declare class CasinoPlayRandomGame {
|
|
|
61
61
|
private selectedGameEl;
|
|
62
62
|
private iconVisibility;
|
|
63
63
|
private stylingSubscription;
|
|
64
|
+
private translationSubscription;
|
|
64
65
|
private stylingContainer;
|
|
65
66
|
watchEndpoint(newValue: string, oldValue: string): void;
|
|
66
67
|
handleNewTranslations(): void;
|