@everymatrix/player-deposit 0.0.199 → 0.0.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-deposit",
-  "version": "0.0.199",
+  "version": "0.0.203",
   "main": "dist/player-deposit",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92884caad124fb581a2825d771ad76a424b2c98c"
+  "gitHead": "31d7d9eeef7e68b954b83fb3dde25db05d8edf74"
 }

package/src/PlayerDeposit.svelte

@@ -2,10 +2,13 @@
 <script lang="typescript">
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerDepositTranslations } from './translations';
 
   export let endpoint:string = '';
   export let session:string = '';
   export let playerid:string = '';
+  export let lang:string = 'en';
 
   let userAgent:string = window.navigator.userAgent;
   let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
@@ -15,6 +18,11 @@
   let amount:number = 0;
   let iframeUrl:string = '';
 
+  Object.keys(PlayerDepositTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerDepositTranslations[item]);
+  });
+
+
   const toggleScreen = () => {
     window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
   }
@@ -88,6 +96,10 @@
       });
   }
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
   onMount(() => {
     window.addEventListener('message', messageHandler, false);
 
@@ -96,6 +108,7 @@
     }
   });
 
+  $: lang && initialLoad();
   $: session && playerid && endpoint && getDepositIframe();
 </script>
 
@@ -107,12 +120,12 @@
           <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
         </g></g>
       </svg>
-      <h2 class="DepositTitleMobile">Deposit</h2>
+      <h2 class="DepositTitleMobile">{$_('deposit.title')}</h2>
     </div>
   {/if}
-  <h2 class="DepositTitle {isMobile ? 'DepositTitleNone' : ''}">Deposit</h2>
+  <h2 class="DepositTitle {isMobile ? 'DepositTitleNone' : ''}">{$_('deposit.title')}</h2>
   {#if isLoading}
-    <p>Loading, please wait ...</p>
+    <p>{$_('deposit.loading')}</p>
   {:else}
     <div class="DepositIframeWrapper">
       <iframe src={iframeUrl} title="Deposit Iframe"></iframe>

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,14 @@
+export const PlayerDepositTranslations = {
+  en: {
+    deposit: {
+      title: `Deposit`,
+      loading: `Loading, please wait ...`
+    }
+  },
+  ro: {
+    deposit: {
+      title: `Depunere`,
+      loading: `Se încarcă...`
+    }
+  }
+};