@everymatrix/player-account-gaming-limits-wrapper-2 1.17.1 → 1.17.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-gaming-limits-wrapper-2",
-  "version": "1.17.1",
+  "version": "1.17.2",
   "main": "dist/player-account-gaming-limits-wrapper-2.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2155458138e80c61c668cc7e75c645d6f16709c"
+  "gitHead": "462a557bf7dab099fad999a6d0998f5155877620"
 }

package/src/PlayerAccountGamingLimitsWrapper_2.svelte

@@ -2,6 +2,9 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { getDevice } from 'rvhelper';
+  import { _, addNewMessages } from './i18n';
+  import { TRANSLATIONS } from './translations';
 
   import '@everymatrix/player-account-gaming-limits-page-2-gm16';
   import '@everymatrix/player-account-gaming-limits-history-2';
@@ -37,6 +40,26 @@
   let amountsArray:Array<string>;
   let periodsArray:Array<string>;
 
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+
+  const setTranslationUrl = ():void => {
+    let url:string = translationurl;
+
+    fetch(url).then((res:any) => res.json())
+    .then((res) => {
+      Object.keys(res).forEach((item:any):void => {
+        addNewMessages(item, res[item]);
+      });
+    }).catch((err:any) => {
+      console.log(err);
+    });
+  }
+
+  Object.keys(TRANSLATIONS).forEach((item:any) => {
+    addNewMessages(item, TRANSLATIONS[item]);
+  });
+
   const unwrapLimitsConfig = (amounts:string, periods:string):void=> {
     amountsArray = amounts.replace(/\s/g, '').split('|');
     periodsArray = periods.replace(/\s/g, '').split('|');
@@ -71,6 +94,10 @@
     }
   }
 
+  const toggleScreen = ():void => {
+    window.postMessage({type: 'PlayerAccountMenuActive', isMobile}, window.location.href);
+  }
+
   const setClientStyling = ():void => {
     let sheet:HTMLElement = document.createElement('style');
     sheet.innerHTML = clientstyling;
@@ -108,51 +135,66 @@
 </svelte:head>
 
 <div bind:this={customStylingContainer}>
-  {#if isLoading}
-  <!-- Just show nothing, this is loading exposed attributes, not making a fetch. It takes an instant, but prevents nested widgets from rendering with empty attributes -->
-  {:else}
-    {#if limitTabs.length > 1}
-      <div class="TabsContainer" bind:this={tabsContainer}>
-        {#each limitTabs as limit,i}
-          <div class="LimitsTab" on:click={() => selectTab(i)}>{tabLabelArray[i] ?? limit}</div>
+  <div class="GamingLimitsWrapper {isMobile ? 'GamingLimitsWrapperMobile' : ''}">
+    <div class="TitleSection">
+      {#if isMobile}
+        <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));}</style></defs><g transform="translate(-20 -158)">
+            <g transform="translate(20 158)">
+              <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="GamingLimitsTitleMobile">{$_('title')}</h2>
+        </div>
+      {/if}
+      <h2 class="GamingLimitsTitle {isMobile ? 'GamingLimitsTitleNone' : ''}">{$_('title')}</h2>
+    </div>
+    {#if isLoading}
+    <!-- Just show nothing, this is loading exposed attributes, not making a fetch. It takes an instant, but prevents nested widgets from rendering with empty attributes -->
+    {:else}
+      {#if limitTabs.length > 1}
+        <div class="TabsContainer" bind:this={tabsContainer}>
+          {#each limitTabs as limit,i}
+            <div class="LimitsTab" on:click={() => selectTab(i)}>{tabLabelArray[i] ?? limit}</div>
+          {/each}
+        </div>
+      {/if}
+
+      <div class="PlayerAccountGamingLmitsWrapper2" bind:this={mainContainer}>
+        {#each limitTabs as _, i}
+            <player-account-gaming-limits-page-2-gm16 class="hidden selected"
+              {lang}
+              {currency}
+              amountsconfig = {amountsArray[i]}
+              periodsconfig = {periodsArray[i]}
+              {userid}
+              {deletelimit}
+              {session}
+              {endpoint}
+              {apiversion}
+              {clientstyling}
+              {clientstylingurl}
+              {translationurl}
+              {customcurrencysymbols}
+            ></player-account-gaming-limits-page-2-gm16>
         {/each}
       </div>
+      {#if historyenabled === 'true'}
+        <player-account-gaming-limits-history-2
+          {lang}
+          {userid}
+          {session}
+          {endpoint}
+          {apiversion}
+          {numberofentries}
+          {clientstyling}
+          {clientstylingurl}
+          {translationurl}
+          {customcurrencysymbols}
+        ></player-account-gaming-limits-history-2>
+      {/if}
     {/if}
-
-    <div class="player-account-gaming-limits-wrapper-2" bind:this={mainContainer}>
-      {#each limitTabs as _, i}
-          <player-account-gaming-limits-page-2-gm16 class="hidden selected"
-            {lang}
-            {currency}
-            amountsconfig = {amountsArray[i]}
-            periodsconfig = {periodsArray[i]}
-            {userid}
-            {deletelimit}
-            {session}
-            {endpoint}
-            {apiversion}
-            {clientstyling}
-            {clientstylingurl}
-            {translationurl}
-            {customcurrencysymbols}
-          ></player-account-gaming-limits-page-2-gm16>
-      {/each}
-    </div>
-    {#if historyenabled === 'true'}
-      <player-account-gaming-limits-history-2
-        {lang}
-        {userid}
-        {session}
-        {endpoint}
-        {apiversion}
-        {numberofentries}
-        {clientstyling}
-        {clientstylingurl}
-        {translationurl}
-        {customcurrencysymbols}
-      ></player-account-gaming-limits-history-2>
-    {/if}
-  {/if}
+  </div>
 </div>
 <style lang="scss">
   :host {
@@ -171,6 +213,14 @@
     box-sizing: border-box;
   }
 
+  .GamingLimitsWrapper{
+    padding: 50px 50px 30px 50px;
+  }
+
+  .GamingLimitsWrapper.GamingLimitsWrapperMobile{
+    padding: 20px 15px;
+  }
+
   .LimitsWrapper {
     display: flex;
     flex-direction: column;
@@ -204,9 +254,42 @@
     display: none;
   }
 
-  .selected {
-    border-bottom: 0.2rem solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+  h2{
+    margin: 20px 0px;
+  }
+
+  .PlayerAccountGamingLmitsWrapper2{
+    margin-bottom: 20px;
+  }
+
+  .MenuReturnButton{
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    display: inline-flex;
+    align-items: center;
+    column-gap: 10px;
+    margin-bottom: 10px;
+    & svg {
+      fill: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    }
+  }
+
+  .GamingLimitsTitle{
+    font-size: 26px;
     color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
+    font-weight: 400;
+  }
+
+  .GamingLimitsTitleMobile {
+    font-size: 16px;
+  }
+
+  .GamingLimitsTitleNone {
+    display: none;
+  }
+
+  .selected {
+    border-bottom: 0.2rem solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
+    color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
     margin: 0;
   }
 </style>

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,20 @@
+export const TRANSLATIONS = {
+  "en": {
+    "title": "Limits"
+  },
+  "zh-hk": {
+    "title": "Limits"
+  },
+  "fr": {
+    "title": "Limits"
+  },
+  "ro": {
+    "title": "Limits"
+  },
+  "es": {
+    "title": "Limits"
+  },
+  "pt": {
+    "title": "Limits"
+  }
+}