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

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

@@ -1,12 +1,15 @@
-.Wrapper {
+.Leaderboards {
   height: 100%;
+  overflow-y: auto;
+}
+
+.Wrapper {
   position: relative;
   color: var(--emw--color-typography, #FFFFFF);
   display: flex;
   background-color: var(--emw--color-background, hsl(254, 44%, 15%));
   flex-direction: column;
   border-radius: 24px;
-  overflow-y: auto;
 }
 .Wrapper.Mobile {
   border-radius: 16px;
@@ -62,11 +65,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;
 }
@@ -338,24 +349,37 @@
 .Games {
   margin: 24px 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 +416,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 +511,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

@@ -74,6 +74,11 @@ export class CasinoEngagementSuiteTournament {
             this.removeLabel('win');
         }
     }
+    componentDidLoad() {
+        this.pageElement.addEventListener('scroll', (event) => {
+            this.containerScrollTop = event.target.scrollTop + window.innerHeight / 2 - 400;
+        });
+    }
     connectedCallback() {
         this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
@@ -81,10 +86,13 @@ export class CasinoEngagementSuiteTournament {
     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);
@@ -112,9 +120,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: '6ccc0ea805f77b2753cbb06f27953f8d6ae250e1' }, h("general-styling-wrapper", { key: '29be4b2eb25061f496844922c2d250d2d9967297', 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: '2e7ab6c379e74abcc01635051a2621944733cb1c', class: 'Leaderboards', ref: el => this.pageElement = el }, this.renders.page[this.page]())));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
@@ -141,7 +149,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 +322,6 @@ export class CasinoEngagementSuiteTournament {
             "tournamentItem": {},
             "tournamentList": {},
             "leaderboards": {},
-            "isActionJoinPending": {},
             "isDialogOpen": {},
             "isShowInfo": {},
             "page": {},

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,7 +21,7 @@ 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)));
@@ -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();
         }
@@ -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.containerScrollTop + 'px' } }, h("div", { class: "GradientRounded Hollow" }, renderBar, isOpen && renderDialogContent())))));
 };

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

@@ -26,7 +26,7 @@ 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/utils/message.js

@@ -1,13 +1,21 @@
 import { leaderboardsAdapter, tournamentAdapter } from "./api.apdater";
 import { getMaxRankStr } from "./bussiness";
-import { LeaderboardPage } from "./types";
+import { DialogType } from "./types";
 export const messageSender = {
     UpdateSuiteBarState: (labels) => window.postMessage({ type: 'UpdateLeaderboardState', labels }),
-    JoinTournamentReq: (tournament) => { var _a, _b; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code }); },
+    JoinTournamentReq: (tournament) => {
+        var _a, _b;
+        return window.postMessage({
+            type: 'JoinTournamentReq',
+            id: tournament.id,
+            bonusCode: tournament.id || ((_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code)
+        });
+    },
     UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
     UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
     UpdateLeaderboardsReq: (tournament, query) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id, query }),
-    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' })
+    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' }),
+    GameClickReq: (game) => window.postMessage({ type: 'GameClickedReq', game }),
 };
 export const messageReceiver = (instance) => {
     const receiver = {
@@ -27,7 +35,9 @@ export const messageReceiver = (instance) => {
             instance.leaderboards = leaderboardsAdapter(rest.data);
         },
         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);
@@ -109,25 +119,26 @@ const handleLeaderboardLiveEvent = (instance, rest) => {
         }
     }
 };
