@everymatrix/casino-page 1.0.3 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-page",
-  "version": "1.0.3",
+  "version": "1.0.8",
   "main": "dist/casino-page.js",
   "svelte": "src/index.ts",
   "scripts": {

package/src/CasinoPage.svelte

@@ -112,9 +112,7 @@
   let searchFocus:boolean = false;
   let lobbyScreen:boolean = true;
   let mostPlayedScreen:boolean = false;
-  let mostPlayedEmpty:boolean = false;
   let lastPlayedScreen:boolean = false;
-  let lastPlayedEmpty:boolean = false;
   let adjustingScroll:boolean = false;
   let searchBarCleared:boolean = true;
 
@@ -135,9 +133,8 @@
   const scrollOffset:number = 0;
 
   let scrollTop:boolean = false;
-  let mostPlayedGames:Array<any> = [];
-  let lastPlayedGames:Array<any> = [];
 
+  let activeRecentSearches:boolean = false;
   let favoredGamesCollection:Array<string> = [];
   let categoriesData;
   let receivedFavoriteResults:Object;
@@ -190,39 +187,6 @@
 
       case 'MOSTPLAYED':
         if (mostplayed == 'true') {
-          isLoading = true;
-
-          getMostPlayedGames({
-            limit: 100,
-            device: getDevice(userAgent),
-            rounds: 10
-          }).then((res:any) => {
-            isLoading = false;
-
-            if (res.count > 0) {
-              let promises:any = [];
-
-              res.items.forEach((item:any) => {
-                let url:URL = new URL(`${endpoint}/casino/games/${item.gameId}`);
-
-                url.searchParams.append('datasource', datasource);
-                if (livecasino) {
-                  promises.push(fetch(url.href).then((res:any) => res.json()));
-                } else {
-                  promises.push(fetch(url.href).then((res:any) => res.json()));
-                }
-              });
-
-              Promise.all(promises).then((values:any) => {
-                mostPlayedGames = values.map((item:any) => item[0]);
-
-                window.postMessage({ type: 'MostPlayedData', mostPlayedGames }, window.location.href);
-              });
-            } else {
-              mostPlayedEmpty = true;
-            }
-          });
-
           activeCategory = '';
           lobbyScreen = false;
           favoritesScreen = false;
@@ -232,38 +196,6 @@
 
       case 'LASTPLAYED':
         if (lastplayed == 'true') {
-          isLoading = true;
-
-          getLastPlayedCategory({
-            device: getDevice(userAgent),
-            period: lastplayedperiod || 'Last30Days'
-          }).then((res:any) => {
-            isLoading = false;
-
-            if (res.count > 0) {
-              let promises:any = [];
-
-              res.items.forEach((item:any) => {
-                let url:URL = new URL(`${endpoint}/casino/games/${item.gameId}`);
-
-                url.searchParams.append('datasource', datasource);
-                if (livecasino) {
-                  promises.push(fetch(url.href).then((res:any) => res.json()));
-                } else {
-                  promises.push(fetch(url.href).then((res:any) => res.json()));
-                }
-              });
-
-              Promise.all(promises).then((values:any) => {
-                lastPlayedGames = values.map((item:any) => item[0]);
-
-                window.postMessage({ type: 'LastPlayedData', lastPlayedGames }, window.location.href);
-              });
-            } else {
-              lastPlayedEmpty = true;
-            }
-          });
-
           activeCategory = '';
           lobbyScreen = false;
           lastPlayedScreen = true;
@@ -343,111 +275,44 @@
           setFilterNumberValue();
           break;
 
-        case 'GameHovered':
+        case 'GameHoveredPc':
           gameFocus = true;
           break;
 
-        case 'GameBlur':
-          gameFocus = false;
+        case 'GameBlurPc':
+          if(activeRecentSearches){
+            searchElement.focus();
+            gameFocus = false;
+          } else {
+            gameFocus = false;
+          }
           break;
 
-        default:
-          // Nothing to do here
+        case 'GameHoveredMobile':
+          gameFocus = true;
           break;
-      }
-    }
-  }
-
-  const getMostPlayedGames = (options:any) => {
-    let url = new URL(`${endpoint}/player/${playerID}/games/most-played`);
-
-    if (options.limit) {
-      url.searchParams.append('limit', options.limit);
-    }
-
-    if (options.order) {
-      url.searchParams.append('order', options.order);
-    }
-
-    url.searchParams.append('expand', 'games')
-
-    let device = options.device;
-
-    if (device) {
-      if (device === 'PC') {
-        url.searchParams.append('device', 'Desktop');
-      } else {
-        url.searchParams.append('device', 'Mobile');
-      }
-    } else {
-      url.searchParams.append('device', 'All');
-    }
-
-    if (options.rounds) {
-      url.searchParams.append('rounds', options.rounds);
-    }
-
-    urlCasino = livecasino ? url : url.href;
-    return new Promise((resolve, reject) => {
-      fetch(urlCasino)
-        .then((res:any) => res.json())
-        .then((data:any) => {
-          resolve(data);
 
-          //window.postMessage({ type: 'AddNewCategory', category: { name: 'Last played', id: 'LASTPLAYED' }}, window.location.href);
-          //window.postMessage({ type: 'MostPlayedGames', data }, window.location.href);
-        }).catch((err:any) => {
-          console.error(err);
-
-          reject(err);
-        });
-    });
-  }
-
-  const getLastPlayedCategory = (options:any) => {
-    return new Promise((resolve, reject) => {
-    let url = new URL(`${endpoint}/player/${playerID}/games/last-played`);
-
-    if (options.limit) {
-      url.searchParams.append('limit', options.limit);
-    }
-
-    if (options.order) {
-      url.searchParams.append('order', options.order);
-    }
+        case 'GameBlurMobile':
+          if(activeRecentSearches){
+            onBlur();
+          } else {
+            gameFocus = false;
+          }
+          break;
 
-    let device = options.device;
+        case 'ModalClosed':
+          if(activeRecentSearches){
+            activeRecentSearches = false;
+            gameFocus = false;
+          }
+          break;
 
-    if (device) {
-      if (device === 'PC') {
-        url.searchParams.append('device', 'Desktop');
-      } else {
-        url.searchParams.append('device', 'Mobile');
+        default:
+          // Nothing to do here
+          break;
       }
-    } else {
-      url.searchParams.append('device', 'All');
     }
-
-    if (options.period) {
-      url.searchParams.append('period', options.period);
-    }
-
-    urlCasino = livecasino ? url : url.href;
-      fetch(urlCasino)
-        .then((res:any) => res.json())
-        .then((data:any) => {
-          resolve(data);
-
-          window.postMessage({ type: 'AddNewCategory', category: { name: 'Last Played', id: 'LASTPLAYED' }}, window.location.href);
-          window.postMessage({ type: 'LastPlayedGames', data }, window.location.href);
-        }).catch((err:any) => {
-        console.error(err);
-
-        reject(err);
-      });
-    });
   }
