@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
@@ -2,342 +2,322 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-8944e204.js');
5
+ const index = require('./index-4cc20a8d.js');
6
6
 
7
7
  const getDevice = () => {
8
- let userAgent = window.navigator.userAgent;
9
- if (userAgent.toLowerCase().match(/android/i)) {
10
- return 'Android';
11
- }
12
- if (userAgent.toLowerCase().match(/iphone/i)) {
13
- return 'iPhone';
14
- }
15
- if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
16
- return 'iPad';
17
- }
18
- return 'PC';
8
+ let userAgent = window.navigator.userAgent;
9
+ if (userAgent.toLowerCase().match(/android/i)) {
10
+ return 'Android';
11
+ }
12
+ if (userAgent.toLowerCase().match(/iphone/i)) {
13
+ return 'iPhone';
14
+ }
15
+ if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
16
+ return 'iPad';
17
+ }
18
+ return 'PC';
19
19
  };
20
20
 
21
21
  const DEFAULT_LANGUAGE = 'en';
22
22
  const TRANSLATIONS = {
23
- en: {
24
- error: 'Error',
25
- randomGameLoading: 'Loading ...',
26
- playRandomGame: 'Play a random game',
27
- playNowRandomGame: 'Play now',
28
- spinRandomGame: 'Spin'
29
- },
30
- ro: {
31
- error: 'Error',
32
- randomGameLoading: 'Loading ...',
33
- playRandomGame: 'Play a random game',
34
- playNowRandomGame: 'Play now',
35
- spinRandomGame: 'Spin'
36
- },
37
- fr: {
38
- error: 'Error',
39
- randomGameLoading: 'Loading ...',
40
- playRandomGame: 'Play a random game',
41
- playNowRandomGame: 'Play now',
42
- spinRandomGame: 'Spin'
43
- },
44
- hr: {
45
- error: 'Greška',
46
- randomGameLoading: 'Učitavanje ...',
47
- playRandomGame: 'Igraj nasumičnu igru',
48
- playNowRandomGame: 'Igraj sada',
49
- spinRandomGame: 'Zavrti'
50
- },
51
- hu: {
52
- error: 'Error',
53
- randomGameLoading: 'Loading ...',
54
- playRandomGame: 'Play a random game',
55
- playNowRandomGame: 'Play now',
56
- spinRandomGame: 'Spin'
57
- },
58
- tr: {
59
- error: "Hata",
60
- randomGameLoading: "Yükleniyor...",
61
- playRandomGame: "Rasgele bir oyun oyna",
62
- playNowRandomGame: "Şimdi Oyna",
63
- spinRandomGame: "DEĞİŞTİR"
64
- }
23
+ en: {
24
+ error: 'Error',
25
+ randomGameLoading: 'Loading ...',
26
+ playRandomGame: 'Play a random game',
27
+ playNowRandomGame: 'Play now',
28
+ spinRandomGame: 'Spin'
29
+ },
30
+ ro: {
31
+ error: 'Error',
32
+ randomGameLoading: 'Loading ...',
33
+ playRandomGame: 'Play a random game',
34
+ playNowRandomGame: 'Play now',
35
+ spinRandomGame: 'Spin'
36
+ },
37
+ fr: {
38
+ error: 'Error',
39
+ randomGameLoading: 'Loading ...',
40
+ playRandomGame: 'Play a random game',
41
+ playNowRandomGame: 'Play now',
42
+ spinRandomGame: 'Spin'
43
+ },
44
+ hr: {
45
+ error: 'Greška',
46
+ randomGameLoading: 'Učitavanje ...',
47
+ playRandomGame: 'Igraj nasumičnu igru',
48
+ playNowRandomGame: 'Igraj sada',
49
+ spinRandomGame: 'Zavrti'
50
+ },
51
+ hu: {
52
+ error: 'Error',
53
+ randomGameLoading: 'Loading ...',
54
+ playRandomGame: 'Play a random game',
55
+ playNowRandomGame: 'Play now',
56
+ spinRandomGame: 'Spin'
57
+ },
58
+ tr: {
59
+ error: "Hata",
60
+ randomGameLoading: "Yükleniyor...",
61
+ playRandomGame: "Rasgele bir oyun oyna",
62
+ playNowRandomGame: "Şimdi Oyna",
63
+ spinRandomGame: "DEĞİŞTİR"
64
+ }
65
65
  };