+const showErrorMessage = (instance, type) => {
+    instance.dialog = Object.assign(Object.assign({}, instance.dialog), { isOpen: true, type });
+};
 const commonJoinRes = (instance, rest) => {
-    const { success } = rest;
-    if (success) {
-        instance.tournamentItem = Object.assign(Object.assign({}, instance.tournamentItem), { isPlayerAcknowledged: !!!instance.tournamentItem.isPlayerAcknowledged });
-        switch (instance.page) {
-            case LeaderboardPage.item: {
-                break;
-            }
-            case LeaderboardPage.list: {
-                updateTournamentListByItem(instance, instance.tournamentItem);
-                break;
-            }
-        }
+    const { success, data } = rest;
+    let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
+    current.isActionJoinPending = false;
+    if (!success) {
+        instance.tournamentList[tournamentIdx] = current;
+        instance.tournamentList = [...instance.tournamentList];
+        showErrorMessage(instance, DialogType.error);
+        return;
     }
+    current = Object.assign(Object.assign({}, current), { isUnjoined: current.isPlayerAcknowledged ? true : false, isPlayerAcknowledged: !!!current.isPlayerAcknowledged });
+    instance.tournamentList[tournamentIdx] = current;
+    instance.tournamentList = [...instance.tournamentList];
     if (instance.nextPage) {
         instance.setPage(instance.nextPage);
         instance.nextPage = undefined;
     }
-    instance.isActionJoinPending = false;
 };
 const updateTournamentListByItem = (instance, tournament) => {
     instance.tournamentList = instance.tournamentList.map((_tournament) => {

package/dist/collection/utils/translations.js

@@ -24,4 +24,4 @@ export const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'J
         Tile: 'Congratulations!',
         Description: 'You won <span>{tournamentName}</span>!',
         ButtonContinue: 'Continue'
-    }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.', TournamentNotStarted: 'The leaderboard is not started yet. <br> It will start in {startTime}.', BeOne: 'No winners for the time being. Be one of them!' });
+    }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.', TournamentNotStarted: 'The leaderboard is not started yet. <br> It will start in {startTime}.', BeOne: 'No winners for the time being. Be one of them!', FailedToJoin: 'Oops! some unexpected error happened, please try it again.', FailedToUnjoin: 'Oops! some unexpected error happened, please try it again.' });

package/dist/collection/utils/types.js

@@ -15,4 +15,5 @@ export var DialogType;
     DialogType["unjoin"] = "unjoin";
     DialogType["tip"] = "tip";
     DialogType["gift"] = "gift";
+    DialogType["error"] = "error";
 })(DialogType || (DialogType = {}));

package/dist/esm/casino-engagement-suite-progress-bar_3.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-e8e1e68e.js';
-export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-e9186545.js';
+import { r as registerInstance, h, g as getElement } from './index-ecf4f553.js';
+export { C as casino_engagement_suite_tournament } from './casino-engagement-suite-tournament-8680a674.js';
 import '@everymatrix/general-animation-loading/dist';
 
 const casinoEngagementSuiteProgressBarCss = ":host{display:block;font-family:inherit}:host(.Desktop) .ProgressBarPercent{font-size:var(--emw--font-size-small, 14px);line-height:14px}@keyframes indeterminate{0%{left:-200%;right:100%}60%{left:110%;right:-10%}to{left:110%;right:-10%}}.ProgressBarBackground{height:8px;background-color:var(--emw--color-gray-300, #666178);border-radius:var(--emw--border-radius-small, 4px);position:relative;overflow:hidden}.ProgressBarLine{position:absolute;left:0;top:0;bottom:0;border-radius:var(--emw--border-radius-small, 4px);background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));transition:width ease-out 0.3s}.ProgressBarLine.Indeterminate{animation:indeterminate 1s linear infinite}.ProgressBarInfo{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.ProgressBarPercent{font-weight:var(--emw--font-weight-bold, 700);font-size:var(--emw--font-size-x-small, 12px);line-height:12px}.HidePercent .ProgressBarPercent{display:none}.ProgressBar:not(.Disabled) .ProgressBarPercent{background:var(--emw--engagement-suite-gradient-button, linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.ProgressBar.Disabled .ProgressBarPercent{color:var(--emw--color-gray-300, #666178)}.ProgressBar.Disabled .ProgressBarLine{background:var(--emw--color-background-secondary, #474668)}";

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

