@everymatrix/casino-games-category-section 1.34.0 → 1.34.2

package/index.html

@@ -33,7 +33,7 @@
     <casino-games-category-section 
       endpoint="https://demo-api.stage.norway.everymatrix.com"
       lang="en"
-      session="80ae132b-ce15-4980-b537-8133de4ba558"
+      session="201d23b1-52f0-4a95-a97f-299712b613e3"
       userid="3884262"
       favorites="true"
       fetchviaevent="false"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "1.34.0",
+  "version": "1.34.2",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c9ad96fd45d67455a049f61462d8b4523a78ba54"
+  "gitHead": "99004a0501ea8fb9219aac803a986e470f556838"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -76,11 +76,10 @@
   let container:any;
   let maxTotal:number;
   let categoryName:HTMLElement;
-  let favoriteGames:Array<Object>;
   let showFavGamesCategory:boolean = false;
   let customStylingContainer:HTMLElement;
   let validObservers:boolean = false;
-
+  
   let thumbnailContainer:Array<HTMLElement> = new Array(10000);
   let intersectingIndexes:Object = {};
   let visibilityconnect:string = '';
@@ -89,6 +88,9 @@
   let visibilityChange;
   let dataloaded;
   
+  let favoriteGames:Array<Object>;
+  let listOfGamesIDs:Array<string> = [];
+
   let favoriteGamesData:any = {
     items: [],
     count: 0,
@@ -141,50 +143,58 @@
     });
   });
 
-  // Start favored games section
-  const getFavoredGames = (sessionId:string, playerID:string) => {
+   // Start favored games section
+   const getFavoritesGames = (sessionID:string, playerID:string) => {
     let url = `${endpoint}/v1/player/${playerID}/favorites/`;
-
     isLoading = true;
     let options = {
-      method: "GET",
-      headers: {
-        'X-SessionID': sessionID,
-      }
+        method: "GET",
+        headers: {
+            'X-SessionID': sessionID,
+        }
     };
 
     return new Promise((resolve, reject) => {
-      fetch(url, options)
-        .then((res:any) => res.json())
-        .then((updatedArray:any) => {
-          isLoading = false;
+        fetch(url, options)
+          .then((res:any) => res.json())
+          .then((updatedArray:any) => {
+                isLoading = false;
+                favoriteGames = [];
+                if (updatedArray) {
+                  updatedArray.items.forEach((item: any) => {
+                    if (item.gameModel) {
+                      favoriteGames.push(item);
+                      if (!listOfGamesIDs.includes(item.id)) {
+                        listOfGamesIDs.push(item.id);
+                      }
+                    }
+                  });
+                  window.postMessage({ type: 'UpdateFavoritesCount', favoriteGames});
+                } else {
+                    favoriteGames = [];
+                }
 
-          if (updatedArray) {
-            favoriteGames = updatedArray.items;
-          } else {
-            favoriteGames = [];
-          }
+                if(categoryid === 'FAVORITES') showFavoriteSection(favoriteGames);
 
-          shownCategoryData.forEach((item:any) => {
-            item.isFavorite = checkFavorite(item.id);
-          });
+                shownCategoryData.forEach((item) => {
+                    item.isFavorite = checkFavorite(item.id);
+                });
 
-          let aux:any = shownCategoryData;
-          shownCategoryData = undefined;
-          shownCategoryData = aux;
+                let aux:any = shownCategoryData;
+                shownCategoryData = undefined;
+                shownCategoryData = aux;
 
-          resolve(favoriteGames);
-
-        }).catch((err:any) => {
-          console.error(err);
+                resolve(favoriteGames);
 
-          reject(err);
-        });
-      });
+              }).catch((err:any) => {
+                console.error(err);
+                reject(err);
+            });
+    });
   }
 
   // @TODO categoryId type
