@everymatrix/casino-engagement-suite-challenges-list 1.35.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-79c88755.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["casino-engagement-suite-challenges-list.cjs",[[1,"casino-engagement-suite-challenges-list",{"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"language":[1],"device":[1],"challenges":[1040],"tooltip":[32],"timers":[32],"limitStylingAppends":[32]},[[8,"message","handleEvent"]]]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/casino-engagement-suite-challenges-list/casino-engagement-suite-challenges-list.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-engagement-suite-challenges-list/casino-engagement-suite-challenges-list.css

@@ -0,0 +1,225 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
+:host {
+  display: block;
+  font-family: inherit;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+button:focus {
+  outline: none;
+}
+
+.ChallengesListPopup {
+  display: flex;
+  height: 100%;
+  background-color: var(--emw--color-background, #1E1638);
+  border-radius: 8px;
+  overflow: hidden;
+  flex-direction: column;
+  position: relative;
+}
+
+.ChallengesListPopupHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 8px 8px;
+}
+
+.ChallengesIconButton {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.ChallengesListPopupHeaderName {
+  color: var(--emw--color-gray-100, #BBB9C3);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+}
+
+.ChallengesListWrapper {
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.ChallengesListWrapper::-webkit-scrollbar {
+  display: none;
+}
+
+.ChallengesList {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+  padding: 8px 19px 0;
+}
+
+.ChallengeCard {
+  padding: 15px 15px 19px;
+  border: 1px solid var(--emw--button-border-color, #403956);
+  border-radius: 6px;
+  position: relative;
+}
+
+.ChallengeJoinButton.Joined::before,
+.ChallengeCard.InProgress::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--emw--button-border-radius, 4px);
+  padding: 1px;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.ChallengeCardHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 12px;
+}
+
+.ChallengeName {
+  color: var(--emw--color-typography, #FFFFFF);
+  font-family: "Montserrat", sans-serif;
+  line-height: 22px;
+  font-weight: 700;
+  font-size: 18px;
+  word-break: break-word;
+}
+
+.ChallengeJoinButton {
+  transition: all 0.5s ease-out;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  color: var(--emw--color-typography, #1E1638);
+  border-radius: 99px;
+  min-width: 88px;
+  height: 32px;
+  font-size: 14px;
+  font-weight: 700;
+  position: relative;
+  font-family: "Montserrat", sans-serif;
+}
+.ChallengeJoinButton.Joined {
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.ChallengeJoinButton.Joined::before {
+  border-radius: 99px;
+}
+
+.ChallengesListEmpty {
+  padding: 20px 32px;
+}
+
+.ChallengesListEmpty h2 {
+  margin: 0 0 16px 0;
+  text-align: center;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  font-family: "Montserrat", sans-serif;
+  color: var(--emw--color-typography, #FFFFFF);
+}
+
+.ChallengesListEmpty p {
+  font-size: 14px;
+  line-height: 17px;
+  color: var(--emw--color-gray-100, #BBB9C3);
+}
+
+.ChallengeCountdown {
+  color: var(--emw--color-gray-100, #BBB9C3);
+  font-size: 12px;
+  line-height: 12px;
+}
+
+.ChallengesTooltipBackdrop {
+  padding: 48px 30px 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.ChallengesTooltipBackdrop .ChallengesTooltip {
+  border: 1px solid var(--emw--button-border-color, #403956);
+  background-color: var(--emw--color-background, #1E1638);
+  border-radius: 8px;
+  padding: 32px;
+  font-size: 14px;
+  line-height: 17px;
+  color: var(--emw--color-gray-100, #BBB9C3);
+  position: relative;
+}
+.ChallengesTooltipBackdrop .ChallengesTooltip .ChallengesIconButton {
+  top: 12px;
+  right: 6px;
+  position: absolute;
+}
+
+.ChallengesListPopup.Tablet .ChallengesListPopupHeader,
+.ChallengesListPopup.Desktop .ChallengesListPopupHeader {
+  padding-top: 16px;
+}
+.ChallengesListPopup.Tablet .ChallengesListPopupHeaderName,
+.ChallengesListPopup.Desktop .ChallengesListPopupHeaderName {
+  font-size: 16px;
+  line-height: 16px;
+}
+.ChallengesListPopup.Tablet .ChallengesIconButton,
+.ChallengesListPopup.Desktop .ChallengesIconButton {
+  width: 24px;
+  height: 24px;
+}
+.ChallengesListPopup.Tablet .ChallengesList,
+.ChallengesListPopup.Desktop .ChallengesList {
+  padding: 20px 24px 0;
+  row-gap: 20px;
+}
+.ChallengesListPopup.Tablet .ChallengeCardHeader,
+.ChallengesListPopup.Desktop .ChallengeCardHeader {
+  margin-bottom: 16px;
+}
+.ChallengesListPopup.Tablet .ChallengeName,
+.ChallengesListPopup.Desktop .ChallengeName {
+  line-height: 27px;
+  font-size: 22px;
+}
+.ChallengesListPopup.Tablet .ChallengeJoinButton,
+.ChallengesListPopup.Desktop .ChallengeJoinButton {
+  min-width: 100px;
+  height: 36px;
+  font-size: 16px;
+}
+.ChallengesListPopup.Tablet .ChallengeCountdown,
+.ChallengesListPopup.Desktop .ChallengeCountdown {
+  font-size: 14px;
+  line-height: 14px;
+}
+.ChallengesListPopup.Tablet .ChallengesTooltip,
+.ChallengesListPopup.Desktop .ChallengesTooltip {
+  padding: 60px 65px;
+  font-size: 16px;
+  line-height: 20px;
+}
+.ChallengesListPopup.Tablet .ChallengesTooltip .ChallengesIconButton,
+.ChallengesListPopup.Desktop .ChallengesTooltip .ChallengesIconButton {
+  top: 24px;
+  right: 24px;
+}

package/dist/collection/components/casino-engagement-suite-challenges-list/casino-engagement-suite-challenges-list.js

@@ -0,0 +1,368 @@
+import { Component, Element, Event, h, Listen, Prop, State, Watch } from '@stencil/core';
+import { ChallengeLevelProgressStatus, ChallengeProgressStatus } from '../../models/challenge';
+import { translate } from '../../utils/locale.utils';
+import '@everymatrix/casino-engagement-suite-progress-bar';
+import intervalToDuration from 'date-fns/intervalToDuration';
+import differenceInSeconds from 'date-fns/differenceInSeconds';
+export class CasinoEngagementSuiteChallengesList {
+  constructor() {
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * User's device type
+     */
+    this.device = 'Mobile';
+    /**
+     * List of challenges
+     */
+    this.challenges = [];
+    this.tooltip = false;
+    this.timers = {};
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.host.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.host.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('Error ', err);
+      });
+    };
+    this.handleCloseClick = () => {
+      this.close.emit();
+      this.tooltip = false;
+    };
+    this.handleChallengeClick = (ev) => {
+      const id = +ev.currentTarget.getAttribute('data-id');
+      window.postMessage({ type: `ChallengeClick`, id });
+    };
+    this.showTooltip = () => {
+      this.tooltip = true;
+    };
+    this.hideTooltip = () => {
+      this.tooltip = false;
+    };
+  }
+  challengesPropHandler(value) {
+    if (!this.interval && value.length) {
+      this.updateTimers();
+      this.startCountdown();
+    }
+    if (this.interval && !value.length) {
+      clearInterval(this.interval);
+    }
+  }
+  handleEvent(e) {
+    const newChallenge = e.data.data;
+    if (e.data.type === 'ChallengeGrant') {
+      const index = this.challenges.findIndex(challenge => differenceInSeconds(new Date(challenge.ExpirationTime), new Date(newChallenge.ExpirationTime)) > 0);
+      if (index > -1) {
+        this.challenges.splice(index, 0, newChallenge);
+      }
+      else {
+        this.challenges.unshift(newChallenge);
+      }
+    }
+  }
+  componentWillLoad() {
+    this.challengesPropHandler(this.challenges);
+  }
+  componentDidRender() {
+    if (!this.limitStylingAppends && this.host) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+  }
+  disconnectedCallback() {
+    this.interval && clearInterval(this.interval);
+  }
+  startCountdown() {
+    this.interval = setInterval(() => {
+      this.updateTimers();
+    }, 1000);
+  }
+  updateTimers() {
+    const now = new Date();
+    this.timers = this.challenges.filter(challenge => challenge.Status !== ChallengeProgressStatus.Expired).reduce((acc, challenge) => {
+      const expirationDate = new Date(challenge.ExpirationTime);
+      const diff = differenceInSeconds(expirationDate, now);
+      const duration = intervalToDuration({
+        start: now,
+        end: expirationDate
+      });
+      let countdown = '00h:00m:00s';
+      if (diff < 1) {
+        this.removeChallenge(challenge.Id);
+      }
+      else {
+        const days = duration.days.toString().padStart(2, '0');
+        const hours = duration.hours.toString().padStart(2, '0');
+        const minutes = duration.minutes.toString().padStart(2, '0');
+        const seconds = duration.seconds.toString().padStart(2, '0');
+        countdown = days === '00'
+          ? `${hours}h:${minutes}m:${seconds}s`
+          : `${days}d:${hours}h:${minutes}m`;
+      }
+      return Object.assign(Object.assign({}, acc), { [challenge.Id]: countdown });
+    }, {});
+  }
+  removeChallenge(id) {
+    const index = this.challenges.findIndex(challenge => challenge.Id === id);
+    if (index > -1) {
+      this.challenges.splice(index, 1);
+      window.postMessage({ type: 'ChallengeHasExpired', id });
+    }
+  }
+  getChallengeClasses(challenge) {
+    return {
+      ChallengeCard: true,
+      InProgress: challenge.Status === ChallengeProgressStatus.InProgress,
+      Completed: this.isChallengeCompleted(challenge),
+      Paused: this.isChallengePaused(challenge)
+    };
+  }
+  isChallengePaused(challenge) {
+    return challenge.Status === ChallengeProgressStatus.Started
+      && challenge.LevelProgresses[0].ProgressPercentage > 0;
+  }
+  isChallengeCompleted(challenge) {
+    return challenge.Status === ChallengeProgressStatus.Completed
+      || (challenge.Status === ChallengeProgressStatus.PendingLevelReward
+        && challenge.LevelProgresses.every(progress => progress.ProgressPercentage === 100));
+  }
+  getChallengeProgress(challenge) {
+    if (challenge.Status === ChallengeProgressStatus.Completed) {
+      return 100;
+    }
+    if (this.isChallengePaused(challenge)
+      || challenge.Status === ChallengeProgressStatus.PendingLevelReward
+      || challenge.Status === ChallengeProgressStatus.InProgress) {
+      const activeLevel = challenge.LevelProgresses
+        .find(level => level.ProgressStatus === ChallengeLevelProgressStatus.InProgress);
+      /**
+       * It is possible that Paused/InProgress challenge
+       * doesn't have InProgress level
+       * because level becomes InProgress after user's bet.
+       * In this case should be displayed progress of the next level (0%)
+       */
+      return activeLevel ? activeLevel.ProgressPercentage : 0;
+    }
+    return -1;
+  }
+  getChallengeHeaderTemplate(challenge) {
+    return h("div", { class: "ChallengeCardHeader" },
+      h("div", { class: "ChallengeName" }, challenge.ChallengePresentation.PresentationName),
+      h("button", { class: challenge.Status === ChallengeProgressStatus.InProgress ? 'ChallengeJoinButton Joined' : 'ChallengeJoinButton' }, challenge.Status === ChallengeProgressStatus.InProgress
+        ? translate('unjoin', this.language)
+        : translate('join', this.language)));
+  }
+  getChallengeTemplate(challenge) {
+    const challengeProgress = this.getChallengeProgress(challenge);
+    const countdown = this.timers[challenge.Id];
+    const progressTemplate = challengeProgress > -1
+      ? h("casino-engagement-suite-progress-bar", { class: this.device, value: challengeProgress, disabled: this.isChallengePaused(challenge) },
+        h("span", { slot: "Title", class: "ChallengeCountdown" }, countdown))
+      : h("span", { class: "ChallengeCountdown" }, countdown);
+    return (h("div", { class: this.getChallengeClasses(challenge), onClick: this.handleChallengeClick, key: challenge.Id, "data-id": challenge.Id },
+      this.getChallengeHeaderTemplate(challenge),
+      progressTemplate));
+  }
+  getHeaderTemplate() {
+    return h("header", { class: "ChallengesListPopupHeader" },
+      h("button", { onClick: this.showTooltip, class: "ChallengesIconButton" },
+        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg", alt: "Show tooltip" })),
+      h("div", { class: "ChallengesListPopupHeaderName" }, translate('challenges', this.language)),
+      h("button", { class: "ChallengesIconButton", onClick: this.handleCloseClick },
+        h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose challenges list" })));
+  }
+  getListTemplate() {
+    if (this.challenges.length) {
+      return h("div", { class: "ChallengesListWrapper" },
+        h("div", { class: "ChallengesList" }, this.challenges.map(challenge => this.getChallengeTemplate(challenge))));
+    }
+    else {
+      return h("div", { class: "ChallengesListEmpty" },
+        h("h2", null, translate('noChallenges', this.language)),
+        h("p", null, translate('tryOtherGames', this.language)));
+    }
+  }
+  getTooltipTemplate() {
+    if (this.tooltip) {
+      return h("div", { class: "ChallengesTooltipBackdrop" },
+        h("div", { class: "ChallengesTooltip" },
+          h("button", { class: "ChallengesIconButton", onClick: this.hideTooltip },
+            h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg", alt: "\u0421lose tooltip" })),
+          translate('tooltip', this.language)));
+    }
+    else {
+      return '';
+    }
+  }
+  render() {
+    return h("div", { class: `ChallengesListPopup ${this.device}` },
+      this.getHeaderTemplate(),
+      this.getListTemplate(),
+      this.getTooltipTemplate());
+  }
+  static get is() { return "casino-engagement-suite-challenges-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["casino-engagement-suite-challenges-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["casino-engagement-suite-challenges-list.css"]
+  }; }
+  static get properties() { return {
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language of the widget"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "device": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"Mobile\" | \"Tablet\" | \"Desktop\"",
+        "resolved": "\"Desktop\" | \"Mobile\" | \"Tablet\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "User's device type"
+      },
+      "attribute": "device",
+      "reflect": false,
+      "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
+    },
+    "challenges": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Challenge[]",
+        "resolved": "Challenge[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Challenge": {
+            "location": "import",
+            "path": "../../models/challenge"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List of challenges"
+      },
+      "defaultValue": "[] as Array<Challenge>"
+    }
+  }; }
+  static get states() { return {
+    "tooltip": {},
+    "timers": {},
+    "limitStylingAppends": {}
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "challenges",
+      "methodName": "challengesPropHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "message",
+      "method": "handleEvent",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/models/challenge.js

@@ -0,0 +1,15 @@
+export var ChallengeLevelProgressStatus;
+(function (ChallengeLevelProgressStatus) {
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Closed"] = 0] = "Closed";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Fillup"] = 2] = "Fillup";
+  ChallengeLevelProgressStatus[ChallengeLevelProgressStatus["Completed"] = 3] = "Completed";
+})(ChallengeLevelProgressStatus || (ChallengeLevelProgressStatus = {}));
+export var ChallengeProgressStatus;
+(function (ChallengeProgressStatus) {
+  ChallengeProgressStatus[ChallengeProgressStatus["Started"] = 0] = "Started";
+  ChallengeProgressStatus[ChallengeProgressStatus["InProgress"] = 1] = "InProgress";
+  ChallengeProgressStatus[ChallengeProgressStatus["PendingLevelReward"] = 2] = "PendingLevelReward";
+  ChallengeProgressStatus[ChallengeProgressStatus["Completed"] = 3] = "Completed";
+  ChallengeProgressStatus[ChallengeProgressStatus["Expired"] = 4] = "Expired";
+})(ChallengeProgressStatus || (ChallengeProgressStatus = {}));

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,16 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['en'];
+const TRANSLATIONS = {
+  en: {
+    challenges: 'Challenges',
+    join: 'Join',
+    unjoin: 'Unjoin',
+    noChallenges: 'No Challenges yet',
+    tryOtherGames: 'Try winning Challenges as rewards or launching other booster games',
+    tooltip: 'Competition where your real money bets contribute towards the level progress to achieve the level reward'
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/components/casino-engagement-suite-challenges-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CasinoEngagementSuiteChallengesList extends Components.CasinoEngagementSuiteChallengesList, HTMLElement {}
+export const CasinoEngagementSuiteChallengesList: {
+  prototype: CasinoEngagementSuiteChallengesList;
+  new (): CasinoEngagementSuiteChallengesList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;