@@ -1,4 +1,4 @@
-import { h, H as Host, r as registerInstance, c as createEvent } from './index-e8e1e68e.js';
+import { h, H as Host, r as registerInstance, c as createEvent } from './index-ecf4f553.js';
 import '@everymatrix/general-animation-loading/dist';
 
 /*! *****************************************************************************
@@ -54,7 +54,7 @@ const TRANSLATIONS = Object.assign(Object.assign(Object.assign({ Join: 'Join', U
         Tile: 'Congratulations!',
         Description: 'You won <span>{tournamentName}</span>!',
         ButtonContinue: 'Continue'
-    }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.', TournamentNotStarted: 'The leaderboard is not started yet. <br> It will start in {startTime}.', BeOne: 'No winners for the time being. Be one of them!' });
+    }, NoLeaderboards: 'No Leaderboards yet', NoLeaderboardsTip: 'Try winning tickets to Leaderboards as rewards or launching other booster games', Leaderboards: 'Leaderboards', TipPrize: 'You took <span>{place}</span> place and win <span>{prize}</span>', Tip: 'Competition where your real money bets contribute towards the leaderboard score calculation to win the leaderboard reward.', TournamentNotStarted: 'The leaderboard is not started yet. <br> It will start in {startTime}.', BeOne: 'No winners for the time being. Be one of them!', FailedToJoin: 'Oops! some unexpected error happened, please try it again.', FailedToUnjoin: 'Oops! some unexpected error happened, please try it again.' });
 
 const classnames = (...args) => {
     let classnameArray = [];
@@ -124,6 +124,7 @@ var DialogType;
     DialogType["unjoin"] = "unjoin";
     DialogType["tip"] = "tip";
     DialogType["gift"] = "gift";
+    DialogType["error"] = "error";
 })(DialogType || (DialogType = {}));
 
 const getMaxRankStr = (list) => {
@@ -178,7 +179,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: {
@@ -197,7 +198,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();
@@ -318,11 +319,19 @@ const renderTimeBar = (tournament) => {
 
 const messageSender = {
     UpdateSuiteBarState: (labels) => window.postMessage({ type: 'UpdateLeaderboardState', labels }),
-    JoinTournamentReq: (tournament) => { var _a, _b; return window.postMessage({ type: 'JoinTournamentReq', bonusCode: (_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code }); },
+    JoinTournamentReq: (tournament) => {
+        var _a, _b;
+        return window.postMessage({
+            type: 'JoinTournamentReq',
+            id: tournament.id,
+            bonusCode: tournament.id || ((_b = (_a = tournament.wallets) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.code)
+        });
+    },
     UnjoinTournamentReq: (tournament) => window.postMessage({ type: 'UnjoinTournamentReq', id: tournament.id }),
     UpdateTournamentsItemReq: (tournament) => window.postMessage({ type: 'UpdateTournamentsItemReq', id: tournament.id }),
     UpdateLeaderboardsReq: (tournament, query) => window.postMessage({ type: 'UpdateLeaderboardsReq', id: tournament.id, query }),
-    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' })
+    UpdateLeaderboardsPlayerReq: () => window.postMessage({ type: 'UpdateLeaderboardsPlayerReq' }),
+    GameClickReq: (game) => window.postMessage({ type: 'GameClickedReq', game }),
 };
 const messageReceiver = (instance) => {
     const receiver = {
@@ -342,7 +351,9 @@ const messageReceiver = (instance) => {
             instance.leaderboards = leaderboardsAdapter(rest.data);
         },
         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);
@@ -424,25 +435,26 @@ const handleLeaderboardLiveEvent = (instance, rest) => {
         }
     }
 };
+const showErrorMessage = (instance, type) => {
+    instance.dialog = Object.assign(Object.assign({}, instance.dialog), { isOpen: true, type });
+};
 const commonJoinRes = (instance, rest) => {
-    const { success } = rest;
-    if (success) {
-        instance.tournamentItem = Object.assign(Object.assign({}, instance.tournamentItem), { isPlayerAcknowledged: !!!instance.tournamentItem.isPlayerAcknowledged });
-        switch (instance.page) {
-            case LeaderboardPage.item: {
-                break;
-            }
-            case LeaderboardPage.list: {
-                updateTournamentListByItem(instance, instance.tournamentItem);
-                break;
-            }
-        }
+    const { success, data } = rest;
+    let tournamentIdx = instance.tournamentList.findIndex((tournament) => tournament.id === (data.id || data.bonusCode)), current = instance.tournamentList[tournamentIdx];
+    current.isActionJoinPending = false;
+    if (!success) {
+        instance.tournamentList[tournamentIdx] = current;
+        instance.tournamentList = [...instance.tournamentList];
+        showErrorMessage(instance, DialogType.error);
+        return;
     }
+    current = Object.assign(Object.assign({}, current), { isUnjoined: current.isPlayerAcknowledged ? true : false, isPlayerAcknowledged: !!!current.isPlayerAcknowledged });
+    instance.tournamentList[tournamentIdx] = current;
+    instance.tournamentList = [...instance.tournamentList];
     if (instance.nextPage) {
         instance.setPage(instance.nextPage);
         instance.nextPage = undefined;
     }
-    instance.isActionJoinPending = false;
 };
 const updateTournamentListByItem = (instance, tournament) => {
     instance.tournamentList = instance.tournamentList.map((_tournament) => {
@@ -470,7 +482,7 @@ const updateOrAddTournamentToList = (instance, tournament) => {
 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);
         }
@@ -480,7 +492,7 @@ const page = {
                 instance.setPage(LeaderboardPage.item, { tournament });
                 instance.newIdList = instance.newIdList.filter((id) => id !== tournament.id);
             };
-            return renderLeaderboardContainer(instance, h("div", { class: "Leaderboards Row" }, instance.tournamentList.map((_tournament) => (h("div", { class: classnames('LeaderboardsItem', _tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : ''), onClick: () => onClickListItemChangePage(_tournament) },
+            return renderLeaderboardContainer(instance, h("div", { class: "Leaderboards Row" }, instance.tournamentList.map((_tournament) => (h("div", { class: classnames('LeaderboardsItem', _tournament.isPlayerAcknowledged ? ' GradientRounded Hollow' : '', _tournament.isUnjoined ? 'Unjoined' : ''), onClick: () => onClickListItemChangePage(_tournament) },
                 h("div", { class: "LeaderboardsItemContainer" },
                     renderTitleContainer(instance, _tournament),
                     renderTimeBar(_tournament)),
@@ -537,11 +549,11 @@ const renderTitleContainer = (instance, tournament) => {
         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);
                 }
             },
@@ -556,9 +568,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();
         }
@@ -592,7 +606,7 @@ const renderLeaderboardContainer = (instance, render) => {
             h("div", { class: "Root" },
                 h("div", { class: "Main" }, render))),
         h("div", { class: "WrapperUtil" },
-            h("dialog", { open: isOpen },
+            h("dialog", { open: isOpen, style: { 'top': instance.containerScrollTop + 'px' } },
                 h("div", { class: "GradientRounded Hollow" },
                     renderBar,
                     isOpen && renderDialogContent())))));
@@ -654,7 +668,7 @@ const tab = {
     },
     games(instance) {
         var _a;
-        return (h("div", { class: "Games" }, (_a = instance.tournamentItem.games) === null || _a === void 0 ? void 0 : _a.map((game) => (h("div", null,
+        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: "" }))))));
     }
 };
@@ -671,7 +685,7 @@ const renders = {
     tab
 };
 
-const casinoEngagementSuiteTournamentCss = ".Wrapper{height:100%;position:relative;color:var(--emw--color-typography, #FFFFFF);display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));flex-direction:column;border-radius:24px;overflow-y:auto}.Wrapper.Mobile{border-radius:16px}.WrapperContent{padding-bottom:20px;transition:0.5s filter}.WrapperContent.faded{filter:brightness(53.3333333333%)}.Wrapper.Mobile .WrapperBar{padding:20px 8px 8px;margin-bottom:8px}.WrapperBar{display:flex;width:100%;padding:32px 20px 20px;margin-bottom:20px}.WrapperBarLeft,.WrapperBarRight{cursor:pointer;z-index:1}.WrapperBarMiddle{flex-grow:1;text-align:center;font-size:var(--emw--font-size-medium, 16px);line-height:16px;font-weight:500;color:var(--emw--color-secondary, rgb(187, 185, 195))}:host{display:block;font-size:var(--emw--font-size-x-small, 12px);font-family:Inter}.Row{margin:24px 0;padding:0 20px}.Row:first-child{margin:0}.LeaderboardsItem{position:relative;margin:10px 0;border:1px solid rgb(64, 57, 86);border-radius:16px}.LeaderboardsItem.Hollow{border-color:transparent}.LeaderboardsItem:first-child{margin-top:0}.LeaderboardsItemContainer{padding-top:16px}.Info{margin:24px 0;padding:0 20px}.TimeContainer{margin:24px 0;padding:0 20px}.TimeContainer .Time{display:flex;justify-content:space-between;font-size:var(--emw--font-size-x-small, 12px);align-items:center;color:var(--emw--color-secondary, rgb(187, 185, 195))}.TimeContainer .Time button{font-size:var(--emw--font-size-x-small, 12px);height:20px;padding:0}.TimeContainer .Time button::before{inset:inherit;border:0}.ShowInfo{margin:24px 0;padding:0 20px;cursor:pointer;color:rgb(102, 97, 120)}.ShowInfo p{display:flex;gap:4px}.TitleContainer{display:flex;justify-content:space-between;margin:24px 0;padding:0 20px;margin-top:0;gap:10px;font-family:Montserrat}.TitleContainer .GradientRoundedButton{width:120px}.TabsContainer{margin:24px 0;padding:0 20px;margin:0 20px;padding:0;border-bottom:1px solid #575757}.Tabs{display:flex;justify-content:space-between;justify-content:start;font-size:var(--emw--font-size-x-small, 12px);margin-bottom:-1px}.Tabs>div{padding:10px;color:rgb(102, 97, 120);cursor:pointer}.Tabs>div.active{color:var(--emw--color-typography, #FFF);border-bottom:2px solid var(--emw--color-typography, #FFF)}.Title{font-size:var(--emw--font-size-medium, 16px);font-weight:700;line-height:19.5px;text-align:left;word-break:break-word}.TC{margin-top:12px}.TC a{color:rgb(89, 209, 255)}.Criterias{margin:12px 0}.Criterias span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.ResultPrize{margin:24px 0;padding:0 20px}.ResultPrize span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.ContentScrollContainer{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;height:auto}.ContentScrollContainer.expanded{height:100%;max-height:100%}.PrizesContainer{flex:1;display:flex;flex-direction:column;min-height:100px;max-height:calc(100% - 20px)}.PrizesHeader{align-items:center;display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));padding:5px 0;z-index:1;margin:0 20px}.PrizesHeader img{width:12px}.PrizesHeader .PrizesText{margin-left:3px;font-weight:600}.Prizes{margin:24px 0;padding:0 20px;flex:1;overflow-y:auto;margin-bottom:0;padding-right:10px;max-height:300px;margin-top:10px}.Prizes::-webkit-scrollbar{width:4px}.Prizes::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.1);border-radius:2px}.Prizes::-webkit-scrollbar-thumb{background:var(--emw--color-primary, rgb(255, 214, 47));border-radius:2px}.Prizes .Prize{margin:8px 0}.Prizes .Prize .PrizeText{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer section.Info{margin-bottom:12px}*{box-sizing:border-box}.Leaderboards{width:100%;text-align:center;border-collapse:collapse}.Leaderboards td{opacity:0.6;padding:20px 5px}.Leaderboards td:first-child{padding-left:20px}.Leaderboards td:last-child{padding-right:20px}.Leaderboards .LeaderboardName{color:var(--emw--color-typography, #FFF);opacity:1}.Leaderboards tr.isMe{background:rgba(0, 0, 0, 0.2)}.Leaderboards tr.isMe .LeaderboardRank span{padding:0px 3px;opacity:1;border:1px solid var(--emw--color-primary, rgb(255, 214, 47));border-radius:11px}.Leaderboards tr.isMe td{color:#FFD029;font-weight:var(--emw--font-weight-semibold, 500)}.LeaderboardLabels{position:absolute;top:-6px;right:18px;display:flex;gap:4px}.LeaderboardLabel{width:30px;height:15px;background:var(--emw--engagement-suite-gradient-golden, linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%));border-radius:var(--emw--border-radius-x-small, 2px);display:inline-flex;padding:0 2px;align-items:center;justify-content:center}.LeaderboardLabel span{display:inline-block;text-transform:uppercase;font-size:var(--emw--font-size-3x-small, 7px);line-height:7px;font-weight:var(--emw--font-weight-bold, 700);font-family:var(--emw--font-family-secondary, \"Montserrat\", sans-serif);color:var(--emw--color-background, #1E1638)}.LeaderboardUnstarted{margin:24px 0;padding:0 20px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-medium, 16px)}.Games{margin:24px 0;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:space-evenly;gap:4px 7.25px}.Games img{width:60px}dialog{position:absolute;top:30px;width:100%;height:100%;background:transparent;border:0;padding:0;color:var(--emw--color-typography, #FFFFFF)}dialog>div{margin:32px;border-radius:8px;background:var(--emw--color-background, hsl(254, 44%, 15%));border:1px solid hsl(254, 20%, 28%);align-items:center}.DialogContentUnjoin{padding:32px;padding-top:10px;display:flex;gap:10px;flex-direction:column}.DialogContentUnjoinTitle{font-family:Montserrat;font-size:var(--emw--font-size-large, 20px);font-weight:600;line-height:24.38px;text-align:center}.DialogContentUnjoinDescription{color:var(--emw--color-secondary, rgb(187, 185, 195));margin-bottom:30px}.Tip{padding:32px;padding-top:10px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-small, 14px)}.PageConfirmContainer{text-align:center;width:80%;margin:0 auto}.PageConfirm{padding:40px 32px;display:flex;flex-direction:column;gap:20px}.PageConfirm .Title{font-size:var(--emw--font-size-large, 20px);text-align:center}.PageConfirm .Description{color:var(--emw--color-secondary, rgb(187, 185, 195));font-weight:400}.PageConfirm .Description span{color:var(--emw--color-typography, #FFF);font-weight:600}.PageConfirmButtonsGroup{width:150px;margin:0 auto;display:flex;flex-direction:column;gap:10px}.GradientRounded{display:block;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:rgb(30, 22, 56);position:relative;border-radius:16px}.GradientRounded.Hollow{background:rgb(30, 22, 56);color:#FFFFFF}.GradientRounded.Hollow::before{content:\"\";position:absolute;inset:0;border-radius:15px;border:1px solid transparent;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}.GradientRoundedButton{border:none;padding:7px;height:32px;width:100%;font-size:var(--emw--font-size-small, 14px);font-weight:700;line-height:17.07px;text-align:center;transition:0.5s opacity;cursor:pointer}.GradientRoundedButton.Pending{cursor:not-allowed;opacity:0.3}.GradientRoundedButton.Hollow span{background:-webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.WrapperUtil .GradientRounded .WrapperBar{margin-bottom:0;padding-bottom:0}.WrapperUtil .GradientRounded .Tip{padding-top:0;padding-bottom:40px}.LeaderboardsItem .LeaderboardsItemContainer .TitleContainer{margin-bottom:16px}";
+const casinoEngagementSuiteTournamentCss = ".Leaderboards{height:100%;overflow-y:auto}.Wrapper{position:relative;color:var(--emw--color-typography, #FFFFFF);display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));flex-direction:column;border-radius:24px}.Wrapper.Mobile{border-radius:16px}.WrapperContent{padding-bottom:20px;transition:0.5s filter}.WrapperContent.faded{filter:brightness(53.3333333333%)}.Wrapper.Mobile .WrapperBar{padding:20px 8px 8px;margin-bottom:8px}.WrapperBar{display:flex;width:100%;padding:32px 20px 20px;margin-bottom:20px}.WrapperBarLeft,.WrapperBarRight{cursor:pointer;z-index:1}.WrapperBarMiddle{flex-grow:1;text-align:center;font-size:var(--emw--font-size-medium, 16px);line-height:16px;font-weight:500;color:var(--emw--color-secondary, rgb(187, 185, 195))}:host{display:block;font-size:var(--emw--font-size-x-small, 12px);font-family:Inter}.Row{margin:24px 0;padding:0 20px}.Row:first-child{margin:0}.LeaderboardsItem{opacity:1;transition:1s opacity ease;position:relative;margin:10px 0;border:1px solid rgb(64, 57, 86);border-radius:16px}.LeaderboardsItem.Unjoined{opacity:0;margin:0;border:0 none;animation:slideOut 1s forwards}.LeaderboardsItem.Hollow{border-color:transparent}.LeaderboardsItem:first-child{margin-top:0}.LeaderboardsItemContainer{padding-top:16px}.Info{margin:24px 0;padding:0 20px}.TimeContainer{margin:24px 0;padding:0 20px}.TimeContainer .Time{display:flex;justify-content:space-between;font-size:var(--emw--font-size-x-small, 12px);align-items:center;color:var(--emw--color-secondary, rgb(187, 185, 195))}.TimeContainer .Time button{font-size:var(--emw--font-size-x-small, 12px);height:20px;padding:0}.TimeContainer .Time button::before{inset:inherit;border:0}.ShowInfo{margin:24px 0;padding:0 20px;cursor:pointer;color:rgb(102, 97, 120)}.ShowInfo p{display:flex;gap:4px}.TitleContainer{display:flex;justify-content:space-between;margin:24px 0;padding:0 20px;margin-top:0;gap:10px;font-family:Montserrat}.TitleContainer .GradientRoundedButton{width:120px}.TabsContainer{margin:24px 0;padding:0 20px;margin:0 20px;padding:0;border-bottom:1px solid #575757}.Tabs{display:flex;justify-content:space-between;justify-content:start;font-size:var(--emw--font-size-x-small, 12px);margin-bottom:-1px}.Tabs>div{padding:10px;color:rgb(102, 97, 120);cursor:pointer}.Tabs>div.active{color:var(--emw--color-typography, #FFF);border-bottom:2px solid var(--emw--color-typography, #FFF)}.Title{font-size:var(--emw--font-size-medium, 16px);font-weight:700;line-height:19.5px;text-align:left;word-break:break-word}.TC{margin-top:12px}.TC a{color:rgb(89, 209, 255)}.Criterias{margin:12px 0}.Criterias span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.ResultPrize{margin:24px 0;padding:0 20px}.ResultPrize span{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.ContentScrollContainer{flex:1;display:flex;flex-direction:column;overflow-y:auto;position:relative;height:auto}.ContentScrollContainer.expanded{height:100%;max-height:100%}.PrizesContainer{flex:1;display:flex;flex-direction:column;min-height:100px;max-height:calc(100% - 20px)}.PrizesHeader{align-items:center;display:flex;background-color:var(--emw--color-background, hsl(254, 44%, 15%));padding:5px 0;z-index:1;margin:0 20px}.PrizesHeader img{width:12px}.PrizesHeader .PrizesText{margin-left:3px;font-weight:600}.Prizes{margin:24px 0;padding:0 20px;flex:1;overflow-y:auto;margin-bottom:0;padding-right:10px;max-height:300px;margin-top:10px}.Prizes::-webkit-scrollbar{width:4px}.Prizes::-webkit-scrollbar-track{background:rgba(0, 0, 0, 0.1);border-radius:2px}.Prizes::-webkit-scrollbar-thumb{background:var(--emw--color-primary, rgb(255, 214, 47));border-radius:2px}.Prizes .Prize{margin:8px 0}.Prizes .Prize .PrizeText{color:var(--emw--color-primary, rgb(255, 214, 47));font-weight:400}.InfoContainer section.Info{margin-bottom:12px}*{box-sizing:border-box}.Leaderboards{width:100%;text-align:center;border-collapse:collapse}.Leaderboards td{opacity:0.6;padding:20px 5px}.Leaderboards td:first-child{padding-left:20px}.Leaderboards td:last-child{padding-right:20px}.Leaderboards .LeaderboardName{color:var(--emw--color-typography, #FFF);opacity:1}.Leaderboards tr.isMe{background:rgba(0, 0, 0, 0.2)}.Leaderboards tr.isMe .LeaderboardRank span{padding:0px 3px;opacity:1;border:1px solid var(--emw--color-primary, rgb(255, 214, 47));border-radius:11px}.Leaderboards tr.isMe td{color:#FFD029;font-weight:var(--emw--font-weight-semibold, 500)}.LeaderboardLabels{position:absolute;top:-6px;right:18px;display:flex;gap:4px}.LeaderboardLabel{width:30px;height:15px;background:var(--emw--engagement-suite-gradient-golden, linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%));border-radius:var(--emw--border-radius-x-small, 2px);display:inline-flex;padding:0 2px;align-items:center;justify-content:center}.LeaderboardLabel span{display:inline-block;text-transform:uppercase;font-size:var(--emw--font-size-3x-small, 7px);line-height:7px;font-weight:var(--emw--font-weight-bold, 700);font-family:var(--emw--font-family-secondary, \"Montserrat\", sans-serif);color:var(--emw--color-background, #1E1638)}.LeaderboardUnstarted{margin:24px 0;padding:0 20px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-medium, 16px)}.Games{margin:24px 0;padding:0 20px;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:start;margin:20px auto}.Games .Game{cursor:pointer;width:25%;display:flex;padding:5px}.Games .Game:hover{filter:brightness(var(--emw--hover-brightness, 1.25))}.Games img{width:100%;height:fit-content}dialog{position:absolute;top:30px;width:100%;height:max-content;background:transparent;border:0;padding:0;color:var(--emw--color-typography, #FFFFFF);transition:all 0.2s;transition-timing-function:ease-in-out}dialog>div{margin:32px;border-radius:8px;background:var(--emw--color-background, hsl(254, 44%, 15%));border:1px solid hsl(254, 20%, 28%);align-items:center}.DialogContentUnjoin{padding:32px;padding-top:10px;display:flex;gap:10px;flex-direction:column}.DialogContentUnjoinTitle{font-family:Montserrat;font-size:var(--emw--font-size-large, 20px);font-weight:600;line-height:24.38px;text-align:center}.DialogContentUnjoinDescription{color:var(--emw--color-secondary, rgb(187, 185, 195));margin-bottom:30px}.Tip{padding:32px;padding-top:10px;color:var(--emw--color-secondary, rgb(187, 185, 195));font-size:var(--emw--font-size-small, 14px)}.Tip.Error{color:var(--emw--color-error, var(--emw--color-red, #ed0909));font-weight:var(--emw--font-weight-normal, 500)}.PageConfirmContainer{text-align:center;width:80%;margin:0 auto}.PageConfirm{padding:40px 32px;display:flex;flex-direction:column;gap:20px}.PageConfirm .Title{font-size:var(--emw--font-size-large, 20px);text-align:center}.PageConfirm .Description{color:var(--emw--color-secondary, rgb(187, 185, 195));font-weight:400}.PageConfirm .Description span{color:var(--emw--color-typography, #FFF);font-weight:600}.PageConfirmButtonsGroup{width:150px;margin:0 auto;display:flex;flex-direction:column;gap:10px}.GradientRounded{display:block;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);color:rgb(30, 22, 56);position:relative;border-radius:16px}.GradientRounded.Hollow{background:rgb(30, 22, 56);color:#FFFFFF}.GradientRounded.Hollow::before{content:\"\";position:absolute;inset:0;border-radius:15px;border:1px solid transparent;background:linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:exclude}.GradientRoundedButton{border:none;padding:7px;height:32px;width:100%;font-size:var(--emw--font-size-small, 14px);font-weight:700;line-height:17.07px;text-align:center;transition:0.5s opacity;cursor:pointer}.GradientRoundedButton.Pending{cursor:not-allowed;opacity:0.3}.GradientRoundedButton.Hollow span{background:-webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.WrapperUtil .GradientRounded .WrapperBar{margin-bottom:0;padding-bottom:0}.WrapperUtil .GradientRounded .Tip{padding-top:0;padding-bottom:40px}.LeaderboardsItem .LeaderboardsItemContainer .TitleContainer{margin-bottom:16px}@keyframes slideOut{0%{display:block;opacity:1;height:max-content}50%{display:block;opacity:0.5}80%{display:none;opacity:0}100%{display:none;opacity:0;height:0}}";
 const CasinoEngagementSuiteTournamentStyle0 = casinoEngagementSuiteTournamentCss;
 
 const CasinoEngagementSuiteTournament = class {
@@ -739,6 +753,11 @@ const CasinoEngagementSuiteTournament = class {
             this.removeLabel('win');
         }
     }
+    componentDidLoad() {
+        this.pageElement.addEventListener('scroll', (event) => {
+            this.containerScrollTop = event.target.scrollTop + window.innerHeight / 2 - 400;
+        });
+    }
     connectedCallback() {
         this.setTimeInterval();
         messageSender.UpdateLeaderboardsPlayerReq();
@@ -746,10 +765,13 @@ const CasinoEngagementSuiteTournament = class {
     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);
@@ -777,9 +799,9 @@ const CasinoEngagementSuiteTournament = class {
         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: '6ccc0ea805f77b2753cbb06f27953f8d6ae250e1' }, h("general-styling-wrapper", { key: '29be4b2eb25061f496844922c2d250d2d9967297', 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: '2e7ab6c379e74abcc01635051a2621944733cb1c', class: 'Leaderboards', ref: el => this.pageElement = el }, this.renders.page[this.page]())));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
@@ -808,7 +830,6 @@ const CasinoEngagementSuiteTournament = class {
         this.tournamentItem = undefined;
         this.tournamentList = undefined;
         this.leaderboards = [];
-        this.isActionJoinPending = false;
         this.isDialogOpen = false;
         this.isShowInfo = false;
         this.page = LeaderboardPage.list;

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-e8e1e68e.js';
-export { s as setNonce } from './index-e8e1e68e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-ecf4f553.js';
+export { s as setNonce } from './index-ecf4f553.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["casino-engagement-suite-progress-bar_3",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
+  return bootstrapLazy([["casino-engagement-suite-progress-bar_3",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"]],{"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);
 });