@everymatrix/casino-game-thumbnail 1.8.3 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-thumbnail",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "main": "dist/casino-game-thumbnail.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "15df0a4bc1195017b7df65675dfd40261b5dbe8b"
+  "gitHead": "931b121e18fe00e97d089fdc4f642515337a7091"
 }

package/src/CasinoGameThumbnail.svelte

@@ -194,14 +194,15 @@
         'userId' : `${playerID ? playerID : 'Not logged in'}`
       });
     } 
-  
 
+    // Case mobile
     if (isMobile(userAgent) && integratedgameframemobile == "true") {
       window.postMessage({ type: 'OpenGameFrame', gameId, gamefunmode, gamepagemodalurl, isMobile: isMobile(userAgent), source: 'GameThumbnail'  }, window.location.href);
     } else if(isMobile(userAgent) && integratedgameframemobile == "false") {
       window.postMessage({ type: 'ShowGameModal', gameId, isMobile: isMobile(userAgent) }, window.location.href);
     }
 
+    // Case desktop
     if (!isMobile(userAgent) && integratedgameframedesktop == "true") {
       window.postMessage({ type: 'OpenGameFrame', gameId, gamefunmode, gamepagemodalurl, isMobile: isMobile(userAgent)  }, window.location.href)
     } else if(!isMobile(userAgent) && integratedgameframedesktop == "false") {
@@ -613,6 +614,8 @@
               l61.023,123.645c2.186,4.427,6.408,7.496,11.294,8.206l136.447,19.828L366.023,308.608z"/></svg>
             </div>
           {/if}
+        {:else}
+          <div class="LoaderRipple"><div></div><div></div></div>
         {/if}
         <p class="GameInfoName" part="GameInfoName" title="{gamename}">{gamename}</p>
         {#if lang}
@@ -1412,4 +1415,55 @@
     height: 19px;
   }
 }
+
+// Loader for favorites
+.LoaderRipple {
+  width: 80px;
+  height: 80px;
+  position: absolute;
+  top: 40px;
+  left: -8px;
+  div {
+    position: absolute;
+    border: 4px solid #fff;
+    opacity: 1;
+    border-radius: 50%;
+    animation: ripple-effect 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    &:nth-child(2) {
+      animation-delay: -0.5s;
+    }
+  }
+}
+
+@keyframes ripple-effect {
+  0% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  5% {
+    top: 36px;
+    left: 36px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 72px;
+    height: 72px;
+    opacity: 0;
+  }
+}
+
 </style>