@everymatrix/casino-play-random-game 1.31.1 → 1.32.4

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 (48) hide show
  1. package/LICENSE +21 -0
  2. package/package.json +3 -2
  3. package/dist/casino-play-random-game/casino-play-random-game.esm.js +0 -1
  4. package/dist/casino-play-random-game/index.esm.js +0 -0
  5. package/dist/casino-play-random-game/p-0f38b3f8.js +0 -1
  6. package/dist/casino-play-random-game/p-51fa7686.entry.js +0 -1
  7. package/dist/cjs/casino-play-random-game.cjs.entry.js +0 -360
  8. package/dist/cjs/casino-play-random-game.cjs.js +0 -19
  9. package/dist/cjs/index-8944e204.js +0 -1247
  10. package/dist/cjs/index.cjs.js +0 -2
  11. package/dist/cjs/loader.cjs.js +0 -21
  12. package/dist/collection/collection-manifest.json +0 -12
  13. package/dist/collection/components/casino-play-random-game/casino-play-random-game.css +0 -347
  14. package/dist/collection/components/casino-play-random-game/casino-play-random-game.js +0 -473
  15. package/dist/collection/index.js +0 -1
  16. package/dist/collection/utils/locale.utils.js +0 -73
  17. package/dist/collection/utils/utils.js +0 -27
  18. package/dist/components/casino-play-random-game.d.ts +0 -11
  19. package/dist/components/casino-play-random-game.js +0 -392
  20. package/dist/components/index.d.ts +0 -26
  21. package/dist/components/index.js +0 -1
  22. package/dist/esm/casino-play-random-game.entry.js +0 -356
  23. package/dist/esm/casino-play-random-game.js +0 -17
  24. package/dist/esm/index-58563736.js +0 -1221
  25. package/dist/esm/index.js +0 -1
  26. package/dist/esm/loader.js +0 -17
  27. package/dist/esm/polyfills/core-js.js +0 -11
  28. package/dist/esm/polyfills/css-shim.js +0 -1
  29. package/dist/esm/polyfills/dom.js +0 -79
  30. package/dist/esm/polyfills/es5-html-element.js +0 -1
  31. package/dist/esm/polyfills/index.js +0 -34
  32. package/dist/esm/polyfills/system.js +0 -6
  33. package/dist/index.cjs.js +0 -1
  34. package/dist/index.js +0 -1
  35. package/dist/stencil.config.js +0 -22
  36. package/dist/types/Users/sebastian.strulea/Documents/work/widgets-stencil/packages/casino-play-random-game/.stencil/packages/casino-play-random-game/stencil.config.d.ts +0 -2
  37. package/dist/types/components/casino-play-random-game/casino-play-random-game.d.ts +0 -73
  38. package/dist/types/components.d.ts +0 -117
  39. package/dist/types/index.d.ts +0 -1
  40. package/dist/types/stencil-public-runtime.d.ts +0 -1565
  41. package/dist/types/utils/locale.utils.d.ts +0 -6
  42. package/dist/types/utils/utils.d.ts +0 -2
  43. package/loader/cdn.js +0 -3
  44. package/loader/index.cjs.js +0 -3
  45. package/loader/index.d.ts +0 -12
  46. package/loader/index.es2017.js +0 -3
  47. package/loader/index.js +0 -4
  48. package/loader/package.json +0 -10
