@everymatrix/casino-game-page 1.34.0 → 1.34.2

package/index.html

@@ -31,11 +31,12 @@
 
   <div class="webcomponent">
     <casino-game-page
-      gameid="46985"
-      userid="3884262"
-      session="97770be8-7ab6-4985-adca-06da9dacadcd"
+      favorites="true"
+      gameid="41813"
+      userid="4506648"
+      session="b64bddaa-73be-4173-98da-9265ce10d801"
       lang="en"
-      endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
+      endpoint="https://demo-api.stage.norway.everymatrix.com"
       playforfun="true"
     ></casino-game-page>
   </div>

package/package.json

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

package/src/CasinoGamePage.svelte

@@ -70,6 +70,7 @@
   let userAgent:any = window.navigator.userAgent;
   let mobileView:boolean = false;
   let favoriteGames: Array<Object> = [];
+  let listOfGamesIDs:Array<string> = [];
   let customStylingContainer:HTMLElement;
   let buttonsContainer:HTMLElement;
   let timeContainer:HTMLElement;
@@ -131,7 +132,7 @@
         game = formatGameLaunchUrl(data[0]);
         isLoading = false;
         if (game.launchUrl) {
-          game.isFavored = setGameData(game, game.hasFunMode);
+          game.isFavorite = setGameData(game, game.hasFunMode);
           isFavLoading = false;
         }
       }, (err:any) => {
@@ -149,6 +150,7 @@
         isLoading = false;
       });
     window.postMessage({ type: 'RequestModalSize' }, window.location.href);
+    getFavoritesGames(session, userid)
   }
 
   const addEventsToDisplayedElements = () => {
@@ -178,7 +180,7 @@
 
       case 'LaunchGameFrame':
         openGameFrame(e.data.gameId, e.data.gameFunMode);
-        break;
+      break;
 
       case 'ModalClosed':
         if (integratedgameframedesktop === 'true' || isMobile(userAgent)) {
@@ -232,39 +234,112 @@
         modalFrameWidth = e.data.modalContainerSize.modalWidth;
         modalFrameHeight = e.data.modalContainerSize.modalHeight;
         break;
+    }
+  }
 
-      case 'UpdateCategoryFavoriteGames':
-        if (e.data.receivedFavoriteResults) {
-          favoriteGames = e.data.receivedFavoriteResults.items;
+  //Get favorites games list and update the favorites category
+  const getFavoritesGames = (sessionID:string, playerID:string) => {
+    let url = `${endpoint}/v1/player/${playerID}/favorites/`;
 
-          if (game && game.id) {
-            game.isFavored = checkFavorite(game.id);
-            isFavLoading = false;
+    isLoading = true;
+    let options = {
+      method: "GET",
+      headers: {
+        'X-SessionID': sessionID,
+      }
+    };
+
+    return new Promise((resolve, reject) => {
+      fetch(url, options)
+        .then((res:any) => res.json())
+        .then((updatedArray:any) => {
+          isLoading = false;
+          favoriteGames = updatedArray.items;
+          if (favoriteGames) {
+            if (game && game.id) game.isFavorite = checkFavorite(game.id); isFavLoading = false;
+            favoriteGames.forEach((fav:any) => {
+              if (!listOfGamesIDs.includes(fav.id)) listOfGamesIDs.push(fav.id);
+            });
+          } else {
+            favoriteGames = [];
           }
-        }
-        break;
-    }
+        
+          resolve(favoriteGames);
+
+      }).catch((err:any) => {
+        console.error(err);
+
+        reject(err);
+      });
+    });
   }
 
