@everymatrix/casino-tournaments-page-controller 0.0.367 → 0.0.368

package/src/CasinoTournamentsPageController.svelte

@@ -1,817 +1,817 @@
-<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 { TournamentsPageTranslations } 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 leaderboardoffset:string = '0';
-  export let leaderboardlimit:string = '15';
-  export let keepbrowsercontext:string = 'false';
-  // 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 = '';
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(TournamentsPageTranslations).forEach((item: any) => {
-    addNewMessages(item, TournamentsPageTranslations[item]);
-  });
-
-  // @TODO this must be configurable
-  const tableColumns = ['Rank', 'Player', 'Points','Prize'];
-  // data for current user
-  const transFormCurrentUserData = (item:any) => {
-    let userData = {
-      Rank: showunqualifiedplayer == "false" ? item.rankWithoutUnqualified : item.rank,
-      Player: item.shortName,
-      Points: item.score,
-      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}/tournaments/updates?filter=id=${tournamentID}&${searchParams.toString()}&XSessionId=${session}`;
-      if(!EventSource){
-        tournamentUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream'}});
-      }else{
-        tournamentUpdateEventSource = new EventSource(endpointURL);
-      }
-      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  || '-')
-            }});
-          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}/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&XSessionId=${session}&${searchParams.toString()}`;
-      if(tableUpdateEventSource){
-        return;
-      }
-      if(!EventSource){
-        tableUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream'}});
-      }else{
-        tableUpdateEventSource = new EventSource(endpointURL);
-      }
-      if (typeof (tableUpdateEventSource) != "undefined") {
-        tableUpdateEventSource.addEventListener('open', tableUpdateMessageHandler);
-        tableUpdateEventSource.addEventListener('message', tableUpdateMessageHandler);
-        tableUpdateEventSource.addEventListener('error', tableUpdateMessageHandler);
-      }
-  },
-    transformTournamentData = (data:any)=>{
-      let productInfo={};
-      if(data.wallet){
-        let wallet = data.wallet;
-        if(wallet.casino){
-          productInfo['casino'] = {
-            name: 'Casino',
-            minbet: wallet.casino.minStake && wallet.casino.minStake.amount ? wallet.casino.minStake.amount.EUR : $_('tournamentsPage.unlimited'),
-            maxbet: wallet.casino.maxStake && wallet.casino.maxStake.amount ? wallet.casino.maxStake.amount.EUR : $_('tournamentsPage.unlimited')
-          }
-        }
-        if(wallet.sports){
-          productInfo['sports'] = {
-            name: 'Sports',
-            minbet: wallet.sports.minStake && wallet.sports.minStake.amount ? wallet.sports.minStake.amount.EUR : $_('tournamentsPage.unlimited'),
-            maxbet: wallet.sports.maxStake && wallet.sports.maxStake.amount ? wallet.sports.maxStake.amount.EUR : $_('tournamentsPage.unlimited')
-          }
-        }
-        tournamentProducts = productInfo;
-      }
-    }
-
-  const getData = (endpointURL: String, tourID: String) => {
-    let url = new URL(endpointURL + `/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 + `/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;
-    }
-  }
-
-  const matchStatus = () => {
-    if (tournamentDetails.state == 'Unstarted') {
-      shownStatus = $_('tournamentsPage.scheduled');
-    }
-
-    if (tournamentDetails.state == 'Running') {
-      shownStatus = $_('tournamentsPage.ongoing');
-    }
-
-    if (tournamentDetails.state == 'Closed' || tournamentDetails.state == 'Closing') {
-      shownStatus = $_('tournamentsPage.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);
-    initTabTitle()
-  }
-  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': $_('tournamentsPage.leaderBoard')}, window.location.href)
-    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'rules', 'text': $_('tournamentsPage.rules')}, window.location.href)
-    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'games', 'text': $_('tournamentsPage.games')}, window.location.href)
-  }
-
-  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();
-  $: initialParameters = tourid && endpoint && session && lang;
-  $: initialParameters && initialLoad();
-  $: cmsendpoint && tourid && getDataFromCMS();
-  $: isMiniMode = (viewmode != 'desktop') && isMobile(userAgent); // forward this page from tournamentslider
-</script>
-
-{#if isLoading}
-  <p class="LoadingMessage" part="LoadingMessage">
-    {$_('tournamentsPage.loading')}
-  </p>
-{/if}
-{#if !isMiniMode}
-  <div class="TournamentsPage" part="TournamentsPage">
-    <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>{$_('tournamentsPage.back')}</p>
-        </div>
-        <!--<div class="NavButtons">
-          <div class="PrevButton">
-            <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>{$_('tournamentsPage.previous')}</p>
-          </div>
-          <div class="NextButton">
-            <p>{$_('tournamentsPage.next')}</p>
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-          </div>
-        </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}
-              {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"
-              >
-              </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}
-                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">
-    <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
-            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}
-                  {$_('tournamentsPage.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"
-          ></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"
-      ></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"
-        ></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="{tournamentDetails.minBetCount || $_('tournamentsPage.unlimited')}"
-                                             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"
-          ></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")}'>{$_('tournamentsPage.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")}'>{$_('tournamentsPage.forwardSports')}</span>
-              </div>
-            {/if}
-          </div>
-        {/if}
-      </div>
-      <div class="BottomButton" part="ThumbnailGotoTournamentsButton" on:click='{()=>{gotoFromTournamentsPage("MyTournaments")}}' >{$_('tournamentsPage.forwardMyTournaments')}</div>
-    </div>
-  </div>
-{/if}
-<style lang="scss">
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  *,
-  *::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: 420px;
-
-    &.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>
+<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 { TournamentsPageTranslations } 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 leaderboardoffset:string = '0';
+  export let leaderboardlimit:string = '15';
+  export let keepbrowsercontext:string = 'false';
+  // 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 = '';
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(TournamentsPageTranslations).forEach((item: any) => {
+    addNewMessages(item, TournamentsPageTranslations[item]);
+  });
+
+  // @TODO this must be configurable
+  const tableColumns = ['Rank', 'Player', 'Points','Prize'];
+  // data for current user
+  const transFormCurrentUserData = (item:any) => {
+    let userData = {
+      Rank: showunqualifiedplayer == "false" ? item.rankWithoutUnqualified : item.rank,
+      Player: item.shortName,
+      Points: item.score,
+      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}/tournaments/updates?filter=id=${tournamentID}&${searchParams.toString()}&XSessionId=${session}`;
+      if(!EventSource){
+        tournamentUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream'}});
+      }else{
+        tournamentUpdateEventSource = new EventSource(endpointURL);
+      }
+      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  || '-')
+            }});
+          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}/tournaments/${tournamentID}/leaderboard/updates?HeartBeat=false&XSessionId=${session}&${searchParams.toString()}`;
+      if(tableUpdateEventSource){
+        return;
+      }
+      if(!EventSource){
+        tableUpdateEventSource = new EventSourcePolyfill(endpointURL,{headers: {'accept': 'text/event-stream'}});
+      }else{
+        tableUpdateEventSource = new EventSource(endpointURL);
+      }
+      if (typeof (tableUpdateEventSource) != "undefined") {
+        tableUpdateEventSource.addEventListener('open', tableUpdateMessageHandler);
+        tableUpdateEventSource.addEventListener('message', tableUpdateMessageHandler);
+        tableUpdateEventSource.addEventListener('error', tableUpdateMessageHandler);
+      }
+  },
+    transformTournamentData = (data:any)=>{
+      let productInfo={};
+      if(data.wallet){
+        let wallet = data.wallet;
+        if(wallet.casino){
+          productInfo['casino'] = {
+            name: 'Casino',
+            minbet: wallet.casino.minStake && wallet.casino.minStake.amount ? wallet.casino.minStake.amount.EUR : $_('tournamentsPage.unlimited'),
+            maxbet: wallet.casino.maxStake && wallet.casino.maxStake.amount ? wallet.casino.maxStake.amount.EUR : $_('tournamentsPage.unlimited')
+          }
+        }
+        if(wallet.sports){
+          productInfo['sports'] = {
+            name: 'Sports',
+            minbet: wallet.sports.minStake && wallet.sports.minStake.amount ? wallet.sports.minStake.amount.EUR : $_('tournamentsPage.unlimited'),
+            maxbet: wallet.sports.maxStake && wallet.sports.maxStake.amount ? wallet.sports.maxStake.amount.EUR : $_('tournamentsPage.unlimited')
+          }
+        }
+        tournamentProducts = productInfo;
+      }
+    }
+
+  const getData = (endpointURL: String, tourID: String) => {
+    let url = new URL(endpointURL + `/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 + `/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;
+    }
+  }
+
+  const matchStatus = () => {
+    if (tournamentDetails.state == 'Unstarted') {
+      shownStatus = $_('tournamentsPage.scheduled');
+    }
+
+    if (tournamentDetails.state == 'Running') {
+      shownStatus = $_('tournamentsPage.ongoing');
+    }
+
+    if (tournamentDetails.state == 'Closed' || tournamentDetails.state == 'Closing') {
+      shownStatus = $_('tournamentsPage.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);
+    initTabTitle()
+  }
+  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': $_('tournamentsPage.leaderBoard')}, window.location.href)
+    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'rules', 'text': $_('tournamentsPage.rules')}, window.location.href)
+    window.postMessage({type: 'TournamentsTabLocaleTextUpdate','state': 'games', 'text': $_('tournamentsPage.games')}, window.location.href)
+  }
+
+  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();
+  $: initialParameters = tourid && endpoint && session && lang;
+  $: initialParameters && initialLoad();
+  $: cmsendpoint && tourid && getDataFromCMS();
+  $: isMiniMode = (viewmode != 'desktop') && isMobile(userAgent); // forward this page from tournamentslider
+</script>
+
+{#if isLoading}
+  <p class="LoadingMessage" part="LoadingMessage">
+    {$_('tournamentsPage.loading')}
+  </p>
+{/if}
+{#if !isMiniMode}
+  <div class="TournamentsPage" part="TournamentsPage">
+    <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>{$_('tournamentsPage.back')}</p>
+        </div>
+        <!--<div class="NavButtons">
+          <div class="PrevButton">
+            <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>{$_('tournamentsPage.previous')}</p>
+          </div>
+          <div class="NextButton">
+            <p>{$_('tournamentsPage.next')}</p>
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+          </div>
+        </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}
+              {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"
+              >
+              </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}
+                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">
+    <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
+            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}
+                  {$_('tournamentsPage.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"
+          ></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"
+      ></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"
+        ></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="{tournamentDetails.minBetCount || $_('tournamentsPage.unlimited')}"
+                                             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"
+          ></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")}'>{$_('tournamentsPage.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")}'>{$_('tournamentsPage.forwardSports')}</span>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <div class="BottomButton" part="ThumbnailGotoTournamentsButton" on:click='{()=>{gotoFromTournamentsPage("MyTournaments")}}' >{$_('tournamentsPage.forwardMyTournaments')}</div>
+    </div>
+  </div>
+{/if}
+<style lang="scss">
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  *,
+  *::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: 420px;
+
+    &.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>