@everymatrix/bonus-powerups-ingame-list 0.0.25 → 0.0.26

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

@@ -9,6 +9,7 @@
 
 .IngamePowerUpsContainer {
   display: block;
+  transition: opacity 200ms ease-in-out;
   height: 100%;
   padding: var(--emw--ingame-power-container-padding, 8px);
   /* 内容区域样式 */
@@ -17,6 +18,10 @@
   width: 26px;
   height: 26px;
 }
+.IngamePowerUpsContainer .Hidden {
+  opacity: 0 !important;
+  display: none;
+}
 .IngamePowerUpsContainer .CircleLinearBorder {
   position: relative;
   border-radius: 20px;
@@ -46,6 +51,8 @@
   background: linear-gradient(0deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0666666667)), var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0666666667))), linear-gradient(35.22deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0)), var(--emw--ingame-color-white30, rgba(255, 255, 255, 0.5490196078)) 89.19%);
 }
 .IngamePowerUpsContainer .TopBar {
+  opacity: 1;
+  transition: all 0.5s ease-in-out;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -59,6 +66,8 @@
   vertical-align: middle;
 }
 .IngamePowerUpsContainer .Cards {
+  opacity: 1;
+  transition: all 0.5s ease-in-out;
   width: 100%;
   height: calc(100% - 70px);
   gap: 16px;
@@ -99,6 +108,15 @@
 .IngamePowerUpsContainer .Cards .Card .PowerupTitle {
   font-weight: bold;
 }
+.IngamePowerUpsContainer .Cards .Card .PowerupTitle .LeftOfRow {
+  width: calc(100% - 40px);
+}
+.IngamePowerUpsContainer .Cards .Card .PowerupTitle .Name {
+  width: calc(100% - 40px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 .IngamePowerUpsContainer .Cards .Card .MultiplierInfo {
   align-items: flex-end;
   height: 37.6px;
@@ -125,8 +143,6 @@
   width: max-content;
   height: 25px;
   backdrop-filter: blur(4.6px);
-  flex: none;
-  order: 1;
   flex-grow: 0;
   border: 0px solid;
   opacity: 1;
@@ -135,6 +151,13 @@
 .IngamePowerUpsContainer .Cards .Card .Status::before {
   background: linear-gradient(97.6deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.2)) 11.03%, var(--emw--ingame-color-white00, rgba(255, 255, 255, 0)) 95.17%), linear-gradient(0deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.2)), var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.2)));
 }
