@everymatrix/casino-engagement-suite-tournament 1.62.2 → 1.62.4

package/dist/collection/shared/TournamentItemTitle.js

@@ -0,0 +1,124 @@
+import { h } from "@stencil/core";
+import { DialogType, TournamentState } from "../utils/types";
+import { renderGradientRoundedButton } from "./GradientRoundedButton";
+import { TRANSLATIONS } from "../utils/translations";
+export class CasinoEngagementSuiteTournamentItemTitle {
+    constructor() {
+        this.tournament = undefined;
+        this.locale = TRANSLATIONS;
+        this.isButtonDisabed = false;
+    }
+    onTournamentChanged(tournament) {
+        this.isButtonDisabed = tournament.isActionJoinPending === true;
+    }
+    onClickItemJoin() {
+        if (this.isButtonDisabed) {
+            return;
+        }
+        this.isButtonDisabed = true;
+        if (this.tournament.isPlayerAcknowledged) {
+            this.unjoinTournamentEvent.emit({ type: DialogType.unjoin, tournament: this.tournament });
+        }
+        else {
+            this.joinTournamentEvent.emit(this.tournament);
+        }
+    }
+    componentDidLoad() {
+        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({
+            statedClasses: {
+                isHollow: this.tournament.isPlayerAcknowledged,
+                isPending: this.isButtonDisabed
+            },
+            onClick: (e) => {
+                e.stopPropagation();
+                this.onClickItemJoin();
+            },
+            innerHTML: this.tournament.isPlayerAcknowledged ? this.locale.Unjoin : this.locale.Join
+        })))));
+    }
+    static get is() { return "casino-engagement-suite-tournament-item-title"; }
+    static get properties() {
+        return {
+            "tournament": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Tournament",
+                    "resolved": "{ href: string; id: string; nameOrTitle: string; description: string; termsUrl: string; thumbnail: string; thumbnails: []; startTime: Date; endTime: Date; closeTime: Date; exhibitionStartTime: Date; exhibitionEndTime: Date; state: TournamentState; tags: string; minBetCount: number; dataSource: string; scoreCriteria: string; wallets: { code: string; }; prizes: { rank: number; count: number; name: string; }[]; games?: TournamentGame[]; playerEnrolled?: boolean; isPlayerAcknowledged?: boolean; isActionJoinPending?: boolean; isUnjoined?: boolean; }",
+                    "references": {
+                        "Tournament": {
+                            "location": "import",
+                            "path": "../utils/types",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-tournament/src/utils/types.ts::Tournament"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {},
+            "isButtonDisabed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "unjoinTournamentEvent",
+                "name": "unjoinTournamentEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }, {
+                "method": "joinTournamentEvent",
+                "name": "joinTournamentEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "tournament",
+                "methodName": "onTournamentChanged"
+            }];
+    }
+}

package/dist/collection/shared/icons.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
 import reward from "../assets/reward.svg";
+import help from "../assets/help.svg";
 export const iconClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg" });
-export const iconQuestion = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg" });
+export const iconQuestion = h("img", { src: help, alt: "question", class: "Question" });
 export const iconEyeOpen = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg" });
 export const iconEyeClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg" });
 export const iconBack = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg" });

package/dist/collection/shared/renderBar.js

@@ -4,11 +4,11 @@ export const renderCloseBar = (attr) => {
     const slots = {
         left,
         middle,
-        right,
+        right
     };
     const getFirstLetterUppercase = (str) => str
         .split('')
         .map((letter, index) => index === 0 ? letter.toUpperCase() : letter)
         .join('');
-    return (h("div", { class: "WrapperBar" }, Object.keys(slots).map(slotKey => (h("div", { class: "WrapperBar" + getFirstLetterUppercase(slotKey) }, slots[slotKey] || '')))));
+    return (h("div", { class: "WrapperBar" }, Object.keys(slots).map(slotKey => (h("div", { class: 'WrapperBar' + getFirstLetterUppercase(slotKey) }, slots[slotKey] || '')))));
 };

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

