@everymatrix/casino-game-page 0.0.272 → 0.0.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-game-page",
-  "version": "0.0.272",
+  "version": "0.0.275",
   "main": "dist/casino-game-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2251ff7ad156e5d687da1a0ce2f71e526ca4eac5"
+  "gitHead": "6b4c5e75ec17a99271b51d6cd70f107340dd5dab"
 }

package/src/CasinoGamePage.svelte

@@ -141,9 +141,8 @@
         break;
 
       case 'ModalClosed':
-        setTimeout(() => {  // the timeout is necessary in order to sync with the closing of the modal frame and provide a smoother transition
-          detailsObtained = false;
-        }, 500);
+        // the timeout is necessary in order to sync with the closing of the modal frame and provide a smoother transition
+        setTimeout(() => { detailsObtained = integratedgameframe === "true";}, 500);
         break;
 
       case 'UserSessionID':
@@ -308,6 +307,7 @@
     if (registerevent) {
       window.postMessage({ type: registerevent, transition: 'Register' }, window.location.href);
       window.postMessage({ type: 'ModalClosed' }, window.location.href);
+
     }
 
     if (registerurl) {
@@ -532,8 +532,9 @@
             <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" 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>
@@ -551,7 +552,6 @@
                     </button>
                   {/if}
                 </div>
-                <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
               </div>
             </div>
           {:else}
@@ -564,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>
@@ -574,7 +575,6 @@
                       </button>
                     {/if}
                   </div>
-                  <p class="Time" part="Time" bind:this={timeContainer}><span>{time}</span></p>
                 </div>
               </div>
             {:else}
@@ -610,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);
@@ -630,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;
@@ -650,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);