@everymatrix/casino-play-random-game 1.32.4 → 1.33.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 (48) 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-51fa7686.entry.js +1 -0
  5. package/dist/cjs/casino-play-random-game.cjs.entry.js +360 -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 +473 -0
  13. package/dist/collection/index.js +1 -0
  14. package/dist/collection/utils/locale.utils.js +73 -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 +392 -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 +356 -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 +2 -3
  48. package/LICENSE +0 -21
@@ -0,0 +1,356 @@
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 };
@@ -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
+ });