@@ -1,11 +1,6 @@
 import { h } from "@stencil/core";
 import { tournamentAdapter } from "../utils/api.apdater";
 import { classnames } from "../utils/utils";
-import { DialogType, LeaderboardPage, TournamentState } from "../utils/types";
-import { renderGradientRoundedButton } from "./GradientRoundedButton";
-import { iconBack, iconClose, iconQuestion } from "./icons";
-import { renderCloseBar } from "./renderBar";
-import { renderTimeBar } from "./renders.util";
 import { Tab } from "../utils/translations";
 import { messageSender } from "../utils/message";
 export const page = {
@@ -17,14 +12,10 @@ export const page = {
         }
         const { locale } = instance;
         if (instance.tournamentList.length) {
-            const onClickListItemChangePage = (tournament) => {
-                instance.setPage(LeaderboardPage.item, { tournament });
-                instance.newIdList = instance.newIdList.filter((id) => id !== tournament.id);
-            };
-            return renderLeaderboardContainer(instance, h("div", { class: 'Leaderboards Row' }, instance.tournamentList.map((_tournament) => (h("div", { class: classnames('LeaderboardsItem', _tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', _tournament.isUnjoined ? 'Unjoined' : ''), onClick: () => onClickListItemChangePage(_tournament) }, h("div", { class: "LeaderboardsItemContainer" }, renderTitleContainer(instance, _tournament), renderTimeBar(_tournament)), h("div", { class: "LeaderboardLabels" }, instance.newIdList.includes(_tournament.id) && (h("div", { class: "LeaderboardLabel" }, h("span", null, "new")))))))));
+            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) })))));
         }
         else {
-            return renderLeaderboardContainer(instance, h("div", { class: "NoLeaderboards Row" }, h("h3", { class: 'Title' }, locale.NoLeaderboards), h("div", { class: 'message' }, locale.NoLeaderboardsTip)));
+            return renderWrapperByPageType(h("div", { class: "NoLeaderboards ScrollBar Row" }, h("h3", { class: "Title" }, locale.NoLeaderboards), h("div", { class: "message" }, locale.NoLeaderboardsTip)));
         }
     },
     item(instance) {
@@ -47,77 +38,13 @@ export const page = {
             return (h("div", { class: "TabsContainer" }, h("div", { class: "Tabs" }, Object.keys(Tab).map((_tab) => (h("div", { class: classnames({ active: tab === _tab }),
                 onClick: () => onClickTab(_tab) }, locale[_tab]))))));
         };
-        return renderLeaderboardContainer(instance, [
-            renderTitleContainer(instance, instance.tournamentItem),
+        return renderWrapperByPageType([
+            h("casino-engagement-suite-tournament-item-title", { tournament: instance.tournamentItem }),
             renderTabs(),
             h("div", { class: `TableContentWrapper ${instance.tab}` }, instance.renders.tab[instance.tab]())
         ]);
     }
 };
-const renderTitleContainer = (instance, tournament) => {
-    const { locale } = instance;
-    const onClickItemJoin = (tournament) => {
-        if (tournament.isPlayerAcknowledged) {
-            instance.openDialog(DialogType.unjoin, tournament);
-        }
-        else {
-            instance.actionJoin(tournament);
-            instance.tournamentItem = tournament;
-        }
-    };
-    return (h("div", { class: "TitleContainer" }, h("div", { class: "Title" }, tournament.nameOrTitle), tournament.state !== TournamentState.Closed && (h("div", null, renderGradientRoundedButton({
-        statedClasses: {
-            isHollow: tournament.isPlayerAcknowledged,
-            isPending: tournament.isActionJoinPending
-        },
-        onClick: (e) => {
-            e.stopPropagation();
-            if (!tournament.isActionJoinPending) {
-                onClickItemJoin(tournament);
-            }
-        },
-        innerHTML: tournament.isPlayerAcknowledged ? locale.Unjoin : locale.Join
-    })))));
-};
-const renderLeaderboardContainer = (instance, render) => {
-    const { dialog: { isOpen } } = instance;
-    const renderBar = renderCloseBar({
-        right: h("span", { onClick: () => instance.closeDialog() }, iconClose)
-    });
-    const renderDialogContent = () => {
-        switch (instance.dialog.type) {
-            case DialogType.unjoin:
-                return instance.renders.dialog.unjoin();
-            case DialogType.tip:
-                return h("div", { class: "Tip" }, instance.locale.Tip);
-            case DialogType.error:
-                return h("div", { class: "Tip Error" }, instance.locale.FailedToJoin);
-            case DialogType.gift:
-                return instance.renders.dialog.gift();
-        }
-    };
-    const getWrapperBarData = () => {
-        const { page, locale } = instance;
-        switch (page) {
-            case LeaderboardPage.list:
-                return {
-                    left: h("span", { onClick: () => instance.openDialog(DialogType.tip), onMouseEnter: () => { instance.showTooltip = true; }, onMouseLeave: () => { instance.showTooltip = false; }, ref: (el) => instance.tooltipIconReference = el }, iconQuestion, instance.renderTooltip()),
-                    middle: locale.Leaderboards
-                };
-            case LeaderboardPage.item:
-                return {
-                    left: h("span", { onClick: () => instance.setPage(LeaderboardPage.list) }, iconBack),
-                    middle: locale.Leaderboards
-                };
-        }
-    };
-    const renderCloseBarInLayout = () => {
-        const { left, middle } = getWrapperBarData();
-        return renderCloseBar({
-            left,
-            middle,
-            right: h("span", { onClick: () => instance.close.emit() }, iconClose)
-        });
-    };
-    return (h("div", { class: `Wrapper ${instance.device}` }, h("div", { class: classnames('WrapperContent', { faded: isOpen }) }, renderCloseBarInLayout(), h("div", { class: "Root" }, h("div", { class: "Main" }, render))), h("div", { class: "WrapperUtil" }, h("dialog", { open: isOpen, style: { 'top': instance.getContainerScrollTop() + 'px' } }, h("div", { class: "GradientRounded Hollow" }, renderBar, isOpen && renderDialogContent())))));
+const renderWrapperByPageType = (render) => {
+    return (h("div", { class: "Root" }, h("div", { class: "Main" }, render)));
 };

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

@@ -9,7 +9,7 @@ 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" }, 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)))))))));
     },
     leaderboard(instance) {
         const { locale, tournamentItem } = instance;
@@ -26,7 +26,7 @@ export const tab = {
     },
     games(instance) {
         var _a;
-        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: 'Game', onClick: () => {
+        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: `Game ${instance.currentGameId == game.id ? 'Current' : ''}`, onClick: () => {
                 instance.onGameClick(game);
             } }, h("img", { src: game.defaultThumbnail, alt: "" }))))));
     }

