@everymatrix/casino-challenge-details 0.7.1 → 0.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/casino-challenge-details/casino-challenge-details-fb36c6d4.js +7 -0
  2. package/dist/casino-challenge-details/casino-challenge-details_4.entry.js +1 -1
  3. package/dist/casino-challenge-details/index.esm.js +1 -1
  4. package/dist/cjs/{casino-challenge-details-774d82cd.js → casino-challenge-details-1108d206.js} +50 -19
  5. package/dist/cjs/casino-challenge-details_4.cjs.entry.js +1 -1
  6. package/dist/cjs/index.cjs.js +1 -1
  7. package/dist/collection/components/casino-challenge-details/casino-challenge-details.css +2 -1
  8. package/dist/collection/components/casino-challenge-details/casino-challenge-details.js +49 -18
  9. package/dist/esm/{casino-challenge-details-9465f599.js → casino-challenge-details-fb36c6d4.js} +50 -19
  10. package/dist/esm/casino-challenge-details_4.entry.js +2 -2
  11. package/dist/esm/index.js +1 -1
  12. package/dist/types/components/casino-challenge-details/casino-challenge-details.d.ts +1 -0
  13. package/package.json +1 -1
  14. package/dist/casino-challenge-details/casino-challenge-details-9465f599.js +0 -7
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const casinoChallengeDetails = require('./casino-challenge-details-774d82cd.js');
5
+ const casinoChallengeDetails = require('./casino-challenge-details-1108d206.js');
6
6
  require('./index-2a30d71d.js');
7
7
 
8
8
 
package/dist/collection/components/casino-challenge-details/casino-challenge-details.css CHANGED
@@ -8,6 +8,7 @@
8
8
  min-width: 375px;
9
9
  width: 100%;
10
10
  margin: 0 auto;
11
+ position: relative;
11
12
  }
12
13
 
13
14
  .challenges-header {
@@ -436,7 +437,7 @@
436
437
  }
437
438
 
438
439
  .button__container {
439
- position: fixed;
440
+ position: absolute;
440
441
  bottom: 0;
441
442
  left: 50%;
442
443
  transform: translateX(-50%);
package/dist/collection/components/casino-challenge-details/casino-challenge-details.js CHANGED
@@ -170,7 +170,7 @@ export class CasinoChallengeDetails {
170
170
  if (EventSource && !this.sseConnection) {
171
171
  const updateUrl = `${this.endpoint}/v1/encoder/challenges/*/update`;
172
172
  this.sseConnection = new EventSourcePolyfill(updateUrl);
173
- this.sseConnection.addEventListener('message', this.handleEvent);
173
+ this.sseConnection.addEventListener('message', this.handleEvent.bind(this));
174
174
  }
175
175
  }
176
176
  disconnectGameFromLiveLobby() {
@@ -181,27 +181,33 @@ export class CasinoChallengeDetails {
181
181
  }
182
182
  }
183
183
  handleEvent(e) {
184
- const { data } = e === null || e === void 0 ? void 0 : e.data;
185
- switch (data === null || data === void 0 ? void 0 : data.messageType) {
186
- case 'disabledChallengeNotification': {
187
- if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
188
- this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Paused', ChallengeStatus: EChallengeStatus.Paused });
184
+ try {
185
+ const parsedData = JSON.parse(e === null || e === void 0 ? void 0 : e.data);
186
+ const { data } = parsedData;
187
+ switch (data === null || data === void 0 ? void 0 : data.messageType) {
188
+ case 'disabledChallengeNotification': {
189
+ if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
190
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Paused', ChallengeStatus: EChallengeStatus.Paused });
191
+ }
192
+ break;
189
193
  }
190
- break;
191
- }
192
- case 'enabledChallengeNotification': {
193
- if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
194
- this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Enabled', ChallengeStatus: EChallengeStatus.Enabled });
194
+ case 'enabledChallengeNotification': {
195
+ if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
196
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Enabled', ChallengeStatus: EChallengeStatus.Enabled });
197
+ }
198
+ break;
195
199
  }
196
- break;
197
- }
198
- case 'forfeitedChallengeProgressNotification': {
199
- if (this.challenge.Id === (data === null || data === void 0 ? void 0 : data.challengeProgressId)) {
200
- this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Forfeited });
200
+ case 'forfeitedChallengeProgressNotification': {
201
+ if (this.challenge.Id === (data === null || data === void 0 ? void 0 : data.challengeProgressId)) {
202
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Forfeited });
203
+ }
204
+ break;
201
205
  }
202
- break;
203
206
  }
