@everymatrix/casino-games-category-section 0.0.363 → 0.0.367

package/src/CasinoGamesCategorySection.svelte

@@ -1,962 +1,953 @@
-<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-winners';
-  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 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 enablecasinowinners:string = 'true';
-
-  export let tabsorder:string = '';
-  export let enableautoscroll:string = '';
-
-  export let once = true;
-  export let top = 0;
-  export let bottom = 0;
-  export let left = 0;
-  export let right = 0;
-
-  //CasinoWinners Widget
-  let periodrecent:string = 'Today';
-  let periodtop:string = 'Last7Days';
-  let numberusersrecent:string = '20';
-  let numberuserstop:string = '20';
-  let amountlimit:string = '1';
-  let isrecentavailable:string = 'true';
-  let istopavailable:string = 'true';
-  let defaultcurrency:string = 'EUR';
-  let winners: any[] = [];
-  let winnersType:string;
-  let isLoggedIn:boolean = false;
-  let userCurrency:string;
-
-  // 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 thumbnailContainer:Array<HTMLElement> = new Array(10000);
-  let intersectingIndexes:Object = {};
-  let visibilityconnect:string = '';
-  let hidden;
-  let visibilityChange;
-  let dataloaded;
-  let categoriesCache:Object = {};
-
-  let favoriteGamesData:any = {
-    items: [],
-    count: 0,
-    name: ''
-  };
-  /* End Lazy Loading */
-
-  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 url:any = 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;
-          }
-        }
-      }
-
-      if ( categoryId && Object.keys(categoriesCache).indexOf(categoryId) >= 0) {
-        
-        resolve(categoriesCache[categoryId]); 
-
-      } else { 
-        fetch(url)
-          .then((res:any) => res.json())
-          .then((categoryData:any) => {
-            dataloaded = true
-            hasErrors = false;
-            maxTotal = categoryData.games.total;
-
-            categoriesCache[categoryId] = categoryData;
-
-            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 '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);
-          });
-
-          showLoadCategory = true;
-          break;
-
-        // Start favorite category section
-        case 'UpdateCategoryFavoriteGames':
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-            if (!showFavGamesCategory) {
-              window.postMessage({ type: 'FavoriteUpdate' }, window.location.href);
-            } else if (!lobbyView && !mostPlayedScreen) {
-              window.postMessage({ type: 'CategoryUpdate', itemId: categoryid }, window.location.href);
-            }
-          }
-          break;
-
-        case 'ShowFavoriteSection':
-          let favGameArray;
-
-          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);
-    window.postMessage({ type: "SetSliderIndex", categoryData}, window.location.href);
-  }
-
-  const initialSetup = () => {
-    // Nothing to do here
-  }
-
-  const setClientStyling = () => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    setTimeout(() => { customStylingContainer.appendChild(sheet);});
-  }
-
-  const setClientStylingURL = () => {
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(new URL(clientstylingurl))
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        if (customStylingContainer) {
-          setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-        }
-      });
-  }
-
-  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);
-        }
-      });
-    }
-  }
-
-  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();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && 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}
-              ></casino-game-thumbnail>
-            {/each}
-          </ul>
-        {:else}
-          <p class="SearchWaiting" part="SearchWaiting">Waiting</p>
-        {/if}
-      </div>
-    {:else}
-      <div>
-        {#if categoryData}
-          {#if (enablecasinowinners === 'true') && lobbyView && categoryindex == '1'}
-            <div class="CasinoWinners">
-              <casino-winners
-                {session}
-                {periodrecent}
-                {periodtop}
-                {numberusersrecent}
-                {numberuserstop}
-                {amountlimit}
-                {lang}
-                {isrecentavailable}
-                {istopavailable}
-                {defaultcurrency}
-                {clientstyling}
-                {clientstylingurl}
-                {tabsorder}
-                {enableautoscroll}
-                {endpoint}
-              ></casino-winners>
-            </div>
-          {/if}
-          <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}
-                    ></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')}
-                </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}
-                            ></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}
-                          ></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;
-
-  .CasinoWinners {
-    background: transparent;
-    width: 100%;
-    min-height: 200px;
-  }
-  .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>
+<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-winners';
+  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 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 enablecasinowinners:string = 'true';
+
+  export let tabsorder:string = '';
+  export let enableautoscroll:string = '';
+
+  export let once = true;
+  export let top = 0;
+  export let bottom = 0;
+  export let left = 0;
+  export let right = 0;
+
+  //CasinoWinners Widget
+  let periodrecent:string = 'Today';
+  let periodtop:string = 'Last7Days';
+  let numberusersrecent:string = '20';
+  let numberuserstop:string = '20';
+  let amountlimit:string = '1';
+  let isrecentavailable:string = 'true';
+  let istopavailable:string = 'true';
+  let defaultcurrency:string = 'EUR';
+  let winners: any[] = [];
+  let winnersType:string;
+  let isLoggedIn:boolean = false;
+  let userCurrency:string;
+
+  // 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 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 */
+
+  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 url:any = 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) => {
+          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 '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);
+          });
+
+          showLoadCategory = true;
+          break;
+
+        // Start favorite category section
+        case 'UpdateCategoryFavoriteGames':
+          if (e.data.receivedFavoriteResults) {
+            favoriteGames = e.data.receivedFavoriteResults.items;
+            if (!showFavGamesCategory) {
+              window.postMessage({ type: 'FavoriteUpdate' }, window.location.href);
+            } else if (!lobbyView && !mostPlayedScreen) {
+              window.postMessage({ type: 'CategoryUpdate', itemId: categoryid }, window.location.href);
+            }
+          }
+          break;
+
+        case 'ShowFavoriteSection':
+          let favGameArray;
+
+          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);
+    window.postMessage({ type: "SetSliderIndex", categoryData}, window.location.href);
+  }
+
+  const initialSetup = () => {
+    // Nothing to do here
+  }
+
+  const setClientStyling = () => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    setTimeout(() => { customStylingContainer.appendChild(sheet);});
+  }
+
+  const setClientStylingURL = () => {
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(new URL(clientstylingurl))
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+        }
+      });
+  }
+
+  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);
+        }
+      });
+    }
+  }
+
+  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();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && 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}
+              ></casino-game-thumbnail>
+            {/each}
+          </ul>
+        {:else}
+          <p class="SearchWaiting" part="SearchWaiting">Waiting</p>
+        {/if}
+      </div>
+    {:else}
+      <div>
+        {#if categoryData}
+          {#if (enablecasinowinners === 'true') && lobbyView && categoryindex == '1'}
+            <div class="CasinoWinners">
+              <casino-winners
+                {session}
+                {periodrecent}
+                {periodtop}
+                {numberusersrecent}
+                {numberuserstop}
+                {amountlimit}
+                {lang}
+                {isrecentavailable}
+                {istopavailable}
+                {defaultcurrency}
+                {clientstyling}
+                {clientstylingurl}
+                {tabsorder}
+                {enableautoscroll}
+                {endpoint}
+              ></casino-winners>
+            </div>
+          {/if}
+          <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}
+                    ></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')}
+                </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}
+                            ></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}
+                          ></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;
+
+  .CasinoWinners {
+    background: transparent;
+    width: 100%;
+    min-height: 200px;
+  }
+  .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>