-  const getData = (categoryId:any, offset:number, limit:number) => {
+  const getData = (categoryid:any, offset:number, limit:number) => {
     isLoading = true;
     let categoryidparsed = '';
     let url:any = '';
@@ -247,7 +257,7 @@
           }
         }
       }
-
+      
       fetch(url)
         .then((res:any) => res.json())
         .then((categoryData:any) => {
@@ -403,7 +413,7 @@
 
         case 'CategoryChange':
           limit = 20;
-          break;
+        break;
 
         case 'ApplySorter':
           categoryid = e.data.itemId;
@@ -416,101 +426,178 @@
           });
           break;
 
-        case 'CategoryUpdate':
-          searched = false;
-          lobbyView = false;
-          searchItem = false;
-          validObservers = true;
-          categoryid = e.data.itemId;
-          if (categoryid !== 'MOSTPLAYED') {
-            showLoadCategory = false;
-          }
-          if(casinomygames !== 'true') {
-            getData(categoryid, 0, limit).then((res:any) => {
-              categoryData = res;
-              categoryData.games.items.forEach((item:any) => {
-                item.isFavorite = checkFavorite(item.id);
-              });
-              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 && e.data.origin ==! 'filters') {
-                scrollTop = true;
-                setTimeout(() => {
-                  window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
-                }, 500);
-              }
-            });
-          }
-          break;
-
-        case 'FavoriteUpdate':
-          if(categoryData) {
-            shownCategoryData = categoryData.games.items;
-            shownCategoryData.forEach((item:any) => {
+      case 'CategoryUpdate':
+        searched = false;
+        lobbyView = false;
+        searchItem = false;
+        validObservers = true;
+        categoryid = e.data.itemId;
+        if (categoryid !== 'MOSTPLAYED') {
+          showLoadCategory = false;
+        }
+        if(casinomygames !== 'true') {
+          getData(categoryid, 0, limit).then((res:any) => {
+            categoryData = res;
+            categoryData.games.items.forEach((item:any) => {
               item.isFavorite = checkFavorite(item.id);
             });
-          }
-
-          if (e.data.lobbyScreen) {
-            lobbyView = true;
-          }
-
-          break;
-
-        // Start favorite category section
-        case 'UpdateCategoryFavoriteGames':
-          if (e.data.receivedFavoriteResults) {
-            favoriteGames = e.data.receivedFavoriteResults.items;
-            if(e.data.favStadalone) return;
-            if(showFavGamesCategory) {
-              if(!lobbyView) {
-                window.postMessage({ type: 'CategoryUpdate', itemId: categoryid }, window.location.href);
-              }
-            } else {
-              window.postMessage({ type: 'FavoriteUpdate', lobbyScreen: e.data.lobbyScreen }, window.location.href);
+            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 && e.data.origin ==! 'filters') {
+              scrollTop = true;
+              setTimeout(() => {
+                window.postMessage({ type: 'WidgetTopReference', scrollTop }, window.location.href);
+              }, 500);
             }
-          }
-          break;
+          });
+        }
+        break;
 
-        case 'ShowFavoriteSection':
-          let favGameArray;
-          lobbyView = false;
-          if (e.data) {
-            favGameArray = e.data.receivedFavoriteResults.items;
-            if (favGameArray.length) {
-              favGameArray.forEach((item:any) => {
-                if (item.gameModel) {
-                  item.gameModel.isFavorite = item.gameModel ? true : false;
-                }
-              });
-            }
-            favoriteGamesData.items = platformFavorite(favGameArray, favoriteGamesData.items);
-            favoriteGamesData.name = "Favorites";
-            showFavGamesCategory = true;
-            isLoading = false;
-          }
-          break;
-          // End favorite category section
+        case `SetUnfavoredGame${categoryid}`:
+          removeFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, e.data.id);
+        break;
+
+        case `SetFavoredGame${categoryid}`:
+          addFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, e.data.id);
+        break;
 
         case 'UserSessionID':
           sessionID = e.data.session;
           playerID = e.data.userID;
           if (favorites == 'true') {
             if (playerID && playerID.length && sessionID && sessionID.length > 0) {
-              getFavoredGames(sessionID, playerID);
+              getFavoritesGames(sessionID, playerID);
             }
           }
