@everymatrix/casino-tournaments-controller 0.0.367 → 0.0.368

package/src/CasinoTournamentsController.svelte

@@ -1,427 +1,427 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TournamentsControllerTranslations } from './translations';
-  import { EventSourcePolyfill } from 'event-source-polyfill';
-
-  import '@everymatrix/casino-tournaments-filter-controller';
-  import '@everymatrix/casino-tournaments-list-controller';
-
-  // endpoint for NorWAy
-  export let session:string = '';
-  export let userid:string = '';
-  export let endpoint:string = '';
-  export let lang:string = 'en';
-  // number of default tournaments shown
-  export let numberoftournaments:string = '6';
-  // number of added elements to the list when showmore is clicked
-  export let showmorestep:string = '2';
-  export let filters:string = 'All';
-  export let loginevent:string = '';
-  export let registerevent:string = '';
-  export let loginurl:string = '';
-  export let registerurl:string = '';
-  export let currency:string = 'EUR';
-  export let containermaxwidth:string = '';
-  export let keepbrowsercontext:string = 'false';
-  export let sorttype: string = '';
-
-  // Variables of topics for communication
-  let hasErrors:boolean = false;
-  let error:string = '';
-  let isLoggedIn:boolean = false;
-  let sessionID:string = '';
-  let playerID:string = '';
-  let userAgent:string = window.navigator.userAgent;
-  let isLoading:boolean = true;
-  let filtersLoaded:boolean = false;
-  let startingTournamentUpdater:boolean = false;
-
-  let filtersArray = 'All,Scheduled,Ongoing,Finished';
-  let tournamentsNumber:number = 0;
-
-  // Default state
-  let tournamentsShownNumber:number = 6;
-  let allTournamentsShown:boolean = true;
-  let activeFilters:Array<string> = [];
-
-  let lastMonthDate:any = new Date();
-  let tournamentsSearchParams:string;
-  let tournamentsUpdateEventSource:any;
-
-  lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
-  lastMonthDate = lastMonthDate.toISOString().substring(0, 10);
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(TournamentsControllerTranslations).forEach((item:any) => {
-    addNewMessages(item, TournamentsControllerTranslations[item]);
-  });
-
-  const messageHandler = (e:any) => {
-    if (e.data && e.data.type === 'UserSessionID') {
-      isLoggedIn = true;
-      sessionID = e.data.session;
-      playerID = e.data.userid;
-
-      getData(endpoint, 0, tournamentsShownNumber);
-    }
-
-    if (e.data && e.data.type === 'TournamentsFiltersSelected') {
-      activeFilters = e.data.filters;
-
-      getData(endpoint, 0, tournamentsShownNumber);
-    }
-  }
-
-  const matchStatus = (status:string) => {
-    if (status == 'Scheduled') {
-      return 'Unstarted';
-    }
-
-    if (status == 'Ongoing') {
-      return 'Running';
-    }
-
-    return 'Closing|Closed';
-  }
-
-  const getData = async (url:string, offset:number, limit:number) => {
-    isLoading = true;
-    tournamentsNumber = 0;
-
-    const res = await fetcher(url, offset, limit)
-
-    setTimeout(() => {
-      window.postMessage({ type: 'TournamentList', tournamentList: res.items }, window.location.href);
-    }, 50)
-
-    isLoading = false;
-  }
-
-  const getDataWithoutfresh = async (url:string, offset:number, limit:number) => {
-    const res = await fetcher(url, offset, limit)
-
-    window.postMessage({ type: 'TournamentListShowMore', tournamentList: res.items }, window.location.href);
-  }
-
-  const fetcher = async (url:string, offset:number, limit:number) => {
-
-    let tournamentsUrl:URL = new URL(`${url}/tournaments`);
-    let reqHeaders:Headers = new Headers();
-
-    tournamentsUrl.searchParams.append('pagination', `offset=${offset},limit=${limit}`);
-    tournamentsUrl.searchParams.append('sortField', 'StartTime');
-    tournamentsUrl.searchParams.append('sortOrder', 'desc');
-    tournamentsUrl.searchParams.append('language', lang);
-
-
-    if (activeFilters.length > 0 && activeFilters[0] != 'All') {
-      let state = activeFilters.map((item:any) => matchStatus(item)).join("|");
-
-      tournamentsUrl.searchParams.append('filter', `state=${state},StartTimeAfter=${lastMonthDate}`);
-    } else {
-      tournamentsUrl.searchParams.append('filter', `StartTimeAfter=${lastMonthDate}`);
-    }
-
-    tournamentsUrl.searchParams.append('platform', getDevice(userAgent));
-
-    if(sorttype){
-      tournamentsUrl.searchParams.append('sortType', sorttype);
-    }
-
-    if (isLoggedIn) {
-      reqHeaders.append("X-SessionID", sessionID);
-    }
-
-    let requestOptions = {
-      method: 'GET',
-      headers: reqHeaders,
-      cache: 'no-cache'
-    };
-
-    return fetch(tournamentsUrl, requestOptions)
-      .then((res:any) => res.json())
-      .then((res:any) => {
-        tournamentsSearchParams = tournamentsUrl.searchParams.toString();
-
-          tournamentsNumber = res.total;
-
-          if (tournamentsShownNumber >= tournamentsNumber) {
-            allTournamentsShown = true;
-          } else {
-            allTournamentsShown = false;
-          }
-          if(!startingTournamentUpdater){
-            startupTouramentDataChangeListener();
-          }
-        return res
-    });
-  }
-  const tournamentsUpdateMessageHandler = (message: any)=>{
-    if(message.type != 'message'){
-      return;
-    }
-    let messageData = message.data;
-    if(messageData){
-      try{
-        let updateTourData = JSON.parse(messageData);
-        if(!updateTourData || !updateTourData.item){
-          return;
-        }
-        let updateInfo = updateTourData.item;
-        if(updateTourData.messageType == "TournamentUpdate"){
-          window.postMessage({type: 'UpdateTournamentView', tournamentData: updateInfo}, window.location.href);
-        }
-
-        if(updateTourData.messageType == 'TournamentRemove'){
-          //remove tournament from TournamentList by id
-          window.postMessage({ type: 'TournamentList', tournamentList: updateTourData.items }, window.location.href);
-        }
-      }catch(err){
-        console.error(err);
-      }
-    }
-  }
-  const startupTouramentDataChangeListener = ()=>{
-    startingTournamentUpdater = true;
-    setTimeout(()=>{
-      startingTournamentUpdater = false;//to make sure only one eventsource work at the same time when query parameter changed
-    }, 1000)
-    if(tournamentsUpdateEventSource){
-      tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
-      tournamentsUpdateEventSource.close();
-    }
-    let endpointURL:String = `${endpoint}/tournaments/updates?${tournamentsSearchParams}&XSessionId=${session}`;
-    if(!EventSource){
-      tournamentsUpdateEventSource = new EventSourcePolyfill(endpointURL, {headers: {'accept': 'text/event-stream'}});
-    }else{
-      tournamentsUpdateEventSource = new EventSource(endpointURL);
-    }
-    if(typeof(tournamentsUpdateEventSource) != "undefined"){
-      tournamentsUpdateEventSource.addEventListener('message', tournamentsUpdateMessageHandler);
-    }
-  }
-
-  const showMoreAction = async () => {
-    let previousNumber = tournamentsShownNumber
-
-    const _showmorestep = parseInt(showmorestep, 10);
-    tournamentsShownNumber += _showmorestep
-
-    window.postMessage({ type: 'TournamentsPagination', offset: 0, limit: tournamentsShownNumber }, window.location.href);
-
-    await getDataWithoutfresh(endpoint, previousNumber, _showmorestep)
-
-    if (tournamentsShownNumber >= tournamentsNumber) {
-      allTournamentsShown = true;
-    }
-  }
-
-  const checkAttrs = () => {
-    if (!endpoint) {
-      error = "Endpoint is missing! Please provide a valid endpointURL.";
-      hasErrors = true;
-
-      console.error(error);
-    }
-
-    if (!lang || lang.length != 2) {
-      error = "Language is missing! Please provide a valid language (alpha2code)";
-      hasErrors = true;
-
-      console.error(error);
-    }
-
-    return hasErrors;
-  }
-
-  const initialLoad = () => {
-    if (!checkAttrs()) {
-      tournamentsShownNumber = parseInt(numberoftournaments, 10);
-
-      setLocale(lang);
-
-      getData(endpoint, 0, tournamentsShownNumber);
-    }
-  }
-
-  const setActiveLanguage = ():void => {
-    setLocale(lang);
-  }
-
-  const setActiveFilters = () => {
-    activeFilters = filters.split(',');
-    filtersLoaded = true;
-  }
-
-  const setSession = () => {
-    if (session.length > 0 && session != 'false') {
-      isLoggedIn = true;
-      isLoading = true;
-      sessionID = session;
-    } else {
-      isLoggedIn = false;
-      initialLoad();
-    }
-  }
-
-  const setPlayerID = () => {
-    playerID = userid;
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      if(tournamentsUpdateEventSource){
-        tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
-      }
-    }
-  });
-
-  $: session && setSession();
-  $: userid && setPlayerID();
-  $: lang && setLocale(lang);
-  $: filters && setActiveFilters();
-  $: lang && setActiveLanguage();
-  $: initialParameters = endpoint && numberoftournaments && showmorestep && lang;
-  $: readyToLoad = session ? initialParameters && session : initialParameters;
-  $: readyToLoad && initialLoad();
-</script>
-
-{#if hasErrors}
-  <p>{$_('tournamentsController.500')}</p>
-  <p>{error}</p>
-{:else}
-  <div class="TournamentsWrapper" part="TournamentsWrapper">
-    <div class="Tournaments" style="max-width: {containermaxwidth}px;" part="Tournaments">
-      <div class="FirstRow" part="FirstRow">
-        {#if filtersLoaded}
-          <casino-tournaments-filter-controller
-                  filters={filtersArray}
-                  activefilters={filters}
-                  exportparts="FiltersController, MobileClass, Non-MobileClass/empty, Active, FilterButton, bi, bi-check, FiltersList, FiltersTitle, FiltersItem"
-          ></casino-tournaments-filter-controller>
-        {/if}
-      </div>
-      <div class="SecondRow" part="SecondRow">
-        {#if tournamentsNumber == 0}
-          {#if isLoading}
-            <p class="LoadingMessage" part="LoadingMessage">{$_('tournamentsController.loading')}</p>
-          {:else}
-            <p class="NoTournaments" part="NoTournaments">{$_('tournamentsController.noTournaments')}</p>
-          {/if}
-        {:else}
-          <casino-tournaments-list-controller
-                  session={session}
-                  userid={userid}
-                  numberoftournaments={numberoftournaments}
-                  endpoint={endpoint}
-                  loginurl={loginurl}
-                  loginevent={loginevent}
-                  registerurl={registerurl}
-                  registerevent={registerevent}
-                  {lang}
-                  {currency}
-                  {keepbrowsercontext}
-                  exportparts="Thumbnail, Status, Enrolled, CardImg, CardImgFinished, Details, Title, Date, ScoreCriteria, ScoreCriteriaP, ScoreCriteriaSpan, Games, GamesP, GamesAnchor, 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, JoinButtonSpan, JoinButtonSvg, JoinButtonSvgA, JoinButtonFullSize, spinner, DetailsLargeButton, ErrorText, TournamentList, StatusUnstarted, StatusRunning, StatusClosed, StatusClosing, TournamentPrizesIconSection, TournamentPrizesIconWrapper"
-          ></casino-tournaments-list-controller>
-        {/if}
-      </div>
-      {#if !allTournamentsShown}
-        <div class="ThirdRow" part="ThirdRow">
-          <div class="CenterButton" part="CenterButton">
-            <button class="ShowMoreButton" part="ShowMoreButton" on:click="{() => showMoreAction()}" title="Show More">{$_('tournamentsController.showMore')}</button>
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
-
-<style lang="scss">
-  $primary-background-color: var(--emfe-w-color-contrast, #07072A);
-  $font-stack: "Helvetica Neue", "Helvetica", sans-serif;
-  $primary-font-color: var(--emfe-w-color-white, #FFFFFF);
-  $primary-font-size: 1rem;
-
-  :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;
-  }
-
-  .ShowMoreButton {
-    background: var(--emfe-w-color-contrast, #07072A);
-    font-size: 18px;
-    width: 280px;
-    height: 60px;
-    text-align: center;
-    color: var(--emfe-w-color-green, #48952a);
-    border: solid var(--emfe-w-color-green, #48952a) 1px;
-    text-transform: uppercase;
-    margin-bottom: 20px;
-    cursor: pointer;
-  }
-
-  .ShowMoreButton:hover {
-    opacity: 0.7;
-  }
-
-  .TournamentsWrapper {
-    background: $primary-background-color;
-  }
-
-  .Tournaments {
-    color: $primary-font-color;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    margin: 0 auto;
-    padding: 24px 0;
-
-    @media screen and (max-width: 1300px) {
-      padding: 24px 2.4%;
-    }
-
-    .FirstRow {
-      width: 100%;
-      margin: 0 auto;
-    }
-
-    .SecondRow {
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    .ThirdRow {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .CenterButton {
-        padding-top: 20px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-      }
-    }
-  }
-
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { TournamentsControllerTranslations } from './translations';
+  import { EventSourcePolyfill } from 'event-source-polyfill';
+
+  import '@everymatrix/casino-tournaments-filter-controller';
+  import '@everymatrix/casino-tournaments-list-controller';
+
+  // endpoint for NorWAy
+  export let session:string = '';
+  export let userid:string = '';
+  export let endpoint:string = '';
+  export let lang:string = 'en';
+  // number of default tournaments shown
+  export let numberoftournaments:string = '6';
+  // number of added elements to the list when showmore is clicked
+  export let showmorestep:string = '2';
+  export let filters:string = 'All';
+  export let loginevent:string = '';
+  export let registerevent:string = '';
+  export let loginurl:string = '';
+  export let registerurl:string = '';
+  export let currency:string = 'EUR';
+  export let containermaxwidth:string = '';
+  export let keepbrowsercontext:string = 'false';
+  export let sorttype: string = '';
+
+  // Variables of topics for communication
+  let hasErrors:boolean = false;
+  let error:string = '';
+  let isLoggedIn:boolean = false;
+  let sessionID:string = '';
+  let playerID:string = '';
+  let userAgent:string = window.navigator.userAgent;
+  let isLoading:boolean = true;
+  let filtersLoaded:boolean = false;
+  let startingTournamentUpdater:boolean = false;
+
+  let filtersArray = 'All,Scheduled,Ongoing,Finished';
+  let tournamentsNumber:number = 0;
+
+  // Default state
+  let tournamentsShownNumber:number = 6;
+  let allTournamentsShown:boolean = true;
+  let activeFilters:Array<string> = [];
+
+  let lastMonthDate:any = new Date();
+  let tournamentsSearchParams:string;
+  let tournamentsUpdateEventSource:any;
+
+  lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
+  lastMonthDate = lastMonthDate.toISOString().substring(0, 10);
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(TournamentsControllerTranslations).forEach((item:any) => {
+    addNewMessages(item, TournamentsControllerTranslations[item]);
+  });
+
+  const messageHandler = (e:any) => {
+    if (e.data && e.data.type === 'UserSessionID') {
+      isLoggedIn = true;
+      sessionID = e.data.session;
+      playerID = e.data.userid;
+
+      getData(endpoint, 0, tournamentsShownNumber);
+    }
+
+    if (e.data && e.data.type === 'TournamentsFiltersSelected') {
+      activeFilters = e.data.filters;
+
+      getData(endpoint, 0, tournamentsShownNumber);
+    }
+  }
+
+  const matchStatus = (status:string) => {
+    if (status == 'Scheduled') {
+      return 'Unstarted';
+    }
+
+    if (status == 'Ongoing') {
+      return 'Running';
+    }
+
+    return 'Closing|Closed';
+  }
+
+  const getData = async (url:string, offset:number, limit:number) => {
+    isLoading = true;
+    tournamentsNumber = 0;
+
+    const res = await fetcher(url, offset, limit)
+
+    setTimeout(() => {
+      window.postMessage({ type: 'TournamentList', tournamentList: res.items }, window.location.href);
+    }, 50)
+
+    isLoading = false;
+  }
+
+  const getDataWithoutfresh = async (url:string, offset:number, limit:number) => {
+    const res = await fetcher(url, offset, limit)
+
+    window.postMessage({ type: 'TournamentListShowMore', tournamentList: res.items }, window.location.href);
+  }
+
+  const fetcher = async (url:string, offset:number, limit:number) => {
+
+    let tournamentsUrl:URL = new URL(`${url}/tournaments`);
+    let reqHeaders:Headers = new Headers();
+
+    tournamentsUrl.searchParams.append('pagination', `offset=${offset},limit=${limit}`);
+    tournamentsUrl.searchParams.append('sortField', 'StartTime');
+    tournamentsUrl.searchParams.append('sortOrder', 'desc');
+    tournamentsUrl.searchParams.append('language', lang);
+
+
+    if (activeFilters.length > 0 && activeFilters[0] != 'All') {
+      let state = activeFilters.map((item:any) => matchStatus(item)).join("|");
+
+      tournamentsUrl.searchParams.append('filter', `state=${state},StartTimeAfter=${lastMonthDate}`);
+    } else {
+      tournamentsUrl.searchParams.append('filter', `StartTimeAfter=${lastMonthDate}`);
+    }
+
+    tournamentsUrl.searchParams.append('platform', getDevice(userAgent));
+
+    if(sorttype){
+      tournamentsUrl.searchParams.append('sortType', sorttype);
+    }
+
+    if (isLoggedIn) {
+      reqHeaders.append("X-SessionID", sessionID);
+    }
+
+    let requestOptions = {
+      method: 'GET',
+      headers: reqHeaders,
+      cache: 'no-cache'
+    };
+
+    return fetch(tournamentsUrl, requestOptions)
+      .then((res:any) => res.json())
+      .then((res:any) => {
+        tournamentsSearchParams = tournamentsUrl.searchParams.toString();
+
+          tournamentsNumber = res.total;
+
+          if (tournamentsShownNumber >= tournamentsNumber) {
+            allTournamentsShown = true;
+          } else {
+            allTournamentsShown = false;
+          }
+          if(!startingTournamentUpdater){
+            startupTouramentDataChangeListener();
+          }
+        return res
+    });
+  }
+  const tournamentsUpdateMessageHandler = (message: any)=>{
+    if(message.type != 'message'){
+      return;
+    }
+    let messageData = message.data;
+    if(messageData){
+      try{
+        let updateTourData = JSON.parse(messageData);
+        if(!updateTourData || !updateTourData.item){
+          return;
+        }
+        let updateInfo = updateTourData.item;
+        if(updateTourData.messageType == "TournamentUpdate"){
+          window.postMessage({type: 'UpdateTournamentView', tournamentData: updateInfo}, window.location.href);
+        }
+
+        if(updateTourData.messageType == 'TournamentRemove'){
+          //remove tournament from TournamentList by id
+          window.postMessage({ type: 'TournamentList', tournamentList: updateTourData.items }, window.location.href);
+        }
+      }catch(err){
+        console.error(err);
+      }
+    }
+  }
+  const startupTouramentDataChangeListener = ()=>{
+    startingTournamentUpdater = true;
+    setTimeout(()=>{
+      startingTournamentUpdater = false;//to make sure only one eventsource work at the same time when query parameter changed
+    }, 1000)
+    if(tournamentsUpdateEventSource){
+      tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
+      tournamentsUpdateEventSource.close();
+    }
+    let endpointURL:String = `${endpoint}/tournaments/updates?${tournamentsSearchParams}&XSessionId=${session}`;
+    if(!EventSource){
+      tournamentsUpdateEventSource = new EventSourcePolyfill(endpointURL, {headers: {'accept': 'text/event-stream'}});
+    }else{
+      tournamentsUpdateEventSource = new EventSource(endpointURL);
+    }
+    if(typeof(tournamentsUpdateEventSource) != "undefined"){
+      tournamentsUpdateEventSource.addEventListener('message', tournamentsUpdateMessageHandler);
+    }
+  }
+
+  const showMoreAction = async () => {
+    let previousNumber = tournamentsShownNumber
+
+    const _showmorestep = parseInt(showmorestep, 10);
+    tournamentsShownNumber += _showmorestep
+
+    window.postMessage({ type: 'TournamentsPagination', offset: 0, limit: tournamentsShownNumber }, window.location.href);
+
+    await getDataWithoutfresh(endpoint, previousNumber, _showmorestep)
+
+    if (tournamentsShownNumber >= tournamentsNumber) {
+      allTournamentsShown = true;
+    }
+  }
+
+  const checkAttrs = () => {
+    if (!endpoint) {
+      error = "Endpoint is missing! Please provide a valid endpointURL.";
+      hasErrors = true;
+
+      console.error(error);
+    }
+
+    if (!lang || lang.length != 2) {
+      error = "Language is missing! Please provide a valid language (alpha2code)";
+      hasErrors = true;
+
+      console.error(error);
+    }
+
+    return hasErrors;
+  }
+
+  const initialLoad = () => {
+    if (!checkAttrs()) {
+      tournamentsShownNumber = parseInt(numberoftournaments, 10);
+
+      setLocale(lang);
+
+      getData(endpoint, 0, tournamentsShownNumber);
+    }
+  }
+
+  const setActiveLanguage = ():void => {
+    setLocale(lang);
+  }
+
+  const setActiveFilters = () => {
+    activeFilters = filters.split(',');
+    filtersLoaded = true;
+  }
+
+  const setSession = () => {
+    if (session.length > 0 && session != 'false') {
+      isLoggedIn = true;
+      isLoading = true;
+      sessionID = session;
+    } else {
+      isLoggedIn = false;
+      initialLoad();
+    }
+  }
+
+  const setPlayerID = () => {
+    playerID = userid;
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    return () => {
+      window.removeEventListener('message', messageHandler);
+      if(tournamentsUpdateEventSource){
+        tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
+      }
+    }
+  });
+
+  $: session && setSession();
+  $: userid && setPlayerID();
+  $: lang && setLocale(lang);
+  $: filters && setActiveFilters();
+  $: lang && setActiveLanguage();
+  $: initialParameters = endpoint && numberoftournaments && showmorestep && lang;
+  $: readyToLoad = session ? initialParameters && session : initialParameters;
+  $: readyToLoad && initialLoad();
+</script>
+
+{#if hasErrors}
+  <p>{$_('tournamentsController.500')}</p>
+  <p>{error}</p>
+{:else}
+  <div class="TournamentsWrapper" part="TournamentsWrapper">
+    <div class="Tournaments" style="max-width: {containermaxwidth}px;" part="Tournaments">
+      <div class="FirstRow" part="FirstRow">
+        {#if filtersLoaded}
+          <casino-tournaments-filter-controller
+                  filters={filtersArray}
+                  activefilters={filters}
+                  exportparts="FiltersController, MobileClass, Non-MobileClass/empty, Active, FilterButton, bi, bi-check, FiltersList, FiltersTitle, FiltersItem"
+          ></casino-tournaments-filter-controller>
+        {/if}
+      </div>
+      <div class="SecondRow" part="SecondRow">
+        {#if tournamentsNumber == 0}
+          {#if isLoading}
+            <p class="LoadingMessage" part="LoadingMessage">{$_('tournamentsController.loading')}</p>
+          {:else}
+            <p class="NoTournaments" part="NoTournaments">{$_('tournamentsController.noTournaments')}</p>
+          {/if}
+        {:else}
+          <casino-tournaments-list-controller
+                  session={session}
+                  userid={userid}
+                  numberoftournaments={numberoftournaments}
+                  endpoint={endpoint}
+                  loginurl={loginurl}
+                  loginevent={loginevent}
+                  registerurl={registerurl}
+                  registerevent={registerevent}
+                  {lang}
+                  {currency}
+                  {keepbrowsercontext}
+                  exportparts="Thumbnail, Status, Enrolled, CardImg, CardImgFinished, Details, Title, Date, ScoreCriteria, ScoreCriteriaP, ScoreCriteriaSpan, Games, GamesP, GamesAnchor, 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, JoinButtonSpan, JoinButtonSvg, JoinButtonSvgA, JoinButtonFullSize, spinner, DetailsLargeButton, ErrorText, TournamentList, StatusUnstarted, StatusRunning, StatusClosed, StatusClosing, TournamentPrizesIconSection, TournamentPrizesIconWrapper"
+          ></casino-tournaments-list-controller>
+        {/if}
+      </div>
+      {#if !allTournamentsShown}
+        <div class="ThirdRow" part="ThirdRow">
+          <div class="CenterButton" part="CenterButton">
+            <button class="ShowMoreButton" part="ShowMoreButton" on:click="{() => showMoreAction()}" title="Show More">{$_('tournamentsController.showMore')}</button>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style lang="scss">
+  $primary-background-color: var(--emfe-w-color-contrast, #07072A);
+  $font-stack: "Helvetica Neue", "Helvetica", sans-serif;
+  $primary-font-color: var(--emfe-w-color-white, #FFFFFF);
+  $primary-font-size: 1rem;
+
+  :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;
+  }
+
+  .ShowMoreButton {
+    background: var(--emfe-w-color-contrast, #07072A);
+    font-size: 18px;
+    width: 280px;
+    height: 60px;
+    text-align: center;
+    color: var(--emfe-w-color-green, #48952a);
+    border: solid var(--emfe-w-color-green, #48952a) 1px;
+    text-transform: uppercase;
+    margin-bottom: 20px;
+    cursor: pointer;
+  }
+
+  .ShowMoreButton:hover {
+    opacity: 0.7;
+  }
+
+  .TournamentsWrapper {
+    background: $primary-background-color;
+  }
+
+  .Tournaments {
+    color: $primary-font-color;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin: 0 auto;
+    padding: 24px 0;
+
+    @media screen and (max-width: 1300px) {
+      padding: 24px 2.4%;
+    }
+
+    .FirstRow {
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    .SecondRow {
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    .ThirdRow {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .CenterButton {
+        padding-top: 20px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+
+</style>