@everymatrix/casino-tournaments-controller 1.0.16 → 1.0.70

package/src/CasinoTournamentsController.svelte

@@ -1,498 +0,0 @@
-<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';
-  export let translationUrl:string = '';
-  // 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 = '';
-  export let sortorder: string = ''
-  export let starttimeafter: string = '' // start time after how many days 
-
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  export let delaybeforeload = 1000;//to avoid duplicate initload
-
-  // 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 customStylingContainer: HTMLElement;
-  let displayNone:boolean = false;
-
-  let filtersArray = 'All,Scheduled,Ongoing,Finished';
-  let tournamentsNumber:number = 0;
-
-  let isMounted = false;
-  // Default state
-  let tournamentsShownNumber:number = 6;
-  let allTournamentsShown:boolean = true;
-  let activeFilters:Array<string> = [];
-
-  let tournamentsSearchParams:string;
-  let tournamentsUpdateEventSource:any;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationUrl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-
-  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 getStartTimeAfter = () => {
-    
-    const dateStartTimeAfter = new Date();
-
-    if(starttimeafter){
-      dateStartTimeAfter.setDate(
-        dateStartTimeAfter.getDate() - Number(starttimeafter)
-      );
-    }else{
-      dateStartTimeAfter.setMonth(
-        dateStartTimeAfter.getMonth() - 1
-      );
-    }
-
-    return dateStartTimeAfter.toISOString().substring(0, 10);
-  }
-
-  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', 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=${getStartTimeAfter()}`);
-    } else {
-      tournamentsUrl.searchParams.append('filter', `StartTimeAfter=${getStartTimeAfter()}`);
-    }
-
-    tournamentsUrl.searchParams.append('platform', getDevice(userAgent));
-
-    if(sorttype){
-      tournamentsUrl.searchParams.append('sortType', sorttype);
-    }
-
-    if (isLoggedIn) {
-      reqHeaders.append("X-SessionID", sessionID);
-    }
-
-    let requestOptions: RequestInit = {
-      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(!isMounted) return false;
-    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;
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    displayNone = true;
-
-    let url:URL = new URL(clientstylingurl);
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        if (customStylingContainer) {
-          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
-          setTimeout(() => { displayNone = false; }, 500);
-        }
-      });
-}
-
-  onMount(() => {
-    setTimeout(()=>{
-      isMounted = true;
-    }, delaybeforeload);
-    window.addEventListener('message', messageHandler, false);
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      if(tournamentsUpdateEventSource){
-        tournamentsUpdateEventSource.removeEventListener('message', tournamentsUpdateMessageHandler);
-        tournamentsUpdateEventSource.close();
-      }
-    }
-  });
-
-  $: customStylingContainer && clientstyling && setClientStyling();
-  $: customStylingContainer && clientstylingurl && setClientStylingURL();
-  $: session && setSession();
-  $: userid && setPlayerID();
-  $: lang && setLocale(lang);
-  $: filters && setActiveFilters();
-  $: lang && setActiveLanguage();
-  $: translationUrl && setTranslationUrl();
-  $: initialParameters = endpoint && numberoftournaments && showmorestep && lang;
-  $: readyToLoad = session ? initialParameters && session : initialParameters;
-  $: readyToLoad && isMounted && initialLoad();
-</script>
-
-{#if hasErrors}
-  <p>{$_('tournamentsController.500')}</p>
-  <p>{error}</p>
-{:else}
-  <div bind:this={customStylingContainer} 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>

package/src/i18n.js

@@ -1,27 +0,0 @@
-import {
-  dictionary,
-  locale,
-  addMessages,
-  _
-} from 'svelte-i18n';
-
-function setupI18n({ withLocale: _locale, translations }) {
-  locale.subscribe((data) => {
-    if (data == null) {
-      dictionary.set(translations);
-      locale.set(_locale);
-    }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
-}
-
-function addNewMessages(lang, dict) {
-  addMessages(lang, dict);
-}
-
-function setLocale(_locale) {
-  locale.set(_locale);
-}
-
-export { _, setupI18n, addNewMessages, setLocale };

package/src/index.ts

@@ -1,4 +0,0 @@
-import CasinoTournamentsController from './CasinoTournamentsController.svelte';
-
-!customElements.get('casino-tournaments-controller') && customElements.define('casino-tournaments-controller', CasinoTournamentsController);
-export default CasinoTournamentsController;

package/src/translations.js

@@ -1,101 +0,0 @@
-export const TournamentsControllerTranslations = {
-  en: {
-    tournamentsController: {
-      500: '500 - Internal server error',
-      showMore: 'Show more',
-      Scheduled: 'Scheduled',
-      Ongoing: 'Ongoing',
-      Finished: 'Finished',
-      loading: 'Loading, please wait ...',
-      noTournaments: 'No tournaments found'
-    }
-  },
-  zh: {
-    tournamentsController: {
-      500: '500內部服務器錯誤',
-      showMore: '顯示更多',
-      Scheduled: '預定的',
-      Ongoing: '進行中',
-      Finished: '完成的',
-      loading: '加載請稍候 ...',
-      noTournaments: '沒有找到比賽'
-    }
-  },
-  fr: {
-    tournamentsController: {
-      500: '500 - erreur de serveur interne',
-      showMore: 'Afficher plus',
-      Scheduled: 'Programmé',
-      Ongoing: 'En cours',
-      Finished: 'Fini',
-      loading: 'Chargement , veuillez patienter ...',
-      noTournaments: 'Aucun tournoi trouvé'
-    }
-  },
-  ro: {
-    tournamentsController: {
-      500: '500 - Internal server error',
-      showMore: 'Mai mult',
-      Scheduled: 'Programate',
-      Ongoing: 'În desfășurare',
-      Finished: 'Finalizat',
-      loading: 'Se încarcă, asteptati ...',
-      noTournaments: 'Niciun turneu gasit'
-    }
-  },
-  tr: {
-    tournamentsController: {
-      500: '500 - Dahili sunucu hatası',
-      showMore: 'Daha fazla',
-      Scheduled: 'Planlanmış',
-      Ongoing: 'Devam Eden',
-      Finished: 'Sona Ermiş',
-      loading: 'Yükelniyor, lütfen bekleyin ...',
-      noTournaments: 'Herhangi bir turnuva bulunamadı.'
-    }
-  },
-  el: {
-    tournamentsController: {
-      500: '500 - Σφάλμα Διακομιστή',
-      showMore: 'Περισσότερα',
-      Scheduled: 'Προγραμματισμένα',
-      Ongoing: 'Τρέχοντα',
-      Finished: 'Ολοκληρωμένα',
-      loading: 'Φορτώνει, παρακαλούμε περιμένετε ...',
-      noTournaments: 'Δεν βρέθηκαν τουρνουά'
-    }
-  },
-  es: {
-    tournamentsController: {
-      500: '500 - Error interno del servidor',
-      showMore: 'Mostrar más',
-      Scheduled: 'Programado',
-      Ongoing: 'En marcha',
-      Finished: 'Terminado',
-      loading: 'cargando, por favor espere…',
-      noTournaments: 'No se han encontrado torneos',
-    }
-  },
-  hu: {
-    tournamentsController: {
-      500: '500 - Belső szerver hiba',
-      showMore: 'Mutass többet',
-      Scheduled: 'Ütemezés',
-      Ongoing: 'Folyamatban',
-      Finished: 'Befejezett',
-      loading: 'Betöltés, kérjük várjon...',
-      noTournaments: 'Verseny nem található',
-    }
-  },
-  pt: {
-    tournamentsController: {
-      500: 'Erro 500 - Erro interno do servidor',
-      showMore: 'Ver mais',
-      Scheduled: 'Agendado',
-      Ongoing: 'Em progresso',
-      Finished: 'Finalizado',
-      loading: 'Carregando, por favor espere ...',
-      noTournaments: 'Nenhum torneio encontrado'
-    }
-  }
-};

package/stories/CasinoTournamentsController.stories.js

@@ -1,13 +0,0 @@
-import { html } from 'lit-element';
-
-import CasinoTournamentsController from '../src/CasinoTournamentsController';
-
-// This default export determines where your story goes in the story list
-export default {
-  title: 'CasinoTournamentsController',
-};
-
-// 👇 We create a “template” of how args map to rendering
-const CasinoTournamentsController = ({ aProperty }) => html`<casino-tournaments-controller></casino-tournaments-controller>`;
-
-export const FirstStory = CasinoTournamentsController.bind({});

package/svelte.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-  svelte: {
-    "language-server": {
-      runtime: `sass`
-    }
-  }
-}

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}