+.IngamePowerUpsContainer .Cards .Card .Status .InprogressLabel {
+  width: fit-content;
+  min-width: 100px;
+}
+.IngamePowerUpsContainer .Cards .Card .Status time-count {
+  min-width: 172px;
+}
 .IngamePowerUpsContainer .Cards .Card .Status time-count {
   background-color: var(--emw--ingame-color-black-middle, #020308);
   width: calc(100% - 4px);
@@ -146,7 +169,7 @@
   justify-content: center;
   padding: 2.2px;
   z-index: 1;
-  min-width: 172px;
+  padding-right: 10px;
 }
 .IngamePowerUpsContainer .Cards .Card .ActiveButton.Activating {
   background-color: var(--emw--ingame-color-white30, rgba(255, 255, 255, 0.3019607843));
@@ -155,9 +178,27 @@
 .IngamePowerUpsContainer .Cards .Card time-count .Label {
   margin-right: 5px;
 }
+.IngamePowerUpsContainer .Cards .Card time-count .InprogressLabel {
+  text-align: left;
+  width: fit-content;
+  padding: 0 5px;
+  border-radius: 18px;
+  border: 1px solid rgba(175, 165, 165, 0.5098039216);
+  line-height: 21px;
+  margin-right: 10px;
+}
+.IngamePowerUpsContainer .Cards .Card time-count .InprogressLabel .Icon {
+  height: 5px;
+  width: 5px;
+  background-color: var(--New-Indicator-Yellow, #FFB801);
+  border-radius: 3px;
+  display: inline-block;
+  margin-right: 5px;
+}
 .IngamePowerUpsContainer .Cards .Card time-count .TimeCountDown {
   letter-spacing: 1.5px;
   font-weight: bold;
+  text-transform: capitalize;
 }
 .IngamePowerUpsContainer .ActiveBtn {
   color: var(--emw--ingame-color-black, #090909);
@@ -191,7 +232,7 @@
   bottom: -1px;
   z-index: 1;
   border-radius: 18px;
-  background: linear-gradient(218deg, var(--emw--ingame-color-white60, rgba(255, 255, 255, 0.568627451)), var(--emw--ingame-color-white30, rgba(255, 255, 255, 0.3019607843))), linear-gradient(93deg, var(--emw--ingame-color-white60, rgba(255, 255, 255, 0.6588235294)) 33.61%, var(--emw--ingame-color-white60, rgba(255, 255, 255, 0.5411764706)) 89.19%);
+  background: linear-gradient(to top right, var(--emw--ingame-color-powerup-brightgreen, #00FA5A), var(--emw--ingame-color-powerup-brightblue, rgba(50, 237, 221, 0.8901960784)));
 }
 .IngamePowerUpsContainer .ActiveBtn .content {
   line-height: 1.6;

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

@@ -2,7 +2,7 @@ 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 { getActivedExpireTime, powerUpWithoutGamesSearchConditions, debounce } from "../../utils/utils";
 import CloseSvg from "../assets/close.svg";
 import EnergySvg from "../assets/energe.svg";
 import FireSvg from "../assets/fire.svg";
@@ -19,23 +19,41 @@ export class BonusPowerupsIngameList {
         this.language = 'en';
         this.endpoint = undefined;
         this.session = undefined;
-        this.limit = 10;
-        this.isLoading = true;
+        this.limit = 30;
+        this.isLoading = false;
         this.isActivating = false;
         this.powerups = [];
+        this.total = 0;
         this.isPowering = false;
+        this.showConfirmModal = false;
+        this.currentPowerup = undefined;
+        this.debouncedReload = debounce(this.reloadPowerups, 100);
     }
     reloadPowerupsHandler() {
-        this.loadData();
+        this.reloadPowerups();
+    }
+    activePowerupHandler(e) {
+        if (e.detail.id === this.currentPowerup.id) {
+            this.activePowerUp(this.currentPowerup);
+        }
+        this.showConfirmModal = false;
     }
     powerupTimeCountDownHandler(e) {
         if (e.detail.timeLeft <= 0) {
-            this.loadData();
+            this.reloadPowerups();
             return;
         }
     }
+    reloadPowerups() {
+        this.powerups = [];
+        this.total = 0;
+        this.loadData();
+    }
+    handleConfigChange() {
+        this.debouncedReload();
+    }
     async loadData() {
-        if (!this.endpoint || !this.session) {
+        if (this.isLoading || (this.total > 0 && this.powerups.length >= this.total)) {
             return;
         }
         this.isLoading = true;
@@ -44,7 +62,8 @@ export class BonusPowerupsIngameList {
         }
         this.abortController = new AbortController();
         try {
-            const url = new URL(`${this.endpoint}/v1/elevate/powerups?pagination=offset=0,limit=${this.limit}`);
+            const offset = this.powerups.length;
+            const url = new URL(`${this.endpoint}/v1/elevate/powerups?pagination=offset=${offset},limit=${this.limit}`);
             const options = {
                 headers: {
                     'Content-Type': 'application/json',
@@ -62,10 +81,11 @@ export class BonusPowerupsIngameList {
                 window.postMessage({ type: 'errorWhenLoadPowerups', status: response.status });
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
-            const { data } = await response.json();
-            this.powerups = data;
+            const { data, total } = await response.json();
+            this.powerups = [...this.powerups, ...data];
+            this.total = total;
             this.isPowering = this.powerups.filter(e => e.status === PowerUpStatus.ACTIVATED).length > 0;
-            this.powerupsLoadEvent.emit({ powerups: this.powerups });
+            this.powerupsLoadEvent.emit({ powerups: this.powerups, total });
         }
         catch (error) {
             if (error.name !== 'AbortError') {
@@ -78,6 +98,21 @@ export class BonusPowerupsIngameList {
             }
         }
     }
+    initializeObserver() {
+        if (this.loadMoreObserver) {
+            this.loadMoreObserver.disconnect();
+        }
+        this.loadMoreObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.loadData().catch(console.error);
+                }
+            });
+        });
+        if (this.lastItemElement) {
+            this.loadMoreObserver.observe(this.lastItemElement);
+        }
+    }
     async activePowerUp(powerUp) {
         if (!this.endpoint || !this.session || this.isActivating || this.isPowering) {
             return;
@@ -114,6 +149,7 @@ export class BonusPowerupsIngameList {
                 this.powerups[activedIdx] = Object.assign({}, powerUp);
                 this.powerups = [...this.powerups];
                 this.isPowering = true;
+                this.reloadPowerups();
             }
         }
         catch (e) {
@@ -131,14 +167,32 @@ export class BonusPowerupsIngameList {
     showDetail(id) {
         this.showDetailsEvent.emit({ id });
     }
+    onActiveBtnClick(powerup) {
+        if (this.isPowering || this.isActivating) {
+            return;
+        }
+        this.currentPowerup = powerup;
+        this.showConfirmModal = true;
+    }
+    componentDidUpdate() {
+        if (this.powerups.length < this.total) {
+            this.initializeObserver();
+        }
+    }
     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
+        var _a;
+        return (h("div", { key: '755e95625116000407991e3349c2f896335515a0', class: 'IngamePowerUpsContainer', ref: (el) => (this.stylingContainer = el) }, h("div", { key: 'c0bf175b4af979d505014ef1d92ff6f9c2bf7b3f', class: `TopBar ${this.showConfirmModal ? 'Hidden' : ''}` }, h("span", { key: 'e46b6e4f52170d857bedf55837b60fb471b61e0d', class: 'BarTitle' }, translate('powerups', this.language)), h("div", { key: 'c69769c036192c91410363a14c70648625cabbe8', class: 'IconBtn CircleLinearBorder', onClick: this.onClose.bind(this), innerHTML: CloseSvg })), this.isLoading && this.powerups.length === 0
             ? 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)))))))));
+            : h("div", { class: `Cards  ${this.showConfirmModal ? 'Hidden' : ''}` }, 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, index) => {
+                const isLastItem = index === this.powerups.length - 1;
+                return (h("div", { class: `Card ${powerup.status === PowerUpStatus.ACTIVATED ? 'Actived' : ''}`, ref: isLastItem ? (el) => (this.lastItemElement = el) : null }, 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", { "in-progress": true, mode: powerup.boostingPeriod.mode, "left-rounds": (powerup.boostingPeriod.numberOfRounds || 0) - (powerup.usedNumberOfRounds || 0), language: this.language, "expire-time": getActivedExpireTime(powerup) })
+                    :
+                        h("time-count", { language: this.language, mode: powerup.boostingPeriod.mode, "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.onActiveBtnClick(powerup) }, h("div", { class: 'content' }, " ", translate('activate', this.language))))));
+            }), this.isLoading && this.powerups.length > 0 && h("smart-loader", null)), h("active-confirm-modal", { key: '4c94dfcd5865ee4fb41791a4e69b33dfc1dd7be0', "is-open": this.showConfirmModal, "powerup-id": (_a = this.currentPowerup) === null || _a === void 0 ? void 0 : _a.id, language: this.language })));
     }
     handleClientStylingChange(newValue, oldValue) {
         if (newValue != oldValue) {
@@ -162,7 +216,7 @@ export class BonusPowerupsIngameList {
         if (this.translationUrl) {
             await getTranslations(this.translationUrl);
         }
-        this.loadData();
+        this.handleConfigChange();
     }
     componentDidLoad() {
         if (this.stylingContainer) {
@@ -178,6 +232,9 @@ export class BonusPowerupsIngameList {
         if (this.abortController) {
             this.abortController.abort();
         }
+        if (this.loadMoreObserver) {
+            this.loadMoreObserver.disconnect();
+        }
         this.stylingSubscription && this.stylingSubscription.unsubscribe();
     }
     static get is() { return "bonus-powerups-ingame-list"; }
@@ -331,7 +388,7 @@ export class BonusPowerupsIngameList {
                 },
                 "attribute": "limit",
                 "reflect": true,
-                "defaultValue": "10"
+                "defaultValue": "30"
             }
         };
     }
@@ -340,7 +397,10 @@ export class BonusPowerupsIngameList {
             "isLoading": {},
             "isActivating": {},
             "powerups": {},
-            "isPowering": {}
+            "total": {},
+            "isPowering": {},
+            "showConfirmModal": {},
+            "currentPowerup": {}
         };
     }
     static get events() {
@@ -394,16 +454,16 @@ export class BonusPowerupsIngameList {
     static get watchers() {
         return [{
                 "propName": "session",
-                "methodName": "loadData"
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "endpoint",
-                "methodName": "loadData"
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "limit",
-                "methodName": "loadData"
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "language",
-                "methodName": "loadData"
+                "methodName": "handleConfigChange"
             }, {
                 "propName": "clientStyling",
                 "methodName": "handleClientStylingChange"
@@ -425,6 +485,12 @@ export class BonusPowerupsIngameList {
                 "target": "body",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "activePowerupEvent",
+                "method": "activePowerupHandler",
+                "target": "body",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "powerupTimeCountDown",
                 "method": "powerupTimeCountDownHandler",

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

@@ -1,15 +1,22 @@
 import { h } from "@stencil/core";
 import moment from "moment";
 import { translate } from "../../utils/locale.utils";
+import { BoostingPeriodMode } from "../../../../../../../../libs/common/src/types/casino/powerups";
 export class TimeCount {
     constructor() {
         this.expireTime = undefined;
         this.language = 'en';
+        this.mode = 'timePeriod';
+        this.inProgress = false;
+        this.leftRounds = undefined;
         this.displayTime = undefined;
         this.isExpireInDay1 = false;
         this.timeLeft = undefined;
     }
     componentWillLoad() {
+        if (this.inProgress && this.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS) {
+            return;
+        }
         this.timer = setInterval(() => this.updateDisplayTime(), 1000);
         this.updateDisplayTime();
     }
@@ -17,12 +24,15 @@ export class TimeCount {
         clearInterval(this.timer);
     }
     timeLeftChanged() {
-        if (this.timeLeft > 0) {
+        if (this.timeLeft > 0 || this.timeLeft < -10) { // it is a data error if timeLeft is negative
             return;
         }
         this.timeCountDownEvent.emit({ type: 'powerupTimeCountDown', timeLeft: this.timeLeft });
     }
     startTimeChanged() {
+        if (this.inProgress && this.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS) {
+            return;
+        }
         // Reset the timer and update the display when the input time changes
         clearInterval(this.timer);
         this.timer = setInterval(() => this.updateDisplayTime(), 1000);
@@ -42,6 +52,7 @@ export class TimeCount {
         // If the time has already passed
         if (duration.asMilliseconds() <= 0) {
             this.displayTime = '00:00:00';
+            this.timeLeft = 0;
             clearInterval(this.timer);
             return;
         }
@@ -61,9 +72,13 @@ export class TimeCount {
     }
     render() {
         return [
+            this.inProgress &&
+                h("div", { key: '28ad398a10a6d917d62178b308660228a8e6909c', class: 'InprogressLabel' }, h("span", { key: 'b1717807c6ab470e9aaa9ae820179aed18821c56', class: 'Icon' }), translate('inProgress', this.language)),
             this.isExpireInDay1 &&
-                h("span", { key: '11ec5e6887c3e0b3e3178f8323f9a7937a855651', class: 'Label' }, translate('expiresIn', this.language), " "),
-            h("span", { key: 'bbaee9a13552ae932823245d6dc99a5ebd494e46', class: 'TimeCountDown' }, this.displayTime)
+                h("span", { key: '8113731d28d1ab0df026f61557b1e35f0ea96f53', class: 'Label' }, translate(this.inProgress ? 'endsIn' : 'expiresIn', this.language), " "),
+            this.inProgress && this.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS
+                ? h("span", { class: 'TimeCountDown' }, this.leftRounds, " ", translate('rounds', this.language))
+                : h("span", { class: 'TimeCountDown' }, this.displayTime)
         ];
     }
     static get is() { return "time-count"; }
@@ -84,7 +99,7 @@ export class TimeCount {
                     "text": ""
                 },
                 "attribute": "expire-time",
-                "reflect": false
+                "reflect": true
             },
             "language": {
                 "type": "string",
@@ -101,8 +116,61 @@ export class TimeCount {
                     "text": ""
                 },
                 "attribute": "language",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'en'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mode",
+                "reflect": true,
+                "defaultValue": "'timePeriod'"
+            },
+            "inProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "in-progress",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "leftRounds": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "left-rounds",
+                "reflect": true
             }
         };
     }

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

@@ -4,14 +4,20 @@ const TRANSLATIONS = {
         powerups: 'Power-ups',
         activate: 'Activate',
         expiresIn: 'Expires in - ',
-        xp: 'Points',
+        inProgress: 'In Progress',
+        endsIn: 'Ends in - ',
+        xp: 'XP',
         coins: 'Coins',
         minutes: 'min',
-        rounds: 'rounds',
+        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.'
+        poweringTooltip: 'Power-ups are currently unavailable as you have already activated one power-up. Only one power-up can be active at a time.',
+        later: 'Later',
+        activateNow: 'Activate Now',
+        activeTitle: 'Activate power-up?',
+        activeContent: 'In case of activation the countdown starts immediately.\n Are you sure you want to activate?'
     }
 };
 export const getTranslations = (url) => {

package/dist/collection/utils/utils.js

@@ -1,12 +1,12 @@
 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",
+    fields: "id,powerUpID,displayName,termsUrl,description,status,multiplier,boostingPeriod,usedNumberOfRounds,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)",
+    fields: "id,powerUpID,displayName,termsUrl,description,status,multiplier,boostingPeriod,usedNumberOfRounds,currentTime,expireTime,activatedAt,games(id,gameId,name,thumbnail,launchUrl)",
     status: `${PowerUpStatus.ACTIVE},${PowerUpStatus.ACTIVATED}`
 };
 export const powerUpGameSearchConditions = {
@@ -19,3 +19,11 @@ export const getActivedExpireTime = (powerUp) => {
     }
     return moment(powerUp.activatedAt).add(powerUp.boostingPeriod.minutes, 'minute').format('YYYY-MM-DDTHH:mm:ssZ');
 };
+export function debounce(func, wait) {
+    let timeout;
+    return function (...args) {
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+    };
+}

package/dist/esm/active-confirm-modal_3.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, c as createEvent, h } from './index-e015b33d.js';
+import { t as translate, C as CloseSvg, a as BoostingPeriodMode, h as hooks } from './bonus-powerups-ingame-list-01fff0bc.js';
+export { B as bonus_powerups_ingame_list } from './bonus-powerups-ingame-list-01fff0bc.js';
+
+const activeConfirmModalCss = ".ModalContainer{position:absolute;top:calc(50% - 200px);left:0;width:calc(100% - 120px);margin:40px;max-width:400px;height:260px;text-align:center;padding:20px;display:flex;gap:30px;flex-direction:column;border:1px solid var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.0784313725));transition:opacity 200ms ease-in-out;opacity:1;background:var(--emw--ingame-color-black40, rgba(9, 9, 9, 0.5019607843));border-radius:20px;backdrop-filter:blur(22.9411773682px);justify-content:flex-start}.ModalContainer.Hidden{opacity:0 !important}.ModalContainer.Shown .TopBar{justify-content:flex-end;padding:0px}.ModalContainer .Title{font-weight:bold;font-size:1.2rem}.ModalContainer .Btns{display:flex;justify-content:space-evenly}.ModalContainer .PowupBtn{background:linear-gradient(49deg, var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.1019607843)) 33.61%, var(--emw--ingame-color-white50, rgba(255, 255, 255, 0.1019607843)) 89.19%);border:1px solid rgba(70, 69, 69, 0.5);border-radius:10px;padding:5px 15px;color:var(--emw--color-powup-light-green, #00FA5A);font-weight:bold;cursor:pointer}.ModalContainer .PowupBtn.Active{background:var(--emw--color-powup-light-green, #00FA5A);box-shadow:0px 0px 6px 10px var(--emw--ingame-color-white10, rgba(255, 255, 255, 0.1019607843));color:#0A0A17}";
+const ActiveConfirmModalStyle0 = activeConfirmModalCss;
+
+const ActiveConfirmModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.activePowerupEvent = createEvent(this, "activePowerupEvent", 7);
+        this.powerupId = undefined;
+        this.language = 'en';
+        this.isOpen = undefined;
+    }
+    activeNow() {
+        this.closeModal(this.powerupId);
+    }
+    closeModal(id) {
+        this.isOpen = false;
+        this.activePowerupEvent.emit({ id });
+    }
+    render() {
+        return h("div", { key: '68efb916139aa66bb559ece109864e2241f096c5', class: `ModalContainer ${this.isOpen ? 'Shown' : 'Hidden'}` }, h("div", { key: '55f46fa812d04c10cb35807aeaa9dd6701b9b6d9', class: 'TopBar' }, h("div", { key: '7daafa1b57f421052aecc6c64cadc8b4d439646a', class: 'IconBtn CircleLinearBorder', onClick: () => this.closeModal(), innerHTML: CloseSvg })), h("div", { key: 'cbb64eff123333949155bccf6856e674b93f412e', class: 'Title' }, translate('activeTitle', this.language)), h("div", { key: '69b64ab2f9809d0ca222e29d4157f76bd11cb9f4', class: 'ActivePowerupContent' }, translate("activeContent", this.language)), h("div", { key: 'fb2b80ab2ffbf16446de273744094e0e3c38ba69', class: 'Btns' }, h("div", { key: '6f421ad422d76ef2a6a8ec3b8096c32f001ace44', class: 'LaterBtn PowupBtn', onClick: () => this.closeModal() }, " ", translate('later', this.language), " "), h("div", { key: '22ac06fefcc50356616b5c16817833e2973ab3bb', class: 'Active PowupBtn', onClick: () => this.activeNow() }, " ", translate('activateNow', this.language), " ")));
+    }
+};
+ActiveConfirmModal.style = ActiveConfirmModalStyle0;
+
+const TimeCount = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.timeCountDownEvent = createEvent(this, "powerupTimeCountDown", 7);
+        this.expireTime = undefined;
+        this.language = 'en';
+        this.mode = 'timePeriod';
+        this.inProgress = false;
+        this.leftRounds = undefined;
+        this.displayTime = undefined;
+        this.isExpireInDay1 = false;
+        this.timeLeft = undefined;
+    }
+    componentWillLoad() {
+        if (this.inProgress && this.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS) {
+            return;
+        }
+        this.timer = setInterval(() => this.updateDisplayTime(), 1000);
+        this.updateDisplayTime();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    timeLeftChanged() {
+        if (this.timeLeft > 0 || this.timeLeft < -10) { // it is a data error if timeLeft is negative
+            return;
+        }
+        this.timeCountDownEvent.emit({ type: 'powerupTimeCountDown', timeLeft: this.timeLeft });
+    }
+    startTimeChanged() {
+        if (this.inProgress && this.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS) {
+            return;
+        }
+        // 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 = hooks();
+        const start = hooks(this.expireTime);
+        if (!start.isValid()) {
+            this.displayTime = 'Invalid date';
+            clearInterval(this.timer);
+            return;
+        }
+        const duration = hooks.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';
+            this.timeLeft = 0;
+            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.inProgress &&
+                h("div", { key: '28ad398a10a6d917d62178b308660228a8e6909c', class: 'InprogressLabel' }, h("span", { key: 'b1717807c6ab470e9aaa9ae820179aed18821c56', class: 'Icon' }), translate('inProgress', this.language)),
+            this.isExpireInDay1 &&
+                h("span", { key: '8113731d28d1ab0df026f61557b1e35f0ea96f53', class: 'Label' }, translate(this.inProgress ? 'endsIn' : 'expiresIn', this.language), " "),
+            this.inProgress && this.mode === BoostingPeriodMode.NUMBER_OF_ROUNDS
+                ? h("span", { class: 'TimeCountDown' }, this.leftRounds, " ", translate('rounds', this.language))
+                : h("span", { class: 'TimeCountDown' }, this.displayTime)
+        ];
+    }
+    static get watchers() { return {
+        "timeLeft": ["timeLeftChanged"],
+        "expireTime": ["startTimeChanged"]
+    }; }
+};
+
+export { ActiveConfirmModal as active_confirm_modal, TimeCount as time_count };