@everymatrix/casino-game-page 0.0.214 → 0.0.218

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-page",
-  "version": "0.0.214",
+  "version": "0.0.218",
   "main": "dist/casino-game-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "504c889b442d1a70906bdb23ddaef68e256963b6"
+  "gitHead": "ae78406d20c106f1d3c352c0e97189a7bdffacfb"
 }

package/src/CasinoGamePage.svelte

@@ -1,50 +1,57 @@
 <svelte:options tag={null} />
 
-<script lang="typescript">
+<script lang="ts">
   import { onMount } from "svelte";
   import { isMobile, checkSession, getDevice } from 'rvhelper';
-  import { _, addNewMessages } from './i18n';
+  import { _, addNewMessages, setupI18n } from './i18n';
   import { GamePageTranslations } from './translations';
 
+  // Native bridge
+  import {
+    isNative,
+    call as callNative,
+    registerEventListener as registerNativeEventListener,
+  } from 'js-native-bridge';
+
   import moment from 'moment';
 
-  export let endpoint:String = '';
-  export let datasource:String = '';
-  export let lang:String = ''; // Language
-  export let session:String = ''; // Value for sessionID
-  export let userid:String = ''; // Value for UserID;
-  export let clientstyling:String = '';
-  export let clientstylingurl:String = '';
+  export let endpoint:string = '';
+  export let datasource:string = '';
+  export let lang:string = ''; // Language
+  export let session:string = ''; // Value for sessionID
+  export let userid:string = ''; // Value for UserID;
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
   export let favorites:string = '';
 
-  export let loginurl:String = '';
-  export let registerurl:String = '';
-  export let depositurl:String = '';
-  export let loginevent:String = '';
-  export let registerevent:String = '';
-  export let depositevent:String = '';
+  export let loginurl:string = '';
+  export let registerurl:string = '';
+  export let depositurl:string = '';
+  export let loginevent:string = '';
+  export let registerevent:string = '';
+  export let depositevent:string = '';
 
-  export let clockformat:String = '';
-  export let haspanicbutton:String = 'false';
+  export let clockformat:string = '';
+  export let haspanicbutton:string = 'false';
 
   let time:Object;
   let iframe:any;
 
-  let isLoggedIn:Boolean = false;
-  let hasErrors:Boolean = false;
-  let isLoading:Boolean = true;
+  let isLoggedIn:boolean = false;
+  let hasErrors:boolean = false;
+  let isLoading:boolean = true;
 
-  let playerID:String;
-  let sessionID:String;
+  let playerID:string;
+  let sessionID:string;
 
   let game:any;
-  let detailsObtained:Boolean = false;
-  let funMode:Boolean = false;
-  let anonymousFunMode:Boolean = false;
+  let detailsObtained:boolean = false;
+  let funMode:boolean = false;
+  let anonymousFunMode:boolean = false;
 
   let gameFrameContainer:HTMLElement;
   let gameInnerContainer:HTMLElement;
-  let isFullscreen:Boolean = false;
+  let isFullscreen:boolean = false;
   let gameFrameCloseFullScreen:HTMLElement;
   let modalFrameWidth:number;
   let modalFrameHeight:number;
@@ -53,25 +60,31 @@
   let definitiveIframeWidth:string;
   let definitiveIframeHeight:string;
   let userAgent:any = window.navigator.userAgent;
-  let mobileView:Boolean = false;
+  let mobileView:boolean = false;
   let favoriteGames: Array<Object> = [];
   let customStylingContainer:HTMLElement;
 
+  let isOnNative:boolean = false;
+
+  setupI18n({ withLocale: 'en', translations: {}});
+
   Object.keys(GamePageTranslations).forEach((item) => {
     addNewMessages(item, GamePageTranslations[item]);
   });
 
