@everymatrix/casino-tournaments-controller 1.44.0 → 1.45.2

package/src/CasinoTournamentsController.svelte

@@ -1,527 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { getDevice } from 'rvhelper';
-  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
-  import { TRANSLATIONS } from './translations';
-  import { EventSourcePolyfill } from 'event-source-polyfill';
-
-  import '@everymatrix/casino-tournaments-filter-controller';
-  import '@everymatrix/casino-tournaments-list-controller';
-  import { isValidSession } from './util';
-
-  // 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 keepbrowsercontext:string = 'false';
-  export let sorttype: string = '';
-  export let sortorder: string = ''
-  export let starttimeafter: string = '' // start time after how many days
-  export let showanonymoustournaments: string = 'true'
-
-  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:EventSourcePolyfill;
-  let isLoadTriggered: boolean = false;
-  let clientTranslation: typeof TRANSLATIONS;
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  const setTranslationUrl = ():void => {
-    let url:string = translationurl;
-
-    fetch(url).then((res:any) => res.json())
-    .then((res) => {
-      clientTranslation = res;
-      Object.keys(res).forEach((item:any):void => {
-        addNewMessages(item, res[item]);
-      });
-    }).catch((err:any) => {
-      console.log(err);
-    });
-  }
-
-  const applyTranslation = (translation: any) => {
-    if(!translation) return;
-    Object.keys(translation).forEach((item:any):void => {
-      addNewMessages(item, translation[item]);
-    });
-  }
-
-  Object.keys(TRANSLATIONS).forEach((item:any) => {
-    addNewMessages(item, TRANSLATIONS[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);
-    }
-
-    if(e.data && e.data.type === 'TournamentThumbnailMounted'){
-      applyTranslation(clientTranslation);
-    }
-  }
-
-  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}/v1/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);
-
-    const filterOptions: any = {
-      StartTimeAfter: getStartTimeAfter(),
-    }
-
-    if(!isValidSession(session) && showanonymoustournaments === 'false'){
-      filterOptions.tags = 'no-role-set'
-    }
-
-    if (activeFilters.length > 0 && activeFilters[0] != 'All') {
-      filterOptions.state = activeFilters.map((item:any) => matchStatus(item)).join("|")
-    }
-
-    const filter = Object.keys(filterOptions).map(k => `${k}=${filterOptions[k]}`).join(',')
-    tournamentsUrl.searchParams.append('filter', filter);
-
-    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}/v1/tournaments/updates?${tournamentsSearchParams}`;
-    tournamentsUpdateEventSource = new EventSourcePolyfill(endpointURL, {headers: {'accept': 'text/event-stream','X-SessionId': session}});
-    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 (isValidSession(session)) {
-      isLoggedIn = true;
-      sessionID = session;
-    } else {
-      isLoggedIn = false;
-      sessionID = ''
-    }
-  }
-
-  // ensure multiple props (from session and others) change just trigger initialLoad only once
-  const shouldLoad = async () => {
-    if(!isLoadTriggered){
-      isLoadTriggered = true
-      await initialLoad()
-      isLoadTriggered = false
-    }
-  }
-
-  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
-
-        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();
-  $: userid && setPlayerID();
-  $: filters && setActiveFilters();
-  $: lang && setActiveLanguage();
-  $: translationurl && setTranslationUrl();
-  $: isMounted && initialLoad();
-
-  $: if(session === '' || session) setSession()
-  $: if(sessionID === '' || sessionID) shouldLoad()
-  $: if(endpoint && numberoftournaments && showmorestep && lang && showanonymoustournaments) shouldLoad()
-</script>
-
-<div bind:this={customStylingContainer}>
-  {#if hasErrors}
-    <p>{$_('500')}</p>
-    <p>{error}</p>
-  {:else}
-    <div class="TournamentsWrapper" part="TournamentsWrapper">
-      <div class="Tournaments" part="Tournaments">
-        <div class="FirstRow" part="FirstRow">
-          {#if filtersLoaded}
-            <casino-tournaments-filter-controller
-                    {clientstyling}
-                    {clientstylingurl}
-                    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">{$_('loading')}</p>
-            {:else}
-              <p class="NoTournaments" part="NoTournaments">{$_('noTournaments')}</p>
-            {/if}
-          {:else}
-            <casino-tournaments-list-controller
-                    {clientstyling}
-                    {clientstylingurl}
-                    userid={userid}
-                    numberoftournaments={numberoftournaments}
-                    loginurl={loginurl}
-                    loginevent={loginevent}
-                    registerurl={registerurl}
-                    registerevent={registerevent}
-                    {lang}
-                    {currency}
-                    {keepbrowsercontext}
-					session={session}
-					endpoint={endpoint}
-                    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">{$_('showMore')}</button>
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<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;
-
-
-
-  *,
-  *::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 {
-    min-height: 100vh;
-    background: $primary-background-color;
-    overflow-x: hidden;
-  }
-
-  .Tournaments {
-    color: $primary-font-color;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    margin: 0 auto;
-    max-width: 1300px;
-    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,62 +0,0 @@
-export const TRANSLATIONS = {
-  "en": {
-    "500": "500 - Internal server error",
-    "showMore": "Show more",
-    "loading": "Loading, please wait ...",
-    "noTournaments": "No tournaments found"
-  },
-  "hr": {
-    "500": "500 - Interna pogreška poslužitelja",
-    "showMore": "Prikaži više",
-    "loading": "Učitavanje, molimo pričekajte ...",
-    "noTournaments": "Nema pronađenih turnira"
-  },
-  "zh-hk": {
-    "500": "500內部服務器錯誤",
-    "showMore": "顯示更多",
-    "loading": "加載請稍候 ...",
-    "noTournaments": "沒有找到比賽"
-  },
-  "fr": {
-    "500": "500 - erreur de serveur interne",
-    "showMore": "Afficher plus",
-    "loading": "Chargement , veuillez patienter ...",
-    "noTournaments": "Aucun tournoi trouvé"
-  },
-  "ro": {
-    "500": "500 - Internal server error",
-    "showMore": "Mai mult",
-    "loading": "Se încarcă, asteptati ...",
-    "noTournaments": "Niciun turneu gasit"
-  },
-  "tr": {
-    "500": "500 - Dahili sunucu hatası",
-    "showMore": "Daha fazla göster",
-    "loading": "Yükleniyor, lütfen bekleyin ...",
-    "noTournaments": "Turnuva bulunamadı"
-  },
-  "el": {
-    "500": "500 - Σφάλμα Διακομιστή",
-    "showMore": "Περισσότερα",
-    "loading": "Φορτώνει, παρακαλούμε περιμένετε ...",
-    "noTournaments": "Δεν βρέθηκαν τουρνουά"
-  },
-  "es": {
-    "500": "500 - Error servidor interno",
-    "showMore": "Mostrar más",
-    "loading": "Cargando …",
-    "noTournaments": "No se encontraron Torneos"
-  },
-  "hu": {
-    "500": "500 - Belső szerver hiba",
-    "showMore": "Mutass többet",
-    "loading": "Betöltés, kérjük várjon...",
-    "noTournaments": "Verseny nem található"
-  },
-  "pt": {
-    "500": "Erro 500 - Erro interno do servidor",
-    "showMore": "Ver mais",
-    "loading": "Carregando, por favor espere ...",
-    "noTournaments": "Nenhum torneio encontrado"
-  }
-}

package/src/util.ts

@@ -1,2 +0,0 @@
-
-export const isValidSession = (session: string) => session.length > 0 && session != 'false'

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/*"]
-}