@everymatrix/casino-page 1.5.3 → 1.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-page",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "main": "dist/casino-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "455c9a0d14fef23d3698fbea37042c69e3aeed24"
+  "gitHead": "0515078fefc5290a183afcfb2608cf265f2322c7"
 }

package/src/CasinoPage.svelte

@@ -116,12 +116,8 @@
 
   // CasinoPage state
   let myGamesSection:boolean = false;
-  let recentSearches:boolean = false;
-  let searched:boolean = false;
   let searchFocus:boolean = false;
   let lobbyScreen:boolean = true;
-  let mostPlayedScreen:boolean = false;
-  let lastPlayedScreen:boolean = false;
   let adjustingScroll:boolean = false;
   let searchIsOn:boolean = false;
 
@@ -176,7 +172,6 @@
   });
 
   const CategoryChangeHandler = (categoryEvent:any) => {
-    searched = false;
     searchValue = '';
     scrollTop = true;
     casinomygames = 'false';
@@ -189,24 +184,18 @@
         lobbyScreen = true;
         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;
         myGamesSection = true;
-        mostPlayedScreen = false;
-        lastPlayedScreen = false;
         activeCategory = '';
         break;
 
@@ -215,7 +204,6 @@
           activeCategory = '';
           lobbyScreen = false;
           myGamesSection = true;
-          mostPlayedScreen = true;
         }
       break;
 
@@ -223,17 +211,13 @@
         if (lastplayed == 'true') {
           activeCategory = '';
           lobbyScreen = false;
-          lastPlayedScreen = true;
           myGamesSection = true;
-          mostPlayedScreen = false;
         }
         break;
 
       default:
         lobbyScreen = false;
         myGamesSection = false;
-        mostPlayedScreen = false;
-        lastPlayedScreen = false;
         activeCategory = categoryEvent.data.itemId;
         //@TODO: if we remove the settimeout, the postmessage does not execute, at all - weird behaviour
         setTimeout(() => {
@@ -298,6 +282,9 @@
 
         case "searchCancelled":
           searchIsOn = false;
+          if(activeCategory){
+            CategoryChangeHandler({ data: { itemId: activeCategory }});
+          }
         break;
 
         case "searchActive":
@@ -379,6 +366,14 @@
       });
   }
 
+  const openFiltersModal = () => {
+    window.postMessage({ type: "ShowFilterModal" }, window.location.href);
+  }
+
+  const clearVendorFilter = () => {
+    window.postMessage({ type: "ClearVendorFilters" }, window.location.href);
+  }
+
   const getGamesIds = (favoritesArray:any = []) => {
     // construct favorite array used to check if game id is not already present in fav list
     favoredGamesCollection = [];
@@ -792,6 +787,33 @@
         </casino-random-game>
       {/if}
 
+      {#if !lobbyScreen}
+        <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}
+          <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>
+        </div>
+      {/if}
+
       {#if isLoading}
         <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.loading')}</p>
       {:else if !searchIsOn}
@@ -941,161 +963,26 @@
           {casinomygames}
           />
         {:else}
-          {#if lobbyScreen}
-            {#each shownCategories as category, index}
-              {#if (enablecasinowinners === 'true') && index === 1}
-                <div class="CasinoWinners">
-                  <casino-winners
-                  {session}
-                  {periodrecent}
-                  {periodtop}
-                  {numberusersrecent}
-                  {numberuserstop}
-                  {amountlimit}
-                  {isrecentavailable}
-                  {istopavailable}
-                  {defaultcurrency}
-                  {enableautoscroll}
-                  {tabsorder}
-                  {lang}
-                  {clientstyling}
-                  {clientstylingurl}
-                  {endpoint}
-                  />
-                </div>
-              {/if}
-              {#if index === 4 && enablejackpotbanner == 'true'}
-                <br>
-                <jackpot-banner
-                  title="Egypt Quest"
-                  currency = {currency || 'RON'}
-                  gameid = "999"
-                  {endpoint}
-                  {lang}
-                  {backgroundsrc}
-                  {backgroundsrcmobile}
-                  {titlelogopath}
-                  {caticon0}
-                  {caticon1}
-                  {caticon2}
-                  {caticon3}
-                  {iconlabels}
-                  {visualstructure}
-                  {clientstyling}
-                  {clientstylingurl}
-                />
-              {:else if index === 6 && enablejackpotbanner == 'true'}
-                <br>
-                <jackpot-banner
-                  title="Jackpot Cards"
-                  currency = {currency || 'RON'}
-                  gameid = "998"
-                  {endpoint}
-                  {lang}
-                  backgroundsrc="/assets/background0.jpg"
-                  backgroundsrcmobile="/assets/background0.jpg"
-                  titlelogopath = "/assets/jackpots_logo.svg"
-                  caticon0="/assets/icon0.svg"
-                  caticon1="/assets/icon1.svg"
-                  caticon2="/assets/icon2.svg"
-                  caticon3="/assets/icon3.svg"
-                  {iconlabels}
-                  visualstructure="typeSpread"
-                  {clientstyling}
-                  {clientstylingurl}
-                />
-              {/if}
-              {#if index == 7 && enablecollections == 'true'}
-                <casino-collections-providers
-                  endpoint = {endpoint.slice(0, -2)}
-                  {datasource}
-                  {lang}
-                  {type}
-                  {titletype}
-                  {clientstyling}
-                  {clientstylingurl}>
-                </casino-collections-providers>
-              {:else if index == (shownCategories.length - 1) && enablecollections == 'true'}
-                <casino-collections-providers
-                  endpoint = {endpoint.slice(0, -2)}
-                  {datasource}
-                  {lang}
-                  type='vendor'
-                  titletype="logo"
-                  {clientstyling}
-                  {clientstylingurl}>
-                </casino-collections-providers>
-              {/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}
-                {integratedgameframedesktop}
-                {integratedgameframemobile}
-                {casinomygames}
-              />
-            {/each}
-          {:else if myGamesSection}
-            <casino-my-games
-              userid={userid}
-              session={session}
-              endpoint={endpoint}
-              datasource={datasource}
-              lang={lang}
-              currency={currency}
-              favorites={favorites}
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-              {translationurl}
-              {mostplayed}
-              {lastplayed}
-              {filteredcategories}
-              {activecategory}
-              categoryindex="0"
-              categoryid="MYGAMES"
-              />
-          {:else}
-            <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}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-              {casinomygames}
-            />
-          {/if}
+          <casino-games-category-section
+            userid={userid}
+            endpoint={endpoint}
+            datasource={datasource}
+            favorites={favorites}
+            lang={lang}
+            currency={currency}
+            session={session}
+            categoryid="RNG$popular-games"
+            categorygames="9"
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+            {casinomygames}
+          />
         {/if}
       {/if}
       {#if isLoggedIn && haspanicbutton == "true"}
@@ -1307,8 +1194,7 @@
   }
 
   .FiltersButtonsContainer {
-    display: inline-flex;
-    flex-direction: row-reverse;
+    display: flex;
     flex: 1;
     grid-gap: 20px;
     flex-direction: row-reverse;