@everymatrix/bonus-powerups-ingame-list 0.0.1

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

@@ -0,0 +1,436 @@
+import { h } from "@stencil/core";
+import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
+import { getTranslations, translate } from "../../utils/locale.utils";
+import { BoostingPeriodMode, MultiplierMode, PowerUpStatus } from "../../../../../../../../libs/common/src/types/casino/powerups";
+import { getActivedExpireTime, powerUpWithoutGamesSearchConditions } from "../../utils/utils";
+import CloseSvg from "../assets/close.svg";
+import EnergySvg from "../assets/energe.svg";
+import FireSvg from "../assets/fire.svg";
+import ClockSvg from "../assets/clock.svg";
+import DetailArrow from "../assets/double-right.svg";
+import InfoSvg from "../assets/Info-circle.svg";
+import moment from "moment";
+export class BonusPowerupsIngameList {
+    constructor() {
+        this.mbSource = undefined;
+        this.clientStyling = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = undefined;
+        this.language = 'en';
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.limit = 10;
+        this.isLoading = true;
+        this.isActivating = false;
+        this.powerups = [];
+        this.isPowering = false;
+    }
+    reloadPowerupsHandler() {
+        this.loadData();
+    }
+    powerupTimeCountDownHandler(e) {
+        if (e.detail.timeLeft <= 0) {
+            this.loadData();
+            return;
+        }
+    }
+    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=0,limit=${this.limit}`);
+            const options = {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-SessionId': this.session
+                },
+                method: 'GET',
+                signal: this.abortController.signal
+            };
+            Object.entries(powerUpWithoutGamesSearchConditions).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            url.searchParams.append('language', this.language);
+            const response = await fetch(url, options);
+            if (!response.ok) {
+                window.postMessage({ type: 'errorWhenLoadPowerups', status: response.status });
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const { data } = await response.json();
+            this.powerups = data;
+            this.isPowering = this.powerups.filter(e => e.status === PowerUpStatus.ACTIVATED).length > 0;
+            this.powerupsLoadEvent.emit({ powerups: this.powerups });
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                console.error("Failed to load powerups:", error);
+            }
+        }
+        finally {
+            if (!this.abortController.signal.aborted) {
+                this.isLoading = false;
+            }
+        }
+    }
+    async activePowerUp(powerUp) {
+        if (!this.endpoint || !this.session || this.isActivating || this.isPowering) {
+            return;
+        }
+        this.isActivating = true;
+        this.powerups.forEach(p => {
+            if (p.id === powerUp.id) {
+                p.status = PowerUpStatus.ACTIVATING;
+            }
+        });
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+        this.abortController = new AbortController();
+        try {
+            const url = new URL(`${this.endpoint}/v1/elevate/activatepowerup`);
+            let options = {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-SessionId': this.session
+                },
+                method: 'PUT',
+                signal: this.abortController.signal,
+                body: JSON.stringify({ powerUpId: powerUp.id })
+            };
+            const response = await fetch(url.href, options);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const res = await response.json();
+            if (res === null || res === void 0 ? void 0 : res.success) {
+                powerUp = Object.assign(Object.assign({}, powerUp), { status: PowerUpStatus.ACTIVATED, activatedAt: moment(new Date()).format('YYYY-MM-DD HH:mm:ssZ') });
+                const activedIdx = this.powerups.findIndex((e) => e.id === powerUp.id);
+                this.powerups[activedIdx] = Object.assign({}, powerUp);
+                this.powerups = [...this.powerups];
+                this.isPowering = true;
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+        finally {
+            if (!this.abortController.signal.aborted) {
+                this.isActivating = false;
+            }
+        }
+    }
+    onClose() {
+        this.closePowerupsEvent.emit({ powerups: this.powerups });
+    }
+    showDetail(id) {
+        this.showDetailsEvent.emit({ id });
+    }
+    render() {
+        return (h("div", { key: 'eedb6e5b3bfca30d017bb077e4bf41001f1e07d7', class: 'IngamePowerUpsContainer', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'bfd1a61b883761d084057f4d2fee8473198b6cea', class: 'TopBar' }, h("span", { key: 'a3a0b4a6d4249d331cf9d4dc36ef07253d820758', class: 'BarTitle' }, translate('powerups', this.language)), h("div", { key: '0be0d805aaaaa5982e8243c227d3f49d4371fb33', class: 'IconBtn CircleLinearBorder', onClick: this.onClose.bind(this), innerHTML: CloseSvg })), this.isLoading
+            ? h("smart-loader", null)
+            : h("div", { class: 'Cards' }, this.isPowering &&
+                h("div", { class: 'Card PoweringDesc' }, h("div", { class: 'FlexRow' }, h("div", { class: 'Icon', innerHTML: InfoSvg }), h("div", { class: 'Text' }, translate('poweringTooltip', this.language)))), this.powerups.map(powerup => h("div", { class: 'Card' }, h("div", { class: 'PowerupTitle FlexRow' }, h("div", { class: 'LeftOfRow' }, h("div", { class: 'EnergyIcon', innerHTML: EnergySvg }), h("div", { class: 'Name' }, powerup.powerUpName)), h("div", { class: 'DetailIcon', onClick: this.showDetail.bind(this, powerup.id) }, h("div", { class: 'IconBtn CircleLinearBorder', innerHTML: DetailArrow }))), h("div", { class: 'ExpireTime Status CircleLinearBorder' }, powerup.status === PowerUpStatus.ACTIVATED
+                ? h("time-count", { language: this.language, "expire-time": getActivedExpireTime(powerup) })
+                : h("time-count", { language: this.language, "expire-time": powerup.expireTime })), h("div", { class: 'MultiplierInfo FlexRow' }, h("div", { class: 'LeftOfRow' }, h("div", { class: 'MultiplierIcon', innerHTML: FireSvg }), h("div", { class: 'MultiplierValue' }, powerup.multiplier.coefficient, "x "), h("div", { class: 'MultiplierMode' }, powerup.multiplier.mode === MultiplierMode.COINS ? translate('coins', this.language) : translate('xp', this.language)), h("div", { class: 'MultiplierIcon', innerHTML: ClockSvg }), h("div", { class: 'MultiplierValue' }, powerup.boostingPeriod[powerup.boostingPeriod.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS ? 'numberOfRounds' : 'minutes']), h("div", { class: 'MultiplierMode' }, powerup.boostingPeriod.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS ? translate('rounds', this.language) : translate('minutes', this.language))), (powerup.status === PowerUpStatus.ACTIVE || powerup.status === PowerUpStatus.ACTIVATING) &&
+                h("div", { class: `ActiveBtn CircleLinearBorder ${this.isPowering ? 'Disabled' : ''} ${this.isActivating ? 'Activating' : ''}`, onClick: this.activePowerUp.bind(this, powerup) }, h("div", { class: 'content' }, " ", translate('activate', 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);
+        }
+    }
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    async componentWillLoad() {
+        if (this.translationUrl) {
+            await getTranslations(this.translationUrl);
+        }
+        this.loadData();
+    }
+    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();
+    }
+    static get is() { return "bonus-powerups-ingame-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bonus-powerups-ingame-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bonus-powerups-ingame-list.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
+            },
+            "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
+            },
+            "limit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "limit",
+                "reflect": true,
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isLoading": {},
+            "isActivating": {},
+            "powerups": {},
+            "isPowering": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "showDetailsEvent",
+                "name": "showPowerupDetails",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "powerupsLoadEvent",
+                "name": "powerupsLoad",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "closePowerupsEvent",
+                "name": "closePowerupsList",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "session",
+                "methodName": "loadData"
+            }, {
+                "propName": "endpoint",
+                "methodName": "loadData"
+            }, {
+                "propName": "limit",
+                "methodName": "loadData"
+            }, {
+                "propName": "language",
+                "methodName": "loadData"
+            }, {
+                "propName": "clientStyling",
+                "methodName": "handleClientStylingChange"
+            }, {
+                "propName": "clientStylingUrl",
+                "methodName": "handleClientStylingUrlChange"
+            }, {
+                "propName": "mbSource",
+                "methodName": "handleMbSourceChange"
+            }, {
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "reloadPowerups",
+                "method": "reloadPowerupsHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "powerupTimeCountDown",
+                "method": "powerupTimeCountDownHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,143 @@
+import { h } from "@stencil/core";
+import moment from "moment";
+import { translate } from "../../utils/locale.utils";
+export class TimeCount {
+    constructor() {
+        this.expireTime = undefined;
+        this.language = 'en';
+        this.displayTime = undefined;
+        this.isExpireInDay1 = false;
+        this.timeLeft = undefined;
+    }
+    componentWillLoad() {
+        this.timer = setInterval(() => this.updateDisplayTime(), 1000);
+        this.updateDisplayTime();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    timeLeftChanged() {
+        if (this.timeLeft > 0) {
+            return;
+        }
+        this.timeCountDownEvent.emit({ type: 'powerupTimeCountDown', timeLeft: this.timeLeft });
+    }
+    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));
+        this.isExpireInDay1 = true; //duration.asDays() > 1;
+        this.timeLeft = duration.asMinutes();
+        // 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())} ${translate('days', this.language)}`;
+        }
+        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 [
+            this.isExpireInDay1 &&
+                h("span", { key: '11ec5e6887c3e0b3e3178f8323f9a7937a855651', class: 'Label' }, translate('expiresIn', this.language), " "),
+            h("span", { key: 'bbaee9a13552ae932823245d6dc99a5ebd494e46', class: 'TimeCountDown' }, 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
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'en'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayTime": {},
+            "isExpireInDay1": {},
+            "timeLeft": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timeCountDownEvent",
+                "name": "powerupTimeCountDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "timeLeft",
+                "methodName": "timeLeftChanged"
+            }, {
+                "propName": "expireTime",
+                "methodName": "startTimeChanged"
+            }];
+    }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,44 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        powerups: 'Power-ups',
+        activate: 'Activate',
+        expiresIn: 'Expires in - ',
+        xp: 'Points',
+        coins: 'Coins',
+        minutes: 'min',
+        rounds: 'rounds',
+        days: 'Days',
+        nothingHere: 'Nothing here -- yet!',
+        noPowerUps: 'No power-ups have been used at the moment.',
+        poweringTooltip: 'Power-ups are currently unavailable as you have already activated one power-up. Only one power-up can be active at a time.'
+    }
+};
+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,21 @@
+import { PowerUpStatus } from "../../../../../../../libs/common/src/types/casino/powerups";
+import moment from "moment";
+export const powerUpWithoutGamesSearchConditions = {
+    fields: "id,powerUpID,displayName,termsUrl,description,status,multiplier,boostingPeriod,currentTime,expireTime,activatedAt",
+    status: `${PowerUpStatus.ACTIVE},${PowerUpStatus.ACTIVATED}`
+};
+export const powerUpSearchConditions = {
+    expand: "games",
+    fields: "id,powerUpID,displayName,termsUrl,description,status,multiplier,boostingPeriod,currentTime,expireTime,activatedAt,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)"
+};
+export const getActivedExpireTime = (powerUp) => {
+    if (!powerUp.activatedAt || powerUp.status != PowerUpStatus.ACTIVATED) {
+        return powerUp.expireTime;
+    }
+    return moment(powerUp.activatedAt).add(powerUp.boostingPeriod.minutes, 'minute').format('YYYY-MM-DDTHH:mm:ssZ');
+};

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

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