@everymatrix/bonus-powerups-ingame-games 0.0.1

package/dist/collection/components/bonus-powerups-ingame-games/bonus-powerups-ingame-games.js

@@ -0,0 +1,335 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { powerUpGameSearchConditions } from "../../utils/constants";
+import "../../../../../ui-image/dist/types/index";
+import ReturnSvg from "../../assets/return.svg";
+import { translate } from "../../utils/locale.utils";
+export class BonusPowerupsIngameGames {
+    constructor() {
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.powerupId = undefined;
+        this.isLoadingGames = false;
+        this.powerUpGames = { items: [], total: 0 };
+        this.powerUp = undefined;
+        this.limit = 30;
+    }
+    initializeGamesObserver() {
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+        this.loadMoreGamesObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadMoreGames().catch(console.error);
+                }
+            });
+        });
+        if (this.lastGameElement) {
+            this.loadMoreGamesObserver.observe(this.lastGameElement);
+        }
+    }
+    async loadMoreGames() {
+        var _a, _b, _c, _d;
+        if (this.isLoadingGames || (this.powerUpGames.total > 0 && this.powerUpGames.items.length >= this.powerUpGames.total)) {
+            return;
+        }
+        this.isLoadingGames = true;
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.abortController = new AbortController();
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups/available?pagination=games(limit=${this.limit},offset=${((_b = (_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) || 0})`);
+            const options = {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-SessionId': this.session
+                },
+                method: 'GET',
+                signal: this.abortController.signal
+            };
+            url.searchParams.append('filter', `id=${this.powerupId}`);
+            Object.entries(powerUpGameSearchConditions).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 res = await response.json();
+            this.powerUp = res.data[0];
+            const newGames = ((_c = this.powerUp.games) === null || _c === void 0 ? void 0 : _c.items) || [];
+            this.powerUpGames = {
+                items: [...this.powerUpGames.items, ...newGames],
+                total: ((_d = this.powerUp.games) === null || _d === void 0 ? void 0 : _d.total) || this.powerUpGames.total
+            };
+        }
+        catch (e) {
+            if (e.name !== 'AbortError') {
+                console.error('Failed to load more games:', e);
+            }
+        }
+        finally {
+            if (!this.abortController.signal.aborted) {
+                this.isLoadingGames = false;
+            }
+        }
+    }
+    onGameClick(game) {
+        window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } });
+    }
+    componentDidUpdate() {
+        if (this.powerUpGames.items.length < this.powerUpGames.total) {
+            this.initializeGamesObserver();
+        }
+    }
+    render() {
+        var _a, _b;
+        return h("div", { key: '0d034307e070a8ba1d88303c3e3093ba567444b2', class: 'IngamePowerUpGamesContainer', ref: (el) => (this.stylingContainer = el) }, h("div", { key: '7b01f05d91d274da4ae0de3fc63e55927946b095', class: 'TopBar' }, h("div", { key: 'f8664bf99bb12513f281fe67ee24cd0794d9ba66', class: 'ReturnIcon CircleLinearBorder', onClick: this.backFromPowerupGamesEvent.emit, innerHTML: ReturnSvg }), this.powerUp &&
+            h("div", { key: '56083e9dfbc469875b0448f471c455ef8e1fb613', class: 'Title TextContent' }, h("span", { key: '6cde7a32b98c4f8d240cfda6f715e2d3fd4b0a25', class: 'Name' }, this.powerUp.displayName), " /", h("div", { key: 'a2045a41ad40665fa553b7f1e2a25628344188fc', class: 'Label' }, translate('games', this.language)), h("div", { key: 'a2cc2c8a5ebb29b097da802984099860410e0c25', class: 'GamesTotal' }, "( ", this.powerUpGames.total || '', " )"))), h("div", { key: 'b335d598aeea740b4e4a2e58a4061bf092abb773', class: 'GamesWrapper Card ' }, this.isLoadingGames && this.powerUpGames.items.length === 0 &&
+            h("div", { key: 'fced976e5554f7864fcf8755494c0cfd74f19a0f', class: 'Loading' }, h("div", { key: '8653c05c761078e11d6c060e5f1d519a133f2d8a', class: 'smart-loader' }, h("div", { key: '4404881893636a48de508d95ab8d6bd09d05acae', class: "smart-item" }), h("div", { key: '8aeafd883609d5840f7603b58300ee9c9350746c', class: "smart-item" }), h("div", { key: 'ded309b5a38d7775c27b3b38dd78746caf5aa557', class: "smart-item" }))), !this.isLoadingGames && !this.powerUp ?
+            h("div", { class: 'NoData' }, translate('noDataFound', this.language), " ")
+            :
+                h("div", { class: 'CircleInner GamesList' }, h("div", { class: 'Games FlexRow' }, this.powerUpGames.total > 0 &&
+                    this.powerUpGames.items.map((g, index) => {
+                        const isLastItem = index === this.powerUpGames.items.length - 1;
+                        return h("div", { class: 'Game', ref: isLastItem ? (el) => (this.lastGameElement = el) : null }, h("ui-image", { src: g.thumbnail, alt: g.name }), h("div", { class: 'GameMask', onClick: this.onGameClick.bind(this, g) }, h("div", { class: 'GameStartBtn' }, h("div", { class: 'PlayIcon' }), h("span", null, translate('playNow', this.language)))));
+                    }), this.isLoadingGames && ((_b = (_a = this.powerUpGames) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) > this.limit &&
+                    h("p", { class: 'LoadingMore' }, translate('loadingMore', this.language))))));
+    }
+    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.loadMoreGames();
+    }
+    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();
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        if (this.loadMoreGamesObserver) {
+            this.loadMoreGamesObserver.disconnect();
+        }
+    }
+    static get is() { return "bonus-powerups-ingame-games"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bonus-powerups-ingame-games.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bonus-powerups-ingame-games.css"]
+        };
+    }
+    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
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-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
+            },
+            "powerupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "powerup-id",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoadingGames": {},
+            "powerUpGames": {},
+            "powerUp": {},
+            "limit": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "backFromPowerupGamesEvent",
+                "name": "backFromPowerupGames",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }];
+    }
+}

package/dist/collection/components/bonus-powerups-ingame-games/index.js

@@ -0,0 +1 @@
+export { BonusPowerupsIngameGames } from './bonus-powerups-ingame-games';

package/dist/collection/index.js

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

package/dist/collection/utils/constants.js

@@ -0,0 +1,4 @@
+export const powerUpGameSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,powerUpName,displayName,games(id,gameId,slug,name,thumbnail)"
+};

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

@@ -0,0 +1,38 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        playNow: 'Play Now',
+        games: 'Games',
+        noDataFound: 'No data found',
+        loading: 'Loading',
+        loadingMore: 'Loading More'
+    }
+};
+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,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 };