@everymatrix/casino-engagement-suite-tournament 1.63.0 → 1.63.1

package/dist/collection/shared/TournamentItemTitle.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-import { DialogType, TournamentState } from "../utils/types";
+import { DialogType } from "../utils/types";
 import { renderGradientRoundedButton } from "./GradientRoundedButton";
 import { TRANSLATIONS } from "../utils/translations";
+import { isTournamentClosed } from "../utils/bussiness";
 export class CasinoEngagementSuiteTournamentItemTitle {
     constructor() {
         this.tournament = undefined;
@@ -15,9 +16,10 @@ export class CasinoEngagementSuiteTournamentItemTitle {
         if (this.isButtonDisabed) {
             return;
         }
-        this.isButtonDisabed = true;
+        //only disable the button when click on the Join button which is not acknowledged by player
+        this.isButtonDisabed = this.tournament.isPlayerAcknowledged ? false : true;
         if (this.tournament.isPlayerAcknowledged) {
-            this.unjoinTournamentEvent.emit({ type: DialogType.unjoin, tournament: this.tournament });
+            this.unjoinTournamentConfirmEvent.emit({ type: DialogType.unjoin, tournament: this.tournament });
         }
         else {
             this.joinTournamentEvent.emit(this.tournament);
@@ -27,7 +29,7 @@ export class CasinoEngagementSuiteTournamentItemTitle {
         this.isButtonDisabed = this.tournament.isActionJoinPending === true;
     }
     render() {
-        return (h("div", { key: '5d6eebb15e8e1f1ac635fa90fe69407aab9cf81c', class: "TitleContainer" }, h("div", { key: 'ad7dd682272d822537cd484797b2f5d3825e49c8', class: "Title" }, this.tournament.nameOrTitle), this.tournament.state !== TournamentState.Closed && (h("div", { key: '87e50a538aca5ce7d7b1a659dbe6aa16541194f2' }, renderGradientRoundedButton({
+        return (h("div", { key: '0226e00da9805f16624a2d60edb020d047ea28ee', class: "TitleContainer" }, h("div", { key: 'e6d55949a27f2b90ca36af51dbe1c52ddd1d9cf9', class: "Title" }, this.tournament.nameOrTitle), !isTournamentClosed(this.tournament) && (h("div", { key: 'f3b030e17ad4f03e20485cb163952b6b1fb05881' }, renderGradientRoundedButton({
             statedClasses: {
                 isHollow: this.tournament.isPlayerAcknowledged,
                 isPending: this.isButtonDisabed
@@ -39,7 +41,7 @@ export class CasinoEngagementSuiteTournamentItemTitle {
             innerHTML: this.tournament.isPlayerAcknowledged ? this.locale.Unjoin : this.locale.Join
         })))));
     }
-    static get is() { return "casino-engagement-suite-tournament-item-title"; }
+    static get is() { return "tournament-item-title"; }
     static get properties() {
         return {
             "tournament": {
@@ -74,8 +76,8 @@ export class CasinoEngagementSuiteTournamentItemTitle {
     }
     static get events() {
         return [{
-                "method": "unjoinTournamentEvent",
-                "name": "unjoinTournamentEvent",
+                "method": "unjoinTournamentConfirmEvent",
+                "name": "unjoinTournamentConfirmEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/shared/renders.page.js

@@ -12,7 +12,7 @@ export const page = {
         }
         const { locale } = instance;
         if (instance.tournamentList.length) {
-            return renderWrapperByPageType(h("div", { class: "Leaderboards ScrollBar Row" }, instance.tournamentList.map((_tournament) => (h("casino-engagement-suite-tournament-item", { tournament: _tournament, isNew: instance.newIdList.includes(_tournament.id) })))));
+            return renderWrapperByPageType(h("div", { class: "Leaderboards ScrollBar Row" }, instance.tournamentList.map((_tournament) => (h("tournament-item", { tournament: _tournament, isNew: instance.newIdList.includes(_tournament.id) })))));
         }
         else {
             return renderWrapperByPageType(h("div", { class: "NoLeaderboards ScrollBar Row" }, h("h3", { class: "Title" }, locale.NoLeaderboards), h("div", { class: "message" }, locale.NoLeaderboardsTip)));
@@ -39,7 +39,7 @@ export const page = {
                 onClick: () => onClickTab(_tab) }, locale[_tab]))))));
         };
         return renderWrapperByPageType([
-            h("casino-engagement-suite-tournament-item-title", { tournament: instance.tournamentItem }),
+            h("tournament-item-title", { tournament: instance.tournamentItem }),
             renderTabs(),
             h("div", { class: `TableContentWrapper ${instance.tab}` }, instance.renders.tab[instance.tab]())
         ]);

package/dist/collection/shared/renders.tab.js

@@ -2,14 +2,13 @@ import { h } from "@stencil/core";
 import { localePostprocess } from "../utils/translations";
 import { iconEyeClose, iconEyeOpen, iconReward } from "./icons";
 import { classnames, truncateNumber } from "../utils/utils";
-import { renderTimeBar } from "./renders.util";
 import { isTournamentClosed } from "../utils/bussiness";
 import { getTimeDifference } from "../utils/util.date";
 export const tab = {
     info(instance) {
         var _a, _b;
         const { locale, tournamentItem: tournament, isShowInfo } = instance;
-        return (h("div", { class: "InfoContainer" }, renderTimeBar(tournament), h("section", { class: "ShowInfo", onClick: () => (instance.isShowInfo = !instance.isShowInfo) }, h("div", { class: "DetailHeader" }, h("span", null, isShowInfo ? iconEyeOpen : iconEyeClose), h("span", null, locale.LeaderboardDetails))), h("div", { class: `ContentScrollContainer ${isShowInfo ? 'expanded' : ''}` }, isShowInfo && (h("section", { class: "Info" }, h("div", { class: "Description" }, tournament.description), h("div", { class: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), !!tournament.termsUrl && (h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: "_blank" }, locale.TC))))), isTournamentClosed(instance.tournamentItem) && ((_a = instance.leaderboards) === null || _a === void 0 ? void 0 : _a.find((l) => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, getResultPrize((_b = instance.leaderboards) === null || _b === void 0 ? void 0 : _b.find((l) => l.isMe))) })), h("section", { class: "PrizesContainer" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), h("div", { class: "Prizes" }, tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))))));
+        return (h("div", { class: "InfoContainer" }, h("tournament-timer", { "is-detail": true, tournament: tournament }), h("section", { class: "ShowInfo", onClick: () => (instance.isShowInfo = !instance.isShowInfo) }, h("div", { class: "DetailHeader" }, h("span", null, isShowInfo ? iconEyeOpen : iconEyeClose), h("span", null, locale.LeaderboardDetails))), h("div", { class: `ContentScrollContainer ${isShowInfo ? 'expanded' : ''}` }, isShowInfo && (h("section", { class: "Info" }, h("div", { class: "Description" }, tournament.description), h("div", { class: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), !!tournament.termsUrl && (h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: "_blank" }, locale.TC))))), isTournamentClosed(instance.tournamentItem) && ((_a = instance.leaderboards) === null || _a === void 0 ? void 0 : _a.find((l) => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, getResultPrize((_b = instance.leaderboards) === null || _b === void 0 ? void 0 : _b.find((l) => l.isMe))) })), h("section", { class: "PrizesContainer" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), h("div", { class: "Prizes" }, tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))))));
     },
     leaderboard(instance) {
         const { locale, tournamentItem } = instance;

package/dist/collection/utils/bussiness.js

@@ -1,27 +1,15 @@
 import { TournamentState } from "./types";
-export const getMaxRankStr = (list) => {
-    let itemHaveMaxRank;
-    list.map((item) => {
+export const getMaxRankStr = (playerLeaderboards) => {
+    let bestRank = null;
+    (playerLeaderboards || []).map((playerLeaderboard) => {
         var _a;
-        const rank = (_a = item.leaderBoard) === null || _a === void 0 ? void 0 : _a.rank;
+        const { leaderBoard: { rank } } = playerLeaderboard;
         if (!rank) {
             return;
         }
-        if (!itemHaveMaxRank) {
-            itemHaveMaxRank = item;
-            return;
-        }
-        else {
-            if (rank < itemHaveMaxRank.leaderBoard.rank) {
-                itemHaveMaxRank = item;
-            }
-        }
+        bestRank = !bestRank || ((_a = bestRank.leaderBoard) === null || _a === void 0 ? void 0 : _a.rank) > rank ? playerLeaderboard : bestRank;
     });
-    if (!itemHaveMaxRank) {
-        return '-';
-    }
-    const maxRankStr = `${itemHaveMaxRank.leaderBoard.rank} / ${itemHaveMaxRank.endRank}`;
-    return maxRankStr;
+    return bestRank ? `${bestRank.leaderBoard.rank} / ${bestRank.endRank}` : '-';
 };
 export const isTournamentClosed = (tournament) => {
     return [TournamentState.Closed, TournamentState.Closing].includes(tournament.state);

package/dist/collection/utils/message.js

@@ -3,10 +3,11 @@ import { getMaxRankStr } from "./bussiness";
 import { DialogType, LeaderboardPage } from "./types";
 export const messageSender = {
     UpdateSuiteBarState: (labels) => window.postMessage({ type: 'UpdateLeaderboardState', labels }),
-    JoinTournamentReq: (tournament) => window.postMessage({
-        type: 'JoinTournamentReq',
-        id: tournament.id,
-    }),
+    JoinTournamentReq: (tournament) => {
+        var _a, _b;
+        return window.postMessage({ type: 'JoinTournamentReq', id: tournament.id,
+            bonusCode: tournament.id || ((_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code) });
+    },
     UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
     UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
     UpdateLeaderboardsReq: (tournament, query) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id, query }),
@@ -17,8 +18,7 @@ export const messageSender = {
 export const messageReceiver = (instance) => {
     const receiver = {
         UpdateLeaderboardsPlayerRes: (rest) => {
-            const rankStr = getMaxRankStr(rest.data.items);
-            window.postMessage({ type: 'UpdateLeaderboardState', rank: rankStr });
+            window.postMessage({ type: 'UpdateLeaderboardState', rank: getMaxRankStr(rest.data.items) });
         },
         UpdateLeaderboardStateReq: () => {
             window.postMessage({ type: 'UpdateLeaderboardState', labels: ['win', 'new'] });
@@ -31,7 +31,7 @@ export const messageReceiver = (instance) => {
         UpdateLeaderboardsRes: (rest) => processLeaderboardTableData(instance, rest),
         JoinTournamentRes: (rest) => commonJoinRes(instance, rest),
         UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest),
-        TournamentsPageIsReadyRes: (rest) => instance.currentGameId = rest.data.GameId,
+        TournamentsPageIsReadyRes: (rest) => instance.currentGameId = '' + rest.data.GameId,
         // listen to LeaderboardLiveEvent event, handle update
         LeaderboardLiveEvent: (rest) => {
             handleLeaderboardLiveEvent(instance, rest);
@@ -123,6 +123,7 @@ const commonJoinRes = (instance, rest) => {
         return;
     }
     current = Object.assign(Object.assign({}, current), { isActionJoinPending: false });
+    instance.pendingChangeEvent.emit(current);
     if (!success) {
         instance.tournamentList[tournamentIdx] = current;
         instance.tournamentList = [...instance.tournamentList];
@@ -150,6 +151,9 @@ const processLeaderboardTableData = (instance, rest) => {
     instance.leaderboards = leaderboardsAdapter(rest.data);
     instance.currentPlyerRank = rest.data.item ? rest.data.item.rank : -1;
 };
+/*
+ * update tournament info, include status, name or duration change
+ */
 const updateTournamentListByItem = (instance, tournament) => {
     instance.tournamentList = instance.tournamentList.map((_tournament) => {
         if (_tournament.id === tournament.id) {

package/dist/esm/casino-engagement-suite-progress-bar_6.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement, c as createEvent } from './index-8b5c4b95.js';
-import { T as TRANSLATIONS, c as classnames, D as DialogType, a as TournamentState, r as renderGradientRoundedButton, L as LeaderboardPage, g as getTimeDifference, b as getProgress, f as formatDate } from './casino-engagement-suite-tournament-54c513f1.js';
-export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-54c513f1.js';
+import { T as TRANSLATIONS, c as classnames, D as DialogType, i as isTournamentClosed, r as renderGradientRoundedButton, L as LeaderboardPage, g as getTimeDifference, a as getProgress, f as formatDate } from './casino-engagement-suite-tournament-3be75bd2.js';
+export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-3be75bd2.js';
 
 const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:var(--emw--font-size-small, 14px);line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-gray-300, #666178);border-radius:var(--emw--border-radius-small, 4px);position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:var(--emw--border-radius-small, 4px);background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:var(--emw--font-weight-bold, 700);font-size:var(--emw--font-size-x-small, 12px);line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-gray-300, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";
 const CasinoEngagementSuiteProgressBarStyle0 = casinoEngagementSuiteProgressBarCss;
@@ -66,6 +66,80 @@ const CasinoEngagementSuiteProgressBar = class {
 };
 CasinoEngagementSuiteProgressBar.style = CasinoEngagementSuiteProgressBarStyle0;
 
+const mergeTranslations = (url, target) => {
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                target[item] = target[item] ? target[item] : {};
+                for (let key in data[item]) {
+                    target[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};
+
+const generalStylingWrapperCss = ":host{display:block}";
+const GeneralStylingWrapperStyle0 = generalStylingWrapperCss;
+
+const GeneralStylingWrapper = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.stylingAppends = false;
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.el.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => {
+                    this.el.prepend(cssFile);
+                }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.targetTranslations = undefined;
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.stylingAppends) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrl)
+                this.setClientStylingURL();
+            this.stylingAppends = true;
+        }
+        // end custom styling area
+    }
+    async componentWillLoad() {
+        const promises = [];
+        if (this.translationUrl) {
+            const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
+            promises.push(translationPromise);
+        }
+        return await Promise.all(promises);
+    }
+    render() {
+        return (h("div", { key: '4d3414408c7662f88331dbe655966237f74d6958', class: "StyleShell" }, h("slot", { key: '1d004644d84602c4314bdf5dfc26b55b160f57df', name: "mainContent" })));
+    }
+    get el() { return getElement(this); }
+};
+GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
+
 const CasinoEngagementSuiteTournamentItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -74,29 +148,25 @@ const CasinoEngagementSuiteTournamentItem = class {
         this.isNew = undefined;
         this.locale = TRANSLATIONS;
     }
-    handleJoinTournamentEvent(e) {
-        if (this.tournament.id === e.detail.id) {
-            this.tournament = Object.assign(Object.assign({}, this.tournament), { isActionJoinPending: true });
-        }
-    }
-    handleUnjoinTournamentEvent(e) {
-        if (this.tournament.id === e.detail.id) {
-            this.tournament = Object.assign(Object.assign({}, this.tournament), { isActionJoinPending: true });
-        }
-    }
     goToDetail() {
         this.clickToTournamentDetail.emit(this.tournament);
     }
+    onTournamentUpdateEvent(event) {
+        const { detail } = event;
+        if (detail.id === this.tournament.id) {
+            this.tournament = Object.assign({}, detail);
+        }
+    }
     render() {
         const tournament = this.tournament;
-        return (h("div", { key: 'e507da65532f4608aa96c1ebe2e329d332b9c439', class: classnames('LeaderboardsItem', tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', tournament.isUnjoined ? 'Unjoined' : ''), onClick: this.goToDetail.bind(this) }, h("div", { key: 'dc9bd1777858b2a3a57a3f808f734857db9011ee', class: "LeaderboardsItemContainer" }, h("casino-engagement-suite-tournament-item-title", { key: '14cae37fbc9d0f829b85d507ea0e60c95afc7250', tournament: tournament }), h("casino-engagement-suite-tournament-timer", { key: 'd703d03c146592887ea20bdc1289b446399f0870', tournament: tournament })), h("div", { key: '4f2f422965b47c0103ff5dcef8f28dc507491677', class: "LeaderboardLabels" }, this.isNew && (h("div", { key: '3132e3ac8adec5f9ca85d8c14c91801779d8afbf', class: "LeaderboardLabel" }, h("span", { key: 'c148c5fa597b76ff4f23c06b6b3407c06a96bdb7' }, "new"))))));
+        return (h("div", { key: '42aee3b22ede6ac1da748308979258bfcda33d3b', class: classnames('LeaderboardsItem', tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', tournament.isUnjoined ? 'Unjoined' : ''), onClick: this.goToDetail.bind(this) }, h("div", { key: '25078f839d00c4b749bff3036c279afbf9133b96', class: "LeaderboardsItemContainer" }, h("tournament-item-title", { key: 'd34d2101e73044448d909a8f36a842a5081d9265', tournament: tournament }), h("tournament-timer", { key: '3958d497cdc9856660b998d616da68689505b18e', tournament: tournament })), h("div", { key: '940f08d14c35872562eccbb022e3f256bba259ec', class: "LeaderboardLabels" }, this.isNew && (h("div", { key: '3c84b998444eb4e16a13a65db4fb909356f78668', class: "LeaderboardLabel" }, h("span", { key: '5c095eeafbfba21e68cd6afa7699f4e2c9ce4bcd' }, "new"))))));
     }
 };
 
 const CasinoEngagementSuiteTournamentItemTitle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.unjoinTournamentEvent = createEvent(this, "unjoinTournamentEvent", 7);
+        this.unjoinTournamentConfirmEvent = createEvent(this, "unjoinTournamentConfirmEvent", 7);
         this.joinTournamentEvent = createEvent(this, "joinTournamentEvent", 7);
         this.tournament = undefined;
         this.locale = TRANSLATIONS;
@@ -109,9 +179,10 @@ const CasinoEngagementSuiteTournamentItemTitle = class {
         if (this.isButtonDisabed) {
             return;
         }
-        this.isButtonDisabed = true;
+        //only disable the button when click on the Join button which is not acknowledged by player
+        this.isButtonDisabed = this.tournament.isPlayerAcknowledged ? false : true;
         if (this.tournament.isPlayerAcknowledged) {
-            this.unjoinTournamentEvent.emit({ type: DialogType.unjoin, tournament: this.tournament });
+            this.unjoinTournamentConfirmEvent.emit({ type: DialogType.unjoin, tournament: this.tournament });
         }
         else {
             this.joinTournamentEvent.emit(this.tournament);
@@ -121,7 +192,7 @@ const CasinoEngagementSuiteTournamentItemTitle = class {
         this.isButtonDisabed = this.tournament.isActionJoinPending === true;
     }
     render() {
-        return (h("div", { key: '5d6eebb15e8e1f1ac635fa90fe69407aab9cf81c', class: "TitleContainer" }, h("div", { key: 'ad7dd682272d822537cd484797b2f5d3825e49c8', class: "Title" }, this.tournament.nameOrTitle), this.tournament.state !== TournamentState.Closed && (h("div", { key: '87e50a538aca5ce7d7b1a659dbe6aa16541194f2' }, renderGradientRoundedButton({
+        return (h("div", { key: '0226e00da9805f16624a2d60edb020d047ea28ee', class: "TitleContainer" }, h("div", { key: 'e6d55949a27f2b90ca36af51dbe1c52ddd1d9cf9', class: "Title" }, this.tournament.nameOrTitle), !isTournamentClosed(this.tournament) && (h("div", { key: 'f3b030e17ad4f03e20485cb163952b6b1fb05881' }, renderGradientRoundedButton({
             statedClasses: {
                 isHollow: this.tournament.isPlayerAcknowledged,
                 isPending: this.isButtonDisabed
@@ -142,23 +213,26 @@ const CasinoEngagementSuiteTournamentTimer = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tournament = undefined;
-        this.time = 0;
+        this.isDetail = false;
         this.timeHolder = undefined;
-        this.timeCloak = true;
+        this.timeClock = true;
+        this.lastTimeDiff = undefined;
+        this.lastProgress = undefined;
     }
     containerPageChangeHandler(event) {
-        this.timeCloak = event.detail.page === LeaderboardPage.list ||
-            event.detail.page === LeaderboardPage.item && this.tournament.id === event.detail.tournamentId;
+        this.timeClock = (event.detail.page === LeaderboardPage.list && !this.isDetail) ||
+            (event.detail.page === LeaderboardPage.item && this.isDetail);
+    }
+    componentWillLoad() {
+        this.lastTimeDiff = getTimeDifference(new Date(), this.tournament.endTime);
+        this.lastProgress = getProgress(this.tournament.startTime, this.tournament.endTime);
     }
     setTimeInterval() {
         this.timeHolder = setInterval(() => {
-            var _a;
             const timeDifference = getTimeDifference(new Date(), this.tournament.endTime);
             const progress = getProgress(this.tournament.startTime, this.tournament.endTime);
-            if (this.timeCloak &&
-                ![TournamentState.Closed, TournamentState.Closing].includes((_a = this.tournament) === null || _a === void 0 ? void 0 : _a.state) &&
+            if (this.timeClock && !isTournamentClosed(this.tournament) &&
                 (timeDifference != this.lastTimeDiff || progress != this.lastProgress)) {
-                this.time++;
                 this.lastProgress = progress;
                 this.lastTimeDiff = timeDifference;
             }
@@ -171,92 +245,16 @@ const CasinoEngagementSuiteTournamentTimer = class {
         clearInterval(this.timeHolder);
     }
     render() {
-        return h("section", { key: 'b5d514586445a3acc665fcbbbaa0d139b7b28075', class: "TimeContainer" }, h("div", { key: '2080b18edd157a337d5c7f164d1914e91a95a3f3', class: "Time" }, this.tournament.state === 'Running'
-            ? [
-                h("div", { class: "Running" }, h("div", null, this.lastTimeDiff), ",", h("div", null, renderGradientRoundedButton({
-                    statedClasses: {
-                        isHollow: true,
-                        isPendding: false
-                    },
-                    innerHTML: `${getProgress(this.tournament.startTime, this.tournament.endTime)}%`
-                })))
-            ]
-            : [h("div", { class: "NotRunning" }, formatDate(this.tournament.startTime)), h("div", null, formatDate(this.tournament.endTime))]), h("casino-engagement-suite-progress-bar", { key: 'b841cc70a1307f1175f0748644aaaeee9e1094ff', value: Number(this.lastProgress >= 100 ? 100 : this.lastProgress), "hide-percent": true }));
+        return h("section", { key: '8fafe729af2bd66b5ac0e980564051069f677531', class: "TimeContainer" }, h("div", { key: '8279572700e24d3f1094809dae6e3b5d1b02c37b', class: "Time" }, this.tournament.state === 'Running'
+            ? h("div", { class: "Running" }, h("div", null, this.lastTimeDiff), h("div", null, renderGradientRoundedButton({
+                statedClasses: {
+                    isHollow: true,
+                    isPendding: false
+                },
+                innerHTML: `${getProgress(this.tournament.startTime, this.tournament.endTime)}%`
+            })))
+            : [h("div", { class: "NotRunning" }, formatDate(this.tournament.startTime)), h("div", null, formatDate(this.tournament.endTime))]), h("casino-engagement-suite-progress-bar", { key: 'e475e55b206c802f8df27cb95ac8fe6331578358', indeterminate: false, value: Number(this.lastProgress >= 100 ? 100 : this.lastProgress), "hide-percent": true }));
     }
 };
 
-const mergeTranslations = (url, target) => {
-    return new Promise((resolve) => {
-        fetch(url)
-            .then((res) => res.json())
-            .then((data) => {
-            Object.keys(data).forEach((item) => {
-                target[item] = target[item] ? target[item] : {};
-                for (let key in data[item]) {
-                    target[item][key] = data[item][key];
-                }
-            });
-            resolve(true);
-        });
-    });
-};
-
-const generalStylingWrapperCss = ":host{display:block}";
-const GeneralStylingWrapperStyle0 = generalStylingWrapperCss;
-
-const GeneralStylingWrapper = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.stylingAppends = false;
-        this.setClientStyling = () => {
-            let sheet = document.createElement('style');
-            sheet.innerHTML = this.clientStyling;
-            this.el.prepend(sheet);
-        };
-        this.setClientStylingURL = () => {
-            let url = new URL(this.clientStylingUrl);
-            let cssFile = document.createElement('style');
-            fetch(url.href)
-                .then((res) => res.text())
-                .then((data) => {
-                cssFile.innerHTML = data;
-                setTimeout(() => {
-                    this.el.prepend(cssFile);
-                }, 1);
-            })
-                .catch((err) => {
-                console.log('error ', err);
-            });
-        };
-        this.clientStyling = '';
-        this.clientStylingUrl = '';
-        this.translationUrl = '';
-        this.targetTranslations = undefined;
-    }
-    componentDidRender() {
-        // start custom styling area
-        if (!this.stylingAppends) {
-            if (this.clientStyling)
-                this.setClientStyling();
-            if (this.clientStylingUrl)
-                this.setClientStylingURL();
-            this.stylingAppends = true;
-        }
-        // end custom styling area
-    }
-    async componentWillLoad() {
-        const promises = [];
-        if (this.translationUrl) {
-            const translationPromise = mergeTranslations(this.translationUrl, this.targetTranslations);
-            promises.push(translationPromise);
-        }
-        return await Promise.all(promises);
-    }
-    render() {
-        return (h("div", { key: '4d3414408c7662f88331dbe655966237f74d6958', class: "StyleShell" }, h("slot", { key: '1d004644d84602c4314bdf5dfc26b55b160f57df', name: "mainContent" })));
-    }
-    get el() { return getElement(this); }
-};
-GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
-
-export { CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar, CasinoEngagementSuiteTournamentItem as casino_engagement_suite_tournament_item, CasinoEngagementSuiteTournamentItemTitle as casino_engagement_suite_tournament_item_title, CasinoEngagementSuiteTournamentTimer as casino_engagement_suite_tournament_timer, GeneralStylingWrapper as general_styling_wrapper };
+export { CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar, GeneralStylingWrapper as general_styling_wrapper, CasinoEngagementSuiteTournamentItem as tournament_item, CasinoEngagementSuiteTournamentItemTitle as tournament_item_title, CasinoEngagementSuiteTournamentTimer as tournament_timer };