@everymatrix/casino-games-category-section 1.0.16 → 1.0.69

package/src/CasinoGamesCategorySection.svelte

@@ -1,967 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { platformFavorite, getDevice, isMobile } from 'rvhelper';
-  import { _, addNewMessages } from './i18n';
-  import type { CategoryData } from './CasinoGamesCategorySection.type';
-  import { GamesCategorySectionTranslations } from './translations';
-
-  import '@everymatrix/casino-game-thumbnail';
-
-  const MASONRY_CLASS_PREFIX = 'game-tile-';
-
-  export let categoryindex:string = '';
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let lang:string = ''; // Language
-  export let session:string = ''; // Value for sessionID
-  export let userid:string = ''; // Value for UserID;
-  export let favorites:string = '';
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-  export let translationUrl:string = '';
-  export let currency:string = '';
-
-  export let categoryid:string = '';
-  export let categorygames:number = 0;
-  export let livecasino:string = 'false';
-  export let visiblegames:string = '';
-  export let gamepagemodalurl:string = 'false';
-  export let integratedgameframedesktop:string = 'false';
-  export let integratedgameframemobile:string = 'false';
-
-  export let once = true;
-  export let top = 0;
-  export let bottom = 0;
-  export let left = 0;
-  export let right = 0;
-
-  // CasinoPage loading state
-  let isLoading:boolean = false;
-  let hasErrors:boolean = false;
-  let sessionID:string;
-  let playerID:string;
-
-  let lobbyView:boolean = true;
-
-  let userAgent = window.navigator.userAgent;
-
-  let operatorSpecifications:Object;
-  let categoryData:CategoryData;
-  let shownCategoryData = [];
-  let showLoadCategory:boolean = true;
-  let offset:number = 0;
-  let limit:number = 40;
-  let searched:boolean = false;
-  let recentSearched:boolean = false;
-  let scrollTop:boolean = false;
-  let searchItem:boolean = false;
-  let filteresPresent:boolean = false;
-  let showItems:boolean = true;
-
-  /* Start Lazy Loading */
-  let nativeLoading:boolean = true;
-  let intersecting:boolean = false;
-  let container:any;
-  let maxTotal:number;
-  let categoryName:HTMLElement;
-  let favoriteGames:Array<Object>;
-  let showFavGamesCategory:boolean = false;
-  let receivedFavoriteResults:Object;
-  let sessionId:string = '';
-  let userId:string = '';
-  let mostPlayedScreen:Boolean = false;
-  let customStylingContainer:HTMLElement;
-  let validObservers:boolean = false;
-  let lastPlayedScreen:boolean = false;
-
-  let thumbnailContainer:Array<HTMLElement> = new Array(10000);
-  let intersectingIndexes:Object = {};
-  let visibilityconnect:string = '';
-  let hidden;
-  let visibilityChange;
-  let dataloaded;
-
-  let favoriteGamesData:any = {
-    items: [],
-    count: 0,
-    name: ''
-  };
-  /* End Lazy Loading */
-
-  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(GamesCategorySectionTranslations).forEach((item) => {
-    addNewMessages(item, GamesCategorySectionTranslations[item]);
-  });
-
-  if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
-    hidden = 'hidden';
-    visibilityChange = 'visibilitychange';
-  } else if (typeof document.msHidden !== 'undefined') {
-    hidden = 'msHidden';
-    visibilityChange = 'msvisibilitychange';
-  } else if (typeof document.webkitHidden !== 'undefined') {
-    hidden = 'webkitHidden';
-    visibilityChange = 'webkitvisibilitychange';
-  }
-
-  // IntersectionObserver used for loading more games
-  let observer = new IntersectionObserver((entries) => {
-    entries.forEach(async (entry) => {
-      let gameid = entry.target.gameid; // eslint-disable-line
-      let index = entry.target.elems_index; // eslint-disable-line
-
-      if (entry.isIntersecting) {
-        if (index * 1.2 > limit ) {
-          loadMoreGames(categoryid);
-        }
-        intersectingIndexes[gameid] = 1;
-      } else {
-        intersectingIndexes[gameid] = 0;
-      }
-    });
-  });
-
-  // Start favored games section
-  const getFavoredGames = (url:string, sessionId:string, userId:string) => {
-    let options = {
-      method: "GET",
-      headers: {
-        'X-SessionID': sessionId,
-      }
-    };
-
-    return new Promise((resolve, reject) => {
-      fetch(url, options)
-        .then((res:any) => res.json())
-        .then((updatedArray:any) => {
-          if (updatedArray) {
-            favoriteGames = updatedArray.items;
-          } else {
-            favoriteGames = [];
-          }
-
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
-
-          let aux:any = shownCategoryData;
-
-          shownCategoryData = undefined;
-          shownCategoryData = aux;
-
-          resolve(favoriteGames);
-        }).catch((err:any) => {
-          console.error(err);
-
-          reject(err);
-        });
-      });
-  }
-
-  // @TODO categoryId type
-  const getData = (categoryId:any, offset:number, limit:number, filterArray:Array<Object> = []) => {
-    let categoryidparsed = '';
-    let url:any = '';
-
-    if((categoryid.match(/\$/g) || []).length > 1) {
-      categoryidparsed = categoryid.split('$').slice(0, 2).join('$');
-      url = new URL(`${endpoint}/casino/groups/${datasource}/${categoryidparsed}/subGroups`);
-    } else {
-      url = new URL(`${endpoint}/casino/groups/${datasource}/${categoryid}`);
-    }
-
-    let vendorFilters = JSON.parse(sessionStorage.getItem('vendorFiltersByCategory'));
-
-    return new Promise((resolve, reject) => {
-      url.searchParams.delete("pagination");
-      url.searchParams.append("expand", "games(vendor)");
-      url.searchParams.append("fields", "id,name,games");
-      url.searchParams.append("platform", getDevice(userAgent));
-      url.searchParams.append("pagination", `games(offset=${offset},limit=${limit})`);
-      url.searchParams.append('language', lang);
-
-      // if vendor filters are active, get filtered games
-      window.postMessage({ type: 'CategoryVendors', categoryid }, window.location.href);
-
-      if (vendorFilters) {
-        if (vendorFilters[categoryid]) {
-          if (vendorFilters[categoryid].length && lobbyView === false && showFavGamesCategory === false) {
-            let queryParamVendorId:string = '';
-
-            filteresPresent = true;
-            vendorFilters[categoryid].forEach(vendorId => {
-              queryParamVendorId = queryParamVendorId + (queryParamVendorId ? `, id=${vendorId}` : `id=${vendorId}`);
-            });
-
-            url.searchParams.append('filter', `games(vendor(${queryParamVendorId}))`);
-          } else {
-            filteresPresent = false;
-          }
-        }
-      }
-
-      fetch(url)
-        .then((res:any) => res.json())
-        .then((categoryData:any) => {
-
-          if((categoryid.match(/\$/g) || []).length > 1) {
-            categoryData = categoryData.items.filter(subcategory => {
-              if(subcategory.id == categoryid) return subcategory;
-            })[0];
-          }
-
-          dataloaded = true
-          hasErrors = false;
-          maxTotal = categoryData.games.total;
-
-          resolve(categoryData);
-        }, (err:any) => {
-          hasErrors = true;
-
-          console.error(err);
-
-          reject(err);
-        });
-    });
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data) {
-      switch(e.data.type) {
-        case 'MostPlayedData':
-          searched = false;
-          lobbyView = false;
-          showLoadCategory = false;
-          mostPlayedScreen = true;
-          shownCategoryData = e.data.mostPlayedGames;
-          categoryData = {
-            id: 'MOSTPLAYED',
-            name: 'Most Played Games',
-            games: {
-              count: e.data.mostPlayedGames.length,
-              total: e.data.mostPlayedGames.length,
-              items: e.data.mostPlayedGames
-            }
-          };
-          break;
-
-        case 'LastPlayedData':
-          searched = false;
-          lobbyView = false;
-          showLoadCategory = false;
-          mostPlayedScreen = false;
-          lastPlayedScreen = true;
-          shownCategoryData = e.data.lastPlayedGames;
-          categoryData = {
-            id: 'LASTPLAYED',
-            name: 'Last Played Games',
-            games: {
-              count: e.data.lastPlayedGames.length,
-              total: e.data.lastPlayedGames.length,
-              items: e.data.lastPlayedGames
-            }
-          };
-          break;
-
-        case 'CustomOperatorData':
-          operatorSpecifications = e.data.operatordetail;
-          break;
-
-        case "RecentSearchData":
-          searched = true;
-          mostPlayedScreen = false;
-          recentSearched = true;
-          if (e.data.searchData.length > 0) {
-            shownCategoryData = e.data.searchData;
-            showItems = true;
-            if (shownCategoryData) {
-              shownCategoryData.forEach((item:any) => {
-                item.isFavorite = checkFavorite(item.id);
-              });
-            }
-          } else {
-            shownCategoryData = [];
-            showItems = false;
-          }
-          break;
-
-        case 'OutOfRecentSearches':
-          searched = false;
-          recentSearched = false;
-          break;
-
-        case "SearchData":
-          searched = true;
-          mostPlayedScreen = false;
-          recentSearched = false;
-          shownCategoryData = e.data.searchData.items || [];
-          searchItem = true;
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-          }
-          if (shownCategoryData) {
-            shownCategoryData.forEach((item:any) => {
-              item.isFavorite = checkFavorite(item.id);
-            });
-          }
-          break;
-
-        case `CategoryData_${categoryid}`:
-          searched = false;
-          lobbyView = true;
-          showLoadCategory = true;
-          searchItem = false;
-          mostPlayedScreen = false;
-          validObservers = false;
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-          }
-
-          getData(e.data.categoryId, 0, e.data.visiblegames).then((res:any) => {
-            categoryData = res;
-            shownCategoryData = categoryData.games.items;
-            if(shownCategoryData) {
-              shownCategoryData.forEach((item:any) => {
-                item.isFavorite = checkFavorite(item.id);
-              });
-            }
-          });
-          break;
-
-        case 'CategoryChange':
-          limit = 20;
-          break;
-
-
-        case 'CategoryUpdate':
-          searched = false;
-          lobbyView = false;
-          searchItem = false;
-          mostPlayedScreen = false;
-          validObservers = true;
-          categoryid = e.data.itemId;
-          if (categoryid !== 'MOSTPLAYED') {
-            showLoadCategory = false;
-          }
-
-          getData(categoryid, 0, limit).then((res:any) => {
-            categoryData = res;
-            categoryData.games.items.forEach((item:any) => {
-              item.isFavorite = checkFavorite(item.id);
-            });
-            shownCategoryData = categoryData.games.items;
-            showLoadCategory = false;
-            // @TODO: replace this quick fix - when there are only a few category games, the view scrolls to the footer
-            if(shownCategoryData.length < 10) {
-              scrollTop = true;
-              setTimeout(() => {
-                window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
-              }, 500);
-            }
-          });
-          break;
-
-        case 'FavoriteUpdate':
-          mostPlayedScreen = false;
-          lobbyView = true;
-          shownCategoryData = categoryData.games.items;
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
-
-          break;
-
-        // Start favorite category section
-        case 'UpdateCategoryFavoriteGames':
-
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-            if(e.data.favStadalone) return;
-            if(showFavGamesCategory) {
-              if(!lobbyView && !mostPlayedScreen) {
-                window.postMessage({ type: 'CategoryUpdate', itemId: categoryid }, window.location.href);
-              }
-            } else {
-              window.postMessage({ type: 'FavoriteUpdate' }, window.location.href);
-            }
-          }
-          break;
-
-        case 'ShowFavoriteSection':
-          let favGameArray;
-          lobbyView = false;
-          if (e.data) {
-            favGameArray = e.data.receivedFavoriteResults.items;
-            if (favGameArray.length) {
-              favGameArray.forEach((item:any) => {
-                if (item.gameModel) {
-                  item.gameModel.isFavorite = item.gameModel ? true : false;
-                }
-              });
-            }
-            favoriteGamesData.items = platformFavorite(favGameArray, favoriteGamesData.items);
-            favoriteGamesData.name = "Favorites";
-            showFavGamesCategory = true;
-          }
-          break;
-          // End favorite category section
-
-        case 'UserSessionID':
-          sessionID = e.data.session;
-          playerID = e.data.userID;
-          if (favorites == 'true') {
-            if (playerID && playerID.length && sessionID && sessionID.length > 0) {
-              getFavoredGames(`${endpoint}/player/${playerID}/favorites/`, sessionID, playerID);
-            }
-          }
-
-          break;
-
-        default:
-          // do nothing
-          break;
-      }
-    }
-  }
-
-  // @TODO categoryId type fix
-  const loadMoreGames = (categoryId:any) => {
-    limit += 1;
-
-    if (limit <= maxTotal) {
-      getData(categoryId, offset, limit).then((res:any) => {
-        categoryData = res;
-        // @TODO categoryData type fix
-        /**
-         * This check is needed to prevent requests with less items
-         * that started before but ended after the last request to add items to list
-         * This could also use abort controller instead but refactoring is needed
-        */
-        if(categoryData.games.items.length > shownCategoryData.length){
-          shownCategoryData = categoryData.games.items;
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
-        }
-      });
-    }
-  }
-
-  const checkFavorite = (gameId:string) => {
-    if (favoriteGames) {
-      if (favoriteGames.findIndex(obj => obj.id == gameId) !== -1) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-
-    return false;
-  }
-
-  // @TODO categoryId type fix
-  const showCategory = (categoryId:any, categoryData:Object) => {
-    window.postMessage({ type: "CategoryChange", itemId: categoryId }, window.location.href);
-  }
-
-  const initialSetup = () => {
-    // Nothing to do here
-  }
-
-  const handleVisibilityChange = () => {
-    if (!document[hidden]) {
-      visibilityconnect = 'connect';
-    } else {
-      visibilityconnect = 'disconnect';
-    }
-  }
-
-  const setupObserver = () => {
-    if (validObservers) {
-      thumbnailContainer.forEach((item, index) => {
-        if (item) {
-          // Hack to make sure that I can identify the thumbnail index
-          item.elems_index = index;
-          observer.observe(item);
-        }
-      });
-    }
-  }
-  
-  const setClientStyling = ():void => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = ():void => {
-    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);
-      });
-  }
-
-  onMount(() => {
-    window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
-    window.addEventListener('message', messageHandler, false);
-    window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
-
-    return () => {
-      window.removeEventListener('message', messageHandler);
-      window.removeEventListener('visibilitychange', messageHandler);
-    }
-  });
-
-  $: dataloaded && thumbnailContainer && setupObserver();
-  $: lang && initialSetup();
-  $: translationUrl && setTranslationUrl();
-  $: clientstyling && customStylingContainer && setClientStyling();
-  $: clientstylingurl && customStylingContainer && setClientStylingURL();
-
-</script>
-<div class="CasinoGamesCategorySectionContainer" part="CasinoGamesCategorySectionContainer" bind:this={customStylingContainer}>
-  {#if hasErrors}
-    <!-- @TODO diversify error handling -->
-    {#if filteresPresent}
-      <p class="SearchLoading" part="SearchLoading">404 Error - No result found.</p>
-    {:else}
-      <p class="SearchLoading" part="SearchLoading">500 Error - Internal Server Error.</p>
-    {/if}
-  {:else}
-    {#if searched}
-      <div class="CasinoGamesContainer" part="CasinoGamesContainer">
-        <div class="CasinoGamesHeader Searched {isMobile(userAgent) ? 'CasinoGamesHeaderMobile' : ''}" part="CasinoGamesHeader Searched {isMobile(userAgent) ? 'CasinoGamesHeaderMobile' : ''}">
-          {#if recentSearched}
-            <h3 class="StatusText" part="StatusText">
-              {$_('gamesCategorySection.recentSearchedItems')}
-            </h3>
-          {:else}
-            {#if !shownCategoryData.length}
-            <h3 class="StatusText" part="StatusText">
-              {$_('gamesCategorySection.noResults')}
-            </h3>
-            {:else}
-              <h3 class="StatusText" part="StatusText">
-                {$_('gamesCategorySection.searchedItems')}
-              </h3>
-            {/if}
-          {/if}
-        </div>
-        {#if shownCategoryData}
-          {#if !showItems}
-            <p class="NoSearchResults NoRecentSearches NoRecentSearchesCenter {isMobile(userAgent) ? 'NoRecentSearchesMobile' : ''}" part="NoSearchResults NoRecentSearches NoRecentSearchesCenter {isMobile(userAgent) ? 'NoRecentSearchesMobile' : ''}">{$_('gamesCategorySection.noRecentSearch')}</p>
-          {/if}
-          <ul class="CasinoGamesGrid SearchedGamesGrid GamesListIncreasedGap" part="CasinoGamesGrid SearchedGamesGrid GamesListIncreasedGap">
-            {#each shownCategoryData as gameprops, index}
-              <casino-game-thumbnail
-                class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                session={session}
-                userid={userid}
-                lang={lang}
-                searchitem={searchItem}
-                favorites={favorites}
-                gamethumbnail={gameprops.thumbnail}
-                gamename={gameprops.name}
-                gamevendor={gameprops.vendor.name}
-                gameisnew={gameprops.isNew}
-                gamepopularity={gameprops.popularity}
-                gamecellsize={gameprops.cellSize}
-                gameid={gameprops.id}
-                gamefunmode={gameprops.hasFunMode}
-                gamefavorite={gameprops.isFavorite}
-                {currency}
-                livelobbyendpoint={gameprops.details ? gameprops.href : ''}
-                {clientstyling}
-                {clientstylingurl}
-                {endpoint}
-                {livecasino}
-                {gamepagemodalurl}
-                {integratedgameframedesktop}
-                {integratedgameframemobile}
-              ></casino-game-thumbnail>
-            {/each}
-          </ul>
-        {:else}
-          <p class="SearchWaiting" part="SearchWaiting">Waiting</p>
-        {/if}
-      </div>
-    {:else}
-      <div>
-        {#if categoryData}
-          <div class="CasinoGamesContainer" part="CasinoGamesContainer">
-            <div class="CasinoGamesHeader" part="CasinoGamesHeader">
-                <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
-                  {categoryData.name}
-                </h3>
-
-              {#if showLoadCategory}
-              <!-- svelte-ignore a11y-missing-attribute -->
-              <a class="CategoryNameLink" part="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
-                <span class="CategoryLoadMore" part="CategoryLoadMore">
-                  {$_('gamesCategorySection.viewAll')} ({categoryData.games.total})
-                </span>
-              </a>
-              {/if}
-            </div>
-            {#if shownCategoryData.length !== 0}
-              <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" part="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" bind:this={container}>
-                {#each shownCategoryData as gameprops, index}
-                  {#if intersecting || nativeLoading}
-                    <casino-game-thumbnail
-                      session={session}
-                      userid={userid}
-                      lang={lang}
-                      class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                      part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                      favorites={favorites}
-                      gamethumbnail={gameprops.thumbnail}
-                      gamename={gameprops.name}
-                      gamevendor={gameprops.vendor.name}
-                      gameisnew={gameprops.isNew}
-                      gamepopularity={gameprops.popularity}
-                      gamecellsize={gameprops.cellSize}
-                      gameid={gameprops.id}
-                      gamefunmode={gameprops.hasFunMode}
-                      gamefavorite={gameprops.isFavorite}
-                      bind:this={thumbnailContainer[index]}
-                      connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
-                      visibilityconnect={visibilityconnect}
-                      {currency}
-                      livelobbyendpoint={gameprops.details ? gameprops.href : ''}
-                      {clientstyling}
-                      {clientstylingurl}
-                      {endpoint}
-                      {livecasino}
-                      {gamepagemodalurl}
-                      {integratedgameframedesktop}
-                      {integratedgameframemobile}
-                    ></casino-game-thumbnail>
-                  {/if}
-                {/each}
-              </ul>
-            {:else}
-              <p class="NoSearchResults" part="NoSearchResults">You don't have any games in this category.</p>
-            {/if}
-          </div>
-        {:else if showFavGamesCategory}
-          <div class="CasinoGamesContainer" part="CasinoGamesContainer">
-            <div class="CasinoGamesHeader" part="CasinoGamesHeader">
-                <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
-                  {$_('gamesCategorySection.favorites')}
-                  <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
-                </h3>
-            </div>
-            <ul class="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''}  'GamesListIncreasedGap'}" part="{(favoriteGamesData.items.length != 0) ? 'CasinoGamesGrid' : ''}  'GamesListIncreasedGap'}" bind:this={container}>
-              {#if favoriteGamesData}
-                {#each favoriteGamesData.items as gameprops, index}
-                  {#if gameprops.gameModel}
-                    {#if gameprops.gameModel.isFavorite}
-                      {#if intersecting || nativeLoading}
-                        {#if isMobile(userAgent)}
-                          {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
-                            <casino-game-thumbnail
-                              class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                              part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                              session={session}
-                              userid={userid}
-                              lang={lang}
-                              favorites={favorites}
-                              gamethumbnail={gameprops.gameModel.thumbnail}
-                              gamename={gameprops.gameModel.name}
-                              gamevendor={gameprops.gameModel.vendor.name}
-                              gameisnew={gameprops.gameModel.isNew}
-                              gamepopularity={gameprops.gameModel.popularity}
-                              gamecellsize={gameprops.cellSize}
-                              gameid={gameprops.gameModel.id}
-                              gamefunmode={gameprops.gameModel.hasFunMode}
-                              gamefavorite={gameprops.gameModel.isFavorite}
-                              showfavoredcategory={showFavGamesCategory}
-                              connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
-                              visibilityconnect={visibilityconnect}
-                              {currency}
-                              livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
-                              {clientstyling}
-                              {clientstylingurl}
-                              {endpoint}
-                              {livecasino}
-                              {gamepagemodalurl}
-                              {integratedgameframedesktop}
-                              {integratedgameframemobile}
-                            ></casino-game-thumbnail>
-                          {/if}
-                        {:else if gameprops.gameModel.platform.includes("PC")}
-                          <casino-game-thumbnail
-                            class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                            part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
-                            session={session}
-                            userid={userid}
-                            lang={lang}
-                            favorites={favorites}
-                            gamethumbnail={gameprops.gameModel.thumbnail}
-                            gamename={gameprops.gameModel.name}
-                            gamevendor={gameprops.gameModel.vendor.name}
-                            gameisnew={gameprops.gameModel.isNew}
-                            gamepopularity={gameprops.gameModel.popularity}
-                            gamecellsize={gameprops.cellSize}
-                            gameid={gameprops.gameModel.id}
-                            gamefunmode={gameprops.gameModel.hasFunMode}
-                            gamefavorite={gameprops.gameModel.isFavorite}
-                            showfavoredcategory={showFavGamesCategory}
-                            connectlive={intersectingIndexes[gameprops.id] == 1 ? 'connect' : 'disconnect'}
-                            visibilityconnect={visibilityconnect}
-                            {currency}
-                            livelobbyendpoint={gameprops.gameModel.details ? gameprops.gameModel.launchUrl : ''}
-                            {clientstyling}
-                            {clientstylingurl}
-                            {endpoint}
-                            {livecasino}
-                            {gamepagemodalurl}
-                            {integratedgameframedesktop}
-                            {integratedgameframemobile}
-                          ></casino-game-thumbnail>
-                        {/if}
-                      {/if}
-                    {/if}
-                  {/if}
-                {:else}
-                  <p class="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}" part="NoFavoriteGames {isMobile(userAgent) ? 'NoFavoriteGamesMobile' : ''}">
-                    <svg version="1.1" class="UnfavoredIcon" part="UnfavoredIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50px" y="50px"
-              viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve"><path style="fill: white" d="M511.266,197.256c-1.764-5.431-6.458-9.388-12.108-10.209l-158.722-23.065L269.452,20.155
-              c-2.527-5.12-7.741-8.361-13.451-8.361c-5.709,0-10.924,3.242-13.451,8.361l-70.988,143.828L12.843,187.047
-              c-5.65,0.821-10.344,4.779-12.108,10.209c-1.765,5.43-0.293,11.391,3.795,15.376l114.848,111.955L92.27,482.67
-              c-0.965,5.627,1.349,11.315,5.968,14.67c4.618,3.355,10.74,3.798,15.797,1.142L256,423.846l141.961,74.637
-              c2.195,1.154,4.591,1.723,6.979,1.723c3.11,0,6.206-0.966,8.818-2.865c4.619-3.356,6.933-9.043,5.968-14.671L392.61,324.587
-              l114.86-111.954C511.559,208.647,513.031,202.686,511.266,197.256z M366.023,308.608c-3.536,3.446-5.15,8.412-4.314,13.278
-              l23.311,135.898l-122.038-64.162c-4.37-2.297-9.591-2.297-13.961,0l-122.045,64.163l23.304-135.9
-              c0.834-4.866-0.779-9.83-4.313-13.276l-98.731-96.244l136.445-19.829c4.886-0.71,9.108-3.778,11.294-8.205L256,60.685
-              l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
-                    <span class="NoFavoriteText NoFavoriteTextHighlight" part="NoFavoriteText NoFavoriteTextHighlight">{$_('gamesCategorySection.noFavoritesTitle')}</span>
-                    {#if isMobile(userAgent)}
-                      <span class="NoFavoriteText" part="NoFavoriteText">{$_('gamesCategorySection.noFavoritesMobile')}</span>
-                    {:else}
-                      <span class="NoFavoriteText" part="NoFavoriteText">{$_('gamesCategorySection.noFavorites')}</span>
-                    {/if}
-                  </p>
-                {/each}
-              {:else}
-                <p>{$_('gamesCategorySection.waiting')}</p>
-              {/if}
-            </ul>
-          </div>
-        {/if}
-      </div>
-    {/if}
-  {/if}
-</div>
-
-
-<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;
-    box-sizing: border-box;
-  }
-
-  $grid-gap: 16px;
-  $grid-cell-size: 192px;
-  $grid-cell-size-small: 110px;
-  $grid-cell-size-medium: 122px;
-
-  .CategoryName,
-  .StatusText {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 22px;
-    font-weight: 500;
-  }
-
-  .CategoryLoadMore {
-    font-size: 14px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-  }
-
-  .NoSearchResults {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    text-align: center;
-    width: 100%;
-    padding-left: 5px;
-    font-size: 16px;
-  }
-
-  .NoRecentSearches {
-    padding-bottom: 30px;
-  }
-
-  .NoRecentSearchesCenter {
-    text-align: center;
-  }
-
-  .NoFavoriteGames {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 20px;
-    height: 20vh;
-    .UnfavoredIcon {
-      width: 50px;
-      height: 50px;
-    }
-    .NoFavoriteText {
-      text-align: center;
-    }
-    .NoFavoriteTextHighlight {
-      font-weight: 600;
-      font-size: 18px;
-      padding: 15px 0;
-    }
-  }
-
-  .NoFavoriteGamesMobile {
-    height: 50vh;
-  }
-
-  .SearchWaiting {
-    grid-column: 1/-1;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 13px;
-    text-align: center;
-  }
-
-  .CasinoGamesHeader {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 5px 0;
-    margin-bottom: 16px;
-    .CategoryNameLink {
-      display: block;
-      cursor: pointer;
-    }
-
-    .CategoryLoadMore {
-      font-weight: normal;
-    }
-
-    &.Searched {
-      justify-content: center;
-    }
-  }
-
-  .CasinoGamesContainer {
-    width: 100%;
-    margin-top: 24px;
-    padding-bottom: 16px;
-  }
-
-  .CasinoGamesGrid {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size, 46%), 1fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size);
-    grid-auto-rows: $grid-cell-size;
-    grid-auto-columns: $grid-cell-size;
-    grid-auto-flow: row dense;
-
-    .game-tile-2x1 {
-      grid-row: span 2;
-
-      @media screen and (max-width: 375px) {
-        grid-row: span 1;
-      }
-    }
-
-    .game-tile-2x2 {
-      grid-row: span 2;
-      grid-column: span 2;
-
-      @media screen and (max-width: 375px) {
-        grid-row: span 1;
-        grid-column: span 1;
-      }
-    }
-
-    .game-tile-1x2 {
-      grid-column: span 2;
-
-      @media screen and (max-width: 375px) {
-        grid-column: span 1;
-      }
-    }
-
-    &.GamesListIncreasedGap {
-      gap: $grid-gap + 12;
-    }
-  }
-
-  @media screen and (max-width: 385px) {
-  .CasinoGamesGrid {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small, 46%), 1fr));
-    grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
-    grid-auto-rows: $grid-cell-size-small;
-    grid-auto-columns: $grid-cell-size-small;
-
-    &.GamesListIncreasedGap {
-      gap: $grid-gap;
-      }
-    }
-  }
-
-  @media screen and (max-width: 480px) {
-    .CasinoGamesGrid {
-      display: grid;
-      gap: $grid-gap;
-      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium, 46%), 1fr));
-      grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
-      grid-auto-rows: $grid-cell-size-medium;
-      grid-auto-columns: $grid-cell-size-medium;
-
-      &.GamesListIncreasedGap {
-        gap: $grid-gap;
-      }
-    }
-  }
-
-  @media screen and (min-width: 1100px) {
-    .CasinoGamesGrid {
-      grid-template-rows: repeat(auto-fill, 142px);
-      grid-auto-rows: 142px;
-    }
-  }
-
-  .SearchLoading {
-    display: block;
-    padding: 50px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-  }
-</style>