@everymatrix/player-active-bonuses 0.0.197 → 0.0.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-active-bonuses",
-  "version": "0.0.197",
+  "version": "0.0.201",
   "main": "dist/player-active-bonuses",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "89d693d3429e3dc0d6e642537452c8faa0ca008a"
+  "gitHead": "71051531499cfea745b53a0f7c0a77a252990ae7"
 }

package/src/PlayerActiveBonuses.svelte

@@ -2,12 +2,15 @@
 <script lang="typescript">
   import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
+  import { _, addNewMessages, setLocale } from './i18n';
+  import { PlayerActiveBonusesTranslations } from './translations';
 
   import '@everymatrix/player-bonus-card';
 
   export let endpoint:string = '';
   export let session:string = '';
   export let playerid:string = '';
+  export let lang:string = 'en';
 
   let isLoading:boolean = false;
   let userAgent:string = window.navigator.userAgent;
@@ -32,6 +35,10 @@
 
   let bonusModal:boolean = false;
 
+  Object.keys(PlayerActiveBonusesTranslations).forEach((item:any) => {
+    addNewMessages(item, PlayerActiveBonusesTranslations[item]);
+  });
+
   const messageHandler = (e:any) => {
     if (e.data) {
       switch(e.data.type) {
@@ -160,6 +167,11 @@
     }
   });
 
+  const initialLoad = () => {
+    setLocale(lang);
+  }
+
+  $: lang && initialLoad();
   $: session && playerid && endpoint && getActiveBonuses(0);
 </script>
 
@@ -174,23 +186,23 @@
             <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="ActiveBonusesTitleMobile">Active Bonuses</h2>
+        <h2 class="ActiveBonusesTitleMobile">{$_('activeBonuses.title')}</h2>
       </div>
     {/if}
-    <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">Active Bonuses</h2>
+    <h2 class="ActiveBonusesTitle {isMobile ? 'ActiveBonusesTitleNone' : ''}">{$_('activeBonuses.title')}</h2>
     <div class="BonusCodeContainer {isMobile ? 'BonusCodeContainerMobile' : ''}">
-      <label for="BonusCode">Do you have a bonus code?</label>
+      <label for="BonusCode">{$_('activeBonuses.bonusCode')}</label>
       <div class="BonusCodeWrapper {isMobile ? 'BonusCodeWrapperMobile' : ''}">
         <input class="BonusCodeInput {isMobile ? 'BonusCodeInputMobile' : ''}" bind:value={bonusCode} on:keyup={validateBonusCode} type="text" id="BonusCode" />
-        <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>Get Bonus</button>
+        <button class="SubmitBonusCode {isMobile ? 'SubmitBonusCodeMobile' : ''}" disabled={invalidBonusField} on:click={claimBonus}>{$_('activeBonuses.getBonus')}</button>
       </div>
       {#if invalidBonusCode}
-        <p class="InvalidBonusCodeMessage">The bonus code provided is invalid.</p>
+        <p class="InvalidBonusCodeMessage">{$_('activeBonuses.invalidBonusCode')}</p>
       {/if}
     </div>
     <div class="ActiveBonusesGrid {isMobile ? 'ActiveBonusesGridMobile' : ''}">
       {#if activeBonusesList.length === 0}
-        <p>You have no active bonuses at the moment.</p>
+        <p>{$_('activeBonuses.noActiveBonuses')}</p>
       {:else}
         {#each activeBonusesList as activeBonus}
           {#if activeBonus.type === 'freeRound'}
@@ -201,6 +213,7 @@
               bonusname={activeBonus.name}
               bonustype={activeBonus.type}
               bonuscurrency={activeBonus.currency}
+              {lang}
             ></player-bonus-card>
           {:else}
             <player-bonus-card
@@ -213,6 +226,7 @@
               bonuswageringamount={activeBonus.totalWR}
               bonusremainingamount={activeBonus.currentAmount}
               bonuscurrency={activeBonus.currency}
+              {lang}
             ></player-bonus-card>
           {/if}
         {/each}
@@ -237,10 +251,10 @@
         <span class="ModalClose" on:click={closeBonusModal} />
       {/if}
       <div class="ModalBody">
-        <p class="ModalText">Are you sure want to forfeit bonus?</p>
+        <p class="ModalText">{$_('activeBonuses.forfeitBonus')}</p>
         <div class="ModalButtons">
-          <button class="ModalCancel" on:click={closeBonusModal}>Cancel</button>
-          <button class="ModalConfirm" on:click={deleteBonus}>Confirm</button>
+          <button class="ModalCancel" on:click={closeBonusModal}>{$_('activeBonuses.forfeitBonusCancel')}</button>
+          <button class="ModalConfirm" on:click={deleteBonus}>{$_('activeBonuses.forfeitBonusConfirm')}</button>
         </div>
       </div>
     </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,26 @@
+export const PlayerActiveBonusesTranslations = {
+  en: {
+    activeBonuses: {
+      title: `Active Bonuses`,
+      bonusCode: `Do you have a bonus code?`,
+      getBonus: `Get Bonus`,
+      invalidBonusCode: `The bonus code provided is invalid.`,
+      noActiveBonuses: `You have no active bonuses at the moment.`,
+      forfeitBonus: `Are you sure want to forfeit bonus?`,
+      forfeitBonusConfirm: `Confirm`,
+      forfeitBonusCancel: `Cancel`
+    }
+  },
+  ro: {
+    activeBonuses: {
+      title: `Active Bonuses`,
+      bonusCode: `Do you have a bonus code?`,
+      getBonus: `Get Bonus`,
+      invalidBonusCode: `The bonus code provided is invalid.`,
+      noActiveBonuses: `You have no active bonuses at the moment.`,
+      forfeitBonus: `Are you sure want to forfeit bonus?`,
+      forfeitBonusConfirm: `Confirm`,
+      forfeitBonusCancel: `Cancel`
+    }
+  }
+};