+        break;
 
-          break;
-
+        case 'UpdateFavoredList':
+          if(categoryid === 'FAVORITES') updateFavoredList(e.data.url, e.data.sessionID)
+        break;
+        
         default:
           // do nothing
-          break;
+        break;
       }
     } 
   }
 
+  const addFavoriteState = () => {
+    if(categoryData) {
+      shownCategoryData = categoryData.games.items;
+      shownCategoryData.forEach((item:any) => {
+        item.isFavorite = checkFavorite(item.id);
+      });
+    }
+  }
+
+  //Adding fav. statement to variables
+  const checkFavorite = (gameId: string) => favoriteGames?.some(obj => obj.id === gameId) ?? false;
+
+  let addFavoredGame = async (url, sessionID, gameID) => {
+    // Wait for the updateFavoredList to complete
+    await updateFavoredList(url, sessionID);
+    
+    if (!listOfGamesIDs.includes(gameID)) {
+      listOfGamesIDs.push(gameID);
+    }
+
+    let data = {
+      items: listOfGamesIDs
+    };
+    
+    let options = {
+      method: "POST",
+      headers: {
+        'X-SessionID': sessionID,
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(data)
+    };
+
+    fetch(url, options)
+      .then((res) => res.json())
+      .then(() => {
+        window.postMessage({ type: `AddFavoriteThumbnail_${gameID}` }, window.location.href);
+      })
+      .catch((err) => {
+        console.error('Err', err);
+    });
+  }
+
+  const removeFavoredGame = (url:string, sessionID:string, gameID:string) => { 
+    let options = {
+        method: "DELETE",
+        headers: {
+          'X-SessionID': sessionID,
+        }
+    };
+
+    fetch(`${url}/${gameID}`, options)
+      .then((res:any) => res.json())
+      .then(() => {
+        window.postMessage({ type: `RemoveFavoriteThumbnail_${gameID}` }, window.location.href);
+        updateFavoredList(url, sessionID);
+      });
+      
+      if (listOfGamesIDs.includes(gameID)) {
+      listOfGamesIDs =  listOfGamesIDs.filter(x => {
+        return x != gameID;
+      });
+    }
+  }
+
+  //Fetch fav list and pass to be updated
+  const updateFavoredList = async (url, sessionID) => {
+    let options = {
+      method: "GET",
+      headers: {
+        'X-SessionID': sessionID,
+      }
+    };
+
+    return fetch(url, options)
+    .then((res:any) => res.json())
+      .then((updatedArray:any) => {
+        favoriteGames = updatedArray.items;
+          if (!fetchviaevent) {
+            favoriteGames.forEach((item: any) => {
+              item.isFavorite = checkFavorite(item.id);
+            });
+          } else {
+            favoriteGames.forEach((item: any) => {
+              if (!listOfGamesIDs.includes(item.id)) {
+                listOfGamesIDs.push(item.id);
+              }
+            })
+            addFavoriteState();
+          } 
+
+        if (categoryid === 'FAVORITES') { window.postMessage({ type: 'UpdateFavoritesCount', favoriteGames }); showFavoriteSection(favoriteGames); }
+
+      }).catch((err:any) => {
+        console.error(err);
+      });
+  }
+
+  const showFavoriteSection = (receivedFavoriteResults) => {
+    if (!receivedFavoriteResults) return;
+      let favGameArray;
+      favGameArray = receivedFavoriteResults?.items || receivedFavoriteResults || [];
+      if (favGameArray.length > 0) {
+        favGameArray.forEach((item: any) => {
+          if (item.gameModel) {
+            item.gameModel.isFavorite = true;
+          }
+        });
+      }
+      favoriteGamesData.items = platformFavorite(favGameArray, favoriteGamesData.items);
+      favoriteGamesData.name = "Favorites";
+      isLoading = false;
+  }
+
   // @TODO categoryId type fix
   const loadMoreGames = (categoryId:any) => {
     limit += 1;
@@ -536,17 +623,6 @@
     }
   }
 