package/dist/collection/utils/api.apdater.js

@@ -24,6 +24,14 @@ export const leaderboardsAdapter = (leaderboardRes) => {
     if (!item) {
         return leaderboards;
     }
+    // show current player's rank info at first row if there is no player info in list
+    const playerRankIndex = leaderboards.findIndex((leaderboard) => {
+        return leaderboard.userId === item.userId;
+    });
+    playerRankIndex === -1 ? leaderboards = [
+        item,
+        ...leaderboards,
+    ] : {};
     return leaderboards.map((leaderboard) => {
         if ((item === null || item === void 0 ? void 0 : item.userId) && item.userId === leaderboard.userId) {
             return Object.assign(Object.assign({}, leaderboard), { isMe: true });

package/dist/collection/utils/bussiness.js

@@ -1,5 +1,4 @@
 import { TournamentState } from "./types";
-import dateFnsFormat from "date-fns/format";
 export const getMaxRankStr = (list) => {
     let itemHaveMaxRank;
     list.map((item) => {
@@ -27,27 +26,3 @@ export const getMaxRankStr = (list) => {
 export const isTournamentClosed = (tournament) => {
     return [TournamentState.Closed, TournamentState.Closing].includes(tournament.state);
 };
-export const getTournamentListByItem = (tournamentList, tournament) => {
-    return tournamentList.map((_tournament) => {
-        if (_tournament.id === tournament.id) {
-            return tournament;
-        }
-        else {
-            return _tournament;
-        }
-    });
-};
-export const getTournamentListParams = (language) => {
-    return {
-        'type': 'InitTournamentList',
-        'messageType': 'apiCall',
-        'method': 'GET',
-        'queryParams': {
-            'filter': `PlayerEnrolled=true,ExhibitionEndTime=${dateFnsFormat(new Date(), 'yyyy-MM-ddThh:mm:ssZ')},TicketStatus=active|closed|completed|released`,
-            'sortField': 'StartTime',
-            'sortOrder': 'asc',
-            'pagination': 'limit=50,offset=0',
-            language
-        }
-    };
-};

package/dist/collection/utils/message.js

@@ -1,25 +1,16 @@
 import { leaderboardsAdapter, tournamentAdapter } from "./api.apdater";
 import { getMaxRankStr } from "./bussiness";
-import { DialogType } from "./types";
+import { DialogType, LeaderboardPage } from "./types";
 export const messageSender = {
-    InitTournamentList: (queryParams) => {
-        window.postMessage(Object.assign({ type: 'InitTournamentList' }, queryParams));
-    },
-    post: (options) => {
-        window.postMessage(Object.assign({}, options));
-    },
     UpdateSuiteBarState: (labels) => window.postMessage({ type: 'UpdateLeaderboardState', labels }),
-    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)
-        });
-    },
+    JoinTournamentReq: (tournament) => window.postMessage({
+        type: 'JoinTournamentReq',
+        id: tournament.id,
+    }),
     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 }),
+    UpdateTournamentsPageIsReady: () => window.postMessage({ type: 'TournamentsPageIsReady' }),
     UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' }),
     GameClickReq: (game) => window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } }),
 };
