@everymatrix/casino-game-page 0.0.260 → 0.0.263

package/index.html

@@ -30,8 +30,13 @@
   </header>
 
   <div class="webcomponent">
-    <casino-game-page></casino-game-page>
+    <casino-game-page
+      gameid="46985"
+      lang="en"
+      endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
+      playforfun="true"
+    ></casino-game-page>
   </div>
-  
+
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-page",
-  "version": "0.0.260",
+  "version": "0.0.263",
   "main": "dist/casino-game-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a30fdd6f6180c69aabbc0daf1bf2a2e1342bf0e2"
+  "gitHead": "fccb99c4d5259efacf828703242697132621b19d"
 }

package/src/CasinoGamePage.svelte

@@ -16,7 +16,6 @@
   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;
@@ -35,6 +34,8 @@
   export let haspanicbutton:string = 'false';
   export let playforfun:string = 'true';
 
+  export let gameid:string = '';
+
   let time:Object;
   let iframe:any;
 
@@ -49,6 +50,7 @@
   let detailsObtained:boolean = false;
   let funMode:boolean = false;
   let anonymousFunMode:boolean = false;
+  let isModal:boolean = true;
 
   let gameFrameContainer:HTMLElement;
   let gameInnerContainer:HTMLElement;
@@ -90,35 +92,45 @@
     return game;
   }
 
-  const messageHandler = (e:any):void => {
-    switch (e.data.type) {
-      case 'GameLaunchID':
-        let url:URL = new URL(`${endpoint}/casino/games/${e.data.gameId}`);
+  const createGameURL = (gameId:string, modal?):void => {
+    let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
 
-        url.searchParams.append('language', lang);
-        url.searchParams.append('expand', 'vendor');
+    url.searchParams.append('language', lang);
+    url.searchParams.append('expand', 'vendor');
 
-        fetch(url.href)
-          .then((res:any) => res.json())
-          .then((data:any) => {
-            game = formatGameLaunchUrl(data[0]);
+    isModal = modal || false;
 
-            if (game.launchUrl) {
-              detailsObtained = true;
-              funMode = playforfun == 'true' ? game.hasFunMode : false;
-              anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
-            }
-          }, (err:any) => {
-            console.error('There was an error', err);
+    fetch(url.href)
+      .then((res:any) => res.json())
+      .then((data:any) => {
+        game = formatGameLaunchUrl(data[0]);
 
-            hasErrors = true;
-          }).then(() => {
-            if (gameFrameContainer) {
-              keepIframeRatio();
-            }
-          });
+        if (game.launchUrl) {
+          detailsObtained = true;
+          funMode = playforfun == 'true' ? game.hasFunMode : false;
+          anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
+        }
+      }, (err:any) => {
+        console.error('There was an error', err);
+
+        hasErrors = true;
+      }).then(() => {
+        if (gameFrameContainer) {
+          if (isModal) {
+            keepIframeRatio();
+          } else {
+            maximizeGameFrame();
+          }
+        }
+      });
 
-        window.postMessage({ type: 'RequestModalSize' }, window.location.href);
+    window.postMessage({ type: 'RequestModalSize' }, window.location.href);
+  }
+
+  const messageHandler = (e:any):void => {
+    switch (e.data.type) {
+      case 'GameLaunchID':
+        createGameURL(e.data.gameId, true);
         break;
 
       case 'LaunchGameFrame':
@@ -194,6 +206,12 @@
     }
   }
 
+  const setGameData = (game, gameFunMode) => {
+    anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
+    funMode = playforfun == 'true' ? gameFunMode : false;
+    detailsObtained = true;
+    return checkFavorite(game.id);
+  }
   const openGameFrame = (gameId:string, gameFunMode:boolean):void => {
     let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
 
@@ -203,18 +221,24 @@
       .then((res:any) => res.json())
       .then((data:any) => {
         game = formatGameLaunchUrl(data[0]);
-
         if (game.launchUrl) {
-          anonymousFunMode = playforfun == 'true' ? game.hasAnonymousFunMode : false;
-          funMode = playforfun == 'true' ? gameFunMode : false;
-          detailsObtained = true;
-          game.isFavored = checkFavorite(game.id);
+          game.isFavored = setGameData(game, gameFunMode);
         }
       });
   }
+  const maximizeGameFrame = ():void => {
+    modalFrameWidth = game.width;
+    modalFrameHeight = game.height;
+
+    definitiveIframeWidth = game.width;
+    definitiveIframeHeight = game.height;
+
+    gameFrameWidth = game.width;
+    gameFrameHeight = game.height;
+  }
 
   // Start section: keep aspect ratio for iframe on resize
-  let keepIframeRatio = () => {
+  const keepIframeRatio = ():void => {
     let iframeContainer = getComputedStyle(gameFrameContainer);
     let gameFrame = getComputedStyle(gameInnerContainer);
     let gameContainerWidth = parseInt(iframeContainer.width.slice(0, -2));
@@ -355,17 +379,15 @@
     }
   }
 
-  const timeInterval = setInterval(() => {
+  const timeInterval = setInterval(():void => {
     refreshTime();
   }, 100);
 
-  const initialSetup = ():void => {
+  const setActiveLanguage = ():void => {
     setLocale(lang);
-    isLoading = false;
 
-    if (isMobile(userAgent)) {
-      mobileView = true;
-    }
+    isLoading = false;
+    mobileView = isMobile(userAgent);
   }
 
   const setSession = ():void => {
@@ -417,7 +439,8 @@
     }
   });
 
-  $: endpoint && datasource && lang && initialSetup();
+  $: lang && setActiveLanguage();
+  $: endpoint && gameid && lang && createGameURL(gameid);
   $: session && userid && endpoint && setSession();
   $: clientstyling && setClientStyling();
   $: clientstylingurl && setClientStylingURL();
@@ -526,7 +549,7 @@
           {:else}
             {#if funMode}
               <div id="IframeContainer" part="IframeContainer" bind:this={gameFrameContainer} class:FullsScreenLayout={isFullscreen} style="width: {modalFrameWidth}; height: {modalFrameHeight}">
-                <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : (game.width ? Math.floor(game.width) + 'px' : '1280px')}; max-height: {isFullscreen ? 'none' : (game.height ? (Math.floor(game.height) + 100) + 'px' : '720px')}">
+                <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen || !isModal ? 'none' : (game.width ? Math.floor(game.width) + 'px' : '1280px')}; max-height: {isFullscreen || !isModal ? 'none' : (game.height ? (Math.floor(game.height) + 100) + 'px' : '720px')}">
                   <iframe title="Games" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
                   <div class="BottomGame" part="BottomGame">
                     <div class="ButtonsContainer" part="ButtonsContainer">
@@ -570,6 +593,10 @@
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
 
+  .CasinoGamePageContainer {
+    height: 100%;
+  }
+
   .BottomGame {
     padding-left: 60px;
     padding-right: 60px;
@@ -690,8 +717,8 @@
   }
   .FavIconContainer {
     position: absolute;
-    top: 42px;
-    left: 42px;
+    top: 15px;
+    left: 15px;
     cursor: pointer;
   }
   .PanicSectionMobile {