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

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

@@ -1,16 +1,54 @@
-.Wrapper {
+.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;
-  overflow-y: auto;
 }
 .Wrapper.Mobile {
   border-radius: 16px;
 }
+.Wrapper.Mobile .WrapperContent .TableContentWrapper {
+  height: calc(100vh - 278px);
+  overflow-y: auto;
+}
 
 .WrapperContent {
   padding-bottom: 20px;
@@ -19,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;
@@ -31,6 +76,9 @@
   padding: 32px 20px 20px;
   margin-bottom: 20px;
 }
+.WrapperBar .WrapperBarLeft span {
+  position: relative;
+}
 
 .WrapperBarLeft,
 .WrapperBarRight {
@@ -54,7 +102,7 @@
 }
 
 .Row {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
 }
 .Row:first-child {
@@ -62,11 +110,19 @@
 }
 
 .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;
 }
@@ -78,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;
@@ -104,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;
@@ -129,7 +176,7 @@
 }
 
 .TabsContainer {
-  margin: 24px 0;
+  margin: 10px 0;
   padding: 0 20px;
   margin: 0 20px;
   padding: 0;
@@ -143,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);
@@ -177,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));
@@ -214,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%));
@@ -222,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;
@@ -261,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;
 }
 
 * {
@@ -274,7 +338,7 @@
 }
 .Leaderboards td {
   opacity: 0.6;
-  padding: 20px 5px;
+  padding: 12px 5px;
 }
 .Leaderboards td:first-child {
   padding-left: 20px;
@@ -288,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;
@@ -296,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);
 }
 
@@ -329,33 +394,46 @@
 }
 
 .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;
   flex-wrap: wrap;