204
207
  }
208
+ catch (e) {
209
+ console.error('Exception when parse challenges NWA live updates', e);
210
+ }
205
211
  }
206
212
  handleClientStylingChange(newValue, oldValue) {
207
213
  if (newValue != oldValue) {
@@ -256,6 +262,28 @@ export class CasinoChallengeDetails {
256
262
  this.updateTime();
257
263
  }, 1000);
258
264
  }
265
+ async updateChallengeViewedStatus() {
266
+ if (!this.checkAttrs()) {
267
+ const url = `${this.endpoint}/challenge/ChangeProgressIsNewStatus`;
268
+ const body = {
269
+ DomainId: this.domain,
270
+ ChallengeProgressId: this.challenge.Id
271
+ };
272
+ return fetch(url, {
273
+ method: 'POST',
274
+ headers: {
275
+ 'Content-Type': 'application/json'
276
+ },
277
+ body: JSON.stringify(body)
278
+ })
279
+ .then((res) => res.json())
280
+ .then((res) => {
281
+ if (res.Success) {
282
+ this.challenge.IsNew = false;
283
+ }
284
+ });
285
+ }
286
+ }
259
287
  async getChallenge() {
260
288
  if (!this.checkAttrs()) {
261
289
  this.currentFetchChallengeId++;
@@ -284,6 +312,9 @@ export class CasinoChallengeDetails {
284
312
  if (challenge) {
285
313
  this.challenge = challenge;
286
314
  this.isChallengePaused = this.challenge.ChallengeStatus === EChallengeStatus.Paused;
315
+ if (this.challenge.IsNew) {
316
+ this.updateChallengeViewedStatus();
317
+ }
287
318
  }
288
319
  else if (this.redirectIfNotFound) {
289
320
  this.goBack();
@@ -555,7 +586,7 @@ export class CasinoChallengeDetails {
555
586
  return (((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.Status) === 4 && (h("div", { class: "notification" }, h("img", { class: "notification__icon", src: infoIcon }), h("span", { class: "notification__message" }, translate('expiredNotification', this.language)))));
556
587
  }
557
588
  render() {
558
- return (h("div", { key: '5500fa3f776e2357796ad51523f96c389ccdb810', 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: backIcon }), 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)))));
589
+ return (h("div", { key: '6fec238ecb9dd431b3a05f439c92f5d6bb886f0d', 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: backIcon }), 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)))));
559
590
  }
560
591
  static get is() { return "casino-challenge-details"; }
561
592
  static get encapsulation() { return "shadow"; }
package/dist/esm/{casino-challenge-details-9465f599.js → casino-challenge-details-fb36c6d4.js} RENAMED
@@ -1432,7 +1432,7 @@ var EWalletTypes;
1432
1432
  EWalletTypes[EWalletTypes["Mixed"] = 2] = "Mixed";
1433
1433
  })(EWalletTypes || (EWalletTypes = {}));
1434
1434
 
