@everymatrix/bonus-elevate-powerups 0.0.1

package/dist/collection/components/bonus-elevate-powerups/bonus-elevate-powerups.js

@@ -0,0 +1,388 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { BoostingPeriodMode, MultiplierMode } from "../../../../../../../../libs/common/src/types/casino/powerups";
+import { translate } from "../../utils/locale.utils";
+import ClearSearch from "../../assets/clear-search.svg";
+import "../../../../../bonus-pagination-nav/dist/types/index";
+import "../../../../../ui-image/dist/types/index";
+import { powerUpGameSearchConditions, powerUpSearchConditions } from "../../utils/utils";
+export class BonusElevatePowerups {
+    constructor() {
+        this.tableId = 'powerups';
+        this.gameObservers = new Map();
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.pageSize = 20;
+        this.isLoading = true;
+        this.powerups = [];
+        this.offset = 0;
+        this.limit = this.pageSize;
+        this.total = undefined;
+    }
+    onReloadPageByType(e) {
+        const { limit, offset, tableId } = e.detail;
+        if (tableId !== this.tableId) {
+            return;
+        }
+        this.offset = offset;
+        this.limit = limit;
+    }
+    async loadData() {
+        if (!this.endpoint || !this.session) {
+            return;
+        }
+        this.isLoading = true;
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.abortController = new AbortController();
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups?pagination=offset=${this.offset},limit=${this.limit},games(limit=20,offset=0)`);
+            let options = {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-SessionId': this.session
+                },
+                method: 'GET',
+                signal: this.abortController.signal
+            };
+            Object.entries(powerUpSearchConditions).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            url.searchParams.append('language', this.language);
+            const response = await fetch(url, options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const { data, total } = await response.json();
+            this.powerups = data;
+            this.total = total;
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                console.error("Failed to load powerups history:", error);
+                window.postMessage({ type: 'peHistoryLoaderError', error });
+            }
+        }
+        finally {
+            if (!this.abortController.signal.aborted) {
+                this.isLoading = false;
+            }
+        }
+    }
+    onGamesHover(game) {
+        window.postMessage({ type: 'PowerUpHover', game }, '*');
+    }
+    async loadMoreGames(powerup) {
+        var _a;
+        if (powerup.games.items.length >= powerup.games.total) {
+            return; // All games already loaded
+        }
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups?pagination=games(limit=20,offset=${powerup.games.items.length})`);
+            const options = {
+                headers: { 'x-SessionId': this.session },
+            };
+            url.searchParams.append('filter', `powerUpID=${powerup.powerUpID}`);
+            Object.entries(powerUpGameSearchConditions).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            const response = await fetch(url.toString(), options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const { data } = await response.json();
+            // Find the powerup in the state and append the new games
+            const powerupIndex = this.powerups.findIndex(p => p.id === powerup.id);
+            if (powerupIndex !== -1) {
+                const updatedPowerup = Object.assign({}, this.powerups[powerupIndex]);
+                const fetchedPowerUp = data === null || data === void 0 ? void 0 : data[0];
+                if (fetchedPowerUp && ((_a = fetchedPowerUp.games) === null || _a === void 0 ? void 0 : _a.items)) {
+                    updatedPowerup.games.items = [...updatedPowerup.games.items, ...fetchedPowerUp.games.items];
+                    const newPowerups = [...this.powerups];
+                    newPowerups[powerupIndex] = updatedPowerup;
+                    this.powerups = newPowerups;
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to load more games:', error);
+        }
+    }
+    initializeGamesObserver(powerup) {
+        let observer = this.gameObservers.get(powerup.id);
+        if (observer) {
+            observer.disconnect();
+        }
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadMoreGames(powerup);
+                    observer.unobserve(entry.target);
+                    this.gameObservers.delete(powerup.id);
+                }
+            });
+        });
+        this.gameObservers.set(powerup.id, observer);
+        setTimeout(() => {
+            const lastGameElement = this.stylingContainer.querySelector(`.PowerUpItem[data-powerup-id="${powerup.id}"] .Game:last-child`);
+            if (lastGameElement) {
+                observer.observe(lastGameElement);
+            }
+        }, 200);
+    }
+    componentDidUpdate() {
+        this.powerups.forEach(powerup => {
+            var _a, _b;
+            if (((_a = powerup.games) === null || _a === void 0 ? void 0 : _a.items.length) < ((_b = powerup.games) === null || _b === void 0 ? void 0 : _b.total)) {
+                this.initializeGamesObserver(powerup);
+            }
+        });
+    }
+    render() {
+        return h("div", { key: 'b40ca849d3de46834e9c7b6dee8d275756921d07', class: `PowerUpsContainer`, ref: (el) => (this.stylingContainer = el) }, this.isLoading
+            ? h("p", null, "Loading...")
+            : !this.total ?
+                h("div", { class: 'EmptyPowerups' }, h("div", { class: 'Icon', innerHTML: ClearSearch }), h("span", { class: 'NoPowerTitle' }, translate('nothingHere', this.language)), h("span", null, translate('noPowerUps')), h("span", null, translate('gotoShop')), h("div", null))
+                : [h("div", { class: 'PowerUps' }, this.powerups.map(powerup => {
+                        var _a, _b;
+                        return h("div", { class: 'PowerUpItem Card', "data-powerup-id": powerup.id }, h("div", { class: 'CardLeft' }, h("div", { class: 'MainInfo' }, h("div", { class: 'DisplayName' }, " ", powerup.displayName || 'Title', " "), h("div", { class: 'Title2 PowerUpMultiplier' }, h("span", { class: 'BoostingPeriod' }, h("span", { class: 'Period' }, powerup.boostingPeriod.minutes || powerup.boostingPeriod.numberOfRounds, " "), powerup.boostingPeriod.mode === BoostingPeriodMode.TIME_PERIOD ? translate('min') : translate('rounds'), " "), h("span", { class: 'Multiplier' }, "| X", powerup.multiplier.coefficient, " "), h("span", { class: 'MultiplierMode' }, "| ", powerup.multiplier.mode === MultiplierMode.XP ? translate('xp') : translate('coins'), " "), "| ", h("span", { class: 'ExpireCount' }, " ", h("time-count", { "expire-time": powerup.expireTime }))), h("div", { class: 'Description' }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aperiam autem corporis est harum minus, nam neque nisi quibusdam quod reiciendis rerum saepe temporibus veritatis voluptas! Aperiam cupiditate optio rem?")), h("div", { class: 'TermsC' }, translate('termsCon', this.language))), h("div", { class: 'GamesContent CardRight' }, h("div", { class: 'GamesTitle' }, h("span", { class: 'Title2' }, " ", translate('games', this.language)), h("span", { class: 'GamesAmount' }, "( ", (_a = powerup.games) === null || _a === void 0 ? void 0 :
+                            _a.total, " )")), h("div", { class: 'GameTitleTip' }, translate('selectGameToActive', this.language)), h("div", { class: 'GamesList' }, h("div", { class: 'Games' }, (_b = powerup.games) === null || _b === void 0 ? void 0 : _b.items.map(g => {
+                            return h("div", { class: 'Game' }, h("ui-image", { src: g.thumbnail }), h("div", { class: 'GameMask', onClick: this.onGamesHover.bind(this, g) }, h("span", { class: 'PlayBtn' }, "Start Now!")));
+                        })))));
+                    })), h("div", { class: 'Pagination' }, this.total && this.total > this.limit &&
+                        h("bonus-pagination-nav", { offset: this.offset, limit: this.limit, "secondary-arrows-active": true, "table-id": this.tableId, total: this.total }))]);
+    }
+    handleDataConfigChange() {
+        this.loadData().catch(console.error);
+    }
+    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() {
+        this.loadData().catch(console.error);
+    }
+    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.abortController) {
+            this.abortController.abort();
+        }
+        this.stylingSubscription && this.stylingSubscription.unsubscribe();
+        this.gameObservers.forEach(obs => obs.disconnect());
+        this.gameObservers.clear();
+    }
+    static get is() { return "bonus-elevate-powerups"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bonus-elevate-powerups.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bonus-elevate-powerups.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "mbSource": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mb-source",
+                "reflect": true
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "page-size",
+                "reflect": true,
+                "defaultValue": "20"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "powerups": {},
+            "offset": {},
+            "limit": {},
+            "total": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "offset",
+                "methodName": "loadData"
+            }, {
+                "propName": "limit",
+                "methodName": "loadData"
+            }, {
+                "propName": "language",
+                "methodName": "loadData"
+            }, {
+                "propName": "session",
+                "methodName": "loadData"
+            }, {
+                "propName": "endpoint",
+                "methodName": "loadData"
+            }, {
+                "propName": "endpoint",
+                "methodName": "handleDataConfigChange"
+            }, {
+                "propName": "session",
+                "methodName": "handleDataConfigChange"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "reloadPageByType",
+                "method": "onReloadPageByType",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/bonus-elevate-powerups/index.js

@@ -0,0 +1 @@
+export { BonusElevatePowerups } from './bonus-elevate-powerups';

package/dist/collection/components/time-count/time-count.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+import moment from "moment";
+export class TimeCount {
+    constructor() {
+        this.expireTime = undefined;
+        this.displayTime = undefined;
+    }
+    componentWillLoad() {
+        this.timer = setInterval(() => this.updateDisplayTime(), 1000);
+        this.updateDisplayTime();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    startTimeChanged() {
+        // Reset the timer and update the display when the input time changes
+        clearInterval(this.timer);
+        this.timer = setInterval(() => this.updateDisplayTime(), 1000);
+        this.updateDisplayTime();
+    }
+    updateDisplayTime() {
+        const now = moment();
+        const start = moment(this.expireTime);
+        if (!start.isValid()) {
+            this.displayTime = 'Invalid date';
+            clearInterval(this.timer);
+            return;
+        }
+        const duration = moment.duration(start.diff(now));
+        // If the time has already passed
+        if (duration.asMilliseconds() <= 0) {
+            this.displayTime = '00:00:00';
+            clearInterval(this.timer);
+            return;
+        }
+        const hours = Math.floor(duration.asHours());
+        if (hours >= 48) {
+            this.displayTime = `${Math.floor(duration.asDays())} days`;
+        }
+        else if (hours >= 24) {
+            this.displayTime = '1 day';
+        }
+        else {
+            const h = hours;
+            const m = duration.minutes();
+            const s = duration.seconds();
+            this.displayTime = [h, m, s].map(val => String(val).padStart(2, '0')).join(':');
+        }
+    }
+    render() {
+        return h("span", { key: 'b242dc33814c57b4d72e2ef165dc116187e3312e' }, this.displayTime);
+    }
+    static get is() { return "time-count"; }
+    static get properties() {
+        return {
+            "expireTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expire-time",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayTime": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "expireTime",
+                "methodName": "startTimeChanged"
+            }];
+    }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,43 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        min: 'MIN',
+        rounds: 'Rounds',
+        coins: 'Coins',
+        xp: 'XP',
+        nothingHere: 'Nothing here -- yet!',
+        noPowerUps: 'No power-ups have been used at the moment.',
+        gotoShop: 'Go to shop to check power-ups availability.',
+        termsCon: 'Read full Terms & Conditions',
+        games: 'Games',
+        selectGameToActive: 'Select the game to activate power-up',
+    }
+};
+export const getTranslations = (url) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((lang) => {
+                if (!TRANSLATIONS[lang]) {
+                    TRANSLATIONS[lang] = {};
+                }
+                for (let key in data[lang]) {
+                    TRANSLATIONS[lang][key] = data[lang][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+export const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    return translation;
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,10 @@
+import { PowerUpStatus } from "../../../../../../../libs/common/src/types/casino/powerups";
+export const powerUpSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,displayName,termsUrl,description,status,multiplier,boostingPeriod,currentTime,expireTime,games(id,gameId,name,thumbnail,launchUrl)",
+    status: `${PowerUpStatus.ACTIVE},${PowerUpStatus.ACTIVATED}`
+};
+export const powerUpGameSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,games(id,gameId,name,thumbnail,launchUrl)"
+};

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

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