-
   //
   // --- START of Favorites section
   //
@@ -471,7 +336,6 @@
 
               updatedFavoriteResultsIds = getGamesIds(receivedFavoriteResults.items);
             }
-
             return receivedFavoriteResults;
           }).then((favResults) => {
             if (favoritesScreen) {
@@ -667,6 +531,7 @@
   }
 
   const onFocus = () => {
+    activeRecentSearches = true;
     if (endpoint && datasource && lang) {
       searchFocus = true;
 
@@ -708,6 +573,12 @@
         }
       }
     }
+    //Analytics event
+    if(typeof gtag == 'function'){
+      gtag('event', 'SearchInitialized', {
+        'context': 'CasinoPage'
+      });
+    }
   }
 
   const onBlur = () => {
@@ -723,7 +594,8 @@
         window.postMessage({ type: 'CategoryUpdate', itemId: activeCategory }, window.location.href);
       }
 
-      window.postMessage({ type: 'OutOfRecentSearches' }, window.location.href);
+    activeRecentSearches = false;
+    window.postMessage({ type: 'OutOfRecentSearches' }, window.location.href);
     }
   }
 
@@ -812,15 +684,6 @@
   //
   // --- START of communication with other widgets
   //
-  const sendMostPlayed = (node:any, mostPlayedData:CategoriesData) => {
-    window.postMessage({ type: 'MostPlayedData', mostPlayedData }, window.location.href);
-  }
-
-  const sendLastPlayed = (node:any, lastPlayedData:CategoriesData) => {
-    window.postMessage({ type: 'LastPlayedData', lastPlayedData }, window.location.href);
-    console.log('lastplayed 2');
-  }
-
   const submitFilters = (venArray:Array<Object>) => {
     window.postMessage({ type: "AvailableVendors", venArray}, window.location.href);
   }
@@ -977,26 +840,6 @@
     }
   }
 
-  const setClientStyling = () => {
-    let sheet = document.createElement('style');
-    sheet.innerHTML = clientstyling;
-    customStylingContainer.appendChild(sheet);
-  }
-
-  const setClientStylingURL = () => {
-    let cssFile:HTMLElement = document.createElement('style');
-
-    fetch(new URL(clientstylingurl))
-      .then((res:any) => res.text())
-      .then((data:any) => {
-        cssFile.innerHTML = data
-
-        if (customStylingContainer) {
-          setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
-        }
-      });
-  }
-
   const startInterval = (e:any):void => {
     timer = 0;
 
@@ -1037,6 +880,24 @@
     panicButton?.removeEventListener("touchend", endInterval);
   }
 
