@everymatrix/casino-page 1.3.4 → 1.4.1

package/src/CasinoPage.svelte

@@ -20,6 +20,8 @@
   import '@everymatrix/casino-favorites-section';
   import '@everymatrix/casino-last-played-section';
   import '@everymatrix/casino-most-played-section';
+  import '@everymatrix/casino-my-games';
+  import '@everymatrix/casino-search';
 
   export let endpoint:string = '';
   export let datasource:string = '';
@@ -79,6 +81,8 @@
   export let positioncollections:string = '';
   export let type:string = '';
   export let titletype:string = '';
+  export let casinomygames:string = 'false';
+  export let collectionprovidersgamenames:string = '';
 
   // Button icon for random game widget
   export let randombuttonicon:string = '';
@@ -107,24 +111,18 @@
   let timerInterval:any;
 
   // CasinoPage state
-  let favoritesScreen:boolean = false;
+  let myGamesSection: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 lastPlayedScreen:boolean = false;
   let adjustingScroll:boolean = false;
-  let searchBarCleared:boolean = true;
+  let searchIsOn:boolean = false;
 
   // 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 allCategoriesIds:string[] = [];
@@ -148,17 +146,12 @@
   let searchElement:HTMLElement;
   let mobileSearchViewActive:boolean = false;
   let searchedValues:any = [];
-  let mostPlayedValues:any = [];
-  let lastPlayedValues: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: {}});
 
   const setTranslationUrl = ():void => {
@@ -182,6 +175,7 @@
     searched = false;
     searchValue = '';
     scrollTop = true;
+    casinomygames = 'false';
     // needs to be executed after the page has been populated
     setTimeout(() => {
       window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
@@ -189,15 +183,24 @@
     switch(categoryEvent.data.itemId) {
       case 'LOBBY':
         lobbyScreen = true;
-        favoritesScreen = false;
+        myGamesSection = false;
         activeCategory = '';
         mostPlayedScreen = false;
         lastPlayedScreen = false;
         break;
 
+      case 'MYGAMES':
+        casinomygames = 'true';
+        lobbyScreen = false;
+        myGamesSection = true;
+        mostPlayedScreen = false;
+        lastPlayedScreen = false;
+        activeCategory = '';
+        break;
+
       case 'FAVORITES':
         lobbyScreen = false;
-        favoritesScreen = true;
+        myGamesSection = true;
         mostPlayedScreen = false;
         lastPlayedScreen = false;
         activeCategory = '';
@@ -207,7 +210,7 @@
         if (mostplayed == 'true') {
           activeCategory = '';
           lobbyScreen = false;
-          favoritesScreen = false;
+          myGamesSection = true;
           mostPlayedScreen = true;
         }
       break;
@@ -217,14 +220,14 @@
           activeCategory = '';
           lobbyScreen = false;
           lastPlayedScreen = true;
-          favoritesScreen = false;
+          myGamesSection = true;
           mostPlayedScreen = false;
         }
         break;
 
       default:
         lobbyScreen = false;
-        favoritesScreen = false;
+        myGamesSection = false;
         mostPlayedScreen = false;
         lastPlayedScreen = false;
         activeCategory = categoryEvent.data.itemId;
@@ -242,9 +245,9 @@
     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 'CategoryChange':
+          CategoryChangeHandler(e);
+          break;
 
         case 'UserSessionID':
           sessionID = e.data.session;
@@ -269,10 +272,6 @@
           }
           break;
 
-        case 'SearchedItemClicked':
-          addSearchedItem(e.data.gameId);
-          break;
-
         case 'UpdateFilters':
           updateFilters(e.data.vendorsArray);
           setFilterNumberValue();
@@ -293,42 +292,24 @@
           setFilterNumberValue();
           break;
 
-        case 'GameHoveredPc':
-          gameFocus = true;
-          break;
-
-        case 'GameBlurPc':
-          if(activeRecentSearches){
-            searchElement.focus();
-            gameFocus = false;
-          } else {
-            gameFocus = false;
-          }
-          break;
-
-        case 'GameHoveredMobile':
-          gameFocus = true;
-          break;
+        case "searchCancelled":
+          searchIsOn = false;
+        break;
 
-        case 'GameBlurMobile':
-          if(activeRecentSearches){
-            onBlur();
-          } else {
-            gameFocus = false;
-          }
-          break;
+        case "searchActive":
+          searchIsOn = true;
+        break;
 
         case 'ModalClosed':
           if(activeRecentSearches){
             activeRecentSearches = false;
-            gameFocus = false;
           }
           break;
 
         case 'SubgroupsIds':
           //Add subgroups ids fetched in the slider to the list of categories ids
           if(!allCategoriesIds.some(categoryId => e.data.subGroupsIds.includes(categoryId))) {
-            allCategoriesIds.push(...e.data.subGroupsIds);  
+            allCategoriesIds.push(...e.data.subGroupsIds);
           }
           break;
 
@@ -363,9 +344,6 @@
             }
             return receivedFavoriteResults;
           }).then((favResults) => {
-            if (favoritesScreen) {
-              showFavoriteGames();
-            }
             return favResults;
           }).catch((err:any) => {
             console.error(err);
@@ -387,10 +365,6 @@
       .then((updatedArray:Object) => {
         receivedFavoriteResults = updatedArray;
 
-        if (favoritesScreen) {
-          showFavoriteGames();
-        }
-
         if (receivedFavoriteResults) {
           window.postMessage({ type: "UpdateCategoryFavoriteGames", receivedFavoriteResults}, window.location.href);
         }
@@ -472,7 +446,7 @@
   const showFavoriteGames = () => {
     window.postMessage({ type: "ShowFavoriteSection", receivedFavoriteResults}, window.location.href);
   }
-  //
+
   // --- END of Favorites section
   //
 
@@ -555,130 +529,6 @@
     }
   }
 
-  const onFocus = () => {
-    activeRecentSearches = true;
-    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({}, {})
-        }
-      }
-    }
-    //Analytics event
-    if(typeof gtag == 'function'){
-      gtag('event', 'SearchInitialized', {
-        'context': 'CasinoPage'
-      });
-    }
-  }
-
-  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);
-      }
-
-    activeRecentSearches = false;
-    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'));
 
