@everymatrix/casino-play-random-game 1.44.0 → 1.45.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 (49) hide show
  1. package/dist/casino-play-random-game/casino-play-random-game.esm.js +1 -1
  2. package/dist/casino-play-random-game/p-b4a84056.entry.js +1 -0
  3. package/dist/casino-play-random-game/p-d2e799c3.js +2 -0
  4. package/dist/casino-play-random-game/p-e1255160.js +1 -0
  5. package/dist/cjs/app-globals-3a1e7e63.js +5 -0
  6. package/dist/cjs/casino-play-random-game.cjs.entry.js +288 -308
  7. package/dist/cjs/casino-play-random-game.cjs.js +17 -11
  8. package/dist/cjs/index-4cc20a8d.js +1217 -0
  9. package/dist/cjs/loader.cjs.js +7 -13
  10. package/dist/collection/collection-manifest.json +3 -3
  11. package/dist/collection/components/casino-play-random-game/casino-play-random-game.css +0 -11
  12. package/dist/collection/components/casino-play-random-game/casino-play-random-game.js +432 -463
  13. package/dist/collection/components/casino-play-random-game/index.js +1 -0
  14. package/dist/collection/utils/locale.utils.js +58 -58
  15. package/dist/collection/utils/utils.js +22 -22
  16. package/dist/esm/app-globals-0f993ce5.js +3 -0
  17. package/dist/esm/casino-play-random-game.entry.js +288 -308
  18. package/dist/esm/casino-play-random-game.js +14 -11
  19. package/dist/esm/index-7666b794.js +1190 -0
  20. package/dist/esm/loader.js +7 -13
  21. package/dist/stencil.config.dev.js +17 -0
  22. package/dist/stencil.config.js +14 -19
  23. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.d.ts +2 -0
  24. package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/casino-play-random-game/.stencil/packages/stencil/casino-play-random-game/stencil.config.dev.d.ts +2 -0
  25. package/dist/types/components/casino-play-random-game/casino-play-random-game.d.ts +72 -72
  26. package/dist/types/components/casino-play-random-game/index.d.ts +1 -0
  27. package/dist/types/stencil-public-runtime.d.ts +142 -33
  28. package/loader/cdn.js +1 -3
  29. package/loader/index.cjs.js +1 -3
  30. package/loader/index.d.ts +13 -1
  31. package/loader/index.es2017.js +1 -3
  32. package/loader/index.js +1 -3
  33. package/loader/package.json +1 -0
  34. package/package.json +8 -1
  35. package/dist/casino-play-random-game/p-0f38b3f8.js +0 -1
  36. package/dist/casino-play-random-game/p-1a049c0f.entry.js +0 -1
  37. package/dist/cjs/index-8944e204.js +0 -1247
  38. package/dist/components/casino-play-random-game.d.ts +0 -11
  39. package/dist/components/casino-play-random-game.js +0 -375
  40. package/dist/components/index.d.ts +0 -26
  41. package/dist/components/index.js +0 -1
  42. package/dist/esm/index-58563736.js +0 -1221
  43. package/dist/esm/polyfills/core-js.js +0 -11
  44. package/dist/esm/polyfills/css-shim.js +0 -1
  45. package/dist/esm/polyfills/dom.js +0 -79
  46. package/dist/esm/polyfills/es5-html-element.js +0 -1
  47. package/dist/esm/polyfills/index.js +0 -34
  48. package/dist/esm/polyfills/system.js +0 -6
  49. 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 +0 -2
