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

package/dist/collection/utils/utils.js

@@ -1,5 +1,5 @@
 export const classnames = (...args) => {
-    let classnameArray = [];
+    let classnameArray = ['Tab'];
     args.map((arg) => {
         switch (typeof arg) {
             case 'string':
@@ -48,3 +48,40 @@ export const truncateNumber = (value, decimals, isInteger = false) => {
     // Return string representation with fixed decimals to preserve trailing zeros
     return truncated.toFixed(decimals);
 };
+/**
+ * custom rules for component types
+ */
+export const isMobile = () => {
+    let userAgent = window.navigator.userAgent;
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+export 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';
+};
+export const getDevicePlatform = () => {
+    const device = getDevice();
+    if (device) {
+        if (device === 'PC') {
+            return 'dk';
+        }
+        else if (device === 'iPad' || device === 'iPhone') {
+            return 'ios';
+        }
+        else {
+            return 'mtWeb';
+        }
+    }
+};

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-ecf4f553.js';
-export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-8680a674.js';
+import { r as registerInstance, h, g as getElement } from './index-ac437a77.js';
+export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-bd7c9cdd.js';
 import '@everymatrix/general-animation-loading/dist';
 
 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)}";

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

@@ -1,4 +1,4 @@
-import { h, H as Host, r as registerInstance, c as createEvent } from './index-ecf4f553.js';
+import { h, H as Host, r as registerInstance, c as createEvent } from './index-ac437a77.js';
 import '@everymatrix/general-animation-loading/dist';
 
 /*! *****************************************************************************
@@ -57,7 +57,7 @@ const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'Join', U
     }, 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) {
@@ -155,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) => {
@@ -255,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 {
@@ -304,20 +333,28 @@ 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;
@@ -331,7 +368,7 @@ const messageSender = {
     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' }),
-    GameClickReq: (game) => window.postMessage({ type: 'GameClickedReq', game }),
+    GameClickReq: (game) => window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } }),
 };
 const messageReceiver = (instance) => {
     const receiver = {
@@ -347,17 +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);
-        },
+        UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest),
         // listen to LeaderboardLiveEvent event, handle update
         LeaderboardLiveEvent: (rest) => {
             handleLeaderboardLiveEvent(instance, rest);
-        }
+        },
     };
     return receiver;
 };
@@ -440,7 +473,7 @@ const showErrorMessage = (instance, type) => {
 };
 const commonJoinRes = (instance, rest) => {
     const { success, data } = rest;
-    let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
+    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;
@@ -456,6 +489,10 @@ const commonJoinRes = (instance, rest) => {
         instance.nextPage = undefined;
     }
 };
+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) => {
         if (_tournament.id === tournament.id) {
@@ -492,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' : '', _tournament.isUnjoined ? 'Unjoined' : ''), 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)),
@@ -501,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) {
@@ -529,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]())
         ]);
     }
 };
@@ -582,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:
@@ -606,7 +645,7 @@ const renderLeaderboardContainer = (instance, render) => {
             h("div", { class: "Root" },
                 h("div", { class: "Main" }, render))),
         h("div", { class: "WrapperUtil" },
-            h("dialog", { open: isOpen, style: { 'top': instance.containerScrollTop + 'px' } },
+            h("dialog", { open: isOpen, style: { 'top': instance.getContainerScrollTop() + 'px' } },
                 h("div", { class: "GradientRounded Hollow" },
                     renderBar,
                     isOpen && renderDialogContent())))));
@@ -619,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,
@@ -668,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", { class: 'Game', onClick: () => { instance.onGameClick(game); } },
+        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: "" }))))));
     }
 };
@@ -685,7 +726,7 @@ const renders = {
     tab
 };
 
-const casinoEngagementSuiteTournamentCss = ".Leaderboards{height:100%;overflow-y:auto}.Wrapper{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}.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{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}.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;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 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 {
@@ -753,15 +794,47 @@ 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 + window.innerHeight / 2 - 400;
+            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);
     }
@@ -789,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)) {
@@ -799,9 +883,9 @@ const CasinoEngagementSuiteTournament = class {
         this.page = page;
     }
     render() {
-        return (h(Host, { key: '6ccc0ea805f77b2753cbb06f27953f8d6ae250e1' }, h("general-styling-wrapper", { key: '29be4b2eb25061f496844922c2d250d2d9967297', 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 }), h("div", { key: '2e7ab6c379e74abcc01635051a2621944733cb1c', class: 'Leaderboards', ref: el => this.pageElement = el }, 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,
@@ -818,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 = '';

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-ecf4f553.js';
-export { s as setNonce } from './index-ecf4f553.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],"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-ecf4f553.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: 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: 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
@@ -1561,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-8680a674.js';
-import './index-ecf4f553.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-ecf4f553.js';
-export { s as setNonce } from './index-ecf4f553.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],"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/components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Tab } from '../../utils/translations';
-import { Tournament, Leaderboard, LeaderboardPage, TournamentApi, Dialog, TournamentGame } from '../../utils/types';
+import { Dialog, Leaderboard, LeaderboardPage, Tournament, TournamentApi, TournamentGame } from '../../utils/types';
 import { type CasinoEngagementSuiteTournamentRenders } from '../../shared/renders';
 import '@everymatrix/general-animation-loading/dist';
 import "../../../../../../dist/packages/stencil/general-styling-wrapper/dist/types/index";
@@ -52,18 +52,16 @@ export declare class CasinoEngagementSuiteTournament {
         };
         WinDialog: {
             Tile: string;
-            Description: string; /**
-             * Client custom styling via string
-             */
+            Description: string;
             ButtonContinue: string;
         };
         NoLeaderboards: string;
         NoLeaderboardsTip: string;
-        Leaderboards: string; /**
-         * Translation via url
-         */
+        Leaderboards: string;
         TipPrize: string;
-        Tip: string;
+        Tip: string; /**
+         * Raw Leaderboards from API for Init
+         */
         TournamentNotStarted: string;
         BeOne: string;
         FailedToJoin: string;
@@ -91,6 +89,14 @@ export declare class CasinoEngagementSuiteTournament {
     newIdList: string[];
     labels: string[];
     pageElement: HTMLElement;
+    detailElement: HTMLElement;
+    tooltipIconReference: HTMLElement;
+    tooltipReference: HTMLElement;
+    private containerScrollTop;
+    showTooltip: boolean;
+    currentPlyerRank: number;
+    private maxPlyerRank;
+    scrolledToMyLine: boolean;
     handleEvent(e: MessageEvent): void;
     checkNewIdList(): void;
     syncBarState(newTournamentList: Tournament[], oldTournamentList: Tournament[]): void;
@@ -99,9 +105,13 @@ export declare class CasinoEngagementSuiteTournament {
     removeLabel(tag: string): void;
     setTimeInterval(): void;
     checkGift(): void;
-    containerScrollTop: number;
+    getContainerScrollTop(): number;
+    handleClickOutside(event: MouseEvent): void;
     componentDidLoad(): void;
+    renderTooltip(): any;
     connectedCallback(): void;
+    scrollToMyRankLine(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
     onGameClick(game: TournamentGame): void;
     actionJoin(tournament: Tournament): void;

package/dist/types/utils/bussiness.d.ts

@@ -33,3 +33,15 @@ export declare const getTournamentListByItem: (tournamentList: Tournament[], tou
     isActionJoinPending?: boolean;
     isUnjoined?: boolean;
 }[];
+export declare const getTournamentListParams: (language: string) => {
+    type: string;
+    messageType: string;
+    method: string;
+    queryParams: {
+        filter: string;
+        sortField: string;
+        sortOrder: string;
+        pagination: string;
+        language: string;
+    };
+};

package/dist/types/utils/message.d.ts

@@ -1,5 +1,7 @@
 import { Instance, Tournament, TournamentGame } from './types';
 export declare const messageSender: {
+    InitTournamentList: (queryParams: any) => void;
+    post: (options: any) => void;
     UpdateSuiteBarState: (labels: string[]) => void;
     JoinTournamentReq: (tournament: Tournament) => void;
     UnjoinTournamentReq: (tournament: Tournament) => void;

package/dist/types/utils/types.d.ts

@@ -68,7 +68,7 @@ export interface LeaderboardApi {
     rankWithoutUnqualified: number;
     prizeName: string;
     domainID: number;
-    userID: string;
+    userId: string;
     shortName: string;
     betCount: number;
     score: number;

package/dist/types/utils/utils.d.ts

@@ -8,3 +8,9 @@ export declare const getNewItems: <T>(newList: T[], oldList: T[], getCondition:
  * @param {boolean} isInteger - Whether to force return integer
  */
 export declare const truncateNumber: (value: any, decimals: any, isInteger?: boolean) => any;
+/**
+ * custom rules for component types
+ */
+export declare const isMobile: () => boolean;
+export declare const getDevice: () => "Android" | "iPhone" | "iPad" | "PC";
+export declare const getDevicePlatform: () => "dk" | "ios" | "mtWeb";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-engagement-suite-tournament",
-  "version": "1.60.2",
+  "version": "1.61.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",