@everymatrix/casino-random-game 1.0.3 → 1.0.8

package/package.json

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

package/src/CasinoRandomGame.svelte

@@ -11,6 +11,8 @@
   export let lang:string = '';
   export let randombuttonicon:string = '';
   export let buttontext: string = '';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
 
   let games:any = [];
   let randomGame:any = '';
@@ -21,6 +23,7 @@
   let slotDone:boolean = false;
 
   let userAgent:string = window.navigator.userAgent;
+  let customStylingContainer:HTMLElement;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -28,7 +31,7 @@
     addNewMessages(item, CasinoRandomGameTranslations[item]);
   });
 
-  const getRandomGame = ():void => {
+  const getRandomGame = (refresh?:boolean):void => {
     gamesToShow = shuffle(gamesToShow);
     offset = 0;
     count = 0;
@@ -45,6 +48,16 @@
         clearInterval(interval);
       }
     }, 100);
+
+    if(refresh){
+      //Analytics event
+      if(typeof gtag == 'function'){
+        gtag('event', 'RefreshRandomGame', {
+          'context': 'RandomGameWidget',
+          'gameId' : `${randomGame.gId || randomGame.id}`
+        });
+      } 
+    }
   }
 
   const shuffle = (array):Array<any> => {
@@ -63,6 +76,14 @@
   const playGame = ():void => {
     window.postMessage({ type: gameevent, gameId: randomGame.gId || randomGame.id }, window.location.href);
     show = false;
+
+    //Analytics event
+    if(typeof gtag == 'function'){
+      gtag('event', 'OpenGame', {
+        'context': 'RandomGameWidget',
+        'gameId' : `${randomGame.gId || randomGame.id}`
+      });
+    } 
   }
 
   const closeModal = ():void => {
@@ -90,11 +111,33 @@
     setLocale(lang);
   }
 
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data;
+
+        setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+      });
+  }
+
   $: lang && setActiveLanguage();
   $: endpoint && datasource && fetchGameList();
+  $: clientstyling && customStylingContainer && setClientStyling();
+  $: clientstylingurl && customStylingContainer && setClientStylingURL();
 </script>
 
-<div part="CustomStylingContainer">
+<div bind:this={customStylingContainer} part="CustomStylingContainer">
   <div>
     {#if show}
     <div class="ModalWindow" part="ModalWindow">
@@ -124,7 +167,7 @@
           <div class="RandomGameWrapper" part="RandomGameWrapper">
             <div class="item" part="item">
               <img class="RandomGameImage" part="RandomGameImage" src={randomGame.thumbnail} alt={randomGame.name} title={randomGame.name}/>
-              <button class="RandomTryAgain" part="RandomTryAgain" on:click={() => getRandomGame()}>
+              <button class="RandomTryAgain" part="RandomTryAgain" on:click={() => getRandomGame(true)}>
                 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
                   <style type="text/css">
                     .st0{fill:var(--emfe-w-color-white, #FFFFFF);;}