@everymatrix/casino-play-random-game 1.29.0

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 (47) 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-0f38b3f8.js +1 -0
  4. package/dist/casino-play-random-game/p-0f957927.entry.js +1 -0
  5. package/dist/cjs/casino-play-random-game.cjs.entry.js +344 -0
  6. package/dist/cjs/casino-play-random-game.cjs.js +19 -0
  7. package/dist/cjs/index-8944e204.js +1247 -0
  8. package/dist/cjs/index.cjs.js +2 -0
  9. package/dist/cjs/loader.cjs.js +21 -0
  10. package/dist/collection/collection-manifest.json +12 -0
  11. package/dist/collection/components/casino-play-random-game/casino-play-random-game.css +347 -0
  12. package/dist/collection/components/casino-play-random-game/casino-play-random-game.js +469 -0
  13. package/dist/collection/index.js +1 -0
  14. package/dist/collection/utils/locale.utils.js +60 -0
  15. package/dist/collection/utils/utils.js +27 -0
  16. package/dist/components/casino-play-random-game.d.ts +11 -0
  17. package/dist/components/casino-play-random-game.js +376 -0
  18. package/dist/components/index.d.ts +26 -0
  19. package/dist/components/index.js +1 -0
  20. package/dist/esm/casino-play-random-game.entry.js +340 -0
  21. package/dist/esm/casino-play-random-game.js +17 -0
  22. package/dist/esm/index-58563736.js +1221 -0
  23. package/dist/esm/index.js +1 -0
  24. package/dist/esm/loader.js +17 -0
  25. package/dist/esm/polyfills/core-js.js +11 -0
  26. package/dist/esm/polyfills/css-shim.js +1 -0
  27. package/dist/esm/polyfills/dom.js +79 -0
  28. package/dist/esm/polyfills/es5-html-element.js +1 -0
  29. package/dist/esm/polyfills/index.js +34 -0
  30. package/dist/esm/polyfills/system.js +6 -0
  31. package/dist/index.cjs.js +1 -0
  32. package/dist/index.js +1 -0
  33. package/dist/stencil.config.js +22 -0
  34. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/casino-play-random-game/.stencil/packages/casino-play-random-game/stencil.config.d.ts +2 -0
  35. package/dist/types/components/casino-play-random-game/casino-play-random-game.d.ts +73 -0
  36. package/dist/types/components.d.ts +117 -0
  37. package/dist/types/index.d.ts +1 -0
  38. package/dist/types/stencil-public-runtime.d.ts +1565 -0
  39. package/dist/types/utils/locale.utils.d.ts +6 -0
  40. package/dist/types/utils/utils.d.ts +2 -0
  41. package/loader/cdn.js +3 -0
  42. package/loader/index.cjs.js +3 -0
  43. package/loader/index.d.ts +12 -0
  44. package/loader/index.es2017.js +3 -0
  45. package/loader/index.js +4 -0
  46. package/loader/package.json +10 -0
  47. package/package.json +19 -0