@@ -1,11 +0,0 @@
1
- import type { Components, JSX } from "../types/components";
2
-
3
- interface CasinoPlayRandomGame extends Components.CasinoPlayRandomGame, HTMLElement {}
4
- export const CasinoPlayRandomGame: {
5
- prototype: CasinoPlayRandomGame;
6
- new (): CasinoPlayRandomGame;
7
- };
8
- /**
9
- * Used to define this component and all nested components recursively.
10
- */
11
- export const defineCustomElement: () => void;
@@ -1,375 +0,0 @@
1
- import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
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: 'Greška',
42
- randomGameLoading: 'Učitavanje ...',
43
- playRandomGame: 'Igraj nasumičnu igru',
44
- playNowRandomGame: 'Igraj sada',
45
- spinRandomGame: 'Zavrti'
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((lang) => {
68
- if (!TRANSLATIONS[lang]) {
69
- TRANSLATIONS[lang] = {};
70
- }
71
- for (let key in data[lang]) {
72
- TRANSLATIONS[lang][key] = data[lang][key];
73
- }
74
- });
75
- resolve(true);
76
- });
77
- });
78
- };
79
- const translate = (key, customLang) => {
80
- const lang = customLang;
81
- return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
82
- };
83
-
84
- const casinoPlayRandomGameCss = ":host {\n display: block;\n font-family: inherit;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n\n:host * {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n}\n\n.RandomGameWrapper {\n width: 100%;\n height: var(--emw--size-4x-medium, 700px);\n background: transparent;\n position: relative;\n overflow: hidden;\n}\n\n.GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.5) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.5) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(10px);\n}\n\n.GamesContainer {\n display: flex;\n height: var(--emw--size-4x-medium, 600px);\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n align-content: flex-start;\n gap: var(--emw--spacing-large, 20px);\n}\n\n.RandomGameCard {\n position: relative;\n width: var(--emw--size-3x-medium, 300px);\n height: var(--emw--size-4x-medium, 420px);\n border-radius: var(--emw--border-radius-large, 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: 20;\n}\n\n.ButtonContainer {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n position: relative;\n}\n\n.ButtonIcon {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n}\n\n.QustionMark {\n position: absolute;\n font-family: sans-serif;\n font-size: 120px;\n font-weight: 900;\n color: color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 10%);\n text-shadow: 0px 12px 0px color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 50%);\n left: 50%;\n top: -20%;\n transform: translateX(-50%);\n z-index: 10;\n}\n\n.HexagonMarkShadow {\n width: 100px;\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 70%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.HexagonMark {\n position: absolute;\n width: var(--emw--size-medium, 90px);\n height: 105px;\n background: linear-gradient(to bottom, color-mix(in srgb, var(--emw--casino-color-secondary, var(--emw--color-secondary, #eeac4a)), black 20%) 0%, var(--emw--categories-color-secondary, var(--emw--color-secondary, #eeac4a)) 100%);\n clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);\n}\n\n.RandomButtons {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: var(--emw--spacing-2x-small, 5px);\n width: 100%;\n position: relative;\n z-index: 10;\n}\n\n.RandomButton {\n font-size: var(--emw--font-size-large, 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\n .RandomGameWrapper {\n width: 100%;\n height: 300px;\n overflow: hidden;\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.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\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\n .RandomGameImage {\n width: 102px;\n height: inherit;\n top: 0%;\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: 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\n .RandomGameCard .RandomGameVendor {\n font-size: var(--emw--font-size-x-small, 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: var(--emw--font-size-x-small, 12px);\n padding: 10px 15px;\n border: solid 1px var(--emw--button-border-color, #063B17);\n }\n\n .QustionMark {\n font-size: 100px;\n font-weight: 700;\n }\n\n .HexagonMarkShadow {\n width: 80px;\n height: 95px;\n }\n\n .HexagonMark {\n width: 70px;\n height: 85px;\n }\n}";
85
-
86
- const CasinoPlayRandomGame$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
87
- constructor() {
88
- super();
89
- this.__registerHost();
90
- this.__attachShadow();
91
- /**
92
- * Language of the widget
93
- */
94
- this.language = 'en';
95
- /**
96
- * Configure a specific category for randomising the games.
97
- */
98
- this.specificCategory = '';
99
- /**
100
- * Icon visible initially
101
- */
102
- this.iconVisible = '';
103
- /**
104
- * Icon visible while rolling
105
- */
106
- this.iconVisibleOnAnim = '';
107
- /**
108
- * Open event on the game card.
109
- */
110
- this.launchByGameCard = '';
111
- /**
112
- * Client custom styling via string
113
- */
114
- this.clientStyling = '';
115
- /**
116
- * Client custom styling via url
117
- */
118
- this.clientStylingUrl = '';
119
- /**
120
- * Translations via URL
121
- */
122
- this.translationUrl = '';
123
- this.hasErrors = false;
124
- this.limitStylingAppends = false;
125
- this.isLoading = true;
126
- this.selectedGame = null;
127
- this.animationDone = false;
128
- this.animationStarted = false;
129
- this.animation = null;
130
- this.selectedGameIndex = null;
131
- this.selectedGameEl = null;
132
- this.iconVisibility = null;
133
- this.shuffle = (array) => {
134
- let currentIndex = array.length;
135
- let randomIndex;
136
- while (currentIndex !== 0) {
137
- randomIndex = Math.floor(Math.random() * currentIndex);
138
- currentIndex--;
139
- [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
140
- }
141
- return array;
142
- };
143
- this.setClientStyling = () => {
144
- let sheet = document.createElement('style');
145
- sheet.innerHTML = this.clientStyling;
146
- this.host.shadowRoot.prepend(sheet);
147
- };
148
- this.setClientStylingURL = () => {
149
- let url = new URL(this.clientStylingUrl);
150
- let cssFile = document.createElement('style');
151
- fetch(url.href)
152
- .then((res) => res.text())
153
- .then((data) => {
154
- cssFile.innerHTML = data;
155
- this.clientStyling = data;
156
- setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
157
- });
158
- };
159
- }
160
- watchEndpoint(newValue, oldValue) {
161
- if (newValue && newValue != oldValue && this.endpoint) {
162
- this.fetchGameList();
163
- }
164
- }
165
- handleNewTranslations() {
166
- this.isLoading = true;
167
- getTranslations(this.translationUrl).then(() => {
168
- this.isLoading = false;
169
- });
170
- }
171
- handleIsIconVisible() {
172
- this.iconVisibility = this.iconVisible === 'true' ? true : false;
173
- }
174
- connectedCallback() {
175
- this.handleIsIconVisible();
176
- }
177
- componentWillLoad() {
178
- if (this.translationUrl.length > 2) {
179
- getTranslations(this.translationUrl);
180
- }
181
- if (this.endpoint && this.language && this.datasource) {
182
- return this.fetchGameList();
183
- }
184
- }
185
- componentDidLoad() {
186
- if (!this.limitStylingAppends && this.host) {
187
- if (this.clientStyling)
188
- this.setClientStyling();
189
- if (this.clientStylingUrl)
190
- this.setClientStylingURL();
191
- this.limitStylingAppends = true;
192
- }
193
- }
194
- fetchGameList() {
195
- let url = new URL(`${this.endpoint}/v1/casino/games`);
196
- url.searchParams.append('platform', getDevice());
197
- url.searchParams.append('datasource', this.datasource);
198
- url.searchParams.append('fields', 'gId,id,href,thumbnail,name,vendor,launchUrl,subVendor');
199
- url.searchParams.append('expand', 'vendor');
200
- // Number of games chosen
201
- url.searchParams.append('pagination', 'offset=0,limit=423');
202
- url.searchParams.append('language', this.language);
203
- if (this.specificCategory) {
204
- url.searchParams.append('filter', `categories(id=${this.specificCategory})`);
205
- }
206
- return new Promise((resolve, reject) => {
207
- this.isLoading = true;
208
- fetch(url.href)
209
- .then((res) => res.json())
210
- .then((data) => {
211
- this.gamesToShow = this.setUpGames(data === null || data === void 0 ? void 0 : data.items);
212
- resolve(true);
213
- }).catch((err) => {
214
- console.error(err);
215
- this.hasErrors = true;
216
- reject(err);
217
- }).finally(() => {
218
- this.isLoading = false;
219
- });
220
- });
221
- }
222
- setUpGames(games) {
223
- // Only 40 games will be selected at a time; the random game will be selected from these.
224
- const shuffledGames = this.shuffle(games).slice(0, 40);
225
- // Clone the games
226
- return shuffledGames.concat(shuffledGames);
227
- }
228
- selectRandomGame() {
229
- const originalGamesLength = this.gamesToShow.length / 2;
230
- // Substract 3 to ensure there are always at least 5 cards after the selected one
231
- this.selectedGameIndex = Math.floor(Math.random() * (originalGamesLength - 3));
232
- // Offset by the length of the original to select from the cloned part
233
- this.selectedGameIndex += originalGamesLength;
234
- this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
235
- }
236
- playRandomGame() {
237
- this.animateGames();
238
- //@ts-ignore
239
- if (typeof gtag == 'function') {
240
- //@ts-ignore
241
- gtag('event', 'PlayRandomGame', {
242
- 'context': 'CasinoPlayRandomGame'
243
- });
244
- }
245
- }
246
- respin() {
247
- this.animateGames();
248
- //@ts-ignore
249
- if (typeof gtag == 'function') {
250
- //@ts-ignore
251
- gtag('event', 'RespinRandomGame', {
252
- 'context': 'CasinoPlayRandomGame'
253
- });
254
- }
255
- }
256
- animateGames() {
257
- this.iconVisibility = this.iconVisibleOnAnim === 'true' ? true : false;
258
- this.animationStarted = true;
259
- this.animationDone = false;
260
- if (this.animation)
261
- this.animation.cancel();
262
- if (this.selectedGameEl) {
263
- this.selectedGameEl.classList.remove('TheRandomGame');
264
- this.selectedGame = null;
265
- this.selectedGameIndex = null;
266
- }
267
- this.selectRandomGame();
268
- const gapStyle = window.getComputedStyle(this.gameContainer).getPropertyValue('gap');
269
- const gap = parseInt(gapStyle, 10);
270
- const cardWidth = this.selectedGameEl.offsetWidth;
271
- const gameContainerWidth = this.gameContainer.offsetWidth;
272
- const translation = ((cardWidth + gap) * this.selectedGameIndex) + // Width of game cards up to the selected
273
- (cardWidth / 2) - // Additional half card width to center to the selected game
274
- (gameContainerWidth / 2); // Minus half the container width to center the card
275
- const containerRolling = [
276
- { transform: `translateX(0px)`, scale: 1 },
277
- { scale: 0.75 },
278
- { transform: `translateX(-${translation}px)`, scale: 1 }
279
- ];
280
- const containerTiming = {
281
- duration: 3000,
282
- easing: 'cubic-bezier(0.5, 0, 0.5, 1.2)',
283
- fill: 'forwards'
284
- };
285
- this.animation = this.gameContainer.animate(containerRolling, containerTiming);
286
- this.animation.onfinish = () => {
287
- this.animationDone = true;
288
- this.selectedGameEl.classList.add('TheRandomGame');
289
- this.selectedGame = this.gamesToShow[this.selectedGameIndex];
290
- };
291
- }
292
- playGame() {
293
- if (!this.selectedGame)
294
- return;
295
- window.postMessage({ type: 'PlayRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
296
- //@ts-ignore
297
- if (typeof gtag == 'function') {
298
- //@ts-ignore
299
- gtag('event', 'OpenRandomGame', {
300
- 'context': 'CasinoPlayRandomGame'
301
- });
302
- }
303
- }
304
- ;
305
- showGameInfo() {
306
- window.postMessage({ type: 'InfoRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
307
- //@ts-ignore
308
- if (typeof gtag == 'function') {
309
- //@ts-ignore
310
- gtag('event', 'OpenRandomGameInfo', {
311
- 'context': 'CasinoPlayRandomGame'
312
- });
313
- }
314
- }
315
- renderGameDetails() {
316
- 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 &&
317
- h("button", { class: "RandomButton On", onClick: () => this.playGame() }, translate('playNowRandomGame', this.language))));
318
- }
319
- render() {
320
- if (this.hasErrors) {
321
- return (h("div", { class: "RandomGameError" }, h("div", { class: "Title" }, translate('error', this.language))));
322
- }
323
- if (this.isLoading) {
324
- return (h("div", { class: "RandomGameLoading" }, h("div", { class: "Title" }, translate('randomGameLoading', 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" }, "?"), h("div", { class: "HexagonMarkShadow" }), h("div", { class: "HexagonMark" })), !this.animationStarted && h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
328
- }
329
- }
330
- get host() { return this; }
331
- static get watchers() { return {
332
- "endpoint": ["watchEndpoint"],
333
- "datasource": ["watchEndpoint"],
334
- "language": ["watchEndpoint"],
335
- "translationUrl": ["handleNewTranslations"],
336
- "iconVisible": ["handleIsIconVisible"]
337
- }; }
338
- static get style() { return casinoPlayRandomGameCss; }
339
- }, [1, "casino-play-random-game", {
340
- "endpoint": [513],
341
- "datasource": [513],
342
- "language": [513],
343
- "specificCategory": [513, "specific-category"],
344
- "iconVisible": [513, "icon-visible"],
345
- "iconVisibleOnAnim": [513, "icon-visible-on-anim"],
346
- "launchByGameCard": [513, "launch-by-game-card"],
347
- "clientStyling": [513, "client-styling"],
348
- "clientStylingUrl": [513, "client-styling-url"],
349
- "translationUrl": [513, "translation-url"],
350
- "hasErrors": [32],
351
- "limitStylingAppends": [32],
352
- "isLoading": [32],
353
- "gamesToShow": [32],
354
- "selectedGame": [32],
355
- "animationDone": [32],
356
- "animationStarted": [32]
357
- }]);
358
- function defineCustomElement$1() {
359
- if (typeof customElements === "undefined") {
360
- return;
361
- }
362
- const components = ["casino-play-random-game"];
363
- components.forEach(tagName => { switch (tagName) {
364
- case "casino-play-random-game":
365
- if (!customElements.get(tagName)) {
366
- customElements.define(tagName, CasinoPlayRandomGame$1);
367
- }
368
- break;
369
- } });
370
- }
371
-
372
- const CasinoPlayRandomGame = CasinoPlayRandomGame$1;
373
- const defineCustomElement = defineCustomElement$1;
374
-
375
- export { CasinoPlayRandomGame, defineCustomElement };
@@ -1,26 +0,0 @@
1
- /* CasinoPlayRandomGame custom elements */
2
-
3
- import type { Components, JSX } from "../types/components";
4
-
5
- /**
6
- * Used to manually set the base path where assets can be found.
7
- * If the script is used as "module", it's recommended to use "import.meta.url",
8
- * such as "setAssetPath(import.meta.url)". Other options include
9
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
10
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
11
- * But do note that this configuration depends on how your script is bundled, or lack of
12
- * bundling, and where your assets can be loaded from. Additionally custom bundling
13
- * will have to ensure the static assets are copied to its build directory.
14
- */
15
- export declare const setAssetPath: (path: string) => void;
16
-
17
- export interface SetPlatformOptions {
18
- raf?: (c: FrameRequestCallback) => number;
19
- ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
20
- rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
21
- }
22
- export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
23
-
24
- export type { Components, JSX };
25
-
26
- export * from '../types';
@@ -1 +0,0 @@
1
- export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';