1435
- 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 .rules__tab .contributionType {\n margin: 24px 0;\n}\n.details .rules__tab .contributionRule {\n margin: 0;\n}\n.details .rules__tab .contribution__label {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .rules__tab .contribution__type__label {\n margin-right: 4px;\n}\n.details .rules__tab .contribution__value {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-gray-150, #c8d6ce);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.details .rules__tab .contribution__rule__value {\n margin-bottom: 8px;\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}";
1435
+ 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 position: relative;\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 .rules__tab .contributionType {\n margin: 24px 0;\n}\n.details .rules__tab .contributionRule {\n margin: 0;\n}\n.details .rules__tab .contribution__label {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-white, #fff);\n font-weight: var(--emw--font-weight-bold, 700);\n line-height: 18px;\n}\n.details .rules__tab .contribution__type__label {\n margin-right: 4px;\n}\n.details .rules__tab .contribution__value {\n font-size: var(--emw--font-size-small, 14px);\n color: var(--emw--color-gray-150, #c8d6ce);\n font-weight: var(--emw--font-weight-medium, 500);\n}\n.details .rules__tab .contribution__rule__value {\n margin-bottom: 8px;\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: absolute;\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}";
1436
1436
  const CasinoChallengeDetailsStyle0 = casinoChallengeDetailsCss;
1437
1437
 
1438
1438
  const CasinoChallengeDetails = class {
@@ -1592,7 +1592,7 @@ const CasinoChallengeDetails = class {
1592
1592
  if (EventSource && !this.sseConnection) {
1593
1593
  const updateUrl = `${this.endpoint}/v1/encoder/challenges/*/update`;
1594
1594
  this.sseConnection = new eventsource.exports.EventSourcePolyfill(updateUrl);
1595
- this.sseConnection.addEventListener('message', this.handleEvent);
1595
+ this.sseConnection.addEventListener('message', this.handleEvent.bind(this));
1596
1596
  }
1597
1597
  }
1598
1598
  disconnectGameFromLiveLobby() {
@@ -1603,27 +1603,33 @@ const CasinoChallengeDetails = class {
1603
1603
  }
1604
1604
  }
1605
1605
  handleEvent(e) {
1606
- const { data } = e === null || e === void 0 ? void 0 : e.data;
1607
- switch (data === null || data === void 0 ? void 0 : data.messageType) {
1608
- case 'disabledChallengeNotification': {
1609
- if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
1610
- this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Paused', ChallengeStatus: EChallengeStatus.Paused });
1606
+ try {
1607
+ const parsedData = JSON.parse(e === null || e === void 0 ? void 0 : e.data);
1608
+ const { data } = parsedData;
1609
+ switch (data === null || data === void 0 ? void 0 : data.messageType) {
1610
+ case 'disabledChallengeNotification': {
1611
+ if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
1612
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Paused', ChallengeStatus: EChallengeStatus.Paused });
1613
+ }
1614
+ break;
1611
1615
  }
1612
- break;
1613
- }
1614
- case 'enabledChallengeNotification': {
1615
- if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
1616
- this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Enabled', ChallengeStatus: EChallengeStatus.Enabled });
1616
+ case 'enabledChallengeNotification': {
1617
+ if (this.challenge.ChallengeId === (data === null || data === void 0 ? void 0 : data.challengeId)) {
1618
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { StatusName: 'Enabled', ChallengeStatus: EChallengeStatus.Enabled });
1619
+ }
1620
+ break;
1617
1621
  }
1618
- break;
1619
- }
1620
- case 'forfeitedChallengeProgressNotification': {
1621
- if (this.challenge.Id === (data === null || data === void 0 ? void 0 : data.challengeProgressId)) {
1622
- this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Forfeited });
1622
+ case 'forfeitedChallengeProgressNotification': {
1623
+ if (this.challenge.Id === (data === null || data === void 0 ? void 0 : data.challengeProgressId)) {
1624
+ this.challenge = Object.assign(Object.assign({}, this.challenge), { Status: EChallengeProgressStatus.Forfeited });
1625
+ }
1626
+ break;
1623
1627
  }
1624
- break;
1625
1628
  }
1626
1629
  }
1630
+ catch (e) {
1631
+ console.error('Exception when parse challenges NWA live updates', e);
1632
+ }
1627
1633
  }
1628
1634
  handleClientStylingChange(newValue, oldValue) {
1629
1635
  if (newValue != oldValue) {
@@ -1678,6 +1684,28 @@ const CasinoChallengeDetails = class {
1678
1684
  this.updateTime();
1679
1685
  }, 1000);
1680
1686
  }
1687
+ async updateChallengeViewedStatus() {
1688
+ if (!this.checkAttrs()) {
1689
+ const url = `${this.endpoint}/challenge/ChangeProgressIsNewStatus`;
1690
+ const body = {
1691
+ DomainId: this.domain,
1692
+ ChallengeProgressId: this.challenge.Id
1693
+ };
1694
+ return fetch(url, {
1695
+ method: 'POST',
1696
+ headers: {
1697
+ 'Content-Type': 'application/json'
1698
+ },
1699
+ body: JSON.stringify(body)
1700
+ })
1701
+ .then((res) => res.json())
1702
+ .then((res) => {
1703
+ if (res.Success) {
1704
+ this.challenge.IsNew = false;
1705
+ }
1706
+ });
1707
+ }
1708
+ }
1681
1709
  async getChallenge() {
1682
1710
  if (!this.checkAttrs()) {
1683
1711
  this.currentFetchChallengeId++;
@@ -1706,6 +1734,9 @@ const CasinoChallengeDetails = class {
1706
1734
  if (challenge) {
1707
1735
  this.challenge = challenge;
1708
1736
  this.isChallengePaused = this.challenge.ChallengeStatus === EChallengeStatus.Paused;
1737
+ if (this.challenge.IsNew) {
1738
+ this.updateChallengeViewedStatus();
1739
+ }
1709
1740
  }
1710
1741
  else if (this.redirectIfNotFound) {
1711
1742
  this.goBack();
@@ -1977,7 +2008,7 @@ const CasinoChallengeDetails = class {
1977
2008
  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)))));
1978
2009
  }
1979
2010
  render() {
1980
- return (h("div", { key: '5500fa3f776e2357796ad51523f96c389ccdb810', 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)))));
2011
+ return (h("div", { key: '6fec238ecb9dd431b3a05f439c92f5d6bb886f0d', 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)))));
1981
2012
  }
