@everymatrix/casino-games-category-section 1.5.6 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "1.5.6",
+  "version": "1.7.0",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18b817f66a008871bf85a5a004a749dca5111add"
+  "gitHead": "b405cf7bcce97b06567550e59f40f2d310be97af"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -9,6 +9,8 @@
   import moment from 'moment';
 
   import '@everymatrix/casino-game-thumbnail';
+  import '@everymatrix/casino-filter';
+
 
   const MASONRY_CLASS_PREFIX = 'game-tile-';
 
@@ -32,6 +34,9 @@
   export let integratedgameframedesktop:string = 'false';
   export let integratedgameframemobile:string = 'false';
   export let casinomygames:string = 'false';
+  export let addfilterselector:string = 'false';
+  export let addsortingselector:string = 'false';
+  export let filterbylogo:string = '';
 
   export let once = true;
   export let top = 0;
@@ -177,19 +182,20 @@
 
   // @TODO categoryId type
   const getData = (categoryId:any, offset:number, limit:number, filterArray:Array<Object> = []) => {
+    isLoading = true;
+
     let categoryidparsed = '';
     let url:any = '';
-    isLoading = true;
+    let vendorFilters = JSON.parse(localStorage.getItem('vendorFiltersByCategory'));
+    
+    let tempEndpoint:string = endpoint.replace(/.$/, "2"); // @TODO remove after we migrate with all endpoints to v2 - hack for the endpoint since the filtering of categories functionality was developed only for the v2 api
     if((categoryid.match(/\$/g) || []).length > 1) {
       categoryidparsed = categoryid.split('$').slice(0, 2).join('$');
-      url = new URL(`${endpoint}/casino/groups/${datasource}/${categoryidparsed}/subGroups`);
-      
+      url = new URL(`${tempEndpoint}/casino/groups/${datasource}/${categoryidparsed}/subGroups`);
     } else {
-      url = new URL(`${endpoint}/casino/groups/${datasource}/${categoryid}`);
+      url = new URL(`${tempEndpoint}/casino/groups/${datasource}/${categoryid}`);
     }
 
-    let vendorFilters = JSON.parse(sessionStorage.getItem('vendorFiltersByCategory'));
-
     return new Promise((resolve, reject) => {
       url.searchParams.delete("pagination");
       url.searchParams.append("expand", "games(vendor)");
@@ -208,10 +214,10 @@
 
             filteresPresent = true;
             vendorFilters[categoryid].forEach(vendorId => {
-              queryParamVendorId = queryParamVendorId + (queryParamVendorId ? `, id=${vendorId}` : `id=${vendorId}`);
+              queryParamVendorId = queryParamVendorId + (queryParamVendorId ? `,games(vendor(id=${vendorId}))` : `games(vendor(id=${vendorId}))`);
             });
 
-            url.searchParams.append('filter', `games(vendor(${queryParamVendorId}))`);
+            url.searchParams.append('filter', ((vendorFilters && vendorFilters[categoryid].length  < 2) ? `$and` : `$or`) + `(${queryParamVendorId})`);
           } else {
             filteresPresent = false;
           }
@@ -232,7 +238,7 @@
           dataloaded = true;
           hasErrors = false;
           maxTotal = categoryData.games.total;
-          
+
           resolve(categoryData);
         }, (err:any) => {
           hasErrors = true;
@@ -369,7 +375,7 @@
               shownCategoryData = categoryData.games.items;
               showLoadCategory = false;
               // @TODO: replace this quick fix - when there are only a few category games, the view scrolls to the footer
-              if(shownCategoryData.length < 10) {
+              if(shownCategoryData.length < 10 && e.data.origin ==! 'filters') {
                 scrollTop = true;
                 setTimeout(() => {
                   window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
@@ -381,16 +387,17 @@
 
         case 'FavoriteUpdate':
           lobbyView = true;
-          shownCategoryData = categoryData.games.items;
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
+          if(categoryData) {
+            shownCategoryData = categoryData.games.items;
+            shownCategoryData.forEach((item:any) => {
+              item.isFavorite = checkFavorite(item.id);
+            });
+          }
 
           break;
 
         // Start favorite category section
         case 'UpdateCategoryFavoriteGames':
-
           if (e.data.receivedFavoriteResults) {
             favoriteGames = e.data.receivedFavoriteResults.items;
             if(e.data.favStadalone) return;
@@ -477,10 +484,10 @@
   }
 
   const addGameTag = (tags:any[]):string => {
-    if(tags?.length === 0) return '';
+    if (tags?.length === 0) return '';
 
-    let tagName:string;
-    let differenceOfTime = 99999999999;
+    let tagName:string = '';
+    let differenceOfTime = 999999999999;
     let firstToExpire:number;
 
     const currentDate = new Date(Date.now());
@@ -493,7 +500,7 @@
         differenceOfTime = moment(endDateOfTag).diff(currentDate)
         firstToExpire = index;
       }
-      
+
       if (moment(currentDate).isAfter(startDateOfTag) && moment(currentDate).isBefore(endDateOfTag)) {
         tagName = tags[firstToExpire].name;
       }
@@ -548,7 +555,7 @@
       });
     }
   }
-  
+
   const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -661,18 +668,34 @@
           <div class="CasinoGamesContainer" part="CasinoGamesContainer">
             {#if casinomygames !== 'true'}
               <div class="CasinoGamesHeader" part="CasinoGamesHeader">
-              <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
-                {categoryData.name}
-              </h3>
-              {#if showLoadCategory}
-                <!-- svelte-ignore a11y-missing-attribute -->
-                <a class="CategoryNameLink" part="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
-                  <span class="CategoryLoadMore" part="CategoryLoadMore">
-                    {$_('gamesCategorySection.viewAll')} ({categoryData.games.total})
-                  </span>
-                </a>
-              {/if}
-            </div>
+                <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
+                  {categoryData.name}
+                </h3>
+                {#if showLoadCategory}
+                  <!-- svelte-ignore a11y-missing-attribute -->
+                  <a class="CategoryNameLink" part="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
+                    <span class="CategoryLoadMore" part="CategoryLoadMore">
+                      {$_('gamesCategorySection.viewAll')} ({categoryData.games.total})
+                    </span>
+                  </a>
+                {:else}
+                    <div class=" {(addfilterselector == 'true' && addsortingselector == 'true') ? 'CategoryFilterContainer' : ''}">
+                      {#if addfilterselector == "true"}
+                        <casino-filter
+                          {clientstylingurl}
+                          {clientstyling}
+                          {endpoint}
+                          {datasource}
+                          {lang}
+                          {categoryid}
+                          {addfilterselector}
+                          {addsortingselector}
+                          {filterbylogo}>
+                        </casino-filter>
+                      {/if}
+                    </div>
+                {/if}
+              </div>
             {/if}
             {#if isLoading}
               <div class="lds-dual-ring" part="lds-dual-ring"></div>
@@ -680,7 +703,7 @@
               {#if shownCategoryData.length !== 0}
                 <ul class="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" part="{(favoriteGamesData.items.length === 0 && showFavGamesCategory) ? '' : 'CasinoGamesGrid'} GamesListIncreasedGap" bind:this={container}>
                   {#each shownCategoryData as gameprops, index}
-                    {#if intersecting || nativeLoading}
+                  {#if intersecting || nativeLoading}
                       <casino-game-thumbnail
                         session={session}
                         userid={userid}
@@ -722,10 +745,10 @@
             <div class="CasinoGamesContainer" part="CasinoGamesContainer">
               {#if casinomygames !== 'true'}
                 <div class="CasinoGamesHeader" part="CasinoGamesHeader">
-                    <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
-                      {$_('gamesCategorySection.favorites')}
-                        <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
-                    </h3>
+                  <h3 class="CategoryName" part="CategoryName" bind:this={categoryName}>
+                    {$_('gamesCategorySection.favorites')}
+                      <span class="CategoryFavName">({favoriteGamesData.items.length})</span>
+                  </h3>
                 </div>
               {/if}
 
@@ -740,7 +763,7 @@
                           {#if intersecting || nativeLoading}
                             {#if isMobile(userAgent)}
                               {#if (gameprops.gameModel.platform.includes("iPad") || gameprops.gameModel.platform.includes("iPhone") || gameprops.gameModel.platform.includes("Android"))}
-                                <casino-game-thumbnail
+                              <casino-game-thumbnail
                                   class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
                                   part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
                                   session={session}
@@ -751,7 +774,7 @@
                                   gamename={gameprops.gameModel.name}
                                   gamevendor={gameprops.gameModel.vendor.name}
                                   gameisnew={gameprops.gameModel.isNew}
-                                  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
+                                  gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
                                   gamecellsize={gameprops.cellSize}
                                   gameid={gameprops.gameModel.id}
                                   gamefunmode={gameprops.gameModel.hasFunMode}
@@ -782,7 +805,7 @@
                                 gamename={gameprops.gameModel.name}
                                 gamevendor={gameprops.gameModel.vendor.name}
                                 gameisnew={gameprops.gameModel.isNew}
-                                gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.advancedTags)}
+                                gametag={gameprops.gameModel.advancedTags?.length > 0 && addGameTag(gameprops.gameModel.advancedTags)}
                                 gamecellsize={gameprops.cellSize}
                                 gameid={gameprops.gameModel.id}
                                 gamefunmode={gameprops.gameModel.hasFunMode}
@@ -983,6 +1006,12 @@
     }
   }
 
+  .CategoryFilterContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
   @media screen and (max-width: 385px) {
   .CasinoGamesGrid {
     display: grid;
@@ -1013,6 +1042,17 @@
     }
   }
 
+  @media only screen and (max-width: 768px) {
+    .CasinoGamesHeader {
+      align-items: unset;
+      flex-direction: column;
+    }
+
+    .CategoryName {
+      margin-bottom: 20px;
+    }
+  }
+
   @media screen and (min-width: 1100px) {
     .CasinoGamesGrid {
       grid-template-rows: repeat(auto-fill, 142px);

package/src/translations.js

@@ -14,7 +14,7 @@ export const GamesCategorySectionTranslations = {
       waiting: 'Waiting',
     }
   },
-  zh: {
+  'zh-hk': {
     gamesCategorySection: {
       showMore: '更多的',
       viewAll: '顯示所有',