-  const checkFavorite = (gameId:string):boolean => {
-    if (favoriteGames.findIndex(obj => obj.id == gameId) !== -1) {
-      return true;
+  //Add / Remove favorites games
+  const toggleFavoriteGame = (id:any):void => {
+    if (game.isFavorite) {
+      removeFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, game.id);
     } else {
-      return false;
+      addFavoredGame(`${endpoint}/v1/player/${userid}/favorites`, session, game);
     }
   }
 
-  const toggleFavoriteGame = (id:any):void => {
-    let triggerFactor = "gamepage";
-    if (game.isFavored) {
-      window.postMessage({ type: 'SetUnfavoredGame', id, triggerFactor }, window.location.href);
-      game.isFavored = false;
-    } else {
-      window.postMessage({ type: 'SetFavoredGame', id, triggerFactor }, window.location.href);
-      game.isFavored = true;
+  let addFavoredGame = async (url, sessionID, game) => {
+    // When adding new favored games, the api requires an array with all the current favored games due to the fact that it overwrites the old ones with the ones found in the body of the POST request
+    if (!listOfGamesIDs.includes(game.id)) listOfGamesIDs.push(game.id);
+
+    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:any) => res.json())
+      .then((res) => {
+        window.postMessage({ type: `AddFavoriteThumbnail_${game.id}` }, window.location.href);
+        //Make a get for a new list to update the view
+        window.postMessage({ type: 'UpdateFavoredList', url, sessionID});
+        if( res.items ) favoriteGames = res.items; game.isFavorite = checkFavorite(game.id);
+      })
+      .catch((err:any) => {
+        console.error('Err', err);
+    });
+  }
+
+  const removeFavoredGame = (url, sessionID, gameID) => {
+    let options = {
+        method: "DELETE",
+        headers: {
+          'X-SessionID': sessionID,
+        }
+    };
+
+    fetch(`${url}/${gameID}`, options)
+      .then((res:any) => res.json())
+      .then((res) => {
+        window.postMessage({ type: `RemoveFavoriteThumbnail_${gameID}` }, window.location.href);
+        //Make a get for a new list to update the view
+        window.postMessage({ type: 'UpdateFavoredList', url, sessionID});
+        if(res.items) favoriteGames = res.items; game.isFavorite = checkFavorite(game.id);
+      });
+
+    if (listOfGamesIDs.includes(gameID)) {
+      listOfGamesIDs =  listOfGamesIDs.filter(x => {
+        return x != gameID;
+      });
     }
   }
 
+  const checkFavorite = (gameId:string):boolean => {
+    return favoriteGames.findIndex(obj => obj.id == gameId) !== -1;
+  }
+
   const setGameData = (game, gameFunMode) => {
     anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
     funMode = playforfun == 'true' ? gameFunMode : false;
@@ -281,7 +356,7 @@
         game = formatGameLaunchUrl(data[0]);
         isLoading = false;
         if (game.launchUrl) {
-          game.isFavored = setGameData(game, gameFunMode);
+          game.isFavorite = setGameData(game, gameFunMode);
           isFavLoading = false;
         }
       }).finally(() => {
@@ -581,7 +656,7 @@
     window.addEventListener('resize', resizeHandler, false);
     window.addEventListener('message', messageHandler, false);
 
-      return () => {
+    return () => {
         removeEventsToDisplayedElements();
         window.removeEventListener('resize', resizeHandler);
         window.removeEventListener('message', messageHandler);
@@ -620,7 +695,7 @@
               {#if isLoggedIn}
                 {#if favorites == 'true'}
                   {#if !isFavLoading}
-                    {#if game.isFavored}
+                    {#if game.isFavorite}
                       <div class="FavIconContainer {haspanicbutton == 'true' ? 'FavIconPanicButton' : ''}" on:click="{() => toggleFavoriteGame(game.id)}">
                         <svg version="1.1" class="FavoredIcon" part="FavoredIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.481 19.481" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 19.481 19.481">
                           <path style="fill: var(--emfe-w-color-white, #FFFFFF);" d="m10.201,.758l2.478,5.865 6.344,.545c0.44,0.038 0.619,0.587 0.285,0.876l-4.812,4.169 1.442,6.202c0.1,0.431-0.367,0.77-0.745,0.541l-5.452-3.288-5.452,3.288c-0.379,0.228-0.845-0.111-0.745-0.541l1.442-6.202-4.813-4.17c-0.334-0.289-0.156-0.838 0.285-0.876l6.344-.545 2.478-5.864c0.172-0.408 0.749-0.408 0.921,0z"/>