@everymatrix/casino-challenges-list 1.77.21 → 1.77.23
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.
- package/dist/casino-challenges-list/casino-challenge-card_3.entry.js +1 -1
- package/dist/casino-challenges-list/casino-challenges-list-7f47d912.js +1 -0
- package/dist/casino-challenges-list/index.esm.js +1 -1
- package/dist/cjs/casino-challenge-card_3.cjs.entry.js +13 -11
- package/dist/cjs/casino-challenges-list-6195a490.js +185 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/collection/assets/empty-state.svg +9 -0
- package/dist/collection/components/casino-challenges-list/casino-challenges-list.css +23 -1
- package/dist/collection/components/casino-challenges-list/casino-challenges-list.js +6 -1
- package/dist/collection/utils/locale.utils.js +37 -0
- package/dist/esm/casino-challenge-card_3.entry.js +14 -12
- package/dist/esm/casino-challenges-list-7f47d912.js +180 -0
- package/dist/esm/index.js +1 -1
- package/dist/types/components/casino-challenges-list/casino-challenges-list.d.ts +1 -0
- package/dist/types/utils/locale.utils.d.ts +3 -0
- package/package.json +1 -1
- package/dist/casino-challenges-list/casino-challenges-list-d0d9a1e1.js +0 -1
- package/dist/cjs/casino-challenges-list-b4bc1590.js +0 -164
- package/dist/esm/casino-challenges-list-d0d9a1e1.js +0 -159
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const DEFAULT_LANGUAGE = 'en';
|
|
2
|
+
const TRANSLATIONS = {
|
|
3
|
+
en: {
|
|
4
|
+
emptyTitle: 'Nothing here — yet!',
|
|
5
|
+
emptyDescription: 'No challenges at the moment. Try exploring events or keep playing to unlock new ones.'
|
|
6
|
+
},
|
|
7
|
+
ro: {},
|
|
8
|
+
fr: {},
|
|
9
|
+
ar: {},
|
|
10
|
+
hr: {}
|
|
11
|
+
};
|
|
12
|
+
export const translate = (key, customLang) => {
|
|
13
|
+
const lang = customLang;
|
|
14
|
+
return TRANSLATIONS[lang !== undefined && lang in TRANSLATIONS ? lang : DEFAULT_LANGUAGE][key];
|
|
15
|
+
};
|
|
16
|
+
export const getTranslations = (data) => {
|
|
17
|
+
Object.keys(data).forEach((item) => {
|
|
18
|
+
for (let key in data[item]) {
|
|
19
|
+
TRANSLATIONS[item][key] = data[item][key];
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
export const resolveTranslationUrl = async (translationUrl) => {
|
|
24
|
+
if (translationUrl) {
|
|
25
|
+
try {
|
|
26
|
+
const response = await fetch(translationUrl);
|
|
27
|
+
if (!response.ok) {
|
|
28
|
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
29
|
+
}
|
|
30
|
+
const translations = await response.json();
|
|
31
|
+
getTranslations(translations);
|
|
32
|
+
}
|
|
33
|
+
catch (error) {
|
|
34
|
+
console.error('Failed to fetch or parse translations from URL:', error);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host } from './index-d84ca385.js';
|
|
2
|
-
import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-list-
|
|
3
|
-
export { C as casino_challenges_list } from './casino-challenges-list-
|
|
2
|
+
import { s as setClientStyling, a as setClientStylingURL, b as setStreamStyling } from './casino-challenges-list-7f47d912.js';
|
|
3
|
+
export { C as casino_challenges_list } from './casino-challenges-list-7f47d912.js';
|
|
4
4
|
|
|
5
5
|
const DEFAULT_LANGUAGE = 'en';
|
|
6
6
|
const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
|
|
@@ -211,7 +211,7 @@ const finishSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTY
|
|
|
211
211
|
|
|
212
212
|
const trophySvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNjI4NzQgMTAuMTI1VjExLjI2MzNDOC42Mjg3NCAxMS4yNjMzIDguMTQ0MTcgMTEuNzYzMiA1Ljk5OTkyIDExLjc2MzJDMy44NTU2NiAxMS43NjMyIDMuMzcxMDkgMTEuMjYzMyAzLjM3MTA5IDExLjI2MzNWMTAuMTI1SDguNjI4NzRaIiBmaWxsPSIjRTZBNDVFIi8+CjxwYXRoIGQ9Ik04LjYyODggMTAuMTI1VjExLjI2MzNDOC42Mjg4IDExLjI2MzMgOC4xNDQyMyAxMS43NjMyIDUuOTk5OTggMTEuNzYzMkM1LjI4MzMxIDExLjc2MzIgNC43NTIwNSAxMS43MDczIDQuMzYyMyAxMS42MzNDNi4zMTYxMiAxMS43NTk0IDguNjI4OCAxMC4xMjUgOC42Mjg4IDEwLjEyNVoiIGZpbGw9IiNEODkyNEUiLz4KPHBhdGggZD0iTTQuODg2OSA5LjU3NDcxQzMuOTkxNDEgOS42NzE1MyAzLjM3MTA5IDkuODgxNTYgMy4zNzEwOSAxMC4xMjUxQzMuMzcxMDkgMTAuNDYwNSA0LjU0ODA2IDEwLjczMjQgNS45OTk5MiAxMC43MzI0QzcuNDUxNzggMTAuNzMyNCA4LjYyODc0IDEwLjQ2MDUgOC42Mjg3NCAxMC4xMjUxQzguNjI4NzQgOS44ODE1OCA4LjAwODU0IDkuNjcxNTcgNy4xMTMyIDkuNTc0NzRMNC44ODY5IDkuNTc0NzFaIiBmaWxsPSIjRkZFRENDIi8+CjxwYXRoIGQ9Ik01LjQzMTA2IDcuMTE0MjZWOC4yNzk0NkM1LjQzMTA2IDkuMDMyNzYgNC45NjYzMyA5LjcwNzk2IDQuMjYyNyA5Ljk3Njk1QzQuMjYyNyA5Ljk3Njk1IDQuNjQ1NjcgMTAuMjgxOSA2LjAwMDIzIDEwLjI4MTlDNy4zNTQ3OSAxMC4yODE5IDcuNzM3NzYgOS45NzY5NSA3LjczNzc2IDkuOTc2OTVDNy4wMzQxMyA5LjcwNzk2IDYuNTY5MzkgOS4wMzI3NiA2LjU2OTM5IDguMjc5NDZWNy4xMTQyNkg1LjQzMTA2WiIgZmlsbD0iI0Y3RDE3RiIvPgo8cGF0aCBkPSJNMi45MTQwNiAwLjc4MzY5MUMyLjkxNDA2IDQuMzEyNjcgMy42MDEyIDcuMzQ4NzMgNS45OTk5NCA3LjM0ODczQzguMzk4NjcgNy4zNDg3MyA5LjA4NTgxIDQuMzEyNjcgOS4wODU4MSAwLjc4MzY5MUgyLjkxNDA2WiIgZmlsbD0iI0VBQjE2NiIvPgo8cGF0aCBkPSJNMi45NDQzNiAyLjAwMjc3SDEuMTU3MDlDMS4wNTkwNiAyLjAwMjc3IDAuOTg2NjMyIDIuMDkxNjcgMS4wMDcwNyAyLjE4NzU1QzEuMTQwODMgMi44MTUyIDEuNzEwNjUgNC44NTM2NCAzLjU0MDk3IDUuMzQ1NTlMMy44NTU3OCA2LjAxNTMzQzEuMjEwODYgNS4zNjYyOSAwLjUzMjQyNiAzLjEyNTYxIDAuMzU4NDA2IDIuMDIyMDVDMC4zMDY3NjEgMS42OTQ1NCAwLjU1Mzc2MyAxLjM5Nzk1IDAuODg1MzIxIDEuMzk3OTVIMi45MjE1MkwyLjk0NDM2IDIuMDAyNzdaIiBmaWxsPSIjRjdEMTdGIi8+CjxwYXRoIGQ9Ik05LjA1NTk0IDIuMDAyNzdIMTAuODQzMkMxMC45NDEyIDIuMDAyNzcgMTEuMDEzNyAyLjA5MTY3IDEwLjk5MzIgMi4xODc1NUMxMC44NTk1IDIuODE1MiAxMC4yODk3IDQuODUzNjQgOC40NTkzNCA1LjM0NTU5TDguMTQ0NTMgNi4wMTUzM0MxMC43ODk0IDUuMzY2MjkgMTEuNDY3OSAzLjEyNTYxIDExLjY0MTkgMi4wMjIwNUMxMS42OTM1IDEuNjk0NTQgMTEuNDQ2NSAxLjM5Nzk1IDExLjExNSAxLjM5Nzk1SDkuMDc4NzlMOS4wNTU5NCAyLjAwMjc3WiIgZmlsbD0iI0Y3RDE3RiIvPgo8cGF0aCBkPSJNNS45OTk5NCAxLjMyNjE3QzcuNzA0MjIgMS4zMjYxNyA5LjA4NTgxIDEuMDgyMzEgOS4wODU4MSAwLjc4MTQ5NUM5LjA4NTgxIDAuNDgwNjc3IDcuNzA0MjIgMC4yMzY4MTYgNS45OTk5NCAwLjIzNjgxNkM0LjI5NTY1IDAuMjM2ODE2IDIuOTE0MDYgMC40ODA2NzcgMi45MTQwNiAwLjc4MTQ5NUMyLjkxNDA2IDEuMDgyMzEgNC4yOTU2NSAxLjMyNjE3IDUuOTk5OTQgMS4zMjYxN1oiIGZpbGw9IiNFNkE0NUUiLz4KPHBhdGggZD0iTTguODIzNjYgMC43ODM2OTFDNy44OTgxOSA3LjAxNjg0IDQuNjE1NzcgNi41NzYxNyA0LjE5MDkyIDYuNDk4NThDNC42NDE1IDcuMDM2OCA1LjIzMzAxIDcuMzQ4NzIgNi4wMDA0MyA3LjM0ODcyQzguMzk5MTYgNy4zNDg3MiA5LjA4NjMgNC4zMTI2NyA5LjA4NjMgMC43ODM2OTFIOC44MjM2NloiIGZpbGw9IiNFNkE0NUUiLz4KPHBhdGggZD0iTTQuNjQyNCAwLjI5MzQ1N0MzLjYyMDA4IDAuMzgyMDYzIDIuOTE0MDYgMC41NjY3NDQgMi45MTQwNiAwLjc4MTM2NUMyLjkxNDA2IDEuMDAxOTQgMy42NTg3OSAxLjE5MTIxIDQuNzI3MTcgMS4yNzY3NUM0LjY3NTggMC45NTA3ODEgNC42NDY1MSAwLjYyMjIxOSA0LjY0MjQgMC4yOTM0NTdaIiBmaWxsPSIjRDg5MjRFIi8+CjxwYXRoIGQ9Ik02LjIyNTQ4IDIuNjAzNjlMNi4zOTQ5IDMuMTI1MTFDNi40MjY2MiAzLjIyMjc1IDYuNTE3NjEgMy4yODg4NiA2LjYyMDI3IDMuMjg4ODZINy4xNjg1M0M3LjM5ODA5IDMuMjg4ODYgNy40OTM1NCAzLjU4MjYxIDcuMzA3ODIgMy43MTc1NUw2Ljg2NDI3IDQuMDM5ODFDNi43ODEyMSA0LjEwMDE1IDYuNzQ2NDYgNC4yMDcxMSA2Ljc3ODE4IDQuMzA0NzVMNi45NDc2MSA0LjgyNjE4QzcuMDE4NTQgNS4wNDQ1IDYuNzY4NjYgNS4yMjYwNiA2LjU4Mjk0IDUuMDkxMTJMNi4xMzkzOSA0Ljc2ODg2QzYuMDU2MzMgNC43MDg1MiA1Ljk0Mzg3IDQuNzA4NTIgNS44NjA4MSA0Ljc2ODg2TDUuNDE3MjYgNS4wOTExMkM1LjIzMTU0IDUuMjI2MDYgNC45ODE2NSA1LjA0NDUgNS4wNTI1OSA0LjgyNjE4TDUuMjIyMDEgNC4zMDQ3NUM1LjI1Mzc0IDQuMjA3MTEgNS4yMTg5OCA0LjEwMDE1IDUuMTM1OTMgNC4wMzk4MUw0LjY5MjM4IDMuNzE3NTVDNC41MDY2NiAzLjU4MjYxIDQuNjAyMSAzLjI4ODg2IDQuODMxNjcgMy4yODg4Nkg1LjM3OTkzQzUuNDgyNTkgMy4yODg4NiA1LjU3MzU4IDMuMjIyNzUgNS42MDUzIDMuMTI1MTFMNS43NzQ3MiAyLjYwMzY5QzUuODQ1NjYgMi4zODUzNiA2LjE1NDU0IDIuMzg1MzYgNi4yMjU0OCAyLjYwMzY5WiIgZmlsbD0iI0Q4OTI0RSIvPgo8cGF0aCBkPSJNNi4yMjU0OCAyLjUwOTk0TDYuMzk0OSAzLjAzMTM2QzYuNDI2NjIgMy4xMjkgNi41MTc2MSAzLjE5NTExIDYuNjIwMjcgMy4xOTUxMUg3LjE2ODUzQzcuMzk4MDkgMy4xOTUxMSA3LjQ5MzU0IDMuNDg4ODYgNy4zMDc4MiAzLjYyMzhMNi44NjQyNyAzLjk0NjA2QzYuNzgxMjEgNC4wMDY0IDYuNzQ2NDYgNC4xMTMzNiA2Ljc3ODE4IDQuMjExTDYuOTQ3NjEgNC43MzI0M0M3LjAxODU0IDQuOTUwNzUgNi43Njg2NiA1LjEzMjMxIDYuNTgyOTQgNC45OTczN0w2LjEzOTM5IDQuNjc1MTFDNi4wNTYzMyA0LjYxNDc3IDUuOTQzODcgNC42MTQ3NyA1Ljg2MDgxIDQuNjc1MTFMNS40MTcyNiA0Ljk5NzM3QzUuMjMxNTQgNS4xMzIzMSA0Ljk4MTY1IDQuOTUwNzUgNS4wNTI1OSA0LjczMjQzTDUuMjIyMDEgNC4yMTFDNS4yNTM3NCA0LjExMzM2IDUuMjE4OTggNC4wMDY0IDUuMTM1OTMgMy45NDYwNkw0LjY5MjM4IDMuNjIzOEM0LjUwNjY2IDMuNDg4ODYgNC42MDIxIDMuMTk1MTEgNC44MzE2NyAzLjE5NTExSDUuMzc5OTNDNS40ODI1OSAzLjE5NTExIDUuNTczNTggMy4xMjkgNS42MDUzIDMuMDMxMzZMNS43NzQ3MiAyLjUwOTk0QzUuODQ1NjYgMi4yOTE2MSA2LjE1NDU0IDIuMjkxNjEgNi4yMjU0OCAyLjUwOTk0WiIgZmlsbD0iI0ZGRURDQyIvPgo8L3N2Zz4K';
|
|
213
213
|
|
|
214
|
-
const casinoChallengeCardCss = ".card {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenges-container (max-width:
|
|
214
|
+
const casinoChallengeCardCss = ".card {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenges-container (max-width: 670px) {\n .card {\n width: 100%;\n }\n}\n.card:hover {\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n cursor: pointer;\n}\n.card__image {\n width: 100%;\n height: 200px;\n border-radius: 16px 16px 0 0;\n object-fit: cover;\n}\n@container challenges-container (max-width: 576px) {\n .card__image {\n height: 224px;\n }\n}\n.card__image.grayed {\n opacity: 0.6;\n}\n.card__title {\n color: var(--emw--color-white, #FFFFFF);\n font-size: var(--emw--font-size-medium, 16px);\n margin: 0 0 10px;\n}\n.card__content {\n padding: 20px;\n}\n.card__button {\n margin-top: 20px;\n width: 100%;\n height: 34px;\n background: transparent;\n text-transform: uppercase;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-secondary, #e9931e);\n}\n.card__button:hover {\n border-color: var(--emw--color-secondary, #e9931e);\n cursor: pointer;\n}\n.card__button.filled {\n background-color: var(--emw--button-background-primary-color, #18CE51);\n color: var(--emw--color-white, #FFFFFF);\n border-color: var(--emw--color-gray-300, #083B17);\n}\n.card__button.filled:hover {\n color: var(--emw--color-gray-300, #083B17);\n border-color: transparent;\n box-shadow: 0 0 4px 0 rgba(188, 252, 177, 0.2), 0 0 20px 0 rgba(0, 183, 79, 0.5);\n}\n.card__button.grayed {\n color: var(--emw--color-gray-50, #E2E2E2);\n}\n.card__button.grayed:hover {\n color: var(--emw--color-white, #FFFFFF);\n border-color: var(--emw--button-primary-border, #24B24E);\n}\n.card__button:hover {\n border-color: var(--emw--color-secondary, #e9931e);\n cursor: pointer;\n}\n.card__button:disabled, .card__button:disabled:hover {\n color: var(--emw--color-gray-50, #E2E2E2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-border-color, #727672);\n opacity: 0.7;\n}\n.card__badge {\n position: absolute;\n background: var(--emw--color-white, #FFFFFF);\n top: 6px;\n right: 6px;\n border-radius: 30px;\n padding: 2px 12px;\n line-height: 22px;\n font-weight: var(--emw--font-weight-medium, 500);\n font-size: var(--emw--font-size-x-small, 12px);\n box-shadow: 0 4px 4px 0 var(--emw--button-box-shadow-color, rgba(0, 0, 0, 0.25));\n backdrop-filter: blur(20px);\n box-sizing: border-box;\n}\n.card__badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.card__badge.expired {\n background: var(--emw--background-gray-color, rgba(250, 250, 250, 0.5019607843));\n border: 1px solid var(--emw--border-gray-color, #292C29);\n font-weight: 700;\n}\n.card__badge.completed {\n background: var(--emw--background-success-color, #C9F0D7);\n border: 1px solid var(--emw--border-success-color, #00B74F);\n color: var(--emw--color-gray-300, #083B17);\n font-weight: 700;\n}\n.card__badge.forfeited {\n background: var(--emw--background-errored-color, #FFE1DF);\n border: 1px solid var(--emw--border-errored-color, #D6421E);\n color: var(--emw--errored-color, #850606);\n font-weight: 700;\n}\n.card__badge.paused {\n background: var(--emw--background-warning-color, #F8E4AD);\n border: 1px solid var(--emw--border-warning-color, #EA9018);\n color: var(--emw--warning-color, #6D460A);\n font-weight: 700;\n}\n\n.info-item {\n line-height: 24px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-primary, #1dbf51);\n}\n@container challenges-container (min-width: 576px) {\n .info-item {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: bottom;\n }\n}\n.info-item.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.info-item__label {\n font-weight: var(--emw--font-weight-medium, 500);\n margin-right: 3px;\n color: var(--emw--color-gray-150, #C8D6CE);\n}\n.info-item__tooltip {\n position: absolute;\n line-height: 22px;\n padding: 8px 12px;\n border-radius: 8px;\n opacity: 1;\n z-index: 200;\n white-space: nowrap;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-white, #FFFFFF);\n background-color: var(--emw--color-background-secondary, #1B1C2B);\n}\n.info-item__tooltip::before {\n content: \"\";\n position: absolute;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid var(--emw--color-background-secondary, #1B1C2B);\n width: 0;\n height: 0;\n z-index: 201;\n}\n\n.progress {\n background-color: var(--emw--progress-background, rgba(188, 252, 177, 0.1019607843));\n border-radius: 100px;\n height: 20px;\n margin-bottom: 10px;\n position: relative;\n align-content: center;\n padding: 0 2px;\n box-sizing: border-box;\n}\n.progress.paused {\n opacity: 0.5;\n}\n.progress.grayed {\n mix-blend-mode: luminosity;\n}\n.progress__placeholder {\n height: 20px;\n}\n.progress__icon {\n padding-top: 4px;\n}\n.progress__point {\n position: absolute;\n text-align: center;\n font-size: 12px;\n color: var(--emw--color-gray-150, #C8D6CE);\n font-weight: 700;\n line-height: 19px;\n top: 0;\n height: 19px;\n width: 19px;\n border-radius: 50%;\n}\n.progress__point.start {\n left: 0;\n border: 2px solid var(--emw--button-background-primary-color, #18CE51);\n background: linear-gradient(90deg, var(--emw--progress-active-level, #24AA4D) 0%, var(--emw--progress-active-level-secondary, #113F21) 100%);\n}\n.progress__point.end {\n right: 0;\n border: 2px solid var(--emw--dark-green, #1C8D56);\n background: var(--emw--color-gray-300, #083B17);\n opacity: 0.7;\n}\n.progress__point.finished {\n opacity: 1;\n}\n.progress__point.hidden {\n opacity: 0;\n}\n.progress__bar {\n border-radius: 73px;\n height: 16px;\n background: linear-gradient(90deg, var(--emw--secondary-green, #1E654F) 0%, var(--emw--dark-green, #1C8D56) 100%);\n text-align: end;\n color: var(--emw--color-gray-50, #E2E2E2);\n font-size: 11px;\n font-weight: 700;\n line-height: 16px;\n padding-right: 6px;\n box-sizing: border-box;\n}\n.progress__bar.finished {\n text-align: center;\n}";
|
|
215
215
|
const CasinoChallengeCardStyle0 = casinoChallengeCardCss;
|
|
216
216
|
|
|
217
217
|
const CasinoChallengeCard = class {
|
|
@@ -287,24 +287,26 @@ const CasinoChallengeCard = class {
|
|
|
287
287
|
this.actionLoading = false;
|
|
288
288
|
}
|
|
289
289
|
get infoItems() {
|
|
290
|
-
var _a, _b, _c, _d, _e;
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
290
|
+
var _a, _b, _c, _d, _e, _f;
|
|
291
|
+
let level = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.OrderNumber === 0);
|
|
292
|
+
if (this.isUserAuthorized) {
|
|
293
|
+
level =
|
|
294
|
+
(_c = (_b = this.challenge) === null || _b === void 0 ? void 0 : _b.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressStatus.InProgress)) !== null && _c !== void 0 ? _c : level;
|
|
295
|
+
}
|
|
294
296
|
if (level) {
|
|
295
|
-
const rewardValue = (
|
|
297
|
+
const rewardValue = (_d = level.Rewards) === null || _d === void 0 ? void 0 : _d.slice(0, 2).map((r) => r.RewardDescription).join(' + ');
|
|
296
298
|
return [
|
|
297
299
|
{
|
|
298
300
|
lable: translate('totalLevels', this.language),
|
|
299
|
-
value: (
|
|
301
|
+
value: ((_e = this.challenge.LevelProgresses) === null || _e === void 0 ? void 0 : _e.length) || '-'
|
|
300
302
|
},
|
|
301
303
|
{
|
|
302
304
|
lable: translate('level1', this.language),
|
|
303
|
-
value: this.calculateTargetValue(level, (
|
|
305
|
+
value: this.calculateTargetValue(level, (_f = this.challenge) === null || _f === void 0 ? void 0 : _f.CurrencySymbol) || '-'
|
|
304
306
|
},
|
|
305
307
|
{
|
|
306
308
|
lable: translate('get', this.language),
|
|
307
|
-
value: rewardValue
|
|
309
|
+
value: rewardValue || '-'
|
|
308
310
|
}
|
|
309
311
|
];
|
|
310
312
|
}
|
|
@@ -439,7 +441,7 @@ const CasinoChallengeCard = class {
|
|
|
439
441
|
}
|
|
440
442
|
render() {
|
|
441
443
|
var _a, _b, _c, _d;
|
|
442
|
-
return (h("div", { key: '
|
|
444
|
+
return (h("div", { key: 'd06d95b4c40b32d6da14ef42439040332d820bd8', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'a0d56b13bdb886bbb35a59120990cea5e5be88fe', class: "card" }, h("img", { key: 'f76caf28ce213a79b2572321bd7999be231b30d5', class: `card__image ${this.isChallengeGrayed}`, src: (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.BannerUrl }), this.getCardBadge, h("div", { key: '71a2967e587a2a78bf79745faeeab7cd3fb74b0e', class: "card__content" }, h("h1", { key: '4357aaeedab6b4181f72ebaddd530f4151e655c4', class: "card__title" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.PresentationName), this.getChallengeProgress, this.infoItems.map((x, index) => this.renderInfoItem(x, index)), this.getCardButton))));
|
|
443
445
|
}
|
|
444
446
|
static get watchers() { return {
|
|
445
447
|
"clientStyling": ["handleClientStylingChange"],
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-d84ca385.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @name setClientStyling
|
|
5
|
+
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
6
|
+
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
7
|
+
* @param {string} clientStyling The style content
|
|
8
|
+
*/
|
|
9
|
+
function setClientStyling(stylingContainer, clientStyling) {
|
|
10
|
+
if (stylingContainer) {
|
|
11
|
+
const sheet = document.createElement('style');
|
|
12
|
+
sheet.innerHTML = clientStyling;
|
|
13
|
+
stylingContainer.appendChild(sheet);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* @name setClientStylingURL
|
|
19
|
+
* @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
|
|
20
|
+
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
21
|
+
* @param {string} clientStylingUrl The URL of the style content
|
|
22
|
+
*/
|
|
23
|
+
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
24
|
+
const url = new URL(clientStylingUrl);
|
|
25
|
+
|
|
26
|
+
fetch(url.href)
|
|
27
|
+
.then((res) => res.text())
|
|
28
|
+
.then((data) => {
|
|
29
|
+
const cssFile = document.createElement('style');
|
|
30
|
+
cssFile.innerHTML = data;
|
|
31
|
+
if (stylingContainer) {
|
|
32
|
+
stylingContainer.appendChild(cssFile);
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
.catch((err) => {
|
|
36
|
+
console.error('There was an error while trying to load client styling from URL', err);
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* @name setStreamLibrary
|
|
42
|
+
* @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
|
|
43
|
+
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
44
|
+
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
45
|
+
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
46
|
+
*/
|
|
47
|
+
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
48
|
+
if (window.emMessageBus) {
|
|
49
|
+
const sheet = document.createElement('style');
|
|
50
|
+
|
|
51
|
+
window.emMessageBus.subscribe(domain, (data) => {
|
|
52
|
+
sheet.innerHTML = data;
|
|
53
|
+
if (stylingContainer) {
|
|
54
|
+
stylingContainer.appendChild(sheet);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const emptyStateSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxyZWN0IHdpZHRoPSIzOCIgaGVpZ2h0PSIzOCIgZmlsbD0idXJsKCNwYXR0ZXJuMF8xODk5XzE1MzA5KSIvPgo8ZGVmcz4KPHBhdHRlcm4gaWQ9InBhdHRlcm4wXzE4OTlfMTUzMDkiIHBhdHRlcm5Db250ZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4KPHVzZSB4bGluazpocmVmPSIjaW1hZ2UwXzE4OTlfMTUzMDkiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMSkiLz4KPC9wYXR0ZXJuPgo8aW1hZ2UgaWQ9ImltYWdlMF8xODk5XzE1MzA5IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFHUUFBQUJrQ0FZQUFBQnc0cFZVQUFBQUNYQklXWE1BQUFzVEFBQUxFd0VBbXB3WUFBQUhsRWxFUVZSNG5PMmRhWXdVUlJUSC80dG52UENJOXhFMWFoUVROWm1wNmdYUnphcjR3VHRHdlBXTFVlSVZQeGdWTldiaXpxdlpSZFRBR29pb0VRd2FGRFdLMFlCQ3ZNVWJKV0pJQkQ4UU9VSUVvd2hFUUZqemVwdTRXYVo2cW5wNnRxdWIraVg5aGV4VVYvVy9YaDN2dlNvQWo4Zmo4WGc4SG8vSDQvRjRpa2FwQjhQTE5ZaXl3czJTOExCVTZKRUtVNFRDTktrd1dTalVoTUw5WllXclJSZk9QR1V5OXNtNnpvV2lvNElEcE1JMS9ORWxZYWxVNkxONWhNSTJTVmdvRlVncWRJNmRqVDJ5YmxQKzZFTmJ1WXFMSkdHbUpHeTBGU0ZXSU1JcVFaZ29GVVprM1V6M3FXQlltWEM1VlBnMlRSRmludm1TMEo1MXM1MUVLblFLd3M5REpNUmdxNWtqcXpncDYyL2dCT2NvSEM0VlhzNUNpRUdpYkJhRVJ6c3EyQk83SzZLSzg0WEN5a1FmVU9HdmFHaWJKeFZtczZoQzRRMGVoaUpMMjVLdzNNOWtENDdEN29Za1BCQ3VnRXcvRm1HRkpFd1ZDdGVhZkREdTZTV0YwNlhDT0tud3FpQnNzQkRtZDFuRkJkZ3RxR0FZN3hjTWUrdTJhRGpyNU44MTg5cFNCZnNKaFJzRjRWTkRVYmF3K0NpOEdJU1pCdVA1djVMd1hLc21XcWx3bmxENHlFQ1U3V3hoS0NxU01OVmdhUG9tNkVacEtPckRGaU1KYXhxSlVxN2lPaFFOU2FnMGFqaTdQWVo2bFJPdThnaHpEWWF2QzFFVVJBMlhTY0tPR0t2WXlIK1Q4VkJhYlRqUkYySDFWYTdpZUVsWUZ6TnhyM2RsdDF3bTNCWE5HOW9sY2U3M0taS3dJS2FCZjdQbkZnNFJpUkpuS1k4Z3I0U1Rac3lTTmxBWUF3ZUpQTU02UVRZRjNUZ1JlVU5XY0ZDREZjeURjSHV2TkM5bVdUNEhlVU1vakk4Ull4NjcyT0V3SXlzNElxNURsUWdTZWFHamduMTFqUkdFemVWdW5Jd2NFRVlsOVVQdTI4Z0xjUk9qSUR4bVd4NkhZamxpbURUYUYvWjJoZWs4akZyOXNBOXRrdkN4WnFtK0krakNHY2dEdWdDVFVGZy9hZ0lPdENrcmNoQ3Vqc3FZYmJ2c2pJYWVuNkxPOE4zb2JoeGk4L3V5UWtmTTBOc0QxK0hRYUl4MVBHNXJHVUpoN2FBeVpwbGFTbVFaU3diMTdJVzJsaEs2NU90M3NKWE94K2o1bzJzRTJkNU9PTFlaTVd4RXFTdEdRbEZFRlRmcE9obGJFRnhHS255aHFmeDgweko0V0JLRVpYRWJ0RGhSWXNYNC81bHVXcCt6Sm1KLzNzUnF5dW1DMHlrN2hLMmFpbyt6S1V2VU1ES0tDbHFKWWlqR0V2NDdxL29RWHRkWTIrZHdGZmFJYWo5ZURhZFpsMmNwU3F2RWlOcDJwMGFRclNNcTJCc3VJaFh1MWxSNlRkSXlUVVVaTlFISHRFcU1Sb3NWWjVlL2t0Q3JFV1JCTStXYWlHS1FVSmRZakozeldreml4RlZ3RVVGNFQxUGhLVTJYYlNKS2k4VFlpUzZWbFhPSjRTSTh3YlhTWlMyU2laS0tHRXlZNlZqZk9xdHdFVUZZck9sQjk2YjFEbzYzQzhJZlJtSVFscFlJUjZmMWJrRjRTek9IVFlLTFNJWGxtbzl6VzVydkNXcTR3a0NNalR6UnAvbGVYY2FNSUx3QUY5SGw1ckt6RVNreDBEZGw4Rmo3dnBMc1JZVENNM0FScWZDMXBnYzlsSUVZcVlzaUNPOXIycWZnSXRwMEdzS1R6Wlp0dU9tcis5ZzRKQnUwYjVIR1FzYkRSZGgwTlIvbG5Rd3NJMTFMNlVPYjFwOVZ4UTF3RVY1TmFYcm9zcVJsbXJwREpPSEtKTDR2VTBvOU9FRlg3bEJsV2xwVFVqaFhNMlR0RUUvZ0tOdnliSDFUU1IyU0pyQVY2TnBtRzNRYk10akp4bWt5OVNwZXRzeVBOUnFtNnV3ekRQY3Axc09YVkhoZTF5SGdNb0x3Z2VianZXSVpEMWxzYWhrSmQvVEc3aHkyS0Q0c3FtbFhMMXdtSU55aCtRQ2JiRXc3VUxnK1BKWmdLWWFKS0J5SjVJaWtSVjNHeEFqcnBtTnhKNktHdzNSZVVhRnd1MDFaR2xHTWZWUDFSTEVWSXl5SE1Fc3pIMjNnZzBCd25lak1YOTNWMWxqTENYV1FLUGFSdmdHaUpCRWo2TUtwTVpacUhBYk9sS0NHUUd2aU5keGlYVjYvS0l1VGVtMURVUWpMYk1WZ0pHRkd6SERWaWJ3Z0ZUN1JXTW1xSk12RVp0MGZTWDdQUXVxT0p3aUY3MTFQaDkyMU1mcERPcFBoT0tWcDJFc3EvS0N6RHI3Y0JubERONWRJRm9wd0tSeEdLanlsRTBNUWZtejJWSEFtY0dLY0pQeXBFV1dkcTlkWmNPL1hXamZuOUZZeEdubUZsN294aytMeVFPRkl1TFlnaVVtWUVJUVhrV3ZZUzZvSmZjcitIcmNvclpoM0dtTEV1bDBJSzlvck9CUjU1K3dLRG80SjcvS0s1WmVzaDYrZ2hrdGlVNGtJVzNtaGdpTEFGaUFhWGIxRVdKZkowZWdLaHZHWmxaak5YL2dFQ3ZlaENGaEYraWhjZmZWYUg2eEpTTFFMLzlDZ1hrMUhQSjJnaWJEcmFrbTR0VlZud3FNaGxDVGhuMFoxRVFvdjVXb0QySW9ZdUJ5NENtUHZjVW9XdzFFL1RralFMc1YzdFl6ZVhPNDNrb2doK3VjVTdVUmY1N2EzV1h6dTNUYnhMVXlTSnR3VG5SWFUzdEl3Nk5uT1Y5Q2lDTmlFWFVzOUdDNEpieWF4SE00akZvU25PY1dJODc3WWtuamk1V3Y2Qk9GWm5odDBKN0FhREZGclpRMFhvd2drT3AvUmh6Yk9iRFFlUmxyNUVPYW1uZTJZR2MwZWxtbG5Od3Y3dnVKdURXclJJd2kvOFdYTktBcHBubHlTaEhhZDY3NEZ6Mm8rU3NCbkNGRVUyQmZWaXBOTFFiOVA2YldrdDR2R1dvVENsM3pta1crY1FKRm9sUmdEWWQ4Uk95akR2TnJrMTQ1djRjc3Z3eDE1Z3JPT3VXQW94S2dYTkNwWE1TcTZ1b1AvSjRSM0JlR3JLSFB4Vnc0b2hSKysvOThuUlFjMU8zT1JpTkFNU1pQWVBDM0FpK0VRWGd5SDhHSTRoQmZESWJ3WUR1SEZjQWd2aGtONE1SekNpK0VRWGd5SDhHSTRoQmNqTHpmQkRmRGF1cGFEVzNnNFdjQmJodXVpZURFY0VzV0w0UTVobnBPZk16d2VqOGZqOFhnOEhvL0g0L0dneVB3SE4rTUJXWEhhUDdBQUFBQUFTVVZPUks1Q1lJST0iLz4KPC9kZWZzPgo8L3N2Zz4K';
|
|
61
|
+
|
|
62
|
+
const DEFAULT_LANGUAGE = 'en';
|
|
63
|
+
const TRANSLATIONS = {
|
|
64
|
+
en: {
|
|
65
|
+
emptyTitle: 'Nothing here — yet!',
|
|
66
|
+
emptyDescription: 'No challenges at the moment. Try exploring events or keep playing to unlock new ones.'
|
|
67
|
+
},
|
|
68
|
+
ro: {},
|
|
69
|
+
fr: {},
|
|
70
|
+
ar: {},
|
|
71
|
+
hr: {}
|
|
72
|
+
};
|
|
73
|
+
const translate = (key, customLang) => {
|
|
74
|
+
const lang = customLang;
|
|
75
|
+
return TRANSLATIONS[lang !== undefined && lang in TRANSLATIONS ? lang : DEFAULT_LANGUAGE][key];
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const casinoChallengesListCss = ".empty {\n color: var(--emw--color-white, white);\n padding: 80px 0 0;\n display: flex;\n gap: 12px;\n flex-direction: column;\n align-items: center;\n line-height: 24px;\n font-size: var(--emw--font-size-medium, 16px);\n text-align: center;\n}\n.empty img {\n height: 38px;\n margin-bottom: 18px;\n}\n\n.challenges-list {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 30px;\n width: 100%;\n}\n@container challenges-container (max-width: 670px) {\n .challenges-list .list-item {\n width: 100%;\n }\n}\n\n.loader {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenges-container (max-width: 576px) {\n .loader {\n width: 100%;\n }\n}\n.loader:hover {\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n margin: 0;\n height: 28px;\n margin: 0 20px 20px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n width: auto;\n}\n.loader .Skeleton.Image {\n border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n margin: 20px 0;\n}";
|
|
79
|
+
const CasinoChallengesListStyle0 = casinoChallengesListCss;
|
|
80
|
+
|
|
81
|
+
const skeletons = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
82
|
+
const CasinoChallengeList = class {
|
|
83
|
+
constructor(hostRef) {
|
|
84
|
+
registerInstance(this, hostRef);
|
|
85
|
+
this.loadMore = createEvent(this, "loadMore", 7);
|
|
86
|
+
this.timerExpired = createEvent(this, "timerExpired", 7);
|
|
87
|
+
this.setLastItemRef = (el) => {
|
|
88
|
+
if (this.lastItemRef && this.observer) {
|
|
89
|
+
this.observer.unobserve(this.lastItemRef);
|
|
90
|
+
}
|
|
91
|
+
this.lastItemRef = el;
|
|
92
|
+
if (el && this.observer && !this.loading) {
|
|
93
|
+
this.observer.observe(el);
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
this.mbSource = undefined;
|
|
97
|
+
this.clientStyling = undefined;
|
|
98
|
+
this.clientStylingUrl = undefined;
|
|
99
|
+
this.language = 'en';
|
|
100
|
+
this.translationUrl = undefined;
|
|
101
|
+
this.challenges = [];
|
|
102
|
+
this.loading = false;
|
|
103
|
+
this.hasMore = false;
|
|
104
|
+
this.activeTabIndex = 0;
|
|
105
|
+
}
|
|
106
|
+
handleClientStylingChange(newValue, oldValue) {
|
|
107
|
+
if (newValue != oldValue) {
|
|
108
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
handleClientStylingUrlChange(newValue, oldValue) {
|
|
112
|
+
if (newValue != oldValue) {
|
|
113
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
handleMbSourceChange(newValue, oldValue) {
|
|
117
|
+
if (newValue != oldValue) {
|
|
118
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
setupObserver() {
|
|
122
|
+
if (!this.lastItemRef || this.loading || !this.hasMore)
|
|
123
|
+
return;
|
|
124
|
+
if (!this.observer) {
|
|
125
|
+
this.observer = new IntersectionObserver(([entry]) => {
|
|
126
|
+
if (entry.isIntersecting && !this.loading && this.hasMore) {
|
|
127
|
+
this.observer.unobserve(entry.target);
|
|
128
|
+
this.loadMore.emit();
|
|
129
|
+
}
|
|
130
|
+
}, {
|
|
131
|
+
root: null,
|
|
132
|
+
rootMargin: '0px',
|
|
133
|
+
threshold: 0.1
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
this.observer.disconnect();
|
|
137
|
+
this.observer.observe(this.lastItemRef);
|
|
138
|
+
}
|
|
139
|
+
componentDidRender() {
|
|
140
|
+
this.setupObserver();
|
|
141
|
+
}
|
|
142
|
+
disconnectedCallback() {
|
|
143
|
+
var _a;
|
|
144
|
+
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
145
|
+
this.observer = undefined;
|
|
146
|
+
}
|
|
147
|
+
componentDidLoad() {
|
|
148
|
+
if (this.stylingContainer) {
|
|
149
|
+
if (this.mbSource)
|
|
150
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
151
|
+
if (this.clientStyling)
|
|
152
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
153
|
+
if (this.clientStylingUrl)
|
|
154
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
renderSkeletons() {
|
|
158
|
+
return skeletons.map((skeleton) => (h("div", { class: "loader", key: skeleton }, h("ui-skeleton", { structure: "image", height: "200px", "border-radius": "16px 16px 0 0" }), h("ui-skeleton", { class: "SkeletonRows", structure: "text", width: "220px", height: "16px", rows: "3" }), h("ui-skeleton", { class: "SkeletonButton", structure: "text", width: "100%" }))));
|
|
159
|
+
}
|
|
160
|
+
onTimerExpired(e) {
|
|
161
|
+
if (this.timerExpired) {
|
|
162
|
+
this.timerExpired.emit(e.detail);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
renderEmptyState() {
|
|
166
|
+
return (h("div", { class: "empty" }, h("img", { src: emptyStateSvg }), h("b", null, translate('emptyTitle', this.language)), h("span", null, translate('emptyDescription', this.language))));
|
|
167
|
+
}
|
|
168
|
+
render() {
|
|
169
|
+
return (h("div", { key: '09ef210fa11672939ebafe62f9ac5ce5361258e6', ref: (el) => (this.stylingContainer = el) }, this.challenges.length === 0 && !this.loading && this.renderEmptyState(), h("div", { key: '822f0decec2878b12d9b5929528852286e0fac7a', class: "challenges-list" }, this.challenges.map((challenge, index) => (h("div", { key: challenge.Id, ref: index === this.challenges.length - 1 ? this.setLastItemRef : null, class: "list-item" }, h("casino-challenge-card", { challenge: challenge, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, onTimerExpired: this.onTimerExpired, activeTabIndex: this.activeTabIndex })))), this.loading && this.renderSkeletons())));
|
|
170
|
+
}
|
|
171
|
+
get el() { return getElement(this); }
|
|
172
|
+
static get watchers() { return {
|
|
173
|
+
"clientStyling": ["handleClientStylingChange"],
|
|
174
|
+
"clientStylingUrl": ["handleClientStylingUrlChange"],
|
|
175
|
+
"mbSource": ["handleMbSourceChange"]
|
|
176
|
+
}; }
|
|
177
|
+
};
|
|
178
|
+
CasinoChallengeList.style = CasinoChallengesListStyle0;
|
|
179
|
+
|
|
180
|
+
export { CasinoChallengeList as C, setClientStylingURL as a, setStreamStyling as b, setClientStyling as s };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as CasinoChallengeList } from './casino-challenges-list-
|
|
1
|
+
export { C as CasinoChallengeList } from './casino-challenges-list-7f47d912.js';
|
|
2
2
|
import './index-d84ca385.js';
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as n}from"./index-d84ca385.js";function s(t,e){if(t){const i=document.createElement("style");i.innerHTML=e,t.appendChild(i)}}function r(t,e){const i=new URL(e);fetch(i.href).then((t=>t.text())).then((e=>{const i=document.createElement("style");i.innerHTML=e,t&&t.appendChild(i)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}function h(t,e){if(window.emMessageBus){const i=document.createElement("style");window.emMessageBus.subscribe(e,(e=>{i.innerHTML=e,t&&t.appendChild(i)}))}}const o=[0,1,2,3,4,5,6,7,8,9],l=class{constructor(i){t(this,i),this.loadMore=e(this,"loadMore",7),this.timerExpired=e(this,"timerExpired",7),this.setLastItemRef=t=>{this.lastItemRef&&this.observer&&this.observer.unobserve(this.lastItemRef),this.lastItemRef=t,t&&this.observer&&!this.loading&&this.observer.observe(t)},this.mbSource=void 0,this.clientStyling=void 0,this.clientStylingUrl=void 0,this.language="en",this.translationUrl=void 0,this.challenges=[],this.loading=!1,this.hasMore=!1,this.activeTabIndex=0}handleClientStylingChange(t,e){t!=e&&s(this.stylingContainer,this.clientStyling)}handleClientStylingUrlChange(t,e){t!=e&&r(this.stylingContainer,this.clientStylingUrl)}handleMbSourceChange(t,e){t!=e&&h(this.stylingContainer,`${this.mbSource}.Style`)}setupObserver(){this.lastItemRef&&!this.loading&&this.hasMore&&(this.observer||(this.observer=new IntersectionObserver((([t])=>{t.isIntersecting&&!this.loading&&this.hasMore&&(this.observer.unobserve(t.target),this.loadMore.emit())}),{root:null,rootMargin:"0px",threshold:.1})),this.observer.disconnect(),this.observer.observe(this.lastItemRef))}componentDidRender(){this.setupObserver()}disconnectedCallback(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0}componentDidLoad(){this.stylingContainer&&(this.mbSource&&h(this.stylingContainer,`${this.mbSource}.Style`),this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&r(this.stylingContainer,this.clientStylingUrl))}renderSkeletons(){return o.map((t=>i("div",{class:"loader",key:t},i("ui-skeleton",{structure:"image",height:"200px","border-radius":"16px 16px 0 0"}),i("ui-skeleton",{class:"SkeletonRows",structure:"text",width:"220px",height:"16px",rows:"3"}),i("ui-skeleton",{class:"SkeletonButton",structure:"text",width:"100%"}))))}onTimerExpired(t){this.timerExpired&&this.timerExpired.emit(t.detail)}render(){return i("div",{key:"a86f75428a1ada59409164e3c83582794d186c5c",ref:t=>this.stylingContainer=t,class:"challenges-list"},this.challenges.map(((t,e)=>i("div",{key:t.Id,ref:e===this.challenges.length-1?this.setLastItemRef:null},i("casino-challenge-card",{challenge:t,language:this.language,mbSource:this.mbSource,clientStyling:this.clientStyling,clientStylingUrl:this.clientStylingUrl,translationUrl:this.translationUrl,onTimerExpired:this.onTimerExpired,activeTabIndex:this.activeTabIndex})))),this.loading&&this.renderSkeletons())}get el(){return n(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"],mbSource:["handleMbSourceChange"]}}};l.style=".challenges-list {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n width: 100%;\n}\n\n.loader {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenge-list (max-width: 576px) {\n .loader {\n width: 100%;\n }\n}\n.loader:hover {\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n margin: 0;\n height: 28px;\n margin: 0 20px 20px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n width: auto;\n}\n.loader .Skeleton.Image {\n border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n margin: 20px 0;\n}";export{l as C,r as a,h as b,s}
|
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-6a66c51c.js');
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* @name setClientStyling
|
|
7
|
-
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
8
|
-
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
9
|
-
* @param {string} clientStyling The style content
|
|
10
|
-
*/
|
|
11
|
-
function setClientStyling(stylingContainer, clientStyling) {
|
|
12
|
-
if (stylingContainer) {
|
|
13
|
-
const sheet = document.createElement('style');
|
|
14
|
-
sheet.innerHTML = clientStyling;
|
|
15
|
-
stylingContainer.appendChild(sheet);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* @name setClientStylingURL
|
|
21
|
-
* @description Method used to create and append to the passed element of the widget a style element with the content fetched from a given URL
|
|
22
|
-
* @param {HTMLElement} stylingContainer The reference element of the widget
|
|
23
|
-
* @param {string} clientStylingUrl The URL of the style content
|
|
24
|
-
*/
|
|
25
|
-
function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
26
|
-
const url = new URL(clientStylingUrl);
|
|
27
|
-
|
|
28
|
-
fetch(url.href)
|
|
29
|
-
.then((res) => res.text())
|
|
30
|
-
.then((data) => {
|
|
31
|
-
const cssFile = document.createElement('style');
|
|
32
|
-
cssFile.innerHTML = data;
|
|
33
|
-
if (stylingContainer) {
|
|
34
|
-
stylingContainer.appendChild(cssFile);
|
|
35
|
-
}
|
|
36
|
-
})
|
|
37
|
-
.catch((err) => {
|
|
38
|
-
console.error('There was an error while trying to load client styling from URL', err);
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* @name setStreamLibrary
|
|
44
|
-
* @description Method used to create and append to the passed element of the widget a style element with content fetched from the MessageBus
|
|
45
|
-
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
46
|
-
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
47
|
-
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
48
|
-
*/
|
|
49
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
50
|
-
if (window.emMessageBus) {
|
|
51
|
-
const sheet = document.createElement('style');
|
|
52
|
-
|
|
53
|
-
window.emMessageBus.subscribe(domain, (data) => {
|
|
54
|
-
sheet.innerHTML = data;
|
|
55
|
-
if (stylingContainer) {
|
|
56
|
-
stylingContainer.appendChild(sheet);
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
const casinoChallengesListCss = ".challenges-list {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n width: 100%;\n}\n\n.loader {\n width: 308px;\n border-radius: 16px;\n border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));\n background-color: var(--emw--color-background, #141515);\n box-sizing: border-box;\n position: relative;\n}\n@container challenge-list (max-width: 576px) {\n .loader {\n width: 100%;\n }\n}\n.loader:hover {\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n cursor: pointer;\n}\n.loader .SkeletonRows .SkeletonContainer {\n padding: 0 20px 0 20px;\n}\n.loader .SkeletonButton .Skeleton.Text {\n margin: 0;\n height: 28px;\n margin: 0 20px 20px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n width: auto;\n}\n.loader .Skeleton.Image {\n border-radius: 16px 16px 0 0;\n}\n.loader .Skeleton.Text {\n margin: 20px 0;\n}";
|
|
63
|
-
const CasinoChallengesListStyle0 = casinoChallengesListCss;
|
|
64
|
-
|
|
65
|
-
const skeletons = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
66
|
-
const CasinoChallengeList = class {
|
|
67
|
-
constructor(hostRef) {
|
|
68
|
-
index.registerInstance(this, hostRef);
|
|
69
|
-
this.loadMore = index.createEvent(this, "loadMore", 7);
|
|
70
|
-
this.timerExpired = index.createEvent(this, "timerExpired", 7);
|
|
71
|
-
this.setLastItemRef = (el) => {
|
|
72
|
-
if (this.lastItemRef && this.observer) {
|
|
73
|
-
this.observer.unobserve(this.lastItemRef);
|
|
74
|
-
}
|
|
75
|
-
this.lastItemRef = el;
|
|
76
|
-
if (el && this.observer && !this.loading) {
|
|
77
|
-
this.observer.observe(el);
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
this.mbSource = undefined;
|
|
81
|
-
this.clientStyling = undefined;
|
|
82
|
-
this.clientStylingUrl = undefined;
|
|
83
|
-
this.language = 'en';
|
|
84
|
-
this.translationUrl = undefined;
|
|
85
|
-
this.challenges = [];
|
|
86
|
-
this.loading = false;
|
|
87
|
-
this.hasMore = false;
|
|
88
|
-
this.activeTabIndex = 0;
|
|
89
|
-
}
|
|
90
|
-
handleClientStylingChange(newValue, oldValue) {
|
|
91
|
-
if (newValue != oldValue) {
|
|
92
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
handleClientStylingUrlChange(newValue, oldValue) {
|
|
96
|
-
if (newValue != oldValue) {
|
|
97
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
handleMbSourceChange(newValue, oldValue) {
|
|
101
|
-
if (newValue != oldValue) {
|
|
102
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
setupObserver() {
|
|
106
|
-
if (!this.lastItemRef || this.loading || !this.hasMore)
|
|
107
|
-
return;
|
|
108
|
-
if (!this.observer) {
|
|
109
|
-
this.observer = new IntersectionObserver(([entry]) => {
|
|
110
|
-
if (entry.isIntersecting && !this.loading && this.hasMore) {
|
|
111
|
-
this.observer.unobserve(entry.target);
|
|
112
|
-
this.loadMore.emit();
|
|
113
|
-
}
|
|
114
|
-
}, {
|
|
115
|
-
root: null,
|
|
116
|
-
rootMargin: '0px',
|
|
117
|
-
threshold: 0.1
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
this.observer.disconnect();
|
|
121
|
-
this.observer.observe(this.lastItemRef);
|
|
122
|
-
}
|
|
123
|
-
componentDidRender() {
|
|
124
|
-
this.setupObserver();
|
|
125
|
-
}
|
|
126
|
-
disconnectedCallback() {
|
|
127
|
-
var _a;
|
|
128
|
-
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
129
|
-
this.observer = undefined;
|
|
130
|
-
}
|
|
131
|
-
componentDidLoad() {
|
|
132
|
-
if (this.stylingContainer) {
|
|
133
|
-
if (this.mbSource)
|
|
134
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
135
|
-
if (this.clientStyling)
|
|
136
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
137
|
-
if (this.clientStylingUrl)
|
|
138
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
renderSkeletons() {
|
|
142
|
-
return skeletons.map((skeleton) => (index.h("div", { class: "loader", key: skeleton }, index.h("ui-skeleton", { structure: "image", height: "200px", "border-radius": "16px 16px 0 0" }), index.h("ui-skeleton", { class: "SkeletonRows", structure: "text", width: "220px", height: "16px", rows: "3" }), index.h("ui-skeleton", { class: "SkeletonButton", structure: "text", width: "100%" }))));
|
|
143
|
-
}
|
|
144
|
-
onTimerExpired(e) {
|
|
145
|
-
if (this.timerExpired) {
|
|
146
|
-
this.timerExpired.emit(e.detail);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
render() {
|
|
150
|
-
return (index.h("div", { key: 'a86f75428a1ada59409164e3c83582794d186c5c', ref: (el) => (this.stylingContainer = el), class: "challenges-list" }, this.challenges.map((challenge, index$1) => (index.h("div", { key: challenge.Id, ref: index$1 === this.challenges.length - 1 ? this.setLastItemRef : null }, index.h("casino-challenge-card", { challenge: challenge, language: this.language, mbSource: this.mbSource, clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, translationUrl: this.translationUrl, onTimerExpired: this.onTimerExpired, activeTabIndex: this.activeTabIndex })))), this.loading && this.renderSkeletons()));
|
|
151
|
-
}
|
|
152
|
-
get el() { return index.getElement(this); }
|
|
153
|
-
static get watchers() { return {
|
|
154
|
-
"clientStyling": ["handleClientStylingChange"],
|
|
155
|
-
"clientStylingUrl": ["handleClientStylingUrlChange"],
|
|
156
|
-
"mbSource": ["handleMbSourceChange"]
|
|
157
|
-
}; }
|
|
158
|
-
};
|
|
159
|
-
CasinoChallengeList.style = CasinoChallengesListStyle0;
|
|
160
|
-
|
|
161
|
-
exports.CasinoChallengeList = CasinoChallengeList;
|
|
162
|
-
exports.setClientStyling = setClientStyling;
|
|
163
|
-
exports.setClientStylingURL = setClientStylingURL;
|
|
164
|
-
exports.setStreamStyling = setStreamStyling;
|