-  const checkFavorite = (gameId:string) => {
-    if (favoriteGames) {
-      if (favoriteGames.findIndex(obj => obj.id == gameId) !== -1) {
-        return true;
-      } else {
-        return false;
-      }
-    }
-    return false;
-  }
-
   const addGameTag = (tags:any[]):string => {
     if (tags?.length === 0) return '';
 
@@ -580,11 +656,10 @@
   const initialSetup = () => {
     // showFavGamesCategory vs categoryData
     // favoriteGamesData vs shownCategoryData
-
     switch(categoryid) {
       case 'FAVORITES':
           showFavGamesCategory = true;
-          break;
+      break;
       case 'MOSTPLAYED':
           if(casinomygames === 'false') {
             showFavGamesCategory = false;
@@ -644,25 +719,23 @@
   }
 
   onMount(() => {
-    if(fetchviaevent === 'true'){
       window.addEventListener('visibilitychange', (e) => handleVisibilityChange())
       window.addEventListener('message', messageHandler, false);
-      if(categoryid === 'FAVORITES') {
-        window.postMessage({ type: 'GetFavoredGame' }, window.location.href);
-      }
+      
       
       return () => {
         window.removeEventListener('message', messageHandler);
         window.removeEventListener('visibilitychange', messageHandler);
       }
-    }
   });
     
   $: lang && setActiveLanguage();
+  //Widget is working as standalone when fetchviaevent isn't set
   $: (fetchviaevent === 'false' || fetchviaevent === '') && endpoint && lang && categoryid && datasource && displayedgamecount && showallbuttongamescount && fetchGamesByCategory(categoryid, displayedgamecount, showallbuttongamescount);
-  $: (favorites === 'true') && session && userid && getFavoredGames(session, userid);
+  //Call the fav. list fetch when widget is standalone
+  $: favorites === 'true' && endpoint && session && userid && getFavoritesGames(session, userid);
   $: dataloaded && thumbnailContainer && setupObserver();
-  $: lang && categoryid && initialSetup();
+  $: lang && categoryid && userid && session && initialSetup();
   $: translationurl && setTranslationUrl();
   $: clientstyling && customStylingContainer && setClientStyling();
   $: clientstylingurl && customStylingContainer && setClientStylingURL();
@@ -711,6 +784,7 @@
                 lang={lang}
                 searchitem={searchItem}
                 favorites={favorites}
+                categoryid={categoryid}
                 gamethumbnail={gameprops.thumbnail}
                 gamename={gameprops.name}
                 gamevendor={gameprops.vendor.name}
@@ -796,6 +870,7 @@
                         class="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
                         part="{MASONRY_CLASS_PREFIX}{gameprops.cellSize ? gameprops.cellSize : '1x1'}"
                         favorites={favorites}
+                        categoryid={categoryid}
                         gamethumbnail={gameprops.thumbnail}
                         gamename={gameprops.name}
                         gamevendor={gameprops.vendor.name}
@@ -858,6 +933,7 @@
                                   userid={userid}
                                   lang={lang}
                                   favorites={favorites}
+                                  categoryid={categoryid}
                                   gamethumbnail={gameprops.gameModel.thumbnail}
                                   gamename={gameprops.gameModel.name}
                                   gamevendor={gameprops.gameModel.vendor.name}
@@ -891,6 +967,7 @@
                                 userid={userid}
                                 lang={lang}
                                 favorites={favorites}
+                                categoryid={categoryid}
                                 gamethumbnail={gameprops.gameModel.thumbnail}
                                 gamename={gameprops.gameModel.name}
                                 gamevendor={gameprops.gameModel.vendor.name}