@everymatrix/casino-games-category-section 0.0.191 → 0.0.195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "0.0.191",
+  "version": "0.0.195",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df80d1a5b1d672c6cef6b88b664c11d2c5786745"
+  "gitHead": "12c5cb5e4f2310b2fa559d0a1c99f4cf29de70c8"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -71,6 +71,9 @@
   let getFavoredGamesCache:any = undefined;
   let mostPlayedScreen:Boolean = false;
   let customStylingContainer:HTMLElement;
+  let validObservers:boolean = false;
+
+  let thumbnailContainer:Array<HTMLElement> = new Array(1000);
 
   let favoriteGamesData:any = {
     items: [],
@@ -83,6 +86,19 @@
     addNewMessages(item, GamesCategorySectionTranslations[item]);
   });
 
+  // IntersectionObserver used for loading more games
+  let observer = new IntersectionObserver((entries, observerRef) => {
+    entries.forEach(async (entry) => {
+      let index = entry.target.elems_index; // eslint-disable-line
+
+      if (entry.isIntersecting) {
+        if (index * 1.2 > limit ) {
+          loadMoreGames(categoryid);
+        }
+      }
+    });
+  });
+
   // Start favored games section
   const getFavoredGames = (url:string, sessionId:string, userId:string) => {
     let options = {
@@ -241,6 +257,7 @@
           showLoadCategory = true;
           searchItem = false;
           mostPlayedScreen = false;
+          validObservers = false;
 
           if (e.data.receivedFavoriteResults) {
             favoriteGames = e.data.receivedFavoriteResults.items;
@@ -268,6 +285,7 @@
           searchItem = false;
           mostPlayedScreen = false;
           showLoadCategory = false;
+          validObservers = true;
           categoryid = e.data.itemId;
 
           getData(categoryid, 0, limit).then((res:any) => {
@@ -345,9 +363,9 @@
 
   // @TODO categoryId type fix
   const loadMoreGames = (categoryId:any) => {
-    limit += 20;
-    if (limit <= maxTotal) {
+    limit += 10;
 
+    if (limit <= maxTotal) {
       getData(categoryId, offset, limit).then((res:any) => {
         categoryData = res;
         // @TODO categoryData type fix
@@ -410,36 +428,28 @@
       });
   }
 
-  onMount(() => {
-    window.addEventListener('message', messageHandler, false);
-    window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
-
-    /* Start Lazy Loading */
-    const handler = () => {
-      if (container) {
-        const containerDimensions = container.getBoundingClientRect();
-
-        intersecting = (
-          (containerDimensions.bottom + bottom) > 0 &&
-          (containerDimensions.right + right) > 0 &&
-          (containerDimensions.top - top) < window.innerHeight &&
-          (containerDimensions.left - left) < window.innerWidth
-        );
-
-        if (intersecting && once && !lobbyView) {
-          loadMoreGames(categoryid);
+  const setupObserver = () => {
+    if (validObservers) {
+      thumbnailContainer.forEach((item, index) => {
+        if (item) {
+          // Hack to make sure that I can identify the thumbnail index
+          item.elems_index = index;
+          observer.observe(item);
         }
-      }
+      });
     }
+  }
 
-    window.addEventListener('scroll', handler, false);
+  onMount(() => {
+    window.addEventListener('message', messageHandler, false);
+    window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
 
     return () => {
-      window.removeEventListener('scroll', handler);
       window.removeEventListener('message', messageHandler);
     }
   });
 
+  $: thumbnailContainer && setupObserver();
   $: lang && initialSetup();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
@@ -456,7 +466,7 @@
   {:else}
     {#if searched}
       <div class="CasinoGamesContainer">
-        <div class="CasinoGamesHeader Searched">
+        <div class="CasinoGamesHeader Searched {isMobile(userAgent) ? 'CasinoGamesHeaderMobile' : ''}">
           {#if recentSearched}
             <h3 class="StatusText">
               {$_('gamesCategorySection.recentSearchedItems')}
@@ -475,7 +485,7 @@
         </div>
         {#if shownCategoryData}
           {#if !showItems}
-            <p class="NoSearchResults NoRecentSearches NoRecentSearchesCenter">{$_('gamesCategorySection.noRecentSearch')}</p>
+            <p class="NoSearchResults NoRecentSearches NoRecentSearchesCenter {isMobile(userAgent) ? 'NoRecentSearchesMobile' : ''}">{$_('gamesCategorySection.noRecentSearch')}</p>
           {/if}
           <ul class="CasinoGamesGrid">
             {#each shownCategoryData as gameprops, index}
@@ -517,9 +527,9 @@
               {#if showLoadCategory}
               <!-- svelte-ignore a11y-missing-attribute -->
               <a class="CategoryNameLink" on:click="{e => showCategory(categoryData.id, categoryData)}">
-                <h3 class="CategoryLoadMore">
+                <span class="CategoryLoadMore">
                   {$_('gamesCategorySection.viewAll')} ({categoryData.games.total})
-                </h3>
+                </span>
               </a>
               {/if}
             </div>
@@ -542,6 +552,7 @@
                       gameid={gameprops.id}
                       gamefunmode={gameprops.hasFunMode}
                       gamefavorite={gameprops.isFavorite}
+                      bind:this={thumbnailContainer[index]}
                       {clientstyling}
                       {clientstylingurl}
                       {endpoint}
@@ -656,21 +667,28 @@
     @return $value * $multiplicator;
   }
 
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
   *, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
   }
 
   $grid-gap: ttp(1);
   $grid-cell-size: ttp(12);
 
   .CategoryName,
-  .CategoryLoadMore ,
   .StatusText {
     color: #fff;
-    font-size: ttp(1.2);
+    font-size: 22px;
+  }
+
+  .CategoryLoadMore {
+    font-size: 14px;
+    color: #fff;
   }
 
   .NoSearchResults {
@@ -687,6 +705,9 @@
 
   .NoRecentSearchesCenter {
     text-align: center;
+    &.NoRecentSearchesMobile {
+      text-align: left;
+    }
   }
 
   .NoFavoriteGames {
@@ -742,6 +763,9 @@
     &.Searched {
       justify-content: center;
     }
+    &.CasinoGamesHeaderMobile.Searched {
+      justify-content: flex-start;
+    }
   }
 
   .CasinoGamesContainer {