@everymatrix/casino-play-random-game 1.0.69

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.
Files changed (44) hide show
  1. package/dist/casino-play-random-game/casino-play-random-game.esm.js +1 -0
  2. package/dist/casino-play-random-game/index.esm.js +0 -0
  3. package/dist/casino-play-random-game/p-0f177dd3.entry.js +1 -0
  4. package/dist/casino-play-random-game/p-d2e799c3.js +2 -0
  5. package/dist/casino-play-random-game/p-e1255160.js +1 -0
  6. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  7. package/dist/cjs/casino-play-random-game.cjs.entry.js +330 -0
  8. package/dist/cjs/casino-play-random-game.cjs.js +25 -0
  9. package/dist/cjs/index-4cc20a8d.js +1217 -0
  10. package/dist/cjs/index.cjs.js +2 -0
  11. package/dist/cjs/loader.cjs.js +15 -0
  12. package/dist/collection/collection-manifest.json +12 -0
  13. package/dist/collection/components/casino-play-random-game/casino-play-random-game.css +363 -0
  14. package/dist/collection/components/casino-play-random-game/casino-play-random-game.js +448 -0
  15. package/dist/collection/components/casino-play-random-game/index.js +1 -0
  16. package/dist/collection/index.js +1 -0
  17. package/dist/collection/utils/locale.utils.js +73 -0
  18. package/dist/collection/utils/utils.js +27 -0
  19. package/dist/esm/app-globals-0f993ce5.js +3 -0
  20. package/dist/esm/casino-play-random-game.entry.js +326 -0
  21. package/dist/esm/casino-play-random-game.js +20 -0
  22. package/dist/esm/index-7666b794.js +1190 -0
  23. package/dist/esm/index.js +1 -0
  24. package/dist/esm/loader.js +11 -0
  25. package/dist/index.cjs.js +1 -0
  26. package/dist/index.js +1 -0
  27. package/dist/stencil.config.dev.js +17 -0
  28. package/dist/stencil.config.js +17 -0
  29. package/dist/types/Users/raul.vasile/workspace/everymatrix/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.d.ts +2 -0
  30. package/dist/types/Users/raul.vasile/workspace/everymatrix/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.dev.d.ts +2 -0
  31. package/dist/types/components/casino-play-random-game/casino-play-random-game.d.ts +74 -0
  32. package/dist/types/components/casino-play-random-game/index.d.ts +1 -0
  33. package/dist/types/components.d.ts +117 -0
  34. package/dist/types/index.d.ts +1 -0
  35. package/dist/types/stencil-public-runtime.d.ts +1674 -0
  36. package/dist/types/utils/locale.utils.d.ts +6 -0
  37. package/dist/types/utils/utils.d.ts +2 -0
  38. package/loader/cdn.js +1 -0
  39. package/loader/index.cjs.js +1 -0
  40. package/loader/index.d.ts +24 -0
  41. package/loader/index.es2017.js +1 -0
  42. package/loader/index.js +2 -0
  43. package/loader/package.json +11 -0
  44. package/package.json +26 -0
