@everymatrix/casino-challenge-details 0.3.12 → 0.3.13
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-challenge-details/casino-challenge-details-00cd9c3e.js +1 -0
- package/dist/casino-challenge-details/casino-challenge-details.esm.js +1 -1
- package/dist/casino-challenge-details/casino-challenge-details_4.entry.js +1 -1
- package/dist/casino-challenge-details/index.esm.js +1 -1
- package/dist/cjs/{casino-challenge-details-53cea171.js → casino-challenge-details-7465690c.js} +123 -61
- package/dist/cjs/casino-challenge-details.cjs.js +1 -1
- package/dist/cjs/casino-challenge-details_4.cjs.entry.js +16 -13
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/casino-challenge-details/casino-challenge-details.css +1 -0
- package/dist/collection/components/casino-challenge-details/casino-challenge-details.js +108 -52
- package/dist/collection/components/components/casino-challenge-progress-bar.js +16 -13
- package/dist/collection/utils/locale.utils.js +5 -0
- package/dist/collection/utils/types.js +18 -10
- package/dist/esm/{casino-challenge-details-d1763400.js → casino-challenge-details-00cd9c3e.js} +124 -62
- package/dist/esm/casino-challenge-details.js +1 -1
- package/dist/esm/casino-challenge-details_4.entry.js +17 -14
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/casino-challenge-details/casino-challenge-details.d.ts +5 -0
- package/dist/types/utils/types.d.ts +15 -6
- package/package.json +1 -1
- package/dist/casino-challenge-details/casino-challenge-details-d1763400.js +0 -1
package/dist/esm/{casino-challenge-details-d1763400.js → casino-challenge-details-00cd9c3e.js}
RENAMED
|
@@ -74,6 +74,7 @@ const TRANSLATIONS = {
|
|
|
74
74
|
finished: 'Finished',
|
|
75
75
|
suspended: 'Suspended',
|
|
76
76
|
completed: 'Completed',
|
|
77
|
+
unavailable: 'Unavailable',
|
|
77
78
|
start: 'Start',
|
|
78
79
|
resume: 'Resume',
|
|
79
80
|
pause: 'Pause',
|
|
@@ -102,6 +103,7 @@ const TRANSLATIONS = {
|
|
|
102
103
|
finished: 'Terminat',
|
|
103
104
|
suspended: 'Suspendat',
|
|
104
105
|
start: 'Start',
|
|
106
|
+
unavailable: 'Indisponibil',
|
|
105
107
|
resume: 'Reia',
|
|
106
108
|
pause: 'Pauză',
|
|
107
109
|
join: 'Alătură-te pentru a începe',
|
|
@@ -129,6 +131,7 @@ const TRANSLATIONS = {
|
|
|
129
131
|
finished: 'Terminé',
|
|
130
132
|
suspended: 'Suspendu',
|
|
131
133
|
start: 'Démarrer',
|
|
134
|
+
unavailable: 'Indisponible',
|
|
132
135
|
resume: 'Reprendre',
|
|
133
136
|
pause: 'Pause',
|
|
134
137
|
join: 'Rejoindre pour commencer',
|
|
@@ -156,6 +159,7 @@ const TRANSLATIONS = {
|
|
|
156
159
|
finished: 'منتهي',
|
|
157
160
|
suspended: 'معلق',
|
|
158
161
|
start: 'ابدأ',
|
|
162
|
+
unavailable: 'غير متاح',
|
|
159
163
|
resume: 'استئناف',
|
|
160
164
|
pause: 'إيقاف مؤقت',
|
|
161
165
|
join: 'انضم للبدء',
|
|
@@ -183,6 +187,7 @@ const TRANSLATIONS = {
|
|
|
183
187
|
finished: 'Završeno',
|
|
184
188
|
suspended: 'Suspendirano',
|
|
185
189
|
start: 'Počni',
|
|
190
|
+
unavailable: 'nedostupan',
|
|
186
191
|
resume: 'Nastavi',
|
|
187
192
|
pause: 'Pauza',
|
|
188
193
|
join: 'Pridruži se za početak',
|
|
@@ -290,23 +295,31 @@ var EChallengeRewardType;
|
|
|
290
295
|
EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
|
|
291
296
|
EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
|
|
292
297
|
})(EChallengeRewardType || (EChallengeRewardType = {}));
|
|
298
|
+
var EChallengeProgressLevelStatus;
|
|
299
|
+
(function (EChallengeProgressLevelStatus) {
|
|
300
|
+
EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Closed"] = 0] = "Closed";
|
|
301
|
+
EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["InProgress"] = 1] = "InProgress";
|
|
302
|
+
EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Fillup"] = 2] = "Fillup";
|
|
303
|
+
EChallengeProgressLevelStatus[EChallengeProgressLevelStatus["Completed"] = 3] = "Completed";
|
|
304
|
+
})(EChallengeProgressLevelStatus || (EChallengeProgressLevelStatus = {}));
|
|
293
305
|
var EChallengeProgressStatus;
|
|
294
306
|
(function (EChallengeProgressStatus) {
|
|
295
|
-
EChallengeProgressStatus[EChallengeProgressStatus["
|
|
307
|
+
EChallengeProgressStatus[EChallengeProgressStatus["Started"] = 0] = "Started";
|
|
296
308
|
EChallengeProgressStatus[EChallengeProgressStatus["InProgress"] = 1] = "InProgress";
|
|
297
|
-
EChallengeProgressStatus[EChallengeProgressStatus["
|
|
309
|
+
EChallengeProgressStatus[EChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
|
|
298
310
|
EChallengeProgressStatus[EChallengeProgressStatus["Completed"] = 3] = "Completed";
|
|
311
|
+
EChallengeProgressStatus[EChallengeProgressStatus["Expired"] = 4] = "Expired";
|
|
312
|
+
EChallengeProgressStatus[EChallengeProgressStatus["Forfeited"] = 5] = "Forfeited";
|
|
313
|
+
EChallengeProgressStatus[EChallengeProgressStatus["Awaiting"] = 6] = "Awaiting";
|
|
314
|
+
EChallengeProgressStatus[EChallengeProgressStatus["Paused"] = 7] = "Paused";
|
|
299
315
|
})(EChallengeProgressStatus || (EChallengeProgressStatus = {}));
|
|
300
316
|
var EChallengeStatus;
|
|
301
317
|
(function (EChallengeStatus) {
|
|
302
|
-
EChallengeStatus[EChallengeStatus["
|
|
303
|
-
EChallengeStatus[EChallengeStatus["
|
|
304
|
-
EChallengeStatus[EChallengeStatus["
|
|
305
|
-
EChallengeStatus[EChallengeStatus["
|
|
306
|
-
EChallengeStatus[EChallengeStatus["
|
|
307
|
-
EChallengeStatus[EChallengeStatus["Forfeited"] = 5] = "Forfeited";
|
|
308
|
-
EChallengeStatus[EChallengeStatus["Awaiting"] = 6] = "Awaiting";
|
|
309
|
-
EChallengeStatus[EChallengeStatus["Paused"] = 7] = "Paused";
|
|
318
|
+
EChallengeStatus[EChallengeStatus["Draft"] = 0] = "Draft";
|
|
319
|
+
EChallengeStatus[EChallengeStatus["Enabled"] = 1] = "Enabled";
|
|
320
|
+
EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
|
|
321
|
+
EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
|
|
322
|
+
EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
|
|
310
323
|
})(EChallengeStatus || (EChallengeStatus = {}));
|
|
311
324
|
const ChallengeStatusDictionary = [
|
|
312
325
|
'started',
|
|
@@ -330,7 +343,7 @@ var EChallengeValidityType;
|
|
|
330
343
|
EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
|
|
331
344
|
})(EChallengeValidityType || (EChallengeValidityType = {}));
|
|
332
345
|
|
|
333
|
-
const casinoChallengeDetailsCss = ".container {\n font-family: var(--emw--font-family-secondary, \"Montserrat\", sans-serif);\n background: var(--emw--color-background, #000);\n min-height: 100vh;\n padding-top: 16px;\n container-type: inline-size;\n container-name: challenges-details;\n min-width: 375px;\n width: 100%;\n margin: 0 auto;\n}\n\n.challenges-header {\n display: none;\n}\n\n.back-button {\n display: flex;\n align-items: center;\n padding: 14px 0 14px 10px;\n outline: none;\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n border: none;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n cursor: pointer;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.back-button__icon {\n margin: 0 4px;\n}\n.back-button__text {\n margin-left: 4px;\n}\n\n.details {\n min-width: 308px;\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 16px;\n min-width: 375px;\n width: 100%;\n}\n.details.grayed {\n opacity: 0.5;\n}\n.details__general-info {\n max-width: 344px;\n padding-bottom: 16px;\n}\n.details__general-info-image-container {\n position: relative;\n margin-bottom: 22px;\n}\n.details__general-info-image {\n display: block;\n width: 344px;\n height: 226px;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details__general-info-image.grayed {\n opacity: 0.5;\n}\n.details__general-info-timer-badge {\n position: absolute;\n background: var(--emw--color-white, #fff);\n top: 6px;\n right: 6px;\n border-radius: var(--emw--border-radius-large, 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 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n}\n.details__general-info-timer-badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-title {\n margin: 0 0 4px;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-end-date_label {\n color: var(--emw--color-gray-150, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin: 0;\n}\n.details__general-info-end-date_value {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-action-button,\n.details .footer-action-button {\n width: 100%;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n text-align: center;\n text-transform: uppercase;\n font-weight: var(--emw--font-weight-bold, 700);\n height: 51px;\n padding: 16px 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n gap: 10px;\n}\n.details__general-info-action-button:hover,\n.details .footer-action-button:hover {\n border-color: var(--emw--color-secondary, #083b17);\n cursor: pointer;\n}\n.details__general-info-action-button.filled,\n.details .footer-action-button.filled {\n background-color: var(--emw--button-background-primary-color, #18ce51);\n color: var(--emw--color-white, #fff);\n border-color: var(--emw--color-gray-300, #083b17);\n}\n.details__general-info-action-button.filled:hover,\n.details .footer-action-button.filled:hover {\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.details__general-info-action-button.grayed,\n.details .footer-action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black-150, #000000);\n border-color: var(--emw--button-disabled-border-color, #727672);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details__general-info-action-button.grayed:hover,\n.details .footer-action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.details__general-info-action-button:disabled, .details__general-info-action-button:disabled:hover,\n.details .footer-action-button:disabled,\n.details .footer-action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, #727672);\n opacity: 0.7;\n}\n.details .footer-action-button {\n height: 44px;\n padding: 14px 20px;\n font-size: var(--emw--font-size-sm, 14px);\n}\n.details__general-info-action-button {\n display: none;\n margin-top: 32px;\n}\n.details__tabs-container {\n flex-grow: 1;\n max-width: 100%;\n}\n.details__tabs {\n position: relative;\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid var(--emw--border-warning-color, #ea9018);\n}\n.details__tab {\n padding: 10px 20px;\n cursor: pointer;\n position: relative;\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-gray-300, #555);\n display: flex;\n width: 33.3333333333%;\n padding: 12px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n.details__tab.active {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n background: var(--emw--active-tab, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__tab {\n color: var(--emw--color-gray-100, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n.details__tab:nth-of-type(1).active ~ .active-tab-indicator {\n left: 0;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(2).active ~ .active-tab-indicator {\n left: 33.3333333333%;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(3).active ~ .active-tab-indicator {\n left: 66.6666666667%;\n width: 33.3333333333%;\n}\n.details .active-tab-indicator {\n position: absolute;\n bottom: -3px;\n height: 2px;\n background: var(--emw--active-tab-indicator, linear-gradient(180deg, rgba(234, 144, 24, 0.7) 0%, rgba(224, 168, 78, 0.7) 100%), #727672);\n transition: left 0.3s ease, width 0.3s ease;\n}\n.details .levels__tab {\n margin-top: 22px;\n display: flex;\n gap: 12px;\n flex-direction: column;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .level {\n display: flex;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background-color: var(--emw--color-background, rgba(114, 118, 114, 0.2));\n}\n.details .level.grayed {\n background: rgba(114, 118, 114, 0.15);\n}\n.details .level.active {\n background: linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%);\n border: 2px solid var(--Gradient-Blue, #003e5c);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details .level.completed {\n background: linear-gradient(90deg, rgba(0, 62, 92, 0.3) 0.05%, rgba(17, 59, 33, 0.3) 87.69%);\n}\n.details .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .level__title {\n width: 100%;\n display: flex;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n margin-bottom: 10px;\n}\n.details .level__title .completed, .details .level__title .in-progress {\n color: var(--emw--color-valid, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 22px;\n}\n.details .level__title.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.details .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.details .level__icon {\n display: flex;\n margin: 5px 6px 5px 0;\n opacity: 1;\n}\n.details .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n}\n.details .level__icon img.grayed {\n opacity: 0.5;\n}\n.details .level__bonus, .details .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin-bottom: 4px;\n}\n.details .level__value {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.details .level__value.grayed {\n opacity: 0.5;\n}\n.details .games__tab {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 22px 0;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .games__tab .game {\n position: relative;\n width: 105px;\n height: 85px;\n}\n.details .games__tab .game img {\n width: 100%;\n height: 100%;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details .games__tab .game .contribution {\n position: absolute;\n top: 4px;\n right: 4px;\n color: var(--emw--color-white, #fff);\n border-radius: var(--emw--border-radius-small, 12px);\n border: 1px solid var(--Gradient-Blue, #003e5c);\n background: rgba(0, 0, 0, 0.5);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(5px);\n padding: 0 8px;\n font-size: var(--emw--font-size-2x-small, 8px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 22px;\n text-align: center;\n}\n.details .rules__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 8px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .rules__tab .rule {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n}\n.details .rules__tab .link {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n padding: 14px 0;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__button {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex: 1 0 0;\n height: 42px;\n padding: 14px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background-color: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n\n.button__container {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: calc(100% - 32px);\n padding: 16px 16px 22px 16px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-top: 1px solid var(--emw--color-blue, #003e5c);\n background: var(--emw--color-background, #000);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n\n.lds-dual-ring {\n display: block;\n width: 80px;\n height: 80px;\n margin: 80px auto 0 auto;\n}\n\n.lds-dual-ring:after {\n content: \" \";\n display: block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n border: 6px solid var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n border-color: var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e)) transparent var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 16px 22px 16px;\n}\n.notification__icon {\n margin-top: 2px;\n}\n.notification__message, .notification__title {\n color: var(--emw--color-gray-50, #e2e2e2);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.notification__title {\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-details (min-width: 768px) {\n .button__container {\n display: none;\n }\n .details {\n gap: 36px;\n flex-wrap: nowrap;\n }\n .details__general-info-action-button {\n display: flex;\n }\n .details__general-info-image {\n width: 380px;\n min-height: 226px;\n height: auto;\n }\n .details__general-info {\n max-width: 380px;\n }\n .details__tabs__container {\n max-width: calc(100% - 380px);\n }\n .details .levels__tab {\n gap: 20px;\n height: 60vh;\n }\n .details .levels__tab .level__icon {\n width: 14px;\n height: 14px;\n margin: 4px 6px 4px 0px;\n }\n .details .levels__tab .level__icon img {\n width: 100%;\n height: 100%;\n }\n .details .levels__tab .level__title {\n font-size: var(--emw--font-size-medium, 16px);\n }\n .details .levels__tab .level__title .completed, .details .levels__tab .level__title .in-progress {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .levels__tab .level__bonus, .details .levels__tab .level__target, .details .levels__tab .level__value {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .games__tab, .details .rules__tab {\n height: 60vh;\n }\n .details .games__tab {\n gap: 20px;\n min-width: 340px;\n }\n .details .games__tab .game {\n width: 160px;\n height: 110px;\n }\n .details .games__tab .game .contribution {\n top: 8px;\n right: 8px;\n padding: 4px 10px;\n font-size: var(--emw--font-size-2x-small, 10px);\n line-height: 18px;\n }\n .challenges-header {\n margin: 0 0 32px;\n display: flex;\n justify-content: space-between;\n }\n .challenges-title {\n margin: 0;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: var(--emw--font-size-x-large, 24px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-white, #ffffff);\n }\n .challenges-tabs {\n display: flex;\n gap: 12px;\n border-radius: 48px;\n padding: 6px;\n color: var(--emw--color-gray-150, #c8d6ce);\n background-color: var(--emw--color-background-secondary, #272727);\n }\n .challenges-tab {\n padding: 10px 16px;\n border-radius: 40px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n cursor: pointer;\n text-align: center;\n width: 95px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n }\n .challenges-tab.active {\n color: var(--emw--color-white, #ffffff);\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n }\n .challenges-tab:last-child {\n width: inherit;\n padding: 10px 16px;\n }\n}";
|
|
346
|
+
const casinoChallengeDetailsCss = ".container {\n font-family: var(--emw--font-family-secondary, \"Montserrat\", sans-serif);\n background: var(--emw--color-background, #000);\n min-height: 100vh;\n padding-top: 16px;\n container-type: inline-size;\n container-name: challenges-details;\n min-width: 375px;\n width: 100%;\n margin: 0 auto;\n}\n\n.challenges-header {\n display: none;\n}\n\n.back-button {\n display: flex;\n align-items: center;\n padding: 14px 0 14px 10px;\n outline: none;\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n border: none;\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n cursor: pointer;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.back-button__icon {\n margin: 0 4px;\n}\n.back-button__text {\n margin-left: 4px;\n}\n\n.details {\n min-width: 308px;\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n padding: 16px;\n min-width: 375px;\n width: 100%;\n}\n.details.grayed {\n opacity: 0.5;\n}\n.details__general-info {\n max-width: 344px;\n padding-bottom: 16px;\n}\n.details__general-info-image-container {\n position: relative;\n margin-bottom: 22px;\n}\n.details__general-info-image {\n display: block;\n width: 344px;\n height: 226px;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details__general-info-image.grayed {\n opacity: 0.5;\n}\n.details__general-info-timer-badge {\n position: absolute;\n background: var(--emw--color-white, #fff);\n top: 6px;\n right: 6px;\n border-radius: var(--emw--border-radius-large, 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 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n}\n.details__general-info-timer-badge span {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-timer-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: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-title {\n margin: 0 0 4px;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-large, 20px);\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-end-date_label {\n color: var(--emw--color-gray-150, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin: 0;\n}\n.details__general-info-end-date_value {\n font-weight: var(--emw--font-weight-bold, 700);\n}\n.details__general-info-action-button,\n.details .footer-action-button {\n width: 100%;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-medium, 16px);\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n text-align: center;\n text-transform: uppercase;\n font-weight: var(--emw--font-weight-bold, 700);\n height: 51px;\n padding: 16px 32px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: stretch;\n gap: 10px;\n}\n.details__general-info-action-button:hover,\n.details .footer-action-button:hover {\n border-color: var(--emw--color-secondary, #083b17);\n cursor: pointer;\n}\n.details__general-info-action-button.filled,\n.details .footer-action-button.filled {\n background-color: var(--emw--button-background-primary-color, #18ce51);\n color: var(--emw--color-white, #fff);\n border-color: var(--emw--color-gray-300, #083b17);\n}\n.details__general-info-action-button.filled:hover,\n.details .footer-action-button.filled:hover {\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.details__general-info-action-button.grayed,\n.details .footer-action-button.grayed {\n color: var(--emw--color-gray-50, #e2e2e2);\n background: var(--emw--color-black-150, #000000);\n border-color: var(--emw--button-disabled-border-color, #727672);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details__general-info-action-button.grayed:hover,\n.details .footer-action-button.grayed:hover {\n color: var(--emw--color-white, #fff);\n}\n.details__general-info-action-button:disabled, .details__general-info-action-button:disabled:hover,\n.details .footer-action-button:disabled,\n.details .footer-action-button:disabled:hover {\n color: var(--emw--color-gray-50, #e2e2e2);\n cursor: not-allowed;\n border: 2px solid var(--emw--button-disabled-border-color, #727672);\n opacity: 0.7;\n}\n.details .footer-action-button {\n height: 44px;\n padding: 14px 20px;\n font-size: var(--emw--font-size-sm, 14px);\n}\n.details__general-info-action-button {\n display: none;\n margin-top: 32px;\n}\n.details__tabs-container {\n flex-grow: 1;\n max-width: 100%;\n}\n.details__tabs {\n position: relative;\n display: flex;\n justify-content: flex-start;\n border-bottom: 1px solid var(--emw--border-warning-color, #ea9018);\n}\n.details__tab {\n padding: 10px 20px;\n cursor: pointer;\n position: relative;\n font-weight: var(--emw--font-weight-medium, 500);\n color: var(--emw--color-gray-300, #555);\n display: flex;\n width: 33.3333333333%;\n padding: 12px 10px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n.details__tab.active {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n background: var(--emw--active-tab, linear-gradient(180deg, #ea9018 0%, #e0a84e 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__tab {\n color: var(--emw--color-gray-100, #727672);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n.details__tab:nth-of-type(1).active ~ .active-tab-indicator {\n left: 0;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(2).active ~ .active-tab-indicator {\n left: 33.3333333333%;\n width: 33.3333333333%;\n}\n.details__tab:nth-of-type(3).active ~ .active-tab-indicator {\n left: 66.6666666667%;\n width: 33.3333333333%;\n}\n.details .active-tab-indicator {\n position: absolute;\n bottom: -3px;\n height: 2px;\n background: var(--emw--active-tab-indicator, linear-gradient(180deg, rgba(234, 144, 24, 0.7) 0%, rgba(224, 168, 78, 0.7) 100%), #727672);\n transition: left 0.3s ease, width 0.3s ease;\n}\n.details .levels__tab {\n margin-top: 22px;\n display: flex;\n gap: 12px;\n flex-direction: column;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .level {\n display: flex;\n padding: 20px;\n flex-direction: column;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background-color: var(--emw--color-background, rgba(114, 118, 114, 0.2));\n}\n.details .level.grayed {\n background: rgba(114, 118, 114, 0.15);\n}\n.details .level.active {\n background: linear-gradient(90deg, rgba(30, 101, 79, 0.2) 0%, rgba(28, 141, 86, 0.2) 100%);\n border: 2px solid var(--Gradient-Blue, #003e5c);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n.details .level.completed {\n background: linear-gradient(90deg, rgba(0, 62, 92, 0.3) 0.05%, rgba(17, 59, 33, 0.3) 87.69%);\n}\n.details .level__status {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .level__title {\n width: 100%;\n display: flex;\n justify-content: space-between;\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n margin-bottom: 10px;\n}\n.details .level__title .completed, .details .level__title .in-progress {\n color: var(--emw--color-valid, #00b74f);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n text-align: right;\n line-height: 22px;\n}\n.details .level__title.grayed {\n color: var(--emw--disabled-color, #727672);\n}\n.details .level__progress {\n width: 100%;\n margin-bottom: 10px;\n}\n.details .level__icon {\n display: flex;\n margin: 5px 6px 5px 0;\n opacity: 1;\n}\n.details .level__icon img {\n display: block;\n width: 12px;\n height: 12px;\n}\n.details .level__icon img.grayed {\n opacity: 0.5;\n}\n.details .level__bonus, .details .level__target {\n display: flex;\n align-items: flex-start;\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n margin-bottom: 4px;\n}\n.details .level__value {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.details .level__value.grayed {\n opacity: 0.5;\n}\n.details .games__tab {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n padding: 22px 0;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .games__tab .game {\n position: relative;\n width: 105px;\n height: 85px;\n cursor: pointer;\n}\n.details .games__tab .game img {\n width: 100%;\n height: 100%;\n border-radius: var(--emw--border-radius-medium, 16px);\n}\n.details .games__tab .game .contribution {\n position: absolute;\n top: 4px;\n right: 4px;\n color: var(--emw--color-white, #fff);\n border-radius: var(--emw--border-radius-small, 12px);\n border: 1px solid var(--Gradient-Blue, #003e5c);\n background: rgba(0, 0, 0, 0.5);\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(5px);\n padding: 0 8px;\n font-size: var(--emw--font-size-2x-small, 8px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 22px;\n text-align: center;\n}\n.details .rules__tab {\n display: flex;\n flex-direction: column;\n padding: 22px 0;\n gap: 8px;\n overflow-y: auto;\n height: 300px;\n padding-bottom: 80px;\n}\n.details .rules__tab .rule {\n color: var(--emw--color-gray-200, #c8d6ce);\n font-size: var(--emw--font-size-small, 14px);\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n}\n.details .rules__tab .link {\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n background: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n padding: 14px 0;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.details__button {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex: 1 0 0;\n height: 42px;\n padding: 14px 20px;\n border-radius: var(--emw--button-border-radius, 99px);\n border: 2px solid var(--emw--button-border-color, #083b17);\n background-color: var(--emw--button-background-color, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n color: var(--emw--color-white, #fff);\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n text-transform: uppercase;\n}\n\n.button__container {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n width: calc(100% - 32px);\n padding: 16px 16px 22px 16px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-top: 1px solid var(--emw--color-blue, #003e5c);\n background: var(--emw--color-background, #000);\n box-shadow: 0 0 20px 0 rgba(188, 252, 177, 0.2);\n}\n\n.lds-dual-ring {\n display: block;\n width: 80px;\n height: 80px;\n margin: 80px auto 0 auto;\n}\n\n.lds-dual-ring:after {\n content: \" \";\n display: block;\n width: 64px;\n height: 64px;\n margin: 8px;\n border-radius: 50%;\n border: 6px solid var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n border-color: var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e)) transparent var(--emw--casino-color-primary, var(--emw--color-primary, #22b04e));\n animation: lds-dual-ring 1.2s linear infinite;\n}\n\n@keyframes lds-dual-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.notification {\n display: flex;\n align-items: flex-start;\n border-radius: var(--emw--border-radius-small, 12px);\n background: rgba(188, 252, 177, 0.1);\n display: flex;\n padding: 16px;\n align-items: flex-start;\n gap: 10px;\n margin: 16px 16px 22px 16px;\n}\n.notification__icon {\n margin-top: 2px;\n}\n.notification__message, .notification__title {\n color: var(--emw--color-gray-50, #e2e2e2);\n font-size: var(--emw--font-size-x-small, 12px);\n font-weight: var(--emw--font-weight-medium, 500);\n line-height: 22px;\n}\n.notification__title {\n background: var(--emw--color-background-secondary, linear-gradient(180deg, #24b24e 0%, #18ce51 100%));\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.notification__column {\n display: flex;\n flex-direction: column;\n}\n\n@container challenges-details (min-width: 768px) {\n .button__container {\n display: none;\n }\n .details {\n gap: 36px;\n flex-wrap: nowrap;\n }\n .details__general-info-action-button {\n display: flex;\n }\n .details__general-info-image {\n width: 380px;\n min-height: 226px;\n height: auto;\n }\n .details__general-info {\n max-width: 380px;\n }\n .details__tabs__container {\n max-width: calc(100% - 380px);\n }\n .details .levels__tab {\n gap: 20px;\n height: 60vh;\n }\n .details .levels__tab .level__icon {\n width: 14px;\n height: 14px;\n margin: 4px 6px 4px 0px;\n }\n .details .levels__tab .level__icon img {\n width: 100%;\n height: 100%;\n }\n .details .levels__tab .level__title {\n font-size: var(--emw--font-size-medium, 16px);\n }\n .details .levels__tab .level__title .completed, .details .levels__tab .level__title .in-progress {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .levels__tab .level__bonus, .details .levels__tab .level__target, .details .levels__tab .level__value {\n font-size: var(--emw--font-size-sm, 14px);\n }\n .details .games__tab, .details .rules__tab {\n height: 60vh;\n }\n .details .games__tab {\n gap: 20px;\n min-width: 340px;\n }\n .details .games__tab .game {\n width: 160px;\n height: 110px;\n }\n .details .games__tab .game .contribution {\n top: 8px;\n right: 8px;\n padding: 4px 10px;\n font-size: var(--emw--font-size-2x-small, 10px);\n line-height: 18px;\n }\n .challenges-header {\n margin: 0 0 32px;\n display: flex;\n justify-content: space-between;\n }\n .challenges-title {\n margin: 0;\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: var(--emw--font-size-x-large, 24px);\n font-weight: var(--emw--font-weight-bold, 700);\n color: var(--emw--color-white, #ffffff);\n }\n .challenges-tabs {\n display: flex;\n gap: 12px;\n border-radius: 48px;\n padding: 6px;\n color: var(--emw--color-gray-150, #c8d6ce);\n background-color: var(--emw--color-background-secondary, #272727);\n }\n .challenges-tab {\n padding: 10px 16px;\n border-radius: 40px;\n font-size: var(--emw--font-size-small, 14px);\n font-weight: var(--emw--font-weight-bold, 700);\n cursor: pointer;\n text-align: center;\n width: 95px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 4px;\n }\n .challenges-tab.active {\n color: var(--emw--color-white, #ffffff);\n background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);\n }\n .challenges-tab:last-child {\n width: inherit;\n padding: 10px 16px;\n }\n}";
|
|
334
347
|
const CasinoChallengeDetailsStyle0 = casinoChallengeDetailsCss;
|
|
335
348
|
|
|
336
349
|
const CasinoChallengeDetails = class {
|
|
@@ -342,6 +355,7 @@ const CasinoChallengeDetails = class {
|
|
|
342
355
|
this.challengesTabs = ['Active', 'Pending', 'Finished', 'Code'];
|
|
343
356
|
this.tabs = ['LEVELS', 'GAMES', 'RULES'];
|
|
344
357
|
this.showNotification = 10;
|
|
358
|
+
this.abortController = new AbortController();
|
|
345
359
|
this.checkIsMobile = () => {
|
|
346
360
|
this.isMobile = window.innerWidth <= 768;
|
|
347
361
|
};
|
|
@@ -366,14 +380,17 @@ const CasinoChallengeDetails = class {
|
|
|
366
380
|
this.getBadgeContent = () => {
|
|
367
381
|
var _a;
|
|
368
382
|
if (this.challenge) {
|
|
383
|
+
if (this.isChallengePaused) {
|
|
384
|
+
return translate('unavailable', this.language);
|
|
385
|
+
}
|
|
369
386
|
switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) {
|
|
370
|
-
case
|
|
387
|
+
case EChallengeProgressStatus.Expired:
|
|
371
388
|
return translate('expired', this.language);
|
|
372
|
-
case
|
|
389
|
+
case EChallengeProgressStatus.Forfeited:
|
|
373
390
|
return translate('forfeited', this.language);
|
|
374
|
-
case
|
|
391
|
+
case EChallengeProgressStatus.Completed:
|
|
375
392
|
return translate('finished', this.language);
|
|
376
|
-
case
|
|
393
|
+
case EChallengeProgressStatus.Paused:
|
|
377
394
|
return translate('suspended', this.language);
|
|
378
395
|
default:
|
|
379
396
|
return [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft || null)];
|
|
@@ -391,15 +408,15 @@ const CasinoChallengeDetails = class {
|
|
|
391
408
|
return this.hasError;
|
|
392
409
|
};
|
|
393
410
|
this.joinUnjoinProgress = async () => {
|
|
394
|
-
var _a, _b
|
|
411
|
+
var _a, _b;
|
|
395
412
|
if (!this.isUserAuthorized) {
|
|
396
413
|
this.openLoginRegisterModal();
|
|
397
414
|
}
|
|
398
|
-
const join = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) ===
|
|
399
|
-
|
|
400
|
-
if (!this.checkAttrs() &&
|
|
415
|
+
const join = ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeProgressStatus.Started ||
|
|
416
|
+
((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeProgressStatus.Paused;
|
|
417
|
+
if (!this.checkAttrs() && this.challengeId) {
|
|
401
418
|
const url = `${this.endpoint}/challenge/ChangeProgressStatus`;
|
|
402
|
-
const body = Object.assign(Object.assign({ DomainId: this.domain }, (this.userId && { InternalUserId: this.userId })), (join ? { ProgressToActivate:
|
|
419
|
+
const body = Object.assign(Object.assign({ DomainId: this.domain }, (this.userId && { InternalUserId: this.userId })), (join ? { ProgressToActivate: this.challenge.Id } : { ProgressToDeactivate: this.challenge.Id }));
|
|
403
420
|
this.actionLoading = true;
|
|
404
421
|
return fetch(url, {
|
|
405
422
|
method: 'POST',
|
|
@@ -429,6 +446,9 @@ const CasinoChallengeDetails = class {
|
|
|
429
446
|
this.getBackButtonText = () => {
|
|
430
447
|
return (h("span", { class: "back-button__text" }, this.isMobile ? translate('all', this.language) : translate('back', this.language)));
|
|
431
448
|
};
|
|
449
|
+
this.goBack = () => {
|
|
450
|
+
window.history.back();
|
|
451
|
+
};
|
|
432
452
|
this.mbSource = undefined;
|
|
433
453
|
this.clientStyling = undefined;
|
|
434
454
|
this.endpoint = '';
|
|
@@ -451,6 +471,7 @@ const CasinoChallengeDetails = class {
|
|
|
451
471
|
this.gamesAreLoading = false;
|
|
452
472
|
this.challenge = undefined;
|
|
453
473
|
this.loading = false;
|
|
474
|
+
this.isChallengePaused = false;
|
|
454
475
|
}
|
|
455
476
|
handleClientStylingChange(newValue, oldValue) {
|
|
456
477
|
if (newValue != oldValue) {
|
|
@@ -467,10 +488,21 @@ const CasinoChallengeDetails = class {
|
|
|
467
488
|
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`);
|
|
468
489
|
}
|
|
469
490
|
}
|
|
491
|
+
handleCombinedChange() {
|
|
492
|
+
clearTimeout(this.debounceTimer);
|
|
493
|
+
this.debounceTimer = setTimeout(() => {
|
|
494
|
+
if (this.isUserAuthorized && this.session && this.challengeId) {
|
|
495
|
+
if (this.activeTabIndex === 0)
|
|
496
|
+
this.getChallenge();
|
|
497
|
+
else if (this.activeTabIndex === 1)
|
|
498
|
+
this.fetchGames();
|
|
499
|
+
}
|
|
500
|
+
}, 50);
|
|
501
|
+
}
|
|
470
502
|
onEntityChange(newChallenge, previousChallenge) {
|
|
471
503
|
var _a, _b, _c, _d;
|
|
472
|
-
const newActiveProgressId = (_b = (_a = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.LevelProgresses) === null || _a === void 0 ? void 0 : _a.find((level) => level.ProgressStatus ===
|
|
473
|
-
const prevActiveProgressId = (_d = (_c = previousChallenge === null || previousChallenge === void 0 ? void 0 : previousChallenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.find((level) => level.ProgressStatus ===
|
|
504
|
+
const newActiveProgressId = (_b = (_a = newChallenge === null || newChallenge === void 0 ? void 0 : newChallenge.LevelProgresses) === null || _a === void 0 ? void 0 : _a.find((level) => level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)) === null || _b === void 0 ? void 0 : _b.LevelId;
|
|
505
|
+
const prevActiveProgressId = (_d = (_c = previousChallenge === null || previousChallenge === void 0 ? void 0 : previousChallenge.LevelProgresses) === null || _c === void 0 ? void 0 : _c.find((level) => level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)) === null || _d === void 0 ? void 0 : _d.LevelId;
|
|
474
506
|
if (newActiveProgressId == prevActiveProgressId) {
|
|
475
507
|
setTimeout(() => {
|
|
476
508
|
this.scrollToActiveLevel();
|
|
@@ -497,19 +529,32 @@ const CasinoChallengeDetails = class {
|
|
|
497
529
|
}
|
|
498
530
|
async getChallenge() {
|
|
499
531
|
if (!this.checkAttrs()) {
|
|
532
|
+
if (this.abortController) {
|
|
533
|
+
this.abortController.abort();
|
|
534
|
+
}
|
|
535
|
+
this.abortController = new AbortController();
|
|
536
|
+
const signal = this.abortController.signal;
|
|
500
537
|
const url = `${this.endpoint}/challenge/GetChallengesInfo`;
|
|
501
|
-
const body = Object.assign(
|
|
538
|
+
const body = Object.assign({ DomainId: this.domain, PlayerLanguage: this.language, PageNumber: 0, PageSize: 20 }, (this.session && { PlayerSession: this.session }));
|
|
502
539
|
this.loading = true;
|
|
503
540
|
return fetch(url, {
|
|
504
541
|
method: 'POST',
|
|
505
542
|
headers: {
|
|
506
543
|
'Content-Type': 'application/json'
|
|
507
544
|
},
|
|
545
|
+
signal,
|
|
508
546
|
body: JSON.stringify(body)
|
|
509
547
|
})
|
|
510
548
|
.then((res) => res.json())
|
|
511
549
|
.then((res) => {
|
|
512
|
-
|
|
550
|
+
var _a;
|
|
551
|
+
if (res.Success) {
|
|
552
|
+
const challenge = (_a = res === null || res === void 0 ? void 0 : res.Data) === null || _a === void 0 ? void 0 : _a.find((challenge) => (challenge === null || challenge === void 0 ? void 0 : challenge.ChallengeId) === this.challengeId);
|
|
553
|
+
if (challenge) {
|
|
554
|
+
this.challenge = challenge;
|
|
555
|
+
this.isChallengePaused = this.challenge.ChallengeStatus === EChallengeStatus.Paused;
|
|
556
|
+
}
|
|
557
|
+
}
|
|
513
558
|
})
|
|
514
559
|
.finally(() => (this.loading = false));
|
|
515
560
|
}
|
|
@@ -572,16 +617,14 @@ const CasinoChallengeDetails = class {
|
|
|
572
617
|
if (this.isUserAuthorized) {
|
|
573
618
|
let buttonText;
|
|
574
619
|
switch ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) {
|
|
575
|
-
case
|
|
620
|
+
case EChallengeProgressStatus.Started:
|
|
576
621
|
buttonText = 'start';
|
|
577
622
|
break;
|
|
578
|
-
case
|
|
623
|
+
case EChallengeProgressStatus.Paused:
|
|
579
624
|
buttonText = 'resume';
|
|
580
625
|
break;
|
|
581
|
-
case
|
|
582
|
-
|
|
583
|
-
break;
|
|
584
|
-
case EChallengeStatus.PendingLevelReward:
|
|
626
|
+
case EChallengeProgressStatus.InProgress:
|
|
627
|
+
case EChallengeProgressStatus.PendingLevelReward:
|
|
585
628
|
buttonText = 'pause';
|
|
586
629
|
break;
|
|
587
630
|
default:
|
|
@@ -599,15 +642,18 @@ const CasinoChallengeDetails = class {
|
|
|
599
642
|
});
|
|
600
643
|
}
|
|
601
644
|
async fetchGames() {
|
|
602
|
-
var _a;
|
|
603
645
|
if (!this.checkAttrs()) {
|
|
646
|
+
if (this.abortController) {
|
|
647
|
+
this.abortController.abort();
|
|
648
|
+
}
|
|
649
|
+
this.abortController = new AbortController();
|
|
650
|
+
const signal = this.abortController.signal;
|
|
604
651
|
const url = `${this.endpoint}/challenge/GetChallengeGames`;
|
|
605
|
-
const body = {
|
|
606
|
-
ChallengeId: (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeId
|
|
607
|
-
};
|
|
652
|
+
const body = Object.assign({ ChallengeId: this.challengeId }, (this.session && { PlayerSession: this.session }));
|
|
608
653
|
this.gamesAreLoading = true;
|
|
609
654
|
return fetch(url, {
|
|
610
655
|
method: 'POST',
|
|
656
|
+
signal,
|
|
611
657
|
headers: {
|
|
612
658
|
'Content-Type': 'application/json'
|
|
613
659
|
},
|
|
@@ -615,22 +661,30 @@ const CasinoChallengeDetails = class {
|
|
|
615
661
|
})
|
|
616
662
|
.then((res) => res.json())
|
|
617
663
|
.then((res) => {
|
|
618
|
-
|
|
664
|
+
if (res.ChallengeGames)
|
|
665
|
+
this.games = res.ChallengeGames;
|
|
666
|
+
else
|
|
667
|
+
this.games = [];
|
|
619
668
|
})
|
|
620
|
-
.
|
|
669
|
+
.catch(() => {
|
|
670
|
+
this.games = [];
|
|
671
|
+
})
|
|
672
|
+
.finally(() => {
|
|
673
|
+
this.gamesAreLoading = false;
|
|
674
|
+
});
|
|
621
675
|
}
|
|
622
676
|
}
|
|
623
677
|
getLevelStatus(level, active) {
|
|
624
678
|
if (this.isUserAuthorized) {
|
|
625
|
-
if (level.ProgressStatus ===
|
|
679
|
+
if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && !active)
|
|
626
680
|
return (h("div", { class: "level__status" }, h("span", null, level.ProgressPercentage, "%"), h("img", { src: lockSvg, alt: "lock-icon", title: "lock-icon" })));
|
|
627
|
-
else if (level.ProgressStatus ===
|
|
681
|
+
else if (level.ProgressStatus === EChallengeProgressLevelStatus.Closed || !active)
|
|
628
682
|
return (h("div", { class: "level__status" }, h("img", { src: lockSvg, alt: "lock-icon", title: "lock-icon" })));
|
|
629
|
-
else if (level.ProgressStatus ===
|
|
683
|
+
else if (level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
|
|
630
684
|
return (h("div", { class: "level__status" }, h("img", { src: lockSvg, alt: "lock-icon", title: "lock-icon" })));
|
|
631
|
-
else if (level.ProgressStatus ===
|
|
685
|
+
else if (level.ProgressStatus === EChallengeProgressLevelStatus.Completed)
|
|
632
686
|
return h("span", { class: "completed" }, translate('completed', this.language));
|
|
633
|
-
else if (level.ProgressStatus ===
|
|
687
|
+
else if (level.ProgressStatus === EChallengeProgressLevelStatus.InProgress)
|
|
634
688
|
return h("span", { class: "level__status in-progress" }, level.ProgressPercentage, "%");
|
|
635
689
|
}
|
|
636
690
|
return null;
|
|
@@ -642,13 +696,17 @@ const CasinoChallengeDetails = class {
|
|
|
642
696
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
643
697
|
return (h("div", { class: "details__general-info" }, h("div", { class: "details__general-info-image-container" }, h("img", { class: {
|
|
644
698
|
'details__general-info-image': true,
|
|
645
|
-
grayed: [
|
|
699
|
+
grayed: [
|
|
700
|
+
EChallengeProgressStatus.Expired,
|
|
701
|
+
EChallengeProgressStatus.Forfeited,
|
|
702
|
+
EChallengeProgressStatus.Completed
|
|
703
|
+
].includes((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status)
|
|
646
704
|
}, src: (_c = (_b = this.challenge) === null || _b === void 0 ? void 0 : _b.ChallengePresentation) === null || _c === void 0 ? void 0 : _c.BannerUrl, alt: "banner-image", title: "banner-image" }), this.getCardBadge), h("div", { class: "details__general-info-content" }, h("h1", { class: "details__general-info-title" }, (_e = (_d = this.challenge) === null || _d === void 0 ? void 0 : _d.ChallengePresentation) === null || _e === void 0 ? void 0 : _e.PresentationName), h("h3", { class: "details__general-info-end-date_label" }, translate('endDate', this.language), " -", ' ', h("span", { class: "details__general-info-end-date_value" }, this.challenge ? formatDate((_f = this.challenge) === null || _f === void 0 ? void 0 : _f.ExpirationTime) : '-')), h("casino-challenge-progress-bar", { challenge: this.challenge, isUserAuthorized: this.isUserAuthorized, language: this.language }), h("button", { class: {
|
|
647
705
|
'details__general-info-action-button': true,
|
|
648
|
-
filled: ((_g = this.challenge) === null || _g === void 0 ? void 0 : _g.Status) ===
|
|
649
|
-
grayed: ((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.Status) ===
|
|
650
|
-
((_j = this.challenge) === null || _j === void 0 ? void 0 : _j.Status) ===
|
|
651
|
-
((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.Status) ===
|
|
706
|
+
filled: ((_g = this.challenge) === null || _g === void 0 ? void 0 : _g.Status) === EChallengeProgressStatus.Started,
|
|
707
|
+
grayed: ((_h = this.challenge) === null || _h === void 0 ? void 0 : _h.Status) === EChallengeProgressStatus.Paused ||
|
|
708
|
+
((_j = this.challenge) === null || _j === void 0 ? void 0 : _j.Status) === EChallengeProgressStatus.InProgress ||
|
|
709
|
+
((_k = this.challenge) === null || _k === void 0 ? void 0 : _k.Status) === EChallengeProgressStatus.PendingLevelReward
|
|
652
710
|
}, disabled: this.actionLoading, onClick: this.joinUnjoinProgress }, translate(this.actionButtonText, this.language)))));
|
|
653
711
|
}
|
|
654
712
|
get challengeTabs() {
|
|
@@ -662,23 +720,24 @@ const CasinoChallengeDetails = class {
|
|
|
662
720
|
return (h("div", { class: "levels__tab", ref: (el) => (this.scrollContainerRef = el) }, (_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses) === null || _b === void 0 ? void 0 : _b.map((level, index) => {
|
|
663
721
|
var _a;
|
|
664
722
|
const activeChallenge = [0, 1, 2, 3].includes((_a = this === null || this === void 0 ? void 0 : this.challenge) === null || _a === void 0 ? void 0 : _a.Status);
|
|
665
|
-
const isGrayed = (this.isUserAuthorized && level.ProgressStatus !==
|
|
666
|
-
|
|
723
|
+
const isGrayed = (this.isUserAuthorized && level.ProgressStatus !== EChallengeProgressLevelStatus.InProgress) ||
|
|
724
|
+
!activeChallenge;
|
|
725
|
+
const isActiveMatch = level.ProgressStatus === EChallengeProgressLevelStatus.InProgress;
|
|
667
726
|
return (h("div", { class: {
|
|
668
727
|
level: true,
|
|
669
728
|
active: this.isUserAuthorized &&
|
|
670
729
|
activeChallenge &&
|
|
671
|
-
level.ProgressStatus ===
|
|
730
|
+
level.ProgressStatus === EChallengeProgressLevelStatus.InProgress,
|
|
672
731
|
completed: this.isUserAuthorized &&
|
|
673
732
|
activeChallenge &&
|
|
674
|
-
level.ProgressStatus ===
|
|
733
|
+
level.ProgressStatus === EChallengeProgressLevelStatus.Completed,
|
|
675
734
|
grayed: this.isUserAuthorized &&
|
|
676
|
-
(level.ProgressStatus ===
|
|
677
|
-
level.ProgressStatus ===
|
|
735
|
+
(level.ProgressStatus === EChallengeProgressLevelStatus.Closed ||
|
|
736
|
+
level.ProgressStatus === EChallengeProgressLevelStatus.Fillup)
|
|
678
737
|
}, ref: isActiveMatch ? (el) => (this.activeEntityRef = el) : undefined, key: level.LevelId }, h("div", { class: {
|
|
679
738
|
level__title: true,
|
|
680
739
|
grayed: isGrayed
|
|
681
|
-
} }, h("span", null, "Level ", index + 1), this.isUserAuthorized && this.getLevelStatus(level, activeChallenge)), this.isUserAuthorized && level.ProgressStatus ===
|
|
740
|
+
} }, h("span", null, "Level ", index + 1), this.isUserAuthorized && this.getLevelStatus(level, activeChallenge)), this.isUserAuthorized && level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && (h("div", { class: "level__progress" }, h("casino-challenge-level-progress-bar", { height: "8px", value: level.ProgressPercentage, active: activeChallenge }))), h("casino-challenge-expandable-paragraph", { "max-height": "56", active: level.ProgressStatus === EChallengeProgressLevelStatus.InProgress && activeChallenge }, h("div", { class: {
|
|
682
741
|
level__bonus: true,
|
|
683
742
|
grayed: isGrayed
|
|
684
743
|
} }, h("span", { class: "level__icon" }, h("img", { class: {
|
|
@@ -716,22 +775,22 @@ const CasinoChallengeDetails = class {
|
|
|
716
775
|
}
|
|
717
776
|
get gamesTab() {
|
|
718
777
|
return (h("div", { class: "games__tab" }, this.gamesAreLoading ? (h("div", { class: "lds-dual-ring" })) : (this.games.map((game) => {
|
|
719
|
-
return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.
|
|
778
|
+
return (h("div", { class: "game", onClick: () => this.handleGameClick(game) }, h("img", { src: game.Thumbnail, alt: "game-icon", title: "game-icon" }), h("span", { class: "contribution" }, translate('contribution', this.language), " ", game.Contribution, "%")));
|
|
720
779
|
}))));
|
|
721
780
|
}
|
|
722
781
|
get rulesTab() {
|
|
723
|
-
var _a, _b, _c, _d;
|
|
724
|
-
return (h("div", { class: "rules__tab" }, h("div", { class: "rule" }, (
|
|
782
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
783
|
+
return (h("div", { class: "rules__tab" }, ((_b = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengePresentation) === null || _b === void 0 ? void 0 : _b.Description) && (h("div", { class: "rule" }, (_d = (_c = this.challenge) === null || _c === void 0 ? void 0 : _c.ChallengePresentation) === null || _d === void 0 ? void 0 : _d.Description)), ((_f = (_e = this.challenge) === null || _e === void 0 ? void 0 : _e.ChallengePresentation) === null || _f === void 0 ? void 0 : _f.Url) && (h("a", { class: "link", href: (_h = (_g = this.challenge) === null || _g === void 0 ? void 0 : _g.ChallengePresentation) === null || _h === void 0 ? void 0 : _h.Url, target: "_blank" }, translate('terms', this.language)))));
|
|
725
784
|
}
|
|
726
785
|
get footer() {
|
|
727
786
|
var _a, _b, _c, _d;
|
|
728
787
|
return (h("div", { class: "button__container" }, h("button", { class: {
|
|
729
788
|
'footer-action-button': true,
|
|
730
|
-
filled: ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) ===
|
|
789
|
+
filled: ((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === EChallengeProgressStatus.Started || !this.isUserAuthorized,
|
|
731
790
|
grayed: this.isUserAuthorized &&
|
|
732
|
-
(((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) ===
|
|
733
|
-
((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) ===
|
|
734
|
-
((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) ===
|
|
791
|
+
(((_b = this.challenge) === null || _b === void 0 ? void 0 : _b.Status) === EChallengeProgressStatus.Paused ||
|
|
792
|
+
((_c = this.challenge) === null || _c === void 0 ? void 0 : _c.Status) === EChallengeProgressStatus.InProgress ||
|
|
793
|
+
((_d = this.challenge) === null || _d === void 0 ? void 0 : _d.Status) === EChallengeProgressStatus.PendingLevelReward)
|
|
735
794
|
}, onClick: this.joinUnjoinProgress, disabled: this.actionLoading }, translate(this.actionButtonText, this.language))));
|
|
736
795
|
}
|
|
737
796
|
get forfeitedNofitication() {
|
|
@@ -747,15 +806,18 @@ const CasinoChallengeDetails = class {
|
|
|
747
806
|
return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoCircleSvg }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
|
|
748
807
|
}
|
|
749
808
|
render() {
|
|
750
|
-
return (h("div", { key: '
|
|
809
|
+
return (h("div", { key: 'db59c429bf40a1ad703f3f26763549ece9fe8723', ref: (el) => (this.stylingContainer = el), class: "container" }, this.pageHeader, this.loading ? (h("div", { class: "lds-dual-ring" })) : (h("div", null, h("button", { class: "back-button", onClick: this.goBack }, h("img", { class: "back-button__icon", src: backArrowSvg }), this.getBackButtonText()), this.forfeitedNofitication, this.completedNotification, this.expiredNotification, h("div", { class: "details" }, this.cardGeneralInfo, h("div", { class: "details__tabs-container" }, this.challengeTabs, this.activeTabIndex === 0 && this.levelsTab, this.activeTabIndex === 1 && this.gamesTab, this.activeTabIndex === 2 && this.rulesTab), this.footer)))));
|
|
751
810
|
}
|
|
752
811
|
static get watchers() { return {
|
|
753
812
|
"clientStyling": ["handleClientStylingChange"],
|
|
754
813
|
"clientStylingUrl": ["handleClientStylingUrlChange"],
|
|
755
814
|
"mbSource": ["handleMbSourceChange"],
|
|
815
|
+
"challengeId": ["handleCombinedChange"],
|
|
816
|
+
"isUserAuthorized": ["handleCombinedChange"],
|
|
817
|
+
"session": ["handleCombinedChange"],
|
|
756
818
|
"challenge": ["onEntityChange"]
|
|
757
819
|
}; }
|
|
758
820
|
};
|
|
759
821
|
CasinoChallengeDetails.style = CasinoChallengeDetailsStyle0;
|
|
760
822
|
|
|
761
|
-
export { CasinoChallengeDetails as C,
|
|
823
|
+
export { CasinoChallengeDetails as C, EChallengeProgressLevelStatus as E, EChallengeStatus as a, EChallengeProgressStatus as b, translate as t };
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["casino-challenge-details_4",[[1,"casino-challenge-details",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"endpoint":[513],"domain":[513],"session":[513],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isUserAuthorized":[516,"is-user-authorized"],"challengeId":[513,"challenge-id"],"activeChallengeTabIndex":[513,"active-challenge-tab-index"],"userId":[513,"user-id"],"timeLeft":[32],"activeTabIndex":[32],"actionLoading":[32],"isMobile":[32],"error":[32],"hasError":[32],"games":[32],"gamesAreLoading":[32],"challenge":[32],"loading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challenge":["onEntityChange"]}],[1,"casino-challenge-expandable-paragraph",{"maxHeight":[2,"max-height"],"active":[4],"expanded":[32],"needsTruncation":[32],"isSmallScreen":[32]}],[1,"casino-challenge-level-progress-bar",{"height":[1],"active":[4],"value":[2]}],[1,"casino-challenge-progress-bar",{"challenge":[16],"isUserAuthorized":[4,"is-user-authorized"],"language":[1]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["casino-challenge-details_4",[[1,"casino-challenge-details",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"endpoint":[513],"domain":[513],"session":[513],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isUserAuthorized":[516,"is-user-authorized"],"challengeId":[513,"challenge-id"],"activeChallengeTabIndex":[513,"active-challenge-tab-index"],"userId":[513,"user-id"],"timeLeft":[32],"activeTabIndex":[32],"actionLoading":[32],"isMobile":[32],"error":[32],"hasError":[32],"games":[32],"gamesAreLoading":[32],"challenge":[32],"loading":[32],"isChallengePaused":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challengeId":["handleCombinedChange"],"isUserAuthorized":["handleCombinedChange"],"session":["handleCombinedChange"],"challenge":["onEntityChange"]}],[1,"casino-challenge-expandable-paragraph",{"maxHeight":[2,"max-height"],"active":[4],"expanded":[32],"needsTruncation":[32],"isSmallScreen":[32]}],[1,"casino-challenge-level-progress-bar",{"height":[1],"active":[4],"value":[2]}],[1,"casino-challenge-progress-bar",{"challenge":[16],"isUserAuthorized":[4,"is-user-authorized"],"language":[1]}]]]], options);
|
|
20
20
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { E as
|
|
2
|
-
export { C as casino_challenge_details } from './casino-challenge-details-
|
|
1
|
+
import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-00cd9c3e.js';
|
|
2
|
+
export { C as casino_challenge_details } from './casino-challenge-details-00cd9c3e.js';
|
|
3
3
|
import { r as registerInstance, h, g as getElement, H as Host } from './index-30adf0cb.js';
|
|
4
4
|
|
|
5
5
|
const activeChevronSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40MTA4MjYgMC45MTEwN0MwLjczNjI2MyAwLjU4NTYzMyAxLjI2MzkgMC41ODU2MzMgMS41ODkzNCAwLjkxMTA3TDYuMDAwMDggNS4zMjE4MUwxMC40MTA4IDAuOTExMDdDMTAuNzM2MyAwLjU4NTYzMyAxMS4yNjM5IDAuNTg1NjMzIDExLjU4OTMgMC45MTEwN0MxMS45MTQ4IDEuMjM2NTEgMTEuOTE0OCAxLjc2NDE0IDExLjU4OTMgMi4wODk1OEw2LjU4OTM0IDcuMDg5NThDNi4yNjM5IDcuNDE1MDIgNS43MzYyNiA3LjQxNTAyIDUuNDEwODMgNy4wODk1OEwwLjQxMDgyNiAyLjA4OTU4QzAuMDg1Mzg4OCAxLjc2NDE0IDAuMDg1Mzg4OCAxLjIzNjUxIDAuNDEwODI2IDAuOTExMDdaIiBmaWxsPSIjMDBCNzRGIi8+Cjwvc3ZnPgo=';
|
|
@@ -98,39 +98,42 @@ const CasinoChallengeProgressBar = class {
|
|
|
98
98
|
}
|
|
99
99
|
get challengeProgress() {
|
|
100
100
|
var _a;
|
|
101
|
-
const currLevel = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus ===
|
|
101
|
+
const currLevel = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressLevelStatus.InProgress);
|
|
102
102
|
if (!this.isUserAuthorized || !currLevel)
|
|
103
103
|
return null;
|
|
104
|
-
const { Status, LevelProgresses } = this.challenge;
|
|
105
|
-
if (
|
|
104
|
+
const { Status, LevelProgresses, ChallengeStatus } = this.challenge;
|
|
105
|
+
if (ChallengeStatus === EChallengeStatus.Closed ||
|
|
106
|
+
ChallengeStatus === EChallengeStatus.Deleted ||
|
|
107
|
+
Status === EChallengeProgressStatus.Expired ||
|
|
108
|
+
Status === EChallengeProgressStatus.Started) {
|
|
106
109
|
return null;
|
|
107
110
|
}
|
|
108
|
-
const barValue = Status ===
|
|
111
|
+
const barValue = Status === EChallengeProgressStatus.Paused
|
|
109
112
|
? translate('suspended', this.language)
|
|
110
|
-
: Status ===
|
|
113
|
+
: Status === EChallengeProgressStatus.Completed
|
|
111
114
|
? translate('finished', this.language)
|
|
112
115
|
: `${currLevel.ProgressPercentage}%`;
|
|
113
116
|
const isLastLevel = !LevelProgresses.some((x) => x.OrderNumber > currLevel.OrderNumber);
|
|
114
|
-
const secondImgSrc = Status ===
|
|
117
|
+
const secondImgSrc = Status === EChallengeProgressStatus.Completed ? trophySvg : isLastLevel ? finishSvg : '';
|
|
115
118
|
return (h("div", { class: {
|
|
116
119
|
progress: true,
|
|
117
|
-
paused: Status ===
|
|
118
|
-
grayed: Status ===
|
|
120
|
+
paused: Status === EChallengeProgressStatus.Paused,
|
|
121
|
+
grayed: Status === EChallengeProgressStatus.Forfeited
|
|
119
122
|
} }, h("div", { class: {
|
|
120
123
|
progress__point: true,
|
|
121
124
|
start: true,
|
|
122
|
-
hidden: Status ===
|
|
125
|
+
hidden: Status === EChallengeProgressStatus.Completed
|
|
123
126
|
} }, currLevel.OrderNumber + 1), h("div", { class: {
|
|
124
127
|
progress__bar: true,
|
|
125
|
-
finished: Status ===
|
|
128
|
+
finished: Status === EChallengeProgressStatus.Completed
|
|
126
129
|
}, style: { width: `${currLevel.ProgressPercentage}%` } }, barValue), h("div", { class: {
|
|
127
130
|
progress__point: true,
|
|
128
131
|
end: true,
|
|
129
|
-
finished: Status ===
|
|
132
|
+
finished: Status === EChallengeProgressStatus.Completed
|
|
130
133
|
} }, secondImgSrc ? h("img", { class: "progress__icon", src: secondImgSrc }) : currLevel.OrderNumber + 2)));
|
|
131
134
|
}
|
|
132
135
|
render() {
|
|
133
|
-
return h(Host, { key: '
|
|
136
|
+
return h(Host, { key: '026daa3db1fe4e19e74dc4cc994e2fbb6f833356' }, this.challengeProgress);
|
|
134
137
|
}
|
|
135
138
|
};
|
|
136
139
|
CasinoChallengeProgressBar.style = CasinoChallengeProgressBarStyle0;
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { C as CasinoChallengeDetails } from './casino-challenge-details-
|
|
1
|
+
export { C as CasinoChallengeDetails } from './casino-challenge-details-00cd9c3e.js';
|
|
2
2
|
import './index-30adf0cb.js';
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["casino-challenge-details_4",[[1,"casino-challenge-details",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"endpoint":[513],"domain":[513],"session":[513],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isUserAuthorized":[516,"is-user-authorized"],"challengeId":[513,"challenge-id"],"activeChallengeTabIndex":[513,"active-challenge-tab-index"],"userId":[513,"user-id"],"timeLeft":[32],"activeTabIndex":[32],"actionLoading":[32],"isMobile":[32],"error":[32],"hasError":[32],"games":[32],"gamesAreLoading":[32],"challenge":[32],"loading":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challenge":["onEntityChange"]}],[1,"casino-challenge-expandable-paragraph",{"maxHeight":[2,"max-height"],"active":[4],"expanded":[32],"needsTruncation":[32],"isSmallScreen":[32]}],[1,"casino-challenge-level-progress-bar",{"height":[1],"active":[4],"value":[2]}],[1,"casino-challenge-progress-bar",{"challenge":[16],"isUserAuthorized":[4,"is-user-authorized"],"language":[1]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["casino-challenge-details_4",[[1,"casino-challenge-details",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"endpoint":[513],"domain":[513],"session":[513],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"isUserAuthorized":[516,"is-user-authorized"],"challengeId":[513,"challenge-id"],"activeChallengeTabIndex":[513,"active-challenge-tab-index"],"userId":[513,"user-id"],"timeLeft":[32],"activeTabIndex":[32],"actionLoading":[32],"isMobile":[32],"error":[32],"hasError":[32],"games":[32],"gamesAreLoading":[32],"challenge":[32],"loading":[32],"isChallengePaused":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"],"challengeId":["handleCombinedChange"],"isUserAuthorized":["handleCombinedChange"],"session":["handleCombinedChange"],"challenge":["onEntityChange"]}],[1,"casino-challenge-expandable-paragraph",{"maxHeight":[2,"max-height"],"active":[4],"expanded":[32],"needsTruncation":[32],"isSmallScreen":[32]}],[1,"casino-challenge-level-progress-bar",{"height":[1],"active":[4],"value":[2]}],[1,"casino-challenge-progress-bar",{"challenge":[16],"isUserAuthorized":[4,"is-user-authorized"],"language":[1]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -64,13 +64,17 @@ export declare class CasinoChallengeDetails {
|
|
|
64
64
|
gamesAreLoading: boolean;
|
|
65
65
|
challenge: IChallenge;
|
|
66
66
|
loading: boolean;
|
|
67
|
+
isChallengePaused: boolean;
|
|
67
68
|
timerExpired: EventEmitter;
|
|
68
69
|
private stylingContainer;
|
|
69
70
|
private stylingSubscription;
|
|
70
71
|
private timerId;
|
|
72
|
+
private abortController;
|
|
71
73
|
handleClientStylingChange(newValue: any, oldValue: any): void;
|
|
72
74
|
handleClientStylingUrlChange(newValue: any, oldValue: any): void;
|
|
73
75
|
handleMbSourceChange(newValue: any, oldValue: any): void;
|
|
76
|
+
debounceTimer: any;
|
|
77
|
+
handleCombinedChange(): void;
|
|
74
78
|
onEntityChange(newChallenge: IChallenge, previousChallenge: any): void;
|
|
75
79
|
private scrollToActiveLevel;
|
|
76
80
|
checkIsMobile: () => void;
|
|
@@ -105,5 +109,6 @@ export declare class CasinoChallengeDetails {
|
|
|
105
109
|
private get forfeitedNofitication();
|
|
106
110
|
private get completedNotification();
|
|
107
111
|
private get expiredNotification();
|
|
112
|
+
goBack: () => void;
|
|
108
113
|
render(): any;
|
|
109
114
|
}
|