66
66
  const getTranslations = (url) => {
67
- return new Promise((resolve) => {
68
- fetch(url)
69
- .then((res) => res.json())
70
- .then((data) => {
71
- Object.keys(data).forEach((lang) => {
72
- if (!TRANSLATIONS[lang]) {
73
- TRANSLATIONS[lang] = {};
74
- }
75
- for (let key in data[lang]) {
76
- TRANSLATIONS[lang][key] = data[lang][key];
77
- }
78
- });
79
- resolve(true);
67
+ return new Promise((resolve) => {
68
+ fetch(url)
69
+ .then((res) => res.json())
70
+ .then((data) => {
71
+ Object.keys(data).forEach((lang) => {
72
+ if (!TRANSLATIONS[lang]) {
73
+ TRANSLATIONS[lang] = {};
74
+ }
75
+ for (let key in data[lang]) {
76
+ TRANSLATIONS[lang][key] = data[lang][key];
77
+ }
78
+ });
79
+ resolve(true);
80
+ });
80
81
  });
81
- });
82
82
  };
83
83
  const translate = (key, customLang) => {
84
- const lang = customLang;
85
- return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
84
+ const lang = customLang;
85
+ return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
86
86
  };
87
87
 
88
- 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}";
88
+ 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 .RandomGameWrapper {\n width: 100%;\n height: 300px;\n overflow: hidden;\n background: transparent;\n position: relative;\n }\n .GameContainerGradient {\n position: absolute;\n top: 10%;\n left: -5px;\n width: 100vw;\n height: 80%;\n background: linear-gradient(90deg, var(--emw--color-background, rgba(0, 0, 0, 0.9)) 0%, rgba(14, 21, 17, 0.2) 25%, rgba(14, 21, 17, 0) 50%, rgba(14, 21, 16, 0.2) 75%, var(--emw--color-background, rgba(10, 0, 0, 0.9)) 100%);\n pointer-events: none;\n z-index: 1;\n filter: blur(5px);\n }\n .RandomGameCard {\n width: 100px;\n height: 150px;\n top: 0%;\n border-radius: var(--emw--border-radius-medium, 4px);\n filter: blur(5px);\n }\n .RandomGameImage {\n width: 102px;\n height: inherit;\n top: 0%;\n }\n .RandomGameDetails {\n font-size: 14px;\n width: 100%;\n }\n .RandomGameDetails .RandomGameTitle {\n line-height: 18px;\n width: 75%;\n }\n .RandomGameDetails .RandomGameInfo {\n border-radius: 50%;\n width: 16px;\n height: 16px;\n font-size: var(--emw--font-size-x-small, 12px);\n line-height: 14px;\n }\n .RandomGameDetails .RandomGamePlay {\n background: var(--emw--color-primary, #52d004);\n color: var(--emw--color-typography, #FFFFFF);\n border: none;\n border-radius: 5px;\n width: 200px;\n height: 40px;\n font-size: 14px;\n cursor: pointer;\n }\n .RandomGameCard .RandomGameVendor {\n font-size: var(--emw--font-size-x-small, 12px);\n bottom: 5px;\n right: 5px;\n }\n .RandomButtons {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n .RandomButton {\n font-size: var(--emw--font-size-x-small, 12px);\n padding: 10px 15px;\n border: solid 1px var(--emw--button-border-color, #063B17);\n }\n .QustionMark {\n font-size: 100px;\n font-weight: 700;\n }\n .HexagonMarkShadow {\n width: 80px;\n height: 95px;\n }\n .HexagonMark {\n width: 70px;\n height: 85px;\n }\n}";
89
+ const CasinoPlayRandomGameStyle0 = casinoPlayRandomGameCss;
89
90
 
90
91
  const CasinoPlayRandomGame = class {
91
- constructor(hostRef) {
92
- index.registerInstance(this, hostRef);
93
- /**
94
- * Language of the widget
95
- */
96
- this.language = 'en';
97
- /**
98
- * Configure a specific category for randomising the games.
99
- */
100
- this.specificCategory = '';
101
- /**
102
- * Icon visible initially
103
- */
104
- this.iconVisible = '';
105
- /**
106
- * Icon visible while rolling
107
- */
108
- this.iconVisibleOnAnim = '';
109
- /**
110
- * Open event on the game card.
111
- */
112
- this.launchByGameCard = '';
113
- /**
114
- * Client custom styling via string
115
- */
116
- this.clientStyling = '';
117
- /**
118
- * Client custom styling via url
119
- */
120
- this.clientStylingUrl = '';
121
- /**
122
- * Translations via URL
123
- */
124
- this.translationUrl = '';
125
- this.hasErrors = false;
126
- this.limitStylingAppends = false;
127
- this.isLoading = true;
128
- this.selectedGame = null;
129
- this.animationDone = false;
130
- this.animationStarted = false;
131
- this.animation = null;
132
- this.selectedGameIndex = null;
133
- this.selectedGameEl = null;
134
- this.iconVisibility = null;
135
- this.shuffle = (array) => {
136
- let currentIndex = array.length;
137
- let randomIndex;
138
- while (currentIndex !== 0) {
139
- randomIndex = Math.floor(Math.random() * currentIndex);
140
- currentIndex--;
141
- [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
142
- }
143
- return array;
144
- };
145
- this.setClientStyling = () => {
146
- let sheet = document.createElement('style');
147
- sheet.innerHTML = this.clientStyling;
148
- this.host.shadowRoot.prepend(sheet);
149
- };
150
- this.setClientStylingURL = () => {
151
- let url = new URL(this.clientStylingUrl);
152
- let cssFile = document.createElement('style');
153
- fetch(url.href)
154
- .then((res) => res.text())
155
- .then((data) => {
156
- cssFile.innerHTML = data;
157
- this.clientStyling = data;
158
- setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
159
- });
160
- };
161
- }
162
- watchEndpoint(newValue, oldValue) {
163
- if (newValue && newValue != oldValue && this.endpoint) {
164
- this.fetchGameList();
92
+ constructor(hostRef) {
93
+ index.registerInstance(this, hostRef);
94
+ this.animation = null;
95
+ this.selectedGameIndex = null;
96
+ this.selectedGameEl = null;
97
+ this.iconVisibility = null;
98
+ this.shuffle = (array) => {
99
+ let currentIndex = array.length;
100
+ let randomIndex;
101
+ while (currentIndex !== 0) {
102
+ randomIndex = Math.floor(Math.random() * currentIndex);
103
+ currentIndex--;
104
+ [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
105
+ }
106
+ return array;
107
+ };
108
+ this.setClientStyling = () => {
109
+ let sheet = document.createElement('style');
110
+ sheet.innerHTML = this.clientStyling;
111
+ this.host.shadowRoot.prepend(sheet);
112
+ };
113
+ this.setClientStylingURL = () => {
114
+ let url = new URL(this.clientStylingUrl);
115
+ let cssFile = document.createElement('style');
116
+ fetch(url.href)
117
+ .then((res) => res.text())
118
+ .then((data) => {
119
+ cssFile.innerHTML = data;
120
+ this.clientStyling = data;
121
+ setTimeout(() => { this.host.shadowRoot.prepend(cssFile); }, 1);
122
+ });
123
+ };
124
+ this.endpoint = undefined;
125
+ this.datasource = undefined;
126
+ this.language = 'en';
127
+ this.specificCategory = '';
128
+ this.iconVisible = '';
129
+ this.iconVisibleOnAnim = '';
130
+ this.launchByGameCard = '';
131
+ this.clientStyling = '';
132
+ this.clientStylingUrl = '';
133
+ this.translationUrl = '';
134
+ this.hasErrors = false;
135
+ this.limitStylingAppends = false;
136
+ this.isLoading = true;
137
+ this.gamesToShow = undefined;
138
+ this.selectedGame = null;
139
+ this.animationDone = false;
140
+ this.animationStarted = false;
165
141
  }
166
- }
167
- handleNewTranslations() {
168
- this.isLoading = true;
169
- getTranslations(this.translationUrl).then(() => {
170
- this.isLoading = false;
171
- });
172
- }
173
- handleIsIconVisible() {
174
- this.iconVisibility = this.iconVisible === 'true' ? true : false;
175
- }
176
- connectedCallback() {
177
- this.handleIsIconVisible();
178
- }
179
- componentWillLoad() {
180
- if (this.translationUrl.length > 2) {
181
- getTranslations(this.translationUrl);
142
+ watchEndpoint(newValue, oldValue) {
143
+ if (newValue && newValue != oldValue && this.endpoint) {
144
+ this.fetchGameList();
145
+ }
182
146
  }
183
- if (this.endpoint && this.language && this.datasource) {
184
- return this.fetchGameList();
147
+ handleNewTranslations() {
148
+ this.isLoading = true;
149
+ getTranslations(this.translationUrl).then(() => {
150
+ this.isLoading = false;
151
+ });
185
152
  }
186
- }
187
- componentDidLoad() {
188
- if (!this.limitStylingAppends && this.host) {
189
- if (this.clientStyling)
190
- this.setClientStyling();
191
- if (this.clientStylingUrl)
192
- this.setClientStylingURL();
193
- this.limitStylingAppends = true;
153
+ handleIsIconVisible() {
154
+ this.iconVisibility = this.iconVisible === 'true' ? true : false;
194
155
  }
195
- }
196
- fetchGameList() {
197
- let url = new URL(`${this.endpoint}/v1/casino/games`);
198
- url.searchParams.append('platform', getDevice());
199
- url.searchParams.append('datasource', this.datasource);
200
- url.searchParams.append('fields', 'gId,id,href,thumbnail,name,vendor,launchUrl,subVendor');
201
- url.searchParams.append('expand', 'vendor');
202
- // Number of games chosen
203
- url.searchParams.append('pagination', 'offset=0,limit=423');
204
- url.searchParams.append('language', this.language);
205
- if (this.specificCategory) {
206
- url.searchParams.append('filter', `categories(id=${this.specificCategory})`);
156
+ connectedCallback() {
157
+ this.handleIsIconVisible();
207
158
  }
208
- return new Promise((resolve, reject) => {
209
- this.isLoading = true;
210
- fetch(url.href)
211
- .then((res) => res.json())
212
- .then((data) => {
213
- this.gamesToShow = this.setUpGames(data === null || data === void 0 ? void 0 : data.items);
214
- resolve(true);
215
- }).catch((err) => {
216
- console.error(err);
217
- this.hasErrors = true;
218
- reject(err);
219
- }).finally(() => {
220
- this.isLoading = false;
221
- });
222
- });
223
- }
224
- setUpGames(games) {
225
- // Only 40 games will be selected at a time; the random game will be selected from these.
226
- const shuffledGames = this.shuffle(games).slice(0, 40);
227
- // Clone the games
228
- return shuffledGames.concat(shuffledGames);
229
- }
230
- selectRandomGame() {
231
- const originalGamesLength = this.gamesToShow.length / 2;
232
- // Substract 3 to ensure there are always at least 5 cards after the selected one
233
- this.selectedGameIndex = Math.floor(Math.random() * (originalGamesLength - 3));
234
- // Offset by the length of the original to select from the cloned part
235
- this.selectedGameIndex += originalGamesLength;
236
- this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
237
- }
238
- playRandomGame() {
239
- this.animateGames();
240
- //@ts-ignore
241
- if (typeof gtag == 'function') {
242
- //@ts-ignore
243
- gtag('event', 'PlayRandomGame', {
244
- 'context': 'CasinoPlayRandomGame'
245
- });
159
+ componentWillLoad() {
160
+ if (this.translationUrl.length > 2) {
161
+ getTranslations(this.translationUrl);
162
+ }
163
+ if (this.endpoint && this.language && this.datasource) {
164
+ return this.fetchGameList();
165
+ }
246
166
  }
247
- }
248
- respin() {
249
- this.animateGames();
250
- //@ts-ignore
251
- if (typeof gtag == 'function') {
252
- //@ts-ignore
253
- gtag('event', 'RespinRandomGame', {
254
- 'context': 'CasinoPlayRandomGame'
255
- });
167
+ componentDidLoad() {
168
+ if (!this.limitStylingAppends && this.host) {
169
+ if (this.clientStyling)
170
+ this.setClientStyling();
171
+ if (this.clientStylingUrl)
172
+ this.setClientStylingURL();
173
+ this.limitStylingAppends = true;
174
+ }
256
175
  }
257
- }
258
- animateGames() {
259
- this.iconVisibility = this.iconVisibleOnAnim === 'true' ? true : false;
260
- this.animationStarted = true;
261
- this.animationDone = false;
262
- if (this.animation)
263
- this.animation.cancel();
264
- if (this.selectedGameEl) {
265
- this.selectedGameEl.classList.remove('TheRandomGame');
266
- this.selectedGame = null;
267
- this.selectedGameIndex = null;
176
+ fetchGameList() {
177
+ let url = new URL(`${this.endpoint}/v1/casino/games`);
178
+ url.searchParams.append('platform', getDevice());
179
+ url.searchParams.append('datasource', this.datasource);
180
+ url.searchParams.append('fields', 'gId,id,href,thumbnail,name,vendor,launchUrl,subVendor');
181
+ url.searchParams.append('expand', 'vendor');
182
+ // Number of games chosen
183
+ url.searchParams.append('pagination', 'offset=0,limit=423');
184
+ url.searchParams.append('language', this.language);
185
+ if (this.specificCategory) {
186
+ url.searchParams.append('filter', `categories(id=${this.specificCategory})`);
187
+ }
188
+ return new Promise((resolve, reject) => {
189
+ this.isLoading = true;
190
+ fetch(url.href)
191
+ .then((res) => res.json())
192
+ .then((data) => {
193
+ this.gamesToShow = this.setUpGames(data === null || data === void 0 ? void 0 : data.items);
194
+ resolve(true);
195
+ }).catch((err) => {
196
+ console.error(err);
197
+ this.hasErrors = true;
198
+ reject(err);
199
+ }).finally(() => {
200
+ this.isLoading = false;
201
+ });
202
+ });
268
203
  }
269
- this.selectRandomGame();
270
- const gapStyle = window.getComputedStyle(this.gameContainer).getPropertyValue('gap');
271
- const gap = parseInt(gapStyle, 10);
272
- const cardWidth = this.selectedGameEl.offsetWidth;
273
- const gameContainerWidth = this.gameContainer.offsetWidth;
274
- const translation = ((cardWidth + gap) * this.selectedGameIndex) + // Width of game cards up to the selected
275
- (cardWidth / 2) - // Additional half card width to center to the selected game
276
- (gameContainerWidth / 2); // Minus half the container width to center the card
277
- const containerRolling = [
278
- { transform: `translateX(0px)`, scale: 1 },
279
- { scale: 0.75 },
280
- { transform: `translateX(-${translation}px)`, scale: 1 }
281
- ];
282
- const containerTiming = {
283
- duration: 3000,
284
- easing: 'cubic-bezier(0.5, 0, 0.5, 1.2)',
285
- fill: 'forwards'
286
- };
287
- this.animation = this.gameContainer.animate(containerRolling, containerTiming);
288
- this.animation.onfinish = () => {
289
- this.animationDone = true;
290
- this.selectedGameEl.classList.add('TheRandomGame');
291
- this.selectedGame = this.gamesToShow[this.selectedGameIndex];
292
- };
293
- }
294
- playGame() {
295
- if (!this.selectedGame)
296
- return;
297
- window.postMessage({ type: 'PlayRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
298
- //@ts-ignore
299
- if (typeof gtag == 'function') {
300
- //@ts-ignore
301
- gtag('event', 'OpenRandomGame', {
302
- 'context': 'CasinoPlayRandomGame'
303
- });
204
+ setUpGames(games) {
205
+ // Only 40 games will be selected at a time; the random game will be selected from these.
206
+ const shuffledGames = this.shuffle(games).slice(0, 40);
207
+ // Clone the games
208
+ return shuffledGames.concat(shuffledGames);
304
209
  }
305
- }
306
- ;
307
- showGameInfo() {
308
- window.postMessage({ type: 'InfoRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
309
- //@ts-ignore
310
- if (typeof gtag == 'function') {
311
- //@ts-ignore
312
- gtag('event', 'OpenRandomGameInfo', {
313
- 'context': 'CasinoPlayRandomGame'
314
- });
210
+ selectRandomGame() {
211
+ const originalGamesLength = this.gamesToShow.length / 2;
212
+ // Substract 3 to ensure there are always at least 5 cards after the selected one
213
+ this.selectedGameIndex = Math.floor(Math.random() * (originalGamesLength - 3));
214
+ // Offset by the length of the original to select from the cloned part
215
+ this.selectedGameIndex += originalGamesLength;
216
+ this.selectedGameEl = this.gameContainer.children[this.selectedGameIndex];
315
217
  }
316
- }
317
- renderGameDetails() {
318
- return index.h("div", { class: "RandomButtonsWrapper" }, index.h("div", { class: "RandomGameDetails" }, index.h("span", { class: "RandomGameTitle" }, this.selectedGame.name), index.h("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), index.h("div", { class: "RandomButtons" }, index.h("button", { class: "RandomButton On", onClick: () => this.respin() }, translate('spinRandomGame', this.language)), !this.launchByGameCard &&
319
- index.h("button", { class: "RandomButton On", onClick: () => this.playGame() }, translate('playNowRandomGame', this.language))));
320
- }
321
- render() {
322
- if (this.hasErrors) {
323
- return (index.h("div", { class: "RandomGameError" }, index.h("div", { class: "Title" }, translate('error', this.language))));
218
+ playRandomGame() {
219
+ this.animateGames();
220
+ //@ts-ignore
221
+ if (typeof gtag == 'function') {
222
+ //@ts-ignore
223
+ gtag('event', 'PlayRandomGame', {
224
+ 'context': 'CasinoPlayRandomGame'
225
+ });
226
+ }
227
+ }
228
+ respin() {
229
+ this.animateGames();
230
+ //@ts-ignore
231
+ if (typeof gtag == 'function') {
232
+ //@ts-ignore
233
+ gtag('event', 'RespinRandomGame', {
234
+ 'context': 'CasinoPlayRandomGame'
235
+ });
236
+ }
237
+ }
238
+ animateGames() {
239
+ this.iconVisibility = this.iconVisibleOnAnim === 'true' ? true : false;
240
+ this.animationStarted = true;
241
+ this.animationDone = false;
242
+ if (this.animation)
243
+ this.animation.cancel();
244
+ if (this.selectedGameEl) {
245
+ this.selectedGameEl.classList.remove('TheRandomGame');
246
+ this.selectedGame = null;
247
+ this.selectedGameIndex = null;
248
+ }
249
+ this.selectRandomGame();
250
+ const gapStyle = window.getComputedStyle(this.gameContainer).getPropertyValue('gap');
251
+ const gap = parseInt(gapStyle, 10);
252
+ const cardWidth = this.selectedGameEl.offsetWidth;
253
+ const gameContainerWidth = this.gameContainer.offsetWidth;
254
+ const translation = ((cardWidth + gap) * this.selectedGameIndex) + // Width of game cards up to the selected
255
+ (cardWidth / 2) - // Additional half card width to center to the selected game
256
+ (gameContainerWidth / 2); // Minus half the container width to center the card
257
+ const containerRolling = [
258
+ { transform: `translateX(0px)`, scale: 1 },
259
+ { scale: 0.75 },
260
+ { transform: `translateX(-${translation}px)`, scale: 1 }
261
+ ];
262
+ const containerTiming = {
263
+ duration: 3000,
264
+ easing: 'cubic-bezier(0.5, 0, 0.5, 1.2)',
265
+ fill: 'forwards'
266
+ };
267
+ this.animation = this.gameContainer.animate(containerRolling, containerTiming);
268
+ this.animation.onfinish = () => {
269
+ this.animationDone = true;
270
+ this.selectedGameEl.classList.add('TheRandomGame');
271
+ this.selectedGame = this.gamesToShow[this.selectedGameIndex];
272
+ };
273
+ }
274
+ playGame() {
275
+ if (!this.selectedGame)
276
+ return;
277
+ window.postMessage({ type: 'PlayRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
278
+ //@ts-ignore
279
+ if (typeof gtag == 'function') {
280
+ //@ts-ignore
281
+ gtag('event', 'OpenRandomGame', {
282
+ 'context': 'CasinoPlayRandomGame'
283
+ });
284
+ }
285
+ }
286
+ ;
287
+ showGameInfo() {
288
+ window.postMessage({ type: 'InfoRandomGame', gameId: this.selectedGame.id, launchUrl: this.selectedGame.launchUrl, gameName: this.selectedGame.name, subVendor: this.selectedGame.subVendor }, window.location.href);
289
+ //@ts-ignore
290
+ if (typeof gtag == 'function') {
291
+ //@ts-ignore
292
+ gtag('event', 'OpenRandomGameInfo', {
293
+ 'context': 'CasinoPlayRandomGame'
294
+ });
295
+ }
324
296
  }
325
- if (this.isLoading) {
326
- return (index.h("div", { class: "RandomGameLoading" }, index.h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
297
+ renderGameDetails() {
298
+ return index.h("div", { class: "RandomButtonsWrapper" }, index.h("div", { class: "RandomGameDetails" }, index.h("span", { class: "RandomGameTitle" }, this.selectedGame.name), index.h("span", { class: "RandomGameInfo", onClick: () => this.showGameInfo() }, "i")), index.h("div", { class: "RandomButtons" }, index.h("button", { class: "RandomButton On", onClick: () => this.respin() }, translate('spinRandomGame', this.language)), !this.launchByGameCard &&
299
+ index.h("button", { class: "RandomButton On", onClick: () => this.playGame() }, translate('playNowRandomGame', this.language))));
327
300
  }
328
- if (!this.isLoading) {
329
- return index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: 'GameContainerGradient' }), index.h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index$1) => (index.h("div", { class: 'RandomGameCard', key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: "QustionMark" }, "?"), index.h("div", { class: "HexagonMarkShadow" }), index.h("div", { class: "HexagonMark" })), !this.animationStarted && index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
301
+ render() {
302
+ if (this.hasErrors) {
303
+ return (index.h("div", { class: "RandomGameError" }, index.h("div", { class: "Title" }, translate('error', this.language))));
304
+ }
305
+ if (this.isLoading) {
306
+ return (index.h("div", { class: "RandomGameLoading" }, index.h("div", { class: "Title" }, translate('randomGameLoading', this.language))));
307
+ }
308
+ if (!this.isLoading) {
309
+ return index.h("div", { class: "RandomGameWrapper" }, index.h("div", { class: 'GameContainerGradient' }), index.h("div", { class: 'GamesContainer', ref: (el) => this.gameContainer = el }, this.gamesToShow && this.gamesToShow.map((game, index$1) => (index.h("div", { class: 'RandomGameCard', key: index$1, onClick: this.launchByGameCard === 'true' ? () => this.playGame() : null }, index.h("div", { class: "RandomGameVendor" }, game.vendor.name), index.h("img", { class: 'RandomGameImage', src: game.thumbnail, alt: game.name, title: game.name }), this.selectedGame && this.selectedGameIndex === index$1 && this.renderGameDetails())))), index.h("div", { class: `ButtonWrapper ${this.animationDone ? 'HideAnimation' : ''}` }, index.h("div", { class: "ButtonContainer" }, this.iconVisibility && index.h("div", { class: `ButtonIcon ${this.animationStarted ? 'Flip' : ''}` }, index.h("div", { class: "QustionMark" }, "?"), index.h("div", { class: "HexagonMarkShadow" }), index.h("div", { class: "HexagonMark" })), !this.animationStarted && index.h("div", { class: `RandomButton ${this.animationStarted ? 'HideAnimation' : ''}`, onClick: () => this.playRandomGame() }, translate('playRandomGame', this.language)))));
310
+ }
330
311
  }
331
- }
332
- get host() { return index.getElement(this); }
333
- static get watchers() { return {
334
- "endpoint": ["watchEndpoint"],
335
- "datasource": ["watchEndpoint"],
336
- "language": ["watchEndpoint"],
337
- "translationUrl": ["handleNewTranslations"],
338
- "iconVisible": ["handleIsIconVisible"]
339
- }; }
312
+ get host() { return index.getElement(this); }
313
+ static get watchers() { return {
314
+ "endpoint": ["watchEndpoint"],
315
+ "datasource": ["watchEndpoint"],
316
+ "language": ["watchEndpoint"],
317
+ "translationUrl": ["handleNewTranslations"],
318
+ "iconVisible": ["handleIsIconVisible"]
319
+ }; }
340
320
  };
341
- CasinoPlayRandomGame.style = casinoPlayRandomGameCss;
321
+ CasinoPlayRandomGame.style = CasinoPlayRandomGameStyle0;
342
322
 
343
323
  exports.casino_play_random_game = CasinoPlayRandomGame;