@@ -0,0 +1,326 @@
1
+ import { r as registerInstance, h, g as getElement } from './index-7666b794.js';
2
+
3
+ const getDevice = () => {
4
+ let userAgent = window.navigator.userAgent;
5
+ if (userAgent.toLowerCase().match(/android/i)) {
6
+ return 'Android';
7
+ }
8
+ if (userAgent.toLowerCase().match(/iphone/i)) {
9
+ return 'iPhone';
10
+ }
11
+ if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
12
+ return 'iPad';
13
+ }
14
+ return 'PC';
15
+ };
16
+
17
+ const DEFAULT_LANGUAGE = 'en';
18
+ const TRANSLATIONS = {
19
+ en: {
20
+ error: 'Error',
21
+ randomGameLoading: 'Loading ...',
22
+ playRandomGame: 'Play a random game',
23
+ playNowRandomGame: 'Play now',
24
+ spinRandomGame: 'Spin'
25
+ },
26
+ ro: {
27
+ error: 'Error',
28
+ randomGameLoading: 'Loading ...',
29
+ playRandomGame: 'Play a random game',
30
+ playNowRandomGame: 'Play now',
31
+ spinRandomGame: 'Spin'
32
+ },
33
+ fr: {
34
+ error: 'Error',
35
+ randomGameLoading: 'Loading ...',
36
+ playRandomGame: 'Play a random game',
37
+ playNowRandomGame: 'Play now',
38
+ spinRandomGame: 'Spin'
39
+ },
40
+ hr: {
41
+ error: 'Error',
42
+ randomGameLoading: 'Loading ...',
43
+ playRandomGame: 'Play a random game',
44
+ playNowRandomGame: 'Play now',
45
+ spinRandomGame: 'Spin'
46
+ },
47
+ hu: {
48
+ error: 'Error',
49
+ randomGameLoading: 'Loading ...',
50
+ playRandomGame: 'Play a random game',
51
+ playNowRandomGame: 'Play now',
52
+ spinRandomGame: 'Spin'
53
+ },
54
+ tr: {
55
+ error: "Hata",
56
+ randomGameLoading: "Yükleniyor...",
57
+ playRandomGame: "Rasgele bir oyun oyna",
58
+ playNowRandomGame: "Şimdi Oyna",
59
+ spinRandomGame: "DEĞİŞTİR"
60
+ }
61
+ };
62
+ const getTranslations = (url) => {
63
+ return new Promise((resolve) => {
64
+ fetch(url)
65
+ .then((res) => res.json())
66
+ .then((data) => {
67
+ Object.keys(data).forEach((item) => {
68
+ if (!(item in TRANSLATIONS)) {
69
+ TRANSLATIONS[item] = {};
70
+ }
71
+ for (let key in data[item]) {
72
+ TRANSLATIONS[item][key] = data[item][key];
73
+ }
74
+ });
75
+ resolve(true);
76
+ });
77
+ });
78
+ };
79
+ const translate = (key, customLang, values) => {
80
+ const lang = customLang;
81
+ let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
82
+ if (values !== undefined) {
83
+ for (const [key, value] of Object.entries(values.values)) {
84
+ const regex = new RegExp(`{${key}}`, 'g');
85
+ translation = translation.replace(regex, value);
86
+ }
87
+ }
88
+ return translation;
89
+ };
90
+
91
+ const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n height: var(--emw--size-4x-medium, 700px);\n background: transparent;\n position: relative;\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, 20px);\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, 20px);\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}\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: 100;\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, 20px);\n text-transform: uppercase;\n width: max-content;\n border-radius: var(--emw--button-border-radius, 50px);\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@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 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}";
92
+ const CasinoPlayRandomGameStyle0 = casinoPlayRandomGameCss;
93
+
94
+ const CasinoPlayRandomGame = class {
95
+ constructor(hostRef) {
96
+ registerInstance(this, hostRef);
97
+ this.animation = null;
98
+ this.selectedGameIndex = null;
99
+ this.selectedGameEl = null;
100
+ this.iconVisibility = null;
101
+ this.shuffle = (array) => {
102
+ let currentIndex = array.length;
103
+ let randomIndex;
104
+ while (currentIndex !== 0) {
105
+ randomIndex = Math.floor(Math.random() * currentIndex);
106
+ currentIndex--;
107
+ [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
108
+ }
109
+ return array;
110
+ };
111
+ this.setClientStyling = () => {
112
+ let sheet = document.createElement('style');
113
+ sheet.innerHTML = this.clientStyling;
114
+ this.host.shadowRoot.prepend(sheet);
115
+ };
116
+ this.setClientStylingURL = () => {
117
+ let url = new URL(this.clientStylingUrl);
118
+ let cssFile = document.createElement('style');
119
+ fetch(url.href)
120
+ .then((res) => res.text())
121
+ .then((data) => {
122
+ cssFile.innerHTML = data;
123
+ this.clientStyling = data;
124
+ setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
125
+ });
126
+ };
127
+ this.endpoint = undefined;
128
+ this.datasource = undefined;
129
+ this.language = 'en';
130
+ this.specificCategory = '';
131
+ this.iconVisible = '';
132
+ this.iconVisibleOnAnim = '';
133
+ this.launchByGameCard = '';
134
+ this.clientStyling = '';
135
+ this.clientStylingUrl = '';
136
+ this.translationUrl = '';
137
+ this.hasErrors = false;
138
+ this.limitStylingAppends = false;
139
+ this.isLoading = true;
140
+ this.gamesToShow = undefined;
141
+ this.selectedGame = null;
142
+ this.animationDone = false;
143
+ this.animationStarted = false;
144
+ }
145
+ watchEndpoint(newValue, oldValue) {
146
+ if (newValue && newValue != oldValue && this.endpoint) {
147
+ this.fetchGameList();
148
+ }
149
+ }
150
+ handleNewTranslations() {
151
+ this.isLoading = true;
152
+ getTranslations(this.translationUrl).then(() => {
153
+ this.isLoading = false;
154
+ });
155
+ }
156
+ handleIsIconVisible() {
157
+ this.iconVisibility = this.iconVisible === 'true' ? true : false;
158
+ }
159
+ connectedCallback() {
160
+ this.handleIsIconVisible();
161
+ }
162
+ componentWillLoad() {
163
+ if (this.translationUrl.length > 2) {
164
+ getTranslations(this.translationUrl);
165
+ }
166
+ if (this.endpoint && this.language && this.datasource) {
167
+ return this.fetchGameList();
168
+ }
169
+ }
170
+ componentDidLoad() {
171
+ if (!this.limitStylingAppends && this.host) {
172
+ if (this.clientStyling)
173
+ this.setClientStyling();
174
+ if (this.clientStylingUrl)
175
+ this.setClientStylingURL();
176
+ this.limitStylingAppends = true;
177
+ }
178
+ }
179
+ fetchGameList() {
180
+ let url = new URL(`${this.endpoint}/v1/casino/games`);
181
+ url.searchParams.append('platform', getDevice());
182
+ url.searchParams.append('datasource', this.datasource);
183
+ url.searchParams.append('fields', 'gId,id,href,thumbnail,name,vendor,launchUrl,subVendor');
184
+ url.searchParams.append('expand', 'vendor');
185
+ // Number of games chosen
186
+ url.searchParams.append('pagination', 'offset=0,limit=423');
187
+ url.searchParams.append('language', this.language);
188
+ if (this.specificCategory) {
189
+ url.searchParams.append('filter', `categories(id=${this.specificCategory})`);
190
+ }
191
+ return new Promise((resolve, reject) => {
192
+ this.isLoading = true;
193
+ fetch(url.href)
194
+ .then((res) => res.json())
195
+ .then((data) => {
196
+ this.gamesToShow = this.setUpGames(data === null || data === void 0 ? void 0 : data.items);
197
+ resolve(true);
198
+ }).catch((err) => {
199
+ console.error(err);
200
+ this.hasErrors = true;
201
+ reject(err);
202
+ }).finally(() => {
203
+ this.isLoading = false;
204
+ });
205
+ });
206
+ }
207
+ setUpGames(games) {
208
+ // Only 40 games will be selected at a time; the random game will be selected from these.
209
+ const shuffledGames = this.shuffle(games).slice(0, 40);
210
+ // Clone the games
211
+ return shuffledGames.concat(shuffledGames);
212
+ }
213
+ selectRandomGame() {
214
+ const originalGamesLength = this.gamesToShow.length / 2;
215
+ // Substract 3 to ensure there are always at least 5 cards after the selected one
216
+ this.selectedGameIndex = Math.floor(Math.random() * (originalGamesLength - 3));
217
+ // Offset by the length of the original to select from the cloned part
218
+ this.selectedGameIndex += originalGamesLength;
219
+ this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
220
+ }
221
+ playRandomGame() {
222
+ this.animateGames();
223
+ //@ts-ignore
224
+ if (typeof gtag == 'function') {
225
+ //@ts-ignore
226
+ gtag('event', 'PlayRandomGame', {
227
+ 'context': 'CasinoPlayRandomGame'
228
+ });
229
+ }
230
+ }
231
+ respin() {
232
+ this.animateGames();
233
+ //@ts-ignore
234
+ if (typeof gtag == 'function') {
235
+ //@ts-ignore
236
+ gtag('event', 'RespinRandomGame', {
237
+ 'context': 'CasinoPlayRandomGame'
238
+ });
239
+ }
240
+ }
241
+ animateGames() {
242
+ this.iconVisibility = this.iconVisibleOnAnim === 'true' ? true : false;
243
+ this.animationStarted = true;
244
+ this.animationDone = false;
245
+ if (this.animation)
246
+ this.animation.cancel();
247
+ if (this.selectedGameEl) {
248
+ this.selectedGameEl.classList.remove('TheRandomGame');
249
+ this.selectedGame = null;
250
+ this.selectedGameIndex = null;
251
+ }
252
+ this.selectRandomGame();
253
+ const gapStyle = window.getComputedStyle(this.gameContainer).getPropertyValue('gap');
254
+ const gap = parseInt(gapStyle, 10);
255
+ const cardWidth = this.selectedGameEl.offsetWidth;
256
+ const gameContainerWidth = this.gameContainer.offsetWidth;
257
+ const translation = ((cardWidth + gap) * this.selectedGameIndex) + // Width of game cards up to the selected
258
+ (cardWidth / 2) - // Additional half card width to center to the selected game
259
+ (gameContainerWidth / 2); // Minus half the container width to center the card
260
+ const containerRolling = [
261
+ { transform: `translateX(0px)`, scale: 1 },
262
+ { scale: 0.75 },
263
+ { transform: `translateX(-${translation}px)`, scale: 1 }
264
+ ];
265
+ const containerTiming = {
266
+ duration: 3000,
267
+ easing: 'cubic-bezier(0.5, 0, 0.5, 1.2)',
268
+ fill: 'forwards'
269
+ };
270
+ this.animation = this.gameContainer.animate(containerRolling, containerTiming);
271
+ this.animation.onfinish = () => {
272
+ this.animationDone = true;
273
+ this.selectedGameEl.classList.add('TheRandomGame');
274
+ this.selectedGame = this.gamesToShow[this.selectedGameIndex];
275
+ };
276
+ }
277
+ playGame() {
278
+ if (!this.selectedGame)
279
+ return;
280
+ window.postMessage({ type: 'PlayRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
281
+ //@ts-ignore
282
+ if (typeof gtag == 'function') {
283
+ //@ts-ignore
284
+ gtag('event', 'OpenRandomGame', {
285
+ 'context': 'CasinoPlayRandomGame'
286
+ });
287
+ }
288
+ }
289
+ ;
290
+ showGameInfo() {
291
+ window.postMessage({ type: 'InfoRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
292
+ //@ts-ignore
293
+ if (typeof gtag == 'function') {
294
+ //@ts-ignore
295
+ gtag('event', 'OpenRandomGameInfo', {
296
+ 'context': 'CasinoPlayRandomGame'
297
+ });
298
+ }
299
+ }
300
+ renderGameDetails() {
301
+ return h("div", { class: "RandomButtonsWrapper" }, h("div", { class: "RandomGameDetails" }, h("span", { class: "RandomGameTitle" }, this.selectedGame.name), h("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), h("div", { class: "RandomButtons" }, h("button", { class: "RandomButton On", onClick: () => this.respin() }, translate('spinRandomGame', this.language)), !this.launchByGameCard &&
302
+ h("button", { class: "RandomButton On", onClick: () => this.playGame() }, translate('playNowRandomGame', this.language))));
303
+ }
304
+ render() {
305
+ if (this.hasErrors) {
306
+ return (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language))));
307
+ }
308
+ if (this.isLoading) {
309
+ return (h("div", { class: "RandomGameLoading" }, h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
310
+ }
311
+ if (!this.isLoading) {
312
+ return h("div", { class: "RandomGameWrapper" }, h("div", { class: 'GameContainerGradient' }), h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index) => (h("div", { class: 'RandomGameCard', key: index, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, 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)))));
313
+ }
314
+ }
315
+ get host() { return getElement(this); }
316
+ static get watchers() { return {
317
+ "endpoint": ["watchEndpoint"],
318
+ "datasource": ["watchEndpoint"],
319
+ "language": ["watchEndpoint"],
320
+ "translationUrl": ["handleNewTranslations"],
321
+ "iconVisible": ["handleIsIconVisible"]
322
+ }; }
323
+ };
324
+ CasinoPlayRandomGame.style = CasinoPlayRandomGameStyle0;
325
+
326
+ export { CasinoPlayRandomGame as casino_play_random_game };
@@ -0,0 +1,20 @@
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-7666b794.js';
2
+ export { s as setNonce } from './index-7666b794.js';
3
+ import { g as globalScripts } from './app-globals-0f993ce5.js';
4
+
5
+ /*
6
+ Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
7
+ */
8
+ var patchBrowser = () => {
9
+ const importMeta = import.meta.url;
10
+ const opts = {};
11
+ if (importMeta !== "") {
12
+ opts.resourcesUrl = new URL(".", importMeta).href;
13
+ }
14
+ return promiseResolve(opts);
15
+ };
16
+
17
+ patchBrowser().then(async (options) => {
18
+ await globalScripts();
19
+ return bootstrapLazy([["casino-play-random-game",[[1,"casino-play-random-game",{"endpoint":[513],"datasource":[513],"language":[513],"specificCategory":[513,"specific-category"],"iconVisible":[513,"icon-visible"],"iconVisibleOnAnim":[513,"icon-visible-on-anim"],"launchByGameCard":[513,"launch-by-game-card"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"hasErrors":[32],"limitStylingAppends":[32],"isLoading":[32],"gamesToShow":[32],"selectedGame":[32],"animationDone":[32],"animationStarted":[32]},null,{"endpoint":["watchEndpoint"],"datasource":["watchEndpoint"],"language":["watchEndpoint"],"translationUrl":["handleNewTranslations"],"iconVisible":["handleIsIconVisible"]}]]]], options);
20
+ });