@everymatrix/casino-games-category-section 0.0.257 → 0.0.260

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "0.0.257",
+  "version": "0.0.260",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fb390d6a11e469b9d59db7cf11f59937a32a2555"
+  "gitHead": "a30fdd6f6180c69aabbc0daf1bf2a2e1342bf0e2"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -65,12 +65,8 @@
   let favoriteGames:Array<Object>;
   let showFavGamesCategory:boolean = false;
   let receivedFavoriteResults:Object;
-  let activeCategory:String;
-  let operatorConfig:any = window.widgetConfig;
-  let favoredGamesCollection:Array<string> = [];
   let sessionId:string = '';
   let userId:string = '';
-  let getFavoredGamesCache:any = undefined;
   let mostPlayedScreen:Boolean = false;
   let customStylingContainer:HTMLElement;
   let validObservers:boolean = false;
@@ -105,7 +101,7 @@
   }
 
   // IntersectionObserver used for loading more games
-  let observer = new IntersectionObserver((entries, observerRef) => {
+  let observer = new IntersectionObserver((entries) => {
     entries.forEach(async (entry) => {
       let gameid = entry.target.gameid; // eslint-disable-line
       let index = entry.target.elems_index; // eslint-disable-line
@@ -383,7 +379,7 @@
       }
     }
   }
-
+  
   // @TODO categoryId type fix
   const loadMoreGames = (categoryId:any) => {
     limit += 1;
@@ -400,15 +396,6 @@
     }
   }
 
-  // construct favorite array used to check if game id is not already present in fav list
-  const getGamesIds = (favoritesArray:any) => {
-    favoredGamesCollection = [];
-    favoritesArray.items.forEach((fav:any) => {
-      favoredGamesCollection.push(fav.id);
-    });
-    return favoredGamesCollection;
-  }
-
   const checkFavorite = (gameId:string) => {
     if (favoriteGames) {
       if (favoriteGames.findIndex(obj => obj.id == gameId) !== -1) {
@@ -471,18 +458,14 @@
     }
   }
 
-  // const setupVisibility = (customStylingContainer, dataloaded) => {
-  //   if (customStylingContainer && dataloaded && hidden) {
-  //     document.addEventListener(visibilityChange, handleVisibilityChange, false);
-  //   }
-  // }
-
   onMount(() => {
+    window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
     window.addEventListener('message', messageHandler, false);
     window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
 
     return () => {
       window.removeEventListener('message', messageHandler);
+      window.removeEventListener('visibilitychange', messageHandler);
     }
   });
 
@@ -714,13 +697,6 @@
 
 
 <style lang="scss">
-  //This function does a multiplication
-  // in order to work with px the
-  // same way as working with em
-  @function ttp($value) {
-    $multiplicator: 16px;
-    @return $value * $multiplicator;
-  }
 
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -732,8 +708,8 @@
     box-sizing: border-box;
   }
 
-  $grid-gap: ttp(1);
-  $grid-cell-size: ttp(12);
+  $grid-gap: 16px;
+  $grid-cell-size: 192px;
 
   .CategoryName,
   .StatusText {
@@ -752,11 +728,11 @@
     text-align: center;
     width: 100%;
     padding-left: 5px;
-    font-size: ttp(1);
+    font-size: 16px;
   }
 
   .NoRecentSearches {
-    padding-bottom: ttp(1.875);
+    padding-bottom: 30px;
   }
 
   .NoRecentSearchesCenter {
@@ -765,7 +741,7 @@
 
   .NoFavoriteGames {
     color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: ttp(1);
+    font-size: 16px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -793,7 +769,7 @@
   .SearchWaiting {
     grid-column: 1/-1;
     color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: ttp(.8);
+    font-size: 13px;
     text-align: center;
   }
 
@@ -802,8 +778,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: ttp(0.5) ttp(0.3125) 0;
-    margin-bottom: ttp(1);
+    padding: 8px 5px 0;
+    margin-bottom: 16px;
     .CategoryNameLink {
       display: block;
       cursor: pointer;
@@ -820,8 +796,8 @@
 
   .CasinoGamesContainer {
     width: 100%;
-    margin-top: ttp(1.5);
-    padding-bottom: ttp(1);
+    margin-top: 24px;
+    padding-bottom: 16px;
   }
 
   .CasinoGamesGrid {