@everymatrix/casino-header-controller 1.37.2 → 1.37.3

package/index.html

@@ -29,14 +29,23 @@
 
   <div class="webcomponent">
     <casino-header-controller
-      session="df7edc00-c01a-4a98-b215-a0d207d58010" userid="3856617"
+      session="31124550-3b07-4687-a92d-55919f1caa41" userid="3856617"
       userroles="everyone,loggedIn,TestDemoCosmin" cmsendpoint="https://wt1-stage.everymatrix.com/apijson" env="stage"
       lang="en" languageslist="es,en,ro,pl,bg,hk"
-      shortcashierenabled="true"
+      shortcashierenabled="false"
       endpoint="https://demo-api.stage.norway.everymatrix.com"
-      actionevent="HeaderMenuItemClicked" activecategory="/en/casino" clientstyling="
-  " currencyseparator="." currencydecimal="," currencyprecision="2" gmversion="gmcore"
-  countryflagheader="false" countryflaghamburger='true'customlocaleidentifier=""></casino-header-controller>
+      actionevent="HeaderMenuItemClicked"
+      activecategory="/en/casino"
+      clientstyling=""
+      currencyseparator="."
+      currencydecimal=","
+      currencyprecision="2"
+      gmversion="gmcore"
+      countryflagheader="true"
+      shortcashierenabled='true'
+      countryflaghamburger='true'
+      customlocaleidentifier="">
+    </casino-header-controller>
 
   </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "1.37.2",
+  "version": "1.37.3",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a314fe46510038a31ea77b611f22f5429a56d49"
+  "gitHead": "df31cbe8e6b206c5aed27f8036ab50826359872e"
 }

package/src/CasinoHeaderController.svelte

@@ -58,6 +58,9 @@
 
   let activeIndex: number;
   let customStylingContainer: HTMLElement;
+  let balanceContainer: HTMLElement;
+  let depositContainer: HTMLElement;
+  let backgroundContainer: HTMLElement;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -203,11 +206,32 @@
 
         case 'BalanceModalStatus':
           isBalanceOpened = e.data.status == 'open';
+          adaptDepositBackground(isBalanceOpened);
+          break;
+
+        case 'BalancedFetched':
+          setInitialStateForDepositBackground();
           break;
       }
     }
   }
 
