@everymatrix/casino-engagement-suite-tournament 1.63.3 → 1.64.0

package/dist/collection/shared/TournamentItem.js

@@ -5,6 +5,7 @@ export class CasinoEngagementSuiteTournamentItem {
     constructor() {
         this.tournament = undefined;
         this.isNew = undefined;
+        this.tid = undefined;
         this.locale = TRANSLATIONS;
     }
     goToDetail() {
@@ -18,7 +19,7 @@ export class CasinoEngagementSuiteTournamentItem {
     }
     render() {
         const tournament = this.tournament;
-        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"))))));
+        return (h("div", { key: 'e4c39f94b5574dc67c1f76d16f21b680db8dbf6c', class: classnames('LeaderboardsItem', tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', tournament.isUnjoined ? 'Unjoined' : ''), onClick: this.goToDetail.bind(this) }, h("div", { key: 'ed40bbbadbe4a216981f0cc0891476c3788c456f', class: "LeaderboardsItemContainer" }, h("tournament-item-title", { key: '655d965507d60b5a90a66b5cf1b20ff744ab7115', tournament: tournament }), h("tournament-timer", { key: 'b6b597921994640725dd57e7991b38604702ba0d', tournament: tournament })), h("div", { key: '1cc278a8ab8faa750427f4dce15140117732d5a1', class: "LeaderboardLabels" }, this.isNew && (h("div", { key: 'b14172c01cc9b930a439113357e630edd0713eae', class: "LeaderboardLabel" }, h("span", { key: 'ab763183adf551c34a749ae39c1719160387a816' }, "new"))))));
     }
     static get is() { return "tournament-item"; }
     static get properties() {
@@ -28,7 +29,7 @@ export class CasinoEngagementSuiteTournamentItem {
                 "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; }",
+                    "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; isTriggered?: boolean; order?: number; }",
                     "references": {
                         "Tournament": {
                             "location": "import",
@@ -61,6 +62,23 @@ export class CasinoEngagementSuiteTournamentItem {
                 },
                 "attribute": "is-new",
                 "reflect": false
+            },
+            "tid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tid",
+                "reflect": false
             }
         };
     }

package/dist/collection/shared/TournamentItemTitle.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { DialogType } from "../utils/types";
 import { renderGradientRoundedButton } from "./GradientRoundedButton";
 import { TRANSLATIONS } from "../utils/translations";
-import { isTournamentClosed } from "../utils/bussiness";
+import { isTournamentEnded } from "../utils/bussiness";
 export class CasinoEngagementSuiteTournamentItemTitle {
     constructor() {
         this.tournament = undefined;
@@ -29,7 +29,7 @@ export class CasinoEngagementSuiteTournamentItemTitle {
         this.isButtonDisabed = this.tournament.isActionJoinPending === true;
     }
     render() {
-        return (h("div", { key: '0226e00da9805f16624a2d60edb020d047ea28ee', class: "TitleContainer" }, h("div", { key: 'e6d55949a27f2b90ca36af51dbe1c52ddd1d9cf9', class: "Title" }, this.tournament.nameOrTitle), !isTournamentClosed(this.tournament) && (h("div", { key: 'f3b030e17ad4f03e20485cb163952b6b1fb05881' }, renderGradientRoundedButton({
+        return (h("div", { key: 'cf8c4dc0cba0ebd8e1da43a32af618d79972f669', class: "TitleContainer" }, h("div", { key: '1707346e5ef14b1379d8a0691f11a425a16f1c13', class: "Title" }, this.tournament.nameOrTitle), !isTournamentEnded(this.tournament) && (h("div", { key: '78a0c86a56fa2b145bb5e7106df441fe6deb116e' }, renderGradientRoundedButton({
             statedClasses: {
                 isHollow: this.tournament.isPlayerAcknowledged,
                 isPending: this.isButtonDisabed
@@ -49,7 +49,7 @@ export class CasinoEngagementSuiteTournamentItemTitle {
                 "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; }",
+                    "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; isTriggered?: boolean; order?: number; }",
                     "references": {
                         "Tournament": {
                             "location": "import",

package/dist/collection/shared/icons.js

@@ -1,10 +1,14 @@
 import { h } from "@stencil/core";
 import reward from "../assets/reward.svg";
+import trophy from "../assets/iconTrophy.svg";
+import iWarn from "../assets/iconWarn.svg";
 import help from "../assets/help.svg";
+import back from "../assets/back.svg";
 export const iconClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.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" });
+export const iconBack = h("img", { src: back, alt: "Back", class: "Back" });
 export const iconReward = h("img", { src: reward, alt: "reward", class: "Reward" });
-export const iconTrophy = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/cup-congras.svg" });
+export const iconTrophy = h("img", { src: trophy, alt: "iconTrophy", class: "Trophy" });
+export const iconWarn = h("img", { src: iWarn, alt: "Reward Assign Failed", class: "Warn" });

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
-import { iconTrophy } from "./icons";
+import { iconTrophy, iconWarn } from "./icons";
 import { localePostprocess } from "../utils/translations";
 import { renderGradientRoundedButton } from "./GradientRoundedButton";
 var GradientButton;
 (function (GradientButton) {
     GradientButton["normal"] = "normal";
+    GradientButton["okContinue"] = "okContinue";
     GradientButton["unjoinYes"] = "unjoinYes";
     GradientButton["unjoinNo"] = "unjoinNo";
 })(GradientButton || (GradientButton = {}));
@@ -14,6 +15,9 @@ const renderButton = (instance, buttonType, isActionJoinPending = false) => {
         normal: {
             innerHTML: locale.WinDialog.ButtonContinue
         },
+        okContinue: {
+            innerHTML: locale.WinDialog.FailedButtonContinue
+        },
         unjoinYes: {
             onClick: () => instance.actionJoin(instance.dialog.data),
             innerHTML: locale.UnjoinDialog.ButtonYes
@@ -38,9 +42,12 @@ const renderButton = (instance, buttonType, isActionJoinPending = false) => {
 };
 export const dialog = {
     gift(instance) {
-        const { name: tournamentName } = instance.gifts[0];
+        const { name: rewards, failedRewards } = instance.gifts[0];
         const { locale } = instance;
-        return (h("div", { class: "PageConfirmContainer" }, h("div", { class: "PageConfirm" }, h("div", null, iconTrophy), h("div", { class: "Title" }, locale.WinDialog.Tile), h("div", { class: "Description", innerHTML: localePostprocess(locale.WinDialog.Description, { tournamentName }) }), h("div", { class: "PageConfirmButtonsGroup" }, renderButton(instance, GradientButton.normal)))));
+        return (h("div", { class: "PageConfirmContainer" }, !!rewards ?
+            h("div", { class: "PageConfirm Gift" }, h("div", null, iconTrophy), h("div", { class: "Title" }, locale.WinDialog.Title), h("div", { class: "Description", innerHTML: localePostprocess(locale.WinDialog.Description, { rewards }) }), h("div", { class: "PageConfirmButtonsGroup" }, renderButton(instance, GradientButton.normal)))
+            :
+                h("div", { class: "PageConfirm Gift" }, h("div", null, iconWarn), h("div", { class: "Title", innerHTML: localePostprocess(locale.WinDialog.FailedTitle, { failedRewards }) }), h("div", { class: "Description" }, locale.WinDialog.FailedDescription), h("div", { class: "PageConfirmButtonsGroup" }, renderButton(instance, GradientButton.okContinue)))));
     },
     unjoin(instance) {
         const { locale } = instance;

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

@@ -12,7 +12,9 @@ export const page = {
         }
         const { locale } = instance;
         if (instance.tournamentList.length) {
-            return renderWrapperByPageType(h("div", { class: "Leaderboards ScrollBar Row" }, instance.tournamentList.map((_tournament) => (h("tournament-item", { tournament: _tournament, isNew: instance.newIdList.includes(_tournament.id) })))));
+            return renderWrapperByPageType(h("div", { class: "Leaderboards ScrollBar Row" }, instance.tournamentList.map((_tournament, idx) => (
+            // @ts-ignore
+            h("tournament-item", { tid: _tournament.id, key: _tournament.id, tournament: _tournament, style: { 'order': `${_tournament.order || idx}` }, 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)));

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

@@ -8,7 +8,11 @@ export const tab = {
     info(instance) {
         var _a, _b;
         const { locale, tournamentItem: tournament, isShowInfo } = instance;
-        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)))))))));
+        const playerRank = getResultPrize((_a = instance.leaderboards) === null || _a === void 0 ? void 0 : _a.find((l) => l.isMe));
+        const rewardInfo = !(playerRank === null || playerRank === void 0 ? void 0 : playerRank.place) || (playerRank === null || playerRank === void 0 ? void 0 : playerRank.unqualified)
+            ? ''
+            : localePostprocess(((playerRank === null || playerRank === void 0 ? void 0 : playerRank.prize) ? locale.TipPrize : locale.TipPrizeWithoutReward), playerRank);
+        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) && ((_b = instance.leaderboards) === null || _b === void 0 ? void 0 : _b.find((l) => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: rewardInfo })), h("section", { class: "PrizesContainer" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), h("div", { class: "Prizes" }, tournament.prizes.map((prize) => (h("div", { class: "Prize" }, h("span", { class: 'Rank' }, prize.rank, " ", prize.count === 1 ? '' : ` - ${(prize.rank + prize.count - 1)}`), prize.count === 1 ? locale.Place : locale.Places, ": ", h("span", { class: "PrizeText" }, prize.name)))))))));
     },
     leaderboard(instance) {
         const { locale, tournamentItem } = instance;
@@ -25,6 +29,8 @@ export const tab = {
     },
     games(instance) {
         var _a;
+        if (!instance.tournamentItem.games || !instance.tournamentItem.games.length)
+            return h("general-animation-loading", null);
         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: "" }))))));
@@ -32,7 +38,8 @@ export const tab = {
 };
 const getResultPrize = (leaderboard) => {
     return {
-        prize: leaderboard.prizeName,
-        place: leaderboard.rank
+        prize: leaderboard === null || leaderboard === void 0 ? void 0 : leaderboard.prizeName,
+        place: leaderboard === null || leaderboard === void 0 ? void 0 : leaderboard.rank,
+        unqualified: leaderboard === null || leaderboard === void 0 ? void 0 : leaderboard.unqualified,
     };
 };

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

@@ -19,6 +19,20 @@ export const tournamentAdapter = (tournamentApi) => {
     });
     return tournament;
 };
+export const updateTournament = (target, source) => {
+    const keysTime = [
+        'startTime',
+        'endTime',
+        'closeTime',
+        'exhibitionStartTime',
+        'exhibitionEndTime', 'state',
+        'prizes', 'minBetCount', 'scoreCriteria', 'termsUrl'
+    ];
+    keysTime.forEach((key) => {
+        target[key] = source[key];
+    });
+    return Object.assign({}, target);
+};
 export const leaderboardsAdapter = (leaderboardRes) => {
     let { item, items: leaderboards } = leaderboardRes;
     if (!item) {

package/dist/collection/utils/bussiness.js

@@ -1,4 +1,5 @@
-import { TournamentState } from "./types";
+import { RewardType, TournamentState } from "./types";
+export const DEFAULT_PAGE_SIZE = 12;
 export const getMaxRankStr = (playerLeaderboards) => {
     let bestRank = null;
     (playerLeaderboards || []).map((playerLeaderboard) => {
@@ -9,8 +10,33 @@ export const getMaxRankStr = (playerLeaderboards) => {
         }
         bestRank = !bestRank || ((_a = bestRank.leaderBoard) === null || _a === void 0 ? void 0 : _a.rank) > rank ? playerLeaderboard : bestRank;
     });
-    return bestRank ? `${bestRank.leaderBoard.rank} / ${bestRank.endRank}` : '-';
+    return {
+        rank: bestRank ? `${bestRank.leaderBoard.rank} / ${bestRank.endRank}` : '-',
+        detail: bestRank ? {
+            playerRank: bestRank.leaderBoard.rank,
+            total: bestRank.endRank
+        } : null
+    };
 };
 export const isTournamentClosed = (tournament) => {
+    return [TournamentState.Closed].includes(tournament.state);
+};
+export const isTournamentEnded = (tournament) => {
     return [TournamentState.Closed, TournamentState.Closing].includes(tournament.state);
 };
+export const getRewardNameByType = (reward) => {
+    switch (reward.type) {
+        case RewardType.FreeSpin:
+            return reward.campaignName;
+        case RewardType.Mission:
+            return reward.challengeName;
+        case RewardType.Leaderboard:
+            return reward.ticketProgramName;
+        case RewardType.LuckyWheel:
+            return reward.prizeEngineProgramName;
+        case RewardType.Custom:
+            return reward.value;
+        default:
+            return reward.name;
+    }
+};

package/dist/collection/utils/message.js

@@ -1,5 +1,5 @@
-import { leaderboardsAdapter, tournamentAdapter } from "./api.apdater";
-import { getMaxRankStr } from "./bussiness";
+import { leaderboardsAdapter, tournamentAdapter, updateTournament } from "./api.apdater";
+import { getMaxRankStr, getRewardNameByType } from "./bussiness";
 import { DialogType, LeaderboardPage } from "./types";
 export const messageSender = {
     UpdateSuiteBarState: (labels) => window.postMessage({ type: 'UpdateLeaderboardState', labels }),
@@ -16,28 +16,35 @@ export const messageSender = {
     GameClickReq: (game) => window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } }),
 };
 export const messageReceiver = (instance) => {
-    const receiver = {
+    return {
         UpdateLeaderboardsPlayerRes: (rest) => {
-            window.postMessage({ type: 'UpdateLeaderboardState', rank: getMaxRankStr(rest.data.items) });
+            const { rank, detail } = (getMaxRankStr(rest.data.items));
+            window.postMessage({ type: 'UpdateLeaderboardState', rank, detail });
         },
         UpdateLeaderboardStateReq: () => {
             window.postMessage({ type: 'UpdateLeaderboardState', labels: ['win', 'new'] });
         },
+        /*
+        * Update tournament games list when switch to game tab in detail page
+        */
         UpdateTournamentsItemRes: (rest) => {
             const tournamentNew = tournamentAdapter(rest.data.item);
             instance.tournamentItem = tournamentNew;
             updateTournamentListByItem(instance, tournamentNew);
         },
-        UpdateLeaderboardsRes: (rest) => processLeaderboardTableData(instance, rest),
-        JoinTournamentRes: (rest) => commonJoinRes(instance, rest),
-        UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest),
+        UpdateLeaderboardsRes: (rest) => initPlayerLeaderboard(instance, rest),
+        //Parse the join tournament response
+        JoinTournamentRes: (rest) => commonJoinRes(instance, rest, true),
+        //Parse the unjoin tournament response
+        UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest, false),
+        //Parse recieved init  message when widget is loaded
         TournamentsPageIsReadyRes: (rest) => instance.currentGameId = '' + rest.data.GameId,
         // listen to LeaderboardLiveEvent event, handle update
-        LeaderboardLiveEvent: (rest) => {
-            handleLeaderboardLiveEvent(instance, rest);
-        },
+        LeaderboardLiveEvent: (rest) => handleLeaderboardLiveEvent(instance, rest),
+        LiveLeaderboardUpdate: (rest) => updateLeaderboardInfo(instance, Object.assign(Object.assign({}, rest), { messageType: 'LeaderboardUpdate' })),
+        LiveTournamentUpdate: (rest) => updateTournamentInfo(instance, Object.assign(Object.assign({}, rest), { messageType: 'TournamentUpdate' })),
+        LiveLeaderboardFinalizeUpdate: (rest) => updatePlayerRewardInfo(instance, Object.assign(Object.assign({}, rest), { messageType: 'PlayerFinalizeUpdate' })),
     };
-    return receiver;
 };
 /**
  * Handle LeaderboardLiveEvent update event
@@ -113,33 +120,45 @@ const handleLeaderboardLiveEvent = (instance, rest) => {
         }
     }
 };
-const showErrorMessage = (instance, type) => {
-    instance.dialog = Object.assign(Object.assign({}, instance.dialog), { isOpen: true, type });
+const clearUnjoinedTournament = (instance, unjoinedTournamentId) => {
+    const clearId = setTimeout(() => {
+        instance.tournamentList = instance.tournamentList.filter((tournament) => {
+            return tournament.id !== unjoinedTournamentId;
+        });
+        clearTimeout(clearId);
+    }, 100);
 };
-const commonJoinRes = (instance, rest) => {
+const commonJoinRes = (instance, rest, isJoinRes) => {
     const { success, data } = rest;
     let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.tournamentId || data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
     if (tournamentIdx == -1) {
         return;
     }
-    current = Object.assign(Object.assign({}, current), { isActionJoinPending: false });
+    current.isActionJoinPending = false;
     instance.pendingChangeEvent.emit(current);
     if (!success) {
         instance.tournamentList[tournamentIdx] = current;
         instance.tournamentList = [...instance.tournamentList];
-        showErrorMessage(instance, DialogType.error);
+        instance.openDialog(DialogType.error);
         return;
     }
-    current = Object.assign(Object.assign({}, current), { isUnjoined: current.isPlayerAcknowledged ? true : false, isPlayerAcknowledged: !!!current.isPlayerAcknowledged });
-    instance.tournamentList[tournamentIdx] = current;
+    if (isJoinRes) {
+        current.isPlayerAcknowledged = true;
+        current.order = instance.minOrder--;
+    }
+    else {
+        current.isUnjoined = true;
+        clearUnjoinedTournament(instance, data.tournamentId);
+    }
+    instance.tournamentList[tournamentIdx] = Object.assign({}, current);
     instance.tournamentList = [...instance.tournamentList];
     if (instance.page === LeaderboardPage.item) {
-        if (current.isUnjoined) {
-            instance.setPage(LeaderboardPage.list);
-            return;
+        if (isJoinRes) {
+            instance.tournamentItem = Object.assign({}, current);
         }
         else {
-            instance.tournamentItem = Object.assign({}, current);
+            instance.setPage(LeaderboardPage.list);
+            return;
         }
     }
     if (instance.nextPage) {
@@ -147,17 +166,21 @@ const commonJoinRes = (instance, rest) => {
         instance.nextPage = undefined;
     }
 };
-const processLeaderboardTableData = (instance, rest) => {
+const initPlayerLeaderboard = (instance, rest) => {
     instance.leaderboards = leaderboardsAdapter(rest.data);
-    instance.currentPlyerRank = rest.data.item ? rest.data.item.rank : -1;
+    instance.currentPlayerRank = rest.data.item ? rest.data.item.rank : -1;
 };
 /*
  * update tournament info, include status, name or duration change
  */
 const updateTournamentListByItem = (instance, tournament) => {
+    const newTournament = tournamentAdapter(tournament);
+    if (instance.tournamentItem.id === tournament.id) {
+        instance.tournamentItem = Object.assign({}, updateTournament(instance.tournamentItem, newTournament));
+    }
     instance.tournamentList = instance.tournamentList.map((_tournament) => {
         if (_tournament.id === tournament.id) {
-            return tournamentAdapter(tournament);
+            return Object.assign({}, updateTournament(_tournament, newTournament));
         }
         else {
             return _tournament;
@@ -168,8 +191,8 @@ const removeTournament = (instance, tournament) => {
     instance.tournamentList = instance.tournamentList.filter((_tournament) => _tournament.id !== tournament.id);
 };
 const updateOrAddTournamentToList = (instance, tournament) => {
-    const index = instance.tournamentList.findIndex((_tournament) => _tournament.id === tournament.id);
-    if (index === -1) {
+    const index = instance.tournamentList.findIndex(_tournament => _tournament.id === tournament.id);
+    if (index === -1) { //not found in list, handle it as new tournament
         instance.tournamentList = [
             tournamentAdapter(tournament),
             ...instance.tournamentList
@@ -180,3 +203,57 @@ const updateOrAddTournamentToList = (instance, tournament) => {
         instance.tournamentList = [...instance.tournamentList];
     }
 };
+const updateTournamentInfo = (instance, rest) => {
+    try {
+        const updateMessageObj = JSON.parse(rest.data.Message);
+        updateTournamentListByItem(instance, updateMessageObj);
+    }
+    catch (e) {
+        console.error('Exception when parse Player Tournament Info', e);
+    }
+};
+const updatePlayerRewardInfo = (instance, rest) => {
+    try {
+        const updateMessageObj = JSON.parse(rest.data.Message);
+        const assignFailedRewards = updateMessageObj.rewards.filter(item => item.status && item.status !== 'success')
+            .map(reward => getRewardNameByType(reward)).join(',');
+        const assignedRewards = updateMessageObj.rewards.filter(item => !!item.assigned && item.status === 'success')
+            .map(reward => getRewardNameByType(reward)).join(',');
+        if (assignFailedRewards.length) {
+            instance.gifts = [{ name: null, failedRewards: assignFailedRewards }, ...instance.gifts];
+        }
+        if (assignedRewards.length) {
+            instance.gifts = [{ name: assignedRewards }, ...instance.gifts];
+        }
+        instance.checkGift();
+    }
+    catch (e) {
+        console.error('Exception when parse Player LeaderboardFinalize info', e);
+    }
+};
+const updateLeaderboardInfo = (instance, rest) => {
+    var _a;
+    try {
+        const updateMessageObj = JSON.parse(rest.data.Message);
+        const { PlayerLeaderBoard, TournamentId, TournamentLeaderBoardDto } = updateMessageObj;
+        //update user rank in UI-bar by parsing PlayerLeaderboard
+        if (PlayerLeaderBoard) {
+            window.postMessage({ type: 'UpdateLeaderboardState',
+                rank: `${PlayerLeaderBoard.rank} / ${TournamentLeaderBoardDto.totalRecords}`,
+                detail: {
+                    playerRank: PlayerLeaderBoard.rank,
+                    total: TournamentLeaderBoardDto.totalRecords
+                }
+            });
+        }
+        if (((_a = instance.tournamentItem) === null || _a === void 0 ? void 0 : _a.id) == TournamentId) {
+            initPlayerLeaderboard(instance, { data: {
+                    item: Object.assign({}, PlayerLeaderBoard),
+                    items: [...TournamentLeaderBoardDto.players]
+                } });
+        }
+    }
+    catch (err) {
+        console.error('Exception when parse live update info, ', err);
+    }
+};

package/dist/collection/utils/translations.js

@@ -15,13 +15,16 @@ export const localePostprocess = (translationText, props) => {
     });
     return translationText;
 };
-export const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'Join', Unjoin: 'Unjoin' }, Tab), Time), { TC: 'Terms & Conditions', ScoreCriteria: 'Score Criteria', MinimumBetCriteria: 'Minimum bet criteria', Place: 'place', Prizes: 'Rewards', LeaderboardDetails: 'Leaderboard Details', UnjoinDialog: {
+export const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'Join', Unjoin: 'Unjoin' }, Tab), Time), { TC: 'Terms & Conditions', ScoreCriteria: 'Score Criteria', MinimumBetCriteria: 'Minimum bet criteria', Place: 'place', Places: 'places', Prizes: 'Rewards', LeaderboardDetails: 'Leaderboard Details', UnjoinDialog: {
         Title: 'Quit Leaderboard?',
         Description: 'Any progress on the current Leaderboard won’t be kept and you can not rejoin the Leaderboard any more. <br /><br />Would you still like to quit?',
         ButtonYes: 'Yes, I want to quit leaderboard',
         ButtonNo: 'No, Stay on the leaderboard'
     }, WinDialog: {
-        Tile: 'Congratulations!',
-        Description: 'You won <span>{tournamentName}</span>!',
-        ButtonContinue: 'Continue'
-    }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.', TournamentNotStarted: 'The leaderboard is not started yet. <br> It will start in {startTime}.', BeOne: 'No winners for the time being. Be one of them!', FailedToJoin: 'Oops! some unexpected error happened, please try it again.', FailedToUnjoin: 'Oops! some unexpected error happened, please try it again.' });
+        Title: 'Congratulations!',
+        Description: 'You won <span>{rewards}</span>!',
+        ButtonContinue: 'Continue',
+        FailedTitle: 'Reward cannot be issued',
+        FailedDescription: 'Please contact support.',
+        FailedButtonContinue: 'Ok, continue',
+    }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', TipPrizeWithoutReward: 'You took <span>{place}</span> place</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.', TournamentNotStarted: 'The leaderboard is not started yet. <br> It will start in {startTime}.', BeOne: 'No winners for the time being. Be one of them!', FailedToJoin: 'Oops! some unexpected error happened, please try it again.', FailedToUnjoin: 'Oops! some unexpected error happened, please try it again.' });

package/dist/collection/utils/types.js

@@ -10,6 +10,14 @@ export var TournamentState;
     TournamentState["Closed"] = "Closed";
     TournamentState["Closing"] = "Closing";
 })(TournamentState || (TournamentState = {}));
+export var RewardType;
+(function (RewardType) {
+    RewardType["FreeSpin"] = "FreeSpin";
+    RewardType["Mission"] = "Challenge";
+    RewardType["Leaderboard"] = "TournamentTicket";
+    RewardType["Custom"] = "Custom";
+    RewardType["LuckyWheel"] = "PrizeEngine";
+})(RewardType || (RewardType = {}));
 export var DialogType;
 (function (DialogType) {
     DialogType["unjoin"] = "unjoin";

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

@@ -37,12 +37,13 @@ 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);
+    return Math.floor((100 * (new Date().getTime() - startDate.getTime())) / (endDate.getTime() - startDate.getTime()));
 }
-export function getTimeDifference(startDate, endDate) {
+export function getTimeDifference(startDate, endDate, progress = 0) {
     const diffMs = Math.abs(endDate.getTime() - startDate.getTime()); // Difference in milliseconds
     const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // Difference in days
     const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // Remaining hours
     const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); // Remaining minutes
-    return `${String(diffDays).padStart(2, '0')}d:${String(diffHours).padStart(2, '0')}h:${String(diffMinutes).padStart(2, '0')}m`;
+    const min = progress === 100 ? 0 : diffMinutes === 0 ? 1 : diffMinutes;
+    return `${String(diffDays).padStart(2, '0')}d:${String(diffHours).padStart(2, '0')}h:${String(min).padStart(2, '0')}m`;
 }

package/dist/collection/utils/utils.js

@@ -17,8 +17,7 @@ export const classnames = (...args) => {
     return classnameArray.join(' ');
 };
 export const getNewItems = (newList, oldList, getCondition) => {
-    const newItems = newList.filter((newItem) => !oldList.some((oldItem) => getCondition(newItem, oldItem)));
-    return newItems;
+    return newList.filter(newItem => !oldList.some(oldItem => getCondition(newItem, oldItem)));
 };
 /**
  * Truncate number to specified decimal places (without rounding)
@@ -85,3 +84,7 @@ export const getDevicePlatform = () => {
         }
     }
 };
+export function getScreenOrientation() {
+    const orientation = window.screen.orientation.type;
+    return orientation.includes('portrait') ? 'Portrait' : 'Landscape';
+}

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, 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';
+import { T as TRANSLATIONS, c as classnames, D as DialogType, i as isTournamentEnded, r as renderGradientRoundedButton, L as LeaderboardPage, g as getProgress, a as getTimeDifference, f as formatDate } from './casino-engagement-suite-tournament-61d378cd.js';
+export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-61d378cd.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;
@@ -146,6 +146,7 @@ const CasinoEngagementSuiteTournamentItem = class {
         this.clickToTournamentDetail = createEvent(this, "clickToTournamentDetail", 7);
         this.tournament = undefined;
         this.isNew = undefined;
+        this.tid = undefined;
         this.locale = TRANSLATIONS;
     }
     goToDetail() {
@@ -159,7 +160,7 @@ const CasinoEngagementSuiteTournamentItem = class {
     }
     render() {
         const tournament = this.tournament;
-        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"))))));
+        return (h("div", { key: 'e4c39f94b5574dc67c1f76d16f21b680db8dbf6c', class: classnames('LeaderboardsItem', tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', tournament.isUnjoined ? 'Unjoined' : ''), onClick: this.goToDetail.bind(this) }, h("div", { key: 'ed40bbbadbe4a216981f0cc0891476c3788c456f', class: "LeaderboardsItemContainer" }, h("tournament-item-title", { key: '655d965507d60b5a90a66b5cf1b20ff744ab7115', tournament: tournament }), h("tournament-timer", { key: 'b6b597921994640725dd57e7991b38604702ba0d', tournament: tournament })), h("div", { key: '1cc278a8ab8faa750427f4dce15140117732d5a1', class: "LeaderboardLabels" }, this.isNew && (h("div", { key: 'b14172c01cc9b930a439113357e630edd0713eae', class: "LeaderboardLabel" }, h("span", { key: 'ab763183adf551c34a749ae39c1719160387a816' }, "new"))))));
     }
 };
 
@@ -192,7 +193,7 @@ const CasinoEngagementSuiteTournamentItemTitle = class {
         this.isButtonDisabed = this.tournament.isActionJoinPending === true;
     }
     render() {
-        return (h("div", { key: '0226e00da9805f16624a2d60edb020d047ea28ee', class: "TitleContainer" }, h("div", { key: 'e6d55949a27f2b90ca36af51dbe1c52ddd1d9cf9', class: "Title" }, this.tournament.nameOrTitle), !isTournamentClosed(this.tournament) && (h("div", { key: 'f3b030e17ad4f03e20485cb163952b6b1fb05881' }, renderGradientRoundedButton({
+        return (h("div", { key: 'cf8c4dc0cba0ebd8e1da43a32af618d79972f669', class: "TitleContainer" }, h("div", { key: '1707346e5ef14b1379d8a0691f11a425a16f1c13', class: "Title" }, this.tournament.nameOrTitle), !isTournamentEnded(this.tournament) && (h("div", { key: '78a0c86a56fa2b145bb5e7106df441fe6deb116e' }, renderGradientRoundedButton({
             statedClasses: {
                 isHollow: this.tournament.isPlayerAcknowledged,
                 isPending: this.isButtonDisabed
@@ -224,14 +225,14 @@ const CasinoEngagementSuiteTournamentTimer = class {
             (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);
+        this.lastTimeDiff = getTimeDifference(new Date(), this.tournament.endTime, this.lastProgress);
     }
     setTimeInterval() {
         this.timeHolder = setInterval(() => {
-            const timeDifference = getTimeDifference(new Date(), this.tournament.endTime);
             const progress = getProgress(this.tournament.startTime, this.tournament.endTime);
-            if (this.timeClock && !isTournamentClosed(this.tournament) &&
+            const timeDifference = getTimeDifference(new Date(), this.tournament.endTime, progress);
+            if (this.timeClock && !isTournamentEnded(this.tournament) &&
                 (timeDifference != this.lastTimeDiff || progress != this.lastProgress)) {
                 this.lastProgress = progress;
                 this.lastTimeDiff = timeDifference;
@@ -245,15 +246,15 @@ const CasinoEngagementSuiteTournamentTimer = class {
         clearInterval(this.timeHolder);
     }
     render() {
-        return h("section", { key: '8fafe729af2bd66b5ac0e980564051069f677531', class: "TimeContainer" }, h("div", { key: '8279572700e24d3f1094809dae6e3b5d1b02c37b', class: "Time" }, this.tournament.state === 'Running'
+        return h("section", { key: '11426165a8f384d97f2b0158f7435f80ac0965a2', class: "TimeContainer" }, h("div", { key: 'b86c8a42a73b358fcc855a853cb322d1d314471a', class: "Time" }, this.tournament.state === 'Running'
             ? h("div", { class: "Running" }, h("div", null, this.lastTimeDiff), h("div", null, renderGradientRoundedButton({
                 statedClasses: {
                     isHollow: true,
-                    isPendding: false
+                    isPending: !!this.tournament.isActionJoinPending
                 },
-                innerHTML: `${getProgress(this.tournament.startTime, this.tournament.endTime)}%`
+                innerHTML: `${this.lastProgress}%`
             })))
-            : [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 }));
+            : [h("div", { class: "NotRunning" }, formatDate(this.tournament.startTime)), h("div", null, formatDate(this.tournament.endTime))]), h("casino-engagement-suite-progress-bar", { key: '7f98e88679f30d0a0737d94ee806b1d92800b6a3', indeterminate: false, value: Number(this.lastProgress >= 100 ? 100 : this.lastProgress), "hide-percent": true }));
     }
 };