@everymatrix/casino-games-category-section 0.0.189 → 0.0.193

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "0.0.189",
+  "version": "0.0.193",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
     "start": "sirv public",
-    "build": "cross-env NODE_ENV=\"production\" && rollup -c",
+    "build": "cross-env NODE_ENV=production rollup -c",
     "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
     "validate": "svelte-check",
     "test": "echo"
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3781af65baf0822b42483eec16cd95a8cb26f983"
+  "gitHead": "0960983a499b8cd9494500f0f36058fdc61fbead"
 }

package/rollup.config.js

@@ -6,8 +6,11 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
-const production = process.env.NODE_ENV === 'production';
-const dev = process.env.NODE_ENV === 'development';
+import uglify from 'rollup-plugin-uglify';
+import image from '@rollup/plugin-image';
+
+const production = process.env.NODE_ENV == 'production';
+const dev = process.env.NODE_ENV == 'development';
 
 export default {
   input: 'src/index.ts',
@@ -15,17 +18,21 @@ export default {
     sourcemap: true,
     format: 'umd',
     name: 'app',
-    file: 'dist/casino-games-category-section.js'
+    file: 'dist/casino-games-category-section.js',
   },
   plugins: [
     svelte({
       preprocess: sveltePreprocess(),
       compilerOptions: {
+        // @TODO check generate and hydratable
+        // generate: 'ssr',
+        // hydratable: true,
         // enable run-time checks when not in production
         customElement: true,
         dev: !production
       }
     }),
+    image(),
     commonjs(),
     resolve({
       browser: true,
@@ -46,12 +53,13 @@ export default {
     }),
     // If we're building for production (npm run build
     // instead of npm run dev), minify
-    production && 
+    production &&
     terser({
       output: {
         comments: "all"
       },
-    })
+    }),
+    production && uglify.uglify()
   ],
   watch: {
     clearScreen: false

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();
@@ -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}
@@ -667,10 +678,14 @@
   $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 {