1982
2013
  static get watchers() { return {
1983
2014
  "clientStyling": ["handleClientStylingChange"],
package/dist/esm/casino-challenge-details_4.entry.js CHANGED
@@ -1,5 +1,5 @@
1
- import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-9465f599.js';
2
- export { C as casino_challenge_details } from './casino-challenge-details-9465f599.js';
1
+ import { E as EChallengeProgressLevelStatus, a as EChallengeStatus, b as EChallengeProgressStatus, t as translate } from './casino-challenge-details-fb36c6d4.js';
2
+ export { C as casino_challenge_details } from './casino-challenge-details-fb36c6d4.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=';
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { C as CasinoChallengeDetails } from './casino-challenge-details-9465f599.js';
1
+ export { C as CasinoChallengeDetails } from './casino-challenge-details-fb36c6d4.js';
2
2
  import './index-30adf0cb.js';
package/dist/types/components/casino-challenge-details/casino-challenge-details.d.ts CHANGED
@@ -88,6 +88,7 @@ export declare class CasinoChallengeDetails {
88
88
  private scrollToActiveLevel;
89
89
  checkIsMobile: () => void;
90
90
  connectedCallback(): void;
91
+ updateChallengeViewedStatus(): Promise<void>;
91
92
  private currentFetchChallengeId;
92
93
  getChallenge(): Promise<void>;
93
94
  componentWillLoad(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/casino-challenge-details",
3
- "version": "0.7.1",
3
+ "version": "0.7.3",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",