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

package/dist/esm/{casino-engagement-suite-tournament-bc5e0906.js → casino-engagement-suite-tournament-54c513f1.js}

@@ -1,4 +1,4 @@
-import { h, H as Host, r as registerInstance, c as createEvent } from './index-ac437a77.js';
+import { h, H as Host, r as registerInstance, c as createEvent } from './index-8b5c4b95.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -105,33 +105,6 @@ 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) {
@@ -183,8 +156,10 @@ const isTournamentClosed = (tournament) => {
 
 const rewardSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c2NyaXB0IHhtbG5zPSIiLz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzIxMTVfMzA2KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNC45MDI5MiAwLjY2NjQ5NkM0LjkyMzM5IDAuNjY2NTc5IDQuOTQzNCAwLjY2NjY2IDQuOTYyODYgMC42NjY2NkgxMS4wMzY5QzExLjA1NjQgMC42NjY2NiAxMS4wNzY0IDAuNjY2NTc5IDExLjA5NjkgMC42NjY0OTZDMTEuMzA1NiAwLjY2NTY1MyAxMS41NjI3IDAuNjY0NjEzIDExLjc4OTMgMC43NDcwN0MxMi4xNTk2IDAuODgxODY4IDEyLjQ1MTQgMS4xNzM2MSAxMi41ODYyIDEuNTQzOTdDMTIuNjM5NCAxLjY5MDMxIDEyLjY1NzggMS44NDk0MiAxMi42NjQgMS45OTk5OUwxMy42ODQyIDEuOTk5OTlDMTMuODI0MiAxLjk5OTk4IDEzLjk2MDcgMS45OTk5NiAxNC4wNzY3IDIuMDA3ODhDMTQuMjAzNiAyLjAxNjU0IDE0LjM1NDEgMi4wMzY4NiAxNC41MTAxIDIuMTAxNDlDMTQuODM2OCAyLjIzNjgxIDE1LjA5NjQgMi40OTYzOCAxNS4yMzE3IDIuODIzMDhDMTUuMjk2NCAyLjk3OTExIDE1LjMxNjcgMy4xMjk1OSAxNS4zMjUzIDMuMjU2NTFDMTUuMzMzMyAzLjM3MjU2IDE1LjMzMzIgMy41MDg5OCAxNS4zMzMyIDMuNjQ5MDFWMy45OTk5OUMxNS4zMzMyIDQuMDMxMDIgMTUuMzMzMyA0LjA2MTU4IDE1LjMzMzMgNC4wOTE3MUMxNS4zMzM2IDQuNjIxOTcgMTUuMzMzOCA1LjAxNTc0IDE1LjI0MjQgNS4zNTY4NEMxNC45OTU4IDYuMjc3MDkgMTQuMjc3IDYuOTk1ODggMTMuMzU2OCA3LjI0MjQ2QzEzLjEwMyA3LjMxMDQ0IDEyLjgyMDIgNy4zMjc3NCAxMi40NzM3IDcuMzMyMDNDMTEuOTYxOCA5LjA1MzkzIDEwLjQ4MjkgMTAuMzU5NiA4LjY2NjU3IDEwLjYxOTRWMTEuMzMzM0g4Ljk2Mjg2QzEwLjY0MDIgMTEuMzMzMyAxMS45OTk5IDEyLjY5MzEgMTEuOTk5OSAxNC4zNzA0QzExLjk5OTkgMTQuOTAyMiAxMS41Njg4IDE1LjMzMzMgMTEuMDM2OSAxNS4zMzMzSDQuOTYyODZDNC40MzEwMyAxNS4zMzMzIDMuOTk5OSAxNC45MDIyIDMuOTk5OSAxNC4zNzA0QzMuOTk5OSAxMi42OTMxIDUuMzU5NjMgMTEuMzMzMyA3LjAzNjk0IDExLjMzMzNINy4zMzMyM1YxMC42MTk0QzUuNTE2OTMgMTAuMzU5NiA0LjAzODAyIDkuMDUzOTMgMy41MjYxIDcuMzMyMDNDMy4xNzk2MiA3LjMyNzc0IDIuODk2NzYgNy4zMTA0NCAyLjY0MzA1IDcuMjQyNDZDMS43MjI4MSA2Ljk5NTg4IDEuMDA0MDEgNi4yNzcwOSAwLjc1NzQzMyA1LjM1Njg0QzAuNjY2MDM1IDUuMDE1NzQgMC42NjYyNDggNC42MjE5NyAwLjY2NjUzNSA0LjA5MTcxQzAuNjY2NTUyIDQuMDYxNTkgMC42NjY1NjggNC4wMzEwMiAwLjY2NjU2OCAzLjk5OTk5VjMuNjY2NjZDMC42NjY1NjggMy42NjA3NyAwLjY2NjU2OCAzLjY1NDg5IDAuNjY2NTY3IDMuNjQ5MDFDMC42NjY1NTMgMy41MDg5OCAwLjY2NjU0IDMuMzcyNTYgMC42NzQ0NTggMy4yNTY1MUMwLjY4MzExNyAzLjEyOTU5IDAuNzAzNDMzIDIuOTc5MTEgMC43NjgwNjIgMi44MjMwOEMwLjkwMzM4NyAyLjQ5NjM4IDEuMTYyOTUgMi4yMzY4MSAxLjQ4OTY2IDIuMTAxNDlDMS42NDU2OSAyLjAzNjg2IDEuNzk2MTcgMi4wMTY1NCAxLjkyMzA4IDIuMDA3ODhDMi4wMzkxNCAxLjk5OTk2IDIuMTc1NTYgMS45OTk5OCAyLjMxNTU5IDEuOTk5OTlDMi4zMjE0NiAxLjk5OTk5IDIuMzI3MzUgMS45OTk5OSAyLjMzMzIzIDEuOTk5OTlIMy4zMzU4MUMzLjM0MTk2IDEuODQ5NDIgMy4zNjAzOCAxLjY5MDMxIDMuNDEzNjQgMS41NDM5N0MzLjU0ODQ0IDEuMTczNjEgMy44NDAxOSAwLjg4MTg2OCA0LjIxMDU0IDAuNzQ3MDdDNC40MzcwOSAwLjY2NDYxMyA0LjY5NDIxIDAuNjY1NjUzIDQuOTAyOTIgMC42NjY0OTZaTTMuMzMzMjMgMy4zMzMzM0gyLjMzMzIzQzIuMTY4OCAzLjMzMzMzIDIuMDc4ODYgMy4zMzM2OSAyLjAxMzg1IDMuMzM4MTJDMi4wMTA4MiAzLjMzODMzIDIuMDA3OTggMy4zMzg1NCAyLjAwNTMyIDMuMzM4NzVDMi4wMDUxMSAzLjM0MTQxIDIuMDA0OSAzLjM0NDI1IDIuMDA0NyAzLjM0NzI3QzIuMDAwMjYgMy40MTIyOSAxLjk5OTkgMy41MDIyMiAxLjk5OTkgMy42NjY2NlYzLjk5OTk5QzEuOTk5OSA0LjY2MjkgMi4wMDU2MyA0Ljg2MzU3IDIuMDQ1MzMgNS4wMTE3NUMyLjE2ODYyIDUuNDcxODcgMi41MjgwMiA1LjgzMTI3IDIuOTg4MTQgNS45NTQ1NkMzLjA2NzM0IDUuOTc1NzggMy4xNjE1MiA1Ljk4NzMgMy4zMzMyMyA1Ljk5MzQyVjMuMzMzMzNaTTQuNjY2NTcgMi4yOTYyOUM0LjY2NjU3IDIuMTUwMjUgNC42NjY4NSAyLjA3MDM5IDQuNjcwMzcgMi4wMTI0OUM0LjY3MDU1IDIuMDA5NTggNC42NzA3MiAyLjAwNjg3IDQuNjcwOSAyLjAwNDMzQzQuNjczNDQgMi4wMDQxNSA0LjY3NjE2IDIuMDAzOTcgNC42NzkwNyAyLjAwMzc5QzQuNzM2OTcgMi4wMDAyOCA0LjgxNjgzIDEuOTk5OTkgNC45NjI4NiAxLjk5OTk5SDExLjAzNjlDMTEuMTgzIDEuOTk5OTkgMTEuMjYyOCAyLjAwMDI4IDExLjMyMDcgMi4wMDM3OUMxMS4zMjM2IDIuMDAzOTcgMTEuMzI2NCAyLjAwNDE1IDExLjMyODkgMi4wMDQzM0MxMS4zMjkxIDIuMDA2ODYgMTEuMzI5MyAyLjAwOTU5IDExLjMyOTQgMi4wMTI0OUMxMS4zMzI5IDIuMDcwMzkgMTEuMzMzMiAyLjE1MDI1IDExLjMzMzIgMi4yOTYyOVY1Ljk5OTk5QzExLjMzMzIgNy44NDA5NCA5Ljg0MDg1IDkuMzMzMzMgNy45OTk5IDkuMzMzMzNDNi4xNTg5NSA5LjMzMzMzIDQuNjY2NTcgNy44NDA5NCA0LjY2NjU3IDUuOTk5OTlWMi4yOTYyOVpNMTIuNjY2NiAzLjMzMzMzVjUuOTkzNDJDMTIuODM4MyA1Ljk4NzMgMTIuOTMyNSA1Ljk3NTc4IDEzLjAxMTcgNS45NTQ1NkMxMy40NzE4IDUuODMxMjcgMTMuODMxMiA1LjQ3MTg3IDEzLjk1NDUgNS4wMTE3NUMxMy45OTQyIDQuODYzNTcgMTMuOTk5OSA0LjY2MjkgMTMuOTk5OSAzLjk5OTk5VjMuNjY2NjZDMTMuOTk5OSAzLjUwMjIyIDEzLjk5OTUgMy40MTIyOSAxMy45OTUxIDMuMzQ3MjdDMTMuOTk0OSAzLjM0NDI1IDEzLjk5NDcgMy4zNDE0MSAxMy45OTQ1IDMuMzM4NzVDMTMuOTkxOCAzLjMzODU0IDEzLjk4OSAzLjMzODMzIDEzLjk4NiAzLjMzODEyQzEzLjkyMDkgMy4zMzM2OSAxMy44MzEgMy4zMzMzMyAxMy42NjY2IDMuMzMzMzNIMTIuNjY2NlpNNy4wMzY5NCAxMi42NjY3QzYuMjIzMiAxMi42NjY3IDUuNTQyNzEgMTMuMjM3MiA1LjM3MzYxIDE0SDEwLjYyNjJDMTAuNDU3MSAxMy4yMzcyIDkuNzc2NiAxMi42NjY3IDguOTYyODYgMTIuNjY2N0g3LjAzNjk0WiIgZmlsbD0iIzhGOEI5QyIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzIxMTVfMzA2Ij4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+CjxzY3JpcHQgeG1sbnM9IiIvPgo8L3N2Zz4K';
 
+const helpSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48c2NyaXB0IHhtbG5zPSIiLz4KICAgIDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8xOTcxXzUxNikiPgogICAgICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC4wMDAwOCAyLjAwMDAxQzQuNjg2MzcgMi4wMDAwMSAyLjAwMDA4IDQuNjg2MyAyLjAwMDA4IDhDMi4wMDAwOCAxMS4zMTM3IDQuNjg2MzcgMTQgOC4wMDAwOCAxNEMxMS4zMTM4IDE0IDE0LjAwMDEgMTEuMzEzNyAxNC4wMDAxIDhDMTQuMDAwMSA0LjY4NjMgMTEuMzEzOCAyLjAwMDAxIDguMDAwMDggMi4wMDAwMVpNMC42NjY3NDggOEMwLjY2Njc0OCAzLjk0OTkyIDMuOTQ5OTkgMC42NjY2NzIgOC4wMDAwOCAwLjY2NjY3MkMxMi4wNTAyIDAuNjY2NjcyIDE1LjMzMzQgMy45NDk5MiAxNS4zMzM0IDhDMTUuMzMzNCAxMi4wNTAxIDEyLjA1MDIgMTUuMzMzMyA4LjAwMDA4IDE1LjMzMzNDMy45NDk5OSAxNS4zMzMzIDAuNjY2NzQ4IDEyLjA1MDEgMC42NjY3NDggOFpNOC4xNzIxNiA1LjM0OTU1QzcuODYxODEgNS4yOTYzMiA3LjU0MjY0IDUuMzU0NjQgNy4yNzExNyA1LjUxNDE4QzYuOTk5NzEgNS42NzM3MyA2Ljc5MzQ2IDUuOTI0MiA2LjY4ODk3IDYuMjIxMjNDNi41NjY3OSA2LjU2ODU2IDYuMTg2MTggNi43NTEwOCA1LjgzODg1IDYuNjI4ODlDNS40OTE1MyA2LjUwNjcxIDUuMzA5MDEgNi4xMjYxIDUuNDMxMTkgNS43Nzg3OEM1LjY0MDE3IDUuMTg0NyA2LjA1MjY2IDQuNjgzNzYgNi41OTU2IDQuMzY0NjdDNy4xMzg1MyA0LjA0NTU4IDcuNzc2ODggMy45Mjg5NCA4LjM5NzU3IDQuMDM1NDFDOS4wMTgyNiA0LjE0MTg3IDkuNTgxMjUgNC40NjQ1OCA5Ljk4NjgyIDQuOTQ2MzZDMTAuMzkyMyA1LjQyODA0IDEwLjYxNDMgNi4wMzc2NiAxMC42MTM0IDYuNjY3MjhDMTAuNjEzMSA3LjY4NzUyIDkuODU2NzEgOC4zNjEyNiA5LjMxNjU1IDguNzIxMzdDOS4wMjYxMyA4LjkxNDk5IDguNzQwNDUgOS4wNTczNSA4LjUzMDAxIDkuMTUwODhDOC40MjM4NCA5LjE5ODA2IDguMzM0NDQgOS4yMzM4NyA4LjI3MDAyIDkuMjU4NDFDOC4yMzc3NSA5LjI3MDcxIDguMjExNTkgOS4yODAyMyA4LjE5MjU1IDkuMjg3TDguMTY5MzkgOS4yOTUxMUw4LjE2MjAyIDkuMjk3NjNMOC4xNTk0MiA5LjI5ODVMOC4xNTg0IDkuMjk4ODVDOC4xNTgyIDkuMjk4OTEgOC4xNTc1NyA5LjI5OTEzIDcuOTQ2NzUgOC42NjY2N0w4LjE1NzU3IDkuMjk5MTNDNy44MDgyNyA5LjQxNTU2IDcuNDMwNzIgOS4yMjY3OCA3LjMxNDI5IDguODc3NDlDNy4xOTc5IDguNTI4MzEgNy4zODY1MSA4LjE1MDkgNy43MzU1OCA4LjAzNDMzTDcuNzQ1ODcgOC4wMzA3MkM3Ljc1NjEyIDguMDI3MDcgNy43NzI5MyA4LjAyMDk3IDcuNzk1MzUgOC4wMTI0M0M3Ljg0MDMxIDcuOTk1MyA3LjkwNzE2IDcuOTY4NjEgNy45ODg0OSA3LjkzMjQ2QzguMTUzMDUgNy44NTkzMyA4LjM2NzM3IDcuNzUxNjkgOC41NzY5NSA3LjYxMTk3QzkuMDM2NjggNy4zMDU0OCA5LjI4MDA4IDYuOTc5NDMgOS4yODAwOCA2LjY2NjY3TDkuMjgwMDggNi42NjU2OEM5LjI4MDU1IDYuMzUwOCA5LjE2OTU3IDYuMDQ1OTEgOC45NjY3OCA1LjgwNTAyQzguNzY0IDUuNTY0MTMgOC40ODI1MSA1LjQwMjc4IDguMTcyMTYgNS4zNDk1NVpNNy4zMzM0MSAxMS4zMzMzQzcuMzMzNDEgMTAuOTY1MSA3LjYzMTg5IDEwLjY2NjcgOC4wMDAwOCAxMC42NjY3SDguMDA2NzVDOC4zNzQ5NCAxMC42NjY3IDguNjczNDEgMTAuOTY1MSA4LjY3MzQxIDExLjMzMzNDOC42NzM0MSAxMS43MDE1IDguMzc0OTQgMTIgOC4wMDY3NSAxMkg4LjAwMDA4QzcuNjMxODkgMTIgNy4zMzM0MSAxMS43MDE1IDcuMzMzNDEgMTEuMzMzM1oiIGZpbGw9IiM2NjYxNzgiLz4KICAgIDwvZz4KICAgIDxkZWZzPgogICAgICAgIDxjbGlwUGF0aCBpZD0iY2xpcDBfMTk3MV81MTYiPgogICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IndoaXRlIi8+CiAgICAgICAgPC9jbGlwUGF0aD4KICAgIDwvZGVmcz4KPHNjcmlwdCB4bWxucz0iIi8+PC9zdmc+Cg==';
+
 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 iconQuestion = h("img", { src: helpSvg, alt: "question", class: "Question" });
 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" });
@@ -282,6 +257,14 @@ const leaderboardsAdapter = (leaderboardRes) => {
     if (!item) {
         return leaderboards;
     }
+    // show current player's rank info at first row if there is no player info in list
+    const playerRankIndex = leaderboards.findIndex((leaderboard) => {
+        return leaderboard.userId === item.userId;
+    });
+    playerRankIndex === -1 ? leaderboards = [
+        item,
+        ...leaderboards,
+    ] : {};
     return leaderboards.map((leaderboard) => {
         if ((item === null || item === void 0 ? void 0 : item.userId) && item.userId === leaderboard.userId) {
             return Object.assign(Object.assign({}, leaderboard), { isMe: true });
@@ -292,80 +275,16 @@ const leaderboardsAdapter = (leaderboardRes) => {
     });
 };
 
-const renderCloseBar = (attr) => {
-    const { left, middle, right } = attr;
-    const slots = {
-        left,
-        middle,
-        right,
-    };
-    const getFirstLetterUppercase = (str) => str
-        .split('')
-        .map((letter, index) => index === 0 ? letter.toUpperCase() : letter)
-        .join('');
-    return (h("div", { class: "WrapperBar" }, Object.keys(slots).map(slotKey => (h("div", { class: "WrapperBar" + getFirstLetterUppercase(slotKey) }, slots[slotKey] || '')))));
-};
-
-function formatDate(date) {
-    const options = {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false
-    };
-    return date.toLocaleDateString('en-US', options).replace(' at', ',');
-}
-function getProgress(startDate, endDate) {
-    return ((100 * (new Date().getTime() - startDate.getTime())) / (endDate.getTime() - startDate.getTime())).toFixed(0);
-}
-function getTimeDifference(startDate, endDate) {
-    const diffMs = Math.abs(endDate.getTime() - startDate.getTime()); // Difference in milliseconds
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // Difference in days
-    const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // Remaining hours
-    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); // Remaining minutes
-    return `${String(diffDays).padStart(2, '0')}d:${String(diffHours).padStart(2, '0')}h:${String(diffMinutes).padStart(2, '0')}m`;
-}
-
-const renderTimeBar = (tournament) => {
-    return (h("section", { class: "TimeContainer" },
-        h("div", { class: "Time" }, tournament.state === 'Running'
-            ? [
-                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", { 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',
-            id: tournament.id,
-            bonusCode: tournament.id || ((_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code)
-        });
-    },
+    JoinTournamentReq: (tournament) => window.postMessage({
+        type: 'JoinTournamentReq',
+        id: tournament.id,
+    }),
     UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
     UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
     UpdateLeaderboardsReq: (tournament, query) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id, query }),
+    UpdateTournamentsPageIsReady: () => window.postMessage({ type: 'TournamentsPageIsReady' }),
     UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' }),
     GameClickReq: (game) => window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } }),
 };