-  const formatGameLaunchUrl = (game:any) => {
-    let url:any = new URL(game.launchUrl);
+  // @TODO game typescript model type
+  const formatGameLaunchUrl = (game:any):void => {
+    let url:URL = new URL(game.launchUrl);
 
     url.searchParams.append('language', lang);
 
+    // @TODO wtf? session check or go home
     // Maybe we should check if the session is valid, somehow?
     if (sessionID && sessionID.length > 0) {
       isLoggedIn = true;
 
       url.searchParams.append('_sid', sessionID)
-      url.searchParams.append('funMode', false)
+      url.searchParams.append('funMode', 'false')
       url.searchParams.append('language', lang)
     }
 
@@ -80,14 +93,15 @@
     return game;
   }
 
-  const messageHandler = (e:any) => {
+  const messageHandler = (e:any):void => {
     switch (e.data.type) {
       case 'GameLaunchID':
-        let url = new URL(`${endpoint}/casino/games/${e.data.gameId}`);
+        let url:URL = new URL(`${endpoint}/casino/games/${e.data.gameId}`);
 
         url.searchParams.append('language', lang);
+        url.searchParams.append('expand', 'game(vendor)');
 
-        fetch(url)
+        fetch(url.href)
           .then((res:any) => res.json())
           .then((data:any) => {
             game = formatGameLaunchUrl(data[0]);
@@ -164,14 +178,10 @@
           favoriteGames = e.data.receivedFavoriteResults.items;
         }
         break;
-
-      default:
-        // Nothing to do here
-        break;
     }
   }
 
-  const checkFavorite = (gameId:string) => {
+  const checkFavorite = (gameId:string):boolean => {
     if (favoriteGames.findIndex(obj => obj.id == gameId) !== -1) {
       return true;
     } else {
@@ -179,7 +189,7 @@
     }
   }
 
-  const toggleFavoriteGame = (id:any) => {
+  const toggleFavoriteGame = (id:any):void => {
     let triggerFactor = "gamepage";
 
     if (game.isFavored) {
@@ -191,12 +201,13 @@
     }
   }
 
-  let openGameFrame = (gameId:string, gameFunMode:Boolean) => {
-    let url = new URL(`${endpoint}/casino/games/${gameId}`);
+  const openGameFrame = (gameId:string, gameFunMode:boolean):void => {
+    let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
 
     url.searchParams.append('language', lang);
+    url.searchParams.append('expand', 'vendor');
 
-    fetch(url)
+    fetch(url.href)
       .then((res:any) => res.json())
       .then((data:any) => {
         game = formatGameLaunchUrl(data[0]);
@@ -235,11 +246,21 @@
     definitiveIframeHeight = Math.floor(gameFrameHeight) + "px";
   }
 
-  const openGameWindow = (game:any) => {
-    window.open(game.launchUrl, '_blank');
+  const openGameWindow = (game:any):void => {
+    if (isOnNative) {
+      let data = {
+        url: game.launchUrl,
+        id: game.id,
+        vendor: game.vendor.name
+      }
+      
+      callNative('OPEN_GAME', data);
+    } else {
+      window.open(game.launchUrl, '_blank');
+    }
   }
 
-  const resizeHandler = () => {
+  const resizeHandler = ():void => {
     // sent to modal component a flag (detailsObtained) by witch to determine if a game is open
     window.postMessage({ type: 'GameStateOnResize', detailsObtained }, window.location.href);
     // make sure that a game is open before trying to get the element properties
@@ -252,36 +273,39 @@
   }
 
   // End section: keep aspect ratio for iframe on resize
-  const toggleLogin = () => {
+  const toggleLogin = ():void => {
     if (loginevent) {
-      window.postMessage({ type: loginevent, login: true }, window.location.href);
+      window.postMessage({ type: loginevent, transition: 'Login' }, window.location.href);
       window.postMessage({ type: 'ModalClosed' }, window.location.href);
     }
 
     if (loginurl) {
-      window.location = loginUrl;
+      // @ts-ignore
+      window.location = loginurl;
     }
   }
 
-  const toggleRegister = () => {
+  const toggleRegister = ():void => {
     if (registerevent) {
-      window.postMessage({ type: registerevent, register: true }, window.location.href);
+      window.postMessage({ type: registerevent, transition: 'Register' }, window.location.href);
       window.postMessage({ type: 'ModalClosed' }, window.location.href);
     }
 
     if (registerurl) {
-      window.location = registerUrl;
+      // @ts-ignore
+      window.location = registerurl;
     }
   }
 
-  const toggleDeposit = () => {
+  const toggleDeposit = ():void => {
     if (depositevent) {
       window.postMessage({ type: depositevent }, window.location.href);
       window.postMessage({ type: 'ModalClosed' }, window.location.href);
     }
 
     if (depositurl) {
-      window.location = depositUrl;
+      // @ts-ignore
+      window.location = depositurl;
     }
   }
 
@@ -327,11 +351,11 @@
     }
   }
 
-  const PanicAction = () => {
+  const panicAction = ():void => {
     window.postMessage({ type: 'PanicButtonClicked' }, window.location.href);
   }
 
-  const refreshTime = () => {
+  const refreshTime = ():void => {
     if (clockformat) {
       time = moment().format(clockformat);
     } else {
@@ -343,7 +367,7 @@
     refreshTime();
   }, 100);
 
-  const initialSetup = () => {
+  const initialSetup = ():void => {
     isLoading = false;
 
     if (isMobile(userAgent)) {
@@ -351,7 +375,7 @@
     }
   }
 
-  const setSession = () => {
+  const setSession = ():void => {
     checkSession(endpoint, session).then((res:any) => {
       sessionID = res.Guid;
       playerID = res.UserID;
@@ -362,17 +386,19 @@
     });
   }
 
-  const setClientStyling = () => {
+  const setClientStyling = ():void => {
     let sheet = document.createElement('style');
     sheet.innerHTML = clientstyling;
     customStylingContainer.appendChild(sheet);
   }
 
-  const setClientStylingURL = () => {
+  const setClientStylingURL = ():void => {
     let cssFile:HTMLElement = document.createElement('style');
 
     if (clientstylingurl) {
-      fetch(new URL(clientstylingurl))
+      let url:URL = new URL(clientstylingurl);
+
+      fetch(url.href)
         .then((res:any) => res.text())
         .then((data:any) => {
           cssFile.innerHTML = data
@@ -388,6 +414,8 @@
     window.addEventListener('resize', resizeHandler, false);
     window.addEventListener('message', messageHandler, false);
 
+    isOnNative = !!isNative(userAgent);
+
     return () => {
       window.removeEventListener('resize', resizeHandler);
       window.removeEventListener('message', messageHandler);
@@ -447,7 +475,7 @@
                     <svg class="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                     <p>{$_('gamePage.break')}</p>
                   </div>
-                  <button class="Button" on:click={() => PanicAction()}>{$_('gamePage.breakButton')}</button>
+                  <button class="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
                 </div>
               {/if}
               <p>{time}</p>
@@ -487,7 +515,7 @@
                     <div class="PanicSection">
                       <svg class="w-1 h-1" fill="none" stroke="white" width="34px" height="34px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                       <p>{$_('gamePage.break')}</p>
-                      <button class="Button" on:click={() => PanicAction()}>{$_('gamePage.breakButton')}</button>
+                      <button class="Button" on:click={() => panicAction()}>{$_('gamePage.breakButton')}</button>
                     </div>
                   {/if}
                   {#if isFullscreen}

package/src/i18n.js

@@ -11,9 +11,7 @@ function setupI18n({ withLocale: _locale, translations }) {
       dictionary.set(translations);
       locale.set(_locale);
     }
-  }); // maybe we will need this to make sure that the i18n is set up only once
-  /*dictionary.set(translations);
-  locale.set(_locale);*/
+  });
 }
 
 function addNewMessages(lang, dict) {

package/src/translations.js

@@ -17,8 +17,8 @@ export const GamePageTranslations = {
       deposit: 'Einzahlung',
       playForFun: 'Play for fun',
       playNow: 'Jetzt starten!',
-      break: 'Take 1 day break from playing',
-      breakButton: '24-hour Cool Off',
+      break: 'Mach mal einen Tag Pause!',
+      breakButton: '24 Stunden Auszeit',
     }
   },
   it: {