+  const setClientStyling = () => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = () => {
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(new URL(clientstylingurl))
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile); }, 1);
+      });
+  }
+
   onMount(() => {
     window.addEventListener('scroll', scrollHandler, false);
     window.addEventListener('message', messageHandler, false);
@@ -1053,8 +914,8 @@
   $: session && userid && endpoint && setSession();
   $: endpoint && datasource && lang && alternativesearch && initialSetup();
   $: lang && updateCategoriesLanguage();
-  $: clientstyling && setClientStyling();
-  $: clientstylingurl && setClientStylingURL();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
   $: panicButton && addEventsToDisplayedElements();
 </script>
 
@@ -1189,7 +1050,7 @@
     {/if}
 
     {#if playrandomgame == 'true' && searchFocus == false}
-      <casino-random-game {datasource} {endpoint} {lang} {gameevent} {randombuttonicon}>
+      <casino-random-game {datasource} {endpoint} {lang} {gameevent} {randombuttonicon} {clientstyling} {clientstylingurl}>
       </casino-random-game>
     {/if}
 
@@ -1241,10 +1102,10 @@
                 />
               </div>
             {/if}
-            {#if index === 4 && enablejackpotbanner == 'true'} 
+            {#if index === 4 && enablejackpotbanner == 'true'}
               <br>
               <jackpot-banner
-                title="Egypt Quest" 
+                title="Egypt Quest"
                 currency = {currency || 'RON'}
                 gameid = "999"
                 {endpoint}
@@ -1257,7 +1118,9 @@
                 {caticon2}
                 {caticon3}
                 {iconlabels}
-                {visualstructure} 
+                {visualstructure}
+                {clientstyling}
+                {clientstylingurl}
               />
             {:else if index === 6 && enablejackpotbanner == 'true'}
               <br>
@@ -1275,11 +1138,13 @@
                 caticon2="/assets/icon2.svg"
                 caticon3="/assets/icon3.svg"
                 {iconlabels}
-                visualstructure="typeSpread" 
+                visualstructure="typeSpread"
+                {clientstyling}
+                {clientstylingurl}
               />
             {/if}
             {#if index == 7 && enablecollections == 'true'}
-              <casino-collections-providers 
+              <casino-collections-providers
                 endpoint = {endpoint.slice(0, -2)}
                 {datasource}
                 {lang}
@@ -1289,11 +1154,11 @@
                 {clientstylingurl}>
               </casino-collections-providers>
             {:else if index == (shownCategories.length - 1) && enablecollections == 'true'}
-              <casino-collections-providers 
+              <casino-collections-providers
                 endpoint = {endpoint.slice(0, -2)}
                 {datasource}
                 {lang}
-                type='vendor' 
+                type='vendor'
                 titletype="logo"
                 {clientstyling}
                 {clientstylingurl}>
@@ -1343,57 +1208,61 @@
           {integratedgameframemobile}
         />
         {:else if mostPlayedScreen}
-          {#if mostPlayedEmpty}
-            <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.noGamesPlayed')}</p>
-          {:else if lastPlayedScreen}
-            {#if lastPlayedEmpty}
-              <p class="SearchLoading" part="SearchLoading">{$_('casinoPage.noGamesPlayed')}</p>
-            {/if}
-              {:else}
-            <casino-games-category-section
-              session={session}
-              userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              lang={lang}
-              currency={currency}
-              favorites={favorites}
-              categoryid="MOSTPLAYED"
-              categoryindex="1"
-              categorygames="9"
-              class="CategoryContainer"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-            />
-
-          {/if}
+          <casino-most-played-section
+            userid={userid}
+            endpoint={endpoint}
+            datasource={datasource}
+            favorites={favorites}
+            lang={lang}
+            currency={currency}
+            session={session}
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+          ></casino-most-played-section>
+        {:else if lastPlayedScreen}
+          <casino-last-played-section
+            userid={userid}
+            endpoint={endpoint}
+            datasource={datasource}
+            favorites={favorites}
+            lang={lang}
+            currency={currency}
+            session={session}
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+          ></casino-last-played-section>
         {:else}
-          {#if !recentSearches}
-            <casino-games-category-section
-              userid={userid}
-              endpoint={endpoint}
-              datasource={datasource}
-              favorites={favorites}
-              lang={lang}
-              currency={currency}
-              session={session}
-              categoryid={activeCategory}
-              categorygames="9"
-              class="CategoryContainer"
-              {clientstyling}
-              {clientstylingurl}
-              {livecasino}
-              {visiblegames}
-              {gamepagemodalurl}
-              {integratedgameframedesktop}
-              {integratedgameframemobile}
-            />
-          {/if}
+          <casino-games-category-section
+            userid={userid}
+            endpoint={endpoint}
+            datasource={datasource}
+            favorites={favorites}
+            lang={lang}
+            currency={currency}
+            session={session}
+            categoryid={activeCategory}
+            categorygames="9"
+            class="CategoryContainer"
+            {clientstyling}
+            {clientstylingurl}
+            {livecasino}
+            {visiblegames}
+            {gamepagemodalurl}
+            {integratedgameframedesktop}
+            {integratedgameframemobile}
+          />
         {/if}
       {/if}
     {/if}