@everymatrix/casino-header-controller 0.0.93 → 0.0.97

package/documentation.md

@@ -127,6 +127,7 @@ Full example below for `not logged in user`:
 |CloseHamburgerMenu|no extra data received|switches back to the `Casino Header` widget|
 |PlayerAccountMenuActive|no extra data sent|triggers the displaying of the `Player Account Controller`|
 |OpenLoginRegisterModal|login|sends a postmessage containing a boolean based on which it opens the login/register modal - either on the login or register tab|
+|LanguageChanged|selectedLanguage|sends a postmessage containing the new language preference|
 
 ## API Reference
 |Parameter|Mandatory|Comment|

package/index.html

@@ -21,10 +21,11 @@
   </style>
 
   <div class="webcomponent">
-    <casino-header-controller session userid 
+    <casino-header-controller session userid
     cmsmenuurl="https://widgets.everymatrix.com/apijson/en/menu?device=dk&env=stage&language=en&platform=dk"
-    cmshamburgermenuurl="https://widgets.everymatrix.com/apijson/en/hamburger-menu?device=dk&env=stage&language=en&platform=dk"></casino-header-controller>
+    cmshamburgermenuurl="https://widgets.everymatrix.com/apijson/en/hamburger-menu?device=dk&env=stage&language=en&platform=dk"
+                              profileurl="https://demo-api.stage.norway.everymatrix.com/v1/player/"></casino-header-controller>
   </div>
-  
+
 </body>
-</html>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "0.0.93",
+  "version": "0.0.97",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4bc7902c67d764d4f54c0a26014157260c5f314f"
+  "gitHead": "e7af402eef393716b94058dc74dda99a39b649f1"
 }

package/src/CasinoHeaderController.svelte

@@ -5,6 +5,7 @@
 
   import '@everymatrix/casino-slider';
   import '@everymatrix/casino-hamburger-menu';
+  import '@everymatrix/player-account-balance-modal';
   import everymatrixLogo from './images/everymatrix-logo-white.png';
   import sliderPlaceholderImage from './images/slider.png';
 
@@ -12,6 +13,7 @@
   export let userid:String = '';
   export let cmsmenuurl:string = '';
   export let cmshamburgermenuurl:string = '';
+  export let profileurl: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">
@@ -25,8 +27,8 @@
 
   let mainMenuArray = [];
   let secondaryMenuArray = [];
-  let languagesArray = ['EN', 'DE'];
-  let balanceArray = ['1.650.944,353 €', '6.300,453 Ron'];
+  let languagesArray = [{ code: 'EN'}, { code: 'DE'}, { code: 'HR'}, { code: 'HU'}, { code: 'IT'}, { code: 'PL'}, { code: 'PT'}, { code: 'SL'}, { code: 'SR'}];
+  let selectedLanguage = '';
 
   let mobileView:boolean = false;
   let userAgent:string = window.navigator.userAgent;
@@ -38,6 +40,12 @@
   // 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 = '';
+
   const menuAction = (data) => {
     switch (data) {
 
@@ -55,10 +63,8 @@
 
       case 'lobby':
         console.log("lobby");
-        break;
-
-      case 'balance':
-        console.log("balance");
+        // move this inline if no other logic is added here
+        location.reload();
         break;
 
       case 'myaccount':
@@ -71,7 +77,7 @@
         break;
 
       case 'language':
-        console.log("language");
+        window.postMessage({ type: 'LanguageChanged', selectedLanguage }, window.location.href);
         break;
 
       default:
@@ -141,7 +147,7 @@
     window.addEventListener('message', messageHandler, false);
     if (isMobile(userAgent)) {
       mobileView = true;
-    } 
+    }
 
     return () => {
       window.removeEventListener('message', messageHandler);
@@ -149,7 +155,7 @@
   });
 
   $: session && setSession();
-  $: cmsmenuurl && cmshamburgermenuurl && initialLoad();
+  $: cmsmenuurl && cmshamburgermenuurl && profileurl && initialLoad();
 </script>
 
 {#if isLoggedIn}
@@ -167,15 +173,7 @@
 
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu">
-            <select class="Item ItemBalance" on:change={()=>menuAction('balance')}>
-              {#each balanceArray as val}
-                {#if val.includes('€')}
-                  <option selected>{val}</option>
-                {:else}
-                  <option>{val}</option>
-                {/if}
-              {/each}
-            </select>
+            <player-account-balance-modal sessionid={sessionID} playerid={playerID} {profileurl} />
             <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>
@@ -196,15 +194,7 @@
         </nav>
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu">
-            <select class="Item ItemBalance" on:change={()=>menuAction('balance')}>
-              {#each balanceArray as val}
-                {#if val.includes('€')}
-                  <option selected>{val}</option>
-                {:else}
-                  <option>{val}</option>
-                {/if}
-              {/each}
-            </select>
+            <player-account-balance-modal sessionid={sessionID} playerid={playerID} {profileurl} />
             <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">
@@ -221,12 +211,12 @@
                 </g>
               </svg>
             </div>
-            <select class="Item ItemLanguage" on:change={()=>menuAction('language')}>
+            <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
               {#each languagesArray as lang}
-                {#if lang === 'EN'}
-                  <option selected>{lang}</option>
+                {#if lang.code === 'EN'}
+                  <option value={lang.code}>{lang.code}</option>
                 {:else}
-                  <option>{lang}</option>
+                  <option value={lang.code}>{lang.code}</option>
                 {/if}
               {/each}
             </select>
@@ -275,12 +265,12 @@
           <div class="HeaderItemsMenu">
             <div class="Item ItemLogin" on:click={()=>menuAction('login')}>Login</div>
             <div class="Item ItemRegister" on:click={()=>menuAction('register')}>Register</div>
-            <select class="Item ItemLanguage" on:change={()=>menuAction('language')}>
+            <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
               {#each languagesArray as lang}
-                {#if lang === 'EN'}
-                  <option selected>{lang}</option>
+                {#if lang.code === 'EN'}
+                  <option value={lang.code}>{lang.code}</option>
                 {:else}
-                  <option>{lang}</option>
+                  <option value={lang.code}>{lang.code}</option>
                 {/if}
               {/each}
             </select>