@everymatrix/casino-game-page 0.0.268 → 0.0.269

package/package.json

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

package/src/CasinoGamePage.svelte

@@ -66,6 +66,8 @@
   let mobileView:boolean = false;
   let favoriteGames: Array<Object> = [];
   let customStylingContainer:HTMLElement;
+  let buttonsContainer:HTMLElement;
+  let timeContainer:HTMLElement;
   let isOnNative:boolean = false;
 
   setupI18n({ withLocale: 'en', translations: {}});
@@ -243,15 +245,13 @@
     let gameFrame = getComputedStyle(gameInnerContainer);
     let gameContainerWidth = parseInt(iframeContainer.width.slice(0, -2));
     let gameContainerHeight = parseInt(iframeContainer.height.slice(0, -2));
-
     const iframeRatio = game.width/(game.height + 100);
 
     gameFrameWidth = parseInt(gameFrame.width);
     gameFrameHeight = parseInt(gameFrame.height);
-
     // resize logic for maintaining game ratio when resizing
-    if ((gameContainerWidth / iframeRatio) > gameContainerHeight){
-      gameFrameHeight = gameContainerHeight;
+    if ((gameContainerWidth / iframeRatio) > (gameContainerHeight - buttonsContainer.clientHeight - timeContainer.clientHeight)){
+      gameFrameHeight = gameContainerHeight - buttonsContainer.clientHeight - timeContainer.clientHeight;
       gameFrameWidth = gameContainerHeight * iframeRatio;
     } else {
       gameFrameWidth = gameContainerWidth;
@@ -524,7 +524,7 @@
             <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')}">
                 <iframe title="Games" id="IframeGame" class="GamesContainer" part="GamesContainer" aria-hidden="false" src={game.launchUrl} bind:this={iframe}/>
-                <div class="BottomGame" part="BottomGame">
+                <div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
                   <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
                   {#if haspanicbutton === "true"}
                     <div class="PanicSection" part="PanicSection">
@@ -543,7 +543,7 @@
                     </button>
                   {/if}
                 </div>
-                <p class="Time" part="Time"><span>{time}</span></p>
+                <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
               </div>
             </div>
           {:else}
@@ -551,7 +551,7 @@
               <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 class="BottomGame" part="BottomGame">
+                  <div class="BottomGame" part="BottomGame" bind:this={buttonsContainer}>
                     <div class="ButtonsContainer" part="ButtonsContainer">
                       <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
                       <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
@@ -566,7 +566,7 @@
                       </button>
                     {/if}
                   </div>
-                  <p class="Time" part="Time"><span>{time}</span></p>
+                  <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
                 </div>
               </div>
             {:else}
@@ -600,7 +600,6 @@
   .BottomGame {
     padding-left: 60px;
     padding-right: 60px;
-    padding-bottom: 15px;
     min-height: 85px;
     background-color: var(--emfe-w-color-contrast, #07072A);
     display: flex;
@@ -631,7 +630,6 @@
     height: 60px;
     background-color: var(--emfe-w-color-primary, #D0046C);
     float: right;
-    margin-top: 20px;
   }
   .GameDetails {
     display: flex;