@everymatrix/casino-game-page 0.0.257 → 0.0.260

package/package.json

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

package/src/CasinoGamePage.svelte

@@ -198,7 +198,7 @@
     let url:URL = new URL(`${endpoint}/casino/games/${gameId}`);
 
     url.searchParams.append('language', lang);
-    
+
     fetch(url.href)
       .then((res:any) => res.json())
       .then((data:any) => {
@@ -234,8 +234,8 @@
       gameFrameHeight = gameContainerWidth / iframeRatio;
     }
 
-    definitiveIframeWidth = Math.floor(gameFrameWidth) + "px";
-    definitiveIframeHeight = Math.floor(gameFrameHeight) + "px";
+    definitiveIframeWidth = gameFrameWidth ? Math.floor(gameFrameWidth) + "px" : "1280px";
+    definitiveIframeHeight = gameFrameHeight ? Math.floor(gameFrameHeight) + "px" : "720px";
   }
 
   const openGameWindow = (game:any):void => {
@@ -499,7 +499,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 + 'px'}; max-height: {isFullscreen ? 'none' : (game.height + 100) + 'px'}">
+            <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">
                   <button class="DepositButton" part="DepositButton" on:click='{() => toggleDeposit()}'>{$_('gamePage.deposit')}</button>
@@ -526,7 +526,7 @@
           {: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 ? 'none' : game.width + 'px'}; max-height: {isFullscreen ? 'none' : (game.height + 100) + 'px'}">
+                <div id="IframeGame" part="IframeGame" bind:this={gameInnerContainer} style="width: {isFullscreen ? '100%' : definitiveIframeWidth}; height: {isFullscreen ? '100%' : definitiveIframeHeight}; max-width: {isFullscreen ? 'none' : (game.width ? Math.floor(game.width) + 'px' : '1280px')}; max-height: {isFullscreen ? '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="ButtonsContainer" part="ButtonsContainer">
@@ -565,13 +565,6 @@
 {/if}
 
 <style lang="scss">
-  //This function does a multiplication
-  // in order to work with px the
-  // same way as working with em
-  @function ttp($value) {
-    $multiplicator: 16px;
-    @return $value * $multiplicator;
-  }
 
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
@@ -698,7 +691,7 @@
   .FavIconContainer {
     position: absolute;
     top: 42px;
-    left: 42x;
+    left: 42px;
     cursor: pointer;
   }
   .PanicSectionMobile {
@@ -719,14 +712,14 @@
       fill: none;
     }
     p {
-      font-size: ttp(1);
+      font-size: 16px;
       color: var(--emfe-w-color-white, #FFFFFF);
     }
     .Button {
       border-radius: 5px;
       border: 1px solid var(--emfe-w-color-primary, #D0046C);
       background-color: var(--emfe-w-color-primary, #D0046C);
-      width: ttp(15);
+      width: 240px;
       height: 60px;
       color: var(--emfe-w-color-white, #FFFFFF);
       cursor: pointer;