@@ -386,6 +305,7 @@ const messageReceiver = (instance) => {
         UpdateLeaderboardsRes: (rest) => processLeaderboardTableData(instance, rest),
         JoinTournamentRes: (rest) => commonJoinRes(instance, rest),
         UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest),
+        TournamentsPageIsReadyRes: (rest) => instance.currentGameId = rest.data.GameId,
         // listen to LeaderboardLiveEvent event, handle update
         LeaderboardLiveEvent: (rest) => {
             handleLeaderboardLiveEvent(instance, rest);
@@ -473,7 +393,10 @@ const showErrorMessage = (instance, type) => {
 const commonJoinRes = (instance, rest) => {
     const { success, data } = rest;
     let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.tournamentId || data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
-    current.isActionJoinPending = false;
+    if (tournamentIdx == -1) {
+        return;
+    }
+    current = Object.assign(Object.assign({}, current), { isActionJoinPending: false });
     if (!success) {
         instance.tournamentList[tournamentIdx] = current;
         instance.tournamentList = [...instance.tournamentList];
@@ -483,6 +406,15 @@ const commonJoinRes = (instance, rest) => {
     current = Object.assign(Object.assign({}, current), { isUnjoined: current.isPlayerAcknowledged ? true : false, isPlayerAcknowledged: !!!current.isPlayerAcknowledged });
     instance.tournamentList[tournamentIdx] = current;
     instance.tournamentList = [...instance.tournamentList];
+    if (instance.page === LeaderboardPage.item) {
+        if (current.isUnjoined) {
+            instance.setPage(LeaderboardPage.list);
+            return;
+        }
+        else {
+            instance.tournamentItem = Object.assign({}, current);
+        }
+    }
     if (instance.nextPage) {
         instance.setPage(instance.nextPage);
         instance.nextPage = undefined;
@@ -507,11 +439,15 @@ const removeTournament = (instance, tournament) => {
 };
 const updateOrAddTournamentToList = (instance, tournament) => {
     const index = instance.tournamentList.findIndex((_tournament) => _tournament.id === tournament.id);
-    if (index !== -1) {
-        instance.tournamentList[index] = tournamentAdapter(tournament);
+    if (index === -1) {
+        instance.tournamentList = [
+            tournamentAdapter(tournament),
+            ...instance.tournamentList
+        ];
     }
     else {
-        instance.tournamentList = instance.tournamentList.concat(tournamentAdapter(tournament));
+        instance.tournamentList[index] = tournamentAdapter(tournament);
+        instance.tournamentList = [...instance.tournamentList];
     }
 };
 
@@ -524,21 +460,12 @@ const page = {
         }
         const { locale } = instance;
         if (instance.tournamentList.length) {
-            const onClickListItemChangePage = (tournament) => {
-                instance.setPage(LeaderboardPage.item, { tournament });
-                instance.newIdList = instance.newIdList.filter((id) => id !== tournament.id);
-            };
-            return renderLeaderboardContainer(instance, h("div", { class: 'Leaderboards Row' }, instance.tournamentList.map((_tournament) => (h("div", { class: classnames('LeaderboardsItem', _tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', _tournament.isUnjoined ? 'Unjoined' : ''), onClick: () => onClickListItemChangePage(_tournament) },
-                h("div", { class: "LeaderboardsItemContainer" },
-                    renderTitleContainer(instance, _tournament),
-                    renderTimeBar(_tournament)),
-                h("div", { class: "LeaderboardLabels" }, instance.newIdList.includes(_tournament.id) && (h("div", { class: "LeaderboardLabel" },
-                    h("span", null, "new")))))))));
+            return renderWrapperByPageType(h("div", { class: "Leaderboards ScrollBar Row" }, instance.tournamentList.map((_tournament) => (h("casino-engagement-suite-tournament-item", { tournament: _tournament, isNew: instance.newIdList.includes(_tournament.id) })))));
         }
         else {
-            return renderLeaderboardContainer(instance, h("div", { class: "NoLeaderboards Row" },
-                h("h3", { class: 'Title' }, locale.NoLeaderboards),
-                h("div", { class: 'message' }, locale.NoLeaderboardsTip)));
+            return renderWrapperByPageType(h("div", { class: "NoLeaderboards ScrollBar Row" },
+                h("h3", { class: "Title" }, locale.NoLeaderboards),
+                h("div", { class: "message" }, locale.NoLeaderboardsTip)));
         }
     },
     item(instance) {
@@ -562,92 +489,60 @@ const page = {
                 h("div", { class: "Tabs" }, Object.keys(Tab).map((_tab) => (h("div", { class: classnames({ active: tab === _tab }),
                     onClick: () => onClickTab(_tab) }, locale[_tab]))))));
         };
-        return renderLeaderboardContainer(instance, [
-            renderTitleContainer(instance, instance.tournamentItem),
+        return renderWrapperByPageType([
+            h("casino-engagement-suite-tournament-item-title", { tournament: instance.tournamentItem }),
             renderTabs(),
             h("div", { class: `TableContentWrapper ${instance.tab}` }, instance.renders.tab[instance.tab]())
         ]);
     }
 };
-const renderTitleContainer = (instance, tournament) => {
-    const { locale } = instance;
-    const onClickItemJoin = (tournament) => {
-        if (tournament.isPlayerAcknowledged) {
-            instance.openDialog(DialogType.unjoin, tournament);
-        }
-        else {
-            instance.actionJoin(tournament);
-            instance.tournamentItem = tournament;
-        }
-    };
-    return (h("div", { class: "TitleContainer" },
-        h("div", { class: "Title" }, tournament.nameOrTitle),
-        tournament.state !== TournamentState.Closed && (h("div", null, renderGradientRoundedButton({
-            statedClasses: {
-                isHollow: tournament.isPlayerAcknowledged,
-                isPending: tournament.isActionJoinPending
-            },
-            onClick: (e) => {
-                e.stopPropagation();
-                if (!tournament.isActionJoinPending) {
-                    onClickItemJoin(tournament);
-                }
-            },
-            innerHTML: tournament.isPlayerAcknowledged ? locale.Unjoin : locale.Join
-        })))));
+const renderWrapperByPageType = (render) => {
+    return (h("div", { class: "Root" },
+        h("div", { class: "Main" }, render)));
 };
-const renderLeaderboardContainer = (instance, render) => {
-    const { dialog: { isOpen } } = instance;
-    const renderBar = renderCloseBar({
-        right: h("span", { onClick: () => instance.closeDialog() }, iconClose)
-    });
-    const renderDialogContent = () => {
-        switch (instance.dialog.type) {
-            case DialogType.unjoin:
-                return instance.renders.dialog.unjoin();
-            case DialogType.tip:
-                return h("div", { class: "Tip" }, instance.locale.Tip);
-            case DialogType.error:
-                return h("div", { class: "Tip Error" }, instance.locale.FailedToJoin);
-            case DialogType.gift:
-                return instance.renders.dialog.gift();
-        }
-    };
-    const getWrapperBarData = () => {
-        const { page, locale } = instance;
-        switch (page) {
-            case LeaderboardPage.list:
-                return {
-                    left: h("span", { onClick: () => instance.openDialog(DialogType.tip), onMouseEnter: () => { instance.showTooltip = true; }, onMouseLeave: () => { instance.showTooltip = false; }, ref: (el) => instance.tooltipIconReference = el },
-                        iconQuestion,
-                        instance.renderTooltip()),
-                    middle: locale.Leaderboards
-                };
-            case LeaderboardPage.item:
-                return {
-                    left: h("span", { onClick: () => instance.setPage(LeaderboardPage.list) }, iconBack),
-                    middle: locale.Leaderboards
-                };
-        }
-    };
-    const renderCloseBarInLayout = () => {
-        const { left, middle } = getWrapperBarData();
-        return renderCloseBar({
-            left,
-            middle,
-            right: h("span", { onClick: () => instance.close.emit() }, iconClose)
-        });
+
+function formatDate(date) {
+    const options = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
     };
-    return (h("div", { class: `Wrapper ${instance.device}` },
-        h("div", { class: classnames('WrapperContent', { faded: isOpen }) },
-            renderCloseBarInLayout(),
-            h("div", { class: "Root" },
-                h("div", { class: "Main" }, render))),
-        h("div", { class: "WrapperUtil" },
-            h("dialog", { open: isOpen, style: { 'top': instance.getContainerScrollTop() + 'px' } },
-                h("div", { class: "GradientRounded Hollow" },
-                    renderBar,
-                    isOpen && renderDialogContent())))));
+    return date.toLocaleDateString('en-US', options).replace(' at', ',');
+}
+function getProgress(startDate, endDate) {
+    if (new Date().getTime() >= endDate.getTime()) {
+        return 100;
+    }
+    return ((100 * (new Date().getTime() - startDate.getTime())) / (endDate.getTime() - startDate.getTime())).toFixed(0);
+}
+function getTimeDifference(startDate, endDate) {
+    const diffMs = Math.abs(endDate.getTime() - startDate.getTime()); // Difference in milliseconds
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); // Difference in days
+    const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // Remaining hours
+    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); // Remaining minutes
+    return `${String(diffDays).padStart(2, '0')}d:${String(diffHours).padStart(2, '0')}h:${String(diffMinutes).padStart(2, '0')}m`;
+}
+
+const renderTimeBar = (tournament) => {
+    return (h("section", { class: "TimeContainer" },
+        h("div", { class: "Time" }, tournament.state === 'Running'
+            ? [
+                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", { 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 tab = {
@@ -657,12 +552,12 @@ const tab = {
         return (h("div", { class: "InfoContainer" },
             renderTimeBar(tournament),
             h("section", { class: "ShowInfo", onClick: () => (instance.isShowInfo = !instance.isShowInfo) },
-                h("div", { class: 'DetailHeader' },
+                h("div", { class: "DetailHeader" },
                     h("span", null, isShowInfo ? iconEyeOpen : iconEyeClose),
                     h("span", null, locale.LeaderboardDetails))),
             h("div", { class: `ContentScrollContainer ${isShowInfo ? 'expanded' : ''}` },
                 isShowInfo && (h("section", { class: "Info" },
-                    h("div", { class: 'Description' }, tournament.description),
+                    h("div", { class: "Description" }, tournament.description),
                     h("div", { class: "Criterias" },
                         h("div", null,
                             locale.ScoreCriteria,
@@ -706,7 +601,7 @@ const tab = {
     },
     games(instance) {
         var _a;
-        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: 'Game', onClick: () => {
+        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: `Game ${instance.currentGameId == game.id ? 'Current' : ''}`, onClick: () => {
                 instance.onGameClick(game);
             } },
             h("img", { src: game.defaultThumbnail, alt: "" }))))));
@@ -733,7 +628,21 @@ var F=Object.defineProperty,J=Object.defineProperties;var V=Object.getOwnPropert
 
 if(typeof window!="undefined"){let n=function(t){return function(...i){try{return t.apply(this,i)}catch(e){if(e instanceof DOMException&&e.message.includes("has already been used with this registry")||e.message.includes("Cannot define multiple custom elements with the same tag name"))return !1;throw e}}};customElements.define=n(customElements.define),Promise.resolve().then(()=>GeneralAnimationLoadingCYLqpfzI).then(({default:t})=>{!customElements.get("general-animation-loading")&&customElements.define("general-animation-loading",t.element);});}
 
-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 renderCloseBar = (attr) => {
+    const { left, middle, right } = attr;
+    const slots = {
+        left,
+        middle,
+        right
+    };
+    const getFirstLetterUppercase = (str) => str
+        .split('')
+        .map((letter, index) => index === 0 ? letter.toUpperCase() : letter)
+        .join('');
+    return (h("div", { class: "WrapperBar" }, Object.keys(slots).map(slotKey => (h("div", { class: 'WrapperBar' + getFirstLetterUppercase(slotKey) }, slots[slotKey] || '')))));
+};
+
+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 .TableContentWrapper{scrollbar-width:thin;scrollbar-color:var(--emw--color-background, hsl(254, 8.53%, 54.93%)) transparent}.Wrapper .WrapperContent .TableContentWrapper{height:calc(100vh - 278px);overflow-y:auto}.Wrapper .WrapperContent .Main{height:calc(100vh - 188px)}.Wrapper.Mobile{border-radius:16px}.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}.ScrollBar{scrollbar-width:thin;scrollbar-color:var(--emw--color-background, hsl(254, 8.53%, 54.93%)) transparent}.Row{margin:10px 0;padding:0 20px}.Row:first-child{margin:0;padding-top:5px}.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 .Running{width:100%;display:flex;flex-direction:row;justify-content:space-between}.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.Current{cursor:auto;filter:grayscale(10)}.Games .Game:hover{filter:brightness(var(--emw--hover-brightness, 1.25))}.Games .Game.Current:hover{cursor:auto;filter:grayscale(10)}.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 {
@@ -742,6 +651,21 @@ const CasinoEngagementSuiteTournament = class {
         const _c = e.data, { type } = _c, rest = __rest(_c, ["type"]);
         (_b = (_a = messageReceiver(this)) === null || _a === void 0 ? void 0 : _a[type]) === null || _b === void 0 ? void 0 : _b.call(null, rest);
     }
+    handleClickToTournamentDetail(e) {
+        const tournament = e.detail;
+        this.setPage(LeaderboardPage.item, { tournament });
+        this.newIdList = this.newIdList.filter((id) => id !== tournament.id);
+    }
+    ;
+    handleJoinTournamentEvent(e) {
+        const tournament = e.detail;
+        this.actionJoin(tournament);
+        this.tournamentItem = tournament;
+    }
+    handleUnjoinTournamentEvent(e) {
+        const { tournament } = e.detail;
+        this.openDialog(DialogType.unjoin, tournament);
+    }
     checkNewIdList() {
         if (this.newIdList.length > 0) {
             this.addLabel('new');
@@ -752,7 +676,6 @@ const CasinoEngagementSuiteTournament = class {
     }
     syncBarState(newTournamentList, oldTournamentList) {
         if (!oldTournamentList) {
-            // init
             this.checkNewIdList();
             if (this.gifts.length) {
                 this.addLabel('win');
@@ -779,11 +702,6 @@ const CasinoEngagementSuiteTournament = class {
         this.labels = this.labels.filter((label) => label != tag);
         messageSender.UpdateSuiteBarState(this.labels);
     }
-    setTimeInterval() {
-        this.timeHolder = setInterval(() => {
-            this.time = this.tournamentList || this.tournamentItem ? this.time + 1 : 0;
-        }, 1000);
-    }
     checkGift() {
         //check gift
         if (this.gifts.length) {
@@ -802,7 +720,8 @@ const CasinoEngagementSuiteTournament = class {
         }
     }
     getContainerScrollTop() {
-        return this.page === LeaderboardPage.list ? this.containerScrollTop : this.detailElement.clientHeight / 2 - 250;
+        var _a;
+        return this.page === LeaderboardPage.list ? this.containerScrollTop : ((_a = this.detailElement) === null || _a === void 0 ? void 0 : _a.clientHeight) / 2 - 250;
     }
     handleClickOutside(event) {
         if (event.composedPath()[0] === this.tooltipIconReference)
@@ -814,6 +733,7 @@ const CasinoEngagementSuiteTournament = class {
         this.pageElement.addEventListener('scroll', (event) => {
             this.containerScrollTop = event.target.scrollTop + event.target.clientHeight / 2 - 250;
         });
+        messageSender.UpdateTournamentsPageIsReady();
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -822,7 +742,6 @@ const CasinoEngagementSuiteTournament = class {
         return null;
     }
     connectedCallback() {
-        this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
     }
     scrollToMyRankLine() {
@@ -833,25 +752,24 @@ const CasinoEngagementSuiteTournament = class {
         this.scrolledToMyLine = true;
     }
     componentDidRender() {
-        if (this.page === LeaderboardPage.item && this.tab === Tab.leaderboard && !this.scrolledToMyLine) {
-            if (this.currentPlyerRank > this.maxPlyerRank) {
+        if (this.page === LeaderboardPage.item && this.tab === Tab.leaderboard) {
+            if (this.currentPlyerRank > this.maxPlyerRank && !this.scrolledToMyLine) {
                 this.scrollToMyRankLine();
             }
         }
-        else {
+        else if (this.page === LeaderboardPage.list) {
             this.scrolledToMyLine = false;
         }
     }
-    disconnectedCallback() {
-        clearInterval(this.timeHolder);
-    }
     onGameClick(game) {
+        if (game.id === this.currentGameId) {
+            return;
+        }
         messageSender.GameClickReq(game);
     }
     actionJoin(tournament) {
         if (tournament.isActionJoinPending)
             return;
-        tournament.isActionJoinPending = true;
         try {
             if (tournament.isPlayerAcknowledged) {
                 messageSender.UnjoinTournamentReq(tournament);
@@ -866,33 +784,46 @@ const CasinoEngagementSuiteTournament = class {
         }
     }
     setPage(page, metaData) {
-        if (page == LeaderboardPage.item) {
+        var _a;
+        this.page = page;
+        if (page === LeaderboardPage.item) {
+            this.isShowInfo = false;
             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)) {
                 messageSender.UpdateLeaderboardsReq(this.tournamentItem);
             }
+            this.tab = Tab.info;
         }
-        this.tab = Tab.info;
-        this.page = page;
+        this.tournamentTimer.emit({ page, tournamentId: (_a = this.tournamentItem) === null || _a === void 0 ? void 0 : _a.id });
     }
     render() {
-        return (h(Host, { key: '5a65900ecb503dd01f8f39774b92a6e95048dbf3' }, h("general-styling-wrapper", { key: '58cee35cf4142512e9b49566787b48cbc2761a4a', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
+        const renderDialogContent = () => {
+            switch (this.dialog.type) {
+                case DialogType.unjoin:
+                    return this.renders.dialog.unjoin();
+                case DialogType.tip:
+                    return h("div", { class: "Tip" }, this.locale.Tip);
+                case DialogType.error:
+                    return h("div", { class: "Tip Error" }, this.locale.FailedToJoin);
+                case DialogType.gift:
+                    return this.renders.dialog.gift();
+            }
+        };
+        return (h(Host, null, h("general-styling-wrapper", { clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
             // @ts-ignore
-            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())));
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { class: `Wrapper ${this.device}` }, h("div", { class: classnames('WrapperContent', { faded: this.dialog.isOpen }) }, renderCloseBar({
+            left: this.page === LeaderboardPage.list
+                ? h("span", { onClick: this.openDialog.bind(this, DialogType.tip) }, iconQuestion)
+                : h("span", { onClick: this.setPage.bind(this, LeaderboardPage.list) }, iconBack),
+            middle: this.locale.Leaderboards,
+            right: h("span", { onClick: () => this.close.emit() }, iconClose)
+        }), h("div", { class: `Leaderboards  ${this.page} ${this.page === 'list' ? 'Active' : 'Hidden'}`, ref: el => this.pageElement = el }, this.renders.page.list()), this.page === LeaderboardPage.item &&
+            h("div", { class: `Leaderboards ${this.page} ${this.page === 'item' ? 'Active' : 'Hidden'} `, ref: el => this.detailElement = el }, this.renders.page.item())), h("div", { class: "WrapperUtil" }, h("dialog", { open: this.dialog.isOpen, style: { 'top': this.getContainerScrollTop() + 'px' } }, h("div", { class: "GradientRounded Hollow" }, renderCloseBar({
+            right: h("span", { onClick: () => this.closeDialog() }, iconClose)
+        }), this.dialog.isOpen && renderDialogContent()))))));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
@@ -907,6 +838,7 @@ const CasinoEngagementSuiteTournament = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "close", 7);
+        this.tournamentTimer = createEvent(this, "tournamentTimer", 7);
         this.gifts = [];
         this.labels = [];
         this.showTooltip = false;
@@ -934,7 +866,6 @@ const CasinoEngagementSuiteTournament = class {
             data: undefined,
             onClose: undefined
         };
-        this.time = 0;
         this.newIdList = [];
         // bind all renders
         this.renders = {};
@@ -953,4 +884,4 @@ const CasinoEngagementSuiteTournament = class {
 };
 CasinoEngagementSuiteTournament.style = CasinoEngagementSuiteTournamentStyle0;
 
-export { CasinoEngagementSuiteTournament as C };
+export { CasinoEngagementSuiteTournament as C, DialogType as D, LeaderboardPage as L, TRANSLATIONS as T, TournamentState as a, getProgress as b, classnames as c, formatDate as f, getTimeDifference as g, renderGradientRoundedButton as r };