@everymatrix/casino-header-controller 0.0.254 → 0.0.257

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "0.0.254",
+  "version": "0.0.257",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "454ff35bbd275f884b20cf31dae10609840f5abc"
+  "gitHead": "fb390d6a11e469b9d59db7cf11f59937a32a2555"
 }

package/src/CasinoHeaderController.svelte

@@ -51,7 +51,9 @@
   let selectedLanguage:string = '';
   let hamburgerURL:URL;
   let headerURL:URL;
+  let logoURL:URL;
   let isLoading:boolean = true;
+  let logoFromCms:boolean = false;
 
   let mobileView:boolean = false;
   let userAgent:string = window.navigator.userAgent;
@@ -62,6 +64,7 @@
   let language:string = '';
   let languagesArray:Array<string> = [];
   let hamburgerMenuActive:boolean = false;
+  let logoPath:string = '';
 
   let fallbackSecondaryMenu = [
     {
@@ -145,6 +148,7 @@
   const createCMSUrls = () => {
     headerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/menu`)
     hamburgerURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/hamburger-menu`);
+    logoURL = new URL(`${cmsendpoint}/${selectedLanguage.toLowerCase()}/op-options/style`);
 
     headerURL.searchParams.append('device', 'dk');
     headerURL.searchParams.append('env', cmsenv);
@@ -168,6 +172,7 @@
     selectedLanguage = lang.toUpperCase();
     createCMSUrls();
 
+    getLogo(logoURL);
     getHeaderMenusData(headerURL);
   }
 
@@ -202,6 +207,24 @@
     });
   }
 
+  const getLogo = (url:any):Promise<any> => {
+    logoFromCms = false;
+
+    return new Promise((resolve, reject) => {
+      fetch(url)
+        .then((res: any) => res.json())
+        .then((data: any) => {
+          logoPath = data.logoUrl;
+          logoFromCms = true;
+          resolve(data);
+        }, (err: any) => {
+          logoFromCms = false;
+          console.error(err);
+          reject(err);
+        });
+    });
+  }
+
   onMount(async () => {
     window.addEventListener('message', messageHandler, false);
 
@@ -243,7 +266,11 @@
           {/if}
         </div>
         <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          <img src={everymatrixLogo} alt="Everymatrix logo">
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
         </div>
 
         <div class="HeaderTopActions" part="HeaderTopActions">
@@ -273,7 +300,11 @@
     <header class="HeaderWrapper" part="HeaderWrapper">
       <div class="HeaderContainer" part="HeaderContainer">
         <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          <img src={everymatrixLogo} alt="Everymatrix logo">
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
         </div>
 
         <nav class="HeaderMainNav" part="HeaderMainNav">
@@ -338,7 +369,11 @@
           </svg>
         </div>
         <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          <img src={everymatrixLogo} alt="Everymatrix logo">
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
         </div>
 
         <div class="HeaderTopActions" part="HeaderTopActions">
@@ -353,7 +388,11 @@
     <header class="HeaderWrapper" part="HeaderWrapper">
       <div class="HeaderContainer" part="HeaderContainer">
         <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
-          <img src={everymatrixLogo} alt="Everymatrix logo">
+          {#if logoFromCms}
+            <img src={logoPath} alt="Logo">
+          {:else}
+            <img src={everymatrixLogo} alt="Logo">
+          {/if}
         </div>
 
         <nav class="HeaderMainNav" part="HeaderMainNav">
@@ -387,13 +426,6 @@
 <casino-hamburger-menu menuitemsurl={hamburgerURL} {activecategory} {lang} {languageslist}></casino-hamburger-menu>
 
 <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';
@@ -401,7 +433,7 @@
 
   .HeaderSlider {
     width: 100%;
-    height: ttp(25);
+    height: 400px;
   }
 
   .HeaderWrapper {
@@ -413,13 +445,16 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: ttp(5.25);
+    height: 84px;
     margin: 0 auto;
   }
 
   .HeaderBranding {
-    width: ttp(9.375);
-    cursor: pointer
+    width: 150px;
+    cursor: pointer;
+    img {
+      width: 100%;
+    }
   }
 
   .HeaderMainNav {
@@ -444,7 +479,7 @@
     list-style: none;
     text-transform: uppercase;
     color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: ttp(1);
+    font-size: 16px;
     align-items: center;
 
     .Item:hover {
@@ -460,7 +495,7 @@
     }
 
     &.PrimaryMenu {
-      gap: ttp(0.625);
+      gap: 10px;
     }
   }
 
@@ -477,24 +512,24 @@
   }
 
   .ItemLogin {
-    border-radius: ttp(0.3125);
+    border-radius: 5px;
     background: transparent;
-    font-size: ttp(0.875);
+    font-size: 14px;
     border: solid 1px var(--emfe-w-color-white, #FFFFFF);
-    height: ttp(2.75);
+    height: 44px;
     text-align: center;
-    line-height: ttp(2.75);
-    margin-right: ttp(1.25);
+    line-height: 44px;
+    margin-right: 20px;
     cursor: pointer;
   }
 
   .ItemRegister, .ItemDeposit {
-    border-radius: ttp(0.3125);
+    border-radius: 5px;
     background: var(--emfe-w-color-primary, #D0046C);
-    font-size: ttp(0.875);
-    height: ttp(2.75);
+    font-size: 14px;
+    height: 44px;
     text-align: center;
-    line-height: ttp(2.75);
+    line-height: 44px;
     cursor: pointer;
   }
 
@@ -533,8 +568,8 @@
     cursor: pointer;
 
     svg {
-      width: ttp(1.25);
-      height: ttp(1.25);
+      width: 20px;
+      height: 20px;
     }
   }
 
@@ -543,12 +578,12 @@
     flex-direction: row;
     align-content: flex-start;
     align-items: center;
-    height: ttp(3.75);
+    height: 60px;
     list-style: none;
     text-transform: uppercase;
     color: var(--emfe-w-color-white, #FFFFFF);
-    font-size: ttp(0.875);
-    max-width: ttp(80);
+    font-size: 14px;
+    max-width: 1280px;
     margin: 0 auto;
     overflow-y: hidden;
     overflow-x: auto;
@@ -556,7 +591,7 @@
   }
 
   .HeaderItemsMenuSecondary .ItemSecondary {
-    padding: 0 ttp(0.9375);
+    padding: 0 15px;
     cursor: pointer;
     transition-duration: 0.15s;
 
@@ -578,17 +613,13 @@
 
   .HeaderMobileWrapper {
     .HeaderContainer {
-      height: ttp(3.4375);
-      padding: 0 ttp(0.9375);
-      gap: ttp(0.625);
+      height: 55px;
+      padding: 0 15px;
+      gap: 10px;
     }
 
     .HeaderBranding {
       width: 80px;
-
-      img {
-        width: 100%;
-      }
     }
 
     .HeaderItemsMenu {
@@ -614,7 +645,7 @@
     }
 
     .ItemLogin {
-      margin-right: ttp(0.625);
+      margin-right: 10px;
     }
   }
 </style>