@everymatrix/casino-engagement-suite-tournament 1.62.1 → 1.62.3

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-982cd594.js');
+const index = require('./index-5e98dd13.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_3.cjs",[[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);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_6.cjs",[[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],"newIdList":[32]},[[8,"message","handleEvent"],[16,"clickToTournamentDetail","handleClickToTournamentDetail"],[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentEvent","handleUnjoinTournamentEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[0,"casino-engagement-suite-tournament-item",{"tournament":[16],"isNew":[4,"is-new"],"locale":[32]},[[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentEvent","handleUnjoinTournamentEvent"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"casino-engagement-suite-tournament-timer",{"tournament":[16],"time":[32],"timeHolder":[32],"timeCloak":[32]},[[0,"tournamentTimer","containerPageChangeHandler"]]],[0,"casino-engagement-suite-tournament-item-title",{"tournament":[16],"locale":[32],"isButtonDisabed":[32]},null,{"tournament":["onTournamentChanged"]}],[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]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-982cd594.js → index-5e98dd13.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 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: 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 };
+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: true, 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
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'casino-engagement-suite-progress-bar_3.cjs':
+                case 'casino-engagement-suite-progress-bar_6.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './casino-engagement-suite-progress-bar_3.cjs.entry.js')); }).then(processMod, consoleError);
+                        './casino-engagement-suite-progress-bar_6.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -1585,6 +1585,7 @@ var hostListenerProxy = (hostRef, methodName) => (ev) => {
 var getHostListenerTarget = (elm, flags) => {
   if (flags & 4 /* TargetDocument */) return doc;
   if (flags & 8 /* TargetWindow */) return win;
+  if (flags & 16 /* TargetBody */) return doc.body;
   return elm;
 };
 var hostListenerOpts = (flags) => supportsListenerOptions ? {

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-bc4edfdf.js');
-require('./index-982cd594.js');
+const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-1f1275c4.js');
+require('./index-5e98dd13.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-982cd594.js');
+const index = require('./index-5e98dd13.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_3.cjs",[[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);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_6.cjs",[[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],"newIdList":[32]},[[8,"message","handleEvent"],[16,"clickToTournamentDetail","handleClickToTournamentDetail"],[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentEvent","handleUnjoinTournamentEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[0,"casino-engagement-suite-tournament-item",{"tournament":[16],"isNew":[4,"is-new"],"locale":[32]},[[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentEvent","handleUnjoinTournamentEvent"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"casino-engagement-suite-tournament-timer",{"tournament":[16],"time":[32],"timeHolder":[32],"timeCloak":[32]},[[0,"tournamentTimer","containerPageChangeHandler"]]],[0,"casino-engagement-suite-tournament-item-title",{"tournament":[16],"locale":[32],"isButtonDisabed":[32]},null,{"tournament":["onTournamentChanged"]}],[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]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/help.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><script xmlns=""/>
+    <g clip-path="url(#clip0_1971_516)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 2.00001C4.68637 2.00001 2.00008 4.6863 2.00008 8C2.00008 11.3137 4.68637 14 8.00008 14C11.3138 14 14.0001 11.3137 14.0001 8C14.0001 4.6863 11.3138 2.00001 8.00008 2.00001ZM0.666748 8C0.666748 3.94992 3.94999 0.666672 8.00008 0.666672C12.0502 0.666672 15.3334 3.94992 15.3334 8C15.3334 12.0501 12.0502 15.3333 8.00008 15.3333C3.94999 15.3333 0.666748 12.0501 0.666748 8ZM8.17216 5.34955C7.86181 5.29632 7.54264 5.35464 7.27117 5.51418C6.99971 5.67373 6.79346 5.9242 6.68897 6.22123C6.56679 6.56856 6.18618 6.75108 5.83885 6.62889C5.49153 6.50671 5.30901 6.1261 5.43119 5.77878C5.64017 5.1847 6.05266 4.68376 6.5956 4.36467C7.13853 4.04558 7.77688 3.92894 8.39757 4.03541C9.01826 4.14187 9.58125 4.46458 9.98682 4.94636C10.3923 5.42804 10.6143 6.03766 10.6134 6.66728C10.6131 7.68752 9.85671 8.36126 9.31655 8.72137C9.02613 8.91499 8.74045 9.05735 8.53001 9.15088C8.42384 9.19806 8.33444 9.23387 8.27002 9.25841C8.23775 9.27071 8.21159 9.28023 8.19255 9.287L8.16939 9.29511L8.16202 9.29763L8.15942 9.2985L8.1584 9.29885C8.1582 9.29891 8.15757 9.29913 7.94675 8.66667L8.15757 9.29913C7.80827 9.41556 7.43072 9.22678 7.31429 8.87749C7.1979 8.52831 7.38651 8.1509 7.73558 8.03433L7.74587 8.03072C7.75612 8.02707 7.77293 8.02097 7.79535 8.01243C7.84031 7.9953 7.90716 7.96861 7.98849 7.93246C8.15305 7.85933 8.36737 7.75169 8.57695 7.61197C9.03668 7.30548 9.28008 6.97943 9.28008 6.66667L9.28008 6.66568C9.28055 6.3508 9.16957 6.04591 8.96678 5.80502C8.764 5.56413 8.48251 5.40278 8.17216 5.34955ZM7.33341 11.3333C7.33341 10.9651 7.63189 10.6667 8.00008 10.6667H8.00675C8.37494 10.6667 8.67341 10.9651 8.67341 11.3333C8.67341 11.7015 8.37494 12 8.00675 12H8.00008C7.63189 12 7.33341 11.7015 7.33341 11.3333Z" fill="#666178"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_1971_516">
+            <rect width="16" height="16" fill="white"/>
+        </clipPath>
+    </defs>
+<script xmlns=""/></svg>

package/dist/collection/collection-manifest.json

@@ -1,6 +1,9 @@
 {
   "entries": [
-    "components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.js"
+    "components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.js",
+    "shared/TournamentDurationTimer.js",
+    "shared/TournamentItem.js",
+    "shared/TournamentItemTitle.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.css

@@ -42,13 +42,20 @@
   flex-direction: column;
   border-radius: 24px;
 }
-.Wrapper.Mobile {
-  border-radius: 16px;
+.Wrapper .TableContentWrapper {
+  scrollbar-width: thin;
+  scrollbar-color: var(--emw--color-background, hsl(254, 8.53%, 54.93%)) transparent;
 }
-.Wrapper.Mobile .WrapperContent .TableContentWrapper {
+.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;
@@ -101,12 +108,18 @@
   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 {
@@ -152,6 +165,12 @@
   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;
@@ -415,9 +434,17 @@
   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;

package/dist/collection/components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { h, Host } from "@stencil/core";
 import { Tab, TRANSLATIONS } from "../../utils/translations";
-import { getDevicePlatform, getNewItems } from "../../utils/utils";
+import { classnames, getNewItems } from "../../utils/utils";
 import { DialogType, LeaderboardPage } from "../../utils/types";
 import { isTournamentClosed } from "../../utils/bussiness";
 import { renders } from "../../shared/renders";
@@ -9,12 +9,29 @@ import { messageReceiver, messageSender } from "../../utils/message";
 import "../../../../../../svelte/general-animation-loading/es2015/general-animation-loading";
 import "../../../../../general-styling-wrapper/dist/types/index";
 import "../../../../../casino-engagement-suite-progress-bar/dist/types/index";
+import { renderCloseBar } from "../../shared/renderBar";
+import { iconBack, iconClose, iconQuestion } from "../../shared/icons";
 export class CasinoEngagementSuiteTournament {
     handleEvent(e) {
         var _a, _b;
         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');
@@ -25,7 +42,6 @@ export class CasinoEngagementSuiteTournament {
     }
     syncBarState(newTournamentList, oldTournamentList) {
         if (!oldTournamentList) {
-            // init
             this.checkNewIdList();
             if (this.gifts.length) {
                 this.addLabel('win');
@@ -52,11 +68,6 @@ export class CasinoEngagementSuiteTournament {
         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) {
@@ -75,7 +86,8 @@ export class CasinoEngagementSuiteTournament {
         }
     }
     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)
@@ -87,6 +99,7 @@ export class CasinoEngagementSuiteTournament {
         this.pageElement.addEventListener('scroll', (event) => {
             this.containerScrollTop = event.target.scrollTop + event.target.clientHeight / 2 - 250;
         });
+        messageSender.UpdateTournamentsPageIsReady();
     }
     renderTooltip() {
         if (this.showTooltip) {
@@ -95,7 +108,6 @@ export class CasinoEngagementSuiteTournament {
         return null;
     }
     connectedCallback() {
-        this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
     }
     scrollToMyRankLine() {
@@ -106,25 +118,24 @@ export class CasinoEngagementSuiteTournament {
         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);
@@ -139,33 +150,46 @@ export class CasinoEngagementSuiteTournament {
         }
     }
     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,
@@ -205,7 +229,6 @@ export class CasinoEngagementSuiteTournament {
             data: undefined,
             onClose: undefined
         };
-        this.time = 0;
         this.newIdList = [];
         // bind all renders
         this.renders = {};
@@ -373,7 +396,6 @@ export class CasinoEngagementSuiteTournament {
             "page": {},
             "tournamentInDialog": {},
             "dialog": {},
-            "time": {},
             "newIdList": {}
         };
     }
@@ -393,6 +415,21 @@ export class CasinoEngagementSuiteTournament {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "tournamentTimer",
+                "name": "tournamentTimer",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
@@ -414,6 +451,24 @@ export class CasinoEngagementSuiteTournament {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "clickToTournamentDetail",
+                "method": "handleClickToTournamentDetail",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "joinTournamentEvent",
+                "method": "handleJoinTournamentEvent",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "unjoinTournamentEvent",
+                "method": "handleUnjoinTournamentEvent",
+                "target": "body",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
                 "method": "handleClickOutside",

package/dist/collection/shared/TournamentDurationTimer.js

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+import { formatDate, getProgress, getTimeDifference } from "../utils/util.date";
+import { renderGradientRoundedButton } from "./GradientRoundedButton";
+import { LeaderboardPage, TournamentState } from "../utils/types";
+export class CasinoEngagementSuiteTournamentTimer {
+    constructor() {
+        this.tournament = undefined;
+        this.time = 0;
+        this.timeHolder = undefined;
+        this.timeCloak = true;
+    }
+    containerPageChangeHandler(event) {
+        this.timeCloak = event.detail.page === LeaderboardPage.list ||
+            event.detail.page === LeaderboardPage.item && this.tournament.id === event.detail.tournamentId;
+    }
+    setTimeInterval() {
+        this.timeHolder = setInterval(() => {
+            var _a;
+            const timeDifference = getTimeDifference(new Date(), this.tournament.endTime);
+            const progress = getProgress(this.tournament.startTime, this.tournament.endTime);
+            if (this.timeCloak &&
+                ![TournamentState.Closed, TournamentState.Closing].includes((_a = this.tournament) === null || _a === void 0 ? void 0 : _a.state) &&
+                (timeDifference != this.lastTimeDiff || progress != this.lastProgress)) {
+                this.time++;
+                this.lastProgress = progress;
+                this.lastTimeDiff = timeDifference;
+            }
+        }, 2000);
+    }
+    connectedCallback() {
+        this.setTimeInterval();
+    }
+    disconnectedCallback() {
+        clearInterval(this.timeHolder);
+    }
+    render() {
+        return h("section", { key: 'b5d514586445a3acc665fcbbbaa0d139b7b28075', class: "TimeContainer" }, h("div", { key: '2080b18edd157a337d5c7f164d1914e91a95a3f3', class: "Time" }, this.tournament.state === 'Running'
+            ? [
+                h("div", { class: "Running" }, h("div", null, this.lastTimeDiff), ",", h("div", null, renderGradientRoundedButton({
+                    statedClasses: {
+                        isHollow: true,
+                        isPendding: false
+                    },
+                    innerHTML: `${getProgress(this.tournament.startTime, this.tournament.endTime)}%`
+                })))
+            ]
+            : [h("div", { class: "NotRunning" }, formatDate(this.tournament.startTime)), h("div", null, formatDate(this.tournament.endTime))]), h("casino-engagement-suite-progress-bar", { key: 'b841cc70a1307f1175f0748644aaaeee9e1094ff', value: Number(this.lastProgress >= 100 ? 100 : this.lastProgress), "hide-percent": true }));
+    }
+    static get is() { return "casino-engagement-suite-tournament-timer"; }
+    static get properties() {
+        return {
+            "tournament": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Tournament",
+                    "resolved": "{ href: string; id: string; nameOrTitle: string; description: string; termsUrl: string; thumbnail: string; thumbnails: []; startTime: Date; endTime: Date; closeTime: Date; exhibitionStartTime: Date; exhibitionEndTime: Date; state: TournamentState; tags: string; minBetCount: number; dataSource: string; scoreCriteria: string; wallets: { code: string; }; prizes: { rank: number; count: number; name: string; }[]; games?: TournamentGame[]; playerEnrolled?: boolean; isPlayerAcknowledged?: boolean; isActionJoinPending?: boolean; isUnjoined?: boolean; }",
+                    "references": {
+                        "Tournament": {
+                            "location": "import",
+                            "path": "../utils/types",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-tournament/src/utils/types.ts::Tournament"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "time": {},
+            "timeHolder": {},
+            "timeCloak": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "tournamentTimer",
+                "method": "containerPageChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/shared/TournamentItem.js

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { classnames } from "../utils/utils";
+import { TRANSLATIONS } from "../utils/translations";
+export class CasinoEngagementSuiteTournamentItem {
+    constructor() {
+        this.tournament = undefined;
+        this.isNew = undefined;
+        this.locale = TRANSLATIONS;
+    }
+    handleJoinTournamentEvent(e) {
+        if (this.tournament.id === e.detail.id) {
+            this.tournament = Object.assign(Object.assign({}, this.tournament), { isActionJoinPending: true });
+        }
+    }
+    handleUnjoinTournamentEvent(e) {
+        if (this.tournament.id === e.detail.id) {
+            this.tournament = Object.assign(Object.assign({}, this.tournament), { isActionJoinPending: true });
+        }
+    }
+    goToDetail() {
+        this.clickToTournamentDetail.emit(this.tournament);
+    }
+    render() {
+        const tournament = this.tournament;
+        return (h("div", { key: 'e507da65532f4608aa96c1ebe2e329d332b9c439', class: classnames('LeaderboardsItem', tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', tournament.isUnjoined ? 'Unjoined' : ''), onClick: this.goToDetail.bind(this) }, h("div", { key: 'dc9bd1777858b2a3a57a3f808f734857db9011ee', class: "LeaderboardsItemContainer" }, h("casino-engagement-suite-tournament-item-title", { key: '14cae37fbc9d0f829b85d507ea0e60c95afc7250', tournament: tournament }), h("casino-engagement-suite-tournament-timer", { key: 'd703d03c146592887ea20bdc1289b446399f0870', tournament: tournament })), h("div", { key: '4f2f422965b47c0103ff5dcef8f28dc507491677', class: "LeaderboardLabels" }, this.isNew && (h("div", { key: '3132e3ac8adec5f9ca85d8c14c91801779d8afbf', class: "LeaderboardLabel" }, h("span", { key: 'c148c5fa597b76ff4f23c06b6b3407c06a96bdb7' }, "new"))))));
+    }
+    static get is() { return "casino-engagement-suite-tournament-item"; }
+    static get properties() {
+        return {
+            "tournament": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Tournament",
+                    "resolved": "{ href: string; id: string; nameOrTitle: string; description: string; termsUrl: string; thumbnail: string; thumbnails: []; startTime: Date; endTime: Date; closeTime: Date; exhibitionStartTime: Date; exhibitionEndTime: Date; state: TournamentState; tags: string; minBetCount: number; dataSource: string; scoreCriteria: string; wallets: { code: string; }; prizes: { rank: number; count: number; name: string; }[]; games?: TournamentGame[]; playerEnrolled?: boolean; isPlayerAcknowledged?: boolean; isActionJoinPending?: boolean; isUnjoined?: boolean; }",
+                    "references": {
+                        "Tournament": {
+                            "location": "import",
+                            "path": "../utils/types",
+                            "id": "../../../../packages/stencil/casino-engagement-suite-tournament/src/utils/types.ts::Tournament"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "undefined"
+            },
+            "isNew": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-new",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clickToTournamentDetail",
+                "name": "clickToTournamentDetail",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "Object",
+                    "resolved": "Object",
+                    "references": {
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "joinTournamentEvent",
+                "method": "handleJoinTournamentEvent",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "unjoinTournamentEvent",
+                "method": "handleUnjoinTournamentEvent",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}