@@ -1,356 +0,0 @@
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: 'Error',
42
- randomGameLoading: 'Loading ...',
43
- playRandomGame: 'Play a random game',
44
- playNowRandomGame: 'Play now',
45
- spinRandomGame: 'Spin'
46
- },
47
- fr: {
48
- error: 'Error',
49
- randomGameLoading: 'Loading ...',
50
- playRandomGame: 'Play a random game',
51
- playNowRandomGame: 'Play now',
52
- spinRandomGame: 'Spin'
53
- },
54
- hr: {
55
- error: 'Error',
56
- randomGameLoading: 'Loading ...',
57
- playRandomGame: 'Play a random game',
58
- playNowRandomGame: 'Play now',
59
- spinRandomGame: 'Spin'
60
- },
61
- hu: {
62
- error: 'Error',
63
- randomGameLoading: 'Loading ...',
64
- playRandomGame: 'Play a random game',
65
- playNowRandomGame: 'Play now',
66
- spinRandomGame: 'Spin'
67
- },
68
- tr: {
69
- error: "Hata",
70
- randomGameLoading: "Yükleniyor...",
71
- playRandomGame: "Rasgele bir oyun oyna",
72
- playNowRandomGame: "Şimdi Oyna",
73
- spinRandomGame: "DEĞİŞTİR"
74
- }
75
- };
76
- const getTranslations = (url) => {
77
- return new Promise((resolve) => {
78
- fetch(url)
79
- .then((res) => res.json())
80
- .then((data) => {
81
- Object.keys(data).forEach((item) => {
82
- if (!(item in TRANSLATIONS)) {
83
- TRANSLATIONS[item] = {};
84
- }
85
- for (let key in data[item]) {
86
- TRANSLATIONS[item][key] = data[item][key];
87
- }
88
- });
89
- resolve(true);
90
- });
91
- });
92
- };
93
- const translate = (key, customLang, values) => {
94
- const lang = customLang;
95
- let translation = TRANSLATIONS[lang !== undefined ? lang : DEFAULT_LANGUAGE][key];
96
- if (values !== undefined) {
97
- for (const [key, value] of Object.entries(values.values)) {
98
- const regex = new RegExp(`{${key}}`, 'g');
99
- translation = translation.replace(regex, value);
100
- }
101
- }
102
- return translation;
103
- };
104
-
105
- 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}";
106
-
107
- const CasinoPlayRandomGame = class {
108
- constructor(hostRef) {
109
- registerInstance(this, hostRef);
110
- /**
111
- * Language of the widget
112
- */
113
- this.language = 'en';
114
- /**
115
- * Configure a specific category for randomising the games.
116
- */
117
- this.specificCategory = '';
118
- /**
119
- * Icon visible initially
120
- */
121
- this.iconVisible = '';
122
- /**
123
- * Icon visible while rolling
124
- */
125
- this.iconVisibleOnAnim = '';
126
- /**
127
- * Open event on the game card.
128
- */
129
- this.launchByGameCard = '';
130
- /**
131
- * Client custom styling via string
132
- */
133
- this.clientStyling = '';
134
- /**
135
- * Client custom styling via url
136
- */
137
- this.clientStylingUrl = '';
138
- /**
139
- * Translations via URL
140
- */
141
- this.translationUrl = '';
142
- this.hasErrors = false;
143
- this.limitStylingAppends = false;
144
- this.isLoading = true;
145
- this.selectedGame = null;
146
- this.animationDone = false;
147
- this.animationStarted = false;
148
- this.animation = null;
149
- this.selectedGameIndex = null;
150
- this.selectedGameEl = null;
151
- this.iconVisibility = null;
152
- this.shuffle = (array) => {
153
- let currentIndex = array.length;
154
- let randomIndex;
155
- while (currentIndex !== 0) {
156
- randomIndex = Math.floor(Math.random() * currentIndex);
157
- currentIndex--;
158
- [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
159
- }
160
- return array;
161
- };
162
- this.setClientStyling = () => {
163
- let sheet = document.createElement('style');
164
- sheet.innerHTML = this.clientStyling;
165
- this.host.shadowRoot.prepend(sheet);
166
- };
167
- this.setClientStylingURL = () => {
168
- let url = new URL(this.clientStylingUrl);
169
- let cssFile = document.createElement('style');
170
- fetch(url.href)
171
- .then((res) => res.text())
172
- .then((data) => {
173
- cssFile.innerHTML = data;
174
- this.clientStyling = data;
175
- setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
176
- });
177
- };
178
- }
179
- watchEndpoint(newValue, oldValue) {
180
- if (newValue && newValue != oldValue && this.endpoint) {
181
- this.fetchGameList();
182
- }
183
- }
184
- handleNewTranslations() {
185
- this.isLoading = true;
186
- getTranslations(this.translationUrl).then(() => {
187
- this.isLoading = false;
188
- });
189
- }
190
- connectedCallback() {
191
- this.iconVisibility = this.iconVisible === 'true' ? true : false;
192
- }
193
- componentWillLoad() {
194
- if (this.translationUrl.length > 2) {
195
- getTranslations(this.translationUrl);
196
- }
197
- if (this.endpoint && this.language && this.datasource) {
198
- return this.fetchGameList();
199
- }
200
- }
201
- componentDidLoad() {
202
- if (!this.limitStylingAppends && this.host) {
203
- if (this.clientStyling)
204
- this.setClientStyling();
205
- if (this.clientStylingUrl)
206
- this.setClientStylingURL();
207
- this.limitStylingAppends = true;
208
- }
209
- }
210
- fetchGameList() {
211
- let url = new URL(`${this.endpoint}/v1/casino/games`);
212
- url.searchParams.append('device', getDevicePlatform());
213
- url.searchParams.append('datasource', this.datasource);
214
- url.searchParams.append('fields', 'gId,id,href,thumbnail,name,vendor,launchUrl,subVendor');
215
- url.searchParams.append('expand', 'vendor');
216
- // Number of games chosen
217
- url.searchParams.append('pagination', 'offset=0,limit=423');
218
- url.searchParams.append('language', this.language);
219
- if (this.specificCategory) {
220
- url.searchParams.append('filter', `categories(id=${this.specificCategory})`);
221
- }
222
- return new Promise((resolve, reject) => {
223
- this.isLoading = true;
224
- fetch(url.href)
225
- .then((res) => res.json())
226
- .then((data) => {
227
- this.gamesToShow = this.setUpGames(data === null || data === void 0 ? void 0 : data.items);
228
- resolve(true);
229
- }).catch((err) => {
230
- console.error(err);
231
- this.hasErrors = true;
232
- reject(err);
233
- }).finally(() => {
234
- this.isLoading = false;
235
- });
236
- });
237
- }
238
- setUpGames(games) {
239
- // Only 40 games will be selected at a time; the random game will be selected from these.
240
- const shuffledGames = this.shuffle(games).slice(0, 40);
241
- // Clone the games
242
- return shuffledGames.concat(shuffledGames);
243
- }
244
- selectRandomGame() {
245
- const originalGamesLength = this.gamesToShow.length / 2;
246
- // Substract 3 to ensure there are always at least 5 cards after the selected one
247
- this.selectedGameIndex = Math.floor(Math.random() * (originalGamesLength - 3));
248
- // Offset by the length of the original to select from the cloned part
249
- this.selectedGameIndex += originalGamesLength;
250
- this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
251
- }
252
- playRandomGame() {
253
- this.animateGames();
254
- //@ts-ignore
255
- if (typeof gtag == 'function') {
256
- //@ts-ignore
257
- gtag('event', 'PlayRandomGame', {
258
- 'context': 'CasinoPlayRandomGame'
259
- });
260
- }
261
- }
262
- respin() {
263
- this.animateGames();
264
- //@ts-ignore
265
- if (typeof gtag == 'function') {
266
- //@ts-ignore
267
- gtag('event', 'RespinRandomGame', {
268
- 'context': 'CasinoPlayRandomGame'
269
- });
270
- }
271
- }
272
- animateGames() {
273
- this.iconVisibility = this.iconVisibleOnAnim === 'true' ? true : false;
274
- this.animationStarted = true;
275
- this.animationDone = false;
276
- if (this.animation)
277
- this.animation.cancel();
278
- if (this.selectedGameEl) {
279
- this.selectedGameEl.classList.remove('TheRandomGame');
280
- this.selectedGame = null;
281
- this.selectedGameIndex = null;
282
- }
283
- this.selectRandomGame();
284
- const gapStyle = window.getComputedStyle(this.gameContainer).getPropertyValue('gap');
285
- const gap = parseInt(gapStyle, 10);
286
- const cardWidth = this.selectedGameEl.offsetWidth;
287
- const gameContainerWidth = this.gameContainer.offsetWidth;
288
- const translation = ((cardWidth + gap) * this.selectedGameIndex) + // Width of game cards up to the selected
289
- (cardWidth / 2) - // Additional half card width to center to the selected game
290
- (gameContainerWidth / 2); // Minus half the container width to center the card
291
- const containerRolling = [
292
- { transform: `translateX(0px)`, scale: 1 },
293
- { scale: 0.75 },
294
- { transform: `translateX(-${translation}px)`, scale: 1 }
295
- ];
296
- const containerTiming = {
297
- duration: 3000,
298
- easing: 'cubic-bezier(0.5, 0, 0.5, 1.2)',
299
- fill: 'forwards'
300
- };
301
- this.animation = this.gameContainer.animate(containerRolling, containerTiming);
302
- this.animation.onfinish = () => {
303
- this.animationDone = true;
304
- this.selectedGameEl.classList.add('TheRandomGame');
305
- this.selectedGame = this.gamesToShow[this.selectedGameIndex];
306
- };
307
- }
308
- playGame() {
309
- if (!this.selectedGame)
310
- return;
311
- window.postMessage({ type: 'PlayRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
312
- //@ts-ignore
313
- if (typeof gtag == 'function') {
314
- //@ts-ignore
315
- gtag('event', 'OpenRandomGame', {
316
- 'context': 'CasinoPlayRandomGame'
317
- });
318
- }
319
- }
320
- ;
321
- showGameInfo() {
322
- window.postMessage({ type: 'InfoRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
323
- //@ts-ignore
324
- if (typeof gtag == 'function') {
325
- //@ts-ignore
326
- gtag('event', 'OpenRandomGameInfo', {
327
- 'context': 'CasinoPlayRandomGame'
328
- });
329
- }
330
- }
331
- renderGameDetails() {
332
- 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 &&
333
- h("button", { class: "RandomButton On", onClick: () => this.playGame() }, translate('playNowRandomGame', this.language))));
334
- }
335
- render() {
336
- if (this.hasErrors) {
337
- return (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language))));
338
- }
339
- if (this.isLoading) {
340
- return (h("div", { class: "RandomGameLoading" }, h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
341
- }
342
- if (!this.isLoading) {
343
- 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', this.language)))));
344
- }
345
- }
346
- get host() { return getElement(this); }
347
- static get watchers() { return {
348
- "endpoint": ["watchEndpoint"],
349
- "datasource": ["watchEndpoint"],
350
- "language": ["watchEndpoint"],
351
- "translationUrl": ["handleNewTranslations"]
352
- }; }
353
- };
354
- CasinoPlayRandomGame.style = casinoPlayRandomGameCss;
355
-
356
- export { CasinoPlayRandomGame as casino_play_random_game };
@@ -1,17 +0,0 @@
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
- });