@everymatrix/casino-game-page 0.0.268 → 0.0.271

package/package.json

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

package/src/CasinoGamePage.svelte

@@ -33,6 +33,7 @@
   export let clockformat:string = '';
   export let haspanicbutton:string = 'false';
   export let playforfun:string = 'true';
+  export let checksession:string = 'true';
 
   export let gameid:string = '';
 
@@ -66,6 +67,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 +246,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;
@@ -391,14 +392,19 @@
   }
 
   const setSession = ():void => {
-    checkSession(endpoint, session).then((res:any) => {
-      sessionID = res.Guid;
-      playerID = res.UserID;
-      isLoggedIn = true;
-    }, (err:any) => {
-      isLoggedIn = false;
-      console.error('err on session', err);
-    });
+    if (checksession == 'true') {
+      checkSession(endpoint, session).then((res:any) => {
+        sessionID = res.Guid;
+        playerID = res.UserID;
+        isLoggedIn = true;
+      }, (err:any) => {
+        isLoggedIn = false;
+        console.error('err on session', err);
+      });
+    } else {
+      sessionID = session;
+      playerID = userid;
+    }
   }
 
   const setClientStyling = ():void => {
@@ -524,7 +530,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 +549,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 +557,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 +572,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 +606,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 +636,6 @@
     height: 60px;
     background-color: var(--emfe-w-color-primary, #D0046C);
     float: right;
-    margin-top: 20px;
   }
   .GameDetails {
     display: flex;