@@ -40,6 +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,
         // listen to LeaderboardLiveEvent event, handle update
         LeaderboardLiveEvent: (rest) => {
             handleLeaderboardLiveEvent(instance, rest);
@@ -127,7 +119,10 @@ const showErrorMessage = (instance, type) => {
 const commonJoinRes = (instance, rest) => {
     const { success, data } = rest;
     let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.tournamentId || data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
-    current.isActionJoinPending = false;
+    if (tournamentIdx == -1) {
+        return;
+    }
+    current = Object.assign(Object.assign({}, current), { isActionJoinPending: false });
     if (!success) {
         instance.tournamentList[tournamentIdx] = current;
         instance.tournamentList = [...instance.tournamentList];
@@ -137,6 +132,15 @@ const commonJoinRes = (instance, rest) => {
     current = Object.assign(Object.assign({}, current), { isUnjoined: current.isPlayerAcknowledged ? true : false, isPlayerAcknowledged: !!!current.isPlayerAcknowledged });
     instance.tournamentList[tournamentIdx] = current;
     instance.tournamentList = [...instance.tournamentList];
+    if (instance.page === LeaderboardPage.item) {
+        if (current.isUnjoined) {
+            instance.setPage(LeaderboardPage.list);
+            return;
+        }
+        else {
+            instance.tournamentItem = Object.assign({}, current);
+        }
+    }
     if (instance.nextPage) {
         instance.setPage(instance.nextPage);
         instance.nextPage = undefined;
@@ -161,10 +165,14 @@ const removeTournament = (instance, tournament) => {
 };
 const updateOrAddTournamentToList = (instance, tournament) => {
     const index = instance.tournamentList.findIndex((_tournament) => _tournament.id === tournament.id);
-    if (index !== -1) {
-        instance.tournamentList[index] = tournamentAdapter(tournament);
+    if (index === -1) {
+        instance.tournamentList = [
+            tournamentAdapter(tournament),
+            ...instance.tournamentList
+        ];
     }
     else {
-        instance.tournamentList = instance.tournamentList.concat(tournamentAdapter(tournament));
+        instance.tournamentList[index] = tournamentAdapter(tournament);
+        instance.tournamentList = [...instance.tournamentList];
     }
 };

package/dist/collection/utils/util.date.js

@@ -34,6 +34,9 @@ export function getDifference(startDate, endDate) {
     return formattedDiff;
 }
 export function getProgress(startDate, endDate) {
+    if (new Date().getTime() >= endDate.getTime()) {
+        return 100;
+    }
     return ((100 * (new Date().getTime() - startDate.getTime())) / (endDate.getTime() - startDate.getTime())).toFixed(0);
 }
 export function getTimeDifference(startDate, endDate) {

package/dist/esm/{casino-engagement-suite-progress-bar_3.entry.js → casino-engagement-suite-progress-bar_6.entry.js}

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-ac437a77.js';
-export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-bc5e0906.js';
+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';
 
 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;
@@ -65,6 +66,125 @@ const CasinoEngagementSuiteProgressBar = class {
 };
 CasinoEngagementSuiteProgressBar.style = CasinoEngagementSuiteProgressBarStyle0;
 
+const CasinoEngagementSuiteTournamentItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clickToTournamentDetail = createEvent(this, "clickToTournamentDetail", 7);
+        this.tournament = undefined;
+        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);
+    }
+    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"))))));
+    }
+};
+
+const CasinoEngagementSuiteTournamentItemTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.unjoinTournamentEvent = createEvent(this, "unjoinTournamentEvent", 7);
+        this.joinTournamentEvent = createEvent(this, "joinTournamentEvent", 7);
+        this.tournament = undefined;
+        this.locale = TRANSLATIONS;
+        this.isButtonDisabed = false;
+    }
+    onTournamentChanged(tournament) {
+        this.isButtonDisabed = tournament.isActionJoinPending === true;
+    }
+    onClickItemJoin() {
+        if (this.isButtonDisabed) {
+            return;
+        }
+        this.isButtonDisabed = true;
+        if (this.tournament.isPlayerAcknowledged) {
+            this.unjoinTournamentEvent.emit({ type: DialogType.unjoin, tournament: this.tournament });
+        }
+        else {
+            this.joinTournamentEvent.emit(this.tournament);
+        }
+    }
+    componentDidLoad() {
+        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({
+            statedClasses: {
+                isHollow: this.tournament.isPlayerAcknowledged,
+                isPending: this.isButtonDisabed
+            },
+            onClick: (e) => {
+                e.stopPropagation();
+                this.onClickItemJoin();
+            },
+            innerHTML: this.tournament.isPlayerAcknowledged ? this.locale.Unjoin : this.locale.Join
+        })))));
+    }
+    static get watchers() { return {
+        "tournament": ["onTournamentChanged"]
+    }; }
+};
+
+const CasinoEngagementSuiteTournamentTimer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tournament = undefined;
+        this.time = 0;
+        this.timeHolder = undefined;
+        this.timeCloak = true;
+    }
+    containerPageChangeHandler(event) {
+        this.timeCloak = event.detail.page === LeaderboardPage.list ||
+            event.detail.page === LeaderboardPage.item && this.tournament.id === event.detail.tournamentId;
+    }
+    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) &&
+                (timeDifference != this.lastTimeDiff || progress != this.lastProgress)) {
+                this.time++;
+                this.lastProgress = progress;
+                this.lastTimeDiff = timeDifference;
+            }
+        }, 2000);
+    }
+    connectedCallback() {
+        this.setTimeInterval();
+    }
+    disconnectedCallback() {
+        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 }));
+    }
+};
+
 const mergeTranslations = (url, target) => {
     return new Promise((resolve) => {
         fetch(url)
@@ -139,4 +259,4 @@ const GeneralStylingWrapper = class {
 };
 GeneralStylingWrapper.style = GeneralStylingWrapperStyle0;
 
-export { CasinoEngagementSuiteProgressBar as casino_engagement_suite_progress_bar, GeneralStylingWrapper as general_styling_wrapper };
+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 };