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

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

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-0a51ec72.js');
-require('./index-3539ab09.js');
+const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-49cebf14.js');
+require('./index-982cd594.js');
 require('@everymatrix/general-animation-loading/dist');
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3539ab09.js');
+const index = require('./index-982cd594.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"]],{"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_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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/reward.svg

@@ -0,0 +1,11 @@
+<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_2115_306)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.90292 0.666496C4.92339 0.666579 4.9434 0.66666 4.96286 0.66666H11.0369C11.0564 0.66666 11.0764 0.666579 11.0969 0.666496C11.3056 0.665653 11.5627 0.664613 11.7893 0.74707C12.1596 0.881868 12.4514 1.17361 12.5862 1.54397C12.6394 1.69031 12.6578 1.84942 12.664 1.99999L13.6842 1.99999C13.8242 1.99998 13.9607 1.99996 14.0767 2.00788C14.2036 2.01654 14.3541 2.03686 14.5101 2.10149C14.8368 2.23681 15.0964 2.49638 15.2317 2.82308C15.2964 2.97911 15.3167 3.12959 15.3253 3.25651C15.3333 3.37256 15.3332 3.50898 15.3332 3.64901V3.99999C15.3332 4.03102 15.3333 4.06158 15.3333 4.09171C15.3336 4.62197 15.3338 5.01574 15.2424 5.35684C14.9958 6.27709 14.277 6.99588 13.3568 7.24246C13.103 7.31044 12.8202 7.32774 12.4737 7.33203C11.9618 9.05393 10.4829 10.3596 8.66657 10.6194V11.3333H8.96286C10.6402 11.3333 11.9999 12.6931 11.9999 14.3704C11.9999 14.9022 11.5688 15.3333 11.0369 15.3333H4.96286C4.43103 15.3333 3.9999 14.9022 3.9999 14.3704C3.9999 12.6931 5.35963 11.3333 7.03694 11.3333H7.33323V10.6194C5.51693 10.3596 4.03802 9.05393 3.5261 7.33203C3.17962 7.32774 2.89676 7.31044 2.64305 7.24246C1.72281 6.99588 1.00401 6.27709 0.757433 5.35684C0.666035 5.01574 0.666248 4.62197 0.666535 4.09171C0.666552 4.06159 0.666568 4.03102 0.666568 3.99999V3.66666C0.666568 3.66077 0.666568 3.65489 0.666567 3.64901C0.666553 3.50898 0.66654 3.37256 0.674458 3.25651C0.683117 3.12959 0.703433 2.97911 0.768062 2.82308C0.903387 2.49638 1.16295 2.23681 1.48966 2.10149C1.64569 2.03686 1.79617 2.01654 1.92308 2.00788C2.03914 1.99996 2.17556 1.99998 2.31559 1.99999C2.32146 1.99999 2.32735 1.99999 2.33323 1.99999H3.33581C3.34196 1.84942 3.36038 1.69031 3.41364 1.54397C3.54844 1.17361 3.84019 0.881868 4.21054 0.74707C4.43709 0.664613 4.69421 0.665653 4.90292 0.666496ZM3.33323 3.33333H2.33323C2.1688 3.33333 2.07886 3.33369 2.01385 3.33812C2.01082 3.33833 2.00798 3.33854 2.00532 3.33875C2.00511 3.34141 2.0049 3.34425 2.0047 3.34727C2.00026 3.41229 1.9999 3.50222 1.9999 3.66666V3.99999C1.9999 4.6629 2.00563 4.86357 2.04533 5.01175C2.16862 5.47187 2.52802 5.83127 2.98814 5.95456C3.06734 5.97578 3.16152 5.9873 3.33323 5.99342V3.33333ZM4.66657 2.29629C4.66657 2.15025 4.66685 2.07039 4.67037 2.01249C4.67055 2.00958 4.67072 2.00687 4.6709 2.00433C4.67344 2.00415 4.67616 2.00397 4.67907 2.00379C4.73697 2.00028 4.81683 1.99999 4.96286 1.99999H11.0369C11.183 1.99999 11.2628 2.00028 11.3207 2.00379C11.3236 2.00397 11.3264 2.00415 11.3289 2.00433C11.3291 2.00686 11.3293 2.00959 11.3294 2.01249C11.3329 2.07039 11.3332 2.15025 11.3332 2.29629V5.99999C11.3332 7.84094 9.84085 9.33333 7.9999 9.33333C6.15895 9.33333 4.66657 7.84094 4.66657 5.99999V2.29629ZM12.6666 3.33333V5.99342C12.8383 5.9873 12.9325 5.97578 13.0117 5.95456C13.4718 5.83127 13.8312 5.47187 13.9545 5.01175C13.9942 4.86357 13.9999 4.6629 13.9999 3.99999V3.66666C13.9999 3.50222 13.9995 3.41229 13.9951 3.34727C13.9949 3.34425 13.9947 3.34141 13.9945 3.33875C13.9918 3.33854 13.989 3.33833 13.986 3.33812C13.9209 3.33369 13.831 3.33333 13.6666 3.33333H12.6666ZM7.03694 12.6667C6.2232 12.6667 5.54271 13.2372 5.37361 14H10.6262C10.4571 13.2372 9.7766 12.6667 8.96286 12.6667H7.03694Z" fill="#8F8B9C"/>
+</g>
+<defs>
+<clipPath id="clip0_2115_306">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+<script xmlns=""/>
+</svg>

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