@@ -693,19 +543,6 @@
     }
   }
 
-  const searchActivated = () => {
-    window.postMessage({ type: "scroll" }, window.location.href);
-  }
-
-  const clearSearchbar = () => {
-    searchBarCleared = true;
-    searchValue = '';
-    searchArray = [];
-    recentSearches = false;
-
-    onBlur();
-  }
-
   //
   // --- START of communication with other widgets
   //
@@ -717,18 +554,6 @@
     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);
@@ -833,16 +658,6 @@
         }
       });
 
-      if (getDevice(userAgent) !== 'PC') {
-        searchElement.addEventListener('focusin', (event) => {
-          mobileSearchViewActive = true;
-        });
-
-        searchElement.addEventListener('focusout', (event) => {
-          mobileSearchViewActive = false;
-        });
-      }
-
       setFilterNumberValue();
 
       searchElementWrapper = searchWrapper;
@@ -859,7 +674,7 @@
   }
 
   const checkExistentCategory = ():void => {
-    //Check if the active category is found in the list of available categories. IF not send event to the state manager. 
+    //Check if the active category is found in the list of available categories. IF not send event to the state manager.
     if (allCategoriesIds && !allCategoriesIds.includes(decodeURI(activeCategory)) && activeCategory != '') {
       window.postMessage({type: 'NonExistentCategory'}, window.location.href);
     }
@@ -869,7 +684,7 @@
     isLoggedIn = true;
     sessionID = session;
     playerID = userid;
-    if (playerID && playerID.length && sessionID && sessionID.length > 0) {
+    if (playerID && playerID.length && sessionID && sessionID.length > 0 && casinomygames != 'true') {
       getFavoredGames(endpoint, sessionID, playerID);
     }
   }
@@ -960,140 +775,22 @@
     <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.500')}</p>
   {:else}
     <section class="CategoriesLobby" part="CategoriesLobby" style="max-width: {containermaxwidth}px;">
-      {#if (getDevice(userAgent) !== 'PC') && (alternativesearch === 'false') && mobileSearchViewActive}
+      {#if (getDevice(userAgent) !== 'PC') && (alternativesearch === 'false')}
         <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 && !lastPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}" part="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lastPlayedScreen && !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 && !lastPlayedScreen && !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 || !lastPlayedScreen}
-                  <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 && !lastPlayedScreen && !lobbyViewAux) ?  'SearchTruncated' : ''}" part="SearchContainer { (!lobbyScreen && !favoritesScreen && !mostPlayedScreen && !lastPlayedScreen && !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 && !lastPlayedScreen && !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}
+      <casino-search
+        {endpoint} {datasource} {lang} {clientstyling} {clientstylingurl} {integratedgameframedesktop} {integratedgameframemobile} {translationurl} showfavorites = {favorites}
+      ></casino-search>
 
-      {#if playrandomgame == 'true' && searchFocus == false}
+      {#if playrandomgame == 'true' && searchFocus == false && !searchIsOn}
         <casino-random-game {datasource} {filteredrandomgamecategories} {endpoint} {lang} {gameevent} {randombuttonicon} {clientstyling} {clientstylingurl}>
         </casino-random-game>
       {/if}
 
       {#if isLoading}
         <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.loading')}</p>
-      {:else}
+      {:else if !searchIsOn}
         {#if lobbyScreen}
           {#each shownCategories as category, index}
             {#if positionwinnerswidget && index == +positionwinnerswidget}
@@ -1166,6 +863,7 @@
                 {datasource}
                 {lang}
                 {type}
+                {collectionprovidersgamenames}
                 {titletype}
                 {clientstyling}
                 {clientstylingurl}>
@@ -1177,6 +875,7 @@
                 {lang}
                 type='vendor'
                 titletype="logo"
+                {collectionprovidersgamenames}
                 {clientstyling}
                 {clientstylingurl}>
               </casino-collections-providers>
@@ -1202,20 +901,18 @@
               {gamepagemodalurl}
               {integratedgameframedesktop}
               {integratedgameframemobile}
+              {casinomygames}
             />
           {/each}
-        {:else if favoritesScreen}
-          <casino-favorites-section
-          session={session}
+        {:else if myGamesSection}
+          <casino-my-games
           userid={userid}
+          session={session}
           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}
@@ -1223,27 +920,14 @@
           {gamepagemodalurl}
           {integratedgameframedesktop}
           {integratedgameframemobile}
-        />
-        {:else if mostPlayedScreen}
-          <casino-most-played-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}
-            {integratedgameframedesktop}
-            {integratedgameframemobile}
+          translationurl=""
+          {mostplayed}
+          {lastplayed}
+          {filteredcategories}
+          {activecategory}
+          categoryindex="0"
+          categoryid="MYGAMES"
+          {casinomygames}
           />
         {:else}
           {#if lobbyScreen}
@@ -1352,56 +1036,18 @@
                 {gamepagemodalurl}
                 {integratedgameframedesktop}
                 {integratedgameframemobile}
+                {casinomygames}
               />
             {/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}
-            {integratedgameframedesktop}
-            {integratedgameframemobile}
-          />
-          {:else if mostPlayedScreen}
-            <casino-most-played-section
+          {:else if myGamesSection}
+            <casino-my-games
               userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              favorites={favorites}
-              lang={lang}
-              currency={currency}
               session={session}
-              class="CategoryContainer"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-            ></casino-most-played-section>
-          {:else if lastPlayedScreen}
-            <casino-last-played-section
-              userid={userid}
               endpoint={endpoint}
               datasource={datasource}
-              favorites={favorites}
               lang={lang}
               currency={currency}
-              session={session}
-              class="CategoryContainer"
+              favorites={favorites}
               {clientstyling}
               {clientstylingurl}
               {livecasino}
@@ -1409,7 +1055,14 @@
               {gamepagemodalurl}
               {integratedgameframedesktop}
               {integratedgameframemobile}
-            ></casino-last-played-section>
+              {translationurl}
+              {mostplayed}
+              {lastplayed}
+              {filteredcategories}
+              {activecategory}
+              categoryindex="0"
+              categoryid="MYGAMES"
+              />
           {:else}
             <casino-games-category-section
               userid={userid}
@@ -1429,6 +1082,7 @@
               {gamepagemodalurl}
               {integratedgameframedesktop}
               {integratedgameframemobile}
+              {casinomygames}
             />
           {/if}
         {/if}
@@ -1455,6 +1109,7 @@
 
   .CategoriesLobby {
     margin: 0 auto;
+    position: relative;
   }
 
   .CasinoWinners {