@everymatrix/casino-categories-slider 0.0.367 → 0.0.369

package/src/CasinoCategoriesSlider.svelte

@@ -1,309 +1,309 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount, tick } from "svelte";
-  import { getDevice, checkSession, platformFavorite } from 'rvhelper';
-
-  import type { CategoriesData, CategoriesItems } from './CasinoCategoriesSlider.types';
-
-  import '@everymatrix/casino-slider';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let lang:string = ''; // Language
-  export let userid:string = '';
-  export let session:string = ''; // Value for sessionID
-  export let mostplayed:string = ''; // True - add MostPlayed category in slider
-  export let mostplayedrounds:string = '';
-  export let favorites:string = ''; // True - add Favorites category in slider
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let containermaxwidth:string = '';
-  export let activecategory:string = '';
-  export let actionevent:string = '';
-  export let sessioncheck:string = '';
-  export let showsubgroups:string = '';
-
-  export let subgroups: string= '';
-
-  let identity:string = 'CasinoSliderData'
-
-  // Player logged-in/logged-out status & session
-  let sessionID:string = '';
-  let isLoggedIn:boolean = false;
-  let playerID:string = '';
-  let activeIndex:number = 0;
-
-  let isLoading:boolean = true;
-  let error:string;
-
-  let categories:Array<CategoriesItems> = [];
-  let hasErrors:boolean = false;
-  let userAgent = window.navigator.userAgent;
-  let favoritesTitle:HTMLElement;
-  let customStylingContainer:HTMLElement;
-  let reworkedFavoriteGamesCollection:any = {
-    items: []
-  };
-  let numberOfFavoredGames:number;
-  let favoritesAdded:boolean = false;
-  let mostPlayedAdded:boolean = false;
-  let favoritesLoaded:boolean = false;
-  let mostPlayedLoaded:boolean = false;
-  let categoriesLoaded:boolean = false;
-  let isLoadingMostPlayed:boolean = false;
-
-  $: numberOfFavoredGames = 0;
-
-  const messageHandler = (e:any):void => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'UpdateCategoryFavoriteGames':
-        case 'ShowFavoriteSection':
-          let platformSpecificFavoriteGames:any = {};
-          platformSpecificFavoriteGames = platformFavorite(e.data.receivedFavoriteResults.items, numberOfFavoredGames);
-          numberOfFavoredGames = platformSpecificFavoriteGames.length;
-          break;
-      }
-    }
-  }
-
-  const getMostPlayedGames = ():Promise<boolean> => {
-    if (mostplayed) {
-      let url:URL = new URL(`${endpoint}/player/${userid}/games/most-played`);
-
-      let device = getDevice(userAgent);
-
-      if (device) {
-        if (device === 'PC') {
-          url.searchParams.append('device', 'Desktop');
-        } else {
-          url.searchParams.append('device', 'Mobile');
-        }
-      } else {
-        url.searchParams.append('device', 'All');
-      }
-
-      url.searchParams.append('rounds', mostplayedrounds);
-
-      return new Promise((resolve, reject) => {
-        fetch(url.href)
-          .then((res:any) => res.json())
-          .then((data:any) => {
-            if (data.count == 0) {
-              resolve(false);
-            }
-            resolve(true);
-          }).catch((err:any) => {
-            console.error('err', err);
-            reject(false);
-          });
-      });
-    }
-  }
-
-  const addFavoritesCategory = ():void => {
-    if (favoritesAdded == false && favorites == 'true') {
-      categories.splice(1, 0, {
-        // @ts-ignore
-        id: 'FAVORITES',
-        name: 'Favorites',
-        href: '',
-        games: [],
-      });
-    }
-
-    favoritesAdded = true;
-    favoritesLoaded = true;
-  };
-
-  const addMostPlayedCategory = ():void => {
-    if (mostplayed) {
-      isLoadingMostPlayed = true;
-
-      getMostPlayedGames().then((display:boolean) => {
-        if (mostPlayedAdded == false && mostplayed == 'true' && display) {
-          categories.splice(2, 0, {
-            // @ts-ignore
-            id: 'MOSTPLAYED',
-            name: 'Most Played',
-            href: '',
-            games: [],
-            triggerFetch: false
-          });
-        }
-
-        isLoadingMostPlayed = false;
-        tick();
-
-        mostPlayedAdded = true;
-        mostPlayedLoaded = true;
-      });
-    }
-  }
-
-  const checkAttrs = ():boolean => {
-    if (!endpoint) {
-      error = "Endpoint is missing! Please provide a valid endpointURL.";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    if (!datasource) {
-      error = "Datasource is missing! Please provide a valid datasource.";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    if (!lang || lang.length < 2) {
-      error = "Language is missing! Please provide a valid language (alpha2code)";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    return hasErrors;
-  }
-
-  const checkIfLoaded = ():void => {
-    isLoading = !favoritesLoaded && !mostPlayedLoaded && !categoriesLoaded;
-  }
-
-  const initialLoad = ():void => {
-    if (!checkAttrs()) {
-      let url:any = new URL(`${endpoint}/casino/groups/${datasource}`);
-
-      url.searchParams.append('datasource', datasource);
-      url.searchParams.append('platform', getDevice(userAgent));
-      url.searchParams.append('language', lang);
-
-      fetch(url)
-        .then((res:any) => res.json())
-        .then((data:CategoriesData) => {
-          // filter type added to type
-          let arr = data.items.filter((item:any) => {
-            return item.games.total > 0;
-          });
-
-          categories = [];
-          categories = categories.concat(arr);
-
-          // @TODO Translation for lobby
-          categories.unshift({
-            // @ts-ignore
-            id: 'LOBBY',
-            name: 'Lobby',
-            href: '',
-            games: [],
-          });
-
-          isLoading = false;
-
-          window.postMessage({ type: 'CategoriesLoadedForSlider' }, window.location.href);
-        }, (err:any) => {
-          hasErrors = true;
-          console.error('There was an error while fetching the categories', err);
-        }).catch((err:any) => {
-          hasErrors = true;
-          console.error('There was an error while fetching the categories', err);
-        });
-    }
-  }
-
-  const setActiveCategory = ():void => {
-    activeIndex = categories.map((item) => item.id).indexOf(activecategory);
-  }
-
-  const setSession = ():void => {
-    if (sessioncheck == 'true') {
-      checkSession(endpoint, session).then((res:any) => {
-        sessionID = res.Guid;
-        playerID = res.UserID;
-        isLoggedIn = true;
-      }, (err:any) => {
-        isLoggedIn = false;
-        console.error('err on session', err);
-      });
-    } else {
-      sessionID = session;
-    }
-  }
-
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    let cssFile:HTMLElement = document.createElement('style');
-
-    let url = new URL(clientstylingurl);
-
-    fetch(url.href)
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-      });
-  }
-
-  const sendSliderData = (sliderData:any):void => {
-    window.postMessage({ type: 'SliderData', identity, data: categories }, window.location.href);
-  }
-
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    }
-  });
-
-  $: endpoint && datasource && lang && initialLoad();
-  $: !isLoading && activecategory && setActiveCategory();
-  $: session && endpoint && setSession();
-  $: session && favorites && !isLoading && addFavoritesCategory();
-  $: session && endpoint && userid && mostplayed && addMostPlayedCategory();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-</script>
-
-<div bind:this={customStylingContainer} part="CustomStylingContainer">
-  {#if isLoading || isLoadingMostPlayed}
-    <div class="CasinoCategoriesLoading" part="CasinoCategoriesLoading"></div>
-  {:else}
-    {#if hasErrors}
-      <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
-    {:else}
-      <div class="CasinoCategoriesContainer" part="CasinoCategoriesContainer">
-        <casino-slider {identity} favoritesnumber={numberOfFavoredGames} use:sendSliderData {showsubgroups} {clientstyling} {clientstylingurl} {containermaxwidth} activeindex={activeIndex} {actionevent} />
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>
-  :host {
-    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-
-  .CasinoCategoriesLoading {
-    height: 52px;
-  }
-
-  p {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    text-align: center;
-  }
-
-  .CasinoCategoriesContainer {
-    background: var(--emfe-w-color-black, #000000);
-  }
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { getDevice, checkSession, platformFavorite } from 'rvhelper';
+
+  import type { CategoriesData, CategoriesItems } from './CasinoCategoriesSlider.types';
+
+  import '@everymatrix/casino-slider';
+
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = ''; // Language
+  export let userid:string = '';
+  export let session:string = ''; // Value for sessionID
+  export let mostplayed:string = ''; // True - add MostPlayed category in slider
+  export let mostplayedrounds:string = '';
+  export let favorites:string = ''; // True - add Favorites category in slider
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+  export let containermaxwidth:string = '';
+  export let activecategory:string = '';
+  export let actionevent:string = '';
+  export let sessioncheck:string = '';
+  export let showsubgroups:string = '';
+
+  export let subgroups: string= '';
+
+  let identity:string = 'CasinoSliderData'
+
+  // Player logged-in/logged-out status & session
+  let sessionID:string = '';
+  let isLoggedIn:boolean = false;
+  let playerID:string = '';
+  let activeIndex:number = 0;
+
+  let isLoading:boolean = true;
+  let error:string;
+
+  let categories:Array<CategoriesItems> = [];
+  let hasErrors:boolean = false;
+  let userAgent = window.navigator.userAgent;
+  let favoritesTitle:HTMLElement;
+  let customStylingContainer:HTMLElement;
+  let reworkedFavoriteGamesCollection:any = {
+    items: []
+  };
+  let numberOfFavoredGames:number;
+  let favoritesAdded:boolean = false;
+  let mostPlayedAdded:boolean = false;
+  let favoritesLoaded:boolean = false;
+  let mostPlayedLoaded:boolean = false;
+  let categoriesLoaded:boolean = false;
+  let isLoadingMostPlayed:boolean = false;
+
+  $: numberOfFavoredGames = 0;
+
+  const messageHandler = (e:any):void => {
+    if (e.data) {
+      switch(e.data.type) {
+        case 'UpdateCategoryFavoriteGames':
+        case 'ShowFavoriteSection':
+          let platformSpecificFavoriteGames:any = {};
+          platformSpecificFavoriteGames = platformFavorite(e.data.receivedFavoriteResults.items, numberOfFavoredGames);
+          numberOfFavoredGames = platformSpecificFavoriteGames.length;
+          break;
+      }
+    }
+  }
+
+  const getMostPlayedGames = ():Promise<boolean> => {
+    if (mostplayed) {
+      let url:URL = new URL(`${endpoint}/player/${userid}/games/most-played`);
+
+      let device = getDevice(userAgent);
+
+      if (device) {
+        if (device === 'PC') {
+          url.searchParams.append('device', 'Desktop');
+        } else {
+          url.searchParams.append('device', 'Mobile');
+        }
+      } else {
+        url.searchParams.append('device', 'All');
+      }
+
+      url.searchParams.append('rounds', mostplayedrounds);
+
+      return new Promise((resolve, reject) => {
+        fetch(url.href)
+          .then((res:any) => res.json())
+          .then((data:any) => {
+            if (data.count == 0) {
+              resolve(false);
+            }
+            resolve(true);
+          }).catch((err:any) => {
+            console.error('err', err);
+            reject(false);
+          });
+      });
+    }
+  }
+
+  const addFavoritesCategory = ():void => {
+    if (favoritesAdded == false && favorites == 'true') {
+      categories.splice(1, 0, {
+        // @ts-ignore
+        id: 'FAVORITES',
+        name: 'Favorites',
+        href: '',
+        games: [],
+      });
+    }
+
+    favoritesAdded = true;
+    favoritesLoaded = true;
+  };
+
+  const addMostPlayedCategory = ():void => {
+    if (mostplayed) {
+      isLoadingMostPlayed = true;
+
+      getMostPlayedGames().then((display:boolean) => {
+        if (mostPlayedAdded == false && mostplayed == 'true' && display) {
+          categories.splice(2, 0, {
+            // @ts-ignore
+            id: 'MOSTPLAYED',
+            name: 'Most Played',
+            href: '',
+            games: [],
+            triggerFetch: false
+          });
+        }
+
+        isLoadingMostPlayed = false;
+        tick();
+
+        mostPlayedAdded = true;
+        mostPlayedLoaded = true;
+      });
+    }
+  }
+
+  const checkAttrs = ():boolean => {
+    if (!endpoint) {
+      error = "Endpoint is missing! Please provide a valid endpointURL.";
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(error);
+    }
+
+    if (!datasource) {
+      error = "Datasource is missing! Please provide a valid datasource.";
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(error);
+    }
+
+    if (!lang || lang.length < 2) {
+      error = "Language is missing! Please provide a valid language (alpha2code)";
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(error);
+    }
+
+    return hasErrors;
+  }
+
+  const checkIfLoaded = ():void => {
+    isLoading = !favoritesLoaded && !mostPlayedLoaded && !categoriesLoaded;
+  }
+
+  const initialLoad = ():void => {
+    if (!checkAttrs()) {
+      let url:any = new URL(`${endpoint}/casino/groups/${datasource}`);
+
+      url.searchParams.append('datasource', datasource);
+      url.searchParams.append('platform', getDevice(userAgent));
+      url.searchParams.append('language', lang);
+
+      fetch(url)
+        .then((res:any) => res.json())
+        .then((data:CategoriesData) => {
+          // filter type added to type
+          let arr = data.items.filter((item:any) => {
+            return item.games.total > 0;
+          });
+
+          categories = [];
+          categories = categories.concat(arr);
+
+          // @TODO Translation for lobby
+          categories.unshift({
+            // @ts-ignore
+            id: 'LOBBY',
+            name: 'Lobby',
+            href: '',
+            games: [],
+          });
+
+          isLoading = false;
+
+          window.postMessage({ type: 'CategoriesLoadedForSlider' }, window.location.href);
+        }, (err:any) => {
+          hasErrors = true;
+          console.error('There was an error while fetching the categories', err);
+        }).catch((err:any) => {
+          hasErrors = true;
+          console.error('There was an error while fetching the categories', err);
+        });
+    }
+  }
+
+  const setActiveCategory = ():void => {
+    activeIndex = categories.map((item) => item.id).indexOf(activecategory);
+  }
+
+  const setSession = ():void => {
+    if (sessioncheck == 'true') {
+      checkSession(endpoint, session).then((res:any) => {
+        sessionID = res.Guid;
+        playerID = res.UserID;
+        isLoggedIn = true;
+      }, (err:any) => {
+        isLoggedIn = false;
+        console.error('err on session', err);
+      });
+    } else {
+      sessionID = session;
+    }
+  }
+
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    let cssFile:HTMLElement = document.createElement('style');
+
+    let url = new URL(clientstylingurl);
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+      });
+  }
+
+  const sendSliderData = (sliderData:any):void => {
+    window.postMessage({ type: 'SliderData', identity, data: categories }, window.location.href);
+  }
+
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('message', messageHandler);
+    }
+  });
+
+  $: endpoint && datasource && lang && initialLoad();
+  $: !isLoading && activecategory && setActiveCategory();
+  $: session && endpoint && setSession();
+  $: session && favorites && !isLoading && addFavoritesCategory();
+  $: session && endpoint && userid && mostplayed && addMostPlayedCategory();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+</script>
+
+<div bind:this={customStylingContainer} part="CustomStylingContainer">
+  {#if isLoading || isLoadingMostPlayed}
+    <div class="CasinoCategoriesLoading" part="CasinoCategoriesLoading"></div>
+  {:else}
+    {#if hasErrors}
+      <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
+    {:else}
+      <div class="CasinoCategoriesContainer" part="CasinoCategoriesContainer">
+        <casino-slider {identity} favoritesnumber={numberOfFavoredGames} use:sendSliderData {showsubgroups} {clientstyling} {clientstylingurl} {containermaxwidth} activeindex={activeIndex} {actionevent} />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
+  .CasinoCategoriesLoading {
+    height: 52px;
+  }
+
+  p {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    text-align: center;
+  }
+
+  .CasinoCategoriesContainer {
+    background: var(--emfe-w-color-black, #000000);
+  }
+</style>