@everymatrix/casino-page 0.0.365 → 0.0.367

package/src/CasinoPage.svelte

@@ -1,1720 +1,1720 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { isMobile, getDevice } from 'rvhelper';
-  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
-  import { CasinoPageTranslations } from './translations';
-  import type {
-    CategoriesData,
-    CasinoData,
-    CategoriesItems,
-    CasinoItems,
-  } from './CasinoPage.types';
-
-  import '@everymatrix/casino-games-category-section';
-  import '@everymatrix/casino-random-game';
-  import '@everymatrix/jackpot-banner';
-
-  export let endpoint:string = '';
-  export let datasource:string = '';
-  export let currency:string = '';
-  export let lang:string = ''; // Language
-  export let session:string = ''; // Value for sessionID
-  export let userid:string = ''; // Value for UserID;
-  export let clientstyling:string = '';
-  export let clientstylingurl:string = '';
-
-  export let categorybackground:string = '';
-  export let visiblegames:string;
-  export let alternativesearch:string = 'false';
-  export let favorites:string = '';
-  export let mostplayed:string = '';
-  export let containermaxwidth:string = '1300';
-  export let lobbyid:string = 'casinodefault'; // identifier for recent searched
-  export let haspanicbutton:string = 'false';
-
-  export let mostplayedrounds:string = '';
-  export let activecategory:string = '';
-  export let livecasino:string = 'false';
-  export let playrandomgame:string = 'false';
-  export let gamepagemodalurl:string = 'false';
-  export let enablecasinowinners:string = 'true';
-  export let enablejackpotbanner:string = 'true';
-
-  export let tabsorder:string = '';
-  export let enableautoscroll:string = '';
-  export let istopavailable:string = '';
-  export let isrecentavailable:string = '';
-
-  // Button icon for random game widget
-  export let randombuttonicon:string = '';
-
-  let userAgent:any = window.navigator.userAgent;
-  let gameevent:string;
-
-  if (!isMobile(userAgent)) {
-    gameevent = 'ShowGameModal';
-  } else {
-    gameevent = 'OpenGameFrame';
-  }
-
-  // CasinoPage loading state
-  let isLoading:boolean = false;
-  let hasErrors:boolean = false;
-  let isLoggedIn:boolean = false;
-  let error:string = '';
-
-  let playerID:string;
-  let sessionID:string;
-
-  let panicButton:HTMLElement;
-  let panicLoading:boolean = false;
-  let timer: number = 0;
-  let timerInterval:any;
-
-  // CasinoPage state
-  let favoritesScreen:boolean = false;
-  let recentSearches:boolean = false;
-  let initialLoaded:boolean = true;
-  let searched:boolean = false;
-  let gameFocus:boolean = false;
-  let lobbyViewAux:boolean = false;
-  let closeSearch:boolean = false;
-  let searchFocus:boolean = false;
-  let lobbyScreen:boolean = true;
-  let mostPlayedScreen:boolean = false;
-  let mostPlayedEmpty:boolean = false;
-  let adjustingScroll:boolean = false;
-  let searchBarCleared:boolean = true;
-
-  // Needs to be checked if there are relevant
-  let gamesArray = [];
-  let searchArray:Array<CasinoItems>;
-  let categories:Array<CategoriesItems> = [];
-  let shownCategories:Array<CategoriesItems> = [];
-  let activeCategory:string;
-
-  let searchValue:string = '';
-  let searchWrapper:HTMLElement;
-  let searchElementWrapper:HTMLElement;
-  let searchPositionTop:number;
-  let searchedGamesCache:Object = {};
-
-  // const scrollOffset:number = getDevice(userAgent) !== 'PC' ? operatorDetail.scrollOffset[0] : operatorDetail.scrollOffset[1];
-  const scrollOffset:number = 0;
-
-  let scrollTop:boolean = false;
-  let mostPlayedGames:Array<any> = [];
-
-  let favoredGamesCollection:Array<string> = [];
-  let categoriesData;
-  let receivedFavoriteResults:Object;
-  let updatedFavoriteResultsIds:Array<string>;
-  let searchElement:HTMLElement;
-  let mobileSearchViewActive:boolean = false;
-  let searchedValues:any = [];
-  let mostPlayedValues:any = [];
-  let filterVendorsArray:Array<Object> = [];
-  let numberOfFilters:number = 0;
-  let filteredGamesArray:Array<Object> = [];
-  let currentCategoryId:string = '';
-  let activeCategoryAux:any = undefined;
-  let customStylingContainer:HTMLElement;
-  let urlCasino:any;
-  let firstLoad:boolean = false;
-
-
-  setupI18n({ withLocale: 'en', translations: {}});
-
-  Object.keys(CasinoPageTranslations).forEach((item) => {
-    addNewMessages(item, CasinoPageTranslations[item]);
-  });
-
-  const CategoryChangeHandler = (categoryEvent:any) => {
-    searched = false;
-    searchValue = '';
-    scrollTop = true;
-    // needs to be executed after the page has been populated
-    setTimeout(() => {
-      window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
-    });
-    switch(categoryEvent.data.itemId) {
-      case 'LOBBY':
-        lobbyScreen = true;
-        favoritesScreen = false;
-        activeCategory = '';
-        mostPlayedScreen = false;
-        break;
-
-      case 'FAVORITES':
-        lobbyScreen = false;
-        favoritesScreen = true;
-        mostPlayedScreen = false;
-        activeCategory = '';
-        break;
-
-      case 'MOSTPLAYED':
-        if (mostplayed == 'true') {
-          isLoading = true;
-
-          getMostPlayedGames({
-            limit: 100,
-            device: getDevice(userAgent),
-            rounds: 10
-          }).then((res:any) => {
-            isLoading = false;
-
-            if (res.count > 0) {
-              let promises:any = [];
-
-              res.items.forEach((item:any) => {
-                let url:URL = new URL(`${endpoint}/casino/games/${item.gameId}`);
-
-                url.searchParams.append('datasource', datasource);
-                if (livecasino) {
-                  promises.push(fetch(url.href).then((res:any) => res.json()));
-                } else {
-                  promises.push(fetch(url.href).then((res:any) => res.json()));
-                }
-              });
-
-              Promise.all(promises).then((values:any) => {
-                mostPlayedGames = values.map((item:any) => item[0]);
-
-                window.postMessage({ type: 'MostPlayedData', mostPlayedGames }, window.location.href);
-              });
-            } else {
-              mostPlayedEmpty = true;
-            }
-          });
-
-          activeCategory = '';
-          lobbyScreen = false;
-          favoritesScreen = false;
-          mostPlayedScreen = true;
-        }
-      break;
-
-      default:
-        lobbyScreen = false;
-        favoritesScreen = false;
-        mostPlayedScreen = false;
-        activeCategory = categoryEvent.data.itemId;
-        //@TODO: if we remove the settimeout, the postmessage does not execute, at all - weird behaviour
-        setTimeout(() => {
-          window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory }, window.location.href);
-        }, 500);
-
-
-        break;
-    }
-  }
-
-  const messageHandler = (e:any) => {
-    if (e.data) {
-      switch(e.data.type) {
-        // @TODO: removed and tested, but kept in case unforeseen issues occur - reason: multiple calls on category change
-        // case 'CategoryChange':
-        //   CategoryChangeHandler(e);
-        //   break;
-
-        case 'UserSessionID':
-          sessionID = e.data.session;
-          playerID = e.data.userID;
-
-          if (playerID && playerID.length && sessionID && sessionID.length > 0) {
-            getFavoredGames(endpoint, sessionID, playerID);
-          }
-          break;
-
-        // @TODO dis should be removed
-        case 'CategoriesLoadedForSlider':
-          window.postMessage({ type: 'SetSliderIndex', index: 0, categoryData: { id: 'LOBBY' } }, window.location.href);
-          break;
-
-        case 'SetUnfavoredGame':
-          removeFavoredGame(`${endpoint}/player/${playerID}/favorites`, sessionID, playerID, e.data.id, e.data.triggerFactor);
-          break;
-
-        case 'SetFavoredGame':
-          addFavoredGame(`${endpoint}/player/${playerID}/favorites`, sessionID, playerID, e.data.id, e.data.triggerFactor);
-          break;
-
-        case 'GetFavoredGame':
-          if (playerID && playerID.length && sessionID && sessionID.length > 0) {
-            getFavoredGames(endpoint, sessionID, playerID);
-          }
-          break;
-
-        case 'SearchedItemClicked':
-          addSearchedItem(e.data.gameId);
-          break;
-
-        case 'UpdateFilters':
-          updateFilters(e.data.vendorsArray);
-          setFilterNumberValue();
-          break;
-
-        case 'ClearFilters':
-          submitFilters(e.data.vendorsArray);
-          setFilterNumberValue();
-          break;
-
-        case 'ApplyFilters':
-          window.postMessage({ type: 'CategoryUpdate', itemId: currentCategoryId }, window.location.href);
-          setFilterNumberValue();
-          break;
-
-        case 'CategoryVendors':
-          currentCategoryId = e.data.categoryid;
-          setFilterNumberValue();
-          break;
-
-        case 'GameHovered':
-          gameFocus = true;
-          break;
-
-        case 'GameBlur':
-          gameFocus = false;
-          break;
-
-        default:
-          // Nothing to do here
-          break;
-      }
-    }
-  }
-
-  const getMostPlayedGames = (options:any) => {
-    let url = new URL(`${endpoint}/player/${playerID}/games/most-played`);
-
-    if (options.limit) {
-      url.searchParams.append('limit', options.limit);
-    }
-
-    if (options.order) {
-      url.searchParams.append('order', options.order);
-    }
-
-    let device = options.device;
-
-    if (device) {
-      if (device === 'PC') {
-        url.searchParams.append('device', 'Desktop');
-      } else {
-        url.searchParams.append('device', 'Mobile');
-      }
-    } else {
-      url.searchParams.append('device', 'All');
-    }
-
-    if (options.rounds) {
-      url.searchParams.append('rounds', options.rounds);
-    }
-
-    urlCasino = livecasino ? url : url.href;
-    return new Promise((resolve, reject) => {
-      fetch(urlCasino)
-        .then((res:any) => res.json())
-        .then((data:any) => {
-          resolve(data);
-
-          window.postMessage({ type: 'AddNewCategory', category: { name: 'Most Played', id: 'MOSTPLAYED' }}, window.location.href);
-          window.postMessage({ type: 'MostPlayedGames', data }, window.location.href);
-        }).catch((err:any) => {
-          console.error(err);
-
-          reject(err);
-        });
-    });
-  }
-
-  //
-  // --- START of Favorites section
-  //
-  let getFavoredGames = (url:string, sessionID:string, playerID:string) => {
-    if (favorites == 'true') {
-      if (session && playerID) {
-        let options = {
-          method: "GET",
-          headers: {
-            'X-SessionID': sessionID,
-          }
-        };
-
-        fetch(`${url}/player/${playerID}/favorites/`, options)
-          .then((res:any) => res.json())
-          .then((updatedArray:Object) => {
-            receivedFavoriteResults = updatedArray;
-
-            if (receivedFavoriteResults) {
-              window.postMessage({ type: "UpdateCategoryFavoriteGames", receivedFavoriteResults }, window.location.href);
-
-              updatedFavoriteResultsIds = getGamesIds(receivedFavoriteResults.items);
-            }
-
-            return receivedFavoriteResults;
-          }).then((favResults) => {
-            if (favoritesScreen) {
-              showFavoriteGames();
-            }
-            return favResults;
-          }).catch((err:any) => {
-            console.error(err);
-          });
-      }
-    }
-  }
-
-  let updateFavoredList = (url:string, sessionID:string, playerID:string) => {
-    let options = {
-      method: "GET",
-      headers: {
-        'X-SessionID': sessionID,
-      }
-    };
-
-    fetch(url, options)
-      .then((res:any) => res.json())
-      .then((updatedArray:Object) => {
-        receivedFavoriteResults = updatedArray;
-
-        if (favoritesScreen) {
-          showFavoriteGames();
-        }
-
-        if (receivedFavoriteResults) {
-          window.postMessage({ type: "UpdateCategoryFavoriteGames", receivedFavoriteResults}, window.location.href);
-        }
-
-        return receivedFavoriteResults;
-      }).catch((err:any) => {
-        console.error(err);
-      });
-  }
-
-  const getGamesIds = (favoritesArray:any = []) => {
-    // construct favorite array used to check if game id is not already present in fav list
-    favoredGamesCollection = [];
-
-    if (favoritesArray.length > 0) {
-      favoritesArray.forEach((fav:any) => {
-        favoredGamesCollection.push(fav.id);
-      });
-    }
-
-    return favoredGamesCollection;
-  }
-
-  let addFavoredGame = (url:string, sessionID:string, playerID:string, gameID:string, triggerFactor:string) => {
-    // When adding new favored games, the api requires an array with all the current favored games due to the fact that it overwrites the old ones with the ones found in the body of the POST request
-    if (!favoredGamesCollection.includes(gameID)) {
-      favoredGamesCollection.push(gameID);
-    }
-
-    let data = {
-      items: favoredGamesCollection
-    };
-
-    let options = {
-      method: "POST",
-      headers: {
-        'X-SessionID': sessionID,
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      body: JSON.stringify(data)
-    };
-
-    fetch(url, options)
-      .then((res:any) => res.json())
-      .then((increasedFavArray:any) => {
-        window.postMessage({ type: `AddFavoriteThumbnail_${gameID}` }, window.location.href);
-
-        updateFavoredList(url, sessionID, playerID);
-      })
-      .catch((err:any) => {
-        console.error('Err', err);
-    });
-  }
-
-  const removeFavoredGame = (url:string, sessionID:string, playerID:string, gameID:string, triggerFactor:string) => {
-    if (favoredGamesCollection.includes(gameID)) {
-      favoredGamesCollection =  favoredGamesCollection.filter(x => {
-        return x != gameID;
-      });
-    }
-
-    let options = {
-        method: "DELETE",
-        headers: {
-          'X-SessionID': sessionID,
-        }
-    };
-
-    fetch(`${url}/${gameID}`, options)
-      .then((res:any) => res.json())
-      .then((decreasedFavArray:any) => {
-        window.postMessage({ type: `RemoveFavoriteThumbnail_${gameID}` }, window.location.href);
-
-        updateFavoredList(url, sessionID, playerID);
-      });
-  }
-
-  const showFavoriteGames = () => {
-    window.postMessage({ type: "ShowFavoriteSection", receivedFavoriteResults}, window.location.href);
-  }
-  //
-  // --- END of Favorites section
-  //
-
-  const getCategories = (url:any) => {
-    return new Promise((resolve, reject) => {
-      isLoading = true;
-
-      fetch(url)
-        .then((res:any) => res.json())
-        .then((data:CategoriesData) => {
-          isLoading = false;
-
-          resolve(data);
-        }).catch((err:any) => {
-          hasErrors = true;
-          isLoading = false;
-
-          console.error(err);
-
-          reject(err);
-        });
-    });
-  }
-
-  const getGames = (url:any) => {
-    return new Promise((resolve, reject) => {
-      isLoading = true;
-
-        fetch(url)
-        .then((res:any) => res.json())
-        .then((categoryData:CasinoData) => {
-          isLoading = false;
-
-          resolve(categoryData);
-        }).catch((err:any) => {
-          hasErrors = true;
-          isLoading = false;
-
-          console.error(err);
-
-          reject(err);
-        });
-      });
-  }
-
-  const getGame = (url:any, gameId?:string):Promise<any> => {
-    return new Promise((resolve, reject) => {
-      isLoading = true;
-
-      if(gameId && Object.keys(searchedGamesCache).indexOf(gameId) >= 0){
-          isLoading = false;
-
-          resolve(searchedGamesCache[gameId]);
-        } else {
-          fetch(url)
-          .then((res:any) => res.json())
-          .then((gameData:any) => {
-            isLoading = false;
-
-            searchedGamesCache[gameData[0].id] = gameData[0];
-
-            resolve(gameData[0]);
-          }).catch((err:any) => {
-            hasErrors = true;
-            isLoading = false;
-
-            console.error(err);
-
-            reject(err);
-          });
-        }
-      });
-  }
-
-  const getCookieValue = (name:string) => {
-    let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
-
-    if (match) {
-      return match[2];
-    }
-  }
-
-  const onFocus = () => {
-    if (endpoint && datasource && lang) {
-      searchFocus = true;
-
-      if (searchValue.length < 2) {
-        let recentSearchedGames = getCookieValue(`searchedGamesWds_${lobbyid}`);
-        let recentSearchedGamesArray:Array<any> = [];
-
-        if (recentSearchedGames) {
-          recentSearchedGamesArray = recentSearchedGames.split(',');
-        }
-
-        if (lobbyScreen == true && !initialLoaded) {
-          lobbyViewAux = lobbyScreen;
-          lobbyScreen = false;
-        }
-
-        let promises:Array<any> = [];
-        let index = 0;
-        let length = recentSearchedGamesArray.length;
-
-        if (length > 0) {
-          for (index = 0; index < length; index++) {
-            let url:any = new URL(`${endpoint}/casino/games/${recentSearchedGamesArray[index]}`);
-
-            url.searchParams.append('language', lang);
-            url.searchParams.append('datasource', datasource);
-            url.searchParams.append('platform', getDevice(userAgent));
-
-            promises.push(getGame(url, recentSearchedGamesArray[index]));
-          }
-
-          Promise.all(promises).then((res:any) => {
-            searchArray = res;
-
-            sendRecentSearchData({}, searchArray)
-          });
-        } else {
-          sendRecentSearchData({}, {})
-        }
-      }
-    }
-  }
-
-  const onBlur = () => {
-    searchFocus = false;
-
-    if (searchValue.length < 2 && !gameFocus) {
-      searched = false;
-      searchArray = [];
-      recentSearches = false;
-      lobbyScreen = lobbyViewAux;
-      lobbyViewAux = false;
-      if (lobbyScreen === false) {
-        window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory }, window.location.href);
-      }
-
-      window.postMessage({ type: 'OutOfRecentSearches' }, window.location.href);
-    }
-  }
-
-  const addSearchedItem = (gameID:any) => {
-    searchedValues = getCookieValue(`searchedGamesWds_${lobbyid}`);
-
-    if (searchedValues) {
-      searchedValues = searchedValues.split(',');
-    } else {
-      searchedValues = [];
-    }
-    if (searchedValues.indexOf(gameID) === -1) {
-      let value;
-
-      searchedValues.push(gameID);
-      value = searchedValues.join(',');
-      document.cookie = `searchedGamesWds_${lobbyid}=` + value;
-    }
-  }
-
-  // @TODO let's do some small changes around here in order to have this search functionality pretty written, 'cuz right now is kinda shitty
-  const searchValueChanged = () => {
-    if (searchValue.length >= 2) {
-      searchBarCleared = true;
-    } else {
-      searchBarCleared = false;
-    }
-  }
-
-  $: searchValue && searchValueChanged();
-
-  $: if (searchValue.length >= 2) {
-    searched = true;
-
-    let searchUrl:any = new URL(`${endpoint}/casino/games`);
-
-    searchUrl.searchParams.append("datasource", datasource);
-    searchUrl.searchParams.append("expand", "vendor");
-    searchUrl.searchParams.append("platform", getDevice(userAgent));
-    searchUrl.searchParams.append("language", lang);
-    searchUrl.searchParams.append("pagination", "offset=0,limit=30");
-    searchUrl.searchParams.append("filter", `name=${searchValue}`);
-
-    getGames(searchUrl).then((searchData:any) => {
-      searchArray = searchData;
-
-      sendSearchData({}, searchData);
-    });
-  } else {
-    if (!searchBarCleared) {
-      onFocus();
-    }
-
-    if (initialLoaded) {
-      initialLoaded = false;
-    }
-  }
-
-  const setFilterNumberValue = () => {
-    let vendors = JSON.parse(sessionStorage.getItem('vendorFiltersByCategory'));
-
-    if (vendors) {
-      if(currentCategoryId) {
-        if(vendors[currentCategoryId]) {
-          numberOfFilters = vendors[currentCategoryId].length;
-        } else {
-          numberOfFilters = 0;
-        }
-      }
-    }
-  }
-
-  const searchActivated = () => {
-    window.postMessage({ type: "scroll" }, window.location.href);
-  }
-
-  const clearSearchbar = () => {
-    searchBarCleared = true;
-    searchValue = '';
-    searchArray = [];
-    recentSearches = false;
-
-    onBlur();
-  }
-
-  //
-  // --- START of communication with other widgets
-  //
-  const sendMostPlayed = (node:any, mostPlayedData:CategoriesData) => {
-    window.postMessage({ type: 'MostPlayedData', mostPlayedData }, window.location.href);
-  }
-
-  const submitFilters = (venArray:Array<Object>) => {
-    window.postMessage({ type: "AvailableVendors", venArray}, window.location.href);
-  }
-
-  const updateFilters = (venArray:Array<Object>) => {
-    window.postMessage({ type: "UpdateSelectedVendorFilters", venArray}, window.location.href);
-  }
-
-  const sendRecentSearchData = (node:any, searchData:any) => {
-    window.postMessage({ type: "RecentSearchData", searchData }, window.location.href);
-  }
-
-  const openFiltersModal = () => {
-    window.postMessage({ type: "ShowFilterModal" }, window.location.href);
-  }
-
-  const clearVendorFilter = () => {
-    window.postMessage({ type: "ClearVendorFilters" }, window.location.href);
-  }
-
-  const sendCategoryData = (node:any, categoryId:string) => {
-    currentCategoryId = categoryId;
-    window.postMessage({ type: `CategoryData_${categoryId}`, categoryId, visiblegames, receivedFavoriteResults }, window.location.href);
-  }
-
-  const sendSearchData = (node:any, searchData:CategoriesData) => {
-    if (searchData) {
-      window.postMessage({ type: "SearchData", searchData, receivedFavoriteResults }, window.location.href);
-    }
-  }
-
-  //
-  // --- END of communication with other widgets
-  //
-
-  /* Listen for scroll */
-  const scrollHandler = () => {
-    if(searchElementWrapper) {
-      searchPositionTop = searchElementWrapper.getBoundingClientRect().top + document.body.getBoundingClientRect().top;
-    }
-    if (document.documentElement.scrollTop > searchPositionTop || searchPositionTop > 130) {
-      adjustingScroll = true;
-    } else {
-      adjustingScroll = false;
-    }
-  }
-
-  const checkAttrs = () => {
-    if (!endpoint) {
-      error = "Endpoint is missing! Please provide a valid endpointURL.";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    if (!datasource) {
-      error = "Datasource is missing! Please provide a valid datasource.";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    if (!lang || lang.length < 2) {
-      error = "Language is missing! Please provide a valid language (alpha2code)";
-      hasErrors = true;
-      isLoading = false;
-
-      console.error(error);
-    }
-
-    return hasErrors;
-  }
-  const updateCategoriesLanguage = () => {
-    if(firstLoad) {
-      setTimeout(() => {
-        window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory}, window.location.href);
-      }, 500);
-    }
-    firstLoad = false;
-  }
-
-  const initialSetup = () => {
-    if (!checkAttrs()) {
-      isLoading = true;
-
-      if (favorites == 'true') {
-        getFavoredGames(endpoint, sessionID, playerID);
-      }
-
-      setLocale(lang);
-
-      let categoriesUrl = new URL(`${endpoint}/casino/groups/${datasource}`);
-
-      categoriesUrl.searchParams.append('language', lang);
-      categoriesUrl.searchParams.append('platform', getDevice(userAgent));
-
-      getCategories(categoriesUrl).then((data:CategoriesData) => {
-        if (data) {
-          categoriesData = data.items.filter((item:any) => {
-            return item.games.total > 0;
-          });
-
-          shownCategories = categories = categoriesData.map((item:any) => {
-            return item.id;
-          });
-
-          isLoading = false;
-        }
-      });
-
-      if (getDevice(userAgent) !== 'PC') {
-        searchElement.addEventListener('focusin', (event) => {
-          mobileSearchViewActive = true;
-        });
-
-        searchElement.addEventListener('focusout', (event) => {
-          mobileSearchViewActive = false;
-        });
-      }
-
-      setFilterNumberValue();
-
-      searchElementWrapper = searchWrapper;
-
-      if (searchElementWrapper) {
-        searchPositionTop = searchElementWrapper.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
-      }
-    }
-  }
-
-  const setActiveCategory = ():void => {
-    activeCategory = activecategory;
-    CategoryChangeHandler({ data: { itemId: activeCategory }});
-  }
-
-  const setSession = () => {
-    isLoggedIn = true;
-    sessionID = session;
-    playerID = userid;
-    if (playerID && playerID.length && sessionID && sessionID.length > 0) {
-      getFavoredGames(endpoint, sessionID, playerID);
-    }
-  }
-
-  const setClientStyling = () => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    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 startInterval = (e:any):void => {
-    timer = 0;
-
-    timerInterval = setInterval(() => {
-      timer += 1;
-      panicLoading = true;
-
-      if (timer >= 3) {
-        window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
-        clearInterval(timerInterval)
-      }
-    }, 1000);
-  }
-
-  const endInterval = (e:any):void => {
-    if (timer < 3) {
-      panicLoading = false;
-    }
-    clearInterval(timerInterval);
-  }
-
-  const addEventsToDisplayedElements = () => {
-    panicButton?.addEventListener("mousedown", startInterval, false);
-    panicButton?.addEventListener('touchstart', startInterval, false);
-
-    // on mouseup stop interval count
-    panicButton?.addEventListener("mouseup", endInterval, false);
-    panicButton?.addEventListener("touchend", endInterval, false);
-  }
-
-  const removeEventsToDisplayedElements = ():void => {
-    panicLoading = false;
-    panicButton?.removeEventListener("mousedown", startInterval);
-    panicButton?.removeEventListener('touchstart', startInterval);
-
-    // on mouseup stop interval count
-    panicButton?.removeEventListener("mouseup", endInterval);
-    panicButton?.removeEventListener("touchend", endInterval);
-  }
-
-  onMount(() => {
-    window.addEventListener('scroll', scrollHandler, false);
-    window.addEventListener('message', messageHandler, false);
-
-    return () => {
-      window.removeEventListener('scroll', scrollHandler);
-      window.removeEventListener('message', messageHandler);
-
-      removeEventsToDisplayedElements();
-    }
-  });
-
-  $: lang && activecategory && setActiveCategory();
-  $: session && userid && endpoint && setSession();
-  $: endpoint && datasource && lang && alternativesearch && initialSetup();
-  $: lang && updateCategoriesLanguage();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
-  $: panicButton && addEventsToDisplayedElements();
-</script>
-
-{#if hasErrors}
-  <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.500')}</p>
-{:else}
-  <section class="CategoriesLobby" part="CategoriesLobby" bind:this={customStylingContainer} style="max-width: {containermaxwidth}px;">
-    {#if (getDevice(userAgent) !== 'PC') && (alternativesearch === 'false') && mobileSearchViewActive}
-      <div class="SearchBarPlaceholder" part="SearchBarPlaceholder"></div>
-    {/if}
-
-    {#if alternativesearch === 'false'}
-      <!-- main search layout -->
-      <div bind:this={searchWrapper} class="CategoriesHeaderSection {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''} {(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
-      style="top: {adjustingScroll && mobileSearchViewActive ? scrollOffset + 'px' : ''}"
-      part="CategoriesHeaderSection {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''} {(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}">
-        <div class="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}" part="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}">
-          <label for="search" class="SrOnly" part="SrOnly">{$_('casinoPage.searchGames')}</label>
-          <div class="SearchWrapper" part="SearchWrapper">
-            {#if !mobileSearchViewActive}
-              <div class="SearchIcon" part="SearchIcon">
-                <svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-                </svg>
-              </div>
-            {/if}
-            <input id="SearchField" class="SearchInput" part="SearchInput" on:focus={onFocus} on:blur={onBlur} bind:this={searchElement} bind:value={searchValue} placeholder="{(getDevice(userAgent) === 'PC') ? $_('casinoPage.search') : $_('casinoPage.searchMobile')}" type="search" on:focus={searchActivated} />
-            {#if ((getDevice(userAgent) === 'PC') && searchValue.length) ||  (getDevice(userAgent) !== 'PC') }
-              <span class="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" part="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" on:click="{() => clearSearchbar()}">
-                <div class="CloseIconContainer" part="CloseIconContainer">
-                  <div class="CloseIconWrapper" part="CloseIconWrapper">
-                    <div class="CloseIcon" part="CloseIcon"></div>
-                  </div>
-                </div>
-              </span>
-            {/if}
-          </div>
-        </div>
-        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searched && !searchFocus && !lobbyViewAux}
-            <div class="FiltersButtonsContainer" part="FiltersButtonsContainer">
-            {#if numberOfFilters}
-              <div class="ClearFilterButtonWrapper" part="ClearFilterButtonWrapper" on:click="{() => clearVendorFilter()}">
-                <div class="ClearButton" part="ClearButton">{$_('casinoPage.clear')}
-                  <span class="ClearIcon" part="ClearIcon">
-                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                        viewBox="0 0 378.303 378.303" style="enable-background:new 0 0 378.303 378.303;" xml:space="preserve">
-                      <polygon style="fill:var(--emfe-w-color-secondary, #FD2839);" points="378.303,28.285 350.018,0 189.151,160.867 28.285,0 0,28.285 160.867,189.151 0,350.018
-                        28.285,378.302 189.151,217.436 350.018,378.302 378.303,350.018 217.436,189.151 "/>
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            {/if}
-            {#if !searched || !recentSearches}
-              {#if !mostPlayedScreen}
-                <div class="FilterButtonWrapper" part="FilterButtonWrapper" on:click='{() => {openFiltersModal()}}'>
-                  <div class="FilterButton" part="FilterButton">{$_('casinoPage.filters')}</div>
-                  <div class="FilterIconContainer" part="FilterIconContainer">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 26 26"><defs><style>.a{fill:var(--emfe-w-color-white, #FFFFFF);}</style></defs><path class="a" d="M16.7,32.2a1.654,1.654,0,0,1-.636-.148,1.526,1.526,0,0,1-.867-1.393V20.578L5.433,10.588A1.543,1.543,0,0,1,5,9.491V7.742A1.512,1.512,0,0,1,6.5,6.2h23A1.512,1.512,0,0,1,31,7.742V9.491a1.543,1.543,0,0,1-.433,1.1L20.8,20.578v7.738a1.594,1.594,0,0,1-.52,1.156l-2.6,2.312A1.461,1.461,0,0,1,16.7,32.2ZM6.618,9.431l9.764,10.02a1.543,1.543,0,0,1,.433,1.1v9.813l2.34-2.075V20.519a1.543,1.543,0,0,1,.433-1.1L29.353,9.4V7.831H6.618Z" transform="translate(-5 -6.2)"/></svg>
-                    <div class="NumberOfFiltersContainer" part="NumberOfFiltersContainer">
-                      <span class="NumberOfFilters" part="NumberOfFilters">{numberOfFilters}</span>
-                    </div>
-                  </div>
-                </div>
-              {/if}
-            {/if}
-          </div>
-        {/if}
-      </div>
-    {:else}
-      <!-- start alternative search layout-->
-      <div bind:this={searchWrapper} class="CategoriesHeaderSection CategoriesHeaderSectionAltDesign {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''}{(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
-       part="CategoriesHeaderSection CategoriesHeaderSectionAltDesign {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''}{(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
-      style="top: {adjustingScroll && mobileSearchViewActive ? scrollOffset + 'px' : ''}">
-        <div class="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}" part="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}">
-          <label for="search" class="SrOnly" part="SrOnly">{$_('casinoPage.searchGames')}</label>
-          <div class="SearchWrapper" part="SearchWrapper">
-            {#if !mobileSearchViewActive}
-              <div class="SearchIcon" part="SearchWrapper">
-                <svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
-                </svg>
-              </div>
-            {/if}
-
-            <input id="SearchField" class="SearchInput" part="SearchInput" on:focus={onFocus} on:blur={onBlur} bind:this={searchElement} bind:value={searchValue} placeholder="{(getDevice(userAgent) === 'PC') ? $_('casinoPage.search') : $_('casinoPage.searchMobile')}" type="search" on:focus={searchActivated} />
-            {#if ((getDevice(userAgent) === 'PC') && searchValue.length) ||  (getDevice(userAgent) !== 'PC')}
-              <span class="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" part="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" on:click="{() => clearSearchbar()}">
-                <div class="CloseIconContainer" part="CloseIconContainer">
-                  <div class="CloseIconWrapper" part="CloseIconWrapper">
-                    <div class="CloseIcon" part="CloseIcon"></div>
-                  </div>
-                </div>
-              </span>
-            {/if}
-          </div>
-        </div>
-        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searchFocus && !searched && !lobbyViewAux}
-            <div class="FiltersButtonsContainer" part="FiltersButtonsContainer">
-            {#if numberOfFilters}
-              <div class="ClearFilterButtonWrapper {numberOfFilters ? 'FiltersActive' : ''}" part="ClearFilterButtonWrapper {numberOfFilters ? 'FiltersActive' : ''}" on:click="{() => clearVendorFilter()}">
-                <div class="ClearButton" part="ClearButton">{$_('casinoPage.clear')}
-                  <span class="ClearIcon" part="ClearIcon">
-                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-                        viewBox="0 0 378.303 378.303" style="enable-background:new 0 0 378.303 378.303;" xml:space="preserve">
-                      <polygon style="fill:var(--emfe-w-color-secondary, #FD2839);" points="378.303,28.285 350.018,0 189.151,160.867 28.285,0 0,28.285 160.867,189.151 0,350.018
-                        28.285,378.302 189.151,217.436 350.018,378.302 378.303,350.018 217.436,189.151 "/>
-                    </svg>
-                  </span>
-                </div>
-              </div>
-            {/if}
-            {#if !searched || !recentSearches}
-              {#if !mostPlayedScreen}
-                <div class="FilterButtonWrapper" part="FilterButtonWrapper" on:click='{() => {openFiltersModal()}}'>
-                  <div class="FilterButton" part="FilterButton">{$_('casinoPage.filters')}</div>
-                  <div class="FilterIconContainer" part="FilterIconContainer">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 26 26"><defs><style>.a{fill:var(--emfe-w-color-white, #FFFFFF);}</style></defs><path class="a" d="M16.7,32.2a1.654,1.654,0,0,1-.636-.148,1.526,1.526,0,0,1-.867-1.393V20.578L5.433,10.588A1.543,1.543,0,0,1,5,9.491V7.742A1.512,1.512,0,0,1,6.5,6.2h23A1.512,1.512,0,0,1,31,7.742V9.491a1.543,1.543,0,0,1-.433,1.1L20.8,20.578v7.738a1.594,1.594,0,0,1-.52,1.156l-2.6,2.312A1.461,1.461,0,0,1,16.7,32.2ZM6.618,9.431l9.764,10.02a1.543,1.543,0,0,1,.433,1.1v9.813l2.34-2.075V20.519a1.543,1.543,0,0,1,.433-1.1L29.353,9.4V7.831H6.618Z" transform="translate(-5 -6.2)"/></svg>
-                    {#if numberOfFilters > 0}
-                    <div class="NumberOfFiltersContainer" part="NumberOfFiltersContainer">
-                      <span class="NumberOfFilters" part="NumberOfFilters">{numberOfFilters}</span>
-                    </div>
-                      {/if}
-                  </div>
-                </div>
-              {/if}
-            {/if}
-          </div>
-        {/if}
-      </div>
-      <!-- end alternative search layout-->
-    {/if}
-
-    {#if playrandomgame == 'true' && searchFocus == false}
-      <casino-random-game {datasource} {endpoint} {lang} {gameevent} {randombuttonicon}>
-      </casino-random-game>
-    {/if}
-
-    {#if isLoading}
-      <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.loading')}</p>
-    {:else}
-      {#if searched}
-        <casino-games-category-section
-          endpoint={endpoint}
-          datasource={datasource}
-          lang={lang}
-          currency={currency}
-          session={session}
-          userid={userid}
-          use:sendSearchData={searchArray}
-          categoryid="Search"
-          favorites={favorites}
-          categoryindex="0"
-          class="CategoryContainer"
-          {clientstyling}
-          {clientstylingurl}
-          {livecasino}
-          {visiblegames}
-          {gamepagemodalurl}
-          {enablecasinowinners}
-          {enableautoscroll}
-          {tabsorder}
-          {isrecentavailable}
-          {istopavailable}
-        />
-      {:else}
-        {#if lobbyScreen}
-          {#each shownCategories as category, index}
-            {#if index === 4}
-            <br>
-            <jackpot-banner
-              visualstructure="typeSpread" 
-              lang="gr" 
-              title="Jackpot Cards" 
-              backgroundsrc="../mock_rsrc/background0.png"
-              backgroundsrcmobile=""
-              currency = {currency || 'RON'}
-              gameid = "999"
-              endpoint = "https://winmasters-ro-api.stage.norway.everymatrix.com/v1/casino/jackpots"
-
-              titlelogopath = "../mock_rsrc/jackpots_logo.svg"
-        
-              caticon0="../../jackpot-banner/mock_rsrc/icon0.svg"
-              caticon1="../mock_rsrc/icon1.svg"
-              caticon2="../mock_rsrc/icon2.svg"
-              caticon3="../mock_rsrc/icon3.svg"
-            ></jackpot-banner>
-            {:else if index === 6}
-            <br>
-            <jackpot-banner
-              visualstructure="typeLeft" 
-              lang="en" 
-              title="Egypt Quest"
-              backgroundsrc="../mock_rsrc/background_egypt.svg"
-              backgroundsrcmobile="../mock_rsrc/background0.png"
-              currency = {currency || 'RON'}
-              gameid = "998"
-              endpoint = "https://winmasters-ro-api.stage.norway.everymatrix.com/v1/casino/jackpots"
-
-              titlelogopath = "../mock_rsrc/egypt_logo.svg"
-              
-              caticon0="../mock_rsrc/egypt_icon0.svg"
-              caticon1="../mock_rsrc/egypt_icon0.svg"
-              caticon2="../mock_rsrc/egypt_icon0.svg"
-              caticon3="../mock_rsrc/egypt_icon0.svg"
-              iconlabels="platinum, gold, silver, bronze"
-            ></jackpot-banner>
-            {/if}
-            <casino-games-category-section
-              session={session}
-              userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              lang={lang}
-              currency={currency}
-              use:sendCategoryData={category}
-              categoryid={category}
-              categoryindex={index}
-              categorygames="9"
-              favorites={favorites}
-              class="CategoryContainer"
-              style="background-color: {(index % 2 !== 0) ? categorybackground : 'transparent'}"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {enablecasinowinners}
-            />
-          {/each}
-        {:else if favoritesScreen}
-          <casino-games-category-section
-          session={session}
-          userid={userid}
-          endpoint={endpoint}
-          datasource={datasource}
-          lang={lang}
-          currency={currency}
-          favorites={favorites}
-          use:getFavoredGames={`${endpoint}/player/${playerID}/favorites/`, sessionID, playerID}
-          categoryid={"FAVORITES"}
-          class="CategoryContainer"
-          {clientstyling}
-          {clientstylingurl}
-          {livecasino}
-          {visiblegames}
-          {gamepagemodalurl}
-          {enablecasinowinners}
-        />
-        {:else if mostPlayedScreen}
-          {#if mostPlayedEmpty}
-            <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.noGamesPlayed')}</p>
-          {:else}
-            <casino-games-category-section
-              session={session}
-              userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              lang={lang}
-              currency={currency}
-              favorites={favorites}
-              categoryid="MOSTPLAYED"
-              categoryindex="1"
-              categorygames="9"
-              class="CategoryContainer"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {enablecasinowinners}
-            />
-          {/if}
-        {:else}
-          {#if !recentSearches}
-            <casino-games-category-section
-              userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              favorites={favorites}
-              lang={lang}
-              currency={currency}
-              session={session}
-              categoryid={activeCategory}
-              categorygames="9"
-              class="CategoryContainer"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {enablecasinowinners}
-            />
-          {/if}
-        {/if}
-      {/if}
-    {/if}
-    {#if isLoggedIn && haspanicbutton == "true"}
-      <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
-        <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile ' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton} >{$_('casinoPage.breakButton')}</button>
-      </div>
-    {/if}
-  </section>
-{/if}
-
-<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;
-  }
-
-  .CategoriesLobby {
-    margin: 0 auto;
-  }
-
-  .PanicSectionMobile {
-    flex-direction: column;
-    margin: 20px 0;
-  }
-
-  .PanicSection {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    margin-top: 20px;
-  }
-
-  .PanicButton {
-    border-radius: 5px;
-    border: 1px solid var(--emfe-w-color-primary, #D0046C);
-    background-color: var(--emfe-w-color-primary, #D0046C);
-    width: 280px;
-    height: 48px;
-    line-height: 18px;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    cursor: pointer;
-  }
-
-  .PanicButtonAnimation {
-    background: -webkit-linear-gradient(
-        135deg,
-        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
-    );
-
-    background: -moz-linear-gradient(
-        135deg,
-        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
-    );
-
-    background: -o-linear-gradient(
-        135deg,
-        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
-    );
-
-    background-color: var(--emfe-w-color-primary, #D0046C);
-    width: 280px;
-    color: #fff;
-
-    -webkit-animation: bar-animation 2s linear;
-  }
-
-  .PanicButtonMobile {
-    width: 280px;
-    padding: 0 5px;
-
-    //Remove text selection for panic button on mobile
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none;
-    // End of removing selection properties
-  }
-
-  @-webkit-keyframes bar-animation {
-    0% {
-      background-position: 0;
-    }
-    100% {
-      background-position: 280px;
-    }
-  }
-
-
-  [type="search"] {
-    appearance: none;
-  }
-
-  .SrOnly {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .CategoryContainer {
-    display: block;
-
-    @media screen and (max-width: 1300px) {
-      padding: 0 2.4%
-    }
-  }
-
-  .SearchLoading {
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 14px;
-    margin-top: 16px;
-    text-align: center;
-  }
-
-  .SearchContainer {
-    flex: 3;
-    width: 100%;
-    max-width: 600px;
-    margin: auto 0 auto 30%;
-    &.SearchTruncated {
-      margin: auto 0 auto 30%;
-      .SearchInput {
-        tabindex: 999;
-        padding: 20px 12px 20px 40px;
-      }
-    }
-    .SearchWrapper {
-      position: relative;
-      display: inline-flex;
-      color: rgba(199, 210, 254, 1);
-
-      .SearchIcon {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        top: 0;
-        bottom: 0;
-        left: 1.2%;
-        pointer-events: none;
-
-        svg {
-          width: 26px;
-          height: 26px;
-          display: block;
-          vertical-align: middle;
-          fill: rgba(199, 210, 254, 1);
-        }
-      }
-      .SearchInput {
-        width: 520px;
-        display: block;
-        padding: 12px 12px 12px 40px;
-        border-radius: 6px;
-        border-color: transparent;
-        font-size: 16px;
-        background-color: rgba(156, 163, 175, 0.25);
-        color: rgba(224, 231, 255, 1);
-        &::-webkit-search-decoration,
-        &::-webkit-search-cancel-button,
-        &::-webkit-search-results-button,
-        &::-webkit-search-results-decoration {
-          -webkit-appearance:none;
-        }
-
-        &::placeholder {
-          color:rgba(255, 255, 255, 1);
-        }
-
-        &:focus {
-          background-color: rgba(255, 255, 255, 1);
-          color: rgba(17, 24, 39, 1);
-          outline: 2px solid transparent;
-          outline-offset: 2px;
-
-          &::placeholder {
-            color: rgba(156, 163, 175, 1);
-          }
-        }
-      }
-
-      &:focus-within {
-        color: rgba(156, 163, 175, 1);
-
-        .SearchIcon svg {
-          fill: rgba(156, 163, 175, 1);
-        }
-      }
-    }
-  }
-
-  .FiltersButtonsContainer {
-    display: inline-flex;
-    flex-direction: row-reverse;
-    flex: 1;
-    grid-gap: 20px;
-    flex-direction: row-reverse;
-  }
-  .FilterButtonWrapper, .ClearFilterButtonWrapper {
-    display: inline-flex;
-    padding: 10px;
-    border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-    border-radius: 5px;
-    text-transform: uppercase;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    cursor: pointer;
-  }
-  .ClearFilterButtonWrapper {
-    border: 1px solid var(--emfe-w-color-secondary, #FD2839);
-    color: var(--emfe-w-color-secondary, #FD2839);
-  }
-  .FilterIconContainer, .ClearIcon {
-    position: relative;
-    padding-left: 5px;
-  }
-  .FilterIconContainer {
-    top: 2px;
-  }
-  .ClearIcon {
-    position: relative;
-    top: 1px;
-    svg {
-      width: 14px;
-    }
-  }
-  .FilterButtonWrapper, .ClearFilterButtonWrapper {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .NumberOfFiltersContainer {
-    display: block;
-    line-height: 0px;
-    border-radius: 50%;
-    border: 2px solid var(--emfe-w-color-primary, #D0046C);
-    background: var(--emfe-w-color-primary, #D0046C);
-    color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: 12px;
-    position: absolute;
-    top: -5px;
-    left: 18px;
-    .NumberOfFilters {
-      display: inline-block;
-      padding-top: 50%;
-      padding-bottom: 50%;
-      margin-left: 3px;
-      margin-right: 3px;
-    }
-  }
-
-  .CategoriesHeaderSection {
-    width: 100%;
-    display: inline-flex;
-    flex-direction: row;
-    margin-top: 30px;
-  }
-  .CategoriesHeaderMobileSection {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    flex-direction: row-reverse;
-    z-index: 1;
-    .ClearFilterButtonWrapper {
-      display: none;
-    }
-    .SearchContainer {
-      flex: 1;
-      max-width: unset;
-      margin: unset;
-      background-color: rgba(208, 5, 108, 1);
-      z-index: 1;
-      .SearchWrapper {
-        display: flex;
-        color: var(--emfe-w-color-white, #FFFFFF);
-        .SearchIcon {
-          left: 2.4%;
-        }
-        .SearchInput {
-          padding: 12px;
-          border-radius: 0;
-          background-color: rgba(208, 5, 108, 1);
-          color: var(--emfe-w-color-white, #FFFFFF);
-          text-align: center;
-          opacity: 1;
-          &::placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-            color: rgba(255, 255, 255, 1);
-            opacity: 1; /* Firefox */
-          }
-        }
-        path {
-          fill: var(--emfe-w-color-white, #FFFFFF);
-        }
-      }
-    }
-    .FiltersButtonsContainer {
-      flex: 1;
-      .FilterButtonWrapper {
-        position: relative;
-        width: 100%;
-        display: flex;
-        flex-direction: row-reverse;
-        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-        border-radius: 0;
-        background: var(--emfe-w-color-white, #FFFFFF);
-        color: var(--emfe-w-color-primary, #D0046C);
-      }
-      .FilterIconContainer {
-        position: absolute;
-        left: 40px;
-        top: revert;
-        padding-left: 0;
-        path {
-          fill: var(--emfe-w-color-primary, #D0046C);
-        }
-      }
-    }
-    .NumberOfFiltersContainer {
-      font-size: 8px;
-      left: 15px;
-    }
-  }
-
-  // start alternative search design
-  .CategoriesHeaderSectionAltDesign {
-    &.CategoriesHeaderMobileSection {
-      flex-direction: row;
-      position: relative;
-      margin-top: 30px;
-      .SearchContainer {
-        background-color: var(--emfe-w-color-contrast, #07072A);
-
-        padding: 0 2.4%;
-        .SearchWrapper {
-          justify-content: center;
-          .SearchInput {
-            width: 100%;
-            border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-            border-radius: 6.4px;
-            background-color: transparent;
-            color: var(--emfe-w-color-white, #FFFFFF);
-            padding: 12px 3.6%;
-            &:active, &:focus {
-              width: 100%;
-            }
-          }
-        }
-      }
-      .FiltersButtonsContainer {
-        position: absolute;
-        top: 160px;
-        font-size: 13px;
-        gap: 6px;
-
-        @media screen and (max-width: 1300px) {
-        right: 2.4%;
-      }
-
-        .FilterIconContainer {
-          display: none;
-        }
-        .FilterButtonWrapper {
-          border-radius: 5px;
-          border: 1px solid var(--emfe-w-color-white, #FFFFFF);
-          background: transparent;
-          color: var(--emfe-w-color-white, #FFFFFF);
-          padding: 6px 16px;
-        }
-        .ClearFilterButtonWrapper {
-          padding: 6px 16px;
-          .ClearIcon {
-            display: none;
-          }
-        }
-      }
-      &.CategoriesHeaderSearchActive {
-        top: 0;
-      }
-    }
-    .FiltersActive.ClearFilterButtonWrapper {
-      display: inline-flex;
-    }
-    .ClearSearchButton {
-      right: 2.4%;
-      top: 11px;
-    }
-    .ClearSearchButtonMobile {
-      right: 2.4%;
-      top: 9px;
-    }
-  }
-  // end alternative search design
-  .ClearFilterMobileButtonWrapper {
-    position: absolute;
-    right: 5px;
-    padding: 8px 18px;
-    display: inline-flex;
-    border: 1px solid var(--emfe-w-color-gray-300, #58586B);
-    border-radius: 5px;
-    border: 1px solid var(--emfe-w-color-secondary, #FD2839);
-    text-transform: uppercase;
-    color: var(--emfe-w-color-white, #FFFFFF);
-    cursor: pointer;
-    color: var(--emfe-w-color-secondary, #FD2839);
-    font-size: 14px;
-    .ClearIcon svg {
-      width: 12px;
-    }
-  }
-  .CategoriesHeaderSearchActive {
-    position: fixed;
-    bottom: unset;
-    top: 70px;
-    margin-top: 0;
-    .SearchContainer {
-      background-color:rgba(255, 255, 255, 1);
-      .SearchWrapper {
-        .SearchInput {
-          background-color: rgba(255, 255, 255, 1);
-          color: var(--emfe-w-color-black, #000000);
-        }
-      }
-    }
-  }
-  .SearchStickTop {
-    margin-top: 0;
-  }
-  @media (max-width: 768px) {
-    .SearchContainer {
-      margin: auto 3% auto 0%;
-    }
-  }
-  // push content lower when on mobile and search is active
-  .SearchBarPlaceholder {
-    display: block;
-    width: 100%;
-    height: 46px;
-  }
-  // push content lower when on mobile and search is active
-  .SearchBarPlaceholder {
-    display: block;
-    width: 100%;
-    height: 46px;
-  }
-
-  .ClearSearchButton, .ClearSearchButtonMobile {
-    cursor: pointer;
-    position: absolute;
-    right: 14px;
-    top: 11px;
-    .CloseIconContainer {
-      width: 25px;
-      height: 25px;
-    }
-
-    .CloseIconWrapper {
-      height: 25px;
-      width: 3px;
-      margin-left: 12px;
-      background-color:var(--emfe-w-color-white, #FFFFFF);
-      transform: rotate(45deg);
-      Z-index: 1;
-    }
-
-    .CloseIcon {
-      height: 25px;
-      width: 3px;
-      background-color:var(--emfe-w-color-white, #FFFFFF);
-      transform: rotate(90deg);
-      Z-index: 2;
-    }
-  }
-    .SearchContainer {
-      .CloseIconWrapper, .CloseIcon {
-        background-color: var(--emfe-w-color-secondary, #FD2839);
-      }
-    }
-  .ClearSearchButtonMobile {
-    display: none;
-  }
-  .CategoriesHeaderSearchActive  {
-    .ClearSearchButtonMobile {
-      display: block;
-      .CloseIconWrapper, .CloseIcon {
-        background-color: var(--emfe-w-color-secondary, #FD2839);
-      }
-    }
-  }
-
-</style>
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { isMobile, getDevice } from 'rvhelper';
+  import { _, addNewMessages, setupI18n, setLocale } from './i18n';
+  import { CasinoPageTranslations } from './translations';
+  import type {
+    CategoriesData,
+    CasinoData,
+    CategoriesItems,
+    CasinoItems,
+  } from './CasinoPage.types';
+
+  import '@everymatrix/casino-games-category-section';
+  import '@everymatrix/casino-random-game';
+  import '@everymatrix/jackpot-banner';
+
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let currency:string = '';
+  export let lang:string = ''; // Language
+  export let session:string = ''; // Value for sessionID
+  export let userid:string = ''; // Value for UserID;
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
+
+  export let categorybackground:string = '';
+  export let visiblegames:string;
+  export let alternativesearch:string = 'false';
+  export let favorites:string = '';
+  export let mostplayed:string = '';
+  export let containermaxwidth:string = '1300';
+  export let lobbyid:string = 'casinodefault'; // identifier for recent searched
+  export let haspanicbutton:string = 'false';
+
+  export let mostplayedrounds:string = '';
+  export let activecategory:string = '';
+  export let livecasino:string = 'false';
+  export let playrandomgame:string = 'false';
+  export let gamepagemodalurl:string = 'false';
+  export let enablecasinowinners:string = 'true';
+  export let enablejackpotbanner:string = 'true';
+
+  export let tabsorder:string = '';
+  export let enableautoscroll:string = '';
+  export let istopavailable:string = '';
+  export let isrecentavailable:string = '';
+
+  // Button icon for random game widget
+  export let randombuttonicon:string = '';
+
+  let userAgent:any = window.navigator.userAgent;
+  let gameevent:string;
+
+  if (!isMobile(userAgent)) {
+    gameevent = 'ShowGameModal';
+  } else {
+    gameevent = 'OpenGameFrame';
+  }
+
+  // CasinoPage loading state
+  let isLoading:boolean = false;
+  let hasErrors:boolean = false;
+  let isLoggedIn:boolean = false;
+  let error:string = '';
+
+  let playerID:string;
+  let sessionID:string;
+
+  let panicButton:HTMLElement;
+  let panicLoading:boolean = false;
+  let timer: number = 0;
+  let timerInterval:any;
+
+  // CasinoPage state
+  let favoritesScreen:boolean = false;
+  let recentSearches:boolean = false;
+  let initialLoaded:boolean = true;
+  let searched:boolean = false;
+  let gameFocus:boolean = false;
+  let lobbyViewAux:boolean = false;
+  let closeSearch:boolean = false;
+  let searchFocus:boolean = false;
+  let lobbyScreen:boolean = true;
+  let mostPlayedScreen:boolean = false;
+  let mostPlayedEmpty:boolean = false;
+  let adjustingScroll:boolean = false;
+  let searchBarCleared:boolean = true;
+
+  // Needs to be checked if there are relevant
+  let gamesArray = [];
+  let searchArray:Array<CasinoItems>;
+  let categories:Array<CategoriesItems> = [];
+  let shownCategories:Array<CategoriesItems> = [];
+  let activeCategory:string;
+
+  let searchValue:string = '';
+  let searchWrapper:HTMLElement;
+  let searchElementWrapper:HTMLElement;
+  let searchPositionTop:number;
+  let searchedGamesCache:Object = {};
+
+  // const scrollOffset:number = getDevice(userAgent) !== 'PC' ? operatorDetail.scrollOffset[0] : operatorDetail.scrollOffset[1];
+  const scrollOffset:number = 0;
+
+  let scrollTop:boolean = false;
+  let mostPlayedGames:Array<any> = [];
+
+  let favoredGamesCollection:Array<string> = [];
+  let categoriesData;
+  let receivedFavoriteResults:Object;
+  let updatedFavoriteResultsIds:Array<string>;
+  let searchElement:HTMLElement;
+  let mobileSearchViewActive:boolean = false;
+  let searchedValues:any = [];
+  let mostPlayedValues:any = [];
+  let filterVendorsArray:Array<Object> = [];
+  let numberOfFilters:number = 0;
+  let filteredGamesArray:Array<Object> = [];
+  let currentCategoryId:string = '';
+  let activeCategoryAux:any = undefined;
+  let customStylingContainer:HTMLElement;
+  let urlCasino:any;
+  let firstLoad:boolean = false;
+
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(CasinoPageTranslations).forEach((item) => {
+    addNewMessages(item, CasinoPageTranslations[item]);
+  });
+
+  const CategoryChangeHandler = (categoryEvent:any) => {
+    searched = false;
+    searchValue = '';
+    scrollTop = true;
+    // needs to be executed after the page has been populated
+    setTimeout(() => {
+      window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
+    });
+    switch(categoryEvent.data.itemId) {
+      case 'LOBBY':
+        lobbyScreen = true;
+        favoritesScreen = false;
+        activeCategory = '';
+        mostPlayedScreen = false;
+        break;
+
+      case 'FAVORITES':
+        lobbyScreen = false;
+        favoritesScreen = true;
+        mostPlayedScreen = false;
+        activeCategory = '';
+        break;
+
+      case 'MOSTPLAYED':
+        if (mostplayed == 'true') {
+          isLoading = true;
+
+          getMostPlayedGames({
+            limit: 100,
+            device: getDevice(userAgent),
+            rounds: 10
+          }).then((res:any) => {
+            isLoading = false;
+
+            if (res.count > 0) {
+              let promises:any = [];
+
+              res.items.forEach((item:any) => {
+                let url:URL = new URL(`${endpoint}/casino/games/${item.gameId}`);
+
+                url.searchParams.append('datasource', datasource);
+                if (livecasino) {
+                  promises.push(fetch(url.href).then((res:any) => res.json()));
+                } else {
+                  promises.push(fetch(url.href).then((res:any) => res.json()));
+                }
+              });
+
+              Promise.all(promises).then((values:any) => {
+                mostPlayedGames = values.map((item:any) => item[0]);
+
+                window.postMessage({ type: 'MostPlayedData', mostPlayedGames }, window.location.href);
+              });
+            } else {
+              mostPlayedEmpty = true;
+            }
+          });
+
+          activeCategory = '';
+          lobbyScreen = false;
+          favoritesScreen = false;
+          mostPlayedScreen = true;
+        }
+      break;
+
+      default:
+        lobbyScreen = false;
+        favoritesScreen = false;
+        mostPlayedScreen = false;
+        activeCategory = categoryEvent.data.itemId;
+        //@TODO: if we remove the settimeout, the postmessage does not execute, at all - weird behaviour
+        setTimeout(() => {
+          window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory }, window.location.href);
+        }, 500);
+
+
+        break;
+    }
+  }
+
+  const messageHandler = (e:any) => {
+    if (e.data) {
+      switch(e.data.type) {
+        // @TODO: removed and tested, but kept in case unforeseen issues occur - reason: multiple calls on category change
+        // case 'CategoryChange':
+        //   CategoryChangeHandler(e);
+        //   break;
+
+        case 'UserSessionID':
+          sessionID = e.data.session;
+          playerID = e.data.userID;
+
+          if (playerID && playerID.length && sessionID && sessionID.length > 0) {
+            getFavoredGames(endpoint, sessionID, playerID);
+          }
+          break;
+
+        // @TODO dis should be removed
+        case 'CategoriesLoadedForSlider':
+          window.postMessage({ type: 'SetSliderIndex', index: 0, categoryData: { id: 'LOBBY' } }, window.location.href);
+          break;
+
+        case 'SetUnfavoredGame':
+          removeFavoredGame(`${endpoint}/player/${playerID}/favorites`, sessionID, playerID, e.data.id, e.data.triggerFactor);
+          break;
+
+        case 'SetFavoredGame':
+          addFavoredGame(`${endpoint}/player/${playerID}/favorites`, sessionID, playerID, e.data.id, e.data.triggerFactor);
+          break;
+
+        case 'GetFavoredGame':
+          if (playerID && playerID.length && sessionID && sessionID.length > 0) {
+            getFavoredGames(endpoint, sessionID, playerID);
+          }
+          break;
+
+        case 'SearchedItemClicked':
+          addSearchedItem(e.data.gameId);
+          break;
+
+        case 'UpdateFilters':
+          updateFilters(e.data.vendorsArray);
+          setFilterNumberValue();
+          break;
+
+        case 'ClearFilters':
+          submitFilters(e.data.vendorsArray);
+          setFilterNumberValue();
+          break;
+
+        case 'ApplyFilters':
+          window.postMessage({ type: 'CategoryUpdate', itemId: currentCategoryId }, window.location.href);
+          setFilterNumberValue();
+          break;
+
+        case 'CategoryVendors':
+          currentCategoryId = e.data.categoryid;
+          setFilterNumberValue();
+          break;
+
+        case 'GameHovered':
+          gameFocus = true;
+          break;
+
+        case 'GameBlur':
+          gameFocus = false;
+          break;
+
+        default:
+          // Nothing to do here
+          break;
+      }
+    }
+  }
+
+  const getMostPlayedGames = (options:any) => {
+    let url = new URL(`${endpoint}/player/${playerID}/games/most-played`);
+
+    if (options.limit) {
+      url.searchParams.append('limit', options.limit);
+    }
+
+    if (options.order) {
+      url.searchParams.append('order', options.order);
+    }
+
+    let device = options.device;
+
+    if (device) {
+      if (device === 'PC') {
+        url.searchParams.append('device', 'Desktop');
+      } else {
+        url.searchParams.append('device', 'Mobile');
+      }
+    } else {
+      url.searchParams.append('device', 'All');
+    }
+
+    if (options.rounds) {
+      url.searchParams.append('rounds', options.rounds);
+    }
+
+    urlCasino = livecasino ? url : url.href;
+    return new Promise((resolve, reject) => {
+      fetch(urlCasino)
+        .then((res:any) => res.json())
+        .then((data:any) => {
+          resolve(data);
+
+          window.postMessage({ type: 'AddNewCategory', category: { name: 'Most Played', id: 'MOSTPLAYED' }}, window.location.href);
+          window.postMessage({ type: 'MostPlayedGames', data }, window.location.href);
+        }).catch((err:any) => {
+          console.error(err);
+
+          reject(err);
+        });
+    });
+  }
+
+  //
+  // --- START of Favorites section
+  //
+  let getFavoredGames = (url:string, sessionID:string, playerID:string) => {
+    if (favorites == 'true') {
+      if (session && playerID) {
+        let options = {
+          method: "GET",
+          headers: {
+            'X-SessionID': sessionID,
+          }
+        };
+
+        fetch(`${url}/player/${playerID}/favorites/`, options)
+          .then((res:any) => res.json())
+          .then((updatedArray:Object) => {
+            receivedFavoriteResults = updatedArray;
+
+            if (receivedFavoriteResults) {
+              window.postMessage({ type: "UpdateCategoryFavoriteGames", receivedFavoriteResults }, window.location.href);
+
+              updatedFavoriteResultsIds = getGamesIds(receivedFavoriteResults.items);
+            }
+
+            return receivedFavoriteResults;
+          }).then((favResults) => {
+            if (favoritesScreen) {
+              showFavoriteGames();
+            }
+            return favResults;
+          }).catch((err:any) => {
+            console.error(err);
+          });
+      }
+    }
+  }
+
+  let updateFavoredList = (url:string, sessionID:string, playerID:string) => {
+    let options = {
+      method: "GET",
+      headers: {
+        'X-SessionID': sessionID,
+      }
+    };
+
+    fetch(url, options)
+      .then((res:any) => res.json())
+      .then((updatedArray:Object) => {
+        receivedFavoriteResults = updatedArray;
+
+        if (favoritesScreen) {
+          showFavoriteGames();
+        }
+
+        if (receivedFavoriteResults) {
+          window.postMessage({ type: "UpdateCategoryFavoriteGames", receivedFavoriteResults}, window.location.href);
+        }
+
+        return receivedFavoriteResults;
+      }).catch((err:any) => {
+        console.error(err);
+      });
+  }
+
+  const getGamesIds = (favoritesArray:any = []) => {
+    // construct favorite array used to check if game id is not already present in fav list
+    favoredGamesCollection = [];
+
+    if (favoritesArray.length > 0) {
+      favoritesArray.forEach((fav:any) => {
+        favoredGamesCollection.push(fav.id);
+      });
+    }
+
+    return favoredGamesCollection;
+  }
+
+  let addFavoredGame = (url:string, sessionID:string, playerID:string, gameID:string, triggerFactor:string) => {
+    // When adding new favored games, the api requires an array with all the current favored games due to the fact that it overwrites the old ones with the ones found in the body of the POST request
+    if (!favoredGamesCollection.includes(gameID)) {
+      favoredGamesCollection.push(gameID);
+    }
+
+    let data = {
+      items: favoredGamesCollection
+    };
+
+    let options = {
+      method: "POST",
+      headers: {
+        'X-SessionID': sessionID,
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(data)
+    };
+
+    fetch(url, options)
+      .then((res:any) => res.json())
+      .then((increasedFavArray:any) => {
+        window.postMessage({ type: `AddFavoriteThumbnail_${gameID}` }, window.location.href);
+
+        updateFavoredList(url, sessionID, playerID);
+      })
+      .catch((err:any) => {
+        console.error('Err', err);
+    });
+  }
+
+  const removeFavoredGame = (url:string, sessionID:string, playerID:string, gameID:string, triggerFactor:string) => {
+    if (favoredGamesCollection.includes(gameID)) {
+      favoredGamesCollection =  favoredGamesCollection.filter(x => {
+        return x != gameID;
+      });
+    }
+
+    let options = {
+        method: "DELETE",
+        headers: {
+          'X-SessionID': sessionID,
+        }
+    };
+
+    fetch(`${url}/${gameID}`, options)
+      .then((res:any) => res.json())
+      .then((decreasedFavArray:any) => {
+        window.postMessage({ type: `RemoveFavoriteThumbnail_${gameID}` }, window.location.href);
+
+        updateFavoredList(url, sessionID, playerID);
+      });
+  }
+
+  const showFavoriteGames = () => {
+    window.postMessage({ type: "ShowFavoriteSection", receivedFavoriteResults}, window.location.href);
+  }
+  //
+  // --- END of Favorites section
+  //
+
+  const getCategories = (url:any) => {
+    return new Promise((resolve, reject) => {
+      isLoading = true;
+
+      fetch(url)
+        .then((res:any) => res.json())
+        .then((data:CategoriesData) => {
+          isLoading = false;
+
+          resolve(data);
+        }).catch((err:any) => {
+          hasErrors = true;
+          isLoading = false;
+
+          console.error(err);
+
+          reject(err);
+        });
+    });
+  }
+
+  const getGames = (url:any) => {
+    return new Promise((resolve, reject) => {
+      isLoading = true;
+
+        fetch(url)
+        .then((res:any) => res.json())
+        .then((categoryData:CasinoData) => {
+          isLoading = false;
+
+          resolve(categoryData);
+        }).catch((err:any) => {
+          hasErrors = true;
+          isLoading = false;
+
+          console.error(err);
+
+          reject(err);
+        });
+      });
+  }
+
+  const getGame = (url:any, gameId?:string):Promise<any> => {
+    return new Promise((resolve, reject) => {
+      isLoading = true;
+
+      if(gameId && Object.keys(searchedGamesCache).indexOf(gameId) >= 0){
+          isLoading = false;
+
+          resolve(searchedGamesCache[gameId]);
+        } else {
+          fetch(url)
+          .then((res:any) => res.json())
+          .then((gameData:any) => {
+            isLoading = false;
+
+            searchedGamesCache[gameData[0].id] = gameData[0];
+
+            resolve(gameData[0]);
+          }).catch((err:any) => {
+            hasErrors = true;
+            isLoading = false;
+
+            console.error(err);
+
+            reject(err);
+          });
+        }
+      });
+  }
+
+  const getCookieValue = (name:string) => {
+    let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+
+    if (match) {
+      return match[2];
+    }
+  }
+
+  const onFocus = () => {
+    if (endpoint && datasource && lang) {
+      searchFocus = true;
+
+      if (searchValue.length < 2) {
+        let recentSearchedGames = getCookieValue(`searchedGamesWds_${lobbyid}`);
+        let recentSearchedGamesArray:Array<any> = [];
+
+        if (recentSearchedGames) {
+          recentSearchedGamesArray = recentSearchedGames.split(',');
+        }
+
+        if (lobbyScreen == true && !initialLoaded) {
+          lobbyViewAux = lobbyScreen;
+          lobbyScreen = false;
+        }
+
+        let promises:Array<any> = [];
+        let index = 0;
+        let length = recentSearchedGamesArray.length;
+
+        if (length > 0) {
+          for (index = 0; index < length; index++) {
+            let url:any = new URL(`${endpoint}/casino/games/${recentSearchedGamesArray[index]}`);
+
+            url.searchParams.append('language', lang);
+            url.searchParams.append('datasource', datasource);
+            url.searchParams.append('platform', getDevice(userAgent));
+
+            promises.push(getGame(url, recentSearchedGamesArray[index]));
+          }
+
+          Promise.all(promises).then((res:any) => {
+            searchArray = res;
+
+            sendRecentSearchData({}, searchArray)
+          });
+        } else {
+          sendRecentSearchData({}, {})
+        }
+      }
+    }
+  }
+
+  const onBlur = () => {
+    searchFocus = false;
+
+    if (searchValue.length < 2 && !gameFocus) {
+      searched = false;
+      searchArray = [];
+      recentSearches = false;
+      lobbyScreen = lobbyViewAux;
+      lobbyViewAux = false;
+      if (lobbyScreen === false) {
+        window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory }, window.location.href);
+      }
+
+      window.postMessage({ type: 'OutOfRecentSearches' }, window.location.href);
+    }
+  }
+
+  const addSearchedItem = (gameID:any) => {
+    searchedValues = getCookieValue(`searchedGamesWds_${lobbyid}`);
+
+    if (searchedValues) {
+      searchedValues = searchedValues.split(',');
+    } else {
+      searchedValues = [];
+    }
+    if (searchedValues.indexOf(gameID) === -1) {
+      let value;
+
+      searchedValues.push(gameID);
+      value = searchedValues.join(',');
+      document.cookie = `searchedGamesWds_${lobbyid}=` + value;
+    }
+  }
+
+  // @TODO let's do some small changes around here in order to have this search functionality pretty written, 'cuz right now is kinda shitty
+  const searchValueChanged = () => {
+    if (searchValue.length >= 2) {
+      searchBarCleared = true;
+    } else {
+      searchBarCleared = false;
+    }
+  }
+
+  $: searchValue && searchValueChanged();
+
+  $: if (searchValue.length >= 2) {
+    searched = true;
+
+    let searchUrl:any = new URL(`${endpoint}/casino/games`);
+
+    searchUrl.searchParams.append("datasource", datasource);
+    searchUrl.searchParams.append("expand", "vendor");
+    searchUrl.searchParams.append("platform", getDevice(userAgent));
+    searchUrl.searchParams.append("language", lang);
+    searchUrl.searchParams.append("pagination", "offset=0,limit=30");
+    searchUrl.searchParams.append("filter", `name=${searchValue}`);
+
+    getGames(searchUrl).then((searchData:any) => {
+      searchArray = searchData;
+
+      sendSearchData({}, searchData);
+    });
+  } else {
+    if (!searchBarCleared) {
+      onFocus();
+    }
+
+    if (initialLoaded) {
+      initialLoaded = false;
+    }
+  }
+
+  const setFilterNumberValue = () => {
+    let vendors = JSON.parse(sessionStorage.getItem('vendorFiltersByCategory'));
+
+    if (vendors) {
+      if(currentCategoryId) {
+        if(vendors[currentCategoryId]) {
+          numberOfFilters = vendors[currentCategoryId].length;
+        } else {
+          numberOfFilters = 0;
+        }
+      }
+    }
+  }
+
+  const searchActivated = () => {
+    window.postMessage({ type: "scroll" }, window.location.href);
+  }
+
+  const clearSearchbar = () => {
+    searchBarCleared = true;
+    searchValue = '';
+    searchArray = [];
+    recentSearches = false;
+
+    onBlur();
+  }
+
+  //
+  // --- START of communication with other widgets
+  //
+  const sendMostPlayed = (node:any, mostPlayedData:CategoriesData) => {
+    window.postMessage({ type: 'MostPlayedData', mostPlayedData }, window.location.href);
+  }
+
+  const submitFilters = (venArray:Array<Object>) => {
+    window.postMessage({ type: "AvailableVendors", venArray}, window.location.href);
+  }
+
+  const updateFilters = (venArray:Array<Object>) => {
+    window.postMessage({ type: "UpdateSelectedVendorFilters", venArray}, window.location.href);
+  }
+
+  const sendRecentSearchData = (node:any, searchData:any) => {
+    window.postMessage({ type: "RecentSearchData", searchData }, window.location.href);
+  }
+
+  const openFiltersModal = () => {
+    window.postMessage({ type: "ShowFilterModal" }, window.location.href);
+  }
+
+  const clearVendorFilter = () => {
+    window.postMessage({ type: "ClearVendorFilters" }, window.location.href);
+  }
+
+  const sendCategoryData = (node:any, categoryId:string) => {
+    currentCategoryId = categoryId;
+    window.postMessage({ type: `CategoryData_${categoryId}`, categoryId, visiblegames, receivedFavoriteResults }, window.location.href);
+  }
+
+  const sendSearchData = (node:any, searchData:CategoriesData) => {
+    if (searchData) {
+      window.postMessage({ type: "SearchData", searchData, receivedFavoriteResults }, window.location.href);
+    }
+  }
+
+  //
+  // --- END of communication with other widgets
+  //
+
+  /* Listen for scroll */
+  const scrollHandler = () => {
+    if(searchElementWrapper) {
+      searchPositionTop = searchElementWrapper.getBoundingClientRect().top + document.body.getBoundingClientRect().top;
+    }
+    if (document.documentElement.scrollTop > searchPositionTop || searchPositionTop > 130) {
+      adjustingScroll = true;
+    } else {
+      adjustingScroll = false;
+    }
+  }
+
+  const checkAttrs = () => {
+    if (!endpoint) {
+      error = "Endpoint is missing! Please provide a valid endpointURL.";
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(error);
+    }
+
+    if (!datasource) {
+      error = "Datasource is missing! Please provide a valid datasource.";
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(error);
+    }
+
+    if (!lang || lang.length < 2) {
+      error = "Language is missing! Please provide a valid language (alpha2code)";
+      hasErrors = true;
+      isLoading = false;
+
+      console.error(error);
+    }
+
+    return hasErrors;
+  }
+  const updateCategoriesLanguage = () => {
+    if(firstLoad) {
+      setTimeout(() => {
+        window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory}, window.location.href);
+      }, 500);
+    }
+    firstLoad = false;
+  }
+
+  const initialSetup = () => {
+    if (!checkAttrs()) {
+      isLoading = true;
+
+      if (favorites == 'true') {
+        getFavoredGames(endpoint, sessionID, playerID);
+      }
+
+      setLocale(lang);
+
+      let categoriesUrl = new URL(`${endpoint}/casino/groups/${datasource}`);
+
+      categoriesUrl.searchParams.append('language', lang);
+      categoriesUrl.searchParams.append('platform', getDevice(userAgent));
+
+      getCategories(categoriesUrl).then((data:CategoriesData) => {
+        if (data) {
+          categoriesData = data.items.filter((item:any) => {
+            return item.games.total > 0;
+          });
+
+          shownCategories = categories = categoriesData.map((item:any) => {
+            return item.id;
+          });
+
+          isLoading = false;
+        }
+      });
+
+      if (getDevice(userAgent) !== 'PC') {
+        searchElement.addEventListener('focusin', (event) => {
+          mobileSearchViewActive = true;
+        });
+
+        searchElement.addEventListener('focusout', (event) => {
+          mobileSearchViewActive = false;
+        });
+      }
+
+      setFilterNumberValue();
+
+      searchElementWrapper = searchWrapper;
+
+      if (searchElementWrapper) {
+        searchPositionTop = searchElementWrapper.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
+      }
+    }
+  }
+
+  const setActiveCategory = ():void => {
+    activeCategory = activecategory;
+    CategoryChangeHandler({ data: { itemId: activeCategory }});
+  }
+
+  const setSession = () => {
+    isLoggedIn = true;
+    sessionID = session;
+    playerID = userid;
+    if (playerID && playerID.length && sessionID && sessionID.length > 0) {
+      getFavoredGames(endpoint, sessionID, playerID);
+    }
+  }
+
+  const setClientStyling = () => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    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 startInterval = (e:any):void => {
+    timer = 0;
+
+    timerInterval = setInterval(() => {
+      timer += 1;
+      panicLoading = true;
+
+      if (timer >= 3) {
+        window.postMessage({type: 'PanicButtonClicked'}, window.location.href);
+        clearInterval(timerInterval)
+      }
+    }, 1000);
+  }
+
+  const endInterval = (e:any):void => {
+    if (timer < 3) {
+      panicLoading = false;
+    }
+    clearInterval(timerInterval);
+  }
+
+  const addEventsToDisplayedElements = () => {
+    panicButton?.addEventListener("mousedown", startInterval, false);
+    panicButton?.addEventListener('touchstart', startInterval, false);
+
+    // on mouseup stop interval count
+    panicButton?.addEventListener("mouseup", endInterval, false);
+    panicButton?.addEventListener("touchend", endInterval, false);
+  }
+
+  const removeEventsToDisplayedElements = ():void => {
+    panicLoading = false;
+    panicButton?.removeEventListener("mousedown", startInterval);
+    panicButton?.removeEventListener('touchstart', startInterval);
+
+    // on mouseup stop interval count
+    panicButton?.removeEventListener("mouseup", endInterval);
+    panicButton?.removeEventListener("touchend", endInterval);
+  }
+
+  onMount(() => {
+    window.addEventListener('scroll', scrollHandler, false);
+    window.addEventListener('message', messageHandler, false);
+
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('message', messageHandler);
+
+      removeEventsToDisplayedElements();
+    }
+  });
+
+  $: lang && activecategory && setActiveCategory();
+  $: session && userid && endpoint && setSession();
+  $: endpoint && datasource && lang && alternativesearch && initialSetup();
+  $: lang && updateCategoriesLanguage();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
+  $: panicButton && addEventsToDisplayedElements();
+</script>
+
+{#if hasErrors}
+  <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.500')}</p>
+{:else}
+  <section class="CategoriesLobby" part="CategoriesLobby" bind:this={customStylingContainer} style="max-width: {containermaxwidth}px;">
+    {#if (getDevice(userAgent) !== 'PC') && (alternativesearch === 'false') && mobileSearchViewActive}
+      <div class="SearchBarPlaceholder" part="SearchBarPlaceholder"></div>
+    {/if}
+
+    {#if alternativesearch === 'false'}
+      <!-- main search layout -->
+      <div bind:this={searchWrapper} class="CategoriesHeaderSection {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''} {(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
+      style="top: {adjustingScroll && mobileSearchViewActive ? scrollOffset + 'px' : ''}"
+      part="CategoriesHeaderSection {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''} {(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}">
+        <div class="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}" part="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}">
+          <label for="search" class="SrOnly" part="SrOnly">{$_('casinoPage.searchGames')}</label>
+          <div class="SearchWrapper" part="SearchWrapper">
+            {#if !mobileSearchViewActive}
+              <div class="SearchIcon" part="SearchIcon">
+                <svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            {/if}
+            <input id="SearchField" class="SearchInput" part="SearchInput" on:focus={onFocus} on:blur={onBlur} bind:this={searchElement} bind:value={searchValue} placeholder="{(getDevice(userAgent) === 'PC') ? $_('casinoPage.search') : $_('casinoPage.searchMobile')}" type="search" on:focus={searchActivated} />
+            {#if ((getDevice(userAgent) === 'PC') && searchValue.length) ||  (getDevice(userAgent) !== 'PC') }
+              <span class="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" part="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" on:click="{() => clearSearchbar()}">
+                <div class="CloseIconContainer" part="CloseIconContainer">
+                  <div class="CloseIconWrapper" part="CloseIconWrapper">
+                    <div class="CloseIcon" part="CloseIcon"></div>
+                  </div>
+                </div>
+              </span>
+            {/if}
+          </div>
+        </div>
+        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searched && !searchFocus && !lobbyViewAux}
+            <div class="FiltersButtonsContainer" part="FiltersButtonsContainer">
+            {#if numberOfFilters}
+              <div class="ClearFilterButtonWrapper" part="ClearFilterButtonWrapper" on:click="{() => clearVendorFilter()}">
+                <div class="ClearButton" part="ClearButton">{$_('casinoPage.clear')}
+                  <span class="ClearIcon" part="ClearIcon">
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                        viewBox="0 0 378.303 378.303" style="enable-background:new 0 0 378.303 378.303;" xml:space="preserve">
+                      <polygon style="fill:var(--emfe-w-color-secondary, #FD2839);" points="378.303,28.285 350.018,0 189.151,160.867 28.285,0 0,28.285 160.867,189.151 0,350.018
+                        28.285,378.302 189.151,217.436 350.018,378.302 378.303,350.018 217.436,189.151 "/>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            {/if}
+            {#if !searched || !recentSearches}
+              {#if !mostPlayedScreen}
+                <div class="FilterButtonWrapper" part="FilterButtonWrapper" on:click='{() => {openFiltersModal()}}'>
+                  <div class="FilterButton" part="FilterButton">{$_('casinoPage.filters')}</div>
+                  <div class="FilterIconContainer" part="FilterIconContainer">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 26 26"><defs><style>.a{fill:var(--emfe-w-color-white, #FFFFFF);}</style></defs><path class="a" d="M16.7,32.2a1.654,1.654,0,0,1-.636-.148,1.526,1.526,0,0,1-.867-1.393V20.578L5.433,10.588A1.543,1.543,0,0,1,5,9.491V7.742A1.512,1.512,0,0,1,6.5,6.2h23A1.512,1.512,0,0,1,31,7.742V9.491a1.543,1.543,0,0,1-.433,1.1L20.8,20.578v7.738a1.594,1.594,0,0,1-.52,1.156l-2.6,2.312A1.461,1.461,0,0,1,16.7,32.2ZM6.618,9.431l9.764,10.02a1.543,1.543,0,0,1,.433,1.1v9.813l2.34-2.075V20.519a1.543,1.543,0,0,1,.433-1.1L29.353,9.4V7.831H6.618Z" transform="translate(-5 -6.2)"/></svg>
+                    <div class="NumberOfFiltersContainer" part="NumberOfFiltersContainer">
+                      <span class="NumberOfFilters" part="NumberOfFilters">{numberOfFilters}</span>
+                    </div>
+                  </div>
+                </div>
+              {/if}
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <!-- start alternative search layout-->
+      <div bind:this={searchWrapper} class="CategoriesHeaderSection CategoriesHeaderSectionAltDesign {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''}{(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
+       part="CategoriesHeaderSection CategoriesHeaderSectionAltDesign {(getDevice(userAgent) !== 'PC') ? 'CategoriesHeaderMobileSection' : ''} {mobileSearchViewActive ? 'SearchMobileActive' : ''} {mobileSearchViewActive || (searched && !(getDevice(userAgent) === 'PC') && !closeSearch) ? 'CategoriesHeaderSearchActive' : ''}{(adjustingScroll && mobileSearchViewActive) ? 'SearchStickTop' : ''}"
+      style="top: {adjustingScroll && mobileSearchViewActive ? scrollOffset + 'px' : ''}">
+        <div class="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}" part="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}">
+          <label for="search" class="SrOnly" part="SrOnly">{$_('casinoPage.searchGames')}</label>
+          <div class="SearchWrapper" part="SearchWrapper">
+            {#if !mobileSearchViewActive}
+              <div class="SearchIcon" part="SearchWrapper">
+                <svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+                </svg>
+              </div>
+            {/if}
+
+            <input id="SearchField" class="SearchInput" part="SearchInput" on:focus={onFocus} on:blur={onBlur} bind:this={searchElement} bind:value={searchValue} placeholder="{(getDevice(userAgent) === 'PC') ? $_('casinoPage.search') : $_('casinoPage.searchMobile')}" type="search" on:focus={searchActivated} />
+            {#if ((getDevice(userAgent) === 'PC') && searchValue.length) ||  (getDevice(userAgent) !== 'PC')}
+              <span class="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" part="{(getDevice(userAgent) === 'PC') ? 'ClearSearchButton' : 'ClearSearchButtonMobile'}" on:click="{() => clearSearchbar()}">
+                <div class="CloseIconContainer" part="CloseIconContainer">
+                  <div class="CloseIconWrapper" part="CloseIconWrapper">
+                    <div class="CloseIcon" part="CloseIcon"></div>
+                  </div>
+                </div>
+              </span>
+            {/if}
+          </div>
+        </div>
+        {#if !favoritesScreen && !lobbyScreen && !mobileSearchViewActive && !mostPlayedScreen && !recentSearches && !searchFocus && !searched && !lobbyViewAux}
+            <div class="FiltersButtonsContainer" part="FiltersButtonsContainer">
+            {#if numberOfFilters}
+              <div class="ClearFilterButtonWrapper {numberOfFilters ? 'FiltersActive' : ''}" part="ClearFilterButtonWrapper {numberOfFilters ? 'FiltersActive' : ''}" on:click="{() => clearVendorFilter()}">
+                <div class="ClearButton" part="ClearButton">{$_('casinoPage.clear')}
+                  <span class="ClearIcon" part="ClearIcon">
+                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                        viewBox="0 0 378.303 378.303" style="enable-background:new 0 0 378.303 378.303;" xml:space="preserve">
+                      <polygon style="fill:var(--emfe-w-color-secondary, #FD2839);" points="378.303,28.285 350.018,0 189.151,160.867 28.285,0 0,28.285 160.867,189.151 0,350.018
+                        28.285,378.302 189.151,217.436 350.018,378.302 378.303,350.018 217.436,189.151 "/>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            {/if}
+            {#if !searched || !recentSearches}
+              {#if !mostPlayedScreen}
+                <div class="FilterButtonWrapper" part="FilterButtonWrapper" on:click='{() => {openFiltersModal()}}'>
+                  <div class="FilterButton" part="FilterButton">{$_('casinoPage.filters')}</div>
+                  <div class="FilterIconContainer" part="FilterIconContainer">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 26 26"><defs><style>.a{fill:var(--emfe-w-color-white, #FFFFFF);}</style></defs><path class="a" d="M16.7,32.2a1.654,1.654,0,0,1-.636-.148,1.526,1.526,0,0,1-.867-1.393V20.578L5.433,10.588A1.543,1.543,0,0,1,5,9.491V7.742A1.512,1.512,0,0,1,6.5,6.2h23A1.512,1.512,0,0,1,31,7.742V9.491a1.543,1.543,0,0,1-.433,1.1L20.8,20.578v7.738a1.594,1.594,0,0,1-.52,1.156l-2.6,2.312A1.461,1.461,0,0,1,16.7,32.2ZM6.618,9.431l9.764,10.02a1.543,1.543,0,0,1,.433,1.1v9.813l2.34-2.075V20.519a1.543,1.543,0,0,1,.433-1.1L29.353,9.4V7.831H6.618Z" transform="translate(-5 -6.2)"/></svg>
+                    {#if numberOfFilters > 0}
+                    <div class="NumberOfFiltersContainer" part="NumberOfFiltersContainer">
+                      <span class="NumberOfFilters" part="NumberOfFilters">{numberOfFilters}</span>
+                    </div>
+                      {/if}
+                  </div>
+                </div>
+              {/if}
+            {/if}
+          </div>
+        {/if}
+      </div>
+      <!-- end alternative search layout-->
+    {/if}
+
+    {#if playrandomgame == 'true' && searchFocus == false}
+      <casino-random-game {datasource} {endpoint} {lang} {gameevent} {randombuttonicon}>
+      </casino-random-game>
+    {/if}
+
+    {#if isLoading}
+      <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.loading')}</p>
+    {:else}
+      {#if searched}
+        <casino-games-category-section
+          endpoint={endpoint}
+          datasource={datasource}
+          lang={lang}
+          currency={currency}
+          session={session}
+          userid={userid}
+          use:sendSearchData={searchArray}
+          categoryid="Search"
+          favorites={favorites}
+          categoryindex="0"
+          class="CategoryContainer"
+          {clientstyling}
+          {clientstylingurl}
+          {livecasino}
+          {visiblegames}
+          {gamepagemodalurl}
+          {enablecasinowinners}
+          {enableautoscroll}
+          {tabsorder}
+          {isrecentavailable}
+          {istopavailable}
+        />
+      {:else}
+        {#if lobbyScreen}
+          {#each shownCategories as category, index}
+            {#if index === 4}
+            <br>
+            <jackpot-banner
+              visualstructure="typeSpread" 
+              lang="gr" 
+              title="Jackpot Cards" 
+              backgroundsrc="../mock_rsrc/background0.png"
+              backgroundsrcmobile=""
+              currency = {currency || 'RON'}
+              gameid = "999"
+              endpoint = "https://winmasters-ro-api.stage.norway.everymatrix.com/v1/casino/jackpots"
+
+              titlelogopath = "../mock_rsrc/jackpots_logo.svg"
+        
+              caticon0="../../jackpot-banner/mock_rsrc/icon0.svg"
+              caticon1="../mock_rsrc/icon1.svg"
+              caticon2="../mock_rsrc/icon2.svg"
+              caticon3="../mock_rsrc/icon3.svg"
+            ></jackpot-banner>
+            {:else if index === 6}
+            <br>
+            <jackpot-banner
+              visualstructure="typeLeft" 
+              lang="en" 
+              title="Egypt Quest"
+              backgroundsrc="../mock_rsrc/background_egypt.svg"
+              backgroundsrcmobile="../mock_rsrc/background0.png"
+              currency = {currency || 'RON'}
+              gameid = "998"
+              endpoint = "https://winmasters-ro-api.stage.norway.everymatrix.com/v1/casino/jackpots"
+
+              titlelogopath = "../mock_rsrc/egypt_logo.svg"
+              
+              caticon0="../mock_rsrc/egypt_icon0.svg"
+              caticon1="../mock_rsrc/egypt_icon0.svg"
+              caticon2="../mock_rsrc/egypt_icon0.svg"
+              caticon3="../mock_rsrc/egypt_icon0.svg"
+              iconlabels="platinum, gold, silver, bronze"
+            ></jackpot-banner>
+            {/if}
+            <casino-games-category-section
+              session={session}
+              userid={userid}
+              endpoint={endpoint}
+              datasource={datasource}
+              lang={lang}
+              currency={currency}
+              use:sendCategoryData={category}
+              categoryid={category}
+              categoryindex={index}
+              categorygames="9"
+              favorites={favorites}
+              class="CategoryContainer"
+              style="background-color: {(index % 2 !== 0) ? categorybackground : 'transparent'}"
+              {clientstyling}
+              {clientstylingurl}
+              {livecasino}
+              {visiblegames}
+              {gamepagemodalurl}
+              {enablecasinowinners}
+            />
+          {/each}
+        {:else if favoritesScreen}
+          <casino-games-category-section
+          session={session}
+          userid={userid}
+          endpoint={endpoint}
+          datasource={datasource}
+          lang={lang}
+          currency={currency}
+          favorites={favorites}
+          use:getFavoredGames={`${endpoint}/player/${playerID}/favorites/`, sessionID, playerID}
+          categoryid={"FAVORITES"}
+          class="CategoryContainer"
+          {clientstyling}
+          {clientstylingurl}
+          {livecasino}
+          {visiblegames}
+          {gamepagemodalurl}
+          {enablecasinowinners}
+        />
+        {:else if mostPlayedScreen}
+          {#if mostPlayedEmpty}
+            <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.noGamesPlayed')}</p>
+          {:else}
+            <casino-games-category-section
+              session={session}
+              userid={userid}
+              endpoint={endpoint}
+              datasource={datasource}
+              lang={lang}
+              currency={currency}
+              favorites={favorites}
+              categoryid="MOSTPLAYED"
+              categoryindex="1"
+              categorygames="9"
+              class="CategoryContainer"
+              {clientstyling}
+              {clientstylingurl}
+              {livecasino}
+              {visiblegames}
+              {gamepagemodalurl}
+              {enablecasinowinners}
+            />
+          {/if}
+        {:else}
+          {#if !recentSearches}
+            <casino-games-category-section
+              userid={userid}
+              endpoint={endpoint}
+              datasource={datasource}
+              favorites={favorites}
+              lang={lang}
+              currency={currency}
+              session={session}
+              categoryid={activeCategory}
+              categorygames="9"
+              class="CategoryContainer"
+              {clientstyling}
+              {clientstylingurl}
+              {livecasino}
+              {visiblegames}
+              {gamepagemodalurl}
+              {enablecasinowinners}
+            />
+          {/if}
+        {/if}
+      {/if}
+    {/if}
+    {#if isLoggedIn && haspanicbutton == "true"}
+      <div class="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}" part="PanicSection {(getDevice(userAgent) !== 'PC') ? 'PanicSectionMobile' : ''}">
+        <button class="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile ' : ''}" class:PanicButtonAnimation={panicLoading} part="PanicButton {(getDevice(userAgent) !== 'PC') ? 'PanicButtonMobile' : ''}" bind:this={panicButton} >{$_('casinoPage.breakButton')}</button>
+      </div>
+    {/if}
+  </section>
+{/if}
+
+<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;
+  }
+
+  .CategoriesLobby {
+    margin: 0 auto;
+  }
+
+  .PanicSectionMobile {
+    flex-direction: column;
+    margin: 20px 0;
+  }
+
+  .PanicSection {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-top: 20px;
+  }
+
+  .PanicButton {
+    border-radius: 5px;
+    border: 1px solid var(--emfe-w-color-primary, #D0046C);
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    width: 280px;
+    height: 48px;
+    line-height: 18px;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    cursor: pointer;
+  }
+
+  .PanicButtonAnimation {
+    background: -webkit-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+
+    background: -moz-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+
+    background: -o-linear-gradient(
+        135deg,
+        rgba(20, 20, 20, 0) 55%, rgba(20, 20, 20, 0.3) 100%
+    );
+
+    background-color: var(--emfe-w-color-primary, #D0046C);
+    width: 280px;
+    color: #fff;
+
+    -webkit-animation: bar-animation 2s linear;
+  }
+
+  .PanicButtonMobile {
+    width: 280px;
+    padding: 0 5px;
+
+    //Remove text selection for panic button on mobile
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none;
+    // End of removing selection properties
+  }
+
+  @-webkit-keyframes bar-animation {
+    0% {
+      background-position: 0;
+    }
+    100% {
+      background-position: 280px;
+    }
+  }
+
+
+  [type="search"] {
+    appearance: none;
+  }
+
+  .SrOnly {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .CategoryContainer {
+    display: block;
+
+    @media screen and (max-width: 1300px) {
+      padding: 0 2.4%
+    }
+  }
+
+  .SearchLoading {
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 14px;
+    margin-top: 16px;
+    text-align: center;
+  }
+
+  .SearchContainer {
+    flex: 3;
+    width: 100%;
+    max-width: 600px;
+    margin: auto 0 auto 30%;
+    &.SearchTruncated {
+      margin: auto 0 auto 30%;
+      .SearchInput {
+        tabindex: 999;
+        padding: 20px 12px 20px 40px;
+      }
+    }
+    .SearchWrapper {
+      position: relative;
+      display: inline-flex;
+      color: rgba(199, 210, 254, 1);
+
+      .SearchIcon {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        top: 0;
+        bottom: 0;
+        left: 1.2%;
+        pointer-events: none;
+
+        svg {
+          width: 26px;
+          height: 26px;
+          display: block;
+          vertical-align: middle;
+          fill: rgba(199, 210, 254, 1);
+        }
+      }
+      .SearchInput {
+        width: 520px;
+        display: block;
+        padding: 12px 12px 12px 40px;
+        border-radius: 6px;
+        border-color: transparent;
+        font-size: 16px;
+        background-color: rgba(156, 163, 175, 0.25);
+        color: rgba(224, 231, 255, 1);
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+          -webkit-appearance:none;
+        }
+
+        &::placeholder {
+          color:rgba(255, 255, 255, 1);
+        }
+
+        &:focus {
+          background-color: rgba(255, 255, 255, 1);
+          color: rgba(17, 24, 39, 1);
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+
+          &::placeholder {
+            color: rgba(156, 163, 175, 1);
+          }
+        }
+      }
+
+      &:focus-within {
+        color: rgba(156, 163, 175, 1);
+
+        .SearchIcon svg {
+          fill: rgba(156, 163, 175, 1);
+        }
+      }
+    }
+  }
+
+  .FiltersButtonsContainer {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    flex: 1;
+    grid-gap: 20px;
+    flex-direction: row-reverse;
+  }
+  .FilterButtonWrapper, .ClearFilterButtonWrapper {
+    display: inline-flex;
+    padding: 10px;
+    border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+    border-radius: 5px;
+    text-transform: uppercase;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    cursor: pointer;
+  }
+  .ClearFilterButtonWrapper {
+    border: 1px solid var(--emfe-w-color-secondary, #FD2839);
+    color: var(--emfe-w-color-secondary, #FD2839);
+  }
+  .FilterIconContainer, .ClearIcon {
+    position: relative;
+    padding-left: 5px;
+  }
+  .FilterIconContainer {
+    top: 2px;
+  }
+  .ClearIcon {
+    position: relative;
+    top: 1px;
+    svg {
+      width: 14px;
+    }
+  }
+  .FilterButtonWrapper, .ClearFilterButtonWrapper {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .NumberOfFiltersContainer {
+    display: block;
+    line-height: 0px;
+    border-radius: 50%;
+    border: 2px solid var(--emfe-w-color-primary, #D0046C);
+    background: var(--emfe-w-color-primary, #D0046C);
+    color: var(--emfe-w-color-white, #FFFFFF);
+    font-size: 12px;
+    position: absolute;
+    top: -5px;
+    left: 18px;
+    .NumberOfFilters {
+      display: inline-block;
+      padding-top: 50%;
+      padding-bottom: 50%;
+      margin-left: 3px;
+      margin-right: 3px;
+    }
+  }
+
+  .CategoriesHeaderSection {
+    width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    margin-top: 30px;
+  }
+  .CategoriesHeaderMobileSection {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    flex-direction: row-reverse;
+    z-index: 1;
+    .ClearFilterButtonWrapper {
+      display: none;
+    }
+    .SearchContainer {
+      flex: 1;
+      max-width: unset;
+      margin: unset;
+      background-color: rgba(208, 5, 108, 1);
+      z-index: 1;
+      .SearchWrapper {
+        display: flex;
+        color: var(--emfe-w-color-white, #FFFFFF);
+        .SearchIcon {
+          left: 2.4%;
+        }
+        .SearchInput {
+          padding: 12px;
+          border-radius: 0;
+          background-color: rgba(208, 5, 108, 1);
+          color: var(--emfe-w-color-white, #FFFFFF);
+          text-align: center;
+          opacity: 1;
+          &::placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+            color: rgba(255, 255, 255, 1);
+            opacity: 1; /* Firefox */
+          }
+        }
+        path {
+          fill: var(--emfe-w-color-white, #FFFFFF);
+        }
+      }
+    }
+    .FiltersButtonsContainer {
+      flex: 1;
+      .FilterButtonWrapper {
+        position: relative;
+        width: 100%;
+        display: flex;
+        flex-direction: row-reverse;
+        border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+        border-radius: 0;
+        background: var(--emfe-w-color-white, #FFFFFF);
+        color: var(--emfe-w-color-primary, #D0046C);
+      }
+      .FilterIconContainer {
+        position: absolute;
+        left: 40px;
+        top: revert;
+        padding-left: 0;
+        path {
+          fill: var(--emfe-w-color-primary, #D0046C);
+        }
+      }
+    }
+    .NumberOfFiltersContainer {
+      font-size: 8px;
+      left: 15px;
+    }
+  }
+
+  // start alternative search design
+  .CategoriesHeaderSectionAltDesign {
+    &.CategoriesHeaderMobileSection {
+      flex-direction: row;
+      position: relative;
+      margin-top: 30px;
+      .SearchContainer {
+        background-color: var(--emfe-w-color-contrast, #07072A);
+
+        padding: 0 2.4%;
+        .SearchWrapper {
+          justify-content: center;
+          .SearchInput {
+            width: 100%;
+            border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+            border-radius: 6.4px;
+            background-color: transparent;
+            color: var(--emfe-w-color-white, #FFFFFF);
+            padding: 12px 3.6%;
+            &:active, &:focus {
+              width: 100%;
+            }
+          }
+        }
+      }
+      .FiltersButtonsContainer {
+        position: absolute;
+        top: 160px;
+        font-size: 13px;
+        gap: 6px;
+
+        @media screen and (max-width: 1300px) {
+        right: 2.4%;
+      }
+
+        .FilterIconContainer {
+          display: none;
+        }
+        .FilterButtonWrapper {
+          border-radius: 5px;
+          border: 1px solid var(--emfe-w-color-white, #FFFFFF);
+          background: transparent;
+          color: var(--emfe-w-color-white, #FFFFFF);
+          padding: 6px 16px;
+        }
+        .ClearFilterButtonWrapper {
+          padding: 6px 16px;
+          .ClearIcon {
+            display: none;
+          }
+        }
+      }
+      &.CategoriesHeaderSearchActive {
+        top: 0;
+      }
+    }
+    .FiltersActive.ClearFilterButtonWrapper {
+      display: inline-flex;
+    }
+    .ClearSearchButton {
+      right: 2.4%;
+      top: 11px;
+    }
+    .ClearSearchButtonMobile {
+      right: 2.4%;
+      top: 9px;
+    }
+  }
+  // end alternative search design
+  .ClearFilterMobileButtonWrapper {
+    position: absolute;
+    right: 5px;
+    padding: 8px 18px;
+    display: inline-flex;
+    border: 1px solid var(--emfe-w-color-gray-300, #58586B);
+    border-radius: 5px;
+    border: 1px solid var(--emfe-w-color-secondary, #FD2839);
+    text-transform: uppercase;
+    color: var(--emfe-w-color-white, #FFFFFF);
+    cursor: pointer;
+    color: var(--emfe-w-color-secondary, #FD2839);
+    font-size: 14px;
+    .ClearIcon svg {
+      width: 12px;
+    }
+  }
+  .CategoriesHeaderSearchActive {
+    position: fixed;
+    bottom: unset;
+    top: 70px;
+    margin-top: 0;
+    .SearchContainer {
+      background-color:rgba(255, 255, 255, 1);
+      .SearchWrapper {
+        .SearchInput {
+          background-color: rgba(255, 255, 255, 1);
+          color: var(--emfe-w-color-black, #000000);
+        }
+      }
+    }
+  }
+  .SearchStickTop {
+    margin-top: 0;
+  }
+  @media (max-width: 768px) {
+    .SearchContainer {
+      margin: auto 3% auto 0%;
+    }
+  }
+  // push content lower when on mobile and search is active
+  .SearchBarPlaceholder {
+    display: block;
+    width: 100%;
+    height: 46px;
+  }
+  // push content lower when on mobile and search is active
+  .SearchBarPlaceholder {
+    display: block;
+    width: 100%;
+    height: 46px;
+  }
+
+  .ClearSearchButton, .ClearSearchButtonMobile {
+    cursor: pointer;
+    position: absolute;
+    right: 14px;
+    top: 11px;
+    .CloseIconContainer {
+      width: 25px;
+      height: 25px;
+    }
+
+    .CloseIconWrapper {
+      height: 25px;
+      width: 3px;
+      margin-left: 12px;
+      background-color:var(--emfe-w-color-white, #FFFFFF);
+      transform: rotate(45deg);
+      Z-index: 1;
+    }
+
+    .CloseIcon {
+      height: 25px;
+      width: 3px;
+      background-color:var(--emfe-w-color-white, #FFFFFF);
+      transform: rotate(90deg);
+      Z-index: 2;
+    }
+  }
+    .SearchContainer {
+      .CloseIconWrapper, .CloseIcon {
+        background-color: var(--emfe-w-color-secondary, #FD2839);
+      }
+    }
+  .ClearSearchButtonMobile {
+    display: none;
+  }
+  .CategoriesHeaderSearchActive  {
+    .ClearSearchButtonMobile {
+      display: block;
+      .CloseIconWrapper, .CloseIcon {
+        background-color: var(--emfe-w-color-secondary, #FD2839);
+      }
+    }
+  }
+
+</style>