@everymatrix/casino-engagement-suite-tournament 1.46.0 → 1.46.1

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

@@ -0,0 +1,117 @@
+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 = {
+    list(instance) {
+        var _a;
+        if (!instance.tournamentList) {
+            instance.tournamentList = (_a = instance.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map(item => tournamentAdapter(item));
+            return h("general-animation-loading", null);
+        }
+        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.playerEnrolled ? ' GradientRounded Hollow' : ''), onClick: () => onClickListItemChangePage(_tournament) }, h("div", { class: "LeaderboardsItemContainer" }, renderTitleContainer(instance, _tournament), renderTimeBar(instance, _tournament)), h("div", { class: "LeaderboardLabels" }, instance.newIdList.includes(_tournament.id) && (h("div", { class: "LeaderboardLabel" }, h("span", null, "new")))))))));
+        }
+        else {
+            return renderLeaderboardContainer(instance, h("div", { class: "NoLeaderboards Row" }, h("div", null, locale.NoLeaderboards), h("div", null, locale.NoLeaderboardsTip)));
+        }
+    },
+    item(instance) {
+        if (!instance.tournamentItem)
+            return h("general-animation-loading", null);
+        const renderTabs = () => {
+            const { locale, tab } = instance;
+            const onClickTab = (tab) => {
+                instance.tab = tab;
+                switch (tab) {
+                    case Tab.leaderboard:
+                        instance.leaderboards = undefined;
+                        messageSender.UpdateLeaderboardsReq(instance.tournamentItem);
+                        break;
+                    case Tab.games:
+                        messageSender.UpdateTournamentsItemReq(instance.tournamentItem);
+                        break;
+                }
+            };
+            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),
+            renderTabs(),
+            instance.renders.tab[instance.tab]()
+        ]);
+    },
+};
+const renderTitleContainer = (instance, tournament) => {
+    const { locale } = instance;
+    const onClickItemJoin = (tournament) => {
+        if (tournament.playerEnrolled) {
+            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.playerEnrolled,
+            isPending: instance.isActionJoinPending,
+        },
+        onClick: (e) => {
+            e.stopPropagation();
+            onClickItemJoin(tournament);
+        },
+        innerHTML: tournament.playerEnrolled ? 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(); //renderDialogContentUnjoin()
+            case DialogType.tip:
+                return (h("div", { class: "Tip" }, instance.locale.Tip));
+            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) }, iconQuestion),
+                    middle: locale.Leaderboards
+                };
+            case LeaderboardPage.item:
+                return {
+                    left: (h("span", { onClick: () => instance.setPage(LeaderboardPage.list) }, iconBack)),
+                    middle: '',
+                };
+        }
+    };
+    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 }, h("div", { class: "GradientRounded Hollow" }, renderBar, isOpen && renderDialogContent())))));
+};

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