@@ -0,0 +1,340 @@
1
+ import { r as registerInstance, h, g as getElement } from './index-58563736.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
+ const getDevicePlatform = () => {
17
+ const device = getDevice();
18
+ if (device) {
19
+ if (device === 'PC') {
20
+ return 'dk';
21
+ }
22
+ else if (device === 'iPad' || device === 'iPhone') {
23
+ return 'mtWeb';
24
+ }
25
+ else {
26
+ return 'mtWeb';
27
+ }
28
+ }
29
+ };
30
+
31
+ const DEFAULT_LANGUAGE = 'en';
32
+ const TRANSLATIONS = {
33
+ en: {
34
+ error: 'Error',
35
+ randomGameLoading: 'Loading ...',
36
+ playRandomGame: 'Play a random game',
37
+ playNowRandomGame: 'Play now',
38
+ spinRandomGame: 'Spin'
39
+ },
40
+ ro: {
41
+ error: 'Eroare',
42
+ playRandomGame: 'Play a random game',
43
+ playNowRandomGame: 'Play now',
44
+ spinRandomGame: 'Spin'
45
+ },
46
+ fr: {
47
+ error: 'Error',
48
+ playRandomGame: 'Play a random game',
49
+ playNowRandomGame: 'Play now',
50
+ spinRandomGame: 'Spin'
51
+ },
52
+ hr: {
53
+ error: 'Greška',
54
+ playRandomGame: 'Play a random game',
55
+ playNowRandomGame: 'Play now',
56
+ spinRandomGame: 'Spin'
57
+ },
58
+ hu: {
59
+ error: 'Greška',
60
+ playRandomGame: 'Play a random game',
61
+ playNowRandomGame: 'Play now',
62
+ spinRandomGame: 'Spin'
63
+ }
64
+ };
65
+ const getTranslations = (url) => {
66
+ // fetch url, get the data, replace the TRANSLATIONS content
67
+ return new Promise((resolve) => {
68
+ fetch(url)
69
+ .then((res) => res.json())
70
+ .then((data) => {
71
+ Object.keys(data).forEach((item) => {
72
+ for (let key in data[item]) {
73
+ TRANSLATIONS[item][key] = data[item][key];
74
+ }
75
+ });
76
+ resolve(true);
77
+ });
78
+ });
79
+ };
80
+ const translate = (key, customLang, values) => {
81
+ const lang = customLang;
82
+ let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
83
+ if (values !== undefined) {
84
+ for (const [key, value] of Object.entries(values.values)) {
85
+ const regex = new RegExp(`{${key}}`, 'g');
86
+ translation = translation.replace(regex, value);
87
+ }
88
+ }
89
+ return translation;
90
+ };
91
+
92
+ const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n}\n\n.RandomGameWrapper {\n width: 100%;\n overflow: hidden;\n background: transparent;\n position: relative;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.5) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.5) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.GamesContainer {\n display: flex;\n height: 330px;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: 20px;\n}\n\n.RandomGameCard {\n position: relative;\n width: 256px;\n height: 170px;\n border-radius: 5px;\n filter: blur(5px);\n}\n.RandomGameCard .RandomGameVendor {\n position: absolute;\n font-size: 12px;\n bottom: 10px;\n left: 10px;\n color: var(--emfe-w-color-white, #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: 256px;\n height: 170px;\n}\n\n.RandomGameDetails {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n color: var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n font-size: 14px;\n width: 100%;\n}\n.RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n}\n.RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: 12px;\n font-weight: 400;\n border: solid 1px var(--emfe-w-casino-typography, var(--emfe-w-color-white, #FFFFFF));\n text-align: center;\n margin: 4px 0;\n line-height: 14px;\n cursor: pointer;\n}\n.RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n}\n\n.ButtonWrapper {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\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}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n}\n\n.QustionMark {\n position: relative;\n font-size: 80px;\n font-weight: 700;\n color: var(--emfe-w-color-white, #FFFFFF);\n z-index: 5;\n bottom: 20px;\n text-shadow: 0px 4px 0px var(--emfe-w-color-black, #000000);\n}\n\n.HexagonMark {\n position: absolute;\n width: 70px;\n height: 85px;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMarkBorder {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 5px;\n left: 5px;\n width: 60px;\n height: 75px;\n background: linear-gradient(180deg, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)) 0%, var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)) 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: 5px;\n width: 100%;\n}\n\n.RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\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 .GameContainerGradient {\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n background: linear-gradient(90deg, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 0%, rgba(7, 7, 42, 0.2) 25%, rgba(7, 7, 42, 0) 50%, rgba(7, 7, 42, 0.2) 75%, var(--emfe-w-casino-color-bg, var(--emfe-w-color-background, #07072A)) 100%);\n pointer-events: none;\n z-index: 1;\n }\n\n .RandomGameCard {\n width: 102px;\n height: 146px;\n border-radius: 5px;\n filter: blur(5px);\n }\n\n .RandomGameImage {\n width: 102px;\n height: 146px;\n }\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: 12px;\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n\n .RandomGameCard .RandomGameVendor {\n font-size: 12px;\n bottom: 5px;\n right: 5px;\n }\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\n .RandomButton {\n font-size: 18px;\n text-transform: uppercase;\n width: max-content;\n border-radius: 5px;\n padding: 5px 25px;\n border: solid 3px var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C));\n color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));\n opacity: 1;\n text-shadow: 1px 1px 2px var(--emfe-w-color-black, #000000);\n animation: ButtonEffect 3s linear infinite;\n background-image: linear-gradient(to right, var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)), var(--emfe-w-categories-color-secondary, var(--emfe-w-color-secondary, #FD2839)), var(--emfe-w-casino-color-primary, var(--emfe-w-color-primary, #D0046C)));\n background-size: 300% 100%;\n cursor: pointer;\n }\n .RandomButton:hover {\n opacity: 0.8;\n }\n}";
93
+
94
+ const CasinoPlayRandomGame = class {
95
+ constructor(hostRef) {
96
+ registerInstance(this, hostRef);
97
+ /**
98
+ * Language of the widget
99
+ */
100
+ this.language = 'en';
101
+ /**
102
+ * Configure a specific category for randomising the games.
103
+ */
104
+ this.specificCategory = '';
105
+ /**
106
+ * Icon visible initially
107
+ */
108
+ this.iconVisible = '';
109
+ /**
110
+ * Icon visible while rolling
111
+ */
112
+ this.iconVisibleOnAnim = '';
113
+ /**
114
+ * Open event on the game card.
115
+ */
116
+ this.launchByGameCard = '';
117
+ /**
118
+ * Client custom styling via string
119
+ */
120
+ this.clientStyling = '';
121
+ /**
122
+ * Client custom styling via url
123
+ */
124
+ this.clientStylingUrl = '';
125
+ /**
126
+ * Translations via URL
127
+ */
128
+ this.translationUrl = '';
129
+ this.hasErrors = false;
130
+ this.limitStylingAppends = false;
131
+ this.isLoading = true;
132
+ this.selectedGame = null;
133
+ this.animationDone = false;
134
+ this.animationStarted = false;
135
+ this.animation = null;
136
+ this.selectedGameIndex = null;
137
+ this.selectedGameEl = null;
138
+ this.iconVisibility = null;
139
+ this.shuffle = (array) => {
140
+ let currentIndex = array.length;
141
+ let randomIndex;
142
+ while (currentIndex !== 0) {
143
+ randomIndex = Math.floor(Math.random() * currentIndex);
144
+ currentIndex--;
145
+ [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
146
+ }
147
+ return array;
148
+ };
149
+ this.setClientStyling = () => {
150
+ let sheet = document.createElement('style');
151
+ sheet.innerHTML = this.clientStyling;
152
+ this.host.shadowRoot.prepend(sheet);
153
+ };
154
+ this.setClientStylingURL = () => {
155
+ let url = new URL(this.clientStylingUrl);
156
+ let cssFile = document.createElement('style');
157
+ fetch(url.href)
158
+ .then((res) => res.text())
159
+ .then((data) => {
160
+ cssFile.innerHTML = data;
161
+ this.clientStyling = data;
162
+ setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
163
+ });
164
+ };
165
+ }
166
+ watchEndpoint(newValue, oldValue) {
167
+ if (newValue && newValue != oldValue && this.endpoint) {
168
+ this.fetchGameList();
169
+ }
170
+ }
171
+ handleNewTranslations() {
172
+ this.isLoading = true;
173
+ getTranslations(this.translationUrl).then(() => {
174
+ this.isLoading = false;
175
+ });
176
+ }
177
+ connectedCallback() {
178
+ this.iconVisibility = this.iconVisible === 'true' ? true : false;
179
+ }
180
+ componentWillLoad() {
181
+ if (this.translationUrl.length > 2) {
182
+ getTranslations(this.translationUrl);
183
+ }
184
+ if (this.endpoint && this.language && this.datasource) {
185
+ return this.fetchGameList();
186
+ }
187
+ }
188
+ componentDidLoad() {
189
+ if (!this.limitStylingAppends && this.host) {
190
+ if (this.clientStyling)
191
+ this.setClientStyling();
192
+ if (this.clientStylingUrl)
193
+ this.setClientStylingURL();
194
+ this.limitStylingAppends = true;
195
+ }
196
+ }
197
+ fetchGameList() {
198
+ let url = new URL(`${this.endpoint}/v1/casino/games`);
199
+ url.searchParams.append('device', getDevicePlatform());
200
+ url.searchParams.append('datasource', this.datasource);
201
+ url.searchParams.append('fields', 'gId,id,href,thumbnail,name,vendor,launchUrl,subVendor');
202
+ url.searchParams.append('expand', 'vendor');
203
+ // Number of games chosen
204
+ url.searchParams.append('pagination', 'offset=0,limit=423');
205
+ url.searchParams.append('language', this.language);
206
+ if (this.specificCategory) {
207
+ url.searchParams.append('filter', `categories(id=${this.specificCategory})`);
208
+ }
209
+ return new Promise((resolve, reject) => {
210
+ this.isLoading = true;
211
+ fetch(url.href)
212
+ .then((res) => res.json())
213
+ .then((data) => {
214
+ this.gamesToShow = this.setUpGames(data === null || data === void 0 ? void 0 : data.items);
215
+ resolve(true);
216
+ }).catch((err) => {
217
+ console.error(err);
218
+ this.hasErrors = true;
219
+ reject(err);
220
+ }).finally(() => {
221
+ this.isLoading = false;
222
+ });
223
+ });
224
+ }
225
+ setUpGames(games) {
226
+ // Only 40 games will be selected at a time; the random game will be selected from these.
227
+ const shuffledGames = this.shuffle(games).slice(0, 40);
228
+ // Clone the games
229
+ return shuffledGames.concat(shuffledGames);
230
+ }
231
+ selectRandomGame() {
232
+ const originalGamesLength = this.gamesToShow.length / 2;
233
+ // Substract 3 to ensure there are always at least 5 cards after the selected one
234
+ this.selectedGameIndex = Math.floor(Math.random() * (originalGamesLength - 3));
235
+ // Offset by the length of the original to select from the cloned part
236
+ this.selectedGameIndex += originalGamesLength;
237
+ this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
238
+ }
239
+ playRandomGame() {
240
+ this.animateGames();
241
+ //@ts-ignore
242
+ if (typeof gtag == 'function') {
243
+ //@ts-ignore
244
+ gtag('event', 'PlayRandomGame', {
245
+ 'context': 'CasinoPlayRandomGame'
246
+ });
247
+ }
248
+ }
249
+ respin() {
250
+ this.animateGames();
251
+ //@ts-ignore
252
+ if (typeof gtag == 'function') {
253
+ //@ts-ignore
254
+ gtag('event', 'RespinRandomGame', {
255
+ 'context': 'CasinoPlayRandomGame'
256
+ });
257
+ }
258
+ }
259
+ animateGames() {
260
+ this.iconVisibility = this.iconVisibleOnAnim === 'true' ? true : false;
261
+ this.animationStarted = true;
262
+ this.animationDone = false;
263
+ if (this.animation)
264
+ this.animation.cancel();
265
+ if (this.selectedGameEl) {
266
+ this.selectedGameEl.classList.remove('TheRandomGame');
267
+ this.selectedGame = null;
268
+ this.selectedGameIndex = null;
269
+ }
270
+ this.selectRandomGame();
271
+ const gapStyle = window.getComputedStyle(this.gameContainer).getPropertyValue('gap');
272
+ const gap = parseInt(gapStyle, 10);
273
+ const cardWidth = this.selectedGameEl.offsetWidth;
274
+ const gameContainerWidth = this.gameContainer.offsetWidth;
275
+ const translation = ((cardWidth + gap) * this.selectedGameIndex) + // Width of game cards up to the selected
276
+ (cardWidth / 2) - // Additional half card width to center to the selected game
277
+ (gameContainerWidth / 2); // Minus half the container width to center the card
278
+ const containerRolling = [
279
+ { transform: `translateX(0px)`, scale: 1 },
280
+ { scale: 0.75 },
281
+ { transform: `translateX(-${translation}px)`, scale: 1 }
282
+ ];
283
+ const containerTiming = {
284
+ duration: 3000,
285
+ easing: 'cubic-bezier(0.5, 0, 0.5, 1.2)',
286
+ fill: 'forwards'
287
+ };
288
+ this.animation = this.gameContainer.animate(containerRolling, containerTiming);
289
+ this.animation.onfinish = () => {
290
+ this.animationDone = true;
291
+ this.selectedGameEl.classList.add('TheRandomGame');
292
+ this.selectedGame = this.gamesToShow[this.selectedGameIndex];
293
+ };
294
+ }
295
+ playGame() {
296
+ if (!this.selectedGame)
297
+ return;
298
+ window.postMessage({ type: 'PlayRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
299
+ //@ts-ignore
300
+ if (typeof gtag == 'function') {
301
+ //@ts-ignore
302
+ gtag('event', 'OpenRandomGame', {
303
+ 'context': 'CasinoPlayRandomGame'
304
+ });
305
+ }
306
+ }
307
+ ;
308
+ showGameInfo() {
309
+ window.postMessage({ type: 'InfoRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
310
+ //@ts-ignore
311
+ if (typeof gtag == 'function') {
312
+ //@ts-ignore
313
+ gtag('event', 'OpenRandomGameInfo', {
314
+ 'context': 'CasinoPlayRandomGame'
315
+ });
316
+ }
317
+ }
318
+ renderGameDetails() {
319
+ 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.launchByGameCard &&
320
+ h("button", { class: "RandomButton On", onClick: () => this.playGame() }, translate('playNowRandomGame'))));
321
+ }
322
+ render() {
323
+ if (this.hasErrors) {
324
+ return (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language))));
325
+ }
326
+ if (!this.isLoading) {
327
+ 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 ${this.animationStarted ? 'Flip' : ''}` }, "?"), h("div", { class: "HexagonMark" }, h("div", { class: "HexagonMarkBorder" }))), !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame')))));
328
+ }
329
+ }
330
+ get host() { return getElement(this); }
331
+ static get watchers() { return {
332
+ "endpoint": ["watchEndpoint"],
333
+ "datasource": ["watchEndpoint"],
334
+ "language": ["watchEndpoint"],
335
+ "translationUrl": ["handleNewTranslations"]
336
+ }; }
337
+ };
338
+ CasinoPlayRandomGame.style = casinoPlayRandomGameCss;
339
+
340
+ export { CasinoPlayRandomGame as casino_play_random_game };
@@ -0,0 +1,17 @@
1
+ import { p as promiseResolve, b as bootstrapLazy } from './index-58563736.js';
2
+
3
+ /*
4
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
5
+ */
6
+ const patchBrowser = () => {
7
+ const importMeta = import.meta.url;
8
+ const opts = {};
9
+ if (importMeta !== '') {
10
+ opts.resourcesUrl = new URL('.', importMeta).href;
11
+ }
12
+ return promiseResolve(opts);
13
+ };
14
+
15
+ patchBrowser().then(options => {
16
+ 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]}]]]], options);
17
+ });