-  justify-content: space-evenly;
-  gap: 4px 7.25px;
+  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: 60px;
+  width: 100%;
+  height: fit-content;
 }
 
 dialog {
   position: absolute;
   top: 30px;
   width: 100%;
-  height: 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;
@@ -392,6 +470,10 @@ dialog > div {
   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;
@@ -483,4 +565,25 @@ dialog > div {
 
 .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;
+  }
 }

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,17 +74,57 @@ 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 + event.target.clientHeight / 2 - 250;
+        });
+    }
+    renderTooltip() {
+        if (this.showTooltip) {
+            return (h("div", { class: `question__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.locale.Tip }));
+        }
+        return null;
+    }
     connectedCallback() {
         this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
     }
+    scrollToMyRankLine() {
+        if (!this.detailElement.querySelectorAll('.isMe').length) {
+            return;
+        }
+        (this.detailElement.querySelectorAll('.TableContentWrapper.leaderboard')[0]).scrollTo({ top: this.detailElement.querySelectorAll('.isMe')[0].offsetTop, behavior: 'smooth' });
+        this.scrolledToMyLine = true;
+    }
+    componentDidRender() {
+        if (this.page === LeaderboardPage.item && this.tab === Tab.leaderboard && !this.scrolledToMyLine) {
+            if (this.currentPlyerRank > this.maxPlyerRank) {
+                this.scrollToMyRankLine();
+            }
+        }
+        else {
+            this.scrolledToMyLine = false;
+        }
+    }
     disconnectedCallback() {
         clearInterval(this.timeHolder);
     }
+    onGameClick(game) {
+        messageSender.GameClickReq(game);
+    }
     actionJoin(tournament) {
-        if (this.isActionJoinPending)
+        if (tournament.isActionJoinPending)
             return;
-        this.isActionJoinPending = true;
+        tournament.isActionJoinPending = true;
         try {
             if (tournament.isPlayerAcknowledged) {
                 messageSender.UnjoinTournamentReq(tournament);
@@ -102,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)) {
@@ -112,9 +163,9 @@ export class CasinoEngagementSuiteTournament {
         this.page = page;
     }
     render() {
-        return (h(Host, { key: 'b070d8a83bcd801d5daeb4edfe87ad0159da4e7c' }, h("general-styling-wrapper", { key: '7454fdab7ee55ab95a39adb3c8b51aed0b78f534', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
+        return (h(Host, { key: '5a65900ecb503dd01f8f39774b92a6e95048dbf3' }, h("general-styling-wrapper", { key: '58cee35cf4142512e9b49566787b48cbc2761a4a', clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
             // @ts-ignore
-            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), this.renders.page[this.page]()));
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { key: '1848e193e8c61fe6bc9d3e123b7651cb1b97981b', class: `Leaderboards  ${this.page} ${this.page === 'list' ? 'Active' : 'Hidden'}`, ref: el => this.pageElement = el }, this.renders.page.list()), h("div", { key: 'f865edc80013565981b76df146e99ebf1d5d4721', class: `Leaderboards ${this.page} ${this.page === 'item' ? 'Active' : 'Hidden'} `, ref: el => this.detailElement = el }, this.renders.page.item())));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
@@ -129,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 = '';
@@ -141,7 +195,6 @@ export class CasinoEngagementSuiteTournament {
         this.tournamentItem = undefined;
         this.tournamentList = undefined;
         this.leaderboards = [];
-        this.isActionJoinPending = false;
         this.isDialogOpen = false;
         this.isShowInfo = false;
         this.page = LeaderboardPage.list;
@@ -315,7 +368,6 @@ export class CasinoEngagementSuiteTournament {
             "tournamentItem": {},
             "tournamentList": {},
             "leaderboards": {},
-            "isActionJoinPending": {},
             "isDialogOpen": {},
             "isShowInfo": {},
             "page": {},
@@ -362,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.dialog.js

@@ -8,7 +8,7 @@ var GradientButton;
     GradientButton["unjoinYes"] = "unjoinYes";
     GradientButton["unjoinNo"] = "unjoinNo";
 })(GradientButton || (GradientButton = {}));
-const renderButton = (instance, buttonType) => {
+const renderButton = (instance, buttonType, isActionJoinPending = false) => {
     const { locale } = instance;
     const buttonCollector = {
         normal: {
@@ -27,7 +27,7 @@ const renderButton = (instance, buttonType) => {
     };
     const props = buttonCollector[buttonType];
     return renderGradientRoundedButton({
-        statedClasses: Object.assign({ isPending: instance.isActionJoinPending }, props.statedClasses),
+        statedClasses: Object.assign({ isPending: isActionJoinPending }, props.statedClasses),
         onClick: () => {
             var _a;
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call();

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

@@ -11,7 +11,7 @@ import { messageSender } from "../utils/message";
 export const page = {
     list(instance) {
         var _a;
-        if (!instance.tournamentList) {
+        if (!(instance === null || instance === void 0 ? void 0 : instance.tournamentList)) {
             instance.tournamentList = (_a = instance.leaderboardsInit) === null || _a === void 0 ? void 0 : _a.map((item) => tournamentAdapter(item));
             return h("general-animation-loading", null);
         }
@@ -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' : ''), 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]())
         ]);
     }
 };
@@ -68,11 +68,11 @@ const renderTitleContainer = (instance, 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: instance.isActionJoinPending
+            isPending: tournament.isActionJoinPending
         },
         onClick: (e) => {
             e.stopPropagation();
-            if (!instance.isActionJoinPending) {
+            if (!tournament.isActionJoinPending) {
                 onClickItemJoin(tournament);
             }
         },
@@ -87,9 +87,11 @@ const renderLeaderboardContainer = (instance, render) => {
     const renderDialogContent = () => {
         switch (instance.dialog.type) {
             case DialogType.unjoin:
-                return instance.renders.dialog.unjoin(); //renderDialogContentUnjoin()
+                return instance.renders.dialog.unjoin();
             case DialogType.tip:
                 return h("div", { class: "Tip" }, instance.locale.Tip);
+            case DialogType.error:
+                return h("div", { class: "Tip Error" }, instance.locale.FailedToJoin);
             case DialogType.gift:
                 return instance.renders.dialog.gift();
         }
@@ -99,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:
@@ -117,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 }, 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", null, 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
+        }
+    };
+};