@everymatrix/casino-engagement-suite-tournament 1.60.1 → 1.61.0

package/dist/esm/{casino-engagement-suite-tournament-e9186545.js → casino-engagement-suite-tournament-bd7c9cdd.js}

@@ -1,4 +1,4 @@
-import { h, H as Host, r as registerInstance, c as createEvent } from './index-e8e1e68e.js';
+import { h, H as Host, r as registerInstance, c as createEvent } from './index-ac437a77.js';
 import '@everymatrix/general-animation-loading/dist';
 
 /*! *****************************************************************************
@@ -54,10 +54,10 @@ const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'Join', U
         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!' });
+    }, 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.' });
 
 const classnames = (...args) => {
-    let classnameArray = [];
+    let classnameArray = ['Tab'];
     args.map((arg) => {
         switch (typeof arg) {
             case 'string':
@@ -106,6 +106,33 @@ const truncateNumber = (value, decimals, isInteger = false) => {
     // Return string representation with fixed decimals to preserve trailing zeros
     return truncated.toFixed(decimals);
 };
+const getDevice = () => {
+    let userAgent = window.navigator.userAgent;
+    if (userAgent.toLowerCase().match(/android/i)) {
+        return 'Android';
+    }
+    if (userAgent.toLowerCase().match(/iphone/i)) {
+        return 'iPhone';
+    }
+    if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
+        return 'iPad';
+    }
+    return 'PC';
+};
+const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'ios';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};
 
 var LeaderboardPage;
 (function (LeaderboardPage) {
@@ -124,6 +151,7 @@ var DialogType;
     DialogType["unjoin"] = "unjoin";
     DialogType["tip"] = "tip";
     DialogType["gift"] = "gift";
+    DialogType["error"] = "error";
 })(DialogType || (DialogType = {}));
 
 const getMaxRankStr = (list) => {
@@ -154,12 +182,14 @@ const isTournamentClosed = (tournament) => {
     return [TournamentState.Closed, TournamentState.Closing].includes(tournament.state);
 };
 
+const rewardSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c2NyaXB0IHhtbG5zPSIiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIxMTVfMzA2KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNC45MDI5MiAwLjY2NjQ5NkM0LjkyMzM5IDAuNjY2NTc5IDQuOTQzNCAwLjY2NjY2IDQuOTYyODYgMC42NjY2NkgxMS4wMzY5QzExLjA1NjQgMC42NjY2NiAxMS4wNzY0IDAuNjY2NTc5IDExLjA5NjkgMC42NjY0OTZDMTEuMzA1NiAwLjY2NTY1MyAxMS41NjI3IDAuNjY0NjEzIDExLjc4OTMgMC43NDcwN0MxMi4xNTk2IDAuODgxODY4IDEyLjQ1MTQgMS4xNzM2MSAxMi41ODYyIDEuNTQzOTdDMTIuNjM5NCAxLjY5MDMxIDEyLjY1NzggMS44NDk0MiAxMi42NjQgMS45OTk5OUwxMy42ODQyIDEuOTk5OTlDMTMuODI0MiAxLjk5OTk4IDEzLjk2MDcgMS45OTk5NiAxNC4wNzY3IDIuMDA3ODhDMTQuMjAzNiAyLjAxNjU0IDE0LjM1NDEgMi4wMzY4NiAxNC41MTAxIDIuMTAxNDlDMTQuODM2OCAyLjIzNjgxIDE1LjA5NjQgMi40OTYzOCAxNS4yMzE3IDIuODIzMDhDMTUuMjk2NCAyLjk3OTExIDE1LjMxNjcgMy4xMjk1OSAxNS4zMjUzIDMuMjU2NTFDMTUuMzMzMyAzLjM3MjU2IDE1LjMzMzIgMy41MDg5OCAxNS4zMzMyIDMuNjQ5MDFWMy45OTk5OUMxNS4zMzMyIDQuMDMxMDIgMTUuMzMzMyA0LjA2MTU4IDE1LjMzMzMgNC4wOTE3MUMxNS4zMzM2IDQuNjIxOTcgMTUuMzMzOCA1LjAxNTc0IDE1LjI0MjQgNS4zNTY4NEMxNC45OTU4IDYuMjc3MDkgMTQuMjc3IDYuOTk1ODggMTMuMzU2OCA3LjI0MjQ2QzEzLjEwMyA3LjMxMDQ0IDEyLjgyMDIgNy4zMjc3NCAxMi40NzM3IDcuMzMyMDNDMTEuOTYxOCA5LjA1MzkzIDEwLjQ4MjkgMTAuMzU5NiA4LjY2NjU3IDEwLjYxOTRWMTEuMzMzM0g4Ljk2Mjg2QzEwLjY0MDIgMTEuMzMzMyAxMS45OTk5IDEyLjY5MzEgMTEuOTk5OSAxNC4zNzA0QzExLjk5OTkgMTQuOTAyMiAxMS41Njg4IDE1LjMzMzMgMTEuMDM2OSAxNS4zMzMzSDQuOTYyODZDNC40MzEwMyAxNS4zMzMzIDMuOTk5OSAxNC45MDIyIDMuOTk5OSAxNC4zNzA0QzMuOTk5OSAxMi42OTMxIDUuMzU5NjMgMTEuMzMzMyA3LjAzNjk0IDExLjMzMzNINy4zMzMyM1YxMC42MTk0QzUuNTE2OTMgMTAuMzU5NiA0LjAzODAyIDkuMDUzOTMgMy41MjYxIDcuMzMyMDNDMy4xNzk2MiA3LjMyNzc0IDIuODk2NzYgNy4zMTA0NCAyLjY0MzA1IDcuMjQyNDZDMS43MjI4MSA2Ljk5NTg4IDEuMDA0MDEgNi4yNzcwOSAwLjc1NzQzMyA1LjM1Njg0QzAuNjY2MDM1IDUuMDE1NzQgMC42NjYyNDggNC42MjE5NyAwLjY2NjUzNSA0LjA5MTcxQzAuNjY2NTUyIDQuMDYxNTkgMC42NjY1NjggNC4wMzEwMiAwLjY2NjU2OCAzLjk5OTk5VjMuNjY2NjZDMC42NjY1NjggMy42NjA3NyAwLjY2NjU2OCAzLjY1NDg5IDAuNjY2NTY3IDMuNjQ5MDFDMC42NjY1NTMgMy41MDg5OCAwLjY2NjU0IDMuMzcyNTYgMC42NzQ0NTggMy4yNTY1MUMwLjY4MzExNyAzLjEyOTU5IDAuNzAzNDMzIDIuOTc5MTEgMC43NjgwNjIgMi44MjMwOEMwLjkwMzM4NyAyLjQ5NjM4IDEuMTYyOTUgMi4yMzY4MSAxLjQ4OTY2IDIuMTAxNDlDMS42NDU2OSAyLjAzNjg2IDEuNzk2MTcgMi4wMTY1NCAxLjkyMzA4IDIuMDA3ODhDMi4wMzkxNCAxLjk5OTk2IDIuMTc1NTYgMS45OTk5OCAyLjMxNTU5IDEuOTk5OTlDMi4zMjE0NiAxLjk5OTk5IDIuMzI3MzUgMS45OTk5OSAyLjMzMzIzIDEuOTk5OTlIMy4zMzU4MUMzLjM0MTk2IDEuODQ5NDIgMy4zNjAzOCAxLjY5MDMxIDMuNDEzNjQgMS41NDM5N0MzLjU0ODQ0IDEuMTczNjEgMy44NDAxOSAwLjg4MTg2OCA0LjIxMDU0IDAuNzQ3MDdDNC40MzcwOSAwLjY2NDYxMyA0LjY5NDIxIDAuNjY1NjUzIDQuOTAyOTIgMC42NjY0OTZaTTMuMzMzMjMgMy4zMzMzM0gyLjMzMzIzQzIuMTY4OCAzLjMzMzMzIDIuMDc4ODYgMy4zMzM2OSAyLjAxMzg1IDMuMzM4MTJDMi4wMTA4MiAzLjMzODMzIDIuMDA3OTggMy4zMzg1NCAyLjAwNTMyIDMuMzM4NzVDMi4wMDUxMSAzLjM0MTQxIDIuMDA0OSAzLjM0NDI1IDIuMDA0NyAzLjM0NzI3QzIuMDAwMjYgMy40MTIyOSAxLjk5OTkgMy41MDIyMiAxLjk5OTkgMy42NjY2NlYzLjk5OTk5QzEuOTk5OSA0LjY2MjkgMi4wMDU2MyA0Ljg2MzU3IDIuMDQ1MzMgNS4wMTE3NUMyLjE2ODYyIDUuNDcxODcgMi41MjgwMiA1LjgzMTI3IDIuOTg4MTQgNS45NTQ1NkMzLjA2NzM0IDUuOTc1NzggMy4xNjE1MiA1Ljk4NzMgMy4zMzMyMyA1Ljk5MzQyVjMuMzMzMzNaTTQuNjY2NTcgMi4yOTYyOUM0LjY2NjU3IDIuMTUwMjUgNC42NjY4NSAyLjA3MDM5IDQuNjcwMzcgMi4wMTI0OUM0LjY3MDU1IDIuMDA5NTggNC42NzA3MiAyLjAwNjg3IDQuNjcwOSAyLjAwNDMzQzQuNjczNDQgMi4wMDQxNSA0LjY3NjE2IDIuMDAzOTcgNC42NzkwNyAyLjAwMzc5QzQuNzM2OTcgMi4wMDAyOCA0LjgxNjgzIDEuOTk5OTkgNC45NjI4NiAxLjk5OTk5SDExLjAzNjlDMTEuMTgzIDEuOTk5OTkgMTEuMjYyOCAyLjAwMDI4IDExLjMyMDcgMi4wMDM3OUMxMS4zMjM2IDIuMDAzOTcgMTEuMzI2NCAyLjAwNDE1IDExLjMyODkgMi4wMDQzM0MxMS4zMjkxIDIuMDA2ODYgMTEuMzI5MyAyLjAwOTU5IDExLjMyOTQgMi4wMTI0OUMxMS4zMzI5IDIuMDcwMzkgMTEuMzMzMiAyLjE1MDI1IDExLjMzMzIgMi4yOTYyOVY1Ljk5OTk5QzExLjMzMzIgNy44NDA5NCA5Ljg0MDg1IDkuMzMzMzMgNy45OTk5IDkuMzMzMzNDNi4xNTg5NSA5LjMzMzMzIDQuNjY2NTcgNy44NDA5NCA0LjY2NjU3IDUuOTk5OTlWMi4yOTYyOVpNMTIuNjY2NiAzLjMzMzMzVjUuOTkzNDJDMTIuODM4MyA1Ljk4NzMgMTIuOTMyNSA1Ljk3NTc4IDEzLjAxMTcgNS45NTQ1NkMxMy40NzE4IDUuODMxMjcgMTMuODMxMiA1LjQ3MTg3IDEzLjk1NDUgNS4wMTE3NUMxMy45OTQyIDQuODYzNTcgMTMuOTk5OSA0LjY2MjkgMTMuOTk5OSAzLjk5OTk5VjMuNjY2NjZDMTMuOTk5OSAzLjUwMjIyIDEzLjk5OTUgMy40MTIyOSAxMy45OTUxIDMuMzQ3MjdDMTMuOTk0OSAzLjM0NDI1IDEzLjk5NDcgMy4zNDE0MSAxMy45OTQ1IDMuMzM4NzVDMTMuOTkxOCAzLjMzODU0IDEzLjk4OSAzLjMzODMzIDEzLjk4NiAzLjMzODEyQzEzLjkyMDkgMy4zMzM2OSAxMy44MzEgMy4zMzMzMyAxMy42NjY2IDMuMzMzMzNIMTIuNjY2NlpNNy4wMzY5NCAxMi42NjY3QzYuMjIzMiAxMi42NjY3IDUuNTQyNzEgMTMuMjM3MiA1LjM3MzYxIDE0SDEwLjYyNjJDMTAuNDU3MSAxMy4yMzcyIDkuNzc2NiAxMi42NjY3IDguOTYyODYgMTIuNjY2N0g3LjAzNjk0WiIgZmlsbD0iIzhGOEI5QyIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzIxMTVfMzA2Ij4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+CjxzY3JpcHQgeG1sbnM9IiIvPgo8L3N2Zz4K';
+
 const iconClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg" });
 const iconQuestion = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg" });
 const iconEyeOpen = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg" });
 const iconEyeClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg" });
 const iconBack = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg" });
-const iconReward = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg" });
+const iconReward = h("img", { src: rewardSvg, alt: "reward", class: "Reward" });
 const iconTrophy = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/cup-congras.svg" });
 
 const renderGradientRoundedButton = (_a) => {
@@ -178,7 +208,7 @@ var GradientButton;
     GradientButton["unjoinYes"] = "unjoinYes";
     GradientButton["unjoinNo"] = "unjoinNo";
 })(GradientButton || (GradientButton = {}));
-const renderButton = (instance, buttonType) => {
+const renderButton = (instance, buttonType, isActionJoinPending = false) => {
     const { locale } = instance;
     const buttonCollector = {
         normal: {
@@ -197,7 +227,7 @@ const renderButton = (instance, buttonType) => {
     };
     const props = buttonCollector[buttonType];
     return renderGradientRoundedButton({
-        statedClasses: Object.assign({ isPending: instance.isActionJoinPending }, props.statedClasses),
+        statedClasses: Object.assign({ isPending: isActionJoinPending }, props.statedClasses),
         onClick: () => {
             var _a;
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call();
@@ -254,7 +284,7 @@ const leaderboardsAdapter = (leaderboardRes) => {
         return leaderboards;
     }
     return leaderboards.map((leaderboard) => {
-        if (item && item.userID === leaderboard.userID) {
+        if ((item === null || item === void 0 ? void 0 : item.userId) && item.userId === leaderboard.userId) {
             return Object.assign(Object.assign({}, leaderboard), { isMe: true });
         }
         else {
@@ -303,26 +333,42 @@ const renderTimeBar = (tournament) => {
     return (h("section", { class: "TimeContainer" },
         h("div", { class: "Time" }, tournament.state === 'Running'
             ? [
-                h("div", null, getTimeDifference(new Date(), tournament.endTime)),
-                h("div", null, renderGradientRoundedButton({
-                    statedClasses: {
-                        isHollow: true,
-                        isPendding: false
-                    },
-                    innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%`
-                }))
+                h("div", { class: 'Running' },
+                    h("div", null, getTimeDifference(new Date(), 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("div", { class: 'NotRunning' }, 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 })));
 };
 
 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', bonusCode: (_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code }); },
+    JoinTournamentReq: (tournament) => {
+        var _a, _b;
+        return window.postMessage({
+            type: 'JoinTournamentReq',
+            id: tournament.id,
+            bonusCode: tournament.id || ((_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code)
+        });
+    },
     UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
     UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
     UpdateLeaderboardsReq: (tournament, query) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id, query }),
-    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' })
+    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' }),
+    GameClickReq: (game) => window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } }),
 };
 const messageReceiver = (instance) => {
     const receiver = {
@@ -338,15 +384,13 @@ const messageReceiver = (instance) => {
             instance.tournamentItem = tournamentNew;
             updateTournamentListByItem(instance, tournamentNew);
         },
-        UpdateLeaderboardsRes: (rest) => {
-            instance.leaderboards = leaderboardsAdapter(rest.data);
-        },
+        UpdateLeaderboardsRes: (rest) => processLeaderboardTableData(instance, rest),
         JoinTournamentRes: (rest) => commonJoinRes(instance, rest),
         UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest),
         // listen to LeaderboardLiveEvent event, handle update
         LeaderboardLiveEvent: (rest) => {
             handleLeaderboardLiveEvent(instance, rest);
-        }
+        },
     };
     return receiver;
 };
@@ -424,25 +468,30 @@ const handleLeaderboardLiveEvent = (instance, rest) => {
         }
     }
 };
+const showErrorMessage = (instance, type) => {
+    instance.dialog = Object.assign(Object.assign({}, instance.dialog), { isOpen: true, type });
+};
 const commonJoinRes = (instance, rest) => {
-    const { success } = rest;
-    if (success) {
-        instance.tournamentItem = Object.assign(Object.assign({}, instance.tournamentItem), { isPlayerAcknowledged: !!!instance.tournamentItem.isPlayerAcknowledged });
-        switch (instance.page) {
-            case LeaderboardPage.item: {
-                break;
-            }
-            case LeaderboardPage.list: {
-                updateTournamentListByItem(instance, instance.tournamentItem);
-                break;
-            }
-        }
+    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 (!success) {
+        instance.tournamentList[tournamentIdx] = current;
+        instance.tournamentList = [...instance.tournamentList];
+        showErrorMessage(instance, DialogType.error);
+        return;
     }
+    current = Object.assign(Object.assign({}, current), { isUnjoined: current.isPlayerAcknowledged ? true : false, isPlayerAcknowledged: !!!current.isPlayerAcknowledged });
+    instance.tournamentList[tournamentIdx] = current;
+    instance.tournamentList = [...instance.tournamentList];
     if (instance.nextPage) {
         instance.setPage(instance.nextPage);
         instance.nextPage = undefined;
     }
-    instance.isActionJoinPending = false;
+};
+const processLeaderboardTableData = (instance, rest) => {
+    instance.leaderboards = leaderboardsAdapter(rest.data);
+    instance.currentPlyerRank = rest.data.item ? rest.data.item.rank : -1;
 };
 const updateTournamentListByItem = (instance, tournament) => {
     instance.tournamentList = instance.tournamentList.map((_tournament) => {
@@ -470,7 +519,7 @@ const updateOrAddTournamentToList = (instance, tournament) => {
 const page = {
     list(instance) {
         var _a;
-        if (!instance.tournamentList) {
+        if (!(instance === null || instance === void 0 ? void 0 : instance.tournamentList)) {
             instance.tournamentList = (_a = instance.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map((item) => tournamentAdapter(item));
             return h("general-animation-loading", null);
         }
@@ -480,7 +529,7 @@ const page = {
                 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' : ''), onClick: () => onClickListItemChangePage(_tournament) },
+            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)),
@@ -489,8 +538,8 @@ const page = {
         }
         else {
             return renderLeaderboardContainer(instance, h("div", { class: "NoLeaderboards Row" },
-                h("div", null, locale.NoLeaderboards),
-                h("div", null, locale.NoLeaderboardsTip)));
+                h("h3", { class: 'Title' }, locale.NoLeaderboards),
+                h("div", { class: 'message' }, locale.NoLeaderboardsTip)));
         }
     },
     item(instance) {
@@ -517,7 +566,7 @@ const page = {
         return renderLeaderboardContainer(instance, [
             renderTitleContainer(instance, instance.tournamentItem),
             renderTabs(),
-            instance.renders.tab[instance.tab]()
+            h("div", { class: `TableContentWrapper ${instance.tab}` }, instance.renders.tab[instance.tab]())
         ]);
     }
 };
@@ -537,11 +586,11 @@ const renderTitleContainer = (instance, tournament) => {
         tournament.state !== TournamentState.Closed && (h("div", null, renderGradientRoundedButton({
             statedClasses: {
                 isHollow: tournament.isPlayerAcknowledged,
-                isPending: instance.isActionJoinPending
+                isPending: tournament.isActionJoinPending
             },
             onClick: (e) => {
                 e.stopPropagation();
-                if (!instance.isActionJoinPending) {
+                if (!tournament.isActionJoinPending) {
                     onClickItemJoin(tournament);
                 }
             },
@@ -556,9 +605,11 @@ const renderLeaderboardContainer = (instance, render) => {
     const renderDialogContent = () => {
         switch (instance.dialog.type) {
             case DialogType.unjoin:
-                return instance.renders.dialog.unjoin(); //renderDialogContentUnjoin()
+                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();
         }
@@ -568,7 +619,9 @@ const renderLeaderboardContainer = (instance, render) => {
         switch (page) {
             case LeaderboardPage.list:
                 return {
-                    left: h("span", { onClick: () => instance.openDialog(DialogType.tip) }, iconQuestion),
+                    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:
@@ -592,7 +645,7 @@ const renderLeaderboardContainer = (instance, render) => {
             h("div", { class: "Root" },
                 h("div", { class: "Main" }, render))),
         h("div", { class: "WrapperUtil" },
-            h("dialog", { open: isOpen },
+            h("dialog", { open: isOpen, style: { 'top': instance.getContainerScrollTop() + 'px' } },
                 h("div", { class: "GradientRounded Hollow" },
                     renderBar,
                     isOpen && renderDialogContent())))));
@@ -605,12 +658,12 @@ const tab = {
         return (h("div", { class: "InfoContainer" },
             renderTimeBar(tournament),
             h("section", { class: "ShowInfo", onClick: () => (instance.isShowInfo = !instance.isShowInfo) },
-                h("p", null,
-                    h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen),
+                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", null, tournament.description),
+                    h("div", { class: 'Description' }, tournament.description),
                     h("div", { class: "Criterias" },
                         h("div", null,
                             locale.ScoreCriteria,
@@ -654,7 +707,9 @@ 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", null,
+        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: 'Game', onClick: () => {
+                instance.onGameClick(game);
+            } },
             h("img", { src: game.defaultThumbnail, alt: "" }))))));
     }
 };
@@ -671,7 +726,7 @@ const renders = {
     tab
 };
 
-const casinoEngagementSuiteTournamentCss = ".Wrapper{height:100%;position:relative;color:var(--emw--color-typography, #FFFFFF);display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));flex-direction:column;border-radius:24px;overflow-y:auto}.Wrapper.Mobile{border-radius:16px}.WrapperContent{padding-bottom:20px;transition:0.5s filter}.WrapperContent.faded{filter:brightness(53.3333333333%)}.Wrapper.Mobile .WrapperBar{padding:20px 8px 8px;margin-bottom:8px}.WrapperBar{display:flex;width:100%;padding:32px 20px 20px;margin-bottom:20px}.WrapperBarLeft,.WrapperBarRight{cursor:pointer;z-index:1}.WrapperBarMiddle{flex-grow:1;text-align:center;font-size:var(--emw--font-size-medium, 16px);line-height:16px;font-weight:500;color:var(--emw--color-secondary, rgb(187, 185, 195))}:host{display:block;font-size:var(--emw--font-size-x-small, 12px);font-family:Inter}.Row{margin:24px 0;padding:0 20px}.Row:first-child{margin:0}.LeaderboardsItem{position:relative;margin:10px 0;border:1px solid rgb(64, 57, 86);border-radius:16px}.LeaderboardsItem.Hollow{border-color:transparent}.LeaderboardsItem:first-child{margin-top:0}.LeaderboardsItemContainer{padding-top:16px}.Info{margin:24px 0;padding:0 20px}.TimeContainer{margin:24px 0;padding:0 20px}.TimeContainer .Time{display:flex;justify-content:space-between;font-size:var(--emw--font-size-x-small, 12px);align-items:center;color:var(--emw--color-secondary, rgb(187, 185, 195))}.TimeContainer .Time button{font-size:var(--emw--font-size-x-small, 12px);height:20px;padding:0}.TimeContainer .Time button::before{inset:inherit;border:0}.ShowInfo{margin:24px 0;padding:0 20px;cursor:pointer;color:rgb(102, 97, 120)}.ShowInfo p{display:flex;gap:4px}.TitleContainer{display:flex;justify-content:space-between;margin:24px 0;padding:0 20px;margin-top:0;gap:10px;font-family:Montserrat}.TitleContainer .GradientRoundedButton{width:120px}.TabsContainer{margin:24px 0;padding:0 20px;margin:0 20px;padding:0;border-bottom:1px solid #575757}.Tabs{display:flex;justify-content:space-between;justify-content:start;font-size:var(--emw--font-size-x-small, 12px);margin-bottom:-1px}.Tabs>div{padding:10px;color:rgb(102, 97, 120);cursor:pointer}.Tabs>div.active{color:var(--emw--color-typography, #FFF);border-bottom:2px solid var(--emw--color-typography, #FFF)}.Title{font-size:var(--emw--font-size-medium, 16px);font-weight:700;line-height:19.5px;text-align:left;word-break:break-word}.TC{margin-top:12px}.TC a{color:rgb(89, 209, 255)}.Criterias{margin:12px 0}.Criterias span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.ResultPrize{margin:24px 0;padding:0 20px}.ResultPrize span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.ContentScrollContainer{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;height:auto}.ContentScrollContainer.expanded{height:100%;max-height:100%}.PrizesContainer{flex:1;display:flex;flex-direction:column;min-height:100px;max-height:calc(100% - 20px)}.PrizesHeader{align-items:center;display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));padding:5px 0;z-index:1;margin:0 20px}.PrizesHeader img{width:12px}.PrizesHeader .PrizesText{margin-left:3px;font-weight:600}.Prizes{margin:24px 0;padding:0 20px;flex:1;overflow-y:auto;margin-bottom:0;padding-right:10px;max-height:300px;margin-top:10px}.Prizes::-webkit-scrollbar{width:4px}.Prizes::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.1);border-radius:2px}.Prizes::-webkit-scrollbar-thumb{background:var(--emw--color-primary, rgb(255, 214, 47));border-radius:2px}.Prizes .Prize{margin:8px 0}.Prizes .Prize .PrizeText{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer section.Info{margin-bottom:12px}*{box-sizing:border-box}.Leaderboards{width:100%;text-align:center;border-collapse:collapse}.Leaderboards td{opacity:0.6;padding:20px 5px}.Leaderboards td:first-child{padding-left:20px}.Leaderboards td:last-child{padding-right:20px}.Leaderboards .LeaderboardName{color:var(--emw--color-typography, #FFF);opacity:1}.Leaderboards tr.isMe{background:rgba(0, 0, 0, 0.2)}.Leaderboards tr.isMe .LeaderboardRank span{padding:0px 3px;opacity:1;border:1px solid var(--emw--color-primary, rgb(255, 214, 47));border-radius:11px}.Leaderboards tr.isMe td{color:#FFD029;font-weight:var(--emw--font-weight-semibold, 500)}.LeaderboardLabels{position:absolute;top:-6px;right:18px;display:flex;gap:4px}.LeaderboardLabel{width:30px;height:15px;background:var(--emw--engagement-suite-gradient-golden, linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%));border-radius:var(--emw--border-radius-x-small, 2px);display:inline-flex;padding:0 2px;align-items:center;justify-content:center}.LeaderboardLabel span{display:inline-block;text-transform:uppercase;font-size:var(--emw--font-size-3x-small, 7px);line-height:7px;font-weight:var(--emw--font-weight-bold, 700);font-family:var(--emw--font-family-secondary, \"Montserrat\", sans-serif);color:var(--emw--color-background, #1E1638)}.LeaderboardUnstarted{margin:24px 0;padding:0 20px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-medium, 16px)}.Games{margin:24px 0;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:4px 7.25px}.Games img{width:60px}dialog{position:absolute;top:30px;width:100%;height:100%;background:transparent;border:0;padding:0;color:var(--emw--color-typography, #FFFFFF)}dialog>div{margin:32px;border-radius:8px;background:var(--emw--color-background, hsl(254, 44%, 15%));border:1px solid hsl(254, 20%, 28%);align-items:center}.DialogContentUnjoin{padding:32px;padding-top:10px;display:flex;gap:10px;flex-direction:column}.DialogContentUnjoinTitle{font-family:Montserrat;font-size:var(--emw--font-size-large, 20px);font-weight:600;line-height:24.38px;text-align:center}.DialogContentUnjoinDescription{color:var(--emw--color-secondary, rgb(187, 185, 195));margin-bottom:30px}.Tip{padding:32px;padding-top:10px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-small, 14px)}.PageConfirmContainer{text-align:center;width:80%;margin:0 auto}.PageConfirm{padding:40px 32px;display:flex;flex-direction:column;gap:20px}.PageConfirm .Title{font-size:var(--emw--font-size-large, 20px);text-align:center}.PageConfirm .Description{color:var(--emw--color-secondary, rgb(187, 185, 195));font-weight:400}.PageConfirm .Description span{color:var(--emw--color-typography, #FFF);font-weight:600}.PageConfirmButtonsGroup{width:150px;margin:0 auto;display:flex;flex-direction:column;gap:10px}.GradientRounded{display:block;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:rgb(30, 22, 56);position:relative;border-radius:16px}.GradientRounded.Hollow{background:rgb(30, 22, 56);color:#FFFFFF}.GradientRounded.Hollow::before{content:\"\";position:absolute;inset:0;border-radius:15px;border:1px solid transparent;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}.GradientRoundedButton{border:none;padding:7px;height:32px;width:100%;font-size:var(--emw--font-size-small, 14px);font-weight:700;line-height:17.07px;text-align:center;transition:0.5s opacity;cursor:pointer}.GradientRoundedButton.Pending{cursor:not-allowed;opacity:0.3}.GradientRoundedButton.Hollow span{background:-webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.WrapperUtil .GradientRounded .WrapperBar{margin-bottom:0;padding-bottom:0}.WrapperUtil .GradientRounded .Tip{padding-top:0;padding-bottom:40px}.LeaderboardsItem .LeaderboardsItemContainer .TitleContainer{margin-bottom:16px}";
+const casinoEngagementSuiteTournamentCss = ".Leaderboards{height:100%;overflow-y:auto;transition:0.5s ease;transition-property:all, transform}.Leaderboards.list,.Leaderboards.item{opacity:0}.Leaderboards.list.Active,.Leaderboards.item.Active{opacity:1}.Leaderboards.list.Hidden,.Leaderboards.item.Hidden{display:none}.Leaderboards .question__tooltip{position:absolute;top:0;left:20px;width:320px;text-align:left;background-color:var(--emw--color-typography, rgba(255, 255, 255, 0.6));border:1px solid var(--emw--color-typography, rgba(255, 255, 255, 0.8));color:var(var(--emw--color-primary, rgb(255, 214, 47)), rgb(255, 214, 47));padding:10px;border-radius:5px;opacity:0;fill-opacity:0.5;transition:opacity 0.3s ease-in-out;z-index:10}.Leaderboards .question__tooltip.visible{opacity:0.8}.Wrapper{position:relative;min-height:100%;color:var(--emw--color-typography, #FFFFFF);display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));flex-direction:column;border-radius:24px}.Wrapper.Mobile{border-radius:16px}.Wrapper.Mobile .WrapperContent .TableContentWrapper{height:calc(100vh - 278px);overflow-y:auto}.WrapperContent{padding-bottom:20px;transition:0.5s filter}.WrapperContent.faded{filter:brightness(53.3333333333%)}.WrapperContent .NoLeaderboards h3.Title{text-align:center}.WrapperContent .NoLeaderboards div.message{color:var(--emw--color-secondary, rgb(187, 185, 195));text-align:left}.Wrapper.Mobile .WrapperBar{padding:20px 8px 8px;margin-bottom:8px}.WrapperBar{display:flex;width:100%;padding:32px 20px 20px;margin-bottom:20px}.WrapperBar .WrapperBarLeft span{position:relative}.WrapperBarLeft,.WrapperBarRight{cursor:pointer;z-index:1}.WrapperBarMiddle{flex-grow:1;text-align:center;font-size:var(--emw--font-size-medium, 16px);line-height:16px;font-weight:500;color:var(--emw--color-secondary, rgb(187, 185, 195))}:host{display:block;font-size:var(--emw--font-size-x-small, 12px);font-family:Inter}.Row{margin:10px 0;padding:0 20px}.Row:first-child{margin:0}.LeaderboardsItem{opacity:1;transition:1s opacity ease;position:relative;margin:10px 0;border:1px solid rgb(64, 57, 86);border-radius:16px}.LeaderboardsItem.Unjoined{opacity:0;margin:0;border:0 none;animation:slideOut 1s forwards}.LeaderboardsItem.Hollow{border-color:transparent}.LeaderboardsItem:first-child{margin-top:0}.LeaderboardsItemContainer{padding-top:16px}.ShowInfo{margin:10px 0;padding:0 20px;transition:0.5s all ease}.TimeContainer{margin:10px 0;padding:0 20px;transition:0.5s all ease}.TimeContainer .Time{display:flex;justify-content:space-between;font-size:var(--emw--font-size-x-small, 12px);align-items:center;color:var(--emw--color-secondary, rgb(187, 185, 195))}.TimeContainer .Time button{font-size:var(--emw--font-size-x-small, 12px);height:20px;padding:0}.TimeContainer .Time button::before{inset:inherit;border:0}.TitleContainer{display:flex;justify-content:space-between;margin:10px 0;padding:0 20px;margin-top:0;gap:10px;font-family:Montserrat}.TitleContainer .GradientRoundedButton{width:120px}.TabsContainer{margin:10px 0;padding:0 20px;margin:0 20px;padding:0;border-bottom:1px solid #575757}.Tabs{display:flex;justify-content:space-between;justify-content:start;font-size:var(--emw--font-size-x-small, 12px);margin-bottom:-1px}.Tabs .Tab{text-transform:capitalize}.Tabs>div{padding:10px;color:rgb(102, 97, 120);cursor:pointer}.Tabs>div.active{color:var(--emw--color-typography, #FFF);border-bottom:2px solid var(--emw--color-typography, #FFF)}.Title{font-size:var(--emw--font-size-medium, 16px);font-weight:700;line-height:19.5px;text-align:left;word-break:break-word}.TC{margin-top:12px}.TC a{color:rgb(89, 209, 255)}.Criterias{margin:12px 0}.Criterias span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.ResultPrize{margin:10px 0;padding:0 20px;padding-left:30px;text-align:left}.ResultPrize span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.ContentScrollContainer{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;height:auto}.ContentScrollContainer.expanded{height:100%;max-height:100%}.PrizesContainer{flex:1;display:flex;flex-direction:column;min-height:100px;max-height:calc(100% - 20px)}.PrizesHeader,.DetailHeader{align-items:center;display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));padding:5px 0;z-index:1;margin:0 20px}.PrizesHeader img,.DetailHeader img{width:12px}.PrizesHeader .PrizesText,.DetailHeader .PrizesText{margin-left:3px;font-weight:600}.DetailHeader{margin:0}.Prizes{margin:10px 0;padding:0 20px;padding-left:30px;text-align:left;flex:1;overflow-y:auto;margin-bottom:0;padding-right:10px;max-height:300px;margin-top:10px}.Prizes::-webkit-scrollbar{width:4px}.Prizes::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.1);border-radius:2px}.Prizes::-webkit-scrollbar-thumb{background:var(--emw--color-primary, rgb(255, 214, 47));border-radius:2px}.Prizes .Prize{margin:8px 0}.Prizes .Prize .PrizeText{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer section.Info{margin-bottom:12px;text-align:left;padding-left:15px}.InfoContainer section.Info .Criterias,.InfoContainer section.Info .Description{padding-left:15px;margin-top:10px}*{box-sizing:border-box}.Leaderboards{width:100%;text-align:center;border-collapse:collapse}.Leaderboards td{opacity:0.6;padding:12px 5px}.Leaderboards td:first-child{padding-left:20px}.Leaderboards td:last-child{padding-right:20px}.Leaderboards .LeaderboardName{color:var(--emw--color-typography, #FFF);opacity:1}.Leaderboards tr.isMe{background:rgba(0, 0, 0, 0.2);border:1px solid var(--emw--color-primary, rgb(255, 214, 47))}.Leaderboards tr.isMe .LeaderboardRank span{padding:0px 3px;opacity:1;border:1px solid var(--emw--color-primary, rgb(255, 214, 47));border-radius:11px}.Leaderboards tr.isMe td{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:var(--emw--font-weight-semibold, 500)}.LeaderboardLabels{position:absolute;top:-6px;right:18px;display:flex;gap:4px}.LeaderboardLabel{width:30px;height:15px;background:var(--emw--engagement-suite-gradient-golden, linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%));border-radius:var(--emw--border-radius-x-small, 2px);display:inline-flex;padding:0 2px;align-items:center;justify-content:center}.LeaderboardLabel span{display:inline-block;text-transform:uppercase;font-size:var(--emw--font-size-3x-small, 7px);line-height:7px;font-weight:var(--emw--font-weight-bold, 700);font-family:var(--emw--font-family-secondary, \"Montserrat\", sans-serif);color:var(--emw--color-background, #1E1638)}.LeaderboardUnstarted{margin:10px 0;padding:0 20px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-medium, 16px)}.Games{margin:10px 0;padding:0 20px;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:start;margin:20px auto}.Games .Game{cursor:pointer;width:25%;display:flex;padding:5px}.Games .Game:hover{filter:brightness(var(--emw--hover-brightness, 1.25))}.Games img{width:100%;height:fit-content}dialog{position:absolute;top:30px;width:100%;height:max-content;background:transparent;border:0;padding:0;color:var(--emw--color-typography, #FFFFFF);transition:all 0.2s;transition-timing-function:ease-in-out}dialog>div{margin:32px;border-radius:8px;background:var(--emw--color-background, hsl(254, 44%, 15%));border:1px solid hsl(254, 20%, 28%);align-items:center}.DialogContentUnjoin{padding:32px;padding-top:10px;display:flex;gap:10px;flex-direction:column}.DialogContentUnjoinTitle{font-family:Montserrat;font-size:var(--emw--font-size-large, 20px);font-weight:600;line-height:24.38px;text-align:center}.DialogContentUnjoinDescription{color:var(--emw--color-secondary, rgb(187, 185, 195));margin-bottom:30px}.Tip{padding:32px;padding-top:10px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-small, 14px)}.Tip.Error{color:var(--emw--color-error, var(--emw--color-red, #ed0909));font-weight:var(--emw--font-weight-normal, 500)}.PageConfirmContainer{text-align:center;width:80%;margin:0 auto}.PageConfirm{padding:40px 32px;display:flex;flex-direction:column;gap:20px}.PageConfirm .Title{font-size:var(--emw--font-size-large, 20px);text-align:center}.PageConfirm .Description{color:var(--emw--color-secondary, rgb(187, 185, 195));font-weight:400}.PageConfirm .Description span{color:var(--emw--color-typography, #FFF);font-weight:600}.PageConfirmButtonsGroup{width:150px;margin:0 auto;display:flex;flex-direction:column;gap:10px}.GradientRounded{display:block;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:rgb(30, 22, 56);position:relative;border-radius:16px}.GradientRounded.Hollow{background:rgb(30, 22, 56);color:#FFFFFF}.GradientRounded.Hollow::before{content:\"\";position:absolute;inset:0;border-radius:15px;border:1px solid transparent;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}.GradientRoundedButton{border:none;padding:7px;height:32px;width:100%;font-size:var(--emw--font-size-small, 14px);font-weight:700;line-height:17.07px;text-align:center;transition:0.5s opacity;cursor:pointer}.GradientRoundedButton.Pending{cursor:not-allowed;opacity:0.3}.GradientRoundedButton.Hollow span{background:-webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.WrapperUtil .GradientRounded .WrapperBar{margin-bottom:0;padding-bottom:0}.WrapperUtil .GradientRounded .Tip{padding-top:0;padding-bottom:40px}.LeaderboardsItem .LeaderboardsItemContainer .TitleContainer{margin-bottom:16px}@keyframes slideOut{0%{display:block;opacity:1;height:max-content}50%{display:block;opacity:0.5}80%{display:none;opacity:0}100%{display:none;opacity:0;height:0}}";
 const CasinoEngagementSuiteTournamentStyle0 = casinoEngagementSuiteTournamentCss;
 
 const CasinoEngagementSuiteTournament = class {
@@ -739,17 +794,57 @@ const CasinoEngagementSuiteTournament = class {
             this.removeLabel('win');
         }
     }
+    getContainerScrollTop() {
+        return this.page === LeaderboardPage.list ? this.containerScrollTop : this.detailElement.clientHeight / 2 - 250;
+    }
+    handleClickOutside(event) {
+        if (event.composedPath()[0] === this.tooltipIconReference)
+            return;
+        if (event.composedPath()[0] !== this.tooltipReference)
+            this.showTooltip = false;
+    }
+    componentDidLoad() {
+        this.pageElement.addEventListener('scroll', (event) => {
+            this.containerScrollTop = event.target.scrollTop + event.target.clientHeight / 2 - 250;
+        });
+    }
+    renderTooltip() {
+        if (this.showTooltip) {
+            return (h("div", { class: `question__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.locale.Tip }));
+        }
+        return null;
+    }
     connectedCallback() {
         this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
     }
+    scrollToMyRankLine() {
+        if (!this.detailElement.querySelectorAll('.isMe').length) {
+            return;
+        }
+        (this.detailElement.querySelectorAll('.TableContentWrapper.leaderboard')[0]).scrollTo({ top: this.detailElement.querySelectorAll('.isMe')[0].offsetTop, behavior: 'smooth' });
+        this.scrolledToMyLine = true;
+    }
+    componentDidRender() {
+        if (this.page === LeaderboardPage.item && this.tab === Tab.leaderboard && !this.scrolledToMyLine) {
+            if (this.currentPlyerRank > this.maxPlyerRank) {
+                this.scrollToMyRankLine();
+            }
+        }
+        else {
+            this.scrolledToMyLine = false;
+        }
+    }
     disconnectedCallback() {
         clearInterval(this.timeHolder);
     }
+    onGameClick(game) {
+        messageSender.GameClickReq(game);
+    }
     actionJoin(tournament) {
-        if (this.isActionJoinPending)
+        if (tournament.isActionJoinPending)
             return;
-        this.isActionJoinPending = true;
+        tournament.isActionJoinPending = true;
         try {
             if (tournament.isPlayerAcknowledged) {
                 messageSender.UnjoinTournamentReq(tournament);
@@ -767,6 +862,17 @@ const CasinoEngagementSuiteTournament = class {
         if (page == LeaderboardPage.item) {
             this.tournamentItem = metaData.tournament;
             if (!this.tournamentItem) {
+                messageSender.post({
+                    type: 'GetTournamentGamesById',
+                    pathParams: { id: metaData.tournament.id },
+                    payload: {
+                        expand: 'games',
+                        pagination: 'games(limit=50,offset=0)',
+                        fields: 'games(id,name,thumbnail,launchUrl)',
+                        platform: getDevicePlatform(),
+                        language: this.language
+                    }
+                });
                 messageSender.UpdateTournamentsItemReq(metaData.tournament);
             }
             if (isTournamentClosed(this.tournamentItem)) {
@@ -777,9 +883,9 @@ const CasinoEngagementSuiteTournament = class {
         this.page = page;
     }
     render() {
-        return (h(Host, { key: 'b070d8a83bcd801d5daeb4edfe87ad0159da4e7c' }, h("general-styling-wrapper", { key: '7454fdab7ee55ab95a39adb3c8b51aed0b78f534', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
+        return (h(Host, { key: '5a65900ecb503dd01f8f39774b92a6e95048dbf3' }, h("general-styling-wrapper", { key: '58cee35cf4142512e9b49566787b48cbc2761a4a', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
             // @ts-ignore
-            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renders.page[this.page]()));
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { key: '1848e193e8c61fe6bc9d3e123b7651cb1b97981b', class: `Leaderboards  ${this.page} ${this.page === 'list' ? 'Active' : 'Hidden'}`, ref: el => this.pageElement = el }, this.renders.page.list()), h("div", { key: 'f865edc80013565981b76df146e99ebf1d5d4721', class: `Leaderboards ${this.page} ${this.page === 'item' ? 'Active' : 'Hidden'} `, ref: el => this.detailElement = el }, this.renders.page.item())));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
@@ -796,6 +902,9 @@ const CasinoEngagementSuiteTournament = class {
         this.close = createEvent(this, "close", 7);
         this.gifts = [];
         this.labels = [];
+        this.showTooltip = false;
+        this.maxPlyerRank = 30;
+        this.scrolledToMyLine = false;
         this.language = 'en';
         this.show = false;
         this.clientStyling = '';
@@ -808,7 +917,6 @@ const CasinoEngagementSuiteTournament = class {
         this.tournamentItem = undefined;
         this.tournamentList = undefined;
         this.leaderboards = [];
-        this.isActionJoinPending = false;
         this.isDialogOpen = false;
         this.isShowInfo = false;
         this.page = LeaderboardPage.list;

package/dist/esm/casino-engagement-suite-tournament.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e8e1e68e.js';
-export { s as setNonce } from './index-e8e1e68e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-ac437a77.js';
+export { s as setNonce } from './index-ac437a77.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["casino-engagement-suite-progress-bar_3",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-progress-bar_3",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
 });

package/dist/esm/{index-e8e1e68e.js → index-ac437a77.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'casino-engagement-suite-tournament';
-const BUILD = /* casino-engagement-suite-tournament */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* casino-engagement-suite-tournament */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -1110,6 +1110,9 @@ var postUpdateComponent = (hostRef) => {
     {
       addHydratedFlag(elm);
     }
+    {
+      safeCall(instance, "componentDidLoad");
+    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -1558,6 +1561,7 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
   }
 };
 var getHostListenerTarget = (elm, flags) => {
+  if (flags & 4 /* TargetDocument */) return doc;
   if (flags & 8 /* TargetWindow */) return win;
   return elm;
 };

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { C as CasinoEngagementSuiteTournament } from './casino-engagement-suite-tournament-e9186545.js';
-import './index-e8e1e68e.js';
+export { C as CasinoEngagementSuiteTournament } from './casino-engagement-suite-tournament-bd7c9cdd.js';
+import './index-ac437a77.js';
 import '@everymatrix/general-animation-loading/dist';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-e8e1e68e.js';
-export { s as setNonce } from './index-e8e1e68e.js';
+import { b as bootstrapLazy } from './index-ac437a77.js';
+export { s as setNonce } from './index-ac437a77.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["casino-engagement-suite-progress-bar_3",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-progress-bar_3",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/casino-engagement-suite-tournament/.stencil/packages/stencil/casino-engagement-suite-tournament/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/casino-engagement-suite-tournament/.stencil/packages/stencil/casino-engagement-suite-tournament/stencil.config.dev.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;