@@ -1,10 +1,41 @@
 .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%));
@@ -14,6 +45,10 @@
 .Wrapper.Mobile {
   border-radius: 16px;
 }
+.Wrapper.Mobile .WrapperContent .TableContentWrapper {
+  height: calc(100vh - 278px);
+  overflow-y: auto;
+}
 
 .WrapperContent {
   padding-bottom: 20px;
@@ -22,6 +57,13 @@
 .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;
@@ -34,6 +76,9 @@
   padding: 32px 20px 20px;
   margin-bottom: 20px;
 }
+.WrapperBar .WrapperBarLeft span {
+  position: relative;
+}
 
 .WrapperBarLeft,
 .WrapperBarRight {
@@ -57,7 +102,7 @@
 }
 
 .Row {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
 }
 .Row:first-child {
@@ -89,14 +134,16 @@
   padding-top: 16px;
 }
 
-.Info {
-  margin: 24px 0;
+.ShowInfo {
+  margin: 10px 0;
   padding: 0 20px;
+  transition: 0.5s all ease;
 }
 
 .TimeContainer {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
+  transition: 0.5s all ease;
 }
 .TimeContainer .Time {
   display: flex;
@@ -115,21 +162,10 @@
   border: 0;
 }
 
-.ShowInfo {
-  margin: 24px 0;
-  padding: 0 20px;
-  cursor: pointer;
-  color: rgb(102, 97, 120);
-}
-.ShowInfo p {
-  display: flex;
-  gap: 4px;
-}
-
 .TitleContainer {
   display: flex;
   justify-content: space-between;
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
   margin-top: 0;
   gap: 10px;
@@ -140,7 +176,7 @@
 }
 
 .TabsContainer {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
   margin: 0 20px;
   padding: 0;
@@ -154,6 +190,9 @@
   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);
@@ -188,8 +227,10 @@
 }
 
 .ResultPrize {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
+  padding-left: 30px;
+  text-align: left;
 }
 .ResultPrize span {
   color: var(--emw--color-primary, rgb(255, 214, 47));
@@ -225,7 +266,7 @@
   max-height: calc(100% - 20px);
 }
 
