@everymatrix/casino-games-category-section 1.9.3 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3f14fba86d0d9439e751e4f14b8af31cd306edf5"
+  "gitHead": "9ccf680032da454b5c7417f978da996ec52e4554"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -10,7 +10,7 @@
 
   import '@everymatrix/casino-game-thumbnail';
   import '@everymatrix/casino-filter';
-
+  import '@everymatrix/casino-sort';
 
   const MASONRY_CLASS_PREFIX = 'game-tile-';
 
@@ -85,6 +85,7 @@
   let thumbnailContainer:Array<HTMLElement> = new Array(10000);
   let intersectingIndexes:Object = {};
   let visibilityconnect:string = '';
+  let sortedBy:string = '';
   let hidden;
   let visibilityChange;
   let dataloaded;
@@ -184,10 +185,10 @@
   // @TODO categoryId type
   const getData = (categoryId:any, offset:number, limit:number, filterArray:Array<Object> = []) => {
     isLoading = true;
-
     let categoryidparsed = '';
     let url:any = '';
     let vendorFilters = JSON.parse(localStorage.getItem('vendorFiltersByCategory'));
+    let vendorSort = JSON.parse(localStorage.getItem('vendorSortingBy'));
     
     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) {
@@ -204,7 +205,7 @@
       url.searchParams.append("platform", getDevice(userAgent));
       url.searchParams.append("pagination", `games(offset=${offset},limit=${limit})`);
       url.searchParams.append('language', lang);
-
+ 
       // if vendor filters are active, get filtered games
       window.postMessage({ type: 'CategoryVendors', categoryid }, window.location.href);
 
@@ -217,7 +218,7 @@
             vendorFilters[categoryid].forEach(vendorId => {
               queryParamVendorId = queryParamVendorId + (queryParamVendorId ? `,games(vendor(id=${vendorId}))` : `games(vendor(id=${vendorId}))`);
             });
-
+            
             url.searchParams.append('filter', ((vendorFilters && vendorFilters[categoryid].length  < 2) ? `$and` : `$or`) + `(${queryParamVendorId})`);
           } else {
             filteresPresent = false;
@@ -225,6 +226,28 @@
         }
       }
 
+      if(vendorSort){
+        if (vendorSort[categoryid]) {
+          if (vendorSort[categoryid] && vendorSort[categoryid]!= 'All') {
+            if(vendorSort[categoryid] == 'isNew' || vendorSort[categoryid] == 'advancedTags(name(hot))'){
+              url.searchParams.append('sortedField', `games(${vendorSort[categoryid]})`);
+              url.searchParams.append('orderBy', `DES`);
+            } else {
+              url.searchParams.append('sortedField', `games(${vendorSort[categoryid]})`);
+            }
+          }
+        } else {
+          if (sortedBy && sortedBy!= 'All') {
+            if(sortedBy ==  'advancedTags(name(hot))' || sortedBy == 'isNew'){
+              url.searchParams.append('sortedField', `games(${sortedBy})`);
+              url.searchParams.append('orderBy', `DES`);
+            } else {
+              url.searchParams.append('sortedField', `games(${sortedBy})`);
+            }
+          }
+        }
+      }
+
       fetch(url)
         .then((res:any) => res.json())
         .then((categoryData:any) => {
@@ -357,6 +380,16 @@
           limit = 20;
           break;
 
+        case 'ApplySorter':
+          categoryid = e.data.itemId;
+          sortedBy = e.data.sortBy;
+
+          getData(categoryid, 0, limit).then((res:any) => {
+            categoryData = res;
+            shownCategoryData = categoryData.games.items;
+            showLoadCategory = false;
+          });
+          break;
 
         case 'CategoryUpdate':
           searched = false;
@@ -696,6 +729,15 @@
                           {filterbylogo}>
                         </casino-filter>
                       {/if}
+                      {#if addsortingselector == "true"}
+                        <casino-sort
+                          {clientstylingurl}
+                          {clientstyling}
+                          {lang}
+                          {categoryid}
+                          {addsortingselector}>
+                        </casino-sort>
+                      {/if}
                     </div>
                 {/if}
               </div>
@@ -1011,8 +1053,9 @@
   .CategoryFilterContainer {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 20px;
-  }
+    gap: 17px;
+    justify-items: center;
+    }
 
   @media screen and (max-width: 385px) {
   .CasinoGamesGrid {
@@ -1048,6 +1091,7 @@
     .CasinoGamesHeader {
       align-items: unset;
       flex-direction: row;
+      flex-wrap: wrap;
     }
 
     .CategoryName {