@everymatrix/casino-engagement-suite-tournament 1.63.3 → 1.64.0

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_6.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"newIdList":[32]},[[8,"message","handleEvent"],[16,"clickToTournamentDetail","handleClickToTournamentDetail"],[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentConfirmEvent","handleUnjoinTournamentEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[0,"tournament-item",{"tournament":[16],"isNew":[4,"is-new"],"locale":[32]},[[16,"pendingChangeEvent","onTournamentUpdateEvent"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"tournament-timer",{"tournament":[16],"isDetail":[4,"is-detail"],"timeHolder":[32],"timeClock":[32],"lastTimeDiff":[32],"lastProgress":[32]},[[16,"tournamentTimer","containerPageChangeHandler"]]],[0,"tournament-item-title",{"tournament":[16],"locale":[32],"isButtonDisabed":[32]},null,{"tournament":["onTournamentChanged"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_6.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"orientation":[1],"leaderboardsInit":[16],"tipsHideDelay":[514,"tips-hide-delay"],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"newIdList":[32]},[[8,"message","handleEvent"],[16,"clickToTournamentDetail","handleClickToTournamentDetail"],[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentConfirmEvent","handleUnjoinTournamentEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[0,"tournament-item",{"tournament":[16],"isNew":[4,"is-new"],"tid":[1],"locale":[32]},[[16,"pendingChangeEvent","onTournamentUpdateEvent"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"tournament-timer",{"tournament":[16],"isDetail":[4,"is-detail"],"timeHolder":[32],"timeClock":[32],"lastTimeDiff":[32],"lastProgress":[32]},[[16,"tournamentTimer","containerPageChangeHandler"]]],[0,"tournament-item-title",{"tournament":[16],"locale":[32],"isButtonDisabed":[32]},null,{"tournament":["onTournamentChanged"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-785dd5cc.js');
+const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-95aedc10.js');
 require('./index-5e98dd13.js');
 
 

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ 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_6.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"newIdList":[32]},[[8,"message","handleEvent"],[16,"clickToTournamentDetail","handleClickToTournamentDetail"],[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentConfirmEvent","handleUnjoinTournamentEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[0,"tournament-item",{"tournament":[16],"isNew":[4,"is-new"],"locale":[32]},[[16,"pendingChangeEvent","onTournamentUpdateEvent"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"tournament-timer",{"tournament":[16],"isDetail":[4,"is-detail"],"timeHolder":[32],"timeClock":[32],"lastTimeDiff":[32],"lastProgress":[32]},[[16,"tournamentTimer","containerPageChangeHandler"]]],[0,"tournament-item-title",{"tournament":[16],"locale":[32],"isButtonDisabed":[32]},null,{"tournament":["onTournamentChanged"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_6.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"orientation":[1],"leaderboardsInit":[16],"tipsHideDelay":[514,"tips-hide-delay"],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"newIdList":[32]},[[8,"message","handleEvent"],[16,"clickToTournamentDetail","handleClickToTournamentDetail"],[16,"joinTournamentEvent","handleJoinTournamentEvent"],[16,"unjoinTournamentConfirmEvent","handleUnjoinTournamentEvent"],[4,"click","handleClickOutside"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[0,"tournament-item",{"tournament":[16],"isNew":[4,"is-new"],"tid":[1],"locale":[32]},[[16,"pendingChangeEvent","onTournamentUpdateEvent"]]],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}],[0,"tournament-timer",{"tournament":[16],"isDetail":[4,"is-detail"],"timeHolder":[32],"timeClock":[32],"lastTimeDiff":[32],"lastProgress":[32]},[[16,"tournamentTimer","containerPageChangeHandler"]]],[0,"tournament-item-title",{"tournament":[16],"locale":[32],"isButtonDisabed":[32]},null,{"tournament":["onTournamentChanged"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/back.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><script xmlns=""/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4713 3.52859C10.7317 3.78894 10.7317 4.21105 10.4713 4.4714L6.94273 8L10.4713 11.5286C10.7317 11.7889 10.7317 12.2111 10.4713 12.4714C10.211 12.7317 9.78886 12.7317 9.52851 12.4714L5.52851 8.4714C5.26816 8.21105 5.26816 7.78894 5.52851 7.52859L9.52851 3.52859C9.78886 3.26824 10.211 3.26824 10.4713 3.52859Z" fill="#666178"/>
+</svg>

package/dist/collection/assets/iconTrophy.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="44" viewBox="0 0 45 44" fill="none"><script xmlns=""/>
+  <rect x="0.5" width="44" height="44" rx="22" fill="url(#paint0_linear_1604_5589)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.8744 19.7227C19.8744 18.275 21.0522 17.0972 22.4999 17.0972C23.9477 17.0972 25.1255 18.275 25.1255 19.7227C25.1255 21.1705 23.9477 22.3483 22.4999 22.3483C21.0522 22.3483 19.8744 21.1705 19.8744 19.7227ZM22.4999 21.4781C22.847 21.4781 23.1287 21.1965 23.1287 20.8494V18.5961C23.1287 18.249 22.847 17.9673 22.4999 17.9673C22.1529 17.9673 21.8712 18.249 21.8712 18.5961V20.8494C21.8712 21.1965 22.1529 21.4781 22.4999 21.4781Z" fill="#1E1638"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M31.8714 15.4721C32.0533 15.4721 32.2264 15.5509 32.3459 15.6879C32.4649 15.8254 32.5194 16.0077 32.4938 16.188L31.9032 20.4105C31.7188 21.727 30.5775 22.72 29.2479 22.72H27.3026C26.6018 23.8224 25.5263 24.672 24.2407 25.0798V26.339C24.2407 26.6558 24.4994 26.9052 24.8162 26.9069C25.7547 26.9111 26.5113 27.6698 26.5113 28.6095V29.4742H18.4887V28.6095C18.4887 27.6698 19.2453 26.9111 20.1838 26.9069C20.5007 26.9052 20.7593 26.6558 20.7593 26.339V25.0798C19.4737 24.672 18.3982 23.8224 17.6974 22.72H15.7521C14.4225 22.72 13.2812 21.727 13.0968 20.4105L12.5062 16.188C12.4806 16.0077 12.5351 15.8254 12.6541 15.6879C12.7736 15.5509 12.9467 15.4721 13.1286 15.4721H16.3138L16.1947 14.4024C16.1712 14.1878 16.3389 14 16.5552 14H28.4448C28.6611 14 28.8288 14.1878 28.8053 14.4024L28.6862 15.4721H31.8714ZM14.3425 20.2361C14.4402 20.9353 15.0462 21.4626 15.7521 21.4626H17.1013C16.9815 21.1004 16.8981 20.7228 16.854 20.3346L16.4533 16.7295H13.8517L14.3425 20.2361ZM18.617 19.7227C18.617 21.8637 20.359 23.6057 22.5 23.6057C24.641 23.6057 26.383 21.8637 26.383 19.7227C26.383 17.5816 24.641 15.8397 22.5 15.8397C20.359 15.8397 18.617 17.5816 18.617 19.7227ZM29.2479 21.4626C29.9538 21.4626 30.5599 20.9353 30.6575 20.2361L31.1483 16.7295H28.5467L28.146 20.3346C28.102 20.7228 28.0185 21.1004 27.8987 21.4626H29.2479Z" fill="#1E1638"/>
+  <defs>
+    <linearGradient id="paint0_linear_1604_5589" x1="3.34706" y1="2.0625" x2="65.3447" y2="11.048" gradientUnits="userSpaceOnUse">
+    <stop offset="0.129184" stop-color="#FF9400"/>
+    <stop offset="0.993007" stop-color="#FEF746"/>
+    <stop offset="1" stop-color="#FFE24A"/>
+    </linearGradient>
+  </defs>
+<script xmlns=""/></svg>

package/dist/collection/assets/iconWarn.svg

@@ -0,0 +1,15 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 37678">
+<rect width="44" height="44" rx="22" fill="url(#paint0_linear_1701_12604)"/>
+<g id="icon">
+<path id="Icon" d="M21.9998 19.0002V23.0002M21.9998 27.0002H22.0098M20.6151 13.892L12.3902 28.0986C11.934 28.8866 11.7059 29.2806 11.7396 29.6039C11.769 29.886 11.9168 30.1423 12.1461 30.309C12.4091 30.5002 12.8643 30.5002 13.7749 30.5002H30.2246C31.1352 30.5002 31.5904 30.5002 31.8534 30.309C32.0827 30.1423 32.2305 29.886 32.2599 29.6039C32.2936 29.2806 32.0655 28.8866 31.6093 28.0986L23.3844 13.892C22.9299 13.1068 22.7026 12.7142 22.4061 12.5824C22.1474 12.4673 21.8521 12.4673 21.5935 12.5824C21.2969 12.7142 21.0696 13.1068 20.6151 13.892Z" stroke="#251D3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1701_12604" x1="2.84706" y1="2.0625" x2="64.8447" y2="11.048" gradientUnits="userSpaceOnUse">
+<stop offset="0.129184" stop-color="#FF9400"/>
+<stop offset="0.993007" stop-color="#FEF746"/>
+<stop offset="1" stop-color="#FFE24A"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -5,6 +5,7 @@
   transition-property: all, transform;
 }
 .Leaderboards.list, .Leaderboards.item {
+  margin-top: 5px;
   opacity: 0;
 }
 .Leaderboards.list.Active, .Leaderboards.item.Active {
@@ -33,13 +34,21 @@
   opacity: 0.8;
 }
 
-table.leaderboards {
+table.Leaderboards {
   height: auto;
 }
+table.Leaderboards td.LeaderboardName {
+  max-width: 180px;
+}
+table.Leaderboards td.LeaderboardPrize {
+  min-width: 220px;
+  text-align: left;
+}
 
 .Wrapper {
   position: relative;
   min-height: 100%;
+  line-height: 20px;
   color: var(--emw--color-typography, #FFFFFF);
   display: flex;
   background-color: var(--emw--color-background, hsl(254, 44%, 15%));
@@ -51,15 +60,36 @@ table.leaderboards {
   scrollbar-color: var(--emw--color-background, hsl(254, 8.53%, 54.93%)) transparent;
 }
 .Wrapper .WrapperContent .TableContentWrapper {
-  height: calc(100vh - 278px);
+  height: calc(100vh - 298px);
   overflow-y: auto;
 }
 .Wrapper .WrapperContent .Main {
   height: calc(100vh - 188px);
 }
+.Wrapper .WrapperContent .Main .Leaderboards.ScrollBar.Row {
+  display: flex;
+  flex-direction: column;
+}
+.Wrapper .WrapperContent .Main .Leaderboards.ScrollBar.Row tournament-item {
+  transition: 2s ease-in-out;
+  transform: translate(0) scale(1, 1);
+  opacity: 0.99;
+}
 .Wrapper.Mobile {
   border-radius: 16px;
 }
+.Wrapper.Mobile .PageConfirmContainer, .Wrapper.Mobile .DialogContentUnjoin {
+  min-width: 80%;
+}
+.Wrapper.Mobile dialog.tip {
+  padding: 120px 10px;
+}
+.Wrapper.Mobile dialog.unjoin .Hollow {
+  margin: 5px;
+}
+.Wrapper.Mobile .GradientRoundedButton {
+  font-size: var(--emw--font-size-medium, 14px);
+}
 
 .WrapperContent {
   padding-bottom: 20px;
@@ -81,12 +111,17 @@ table.leaderboards {
   padding: 20px 8px 8px;
   margin-bottom: 8px;
 }
+.Wrapper.Mobile .Tip {
+  padding: 0px 30px 32px;
+}
+.Wrapper.Mobile .TitleContainer .GradientRoundedButton {
+  width: 100px;
+}
 
 .WrapperBar {
   display: flex;
   width: 100%;
-  padding: 32px 20px 20px;
-  margin-bottom: 20px;
+  padding: 20px 20px;
 }
 .WrapperBar .WrapperBarLeft span {
   position: relative;
@@ -97,6 +132,11 @@ table.leaderboards {
   cursor: pointer;
   z-index: 1;
 }
+.WrapperBarLeft span.EngagementSuiteIcon img,
+.WrapperBarRight span.EngagementSuiteIcon img {
+  width: 24px;
+  height: 24px;
+}
 
 .WrapperBarMiddle {
   flex-grow: 1;
@@ -109,8 +149,7 @@ table.leaderboards {
 
 :host {
   display: block;
-  font-size: var(--emw--font-size-x-small, 12px);
-  font-family: Inter;
+  font-size: var(--emw--font-size-x-small, 14px);
 }
 
 .ScrollBar {
@@ -131,9 +170,10 @@ table.leaderboards {
   opacity: 1;
   transition: 1s opacity ease;
   position: relative;
-  margin: 10px 0;
+  margin: 20px 0;
   border: 1px solid rgb(64, 57, 86);
-  border-radius: 16px;
+  border-radius: 6px;
+  padding: 12px 0;
 }
 .LeaderboardsItem.Unjoined {
   opacity: 0;
@@ -166,7 +206,7 @@ table.leaderboards {
 .TimeContainer .Time {
   display: flex;
   justify-content: space-between;
-  font-size: var(--emw--font-size-x-small, 12px);
+  font-size: var(--emw--font-size-x-small, 14px);
   align-items: center;
   color: var(--emw--color-secondary, rgb(187, 185, 195));
 }
@@ -177,7 +217,7 @@ table.leaderboards {
   justify-content: space-between;
 }
 .TimeContainer .Time button {
-  font-size: var(--emw--font-size-x-small, 12px);
+  font-size: var(--emw--font-size-x-small, 14px);
   height: 20px;
   padding: 0;
 }
@@ -211,7 +251,7 @@ table.leaderboards {
   display: flex;
   justify-content: space-between;
   justify-content: start;
-  font-size: var(--emw--font-size-x-small, 12px);
+  font-size: var(--emw--font-size-x-small, 14px);
   margin-bottom: -1px;
 }
 .Tabs .Tab {
@@ -228,7 +268,7 @@ table.leaderboards {
 }
 
 .Title {
-  font-size: var(--emw--font-size-medium, 16px);
+  font-size: var(--emw--font-size-large, 20px);
   font-weight: 700;
   line-height: 19.5px;
   text-align: left;
@@ -236,14 +276,14 @@ table.leaderboards {
 }
 
 .TC {
-  margin-top: 12px;
+  margin-top: 14px;
 }
 .TC a {
   color: rgb(89, 209, 255);
 }
 
 .Criterias {
-  margin: 12px 0;
+  margin: 14px 0;
 }
 .Criterias span {
   color: var(--emw--color-primary, rgb(255, 214, 47));
@@ -299,7 +339,7 @@ table.leaderboards {
   margin: 0 20px;
 }
 .PrizesHeader img, .DetailHeader img {
-  width: 12px;
+  width: 14px;
 }
 .PrizesHeader .PrizesText, .DetailHeader .PrizesText {
   margin-left: 3px;
@@ -336,6 +376,9 @@ table.leaderboards {
 .Prizes .Prize {
   margin: 8px 0;
 }
+.Prizes .Prize .Rank {
+  margin-right: 5px;
+}
 .Prizes .Prize .PrizeText {
   color: var(--emw--color-primary, rgb(255, 214, 47));
   font-weight: 400;
@@ -455,14 +498,28 @@ table.leaderboards {
   height: fit-content;
 }
 
-dialog {
+dialog.tip {
   position: absolute;
-  top: calc(50vh - 280px);
+  align-items: start;
+  padding: 120px 90px;
+  line-height: 20px;
+  font-size: var(--emw--font-size-small, 16px);
+}
+dialog.tip > div {
+  margin: 0px;
+}
+
+dialog {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
   width: 100%;
-  height: max-content;
-  background: transparent;
-  border: 0;
-  padding: 0;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
   color: var(--emw--color-typography, #FFFFFF);
   transition: all 0.2s;
   transition-timing-function: ease-in-out;
@@ -474,12 +531,28 @@ dialog > div {
   border: 1px solid hsl(254, 20%, 28%);
   align-items: center;
 }
+dialog div.Hollow .WrapperBar {
+  padding: 12px;
+}
+dialog div.Hollow .WrapperBar .WrapperBarRight img {
+  width: 20px;
+}
+dialog div.Hollow .Tip {
+  line-height: 20px;
+  padding: 0px 60px 32px;
+  font-size: var(--emw--font-size-small, 16px);
+}
+
+dialog[open] {
+  display: flex;
+}
 
 .DialogContentUnjoin {
   padding: 32px;
   padding-top: 10px;
   display: flex;
   gap: 10px;
+  max-width: 510px;
   flex-direction: column;
 }
 
@@ -498,7 +571,7 @@ dialog > div {
 
 .Tip {
   padding: 32px;
-  padding-top: 10px;
+  padding-top: 0px;
   color: var(--emw--color-secondary, rgb(187, 185, 195));
   font-size: var(--emw--font-size-small, 14px);
 }
@@ -510,17 +583,19 @@ dialog > div {
 .PageConfirmContainer {
   text-align: center;
   width: 80%;
+  min-width: 450px;
+  max-width: 510px;
   margin: 0 auto;
 }
 
 .PageConfirm {
-  padding: 40px 32px;
+  padding: 0px 32px 60px;
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 .PageConfirm .Title {
-  font-size: var(--emw--font-size-large, 20px);
+  font-size: var(--emw--font-size-large, 26px);
   text-align: center;
 }
 .PageConfirm .Description {
@@ -532,9 +607,27 @@ dialog > div {
   font-weight: 600;
 }
 
+.PageConfirm.Gift {
+  padding: 22px 32px 60px;
+}
+.PageConfirm.Gift .Title {
+  font-size: var(--emw--font-size-large, 30px);
+}
+.PageConfirm.Gift .Description {
+  font-size: var(--emw--font-size-medium, 20px);
+}
+.PageConfirm.Gift .PageConfirmButtonsGroup .GradientRoundedButton {
+  font-size: var(--emw--font-size-medium, 20px);
+  padding: 12px;
+  height: auto;
+}
+.PageConfirm.Gift .PageConfirmButtonsGroup .GradientRoundedButton.GradientRounded {
+  border-radius: 20px;
+}
+
 .PageConfirmButtonsGroup {
   width: 150px;
-  margin: 0 auto;
+  margin: 20px auto;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -569,7 +662,7 @@ dialog > div {
   padding: 7px;
   height: 32px;
   width: 100%;
-  font-size: var(--emw--font-size-small, 14px);
+  font-size: var(--emw--font-size-medium, 16px);
   font-weight: 700;
   line-height: 17.07px;
   text-align: center;
@@ -586,6 +679,10 @@ dialog > div {
   -webkit-text-fill-color: transparent;
 }
 
+.LeaderboardsItem.GradientRounded.Hollow::before {
+  border-radius: 7px;
+}
+
 .WrapperUtil .GradientRounded .WrapperBar {
   margin-bottom: 0;
   padding-bottom: 0;

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

@@ -3,7 +3,7 @@ import { h, Host } from "@stencil/core";
 import { Tab, TRANSLATIONS } from "../../utils/translations";
 import { classnames, getNewItems } from "../../utils/utils";
 import { DialogType, LeaderboardPage } from "../../utils/types";
-import { isTournamentClosed } from "../../utils/bussiness";
+import { DEFAULT_PAGE_SIZE, isTournamentEnded } from "../../utils/bussiness";
 import { renders } from "../../shared/renders";
 import { messageReceiver, messageSender } from "../../utils/message";
 import "../../../../../../svelte/general-animation-loading/es2015/general-animation-loading";
@@ -79,7 +79,14 @@ export class CasinoEngagementSuiteTournament {
                     }, 300);
                 }
             };
-            this.openDialog(DialogType.gift, this.gifts[0], onClose);
+            if (this.show) {
+                this.openDialog(DialogType.gift, this.gifts[0], onClose);
+            }
+            else {
+                //Show 'Win' Label on the left ui-bar,
+                this.labels.push('win');
+                messageSender.UpdateSuiteBarState(this.labels);
+            }
         }
         else {
             this.removeLabel('win');
@@ -96,9 +103,6 @@ export class CasinoEngagementSuiteTournament {
             this.showTooltip = false;
     }
     componentDidLoad() {
-        this.pageElement.addEventListener('scroll', (event) => {
-            this.containerScrollTop = event.target.scrollTop + event.target.clientHeight / 2 - 250;
-        });
         messageSender.UpdateTournamentsPageIsReady();
     }
     renderTooltip() {
@@ -119,7 +123,7 @@ export class CasinoEngagementSuiteTournament {
     }
     componentDidRender() {
         if (this.page === LeaderboardPage.item && this.tab === Tab.leaderboard) {
-            if (this.currentPlyerRank > this.maxPlyerRank && !this.scrolledToMyLine) {
+            if (this.currentPlayerRank > this.defaultPageSize && !this.scrolledToMyLine) {
                 this.scrollToMyRankLine();
             }
         }
@@ -137,6 +141,11 @@ export class CasinoEngagementSuiteTournament {
         if (tournament.isActionJoinPending)
             return;
         tournament.isActionJoinPending = true;
+        //Disable the unjoin button when action in detail page
+        if (this.page === LeaderboardPage.item) {
+            this.tournamentItem.isActionJoinPending = true;
+            this.tournamentItem = Object.assign({}, this.tournamentItem);
+        }
         this.pendingChangeEvent.emit(tournament);
         try {
             if (tournament.isPlayerAcknowledged) {
@@ -158,7 +167,7 @@ export class CasinoEngagementSuiteTournament {
             if (!this.tournamentItem) {
                 messageSender.UpdateTournamentsItemReq(metaData.tournament);
             }
-            if (isTournamentClosed(this.tournamentItem)) {
+            if (isTournamentEnded(this.tournamentItem)) {
                 messageSender.UpdateLeaderboardsReq(this.tournamentItem);
             }
             this.tab = Tab.info;
@@ -180,21 +189,27 @@ export class CasinoEngagementSuiteTournament {
         };
         return (h(Host, null, h("general-styling-wrapper", { clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling,
             // @ts-ignore
-            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { class: `Wrapper ${this.device}` }, h("div", { class: classnames('WrapperContent', { faded: this.dialog.isOpen }) }, renderCloseBar({
+            targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl }), h("div", { class: `Wrapper ${this.device} ${this.orientation}` }, h("div", { class: classnames('WrapperContent', { faded: this.dialog.isOpen, page: this.page }) }, this.page && renderCloseBar({
             left: this.page === LeaderboardPage.list
-                ? h("span", { onClick: this.openDialog.bind(this, DialogType.tip) }, iconQuestion)
-                : h("span", { onClick: this.setPage.bind(this, LeaderboardPage.list) }, iconBack),
+                ? h("span", { class: 'EngagementSuiteIcon', onClick: this.openDialog.bind(this, DialogType.tip) }, iconQuestion)
+                : h("span", { class: 'EngagementSuiteIcon', onClick: this.setPage.bind(this, LeaderboardPage.list) }, iconBack),
             middle: this.locale.Leaderboards,
-            right: h("span", { onClick: () => this.close.emit() }, iconClose)
+            right: h("span", { class: 'EngagementSuiteIcon', onClick: () => this.close.emit() }, iconClose)
         }), h("div", { class: `Leaderboards  ${this.page} ${this.page === 'list' ? 'Active' : 'Hidden'}`, ref: el => this.pageElement = el }, this.renders.page.list()), this.page === LeaderboardPage.item &&
-            h("div", { class: `Leaderboards ${this.page} ${this.page === 'item' ? 'Active' : 'Hidden'} `, ref: el => this.detailElement = el }, this.renders.page.item())), h("div", { class: "WrapperUtil" }, h("dialog", { open: this.dialog.isOpen, style: { 'top': this.getContainerScrollTop() + 'px' } }, h("div", { class: "Hollow" }, renderCloseBar({
-            right: h("span", { onClick: () => this.closeDialog() }, iconClose)
+            h("div", { class: `Leaderboards ${this.page} ${this.page === 'item' ? 'Active' : 'Hidden'} `, ref: el => this.detailElement = el }, this.renders.page.item())), h("div", { class: "WrapperUtil" }, h("dialog", { class: `${this.dialog.type}`, open: this.dialog.isOpen }, h("div", { class: `Hollow ${this.dialog.type === 'gift' ? 'GradientRounded' : ''}` }, renderCloseBar({
+            right: h("span", { class: 'EngagementSuiteIcon', onClick: () => this.closeDialog() }, iconClose)
         }), this.dialog.isOpen && renderDialogContent()))))));
     }
     openDialog(type, data = undefined, onClose = undefined) {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: true, onClose,
             type,
             data });
+        if (type === DialogType.error || type === DialogType.tip) {
+            const timerId = setTimeout(() => {
+                this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false });
+                clearInterval(timerId);
+            }, this.tipsHideDelay);
+        }
     }
     closeDialog() {
         var _a;
@@ -202,10 +217,14 @@ export class CasinoEngagementSuiteTournament {
         this.dialog = Object.assign(Object.assign({}, this.dialog), { isOpen: false, onClose: undefined });
     }
     constructor() {
+        /**
+         * Use to move the new acknowleged tournament to top
+         */
+        this.minOrder = -1;
         this.gifts = [];
         this.labels = [];
         this.showTooltip = false;
-        this.maxPlyerRank = 30;
+        this.defaultPageSize = DEFAULT_PAGE_SIZE;
         this.scrolledToMyLine = false;
         this.language = 'en';
         this.show = false;
@@ -213,7 +232,9 @@ export class CasinoEngagementSuiteTournament {
         this.clientStylingUrl = '';
         this.translationUrl = '';
         this.device = 'Mobile';
+        this.orientation = 'Landscape';
         this.leaderboardsInit = undefined;
+        this.tipsHideDelay = 3 * 1000;
         this.tab = Tab.info;
         this.locale = TRANSLATIONS;
         this.tournamentItem = undefined;
@@ -361,6 +382,24 @@ export class CasinoEngagementSuiteTournament {
                 "reflect": false,
                 "defaultValue": "'Mobile' as 'Mobile' | 'Tablet' | 'Desktop'"
             },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"Portrait\" | \"Landscape\"",
+                    "resolved": "\"Landscape\" | \"Portrait\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the widget"
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "'Landscape' as 'Landscape' | 'Portrait'"
+            },
             "leaderboardsInit": {
                 "type": "unknown",
                 "mutable": false,
@@ -381,6 +420,24 @@ export class CasinoEngagementSuiteTournament {
                     "tags": [],
                     "text": "Raw Leaderboards from API for Init"
                 }
+            },
+            "tipsHideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The delay time for hiding the tips popup"
+                },
+                "attribute": "tips-hide-delay",
+                "reflect": true,
+                "defaultValue": "3 * 1000"
             }
         };
     }

package/dist/collection/shared/TournamentDurationTimer.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { formatDate, getProgress, getTimeDifference } from "../utils/util.date";
 import { renderGradientRoundedButton } from "./GradientRoundedButton";
 import { LeaderboardPage } from "../utils/types";
-import { isTournamentClosed } from "../utils/bussiness";
+import { isTournamentEnded } from "../utils/bussiness";
 export class CasinoEngagementSuiteTournamentTimer {
     constructor() {
         this.tournament = undefined;
@@ -17,14 +17,14 @@ export class CasinoEngagementSuiteTournamentTimer {
             (event.detail.page === LeaderboardPage.item && this.isDetail);
     }
     componentWillLoad() {
-        this.lastTimeDiff = getTimeDifference(new Date(), this.tournament.endTime);
         this.lastProgress = getProgress(this.tournament.startTime, this.tournament.endTime);
+        this.lastTimeDiff = getTimeDifference(new Date(), this.tournament.endTime, this.lastProgress);
     }
     setTimeInterval() {
         this.timeHolder = setInterval(() => {
-            const timeDifference = getTimeDifference(new Date(), this.tournament.endTime);
             const progress = getProgress(this.tournament.startTime, this.tournament.endTime);
-            if (this.timeClock && !isTournamentClosed(this.tournament) &&
+            const timeDifference = getTimeDifference(new Date(), this.tournament.endTime, progress);
+            if (this.timeClock && !isTournamentEnded(this.tournament) &&
                 (timeDifference != this.lastTimeDiff || progress != this.lastProgress)) {
                 this.lastProgress = progress;
                 this.lastTimeDiff = timeDifference;
@@ -38,15 +38,15 @@ export class CasinoEngagementSuiteTournamentTimer {
         clearInterval(this.timeHolder);
     }
     render() {
-        return h("section", { key: '8fafe729af2bd66b5ac0e980564051069f677531', class: "TimeContainer" }, h("div", { key: '8279572700e24d3f1094809dae6e3b5d1b02c37b', class: "Time" }, this.tournament.state === 'Running'
+        return h("section", { key: '11426165a8f384d97f2b0158f7435f80ac0965a2', class: "TimeContainer" }, h("div", { key: 'b86c8a42a73b358fcc855a853cb322d1d314471a', class: "Time" }, this.tournament.state === 'Running'
             ? h("div", { class: "Running" }, h("div", null, this.lastTimeDiff), h("div", null, renderGradientRoundedButton({
                 statedClasses: {
                     isHollow: true,
-                    isPendding: false
+                    isPending: !!this.tournament.isActionJoinPending
                 },
-                innerHTML: `${getProgress(this.tournament.startTime, this.tournament.endTime)}%`
+                innerHTML: `${this.lastProgress}%`
             })))
-            : [h("div", { class: "NotRunning" }, formatDate(this.tournament.startTime)), h("div", null, formatDate(this.tournament.endTime))]), h("casino-engagement-suite-progress-bar", { key: 'e475e55b206c802f8df27cb95ac8fe6331578358', indeterminate: false, value: Number(this.lastProgress >= 100 ? 100 : this.lastProgress), "hide-percent": true }));
+            : [h("div", { class: "NotRunning" }, formatDate(this.tournament.startTime)), h("div", null, formatDate(this.tournament.endTime))]), h("casino-engagement-suite-progress-bar", { key: '7f98e88679f30d0a0737d94ee806b1d92800b6a3', indeterminate: false, value: Number(this.lastProgress >= 100 ? 100 : this.lastProgress), "hide-percent": true }));
     }
     static get is() { return "tournament-timer"; }
     static get properties() {
@@ -56,7 +56,7 @@ export class CasinoEngagementSuiteTournamentTimer {
                 "mutable": false,
                 "complexType": {
                     "original": "Tournament",
-                    "resolved": "{ href: string; id: string; nameOrTitle: string; description: string; termsUrl: string; thumbnail: string; thumbnails: []; startTime: Date; endTime: Date; closeTime: Date; exhibitionStartTime: Date; exhibitionEndTime: Date; state: TournamentState; tags: string; minBetCount: number; dataSource: string; scoreCriteria: string; wallets: { code: string; }; prizes: { rank: number; count: number; name: string; }[]; games?: TournamentGame[]; playerEnrolled?: boolean; isPlayerAcknowledged?: boolean; isActionJoinPending?: boolean; isUnjoined?: boolean; }",
+                    "resolved": "{ href: string; id: string; nameOrTitle: string; description: string; termsUrl: string; thumbnail: string; thumbnails: []; startTime: Date; endTime: Date; closeTime: Date; exhibitionStartTime: Date; exhibitionEndTime: Date; state: TournamentState; tags: string; minBetCount: number; dataSource: string; scoreCriteria: string; wallets: { code: string; }; prizes: { rank: number; count: number; name: string; }[]; games?: TournamentGame[]; playerEnrolled?: boolean; isPlayerAcknowledged?: boolean; isActionJoinPending?: boolean; isUnjoined?: boolean; isTriggered?: boolean; order?: number; }",
                     "references": {
                         "Tournament": {
                             "location": "import",