@everymatrix/casino-header-controller 0.0.216 → 0.0.220

package/index.html

@@ -26,8 +26,8 @@
       cmsendpoint="https://widgets.everymatrix.com/apijson"
       lang="en"
       showbanner="true"
-      session="8910603d-1ff3-4127-9e09-7435b5a393b6"
-      userid="3685503"
+      session=""
+      userid=""
       profileurl='bla'
       endpoint="https://demo-api.stage.norway.everymatrix.com/v1"
       bannermatrix="https://bannermatrix-stage.everymatrix.com"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "0.0.216",
+  "version": "0.0.220",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f79846c393d362de102942d0410087389246073b"
+  "gitHead": "b7cf586f6e593e311259814b945a2806c80f1d0b"
 }

package/src/CasinoHeaderController.svelte

@@ -1,7 +1,10 @@
-<svelte:options tag={null}/>
+<svelte:options tag={null} />
+
 <script lang="ts">
-  import {onMount} from "svelte";
-  import {isMobile} from 'rvhelper';
+  import { onMount } from "svelte";
+  import { isMobile } from 'rvhelper';
+  import { _, addNewMessages, setLocale, setupI18n } from './i18n';
+  import { CasinoHeaderController } from './translations';
 
   import '@everymatrix/casino-slider';
   import '@everymatrix/casino-hamburger-menu';
@@ -15,12 +18,19 @@
   export let cmsendpoint:string = '';
   export let cmsenv:string = 'stage';
   export let lang:string = '';
+  export let languageslist:string = 'en,ro';
   export let identity:string = '';
 
   export let operatorid:string = '';
   export let pagetag:string = '';
   export let positiontag:string = '';
 
+  setupI18n({ withLocale: 'en', translations: {}});
+
+  Object.keys(CasinoHeaderController).forEach((item:any) => {
+    addNewMessages(item, CasinoHeaderController[item]);
+  });
+
   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">
      <path style="color: #fff" d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
@@ -33,7 +43,6 @@
 
   let mainMenuArray = [];
   let secondaryMenuArray = [];
-  let languagesArray = [{code: 'EN'}, {code: 'TR'}, {code: 'RO'}];
   let selectedLanguage = '';
   let hamburgerURL: any;
   let headerURL: any;
@@ -46,6 +55,7 @@
   let sessionID: string = '';
   let loginActive: boolean = true;
   let language: string = '';
+  let languagesArray: Array<string> = [];
   // use for medium devices styling, if necessary
   // const mediaQuery = window.matchMedia('(min-width: 768px)');
   let hamburgerMenuActive: boolean = false;
@@ -59,12 +69,12 @@
     switch (data) {
       case 'login':
         loginActive = true;
-        window.postMessage({type: 'OpenLoginRegisterModal', login: loginActive}, window.location.href);
+        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Login' }, window.location.href);
         break;
 
       case 'register':
         loginActive = false;
-        window.postMessage({type: 'OpenLoginRegisterModal', login: loginActive}, window.location.href);
+        window.postMessage({type: 'OpenLoginRegisterModal', transition: 'Register'}, window.location.href);
         break;
 
       case 'lobby':
@@ -147,6 +157,14 @@
   }
 
   const initialLoad = () => {
+    setLocale(lang);
+
+    // split operator provided languages string into string array
+    languagesArray = languageslist.split(',');
+    languagesArray.forEach((languageItem:string, index:number) => {
+      languagesArray[index] = languageItem.toUpperCase();
+    })
+
     selectedLanguage = lang.toUpperCase();
 
     createCMSUrls();
@@ -255,7 +273,7 @@
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu PrimaryMenu">
             <player-account-balance-modal {session} {userid} {endpoint} {lang}/>
-            <div class="Item ItemDeposit" on:click={() => menuAction('deposit')}>Deposit</div>
+            <div class="Item ItemDeposit" on:click={() => menuAction('deposit')}>{$_('headerItem.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>
@@ -272,8 +290,8 @@
               </svg>
             </div>
             <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as lang}
-                <option value={lang.code}>{lang.code}</option>
+              {#each languagesArray as operatorLanguage}
+                <option value={operatorLanguage}>{operatorLanguage}</option>
               {/each}
             </select>
           </div>
@@ -314,8 +332,8 @@
 
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu">
-            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>Login</div>
-            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>Register</div>
+            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
+            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
           </div>
         </div>
       </div>
@@ -335,11 +353,11 @@
         </nav>
         <div class="HeaderTopActions">
           <div class="HeaderItemsMenu">
-            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>Login</div>
-            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>Register</div>
+            <div class="Item ItemLogin" on:click={()=>menuAction('login')}>{$_('headerItem.login')}</div>
+            <div class="Item ItemRegister" on:click={()=>menuAction('register')}>{$_('headerItem.register')}</div>
             <select bind:value={selectedLanguage} class="Item ItemLanguage" on:change={()=>menuAction('language')}>
-              {#each languagesArray as lang}
-                <option value={lang.code}>{lang.code}</option>
+              {#each languagesArray as operatorLanguage}
+                <option value={operatorLanguage}>{operatorLanguage}</option>
               {/each}
             </select>
           </div>

package/src/i18n.js

@@ -0,0 +1,27 @@
+import {
+  dictionary,
+  locale,
+  addMessages,
+  _
+} from 'svelte-i18n';
+
+function setupI18n({ withLocale: _locale, translations }) {
+  locale.subscribe((data) => {
+    if (data == null) {
+      dictionary.set(translations);
+      locale.set(_locale);
+    }
+  }); // maybe we will need this to make sure that the i18n is set up only once
+  /*dictionary.set(translations);
+  locale.set(_locale);*/
+}
+
+function addNewMessages(lang, dict) {
+  addMessages(lang, dict);
+}
+
+function setLocale(_locale) {
+  locale.set(_locale);
+}
+
+export { _, setupI18n, addNewMessages, setLocale };

package/src/translations.js

@@ -0,0 +1,23 @@
+export const CasinoHeaderController = {
+  en: {
+    headerItem: {
+      login: 'Login',
+      register: 'Register',
+      deposit: 'Deposit',
+    }
+  },
+  tr: {
+    headerItem: {
+      login: 'Giriş yapmak',
+      register: 'Kayıt olmak',
+      deposit: 'Depozito',
+    }
+  },
+  ro: {
+    headerItem: {
+      login: 'Autentificare',
+      register: 'Inregistreaza-te',
+      deposit: 'Depozit',
+    }
+  },
+};