@everymatrix/casino-tournaments-page-controller 1.44.0 → 1.45.2

package/src/CasinoTournamentsPageController.svelte

@@ -1,871 +0,0 @@
-<svelte:options tag={null}/>
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import moment from 'moment';
-  import { isMobile, getDevice, checkSession } from 'rvhelper';
-  import { _, addNewMessages, date, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-  import { EventSourcePolyfill } from 'event-source-polyfill';
-
-  import gameCasinoSvg from './images/game-casino.svg';
-  import gameSportsSvg from './images/game-sports.svg'
-
-  import '@everymatrix/casino-tournaments-details';
-  import '@everymatrix/casino-tournaments-thumbnail-controller';
-  import '@everymatrix/casino-tournaments-table';
-  import '@everymatrix/casino-tournaments-tab';
-  import '@everymatrix/casino-tournaments-thumbnail-rule';
-  import '@everymatrix/casino-tournaments-rank';
-
-  export let session: string = '';
-  export let userid: string = '';
-  export let tourid: string = '';
-  export let endpoint: string = '';
-  export let showleaderboard: string = '';
-  export let cmsendpoint: string = '';
-  export let lang: string = '';
-  export let navigationbackbutton: string = 'Default';
-  export let currency: string = 'EUR';
-  export let tablelimit: string = '30';
-  export let namemask: string = '';
-  export let showunqualifiedplayer: string = 'true'
-  export let mobiletablelimit:string = '15';
-  export let updatetableintime:string = 'true';
-  export let viewmode:string = '';
-  export let minscore:string = '';
-  export let scorefractiondigit: string = '2';
-  export let translationurl:string = '';
-
-  export let leaderboardoffset:string = '0';
-  export let leaderboardlimit:string = '15';
-  export let keepbrowsercontext:string = 'false';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  // Variables of topics for communication
-  let sessionTopic;
-
-  let isLoggedIn: boolean = false;
-  let sessionID: string = '';
-  let playerID: string = '';
-  let isLoading: boolean = true;
-  let tournamentDescription: Array<any> = [];
-  let tournamentProducts:any;
-
-  let tournamentDetails: any = undefined;
-  let tournamentTableData: any = undefined;
-
-  let userAgent = window.navigator.userAgent;
-
-  let showTable: boolean = false;
-  let firstRowData: any = {};
-  let firstRowAvailable: boolean = false;
-
-  let tableUpdateEventSource: any;
-  let tournamentUpdateEventSource:EventSourcePolyfill;
-
-  let currentUserData:any = {};
-  let currentUserInPage:Boolean = false;
-  let activeTab = 'leaderboard';
-  let overallRank:number;
-  let latestRank:number;
-  let isMiniMode:boolean;
-  let shownStatus:any = '';
-  let customStylingContainer:HTMLElement;
-  let clientTranslation: any
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      clientTranslation = res
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item: any) => {
-    addNewMessages(item, TRANSLATIONS[item]);
-  });
-
-  const applyTranslation = (translation: any) => {
-    if(!translation) return;
-    Object.keys(translation).forEach((item:any):void => {
-      addNewMessages(item, translation[item]);
-    });
-  }
-
-  // @TODO this must be configurable
-  const tableColumns = ['Rank', 'Player', 'Points','Prize'];
-  // data for current user
-  const transFormCurrentUserData = (item:any) => {
-    const _fractiondigit = Number(scorefractiondigit) || 2
-
-    let userData = {
-      Rank: item.rank,
-      Player: item.userID == playerID ? "me" : item.shortName,
-      Points: item.score.toLocaleString('en-US', {
-        minimumFractionDigits: _fractiondigit, 
-        maximumFractionDigits: _fractiondigit
-      }),
-      Prize: item.prizeName,
-      Unqualified: item.unqualified,
-      BetCount: item.betCount,
-      userID: item.userID
-    };
-    return userData;
-  }
-
-  const transFormCurrentUserDataAtFistRow = (item: any) => ({
-    ...transFormCurrentUserData(item),
-    ...(item.unqualified === true ? { Rank: item.rank } : {})
-  })
-
-  // @TODO data type
-  const transformTableData = (data:any) => {
-
-    currentUserInPage = false
-
-    let tableData:any = [];
-
-    if (data && data.length > 0) {
-      data.forEach((item:any) => {
-        let transformedItem = transFormCurrentUserData(item)
-        if(item.userID == playerID){
-          currentUserData = transformedItem;
-          currentUserInPage = true;
-        }
-        tableData.push(transformedItem);
-      });
-    }
-
-    return tableData;
-  },
-    tournamentUpdateMessageHandler= (message:any) =>{
-      if(!message.data){
-        return;
-      }
-      try{
-        let messagDataAsJson = JSON.parse(message.data);
-        if(messagDataAsJson.messageType == 'TournamentUpdate'){
-          window.postMessage({type: 'UpdateTournamentView', tournamentData: messagDataAsJson.item}, window.location.href);
-          tournamentDetails = messagDataAsJson.item;
-          transformTournamentData(messagDataAsJson.item);
-          matchStatus();
-        }
-      }catch (e){
-        console.error(e);
-      }
-    },
-    startupTournamentUpdateListener = (tournamentID: string, searchParams:any)=>{
-      let endpointURL:string = `${endpoint}/v1/tournaments/updates?filter=id=${tournamentID}&${searchParams.toString()}`;
-      tournamentUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream','X-SessionId': session}});
-      if (!typeof (tournamentUpdateEventSource) != 'undefined'){
-        tournamentUpdateEventSource.addEventListener('message', tournamentUpdateMessageHandler);
-      }
-    },
-    tableUpdateMessageHandler = (message:any)=>{
-      if(!message.data){
-        return;
-      }
-      try{
-        let messageData:any = message.data;
-        let updateTableData:any = JSON.parse(messageData);
-        if(!updateTableData || !updateTableData.items){
-          return;
-        }
-        let newTableData: Array<LeaderboardRow> = transformTableData(updateTableData.items);
-        window.postMessage({ type: 'CasinoTableData', tableData: newTableData }, window.location.href);
-        currentUserInPage = newTableData.filter((item)=>{
-          return item.userID = playerID;
-        }).length > 0;
-        if(updateTableData.item){
-          firstRowAvailable = true;
-          firstRowData = transFormCurrentUserDataAtFistRow(updateTableData.item);
-          if(firstRowData){
-            window.postMessage({ type: 'CasinoTableFirstRowData', tableData: firstRowData }, window.location.href);
-          }
-        }
-
-        let newUserRank = currentUserInPage ? currentUserData.Rank : firstRowData.Rank;
-        if(newUserRank != latestRank || overallRank != updateTableData.items.length){
-          overallRank = updateTableData.items.length;//new player joined and spined
-          window.postMessage({type: `TournamentRankInfo_${tourid}`, rankInfo:{
-              rank: newUserRank,
-              overallRank: overallRank,
-              prize: currentUserInPage ? (currentUserData.Prize || '-') : (firstRowData.Prize  || '-')
-            }}, window.location.href);
-          latestRank = newUserRank;
-        }
-
-        if(currentUserInPage){
-          window.postMessage({ type: 'CasinoTableCurrentUserData', tableData: currentUserData }, window.location.href);
-        }
-      }catch(err){
-        console.error(err);
-      }
-    },
-    startupTableDataChangeListener = (tournamentID: String, searchParams: any) => {
-      let endpointURL: String = `${endpoint}/v1/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&${searchParams.toString()}`;
-      if(tableUpdateEventSource){
-        return;
-      }
-      tableUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream','X-SessionId': session}});
-      if (typeof (tableUpdateEventSource) != "undefined") {
-        tableUpdateEventSource.addEventListener('open', tableUpdateMessageHandler);
-        tableUpdateEventSource.addEventListener('message', tableUpdateMessageHandler);
-        tableUpdateEventSource.addEventListener('error', tableUpdateMessageHandler);
-      }
-  },
-    transformTournamentData = (data:any)=>{
-      let productInfo={currency};
-      if(data.wallet){
-        let wallet = data.wallet;
-        if(wallet.casino){
-          productInfo['casino'] = {
-            name: 'Casino',
-            minbet: wallet.casino?.minStake?.amount[currency] || $_('unlimited'),
-            maxbet: wallet.casino?.maxStake?.amount[currency] || $_('unlimited')
-          }
-        }
-        if(wallet.sports){
-          productInfo['sports'] = {
-            name: 'Sports',
-            minbet: wallet.sports?.minStake?.amount[currency] || $_('unlimited') ,
-            maxbet: wallet.sports?.maxStake?.amount[currency] || $_('unlimited')
-          }
-        }
-        tournamentProducts = productInfo;
-      }
-    }
-
-  const getData = (endpointURL: String, tourID: String) => {
-    let url = new URL(endpointURL + `/v1/tournaments/${tourID}`);
-    let reqHeaders = new Headers({'X-SessionId': session});
-
-    url.searchParams.append('expand', 'games');
-    url.searchParams.append('language', lang);
-    url.searchParams.append('platform', getDevice(userAgent));
-
-    let requestOptions = {
-      method: 'GET',
-      headers: reqHeaders,
-    };
-
-    fetch(url.href, requestOptions)
-      .then((res: any) => res.json())
-      .then((res: any) => {
-        tournamentDetails = res.item;
-        transformTournamentData(tournamentDetails);
-        startupTournamentUpdateListener(tourid, url.searchParams);
-      });
-  }
-
-  const getTableData = (endpointURL: String, tourID: String) => {
-    let url = new URL(endpointURL + `/v1/tournaments/${tourID}/leaderboard`);
-    let reqHeaders = new Headers();
-
-    url.searchParams.append('language', lang);
-
-    let tableFilter = `includeUnqualifiedPlayer=${showunqualifiedplayer}`;
-    tableFilter = namemask ? `${tableFilter},shortNameMask=${namemask}` : tableFilter;
-    tableFilter = minscore ? `${tableFilter},minscore=${minscore}` : tableFilter;
-
-    url.searchParams.append('filter', tableFilter);
-
-    if (session) {
-      let limit = isMobile(userAgent) == true? mobiletablelimit : tablelimit;
-      url.searchParams.append('pagination', `offset=0,limit=${limit}`);
-      reqHeaders.append('X-SessionId', session);
-    }
-    url.searchParams.append('platform', getDevice(userAgent));
-
-    let requestOptions = {
-      method: 'GET',
-      headers: reqHeaders,
-    };
-
-    fetch(url, requestOptions)
-      .then((res: any) => res.json())
-      .then((res: any) => {
-        tournamentTableData = transformTableData(res.items);
-        if(res.item && !currentUserInPage){
-          firstRowAvailable = true;
-          firstRowData = transFormCurrentUserDataAtFistRow(res.item);
-        }
-        showTable = true;
-        latestRank = currentUserInPage ? currentUserData.Rank : firstRowData.Rank
-        overallRank = res.total;
-
-        // @TODO data is not iterable error fix
-        window.postMessage({
-          type: 'CasinoTableData',
-          tableData: tournamentTableData
-        }, window.location.href);
-        window.postMessage({type: 'CasinoTableColumns', tableColumns}, window.location.href);
-        if (firstRowAvailable) {
-          window.postMessage({type: 'CasinoTableFirstRowData', tableData: firstRowData}, window.location.href);
-        }
-        if(updatetableintime === 'true'){
-          startupTableDataChangeListener(tourID, url.searchParams);
-        }
-        if (currentUserInPage){
-          window.postMessage({ type: 'CasinoTableCurrentUserData', tableData: currentUserData }, window.location.href);
-        }
-      });
-  }
-
-  const messageHandler = (e: any) => {
-    if (e.data && e.data.type == 'UserSessionID') {
-      isLoggedIn = true;
-      sessionID = e.data.session;
-    }
-
-    if (e.data && e.data.type == 'PlayerID') {
-      playerID = e.data.playerID;
-    }
-    if(e.data && e.data.type == 'TournamentsTabSwitch'){
-      activeTab = e.data.tab;
-    }
-    if(e.data && e.data.type === 'TournamentThumbnailMounted'){
-      applyTranslation(clientTranslation);
-    }
-  }
-
-  const matchStatus = () => {
-    if (tournamentDetails.state == 'Unstarted') {
-      shownStatus = $_('scheduled');
-    }
-
-    if (tournamentDetails.state == 'Running') {
-      shownStatus = $_('ongoing');
-    }
-
-    if (tournamentDetails.state == 'Closed' || tournamentDetails.state == 'Closing') {
-      shownStatus = $_('finished');
-    }
-  }
-
-  const goBack = () => {
-    // this function handles the back navigation making use of the prop: navigationbackbutton. If it has the
-    // event value, it will emit the 'RedirectBack' event which will enable the client to handle the routing;
-    // else, if it has the 'Default' value, it will do a window.history.back()
-    if (navigationbackbutton == 'Event') {
-      window.postMessage({type: 'RedirectBack'}, window.location.href);
-    } else if (navigationbackbutton == 'Default') {
-      window.history.back();
-    }
-  }
-  const closeThumbnail = () =>{
-    window.postMessage({ type: 'OnCloseThumbnail' }, window.location.href);
-  }
-  const gotoFromTournamentsPage = (pageType: string) =>{
-    window.postMessage({ type: 'GotoFromTournamentsPage', pageType }, window.location.href);
-  }
-
-  const setSession = () => {
-    if (session.length > 0 && session != 'false') {
-      sessionID = session;
-      playerID = userid;
-      isLoggedIn = true;
-    } else {
-      isLoggedIn = false;
-    }
-
-    isLoading = false;
-  }
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-    setTimeout(() => {
-      initTabTitle()
-    }, 10)
-  }
-  const initialLoad = () => {
-    setLocale(lang);
-    getData(endpoint, tourid);
-    getTableData(endpoint, tourid);
-  }
-
-  const getDataFromCMS = () => {
-    fetch(`${cmsendpoint}/${tourid}`)
-      .then((res: any) => res.json())
-      .then((data: any) => {
-        if (data && data.details) {
-          tournamentDescription = data.details;
-        }
-      });
-  }
-  const initTabTitle= () =>{
-    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'leaderboard', 'text': $_('leaderBoard')}, window.location.href)
-    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'rules', 'text': $_('rules')}, window.location.href)
-    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'games', 'text': $_('games')}, window.location.href)
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      if(tableUpdateEventSource){
-        tableUpdateEventSource.removeEventListener('open', tableUpdateMessageHandler);
-        tableUpdateEventSource.removeEventListener('message', tableUpdateMessageHandler);
-        tableUpdateEventSource.removeEventListener('error', tableUpdateMessageHandler);
-      }
-      if(tournamentUpdateEventSource){
-        tournamentUpdateEventSource.removeEventListener('message', tournamentUpdateMessageHandler);
-      }
-    }
-  });
-
-  $: session && userid && setSession();
-  $: lang && setActiveLanguage();
-  $: translationurl && setTranslationUrl();
-  $: initialParameters = tourid && endpoint && session && lang;
-  $: initialParameters && initialLoad();
-  $: cmsendpoint && tourid && getDataFromCMS();
-  $: isMiniMode = (viewmode != 'desktop') && isMobile(userAgent); // forward this page from tournamentslider
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-
-  // fix bug caused by svelte ^3.44 https://github.com/sveltejs/svelte/issues/7037
-  $: betCount = tournamentDetails?.minBetCount || $_('unlimited')
-</script>
-
-{#if isLoading}
-  <p class="LoadingMessage" part="LoadingMessage">
-    {$_('loading')}
-  </p>
-{/if}
-{#if !isMiniMode}
-  <div class="TournamentsPage" part="TournamentsPage" bind:this={customStylingContainer}>
-    <div class="TournamentsSectionWrapper" part="TournamentsSectionWrapper">
-
-      <div class="TopButtons" part="TopButtons">
-        <div class="BackButton" part="BackButton" on:click={() => goBack()}>
-          <svg fill="none" stroke="currentColor" width="24" height="24" viewBox="0 0 24 24"
-               xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-          </svg>
-          <p>{$_('back')}</p>
-        </div>
-      </div>
-
-      <div class="TournamentContentDetails {isMobile(userAgent) ? 'MobileClass' : ''}"
-           part="TournamentContentDetails {isMobile(userAgent) ? 'MobileClass' : ''}">
-        <div
-          class="{isMobile(userAgent) ? 'MobileClass' : ''}{showleaderboard == 'true' ? 'TournamentCardDetails' : 'FullSize'}"
-          part="{isMobile(userAgent) ? 'MobileClass' : ''}{showleaderboard == 'true' ? 'TournamentCardDetails' : 'FullSize'}">
-          {#if tournamentDetails}
-            <casino-tournaments-thumbnail-controller
-              session={session}
-              userid={userid}
-              endpoint={endpoint}
-              tournamenturl={tournamentDetails.href}
-              showdetails="false"
-              showslider="true"
-              showenrolled="true"
-              fullsize={!!showleaderboard}
-              {clientstyling}
-              {clientstylingurl}
-              {lang}
-              {currency}
-              {keepbrowsercontext}
-              exportparts="Thumbnail, Status, Enrolled, CardImg, CardImgFinished, Details, Title, Date, ScoreCriteria, Games, TournamentPrizes, TournamentPrizesSvg, a, TournamentPrizesSvgA, PrizesTitle, Prizes, Prize, PrizeText, PrizeRank,
-              TournamentDuration, TournamentDates, StartDate, EndDate, ProgressBar, ProgressBarFillEnd, Finished, ProgressBarFillStarting, Remaining, ProgressBarFill,
-              TournamentsGamesSlider, SliderNavButton, items, item, PlayNowButton, itemHover, SliderNavButton
-              TournamentCard, CardMaxWidth, CardFullSize, elementToFadeOut, elementToFadeIn, ph-item, ph-col-12, ph-picture, ph-row, ph-col-6, big, ph-col-4, empty, ph-col-8, TournamentButtons, LoginButton, RegisterButton, DetailsButton, EnrolledButton, JoinButton, JoinButtonFullSize, spinner, DetailsLargeButton, ErrorText, StatusUnstarted, StatusRunning, StatusClosed, StatusClosing, TournamentPrizesIconSection, TournamentPrizesIconWrapper"
-            ></casino-tournaments-thumbnail-controller>
-          {/if}
-          {#if tournamentDescription.length > 0}
-            {#each tournamentDescription as desc}
-              <casino-tournaments-details
-                title={desc.title}
-                text={desc.description}
-                exportparts="DetailsCard, DetailsTitle, Title, CollapseButtonDetails, DetailsContent"
-                {clientstyling}
-                {clientstylingurl}
-              >
-              </casino-tournaments-details>
-            {/each}
-          {/if}
-        </div>
-
-        <div class="{showleaderboard == 'true' ? 'TournamentTableDetails ' : 'DisplayNone'}"
-            part="{showleaderboard == 'true' ? 'TournamentTableDetails ' : 'DisplayNone'}">
-          {#if showleaderboard == "true"}
-            {#if showTable == true}
-              <casino-tournaments-table
-                firstrow="true"
-                sortable="false"
-                {lang}
-                {clientstyling}
-                {clientstylingurl}
-                exportparts="TableContent, TableUser, TableHeadRow, TableCell, CurrentUserRow, UnqualifiedRow, TableRank, Rank-1, Rank-2, Rank-3, RankFirstRow, TablePlayer, TablePoints, TablePrize, Qualified, TableUserTooltips, TableUserTooltipsEm, ExclamationMark,
-                TournamentsTable, LeftTable, LeftTableThead, LeftTableTr, LeftTableTh, LeftTableTd, LeftTableTdEm, LeftTableButton, LeftTableP, LeftTableTbody, FirstRow, RankCol, ScoreChangeFlag, Show, Hidden, Rank_Arror_UP, Rank_Arror_Down, ScoreUp, Flex, RightButton, CollapseButton, TooltipsRow"
-              ></casino-tournaments-table>
-            {/if}
-          {/if}
-        </div>
-
-      </div>
-    </div>
-  </div>
-{/if}
-{#if isMiniMode }
-  <div class="TournamentsPage MiniMode {tournamentDetails ? 'hidden':''}" part="MiniTournamentPage" bind:this={customStylingContainer}>
-    <div class="TournamentContentDetails {isMobile(userAgent) ? 'MobileClass' : ''}" part="TournamentContentDetails">
-      <div class="{isMobile(userAgent) ? 'MobileClass' : ''}{showleaderboard == 'true' ? ' TournamentCardDetails' : ' FullSize'}" part="MobileTournamentCardDetails">
-        {#if !tournamentDetails}
-          <div class="Thumbnail MiniMode" part="MiniThumbnail">
-            <img part="CardImg" class="CardImg {(status == 'Closing' || status == 'Closed') ? 'CardImgFinished' : ''}" src="https://i.stack.imgur.com/y9DpT.jpg"
-                width="65px" height="40px"  title="">
-            <div class="MobileRight" part="ThumbnailRight">
-              <div class="Title"> </div>
-              <div>
-              </div>
-            </div>
-            <div class="CloseButton" part="CloseButton" on:click='{()=>closeThumbnail()}'>X</div>
-          </div>
-          <casino-tournaments-rank
-            {clientstyling}
-            {clientstylingurl}
-            prize="-"
-            exportparts="casino-tournaments-rank, Rank, Icon, UserIcon, RankText, Rank_Arror_UP, Rank_Arror_Down, Prize, Icon, PrizeIcon, PrizeText"
-          ></casino-tournaments-rank>
-        {/if}
-        {#if tournamentDetails}
-          <div class="Thumbnail MiniMode" part="MiniThumbnail">
-            {#if tournamentDetails.thumbnail}
-              <img use:matchStatus part="CardImg" class="Mobile CardImg {(tournamentDetails.state == 'Closing' || tournamentDetails.state == 'Closed') ? 'CardImgFinished' : ''}"
-                   src="{tournamentDetails.thumbnail}" width="65px" height="40px" title="{tournamentDetails.nameOrTitle}">
-            {:else}
-              <img use:matchStatus part="CardImg" class="CardImg {(tournamentDetails.state == 'Closing' || tournamentDetails.state == 'Closed') ? 'CardImgFinished' : ''}" src="https://i.stack.imgur.com/y9DpT.jpg"
-                   width="65px" height="40px"  title="{tournamentDetails.nameOrTitle}">
-            {/if}
-            <div class="MobileRight" part="ThumbnailRight">
-              <div class="Title" part="ThumbnailRight_Title">{tournamentDetails.nameOrTitle}</div>
-              <div part="ThumbnailRight_Period">
-                {#if tournamentDetails.startTime}
-                  {$_('activePeriod', {values: {startdate: moment(tournamentDetails.startTime).format('DD/MM/YYYY HH:mm'), enddate:moment(tournamentDetails.endTime).format('DD/MM/YYYY HH:mm')}})}
-                {/if}
-              </div>
-            </div>
-            <div class="CloseButton" part="CloseButton" on:click='{()=>closeThumbnail()}'>X</div>
-          </div>
-
-          <casino-tournaments-rank part="ThumbnailRank" userrank="{currentUserInPage ? currentUserData.Rank : firstRowData.Rank}" overallrank="{overallRank}"
-                                   prize="{currentUserInPage ? (currentUserData.Prize || '-') : (firstRowData.Prize || '-')}" tournamentid="{tourid}"
-                                   exportparts="casino-tournaments-rank, Rank, Icon, UserIcon, RankText, Rank_Arror_UP, Rank_Arror_Down, Prize, Icon, PrizeIcon, PrizeText"
-                                  {clientstyling}
-                                  {clientstylingurl}
-          ></casino-tournaments-rank>
-        {/if}
-      </div>
-      <casino-tournaments-tab part="ThumbnailTab" use:initTabTitle tabs="leaderboard,rules,games" tab="leaderboard"
-                              exportparts="CustomStylingContainer, ul, li, LiText, sup, SupText, active"
-                              {clientstyling}
-                              {clientstylingurl}
-      ></casino-tournaments-tab>
-      <div class="TabContent {showleaderboard == 'true' ? 'TournamentTableDetails ' : 'DisplayNone'} { activeTab != 'leaderboard' ? 'hidden' : ''}" part="ThumbnailTabContent">
-        <casino-tournaments-table firstrow="true" sortable="false" {lang}
-                                  exportparts="TableContent, TableUser, TableHeadRow, TableCell, CurrentUserRow, UnqualifiedRow, TableRank, Rank-1, Rank-2, Rank-3, RankFirstRow, TablePlayer, TablePoints, TablePrize, Qualified, TableUserTooltips, TableUserTooltipsEm, ExclamationMark,
-                                  TournamentsTable, LeftTable, LeftTableThead, LeftTableTr, LeftTableTh, LeftTableTd, LeftTableTdEm, LeftTableButton, LeftTableP, LeftTableTbody, FirstRow, RankCol, ScoreChangeFlag, Show, Hidden, Rank_Arror_UP, Rank_Arror_Down, ScoreUp, Flex, RightButton, CollapseButton, TooltipsRow"
-                                  {clientstyling}
-                                  {clientstylingurl}
-        ></casino-tournaments-table>
-      </div>
-      <div class="TabContent Rules { activeTab != 'rules' ? 'hidden' : ''}" part="ThumbnailTabContent">
-        {#if tournamentDetails}
-          <casino-tournaments-thumbnail-rule lang="{lang}" tcurl="{tournamentDetails.termsUrl||'#'}" scorecriterial="{tournamentDetails.scoreCriteria}" betcount="{betCount}"
-                                             starttime="{moment(tournamentDetails.startTime).format('DD/MM/YYYY HH:mm:ss')}"
-                                             endtime="{moment(tournamentDetails.endTime).format('DD/MM/YYYY HH:mm:ss')}"
-                                             products="{tournamentProducts}"
-                                             exportparts="casino-tournaments-thumbnail-rule, rule, RuleIcon, RuleTxt"
-                                             {clientstyling}
-                                             {clientstylingurl}
-          ></casino-tournaments-thumbnail-rule>
-        {/if}
-      </div>
-      <div class="TabContent Games { activeTab != 'games' ? 'hidden' : ''}" part="ThumbnailTabContent">
-        {#if tournamentProducts}
-          <div class="GameItems {tournamentProducts.casino && tournamentProducts.sports ? 'TwoGames' : 'OneGame'}" part="ThumbnailTabContent_Games">
-            {#if tournamentProducts.casino}
-              <div part="ThumbnailTabContent_Casino">
-                <img class="svg"  part="ThumbnailTabContent_Games_Casino_Svg" src="{gameCasinoSvg}" width="78" height="75"/>
-                <span part="ThumbnailTabContent_Games_Casino_Label" on:click='{() => gotoFromTournamentsPage("Casino")}'>{$_('forwardCasino')}</span>
-              </div>
-            {/if}
-            {#if tournamentProducts.sports}
-              <div class="SportsItems" part="ThumbnailTabContent_Sports">
-                <img class="svg" part="ThumbnailTabContent_Games_Sports_Svg" src="{gameSportsSvg}" width="68" height="65"/>
-                <span  part="ThumbnailTabContent_Games_Sports_Label" on:click='{() => gotoFromTournamentsPage("Sports")}'>{$_('forwardSports')}</span>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </div>
-      <div class="BottomButton" part="ThumbnailGotoTournamentsButton" on:click='{()=>{gotoFromTournamentsPage("MyTournaments")}}' >{$_('forwardMyTournaments')}</div>
-    </div>
-  </div>
-{/if}
-<style lang="scss">
-
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  .TournamentsPage {
-    background: var(--emfe-w-color-contrast, #07072A);
-    width: 100%;
-    color: var(--emfe-w-color-white, #FFFFFF);
-  }
-
-  .TournamentsSectionWrapper {
-    padding: 24px 0;
-
-    @media screen and (max-width: 1300px) {
-      padding: 24px 2.4%;
-    }
-  }
-
-  .FullSize {
-    width: 100%;
-  }
-
-  .DisplayNone {
-    display: none;
-  }
-
-  .TopButtons {
-    display: inline-flex;
-    flex-direction: column;
-    padding-bottom: 20px;
-    font-size: 10px;
-  }
-
-  .BackButton {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-
-    p {
-      font-size: 24px;
-    }
-  }
-
-  .NavButtons {
-    margin-left: auto;
-    gap: 10px;
-    display: flex;
-  }
-
-  .PrevButton {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-    width: 105px;
-    height: 36px;
-    padding: 10px;
-    font-size: 16px;
-    cursor: pointer;
-  }
-
-  .NextButton {
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-    padding: 10px;
-    width: 75px;
-    height: 36px;
-    font-size: 16px;
-    cursor: pointer;
-  }
-
-  .TournamentContentDetails {
-    display: flex;
-    gap: 20px;
-
-    &.MobileClass {
-      flex-direction: column;
-    }
-  }
-
-  .TournamentCardDetails {
-    width: 30%;
-
-    &.MobileClass {
-      width: 100%;
-    }
-  }
-
-  .TournamentTableDetails {
-    flex: auto;
-  }
-  .TournamentsPage.MiniMode{
-    height: max-content;
-    .MobileClass.TournamentCardDetails{
-      padding: 5px 5px 0px 5px;
-      background-color: #333333;
-      padding-bottom: 12px;
-      casino-tournaments-rank{display: block;}
-    }
-    .CloseButton{position: absolute; right: 3px; top: 3px; font-size: 11px; cursor: pointer}
-    casino-tournaments-rank::part(Rank), casino-tournaments-rank::part(Prize){
-      color: #0a0c19;
-      font-size: 12px;
-      margin: 0px 0px 0px 5px;
-      padding: 2px;
-    }
-    casino-tournaments-rank::part(Rank){margin-left: 0px; }
-    casino-tournaments-rank::part(Prize){margin-right: 0px;}
-    casino-tournaments-rank::part(RankText), casino-tournaments-rank::part(PrizeText){font-weight: 400;}
-
-    .hidden{display: none}
-    casino-tournaments-thumbnail-controller::part(TournamentCard){
-      padding: 5px 5px 0px 5px;
-      background-color: #333333;
-    }
-    casino-tournaments-tab::part(LiText){
-      height: 22px;
-      top: calc(50% - 22px/2);
-      font-style: normal;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 22px;
-      text-align: center;
-      letter-spacing: -0.1px;
-    }
-    casino-tournaments-tab::part(CustomStylingContainer){
-      margin-top: 0px;
-      cursor: pointer;
-    }
-    .TabContent, casino-tournaments-tab{padding:  0 16px}
-    .TabContent.Rules{
-      padding-bottom: 28px;
-    }
-    .TabContent.Games{
-      padding-bottom: 30px;
-      .GameItems{
-        &.OneGame{width: 100%;}
-        &.TwoGames{width: 100%; display: flex; div{width: 50%}}
-        text-align: center;
-        margin: auto;
-        margin-top: 39px;
-        span{color: #FF8364; font-size: 12px; text-align: center; text-decoration-line: underline; cursor: pointer; margin-top: 5px}
-        svg, .svg{height: 70px;display: block;margin: auto;}
-        svg.ball, .svg.ball{width: 98px}
-      }
-    }
-    .BottomButton{
-      font-weight: 600;
-      font-size: 15px;
-      text-align: center;
-      height: 35px;
-      width: 60%;
-      margin:20px auto;
-      align-items: center;
-      padding: 8.72351px 12.6887px;
-      background: #FF8364;
-      box-shadow: 0px 0.793047px 2.37914px rgba(0, 0, 0, 0.1), 0px 1.58609px 0.793047px rgba(0, 0, 0, 0.06), 0px 0.793047px 0.793047px rgba(0, 0, 0, 0.07);
-      border-radius: 4.75828px;
-    }
-
-    .Thumbnail {
-      position: relative;
-      &.Mobile{border: 0px none;
-        padding: 6px 5px 10px;
-        background: #333333;}
-      &.MiniMode .CardImg{margin-bottom: 5px; width: 65px; height: 40px}
-
-      .CardImg {
-        height: 300px;
-        width: 100%;
-        background: url('https://breakthrough.org/wp-content/uploads/2018/10/default-placeholder-image.png');
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: auto;
-        &.CardImgFinished {
-          filter: grayscale(1);
-        }
-        &.Mobile{
-          width: 65px;
-          height: 40px;
-          display: inline-block;
-        }
-      }
-      .MobileRight{
-        display: inline-block;
-        line-height: 20px;
-        font-size: 11px;
-        padding: 2px 3px;
-        vertical-align: top;
-        width: calc(100% - 70px);
-        .Title{text-transform: capitalize; font-size: 14px; font-weight: 600}
-      }
-
-      .Status {
-        background: #000000;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        top: 20px;
-        right: 20px;
-        min-height: 30px;
-        padding: 0 10px;
-        font-size: 12px;
-        text-transform: uppercase;
-        z-index: 1;
-      }
-
-      .Enrolled {
-        background: #2B2B5D;
-        color: #aaaabe;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: absolute;
-        top: 20px;
-        left: 20px;
-        min-height: 30px;
-        padding: 0 10px;
-        font-size: 12px;
-        text-transform: uppercase;
-        z-index: 1;
-      }
-    }
-  }
-
-</style>