feat(metagarden): MetagardenLootboxCard - add lootbox count; update v…

…ueI18n pluralization config
MinterTeam · Mar 2, 2023 · c1f1ac4 · c1f1ac4
1 parent 1794d46
commit c1f1ac4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 21 deletions.
diff --git a/api/metagarden.js b/api/metagarden.js
@@ -65,15 +65,19 @@ export function claimSpotReward(privateKey) {
 
 /**
  * @param {string} privateKey
+ * @param {object} [options]
+ * @param {boolean} [options.keepActivated]
  * @return {Promise<Array<MetagardenLootbox>>}
  */
-export function getLootboxList(privateKey) {
+export function getLootboxList(privateKey, {keepActivated} = {}) {
     return instance.get('loot-box/list', {
             ecdsaAuth: {
                 privateKey,
             },
         })
-        .then((response) => response.data.data);
+        .then((response) => {
+            return keepActivated ? response.data.data : response.data.data.filter((item) => !item.isActivated);
+        });
 }
 
 /**
@@ -82,7 +86,7 @@ export function getLootboxList(privateKey) {
  * @returns {Promise<MetagardenLootbox|undefined>}
  */
 export function getLootbox(privateKey) {
-    return getLootboxList(privateKey)
+    return getLootboxList(privateKey, {keepActivated: true})
         .then((list) => {
             return list.find((item) => !item.isActivated);
         });

diff --git a/components/MetagardenLootboxCard.vue b/components/MetagardenLootboxCard.vue
@@ -1,34 +1,38 @@
 <script>
-import {getLootbox} from '~/api/metagarden.js';
+import {getLootboxList} from '~/api/metagarden.js';
 
 export default {
     fetch() {
-        return getLootbox(this.$store.getters.privateKey)
-            .then((lootbox) => {
-                this.lootbox = lootbox;
+        return getLootboxList(this.$store.getters.privateKey)
+            .then((lootboxList) => {
+                this.lootboxList = lootboxList;
             });
     },
     data() {
         return {
-            lootbox: null,
+            lootboxList: [],
         };
     },
 };
 </script>
 
 <template>
-    <nuxt-link :to="$i18nGetPreferredPath('/metagarden/lootbox')" class="card card__content--small card--metagarden-lootbox luminaire__card u-text-center" v-if="lootbox">
+    <nuxt-link :to="$i18nGetPreferredPath('/metagarden/lootbox')" class="card card__content--small card--metagarden-lootbox luminaire__card u-text-center" v-if="lootboxList.length > 0">
         <div class="luminaire__wrap">
             <div class="luminaire on"></div>
             <img class="u-mb-05" src="/img/metagarden-lootbox-fancy.png" srcset="/img/[email protected]" alt="" role="presentation" width="133" height="136">
         </div>
 
 
-        <h2 class="u-h3">{{ $td('You’ve got a new lootbox!', 'mg-lootbox.new-lootbox-button') }}</h2>
+        <h2 class="u-h3">
+            {{ $td('You’ve got', 'mg-lootbox.new-lootbox-button') }}
+            {{ $tc('mg-lootbox.new-lootbox-button-plural', lootboxList.length, {n: lootboxList.length}) }}!
+        </h2>
     </nuxt-link>
 </template>
 
-<style-backup lang="less" scoped>
+<style-backup>
+<!-- lang="less" scoped -->
 .luminaire__card {overflow: hidden; overflow: clip; position: relative; z-index: 0;}
 .luminaire__wrap {position: relative;}
 .luminaire {

diff --git a/lang/en.js b/lang/en.js
@@ -36,4 +36,7 @@ export default {
         'delegation-unbond-confirm-description': 'If you unbond coins, they will return to your address in approximately <strong>30&nbsp;days</strong> (518&#x202F;400 blocks) and will not be generating rewards during this&nbsp;period.',
         'delegation-move-confirm-description': 'Are you sure you want to move your coins? They will appear to new masternode in approximately <strong>30&nbsp;days</strong> (518&#x202F;400 blocks) and will not be generating rewards during this period.',
     },
+    'mg-lootbox': {
+        'new-lootbox-button-plural': 'a new lootbox | {n} lootboxes',
+    },
 };
diff --git a/lang/ru.js b/lang/ru.js
@@ -1,3 +1,31 @@
+/**
+ * choicesLength should be 3, e.g. машина | машины | машин
+ * @param {number} num
+ * @param {number} choicesLength
+ * @return {number}
+ */
+export function pluralizationRule(num, choicesLength) {
+    // 0 машин - third options
+    if (num === 0) {
+        return 2;
+    }
+
+    const teen = num > 10 && num < 20;
+    const endsWithOne = num % 10 === 1;
+    // 1 машина, 101 машина
+    if (!teen && endsWithOne) {
+        return 0;
+    }
+    // 2-4 машины, 22-24 машины, 132-134 машины
+    if (!teen && num % 10 >= 2 && num % 10 <= 4) {
+        return 1;
+    }
+
+    // 5-10 машин, 11-20 машин, 135-140 машин
+    return 2;
+}
+
+
 export default {
     common: {
         'logout': 'Выйти',
@@ -686,6 +714,7 @@ export default {
         'description-redeem-failed': 'Не получилось открыть лутбокс, обратитесь в поддержку для получения вознаграждения',
         'terms-title': 'Что такое лутбокс?',
         'terms-description': 'Лутбокс — это виртуальный призовой сундук, в котором находится случайная награда. Монеты, NFT или прочие игровые элементы.',
-        'new-lootbox-button': 'У вас новый лутбокс!',
+        'new-lootbox-button': 'У вас',
+        'new-lootbox-button-plural': 'новый лутбокс | {n} лутбокса | {n} лутбоксов',
     },
 };
diff --git a/nuxt-vue-i18n-options.js b/nuxt-vue-i18n-options.js
@@ -0,0 +1,16 @@
+import langRu, {pluralizationRule as pluralizationRuleRu} from './lang/ru.js';
+import langEn from './lang/en.js';
+
+// @see https://github.com/nuxt-modules/i18n/pull/605
+export default (context) => {
+    return {
+        fallbackLocale: 'en',
+        pluralizationRules: {
+            ru: pluralizationRuleRu,
+        },
+        messages: {
+            ru: langRu,
+            en: langEn,
+        },
+    };
+};
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -6,8 +6,6 @@ import webpack from 'webpack';
 const envConfig = dotenv.config();
 const envConfigParsed = envConfig.error ? {} : envConfig.parsed;
 
-import langEn from './lang/en.js';
-import langRu from './lang/ru.js';
 import {BASE_TITLE, BASE_DESCRIPTION, I18N_ROUTE_NAME_SEPARATOR, LANGUAGE_COOKIE_KEY, GOATCOUNTER_HOST, GOATCOUNTER_SCRIPT_HASH} from "./assets/variables.js";
 import * as varsConfig from "./assets/variables.js";
 
@@ -157,13 +155,7 @@ module.exports = {
             routesNameSeparator: I18N_ROUTE_NAME_SEPARATOR,
             strategy: 'prefix_except_default',
             rootRedirect: null,
-            vueI18n: {
-                fallbackLocale: 'en',
-                messages: {
-                    ru: langRu,
-                    en: langEn,
-                },
-            },
+            vueI18n: '~/nuxt-vue-i18n-options.js',
             seo: false,
             detectBrowserLanguage: false,
         }],