@everymatrix/casino-challenge-details 0.0.1

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

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

package/dist/collection/components/components/casino-challenge-expandable-paragraph.css

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+}
+
+.container {
+  position: relative;
+  max-width: 100%;
+}
+
+.paragraph {
+  overflow: hidden;
+  position: relative;
+  transition: max-height 0.3s ease;
+  line-height: 1.5em;
+  word-break: break-word;
+}
+
+.truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.3s;
+}
+
+.expanded {
+  max-height: none !important;
+  overflow: visible;
+}
+
+.expand-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  height: 30px;
+  pointer-events: none;
+}
+
+.overlay-fade {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  z-index: 0;
+}
+
+.expand-overlay .control-link {
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+  margin-bottom: 4px;
+}
+
+.collapse-container {
+  text-align: center;
+  margin-top: 12px;
+  background: linear-gradient(166deg, rgba(23, 24, 23, 0.7) 9.98%, #171817 89.76%);
+  backdrop-filter: blur(0.5px);
+  width: 100%;
+  height: 26px;
+}
+.collapse-container.is-expanded {
+  backdrop-filter: none;
+  background: transparent;
+}
+
+.control-link {
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--emw--font-size-sm, 14px);
+  text-decoration: none;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}

package/dist/collection/components/components/casino-challenge-expandable-paragraph.js

@@ -0,0 +1,116 @@
+import { h } from "@stencil/core";
+import activeChevron from "../../assets/active-chevron.svg";
+import inActiveChevron from "../../assets/inactive-chevron.svg";
+export class CasinoChallengeExpandableParagraph {
+    constructor() {
+        this.handleResize = () => {
+            this.evaluateLayout();
+        };
+        this.evaluateLayout = () => {
+            const content = this.contentEl;
+            const isSmall = window.innerWidth <= 860;
+            this.isSmallScreen = isSmall;
+            if (isSmall && content.scrollHeight > this.maxHeight) {
+                this.needsTruncation = true;
+            }
+            else {
+                this.needsTruncation = false;
+                this.expanded = false;
+            }
+        };
+        this.toggleExpand = () => {
+            this.expanded = true;
+        };
+        this.toggleCollapse = () => {
+            this.expanded = false;
+        };
+        this.expanded = false;
+        this.needsTruncation = false;
+        this.isSmallScreen = true;
+        this.maxHeight = 75;
+        this.active = false;
+    }
+    componentDidLoad() {
+        this.evaluateLayout();
+        window.addEventListener('resize', this.handleResize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    render() {
+        const shouldClamp = this.isSmallScreen && this.needsTruncation && !this.expanded;
+        return (h("div", { key: '1a560a834781449bfe9b3aee1779e3025134c986', class: "container" }, h("div", { key: 'e47f4cc53f0e07f968f231b4243636de1e5af16e', ref: (el) => (this.contentEl = el), class: {
+                paragraph: true,
+                truncated: shouldClamp,
+                expanded: this.expanded
+            }, style: shouldClamp ? { maxHeight: `${this.maxHeight}px` } : {} }, h("slot", { key: '15121a785a76f38fc7eb27966914fc0dcd447b4f' }), this.isSmallScreen && this.needsTruncation && (h("div", { key: '8f709a953cca5b578ed88bcc8520c1794bfcea04', class: "expand-overlay" }, h("div", { key: '50601d0d4f4de80c69ca8fef91b7433598ff008a', class: {
+                'collapse-container': true,
+                'is-expanded': this.expanded
+            } }, h("img", { key: '53c06703a49a157ab95f06692dfe35b8634dc3a3', class: "control-link", src: this.active ? activeChevron : inActiveChevron, onClick: this.expanded ? this.toggleCollapse : this.toggleExpand, style: {
+                position: 'absolute',
+                bottom: this.expanded ? '-15px' : '-5px',
+                transform: this.expanded ? 'rotate(180deg)' : '',
+                transition: 'all 0.3s'
+            } })))))));
+    }
+    static get is() { return "casino-challenge-expandable-paragraph"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-expandable-paragraph.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-expandable-paragraph.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-height",
+                "reflect": false,
+                "defaultValue": "75"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "needsTruncation": {},
+            "isSmallScreen": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/components/casino-challenge-level-progress-bar.css

@@ -0,0 +1,33 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.bar-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.bar-container {
+  position: relative;
+  width: 100%;
+  background: var(--emw--progress-background, rgba(188, 252, 177, 0.1019607843));
+  overflow: hidden;
+  box-shadow: 0 0 4px 0 #134629;
+  border-radius: 20px;
+  mix-blend-mode: luminosity;
+}
+.bar-container.active {
+  background: linear-gradient(90deg, rgba(30, 101, 79, 0.3) 0%, rgba(28, 141, 86, 0.3) 100%);
+  mix-blend-mode: normal;
+}
+
+.bar-fill {
+  height: 100%;
+  transition: width 0.4s ease-in-out;
+  background: linear-gradient(90deg, var(--emw--secondary-green, #1e654f) 0%, var(--emw--dark-green, #1c8d56) 100%);
+}
+.bar-fill.active {
+  background: var(--emw--progress-background-fill, linear-gradient(90deg, #1e654f 0%, #1c8d56 100%));
+}

package/dist/collection/components/components/casino-challenge-level-progress-bar.js

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class CasinoChallengeLevelProgressBar {
+    constructor() {
+        this.height = '8px';
+        this.active = true;
+        this.value = 0;
+    }
+    render() {
+        return (h(Host, { key: 'b8e61f34292f68ee181ebeb1459892b2a736aab2' }, h("div", { key: 'd7ed2ac70030b6842ca1a26f25cc8350c8ab6065', class: "bar-wrapper" }, h("div", { key: '797bc1b134e114a0a2e463ff62829e82f99a1c45', class: { 'bar-container': true, active: this.active }, style: { height: this.height } }, h("div", { key: '6ea2b651d63c1a75ab9e3a0c38cb6899dd2df707', class: { 'bar-fill': true, active: this.active }, style: { width: `${this.value}%` } })))));
+    }
+    static get is() { return "casino-challenge-level-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-level-progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-level-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "'8px'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+}

package/dist/collection/components/components/casino-challenge-progress-bar.css

@@ -0,0 +1,66 @@
+.progress {
+  background-color: var(--emw--progress-background, rgba(188, 252, 177, 0.1019607843));
+  border-radius: 100px;
+  height: 20px;
+  margin: 16px 0;
+  position: relative;
+  align-content: center;
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+.progress.paused {
+  opacity: 0.5;
+}
+.progress.grayed {
+  mix-blend-mode: luminosity;
+}
+.progress__placeholder {
+  height: 20px;
+}
+.progress__icon {
+  padding-top: 4px;
+}
+.progress__point {
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
+  color: var(--emw--color-gray-150, #c8d6ce);
+  font-weight: 700;
+  line-height: 19px;
+  top: 0;
+  height: 19px;
+  width: 19px;
+  border-radius: 50%;
+}
+.progress__point.start {
+  left: 0;
+  border: 2px solid var(--emw--button-background-primary-color, #18ce51);
+  background: linear-gradient(90deg, var(--emw--progress-active-level, #24aa4d) 0%, var(--emw--progress-active-level-secondary, #113f21) 100%);
+}
+.progress__point.end {
+  right: 0;
+  border: 2px solid var(--emw--dark-green, #1c8d56);
+  background: var(--emw--color-gray-300, #083b17);
+  opacity: 0.7;
+}
+.progress__point.finished {
+  opacity: 1;
+}
+.progress__point.hidden {
+  opacity: 0;
+}
+.progress__bar {
+  border-radius: 73px;
+  height: 16px;
+  background: linear-gradient(90deg, var(--emw--secondary-green, #1e654f) 0%, var(--emw--dark-green, #1c8d56) 100%);
+  text-align: end;
+  color: var(--emw--color-gray-50, #e2e2e2);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+  padding-right: 6px;
+  box-sizing: border-box;
+}
+.progress__bar.finished {
+  text-align: center;
+}

package/dist/collection/components/components/casino-challenge-progress-bar.js

@@ -0,0 +1,120 @@
+import { h, Host } from "@stencil/core";
+import { EChallengeProgressStatus, EChallengeStatus } from "../../utils/types";
+import { translate } from "../../utils/locale.utils";
+import trophyIcon from "../../assets/trophy.svg";
+import finishIcon from "../../assets/finish.svg";
+export class CasinoChallengeProgressBar {
+    constructor() {
+        this.challenge = undefined;
+        this.isUserAuthorized = undefined;
+        this.language = 'en';
+    }
+    get challengeProgress() {
+        var _a;
+        const currLevel = (_a = this.challenge) === null || _a === void 0 ? void 0 : _a.LevelProgresses.find((x) => x.ProgressStatus === EChallengeProgressStatus.InProgress);
+        if (!this.isUserAuthorized || !currLevel)
+            return null;
+        const { Status, LevelProgresses } = this.challenge;
+        if (Status === EChallengeStatus.Expired || Status === EChallengeStatus.Started) {
+            return null;
+        }
+        const barValue = Status === EChallengeStatus.Paused
+            ? translate('suspended', this.language)
+            : Status === EChallengeStatus.Completed
+                ? translate('finished', this.language)
+                : `${currLevel.ProgressPercentage}%`;
+        const isLastLevel = !LevelProgresses.some((x) => x.OrderNumber > currLevel.OrderNumber);
+        const secondImgSrc = Status === EChallengeStatus.Completed ? trophyIcon : isLastLevel ? finishIcon : '';
+        return (h("div", { class: {
+                progress: true,
+                paused: Status === EChallengeStatus.Paused,
+                grayed: Status === EChallengeStatus.Forfeited
+            } }, h("div", { class: {
+                progress__point: true,
+                start: true,
+                hidden: Status === EChallengeStatus.Completed
+            } }, currLevel.OrderNumber + 1), h("div", { class: {
+                progress__bar: true,
+                finished: Status === EChallengeStatus.Completed
+            }, style: { width: `${currLevel.ProgressPercentage}%` } }, barValue), h("div", { class: {
+                progress__point: true,
+                end: true,
+                finished: Status === EChallengeStatus.Completed
+            } }, secondImgSrc ? h("img", { class: "progress__icon", src: secondImgSrc }) : currLevel.OrderNumber + 2)));
+    }
+    render() {
+        return h(Host, { key: 'e75584687abe5ea34c8f1e3a66ca09fca73ba8ed' }, this.challengeProgress);
+    }
+    static get is() { return "casino-challenge-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenge-progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenge-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "challenge": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IChallenge",
+                    "resolved": "IChallenge",
+                    "references": {
+                        "IChallenge": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "../../../../packages/stencil/casino-challenge-details/src/utils/types.ts::IChallenge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "isUserAuthorized": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-user-authorized",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            }
+        };
+    }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,166 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'fr', 'ar', 'hr'];
+const TRANSLATIONS = {
+    en: {
+        title: 'Challenges',
+        totalLevels: 'Total levels:',
+        endsIn: 'Ends In',
+        expired: 'Expired',
+        placeBetsOf: 'Place bets of',
+        place: 'Place',
+        bet: 'bet',
+        bets: 'bets',
+        minBet: 'min bet',
+        forfeited: 'Forfeited',
+        finished: 'Finished',
+        suspended: 'Suspended',
+        completed: 'Completed',
+        start: 'Start',
+        resume: 'Resume',
+        pause: 'Pause',
+        join: 'Join to Start',
+        congrats: 'Congratulations!',
+        forfeitNotification: 'Unfortunately, your progress has been forfeited, and you are no longer eligible to continue this challenge. Check out other available challenges!',
+        completedNofitication: "You've successfully completed this challenge! Explore the next one and keep playing to earn more rewards!",
+        expiredNotification: "Unfortunately, this challenge has expired and is no longer available to complete. Try another one that’s still active!",
+        terms: "Terms & Conditions",
+        contribution: 'contribution',
+        endDate: 'End Date',
+        back: 'Back',
+        all: 'All Challenges'
+    },
+    ro: {
+        title: 'Provocări',
+        totalLevels: 'Niveluri totale:',
+        endsIn: 'Se termină în',
+        expired: 'Expirat',
+        placeBetsOf: 'Plasează pariuri de',
+        place: 'Plasare',
+        bet: 'pariu',
+        bets: 'pariuri',
+        minBet: 'pariu minim',
+        forfeited: 'Pierdut',
+        finished: 'Terminat',
+        suspended: 'Suspendat',
+        start: 'Start',
+        resume: 'Reia',
+        pause: 'Pauză',
+        join: 'Alătură-te pentru a începe',
+        congrats: "Felicitări!",
+        forfeitNotification: "Din păcate, progresul tău a fost abandonat și nu mai poți continua această provocare. Consultă celelalte provocări disponibile!",
+        completedNofitication: "Ai finalizat cu succes această provocare! Explorează următoarea și continuă să joci pentru a câștiga mai multe recompense!",
+        expiredNotification: "Din păcate, această provocare a expirat și nu mai este disponibilă pentru finalizare. Încearcă una care este încă activă!",
+        terms: "Termeni și condiții",
+        contribution: "contribuție",
+        endDate: "Data de încheiere",
+        back: "Înapoi",
+        all: "Toate Provocările"
+    },
+    fr: {
+        title: 'Défis',
+        totalLevels: 'Niveaux totaux :',
+        endsIn: 'Se termine dans',
+        expired: 'Expiré',
+        placeBetsOf: 'Placez des paris de',
+        place: 'Placer',
+        bet: 'pari',
+        bets: 'paris',
+        minBet: 'mise minimale',
+        forfeited: 'Forfait',
+        finished: 'Terminé',
+        suspended: 'Suspendu',
+        start: 'Démarrer',
+        resume: 'Reprendre',
+        pause: 'Pause',
+        join: 'Rejoindre pour commencer',
+        congrats: "Félicitations !",
+        forfeitNotification: "Malheureusement, votre progression a été abandonnée et vous n'êtes plus éligible pour continuer ce défi. Découvrez les autres défis disponibles !",
+        completedNofitication: "Vous avez réussi ce défi ! Découvrez le suivant et continuez à jouer pour gagner plus de récompenses !",
+        expiredNotification: "Malheureusement, ce défi a expiré et n’est plus disponible à compléter. Essayez-en un autre qui est encore actif !",
+        terms: "Termes et conditions",
+        contribution: "contribution",
+        endDate: "Date de fin",
+        back: "Retour",
+        all: "Tous les Défis"
+    },
+    ar: {
+        title: 'تحديات',
+        totalLevels: 'إجمالي المستويات:',
+        endsIn: 'ينتهي في',
+        expired: 'منتهي الصلاحية',
+        placeBetsOf: 'قم بوضع رهانات بقيمة',
+        place: 'ضع',
+        bet: 'رهان',
+        bets: 'رهانات',
+        minBet: 'الحد الأدنى للرهان',
+        forfeited: 'خاسر',
+        finished: 'منتهي',
+        suspended: 'معلق',
+        start: 'ابدأ',
+        resume: 'استئناف',
+        pause: 'إيقاف مؤقت',
+        join: 'انضم للبدء',
+        congrats: "تهانينا!",
+        forfeitNotification: "للأسف، تم التخلي عن تقدمك ولم تعد مؤهلاً لمتابعة هذا التحدي. تحقق من التحديات الأخرى المتاحة!",
+        completedNofitication: "لقد أكملت هذا التحدي بنجاح! استكشف التحدي التالي واستمر في اللعب للحصول على مزيد من الجوائز!",
+        expiredNotification: "للأسف، هذا التحدي انتهت صلاحيته ولم يعد متاحًا لإكماله. جرّب تحديًا آخر لا يزال نشطًا!",
+        terms: "الشروط والأحكام",
+        contribution: "مساهمة",
+        endDate: "تاريخ الانتهاء",
+        back: "عودة",
+        all: "جميع التحديات"
+    },
+    hr: {
+        title: 'Izazovi',
+        totalLevels: 'Ukupno razina:',
+        endsIn: 'Završava za',
+        expired: 'Isteklo',
+        placeBetsOf: 'Postavite oklade od',
+        place: 'Postavi',
+        bet: 'kladnja',
+        bets: 'kladnje',
+        minBet: 'minimalna oklada',
+        forfeited: 'Oduzeto',
+        finished: 'Završeno',
+        suspended: 'Suspendirano',
+        start: 'Počni',
+        resume: 'Nastavi',
+        pause: 'Pauza',
+        join: 'Pridruži se za početak',
+        congrats: "Čestitamo!",
+        forfeitNotification: "Nažalost, tvoj napredak je izgubljen i više nisi podoban nastaviti ovaj izazov. Pogledaj ostale dostupne izazove!",
+        completedNofitication: "Uspješno si završio ovaj izazov! Istraži sljedeći i nastavi igrati kako bi zaradio/la više nagrada!",
+        expiredNotification: "Nažalost, ovaj izazov je istekao i više nije dostupan za dovršavanje. Probaj neki drugi koji je još aktivan!",
+        terms: "Uvjeti i odredbe",
+        contribution: "doprinos",
+        endDate: "Datum završetka",
+        back: "Nazad",
+        all: "Svi Izazovi"
+    }
+};
+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);
+        }
+    }
+};