@@ -0,0 +1,30 @@
+import { h } from "@stencil/core";
+import { localePostprocess } from "../utils/translations";
+import { iconEyeClose, iconEyeOpen, iconReward } from "./icons";
+import { classnames } from "../utils/utils";
+import { renderTimeBar } from "./renders.util";
+import { isTournamentClosed } from "../utils/bussiness";
+export const tab = {
+    info(instance) {
+        var _a, _b;
+        const { locale, tournamentItem: tournament, isShowInfo } = instance;
+        return (h("div", { class: "InfoContainer" }, renderTimeBar(instance, tournament), (h("section", { class: "ShowInfo", onClick: () => instance.isShowInfo = !instance.isShowInfo }, h("p", null, h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen), h("span", null, locale.LeaderboardDetails)))), isShowInfo && (h("section", { class: "Info" }, h("div", null, 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))), 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: "Prizes" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))));
+    },
+    leaderboard(instance) {
+        if (!instance.leaderboards)
+            return h("general-animation-loading", null);
+        if (!instance.leaderboards.length)
+            return '';
+        return (h("table", { class: "Leaderboards" }, instance.leaderboards.map(leaderboard => (h("tr", { class: classnames({ isMe: leaderboard.isMe }) }, h("td", { class: "LeaderboardRank" }, h("span", null, leaderboard.rank)), h("td", { class: "LeaderboardName" }, leaderboard.shortName), h("td", { class: "LeaderboardScore" }, leaderboard.score), h("td", { class: "LeaderboardPrize" }, leaderboard.prizeName))))));
+    },
+    games(instance) {
+        var _a;
+        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map(game => (h("div", null, h("img", { src: game.defaultThumbnail, alt: "" }))))));
+    },
+};
+const getResultPrize = (leaderboard) => {
+    return {
+        prize: leaderboard.prizeName,
+        place: leaderboard.rank,
+    };
+};

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

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+import { addSeconds, formatDate, getDifference, getProgress } from "../utils/util.date";
+import { renderGradientRoundedButton } from "./GradientRoundedButton";
+export const renderTimeBar = (instance, tournament) => {
+    return (h("section", { class: "TimeContainer" }, h("div", { class: 'Time' }, tournament.playerEnrolled ? ([
+        h("div", null, getDifference(addSeconds(tournament.startTime, instance.time), tournament.endTime)),
+        h("div", null, renderGradientRoundedButton({
+            statedClasses: {
+                isHollow: true,
+                isPendding: false,
+            },
+            innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%`
+        }))
+    ]) : ([
+        h("div", null, formatDate(tournament.startTime)),
+        h("div", null, formatDate(tournament.endTime))
+    ])), h("casino-engagement-suite-progress-bar", { value: Number(getProgress(tournament.startTime, tournament.endTime)), "hide-percent": true })));
+};

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

@@ -4,7 +4,7 @@ export const tournamentAdapter = (tournamentApi) => {
         'endTime',
         'closeTime',
         'exhibitionStartTime',
-        'exhibitionEndTime',
+        'exhibitionEndTime'
     ];
     const tournament = {};
     Object.keys(tournamentApi).map((key) => {
@@ -24,7 +24,7 @@ export const leaderboardsAdapter = (leaderboardRes) => {
     if (!item) {
         return leaderboards;
     }
-    return leaderboards.map(leaderboard => {
+    return leaderboards.map((leaderboard) => {
         if (item && item.userID === leaderboard.userID) {
             return Object.assign(Object.assign({}, leaderboard), { isMe: true });
         }

package/dist/collection/utils/bussiness.js

@@ -0,0 +1,38 @@
+import { TournamentState } from "./types";
+export const getMaxRankStr = (list) => {
+    let itemHaveMaxRank;
+    list.map((item) => {
+        var _a;
+        const rank = (_a = item.leaderBoard) === null || _a === void 0 ? void 0 : _a.rank;
+        if (!rank) {
+            return;
+        }
+        if (!itemHaveMaxRank) {
+            itemHaveMaxRank = item;
+            return;
+        }
+        else {
+            if (rank < itemHaveMaxRank.leaderBoard.rank) {
+                itemHaveMaxRank = item;
+            }
+        }
+    });
+    if (!itemHaveMaxRank) {
+        return '-';
+    }
+    const maxRankStr = `${itemHaveMaxRank.leaderBoard.rank} / ${itemHaveMaxRank.endRank}`;
+    return maxRankStr;
+};
+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;
+        }
+    });
+};

package/dist/collection/utils/message.js

@@ -0,0 +1,63 @@
+import { leaderboardsAdapter, tournamentAdapter } from "./api.apdater";
+import { getMaxRankStr } from "./bussiness";
+import { LeaderboardPage } from "./types";
+export const messageSender = {
+    UpdateSuiteBarState: (labels) => window.postMessage({ type: 'UpdateLeaderboardState', labels }),
+    JoinTournamentReq: (tournament) => { var _a, _b; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_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 }),
+    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' })
+};
+export const messageReceiver = (instance) => {
+    const receiver = {
+        UpdateLeaderboardsPlayerRes: (rest) => {
+            const rankStr = getMaxRankStr(rest.data.items);
+            window.postMessage({ type: 'UpdateLeaderboardState', rank: rankStr });
+        },
+        UpdateLeaderboardStateReq: () => {
+            window.postMessage({ type: 'UpdateLeaderboardState', labels: ['win', 'new'] });
+        },
+        UpdateTournamentsItemRes: (rest) => {
+            const tournamentNew = tournamentAdapter(rest.data.item);
+            instance.tournamentItem = tournamentNew;
+            updateTournamentListByItem(instance, tournamentNew);
+        },
+        UpdateLeaderboardsRes: (rest) => {
+            instance.leaderboards = leaderboardsAdapter(rest.data);
+        },
+        JoinTournamentRes: (rest) => commonJoinRes(instance, rest),
+        UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest)
+    };
+    return receiver;
+};
+const commonJoinRes = (instance, rest) => {
+    const { success } = rest;
+    if (success) {
+        instance.tournamentItem = Object.assign(Object.assign({}, instance.tournamentItem), { playerEnrolled: !!!instance.tournamentItem.playerEnrolled });
+        switch (instance.page) {
+            case LeaderboardPage.item: {
+                break;
+            }
+            case LeaderboardPage.list: {
+                updateTournamentListByItem(instance, instance.tournamentItem);
+                break;
+            }
+        }
+    }
+    if (instance.nextPage) {
+        instance.setPage(instance.nextPage);
+        instance.nextPage = undefined;
+    }
+    instance.isActionJoinPending = false;
+};
+const updateTournamentListByItem = (instance, tournament) => {
+    instance.tournamentList = instance.tournamentList.map((_tournament) => {
+        if (_tournament.id === tournament.id) {
+            return tournamentAdapter(tournament);
+        }
+        else {
+            return _tournament;
+        }
+    });
+};

package/dist/collection/utils/translations.js

@@ -1,8 +1,8 @@
 export var Tab;
 (function (Tab) {
-    Tab["Info"] = "Info";
-    Tab["Leaderboard"] = "Leaderboard";
-    Tab["Games"] = "Games";
+    Tab["info"] = "info";
+    Tab["leaderboard"] = "leaderboard";
+    Tab["games"] = "games";
 })(Tab || (Tab = {}));
 export var Time;
 (function (Time) {
@@ -10,7 +10,7 @@ export var Time;
     Time["Ends"] = "Ends";
 })(Time || (Time = {}));
 export const localePostprocess = (translationText, props) => {
-    Object.keys(props).map(key => {
+    Object.keys(props).map((key) => {
         translationText = translationText.replace(`{${key}}`, props[key]);
     });
     return translationText;
@@ -19,10 +19,9 @@ export const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'J
         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',
-    }, JoinDialog: {
+        ButtonNo: 'No, Stay on the leaderboard'
+    }, WinDialog: {
         Tile: 'Congratulations!',
-        Description: 'You have unlocked <span>{tournamentName}</span>! <br />Would you like to join?',
-        ButtonYes: 'Join',
-        ButtonNo: 'Not interested',
+        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.' });

package/dist/collection/utils/types.js

@@ -1,8 +1,7 @@
 export var LeaderboardPage;
 (function (LeaderboardPage) {
-    LeaderboardPage["Confirm"] = "Confirm";
-    LeaderboardPage["List"] = "List";
-    LeaderboardPage["Item"] = "Item";
+    LeaderboardPage["list"] = "list";
+    LeaderboardPage["item"] = "item";
 })(LeaderboardPage || (LeaderboardPage = {}));
 export var TournamentState;
 (function (TournamentState) {
@@ -13,6 +12,7 @@ export var TournamentState;
 })(TournamentState || (TournamentState = {}));
 export var DialogType;
 (function (DialogType) {
-    DialogType["Unjoin"] = "Unjoin";
-    DialogType["Tip"] = "Tip";
+    DialogType["unjoin"] = "unjoin";
+    DialogType["tip"] = "tip";
+    DialogType["gift"] = "gift";
 })(DialogType || (DialogType = {}));

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

@@ -34,5 +34,5 @@ export function getDifference(startDate, endDate) {
     return formattedDiff;
 }
 export function getProgress(startDate, endDate) {
-    return (100 * (new Date().getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())).toFixed(0);
+    return ((100 * (new Date().getTime() - startDate.getTime())) / (endDate.getTime() - startDate.getTime())).toFixed(0);
 }

package/dist/collection/utils/utils.js

@@ -1,12 +1,12 @@
 export const classnames = (...args) => {
     let classnameArray = [];
-    args.map(arg => {
+    args.map((arg) => {
         switch (typeof arg) {
             case 'string':
                 classnameArray.push(arg);
                 break;
             case 'object':
-                Object.keys(arg).map(k => {
+                Object.keys(arg).map((k) => {
                     if (arg[k]) {
                         classnameArray.push(k);
                     }
@@ -16,3 +16,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;
+};

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-3962add4.js';
-export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-d8471680.js';
+import { r as registerInstance, h, g as getElement } from './index-224e880a.js';
+export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-65c77450.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;