@everymatrix/casino-game-page 0.0.301 → 0.0.304

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-page",
-  "version": "0.0.301",
+  "version": "0.0.304",
   "main": "dist/casino-game-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0aaa2050b41f07624312c34d37c3b3b55bb33fcb"
+  "gitHead": "d89b47f1860e8b310635d3dbff60138a4eef1a70"
 }

package/src/CasinoGamePage.svelte

@@ -76,6 +76,8 @@
   let isOnNative:boolean = false;
   let showModal:string = 'false';
 
+  let gameStyle = '';
+
   setupI18n({ withLocale: 'en', translations: {}});
 
   Object.keys(GamePageTranslations).forEach((item) => {
@@ -84,6 +86,7 @@
 
   // @TODO game typescript model type
   const formatGameLaunchUrl = (game:any):void => {
+    isLoggedIn = true;
     let url:URL = new URL(game.launchUrl);
 
     url.searchParams.append('language', lang);
@@ -99,6 +102,7 @@
     }
 
     game.launchUrl = url;
+    isLoading = false;
 
     return game;
   }
@@ -270,11 +274,13 @@
     modalFrameWidth = game.width;
     modalFrameHeight = game.height;
 
-    definitiveIframeWidth = game.width;
-    definitiveIframeHeight = game.height;
+    definitiveIframeWidth = `${game.width}px`;
+    definitiveIframeHeight = `${game.height}px`;
 
     gameFrameWidth = game.width;
     gameFrameHeight = game.height;
+
+    keepIframeRatio();
   }
 
   // Start section: keep aspect ratio for iframe on resize
@@ -285,19 +291,17 @@
     let gameContainerHeight = parseInt(iframeContainer.height.slice(0, -2));
     const iframeRatio = game.width/(game.height + 100);
 
-    gameFrameWidth = parseInt(gameFrame.width);
-    gameFrameHeight = parseInt(gameFrame.height);
+
+    gameFrameWidth = parseInt(game.width);
+    gameFrameHeight = parseInt(game.height);
+
     // resize logic for maintaining game ratio when resizing
-    if ((gameContainerWidth / iframeRatio) > (gameContainerHeight - buttonsContainer.clientHeight - timeContainer.clientHeight)){
-      gameFrameHeight = gameContainerHeight - buttonsContainer.clientHeight - timeContainer.clientHeight;
-      gameFrameWidth = gameContainerHeight * iframeRatio;
-    } else {
-      gameFrameWidth = gameContainerWidth;
-      gameFrameHeight = gameContainerWidth / iframeRatio;
-    }
+    gameFrameWidth = gameContainerWidth * iframeRatio;
+    
+    definitiveIframeWidth = gameFrameWidth ? `${Math.floor(gameFrameWidth)}px` : "1280px";
+    definitiveIframeHeight = gameFrameHeight ? `${Math.floor(gameFrameHeight)}px` : "720px";
 
-    definitiveIframeWidth = gameFrameWidth ? Math.floor(gameFrameWidth) + "px" : "1280px";
-    definitiveIframeHeight = gameFrameHeight ? Math.floor(gameFrameHeight) + "px" : "720px";
+    calculateFrameProportions();
   }
 
   const openGameWindow = (game:any):void => {
@@ -488,6 +492,16 @@
     clearInterval(timerInterval);
   }
 
+
+  const calculateFrameProportions = (): void => {
+    let w = isFullscreen ? '100%' : definitiveIframeWidth;
+    let h = isFullscreen ? '100%' : definitiveIframeHeight;
+    let mW = isFullscreen || !isModal ? 'none' : (game.width ? `${Math.floor(game.width)}px`: '1280px');
+    let mH = isFullscreen || !isModal ? 'none' : (game.height ? `${(Math.floor(game.height) + 100)}px` : '720px');
+
+    gameStyle = `width: ${w}; height: ${h}; max-width: ${mW}; max-height: ${mH}`;
+  }
+
   onMount(() => {
     window.addEventListener('resize', resizeHandler, false);
     window.addEventListener('message', messageHandler, false);
@@ -582,7 +596,7 @@
         {:else}
           {#if isLoggedIn}
             <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 ? 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="{gameStyle}">
                 <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
                 <div class="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton == 'true' ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
                   <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
@@ -607,8 +621,8 @@
           {: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 || !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 id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="{gameStyle}">
+                  <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
                   <div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
                     <div class="ButtonsContainer" part="ButtonsContainer">
                       <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
@@ -653,6 +667,14 @@
 
   .CasinoGamePageContainer {
     height: 100%;
+    padding: 0;
+    @media (min-width: 812px) {
+      padding: 60px 20px 20px;
+    }
+
+    @media (min-width: 1024px) {
+      padding: 60px 80px 80px;
+    }
   }
 
   .BottomGame {
@@ -716,6 +738,7 @@
   .BottomGame .ButtonsContainer {
     width: 275px;
     display: flex;
+    justify-self: start;
     flex-direction: row;
     justify-content: space-between;
   }
@@ -772,8 +795,10 @@
     justify-content: center;
   }
   #IframeGame {
-    width: 100%;
-    height: 100%;
+    max-width: 1280px;
+    max-height: 820px;
+    width: 1245px;
+    height: 797px;
   }
   .FullsScreenLayout .GamesContainer {
       // the use of !important is necessary in order to override the dynamic inline width/height, when in fullscreen mode