-.PrizesHeader {
+.PrizesHeader, .DetailHeader {
   align-items: center;
   display: flex;
   background-color: var(--emw--color-background, hsl(254, 44%, 15%));
@@ -233,17 +274,23 @@
   z-index: 1;
   margin: 0 20px;
 }
-.PrizesHeader img {
+.PrizesHeader img, .DetailHeader img {
   width: 12px;
 }
-.PrizesHeader .PrizesText {
+.PrizesHeader .PrizesText, .DetailHeader .PrizesText {
   margin-left: 3px;
   font-weight: 600;
 }
 
+.DetailHeader {
+  margin: 0;
+}
+
 .Prizes {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
+  padding-left: 30px;
+  text-align: left;
   flex: 1;
   overflow-y: auto;
   margin-bottom: 0;
@@ -272,6 +319,12 @@
 
 .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;
 }
 
 * {
@@ -285,7 +338,7 @@
 }
 .Leaderboards td {
   opacity: 0.6;
-  padding: 20px 5px;
+  padding: 12px 5px;
 }
 .Leaderboards td:first-child {
   padding-left: 20px;
@@ -299,6 +352,7 @@
 }
 .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;
@@ -307,7 +361,7 @@
   border-radius: 11px;
 }
 .Leaderboards tr.isMe td {
-  color: #FFD029;
+  color: var(--emw--color-primary, rgb(255, 214, 47));
   font-weight: var(--emw--font-weight-semibold, 500);
 }
 
@@ -340,14 +394,14 @@
 }
 
 .LeaderboardUnstarted {
-  margin: 24px 0;
+  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: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
   padding: 0 20px;
   display: flex;

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

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { h, Host } from "@stencil/core";
-import { TRANSLATIONS, Tab } from "../../utils/translations";
-import { getNewItems } from "../../utils/utils";
-import { LeaderboardPage, DialogType } from "../../utils/types";
+import { Tab, TRANSLATIONS } from "../../utils/translations";
+import { getDevicePlatform, getNewItems } from "../../utils/utils";
+import { DialogType, LeaderboardPage } from "../../utils/types";
 import { isTournamentClosed } from "../../utils/bussiness";
 import { renders } from "../../shared/renders";
 import { messageReceiver, messageSender } from "../../utils/message";
@@ -74,15 +74,47 @@ export class CasinoEngagementSuiteTournament {
             this.removeLabel('win');
         }
     }
+    getContainerScrollTop() {
+        return this.page === LeaderboardPage.list ? this.containerScrollTop : this.detailElement.clientHeight / 2 - 250;
+    }
+    handleClickOutside(event) {
+        if (event.composedPath()[0] === this.tooltipIconReference)
+            return;
+        if (event.composedPath()[0] !== this.tooltipReference)
+            this.showTooltip = false;
+    }
     componentDidLoad() {
         this.pageElement.addEventListener('scroll', (event) => {
-            this.containerScrollTop = event.target.scrollTop + window.innerHeight / 2 - 400;
+            this.containerScrollTop = event.target.scrollTop + event.target.clientHeight / 2 - 250;
         });
     }
+    renderTooltip() {
+        if (this.showTooltip) {
+            return (h("div", { class: `question__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.locale.Tip }));
+        }
+        return null;
+    }
     connectedCallback() {
         this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
     }
+    scrollToMyRankLine() {
+        if (!this.detailElement.querySelectorAll('.isMe').length) {
+            return;
+        }
+        (this.detailElement.querySelectorAll('.TableContentWrapper.leaderboard')[0]).scrollTo({ top: this.detailElement.querySelectorAll('.isMe')[0].offsetTop, behavior: 'smooth' });
+        this.scrolledToMyLine = true;
+    }
+    componentDidRender() {
+        if (this.page === LeaderboardPage.item && this.tab === Tab.leaderboard && !this.scrolledToMyLine) {
+            if (this.currentPlyerRank > this.maxPlyerRank) {
+                this.scrollToMyRankLine();
+            }
+        }
+        else {
+            this.scrolledToMyLine = false;
+        }
+    }
     disconnectedCallback() {
         clearInterval(this.timeHolder);
     }
@@ -110,6 +142,17 @@ export class CasinoEngagementSuiteTournament {
         if (page == LeaderboardPage.item) {
             this.tournamentItem = metaData.tournament;
             if (!this.tournamentItem) {
+                messageSender.post({
+                    type: 'GetTournamentGamesById',
+                    pathParams: { id: metaData.tournament.id },
+                    payload: {
+                        expand: 'games',
+                        pagination: 'games(limit=50,offset=0)',
+                        fields: 'games(id,name,thumbnail,launchUrl)',
+                        platform: getDevicePlatform(),
+                        language: this.language
+                    }
+                });
                 messageSender.UpdateTournamentsItemReq(metaData.tournament);
             }
             if (isTournamentClosed(this.tournamentItem)) {
@@ -120,9 +163,9 @@ export class CasinoEngagementSuiteTournament {
         this.page = page;
     }
     render() {
-        return (h(Host, { key: '6ccc0ea805f77b2753cbb06f27953f8d6ae250e1' }, h("general-styling-wrapper", { key: '29be4b2eb25061f496844922c2d250d2d9967297', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
+        return (h(Host, { key: '5a65900ecb503dd01f8f39774b92a6e95048dbf3' }, h("general-styling-wrapper", { key: '58cee35cf4142512e9b49566787b48cbc2761a4a', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
             // @ts-ignore
-            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { key: '2e7ab6c379e74abcc01635051a2621944733cb1c', class: 'Leaderboards', ref: el => this.pageElement = el }, this.renders.page[this.page]())));
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { key: '1848e193e8c61fe6bc9d3e123b7651cb1b97981b', class: `Leaderboards  ${this.page} ${this.page === 'list' ? 'Active' : 'Hidden'}`, ref: el => this.pageElement = el }, this.renders.page.list()), h("div", { key: 'f865edc80013565981b76df146e99ebf1d5d4721', class: `Leaderboards ${this.page} ${this.page === 'item' ? 'Active' : 'Hidden'} `, ref: el => this.detailElement = el }, this.renders.page.item())));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
@@ -137,6 +180,9 @@ export class CasinoEngagementSuiteTournament {
     constructor() {
         this.gifts = [];
         this.labels = [];
+        this.showTooltip = false;
+        this.maxPlyerRank = 30;
+        this.scrolledToMyLine = false;
         this.language = 'en';
         this.show = false;
         this.clientStyling = '';
@@ -368,6 +414,12 @@ export class CasinoEngagementSuiteTournament {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "click",
+                "method": "handleClickOutside",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/shared/icons.js

@@ -1,8 +1,9 @@
 import { h } from "@stencil/core";
+import reward from "../assets/reward.svg";
 export const iconClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/close.svg" });
 export const iconQuestion = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/help.svg" });
 export const iconEyeOpen = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-open.svg" });
 export const iconEyeClose = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/eye-closed.svg" });
 export const iconBack = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/back.svg" });
-export const iconReward = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/reward.svg" });
+export const iconReward = h("img", { src: reward, alt: "reward", class: "Reward" });
 export const iconTrophy = h("img", { src: "https://static.everymatrix.com/gic/img/engagement-suite/cup-congras.svg" });

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

@@ -21,10 +21,10 @@ export const page = {
                 instance.setPage(LeaderboardPage.item, { tournament });
                 instance.newIdList = instance.newIdList.filter((id) => id !== tournament.id);
             };
-            return renderLeaderboardContainer(instance, h("div", { class: "Leaderboards Row" }, instance.tournamentList.map((_tournament) => (h("div", { class: classnames('LeaderboardsItem', _tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', _tournament.isUnjoined ? 'Unjoined' : ''), onClick: () => onClickListItemChangePage(_tournament) }, 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 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")))))))));
         }
         else {
-            return renderLeaderboardContainer(instance, h("div", { class: "NoLeaderboards Row" }, h("div", null, locale.NoLeaderboards), h("div", null, locale.NoLeaderboardsTip)));
+            return renderLeaderboardContainer(instance, h("div", { class: "NoLeaderboards Row" }, h("h3", { class: 'Title' }, locale.NoLeaderboards), h("div", { class: 'message' }, locale.NoLeaderboardsTip)));
         }
     },
     item(instance) {
@@ -50,7 +50,7 @@ export const page = {
         return renderLeaderboardContainer(instance, [
             renderTitleContainer(instance, instance.tournamentItem),
             renderTabs(),
-            instance.renders.tab[instance.tab]()
+            h("div", { class: `TableContentWrapper ${instance.tab}` }, instance.renders.tab[instance.tab]())
         ]);
     }
 };
@@ -101,7 +101,7 @@ const renderLeaderboardContainer = (instance, render) => {
         switch (page) {
             case LeaderboardPage.list:
                 return {
-                    left: h("span", { onClick: () => instance.openDialog(DialogType.tip) }, iconQuestion),
+                    left: h("span", { onClick: () => instance.openDialog(DialogType.tip), onMouseEnter: () => { instance.showTooltip = true; }, onMouseLeave: () => { instance.showTooltip = false; }, ref: (el) => instance.tooltipIconReference = el }, iconQuestion, instance.renderTooltip()),
                     middle: locale.Leaderboards
                 };
             case LeaderboardPage.item:
@@ -119,5 +119,5 @@ const renderLeaderboardContainer = (instance, render) => {
             right: h("span", { onClick: () => instance.close.emit() }, iconClose)
         });
     };
-    return (h("div", { class: `Wrapper ${instance.device}` }, h("div", { class: classnames('WrapperContent', { faded: isOpen }) }, renderCloseBarInLayout(), h("div", { class: "Root" }, h("div", { class: "Main" }, render))), h("div", { class: "WrapperUtil" }, h("dialog", { open: isOpen, style: { 'top': instance.containerScrollTop + 'px' } }, h("div", { class: "GradientRounded Hollow" }, renderBar, isOpen && renderDialogContent())))));
+    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())))));
 };

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

@@ -9,7 +9,7 @@ export const tab = {
     info(instance) {
         var _a, _b;
         const { locale, tournamentItem: tournament, isShowInfo } = instance;
-        return (h("div", { class: "InfoContainer" }, renderTimeBar(tournament), h("section", { class: "ShowInfo", onClick: () => (instance.isShowInfo = !instance.isShowInfo) }, h("p", null, h("span", null, isShowInfo ? iconEyeClose : iconEyeOpen), h("span", null, locale.LeaderboardDetails))), h("div", { class: `ContentScrollContainer ${isShowInfo ? 'expanded' : ''}` }, isShowInfo && (h("section", { class: "Info" }, h("div", null, tournament.description), h("div", { class: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), !!tournament.termsUrl && (h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: "_blank" }, locale.TC))))), isTournamentClosed(instance.tournamentItem) && ((_a = instance.leaderboards) === null || _a === void 0 ? void 0 : _a.find((l) => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, getResultPrize((_b = instance.leaderboards) === null || _b === void 0 ? void 0 : _b.find((l) => l.isMe))) })), h("section", { class: "PrizesContainer" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), h("div", { class: "Prizes" }, tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))))));
+        return (h("div", { class: "InfoContainer" }, renderTimeBar(tournament), h("section", { class: "ShowInfo", onClick: () => (instance.isShowInfo = !instance.isShowInfo) }, 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: "Criterias" }, h("div", null, locale.ScoreCriteria, ": ", h("span", null, tournament.scoreCriteria)), h("div", null, locale.MinimumBetCriteria, ": ", h("span", null, tournament.minBetCount))), !!tournament.termsUrl && (h("div", { class: "TC" }, h("a", { href: tournament.termsUrl, target: "_blank" }, locale.TC))))), isTournamentClosed(instance.tournamentItem) && ((_a = instance.leaderboards) === null || _a === void 0 ? void 0 : _a.find((l) => l.isMe)) && (h("section", { class: "ResultPrize", innerHTML: localePostprocess(locale.TipPrize, getResultPrize((_b = instance.leaderboards) === null || _b === void 0 ? void 0 : _b.find((l) => l.isMe))) })), h("section", { class: "PrizesContainer" }, h("div", { class: "PrizesHeader" }, iconReward, h("span", { class: "PrizesText" }, locale.Prizes)), h("div", { class: "Prizes" }, tournament.prizes.map((prize, index) => (h("div", { class: "Prize" }, index + 1, " ", locale.Place, ": ", h("span", { class: "PrizeText" }, prize.name)))))))));
     },
     leaderboard(instance) {
         const { locale, tournamentItem } = instance;
@@ -26,7 +26,9 @@ export const tab = {
     },
     games(instance) {
         var _a;
-        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: 'Game', onClick: () => { instance.onGameClick(game); } }, h("img", { src: game.defaultThumbnail, alt: "" }))))));
+        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", { class: 'Game', onClick: () => {
+                instance.onGameClick(game);
+            } }, h("img", { src: game.defaultThumbnail, alt: "" }))))));
     }
 };
 const getResultPrize = (leaderboard) => {

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

@@ -4,14 +4,13 @@ import { renderGradientRoundedButton } from "./GradientRoundedButton";
 export const renderTimeBar = (tournament) => {
     return (h("section", { class: "TimeContainer" }, h("div", { class: "Time" }, tournament.state === 'Running'
         ? [
-            h("div", null, getTimeDifference(new Date(), tournament.endTime)),
-            h("div", null, renderGradientRoundedButton({
+            h("div", { class: 'Running' }, h("div", null, getTimeDifference(new Date(), tournament.endTime)), ",", h("div", null, renderGradientRoundedButton({
                 statedClasses: {
                     isHollow: true,
                     isPendding: false
                 },
                 innerHTML: `${getProgress(tournament.startTime, tournament.endTime)}%`
-            }))
+            })))
         ]
-        : [h("div", null, formatDate(tournament.startTime)), h("div", null, formatDate(tournament.endTime))]), h("casino-engagement-suite-progress-bar", { value: Number(getProgress(tournament.startTime, tournament.endTime)), "hide-percent": true })));
+        : [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 })));
 };

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

@@ -25,7 +25,7 @@ export const leaderboardsAdapter = (leaderboardRes) => {
         return leaderboards;
     }
     return leaderboards.map((leaderboard) => {
-        if (item && item.userID === leaderboard.userID) {
+        if ((item === null || item === void 0 ? void 0 : item.userId) && item.userId === leaderboard.userId) {
             return Object.assign(Object.assign({}, leaderboard), { isMe: true });
         }
         else {

package/dist/collection/utils/bussiness.js

@@ -1,4 +1,5 @@
 import { TournamentState } from "./types";
+import dateFnsFormat from "date-fns/format";
 export const getMaxRankStr = (list) => {
     let itemHaveMaxRank;
     list.map((item) => {
@@ -36,3 +37,17 @@ export const getTournamentListByItem = (tournamentList, tournament) => {
         }
     });
 };
+export const getTournamentListParams = (language) => {
+    return {
+        'type': 'InitTournamentList',
+        'messageType': 'apiCall',
+        'method': 'GET',
+        'queryParams': {
+            'filter': `PlayerEnrolled=true,ExhibitionEndTime=${dateFnsFormat(new Date(), 'yyyy-MM-ddThh:mm:ssZ')},TicketStatus=active|closed|completed|released`,
+            'sortField': 'StartTime',
+            'sortOrder': 'asc',
+            'pagination': 'limit=50,offset=0',
+            language
+        }
+    };
+};

package/dist/collection/utils/message.js

@@ -2,6 +2,12 @@ import { leaderboardsAdapter, tournamentAdapter } from "./api.apdater";
 import { getMaxRankStr } from "./bussiness";
 import { DialogType } from "./types";
 export 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;
@@ -15,7 +21,7 @@ export const messageSender = {
     UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
     UpdateLeaderboardsReq: (tournament, query) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id, query }),
     UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' }),
-    GameClickReq: (game) => window.postMessage({ type: 'GameClickedReq', game }),
+    GameClickReq: (game) => window.postMessage({ type: 'EngagementSuiteGameRedirect', data: { Slug: game.slug } }),
 };
 export const messageReceiver = (instance) => {
     const receiver = {
@@ -31,17 +37,13 @@ export const messageReceiver = (instance) => {
             instance.tournamentItem = tournamentNew;
             updateTournamentListByItem(instance, tournamentNew);
         },
-        UpdateLeaderboardsRes: (rest) => {
-            instance.leaderboards = leaderboardsAdapter(rest.data);
-        },
+        UpdateLeaderboardsRes: (rest) => processLeaderboardTableData(instance, rest),
         JoinTournamentRes: (rest) => commonJoinRes(instance, rest),
-        UnjoinTournamentRes: (rest) => {
-            commonJoinRes(instance, rest);
-        },
+        UnjoinTournamentRes: (rest) => commonJoinRes(instance, rest),
         // listen to LeaderboardLiveEvent event, handle update
         LeaderboardLiveEvent: (rest) => {
             handleLeaderboardLiveEvent(instance, rest);
-        }
+        },
     };
     return receiver;
 };
@@ -124,7 +126,7 @@ const showErrorMessage = (instance, type) => {
 };
 const commonJoinRes = (instance, rest) => {
     const { success, data } = rest;
-    let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
+    let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.tournamentId || data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
     current.isActionJoinPending = false;
     if (!success) {
         instance.tournamentList[tournamentIdx] = current;
@@ -140,6 +142,10 @@ const commonJoinRes = (instance, rest) => {
         instance.nextPage = undefined;
     }
 };
+const processLeaderboardTableData = (instance, rest) => {
+    instance.leaderboards = leaderboardsAdapter(rest.data);
+    instance.currentPlyerRank = rest.data.item ? rest.data.item.rank : -1;
+};
 const updateTournamentListByItem = (instance, tournament) => {
     instance.tournamentList = instance.tournamentList.map((_tournament) => {
         if (_tournament.id === tournament.id) {