+  const setInitialStateForDepositBackground = (): void => {
+    let width = depositContainer.getBoundingClientRect().width;
+    backgroundContainer.style.width = `${width}px`;
+    backgroundContainer.style.left = `${balanceContainer.getBoundingClientRect().width}px`;
+  }
+
+  const adaptDepositBackground = (isBalanceOpened): void => {
+    if (isBalanceOpened) {
+      let width = balanceContainer.getBoundingClientRect().width;
+      backgroundContainer.style.width = `${width}px`;
+      backgroundContainer.style.left = `0px`;
+    } else {
+      setInitialStateForDepositBackground();
+    }
+  }
+
   const setSession = (): void => {
     isLoggedIn = true;
     sessionID = session;
@@ -386,7 +410,6 @@
     window.addEventListener('message', messageHandler, false);
 
     mobileView = isMobile(userAgent);
-    console.log('mobileView', mobileView)
 
     return () => {
       window.removeEventListener('message', messageHandler);
@@ -395,7 +418,7 @@
 
   $: activecategory && !isLoading && initializeMenu();
   $: session && setSession();
-  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() === 'true';
+  $: isShortCashierEnabled = shortcashierenabled.toLocaleLowerCase() == 'true';
   $: lang && setActiveLanguage();
   $: cmsendpoint && lang && languageslist && userroles && initialLoad();
   $: translationurl && setTranslationUrl();
@@ -444,11 +467,10 @@
     </nav>
     {#if isLoggedIn}
       <div class="BalanceDepositWrapper">
-        <div class="Background {isBalanceOpened ? 'Open' : ''}"></div>
-        <div class="Balance  {isBalanceOpened ? 'Open' : ''}">
+        <div class="Balance  {isBalanceOpened ? 'Open' : ''}" bind:this={balanceContainer}>
           <player-account-balance-modal {session} {userid} {endpoint} {lang} {clientstyling} {clientstylingurl} {customlocaleidentifier} {gmversion} {displaybalanceoption} {currencyseparator} {currencydecimal} {currencyprecision} />
         </div>
-        <div class="Deposit {isBalanceOpened ? 'Open' : ''}">
+        <div class="Deposit {isBalanceOpened ? 'Open' : ''}" bind:this={depositContainer}>
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div class="DepositButton" on:click={() => menuAction('deposit')}>
             <p>{$_('deposit')}</p>
@@ -461,8 +483,8 @@
               <div class="ShortCashierContainerMobile">
                 <div class="ClosePopUpButtonShortCashier" on:click={(event) => closeShortCashier(event)}>
                   <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-                    <line x1="2" y1="2" x2="18" y2="18" stroke="black" stroke-width="2"/>
-                    <line x1="18" y1="2" x2="2" y2="18" stroke="black" stroke-width="2"/>
+                    <line x1="2" y1="2" x2="18" y2="18" stroke-width="2"/>
+                    <line x1="18" y1="2" x2="2" y2="18" stroke-width="2"/>
                   </svg>
                 </div>
                 {#if gmversion === 'gmcore'}
@@ -501,6 +523,7 @@
             </div>
           {/if}
         </div>
+        <div class="Background {isBalanceOpened ? 'Open' : ''}" bind:this={backgroundContainer}></div>
       </div>
       <div class="Profile">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -517,20 +540,19 @@
     {:else}
       <div class="AuthButtons">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="Item ItemLogin" on:click={()=>menuAction('login')}>
+        <div class="Item ItemLogin" on:click={() => menuAction('login')}>
           <p>{$_('login')}</p>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"/></svg>
         </div>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="Item ItemRegister" on:click={()=>menuAction('register')}>
+        <div class="Item ItemRegister" on:click={() => menuAction('register')}>
           <p>{$_('register')}</p>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
         </div>
       </div>
     {/if}
     <div class="Slot1">
-      <slot name="slot1">
-      </slot>
+      <slot name="slot1"></slot>
     </div>
     <div class="Slot2">
       <slot name="slot2"></slot>
@@ -1094,26 +1116,19 @@
         height: 34px;
         background-color: white;
         display: flex;
+        position: relative;
         justify-content: center;
         align-items: center;
         border-radius: 30px;
-        padding: 0 0 0 10px;
 
         .Background {
           height: 34px;
-          width: 80px;
           position: absolute;
-          transform: translateX(36%);
           background: linear-gradient(0deg, rgba(35,178,78,1) 0%, rgba(26,205,80,1) 100%) padding-box,
                       linear-gradient(180deg, rgba(35,178,78,.2) 0%, rgba(26,205,80,.2) 100%) border-box;
           border-radius: 30px;
           z-index: 3;
-          transition: all .3s ease-out;
-
-          &.Open {
-            width: 75px;
-            transform: translateX(-56%);
-          }
+          transition: all 0.3s ease;
         }
 
         .Deposit {
@@ -1121,13 +1136,13 @@
           align-items: center;
           cursor: pointer;
           justify-content: center;
-          margin: 0 10px;
           z-index: 4;
 
           .DepositButton {
             font-size: 14px;
             text-align: center;
             cursor: pointer;
+            padding: 0 10px;
             transition: all .5s linear;
             display: flex;
             justify-content: center;
@@ -1135,6 +1150,15 @@
             p {
               text-transform: uppercase;
               color: white;
+              transition: all .3s ease;
+
+              &:hover {
+                text-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
+              }
+
+              &:active {
+                color: black;
+              }
             }
           }
 
@@ -1151,7 +1175,11 @@
         }
 
         .Balance {
+          display: flex;
           z-index: 4;
+          height: 100%;
+          padding-left: 10px;
+          align-items: center;
 
           &.Open {
             color: white;
@@ -1163,6 +1191,7 @@
         display: flex;
         justify-content: center;
         flex-direction: column;
+        cursor: pointer;
 
         .ProfileWrapper {
           width: 30px;
@@ -1172,11 +1201,22 @@
           display: flex;
           justify-content: center;
           align-items: center;
+          transition: all .3s ease;
 
           svg {
             width: 15px;
             height: 16px;
             fill: var(--emw-color-white, #FFFFFF)
+
+          }
+          &:hover {
+            box-shadow: 0px 0px 4px white;
+          }
+
+          &:active {
+            svg {
+              fill: var(--emw-color-black, #000000)
+            }
           }
         }
       }