@everymatrix/casino-challenge-card 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const casinoChallengeCard = require('./casino-challenge-card-c10f3b5d.js');
+require('./index-062e337e.js');
+
+
+
+exports.CasinoChallengeCard = casinoChallengeCard.CasinoChallengeCard;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-062e337e.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["casino-challenge-card.cjs",[[1,"casino-challenge-card",{"mbSource":[513,"mb-source"],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"language":[513],"challenge":[16],"tooltipIndex":[32],"timeLeft":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"mbSource":["handleMbSourceChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/casino-challenge-card/casino-challenge-card.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/casino-challenge-card/casino-challenge-card.css

@@ -0,0 +1,113 @@
+.card {
+  width: 308px;
+  border-radius: 16px;
+  border: 2px solid var(--emw--button-border-color, rgba(221, 255, 207, 0.1019607843));
+  background-color: var(--emw--color-background, #141515);
+  box-sizing: border-box;
+  position: relative;
+}
+@container challenge-list (max-width: 576px) {
+  .card {
+    width: 100%;
+  }
+}
+.card:hover {
+  background: linear-gradient(90deg, rgb(0, 62, 92) 0%, rgb(17, 59, 33) 100%);
+  cursor: pointer;
+}
+.card__image {
+  width: 100%;
+  height: 200px;
+  border-radius: 16px 16px 0 0;
+}
+@container challenge-list (max-width: 576px) {
+  .card__image {
+    height: 224px;
+  }
+}
+.card__title {
+  color: var(--emw--color-white, #FFFFFF);
+  font-size: var(--emw--font-size-medium, 16px);
+  margin: 0 0 10px;
+}
+.card__content {
+  padding: 20px;
+}
+.card__button {
+  margin-top: 20px;
+  width: 100%;
+  height: 34px;
+  background: transparent;
+  text-transform: uppercase;
+  border-radius: var(--emw--button-border-radius, 99px);
+  border: 2px solid var(--emw--button-border-color, #727672);
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-secondary, #e9931e);
+}
+.card__button:hover {
+  border-color: var(--emw--color-secondary, #e9931e);
+  cursor: pointer;
+}
+.card__badge {
+  position: absolute;
+  background: white;
+  top: 6px;
+  right: 6px;
+  border-radius: 30px;
+  padding: 2px 12px;
+  line-height: 22px;
+  font-weight: var(--emw--font-weight-medium, 500);
+  font-size: var(--emw--font-size-x-small, 12px);
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(20px);
+}
+.card__badge span {
+  font-weight: var(--emw--font-weight-bold, 700);
+}
+
+.info-item {
+  line-height: 24px;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: var(--emw--font-weight-bold, 700);
+  color: var(--emw--color-primary, #1dbf51);
+}
+@container challenge-list (min-width: 576px) {
+  .info-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: bottom;
+  }
+}
+.info-item__label {
+  font-weight: var(--emw--font-weight-medium, 500);
+  margin-right: 3px;
+  color: var(--emw--color-gray-150, #C8D6CE);
+}
+.info-item__tooltip {
+  position: absolute;
+  line-height: 22px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  opacity: 1;
+  z-index: 200;
+  white-space: nowrap;
+  font-size: var(--emw--font-size-x-small, 12px);
+  font-weight: var(--emw--font-weight-medium, 500);
+  color: var(--emw--color-white, #FFFFFF);
+  background-color: var(--emw--color-background-secondary, #1B1C2B);
+}
+.info-item__tooltip::before {
+  content: "";
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid var(--emw--color-background-secondary, #1B1C2B);
+  width: 0;
+  height: 0;
+  z-index: 201;
+}

package/dist/collection/components/casino-challenge-card/casino-challenge-card.js

@@ -0,0 +1,250 @@
+import { h } from "@stencil/core";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+import { getTimeLeft } from "../../utils/utils";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+export class CasinoChallengeCard {
+    constructor() {
+        this.defaultLanguage = 'en';
+        this.onMouseEnterHandler = (index, el) => {
+            if (el.scrollWidth > el.clientWidth) {
+                this.tooltipIndex = index;
+            }
+        };
+        this.onMouseLeaveHandler = () => {
+            this.tooltipIndex = null;
+        };
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.challenge = undefined;
+        this.tooltipIndex = null;
+        this.timeLeft = undefined;
+    }
+    get infoItems() {
+        const level1 = this.challenge.ChallengeLevels[0];
+        const target = level1.Target;
+        const targetValue = target.TargetType === 0
+            ? `${translate('placeBetsOf', this.language)} ${target.Turnover}`
+            : target.TargetType === 1
+                ? `${translate('place', this.language)} ${target.Turnover} ${translate('bet', this.language)}`
+                : `${translate('place', this.language)} ${target.BetCount} ${translate('bets', this.language)}`;
+        const rewardValue = level1.Rewards.map((r) => r.RewardDescription).join(' + ');
+        return [
+            {
+                lable: translate('totalLevels', this.language),
+                value: this.challenge.ChallengeLevels.length
+            },
+            {
+                lable: translate('level1', this.language),
+                value: targetValue
+            },
+            {
+                lable: translate('get', this.language),
+                value: rewardValue
+            }
+        ];
+    }
+    handleClientStylingChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStyling(this.stylingContainer, this.clientStyling);
+        }
+    }
+    handleClientStylingUrlChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    handleMbSourceChange(newValue, oldValue) {
+        if (newValue != oldValue) {
+            setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+        }
+    }
+    connectedCallback() {
+        this.timerId = setInterval(() => {
+            this.updateTime();
+        }, 1000);
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+        this.updateTime();
+    }
+    componentDidLoad() {
+        if (this.stylingContainer) {
+            if (this.mbSource)
+                setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
+            if (this.clientStyling)
+                setClientStyling(this.stylingContainer, this.clientStyling);
+            if (this.clientStylingUrl)
+                setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
+        }
+    }
+    disconnectedCallback() {
+        if (this.stylingSubscription) {
+            this.stylingSubscription.unsubscribe();
+        }
+        clearInterval(this.timerId);
+    }
+    updateTime() {
+        var _a;
+        this.timeLeft = getTimeLeft((_a = this.challenge) === null || _a === void 0 ? void 0 : _a.ChallengeEndTime);
+    }
+    renderInfoItem(item, index) {
+        return (h("div", { class: "info-item", onMouseEnter: (e) => this.onMouseEnterHandler(index, e.currentTarget), onMouseLeave: this.onMouseLeaveHandler }, h("span", { class: "info-item__label" }, item.lable), item.value, this.tooltipIndex === index && h("div", { class: "info-item__tooltip" }, item.value)));
+    }
+    renderCardBadge() {
+        return (h("div", { class: "card__badge" }, this.timeLeft
+            ? [translate('endsIn', this.language), ' - ', h("span", null, this.timeLeft)]
+            : translate('expired', this.language)));
+    }
+    render() {
+        return (h("div", { key: 'ddbd3e0d20b4d75ed70120798c45d7c03715b7df', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '3ca0c4b6ad25b4f60077b894bf73c9686f67a677', class: "card" }, h("img", { key: '1712546c27e75e04bde5832c521038bfd418e57f', class: "card__image", src: this.challenge.ChallengePresentations[this.language].Url ||
+                this.challenge.ChallengePresentations[this.defaultLanguage].Url }), this.renderCardBadge(), h("div", { key: '238041db616391c2594bef46778649b8b6282097', class: "card__content" }, h("h1", { key: 'd377b99c7758460df8b1a6e8e39059959347430f', class: "card__title" }, this.challenge.ChallengePresentations[this.language].PresentationName ||
+            this.challenge.ChallengePresentations[this.defaultLanguage].PresentationName), this.infoItems.map((x, index) => this.renderInfoItem(x, index)), h("button", { key: 'b53707ce7881cbf16321e3d3728a0e769af6589a', class: "card__button" }, translate('viewDetails', this.language))))));
+    }
+    static get is() { return "casino-challenge-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via message bus"
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "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
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via css file url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom translation via json file url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom language for translation"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "challenge": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IChallenge",
+                    "resolved": "IChallenge",
+                    "references": {
+                        "IChallenge": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenge-card/src/utils/types.ts::IChallenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Challenge entity"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltipIndex": {},
+            "timeLeft": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/casino-challenge-card/index.js

@@ -0,0 +1 @@
+export { CasinoChallengeCard } from './casino-challenge-card';

package/dist/collection/index.js

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

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

@@ -0,0 +1,90 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        totalLevels: 'Total levels:',
+        level1: 'Level 1:',
+        get: 'Get:',
+        endsIn: 'Ends In',
+        expired: 'Expired',
+        viewDetails: 'View details',
+        placeBetsOf: 'Place bets of',
+        place: 'Place',
+        bet: 'bet',
+        bets: 'bets'
+    },
+    ro: {
+        totalLevels: 'Niveluri totale:',
+        level1: 'Nivel 1:',
+        get: 'Obține:',
+        endsIn: 'Se termină în',
+        expired: 'Expirat',
+        viewDetails: 'Vezi detalii',
+        placeBetsOf: 'Plasează pariuri de',
+        place: 'Plasare',
+        bet: 'pariu',
+        bets: 'pariuri'
+    },
+    fr: {
+        totalLevels: 'Niveaux totaux :',
+        level1: 'Niveau 1 :',
+        get: 'Obtenir :',
+        endsIn: 'Se termine dans',
+        expired: 'Expiré',
+        viewDetails: 'Voir les détails',
+        placeBetsOf: 'Placez des paris de',
+        place: 'Placer',
+        bet: 'pari',
+        bets: 'paris'
+    },
+    ar: {
+        totalLevels: 'إجمالي المستويات:',
+        level1: 'المستوى 1:',
+        get: 'احصل على:',
+        endsIn: 'ينتهي في',
+        expired: 'منتهي الصلاحية',
+        viewDetails: 'عرض التفاصيل',
+        placeBetsOf: 'قم بوضع رهانات بقيمة',
+        place: 'ضع',
+        bet: 'رهان',
+        bets: 'رهانات'
+    },
+    hr: {
+        totalLevels: 'Ukupno razina:',
+        level1: 'Razina 1:',
+        get: 'Dobiti:',
+        endsIn: 'Završava za',
+        expired: 'Isteklo',
+        viewDetails: 'Pogledaj detalje',
+        placeBetsOf: 'Postavite oklade od',
+        place: 'Postavi',
+        bet: 'kladnja',
+        bets: 'kladnje'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+export const getTranslations = (data) => {
+    Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+            TRANSLATIONS[item][key] = data[item][key];
+        }
+    });
+};
+export const resolveTranslationUrl = async (translationUrl) => {
+    if (translationUrl) {
+        try {
+            const response = await fetch(translationUrl);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const translations = await response.json();
+            getTranslations(translations);
+        }
+        catch (error) {
+            console.error('Failed to fetch or parse translations from URL:', error);
+        }
+    }
+};

package/dist/collection/utils/types.js

@@ -0,0 +1,40 @@
+export var EChallengeLevelTargetType;
+(function (EChallengeLevelTargetType) {
+    EChallengeLevelTargetType[EChallengeLevelTargetType["Accumulative"] = 0] = "Accumulative";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["SingleBet"] = 1] = "SingleBet";
+    EChallengeLevelTargetType[EChallengeLevelTargetType["MultipleOneBetSize"] = 2] = "MultipleOneBetSize";
+})(EChallengeLevelTargetType || (EChallengeLevelTargetType = {}));
+export var EChallengeRecurrenceType;
+(function (EChallengeRecurrenceType) {
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Single"] = 0] = "Single";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Daily"] = 1] = "Daily";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Weekly"] = 2] = "Weekly";
+    EChallengeRecurrenceType[EChallengeRecurrenceType["Monthly"] = 3] = "Monthly";
+})(EChallengeRecurrenceType || (EChallengeRecurrenceType = {}));
+export var EChallengeRewardType;
+(function (EChallengeRewardType) {
+    EChallengeRewardType[EChallengeRewardType["FreeSpins"] = 0] = "FreeSpins";
+    EChallengeRewardType[EChallengeRewardType["LuckyWheel"] = 1] = "LuckyWheel";
+    EChallengeRewardType[EChallengeRewardType["Leaderboard"] = 2] = "Leaderboard";
+    EChallengeRewardType[EChallengeRewardType["Challenge"] = 3] = "Challenge";
+    EChallengeRewardType[EChallengeRewardType["Custom"] = 4] = "Custom";
+})(EChallengeRewardType || (EChallengeRewardType = {}));
+export var EChallengeStatus;
+(function (EChallengeStatus) {
+    EChallengeStatus[EChallengeStatus["Setup"] = 0] = "Setup";
+    EChallengeStatus[EChallengeStatus["Active"] = 1] = "Active";
+    EChallengeStatus[EChallengeStatus["Paused"] = 2] = "Paused";
+    EChallengeStatus[EChallengeStatus["Closed"] = 3] = "Closed";
+    EChallengeStatus[EChallengeStatus["Deleted"] = 4] = "Deleted";
+})(EChallengeStatus || (EChallengeStatus = {}));
+export var EChallengeTriggerType;
+(function (EChallengeTriggerType) {
+    EChallengeTriggerType[EChallengeTriggerType["GameLaunch"] = 0] = "GameLaunch";
+    EChallengeTriggerType[EChallengeTriggerType["Reward"] = 1] = "Reward";
+    EChallengeTriggerType[EChallengeTriggerType["Manual"] = 2] = "Manual";
+})(EChallengeTriggerType || (EChallengeTriggerType = {}));
+export var EChallengeValidityType;
+(function (EChallengeValidityType) {
+    EChallengeValidityType[EChallengeValidityType["Period"] = 0] = "Period";
+    EChallengeValidityType[EChallengeValidityType["Date"] = 1] = "Date";
+})(EChallengeValidityType || (EChallengeValidityType = {}));

package/dist/collection/utils/utils.js

@@ -0,0 +1,20 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export function getTimeLeft(endTime) {
+    const now = new Date();
+    const end = new Date(endTime);
+    let diff = end.getTime() - now.getTime();
+    if (diff <= 0) {
+        return;
+    }
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    diff -= days * (1000 * 60 * 60 * 24);
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    diff -= hours * (1000 * 60 * 60);
+    const minutes = Math.floor(diff / (1000 * 60));
+    diff -= minutes * (1000 * 60);
+    const seconds = Math.floor(diff / 1000);
+    const pad = (n) => n.toString().padStart(2, '0');
+    return `${pad(days)} : ${pad(hours)} : ${pad(minutes)} : ${pad(seconds)}`;
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };