@everymatrix/casino-challenges-overlay 0.0.1

package/dist/collection/components/casino-challenges-overlay/casino-challenges-overlay.js

@@ -0,0 +1,265 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import bgIcon from "../../assets/bg-icon.svg";
+import bellIcon from "../../assets/bell.svg";
+import giftIcon from "../../assets/gift.svg";
+import { resolveTranslationUrl, translate } from "../../utils/locale.utils";
+export class CasinoChallengesOverlay {
+    constructor() {
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.language = 'en';
+        this.progress = 50;
+        this.isGrayed = false;
+        this.isNew = false;
+        this.isGift = false;
+        this.isNotification = false;
+    }
+    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);
+        }
+    }
+    componentWillLoad() {
+        if (this.translationUrl) {
+            resolveTranslationUrl(this.translationUrl);
+        }
+    }
+    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() {
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+    }
+    getCapsuleDotPosition(progress, width = 55, height = 32, borderWidth = 3) {
+        if (progress <= 0 || progress >= 100)
+            return null;
+        const r = (height - borderWidth) / 2;
+        const straight = width - 2 * r;
+        const arcLength = Math.PI * r;
+        const segments = [
+            {
+                type: 'arc',
+                length: arcLength / 2,
+                startTheta: Math.PI,
+                endTheta: Math.PI + 1.6,
+                cx: r + borderWidth / 2,
+                cy: height / 2
+            },
+            {
+                type: 'line',
+                length: straight,
+                x0: r + borderWidth / 2,
+                y0: borderWidth / 2,
+                x1: width - r - borderWidth / 2,
+                y1: borderWidth / 2
+            },
+            {
+                type: 'arc',
+                length: arcLength,
+                startTheta: -Math.PI / 2,
+                endTheta: Math.PI / 2,
+                cx: width - r - borderWidth / 2,
+                cy: height / 2
+            },
+            {
+                type: 'line',
+                length: straight,
+                x0: width - r - borderWidth / 2,
+                y0: height - borderWidth / 2,
+                x1: r + borderWidth / 2,
+                y1: height - borderWidth / 2
+            },
+            {
+                type: 'arc',
+                length: arcLength / 2,
+                startTheta: Math.PI / 2,
+                endTheta: Math.PI,
+                cx: r + borderWidth / 2,
+                cy: height / 2
+            }
+        ];
+        const perimeter = segments.reduce((sum, s) => sum + s.length, 0);
+        const L = (progress / 100) * perimeter;
+        let traveled = 0;
+        let x = 0;
+        let y = 0;
+        for (const seg of segments) {
+            if (L <= traveled + seg.length) {
+                const t = (L - traveled) / seg.length;
+                if (seg.type === 'line') {
+                    x = seg.x0 + t * (seg.x1 - seg.x0);
+                    y = seg.y0 + t * (seg.y1 - seg.y0);
+                }
+                else if (seg.type === 'arc') {
+                    const theta = seg.startTheta + t * (seg.endTheta - seg.startTheta);
+                    x = seg.cx + r * Math.cos(theta);
+                    y = seg.cy + r * Math.sin(theta);
+                }
+                break;
+            }
+            traveled += seg.length;
+        }
+        return { x, y };
+    }
+    renderBadgeContent() {
+        if (this.isNew)
+            return h("div", { class: "gradient-text" }, translate('new', this.language));
+        const icon = this.isGift ? giftIcon : this.isNotification ? bellIcon : null;
+        if (icon)
+            return h("img", { class: "icon", src: icon });
+        return h("div", { class: "gradient-text" }, "1");
+    }
+    render() {
+        const dot = this.getCapsuleDotPosition(this.progress);
+        return (h("div", { key: '7af8930a4a36a295e68f38f3c30ae7543b8cc12d', class: "container" }, h("div", { key: '27d77b134ecd3a27309f1e5d84b9c1bd2bbf8bcb', class: `circle ${this.isGrayed ? 'grayed' : ''}`, style: {
+                '--progress': `${this.progress}%`
+            } }, h("img", { key: '42486b790d0c33022c2a4acb0ef2ad9b618a1fc2', class: "circle__img", src: bgIcon }), h("div", { key: 'eba633711d409a63ef91621759029d82b64a96b7', class: "circle__content" }, h("span", { key: 'fe466e281f00b217aae2c44be730131e1349eaa3' }, this.progress, "%")), dot && (h("div", { key: 'b76218c1769e78fd165f9a3b0e311ec16dfc67ed', class: "dot", style: {
+                left: `${dot.x}px`,
+                top: `${dot.y}px`
+            } }))), !this.isGrayed && h("div", { key: '59049b68efc9649973521afb1b05caa11a14a3b4', class: `badge ${this.isNew ? 'new' : ''}` }, this.renderBadgeContent())));
+    }
+    static get is() { return "casino-challenges-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["casino-challenges-overlay.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["casino-challenges-overlay.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'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "progress": {},
+            "isGrayed": {},
+            "isNew": {},
+            "isGift": {},
+            "isNotification": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/casino-challenges-overlay/index.js

@@ -0,0 +1 @@
+export { CasinoChallengesOverlay } from './casino-challenges-overlay';

package/dist/collection/index.js

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

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

@@ -0,0 +1,36 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        new: 'new'
+    },
+    ro: {},
+    fr: {},
+    ar: {},
+    hr: {}
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && lang in TRANSLATIONS ? 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/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

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

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