@everymatrix/casino-game-page 0.0.271 → 0.0.274

package/package.json

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

package/src/CasinoGamePage.svelte

@@ -34,6 +34,7 @@
   export let haspanicbutton:string = 'false';
   export let playforfun:string = 'true';
   export let checksession:string = 'true';
+  export let integratedgameframe:string = 'false';
 
   export let gameid:string = '';
 
@@ -56,7 +57,6 @@
   let gameFrameContainer:HTMLElement;
   let gameInnerContainer:HTMLElement;
   let isFullscreen:boolean = false;
-  let gameFrameCloseFullScreen:HTMLElement;
   let modalFrameWidth:number;
   let modalFrameHeight:number;
   let gameFrameWidth:number;
@@ -272,8 +272,10 @@
       }
 
       callNative('OPEN_GAME', data);
-    } else {
+    } else if(integratedgameframe == 'false') {
       window.open(game.launchUrl, '_blank');
+    } else if(integratedgameframe == 'true') {
+      window.postMessage({ type: 'OpenIntegratedGameFrame' }, window.location.href);
     }
   }
 
@@ -528,10 +530,11 @@
         {: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="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" bind:this={buttonsContainer}>
+                <div class="BottomGame {haspanicbutton ? 'BottomGamePanicSection' : ''}" part="BottomGame {haspanicbutton ? 'BottomGamePanicSection' : ''}" bind:this={buttonsContainer}>
                   <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
+                  <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
                   {#if haspanicbutton === "true"}
                     <div class="PanicSection" part="PanicSection">
                       <svg class="w-1 h-1" part="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>
@@ -549,7 +552,6 @@
                     </button>
                   {/if}
                 </div>
-                <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
               </div>
             </div>
           {:else}
@@ -562,6 +564,7 @@
                       <button class="LoginButton" part="LoginButton" on:click='{() => toggleLogin()}'>{$_('gamePage.signIn')}</button>
                       <button class="RegisterButton" part="RegisterButton" on:click='{() => toggleRegister()}'>{$_('gamePage.register')}</button>
                     </div>
+                    <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
                     {#if isFullscreen}
                       <button class="FullscreenButton" part="FullscreenButton" on:click='{() => handleIframeSize()}'>
                         <svg width="24" height="24" viewBox="0 0 31 31"><polygon style="fill:#fff;" points="24.586,27.414 29.172,32 32,29.172 27.414,24.586 32,20 20,20 20,32 			"/><polygon style="fill:#fff;" points="0,12 12,12 12,0 7.414,4.586 2.875,0.043 0.047,2.871 4.586,7.414 			"/><polygon style="fill:#fff;" points="0,29.172 2.828,32 7.414,27.414 12,32 12,20 0,20 4.586,24.586 			"/><polygon style="fill:#fff;" points="20,12 32,12 27.414,7.414 31.961,2.871 29.133,0.043 24.586,4.586 20,0 			"/></svg>
@@ -572,7 +575,6 @@
                       </button>
                     {/if}
                   </div>
-                  <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
                 </div>
               </div>
             {:else}
@@ -608,12 +610,24 @@
     padding-right: 60px;
     min-height: 85px;
     background-color: var(--emfe-w-color-contrast, #07072A);
-    display: flex;
-    justify-content: space-between;
     align-items: center;
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+    gap: 0px 0px;
+    justify-items: center;
+
+    &.BottomGamePanicSection {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
   }
+
   .DepositButton, .PlayNowButton {
     border: none;
+    justify-self: left;
     width: 130px;
     height: 60px;
     background-color: var(--emfe-w-color-green, #48952a);
@@ -628,14 +642,15 @@
     border-radius: 2px;
     width: 270px;
     height: 180px;
+    margin-bottom: 20px;
   }
   .FullscreenButton {
     border-radius: 5px;
+    justify-self: end;
     border: none;
     width: 60px;
     height: 60px;
     background-color: var(--emfe-w-color-primary, #D0046C);
-    float: right;
   }
   .GameDetails {
     display: flex;
@@ -648,13 +663,13 @@
     text-align: center;
     padding: 0 10px;
   }
-  .ButtonsContainer {
+  .BottomGame .ButtonsContainer {
     width: 275px;
-    margin-top: 20px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
+
   .RegisterButton {
     color: var(--emfe-w-color-white, #FFFFFF);
     background-color: var(--emfe-w-color-primary, #D0046C);