@everymatrix/casino-header-controller 0.0.191 → 0.0.195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "0.0.191",
+  "version": "0.0.195",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df80d1a5b1d672c6cef6b88b664c11d2c5786745"
+  "gitHead": "12c5cb5e4f2310b2fa559d0a1c99f4cf29de70c8"
 }

package/src/CasinoHeaderController.svelte

@@ -1,7 +1,7 @@
 <svelte:options tag={null}/>
 <script lang="typescript">
-  import { onMount } from "svelte";
-  import { isMobile } from 'rvhelper';
+  import {onMount} from "svelte";
+  import {isMobile} from 'rvhelper';
 
   import '@everymatrix/casino-slider';
   import '@everymatrix/casino-hamburger-menu';
@@ -9,19 +9,13 @@
 
   import everymatrixLogo from './images/everymatrix-logo-white.png';
 
-  export let session:string = '';
-  export let userid:string = '';
-  export let endpoint:string = '';
-  export let cmsendpoint:string = '';
-  export let cmsenv:string = 'stage';
-  export let lang:string = '';
-  export let identity:string = '';
-
-  //BannerMatrix
-  export let bannermatrix:string = '';
-  export let operatorid:string = '';
-  export let pagetag:string = '';
-  export let positiontag:string = '';
+  export let session: string = '';
+  export let userid: string = '';
+  export let endpoint: string = '';
+  export let cmsendpoint: string = '';
+  export let cmsenv: string = 'stage';
+  export let lang: string = '';
+  export let identity: string = '';
 
   const genericIcon = `<svg version="1.1" fill="#fff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 30px; color: #fff;" x="0px" y="0px"
     viewBox="0 0 384.971 384.971" style="enable-background:new 0 0 384.971 384.971;" xml:space="preserve">
@@ -35,29 +29,29 @@
 
   let mainMenuArray = [];
   let secondaryMenuArray = [];
-  let languagesArray = [{ code: 'EN'}, { code: 'TR'}, { code: 'RO'}];
+  let languagesArray = [{code: 'EN'}, {code: 'TR'}, {code: 'RO'}];
   let selectedLanguage = '';
-  let hamburgerURL:any;
-  let headerURL:any;
-  let isLoading:boolean = true;
-
-  let mobileView:boolean = false;
-  let userAgent:string = window.navigator.userAgent;
-  let isLoggedIn:boolean = false;
-  let playerID:string = '';
-  let sessionID:string = '';
-  let loginActive:boolean = true;
-  let language:string = '';
+  let hamburgerURL: any;
+  let headerURL: any;
+  let isLoading: boolean = true;
+
+  let mobileView: boolean = false;
+  let userAgent: string = window.navigator.userAgent;
+  let isLoggedIn: boolean = false;
+  let playerID: string = '';
+  let sessionID: string = '';
+  let loginActive: boolean = true;
+  let language: string = '';
   // use for medium devices styling, if necessary
   // const mediaQuery = window.matchMedia('(min-width: 768px)');
   let hamburgerMenuActive: boolean = false;
 
-  let totalBalance:string = '';
-  let cashBalance:string = '';
-  let bonusBalance:string = '';
-  let currency:string = '';
+  let totalBalance: string = '';
+  let cashBalance: string = '';
+  let bonusBalance: string = '';
+  let currency: string = '';
 
-  const menuAction = (data:any) => {
+  const menuAction = (data: any) => {
     switch (data) {
       case 'login':
         loginActive = true;
@@ -70,19 +64,19 @@
         break;
 
       case 'lobby':
-        window.postMessage({ type: 'GoToHomepage' }, window.location.href);
+        window.postMessage({type: 'GoToHomepage'}, window.location.href);
         break;
 
       case 'myaccount':
-        window.postMessage({ type: 'PlayerAccountMenuActive' }, window.location.href);
-      break;
+        window.postMessage({type: 'PlayerAccountMenuActive'}, window.location.href);
+        break;
 
       case 'deposit':
-        window.postMessage({ type: 'GoToDeposit' }, window.location.href);
+        window.postMessage({type: 'GoToDeposit'}, window.location.href);
         break;
 
       case 'language':
-        window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
+        window.postMessage({type: 'LanguageChanged', selectedLanguage}, window.location.href);
         break;
 
       default:
@@ -93,7 +87,7 @@
 
   const toggleMenu = () => {
     hamburgerMenuActive = true;
-    window.postMessage({ type: 'OpenHamburgerMenuModal' }, window.location.href);
+    window.postMessage({type: 'OpenHamburgerMenuModal'}, window.location.href);
   }
 
   const messageHandler = (e: any) => {
@@ -107,7 +101,7 @@
           break;
 
         case 'CloseHamburgerMenu':
-          if(e.data.showhamburger) {
+          if (e.data.showhamburger) {
             hamburgerMenuActive = false;
           }
           break;
@@ -156,19 +150,19 @@
     getHeaderMenusData(headerURL);
   }
 
-  const getHeaderMenusData = (url:any) => {
+  const getHeaderMenusData = (url: any) => {
     isLoading = true;
 
     return new Promise((resolve, reject) => {
       fetch(url)
-        .then((res:any) => res.json())
-        .then((data:any) => {
+        .then((res: any) => res.json())
+        .then((data: any) => {
           mainMenuArray = data.desktop.primary;
           secondaryMenuArray = data.desktop.secondary;
           isLoading = false;
 
           resolve(data);
-        }, (err:any) => {
+        }, (err: any) => {
           isLoading = false;
           console.error(err);
           reject(err);
@@ -192,20 +186,26 @@
   $: cmsendpoint && lang && initialLoad();
 </script>
 
-<svelte:head>
-  {#if bannermatrix}
-    <link rel="import" href="{bannermatrix}/assets/widgets/0.11.3/index.html">
-    <script src="{bannermatrix}/assets/widgets/0.11.3/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
-  {/if}
-</svelte:head>
-
 {#if isLoggedIn}
   {#if mobileView}
     <header class="HeaderWrapper HeaderMobileWrapper">
       <div class="HeaderContainer">
         <div class="HeaderMobileMainNav">
           {#if !hamburgerMenuActive}
-            <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(-14 -13)"><rect class="a" width="18" height="2" transform="translate(14 13)"/><rect class="a" width="22" height="2" transform="translate(14 20)"/><rect class="a" width="22" height="2" transform="translate(14 27)"/></g></svg>
+            <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
+                 viewBox="0 0 22 16">
+              <defs>
+                <style>.a {
+                  fill: #fff;
+                }
+                </style>
+              </defs>
+              <g transform="translate(-14 -13)">
+                <rect class="a" width="18" height="2" transform="translate(14 13)"/>
+                <rect class="a" width="22" height="2" transform="translate(14 20)"/>
+                <rect class="a" width="22" height="2" transform="translate(14 27)"/>
+              </g>
+            </svg>
           {/if}
         </div>
         <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
@@ -214,10 +214,22 @@
 
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} />
+            <player-account-balance-modal {session} {userid} {endpoint}/>
             <div class="Item ItemDeposit" on:click={()=>menuAction('deposit')}>Deposit</div>
             <div class="Item ItemAccount" on:click={()=>menuAction('myaccount')}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(-8 -4)"><path class="a" d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z" transform="translate(0 0)"/></g></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
+                <defs>
+                  <style>.a {
+                    fill: #fff;
+                  }
+                  </style>
+                </defs>
+                <g transform="translate(-8 -4)">
+                  <path class="a"
+                        d="M15.5,4a3.75,3.75,0,1,0,3.75,3.75A3.761,3.761,0,0,0,15.5,4Zm0,1.429A2.321,2.321,0,1,1,13.179,7.75,2.311,2.311,0,0,1,15.5,5.429Zm0,6.429A7.7,7.7,0,0,0,8,19.714a.714.714,0,0,0,.714.714H22.286A.714.714,0,0,0,23,19.714,7.7,7.7,0,0,0,15.5,11.857Zm0,1.429A6.18,6.18,0,0,1,21.5,19H9.5A6.18,6.18,0,0,1,15.5,13.286Z"
+                        transform="translate(0 0)"/>
+                </g>
+              </svg>
             </div>
           </div>
         </div>
@@ -232,12 +244,13 @@
 
         <nav class="HeaderMainNav">
           {#if !isLoading}
-            <casino-slider class="HeaderItemsMenu" sliderdata={mainMenuArray} {identity} onclickeventname="" location="headerMain"/>
+            <casino-slider class="HeaderItemsMenu" sliderdata={mainMenuArray} {identity} onclickeventname=""
+                           location="headerMain"/>
           {/if}
         </nav>
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu">
-            <player-account-balance-modal {session} {userid} {endpoint} />
+            <player-account-balance-modal {session} {userid} {endpoint}/>
             <div class="Item ItemDeposit" on:click={() => menuAction('deposit')}>Deposit</div>
             <div class="Item ItemAccount" on:click={() => menuAction('myaccount')}>
               <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16.429" viewBox="0 0 15 16.429">
@@ -276,7 +289,20 @@
     <header class="HeaderWrapper HeaderMobileWrapper">
       <div class="HeaderContainer">
         <div class="HeaderMobileMainNav">
-          <svg on:click={()=>toggleMenu()}  xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(-14 -13)"><rect class="a" width="18" height="2" transform="translate(14 13)"/><rect class="a" width="22" height="2" transform="translate(14 20)"/><rect class="a" width="22" height="2" transform="translate(14 27)"/></g></svg>
+          <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
+               viewBox="0 0 22 16">
+            <defs>
+              <style>.a {
+                fill: #fff;
+              }
+              </style>
+            </defs>
+            <g transform="translate(-14 -13)">
+              <rect class="a" width="18" height="2" transform="translate(14 13)"/>
+              <rect class="a" width="22" height="2" transform="translate(14 20)"/>
+              <rect class="a" width="22" height="2" transform="translate(14 27)"/>
+            </g>
+          </svg>
         </div>
         <div class="HeaderBranding" on:click={()=>menuAction('lobby')}>
           <img src={everymatrixLogo} alt="Everymatrix logo">
@@ -299,7 +325,8 @@
 
         <nav class="HeaderMainNav">
           {#if !isLoading}
-            <casino-slider class="HeaderItemsMenu" sliderdata={mainMenuArray} {identity} onclickeventname="" location="headerMain"/>
+            <casino-slider class="HeaderItemsMenu" sliderdata={mainMenuArray} {identity} onclickeventname=""
+                           location="headerMain"/>
           {/if}
         </nav>
         <div class="HeaderTopActions">
@@ -325,8 +352,6 @@
   {/if}
 {/if}
 
-<bannermatrix-banner operator-id={operatorid} page-tag={pagetag} position-tag={positiontag}></bannermatrix-banner>
-
 <casino-hamburger-menu menuitemsurl={hamburgerURL} {language}></casino-hamburger-menu>
 
 <style lang="scss">
@@ -338,6 +363,10 @@
     @return $value * $multiplicator;
   }
 
+  :host {
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  }
+
   .HeaderSlider {
     width: 100%;
     height: ttp(25);
@@ -356,7 +385,11 @@
     margin: 0 auto;
   }
 
-  .HeaderBranding { width: ttp(9.375); cursor: pointer }
+  .HeaderBranding {
+    width: ttp(9.375);
+    cursor: pointer
+  }
+
   .HeaderMainNav {
     text-align: left;
   }
@@ -438,14 +471,15 @@
   }
 
   .ItemLanguage {
-    height: ttp(2.75);
-    width: ttp(4.25);
+    height: 44px;
+    width: 76px;
     text-align: center;
-    line-height: ttp(2.75);
+    line-height: 44px;
     background: transparent;
     color: #fff;
     border: none;
     cursor: pointer;
+
     option {
       color: #0a0c19;
     }
@@ -487,10 +521,12 @@
     padding: 0 ttp(0.9375);
     cursor: pointer;
     transition-duration: 0.15s;
+
     a {
       color: #fff;
       text-decoration: none;
     }
+
     &:hover {
       a {
         color: #D0046C;
@@ -511,6 +547,7 @@
 
     .HeaderBranding {
       width: 80px;
+
       img {
         width: 100%;
       }