Use pluralization features in the i18n library

2026-04-25 07:18:35 -05:00 · 2022-10-24 15:31:23 -07:00 · 2022-10-24 15:31:23 -07:00 · b75b9db4fa
commit b75b9db4fa
parent 675951b8fb
20 changed files with 86 additions and 77 deletions
--- a/src/assets/i18n/de-DE.json
+++ b/src/assets/i18n/de-DE.json
@ -6,22 +6,18 @@
    "checkback": "Schau später vorbei!"
  },
  "time": {
-    "in": "in",
-    "remaining": "übrig",
-    "until": "Bis",
-    "left": "verbleibend",
-    "d": "Tg",
-    "day": "Tag",
-    "days": "Tage",
-    "h": "Std",
-    "hour": "Stunde",
-    "hours": "Stunden",
-    "m": "Min",
-    "minute": "Minute",
-    "minutes": "Minuten",
-    "s": "Sek",
-    "second": "Sekunde",
-    "seconds": "Sekunden"
+    "in": "in {time}",
+    "remaining": "{time} übrig",
+    "until": "Bis {time}",
+    "left": "{time} verbleibend",
+    "d": "{n}Tg | {n}Tg",
+    "h": "{n}Std | {n}Std",
+    "m": "{n}Min | {n}Min",
+    "s": "{n}Sek | {n}Sek",
+    "days": "{n} Tag | {n} Tage",
+    "hours": "{n} Stunde | {n} Stunden",
+    "minutes": "{n} Minute | {n} Minuten",
+    "seconds": "{n} Sekunde | {n} Sekunden"
  },
  "schedule": {
    "title": "Zeitplan",
--- a/src/assets/i18n/en-GB.json
+++ b/src/assets/i18n/en-GB.json
@ -4,7 +4,9 @@
    "next": "Next",
    "future": "Future"
  },
-  "time": {},
+  "time": {
+    "until": "Until {time}"
+  },
  "schedule": {
    "title": "Schedule",
    "types": {
--- a/src/assets/i18n/en-US.json
+++ b/src/assets/i18n/en-US.json
@ -6,22 +6,18 @@
    "checkback": "Check back soon!"
  },
  "time": {
-    "in": "in",
-    "remaining": "remaining",
-    "until": "Until",
-    "left": "left",
-    "d": "d",
-    "day": "day",
-    "days": "days",
-    "h": "h",
-    "hour": "hour",
-    "hours": "hours",
-    "m": "m",
-    "minute": "minute",
-    "minutes": "minutes",
-    "s": "s",
-    "second": "second",
-    "seconds": "seconds"
+    "in": "in {time}",
+    "remaining": "{time} remaining",
+    "until": "Until {time}",
+    "left": "{time} left",
+    "d": "{n}d | {n}d",
+    "h": "{n}h | {n}h",
+    "m": "{n}m | {n}m",
+    "s": "{n}s | {n}s",
+    "days": "{n} day | {n} days",
+    "hours": "{n} hour | {n} hours",
+    "minutes": "{n} minute | {n} minutes",
+    "seconds": "{n} second | {n} seconds"
  },
  "schedule": {
    "title": "Schedule",
--- a/src/assets/i18n/es-ES.json
+++ b/src/assets/i18n/es-ES.json
@ -4,7 +4,9 @@
    "next": "Próximo",
    "future": "Posteriores"
  },
-  "time": {},
+  "time": {
+    "until": "Hasta {time}"
+  },
  "schedule": {
    "title": "Calendarios",
    "types": {
--- a/src/assets/i18n/es-MX.json
+++ b/src/assets/i18n/es-MX.json
@ -4,7 +4,9 @@
    "next": "Siguiente",
    "future": "Posteriores"
  },
-  "time": {},
+  "time": {
+    "until": "Hasta {time}"
+  },
  "schedule": {
    "title": "Calendario",
    "types": {
--- a/src/assets/i18n/fr-CA.json
+++ b/src/assets/i18n/fr-CA.json
@ -4,7 +4,9 @@
    "next": "Suivant",
    "future": "Prochains"
  },
-  "time": {},
+  "time": {
+    "until": "Jusqu'au {time}"
+  },
  "schedule": {
    "title": "Horaire",
    "types": {
--- a/src/assets/i18n/fr-FR.json
+++ b/src/assets/i18n/fr-FR.json
@ -6,22 +6,18 @@
    "checkback": "Revenez voir plus tard !"
  },
  "time": {
-    "in": "dans",
-    "remaining": "restant",
-    "until": "Jusqu'au",
-    "left": "restantes",
-    "d": "j",
-    "day": "jour",
-    "days": "jours",
-    "h": "h",
-    "hour": "heure",
-    "hours": "heures",
-    "m": "m",
-    "minute": "minute",
-    "minutes": "minutes",
-    "s": "s",
-    "second": "seconde",
-    "seconds": "secondes"
+    "in": "dans {time}",
+    "remaining": "{time} restant",
+    "until": "Jusqu'au {time}",
+    "left": "{time} restantes",
+    "d": "{n}j | {n}j",
+    "h": "{n}h | {n}h",
+    "m": "{n}m | {n}m",
+    "s": "{n}s | {n}s",
+    "days": "{n} jour | {n} jours",
+    "hours": "{n} heure | {n} heures",
+    "minutes": "{n} minute | {n} minutes",
+    "seconds": "{n} seconde | {n} secondes"
  },
  "schedule": {
    "title": "Planning",
--- a/src/assets/i18n/it-IT.json
+++ b/src/assets/i18n/it-IT.json
@ -4,7 +4,9 @@
    "next": "Prossimo",
    "future": "Successivi"
  },
-  "time": {},
+  "time": {
+    "until": "Fino a: {time}"
+  },
  "schedule": {
    "title": "Calendario",
    "types": {
--- a/src/assets/i18n/ja-JP.json
+++ b/src/assets/i18n/ja-JP.json
@ -4,7 +4,9 @@
    "next": "つぎ",
    "future": "そのつぎ"
  },
-  "time": {},
+  "time": {
+    "until": "{time} まで"
+  },
  "schedule": {
    "title": "スケジュール",
    "types": {
--- a/src/assets/i18n/ko-KR.json
+++ b/src/assets/i18n/ko-KR.json
@ -4,7 +4,9 @@
    "next": "다음",
    "future": "그다음"
  },
-  "time": {},
+  "time": {
+    "until": "{time}까지"
+  },
  "schedule": {
    "title": "스케줄",
    "types": {
--- a/src/assets/i18n/nl-NL.json
+++ b/src/assets/i18n/nl-NL.json
@ -4,7 +4,9 @@
    "next": "Volgende",
    "future": "Daarna"
  },
-  "time": {},
+  "time": {
+    "until": "Tot {time}"
+  },
  "schedule": {
    "title": "Levelschema",
    "types": {
--- a/src/assets/i18n/ru-RU.json
+++ b/src/assets/i18n/ru-RU.json
@ -4,7 +4,9 @@
    "next": "Следующий",
    "future": "Скоро"
  },
-  "time": {},
+  "time": {
+    "until": "До {time}"
+  },
  "schedule": {
    "title": "Расписание",
    "types": {
--- a/src/assets/i18n/zh-CN.json
+++ b/src/assets/i18n/zh-CN.json
@ -4,7 +4,9 @@
    "next": "下次",
    "future": "下下次"
  },
-  "time": {},
+  "time": {
+    "until": "到{time}为止"
+  },
  "schedule": {
    "title": "日程",
    "types": {
--- a/src/assets/i18n/zh-TW.json
+++ b/src/assets/i18n/zh-TW.json
@ -4,7 +4,9 @@
    "next": "下次",
    "future": "下下次"
  },
-  "time": {},
+  "time": {
+    "until": "到{time}為止"
+  },
  "schedule": {
    "title": "時間表",
    "types": {
--- a/src/common/time.js
+++ b/src/common/time.js
@ -19,7 +19,8 @@ function getDurationParts(value) {
 // Countdown duration (e.g., 1d 13h 21m 19s)
 // "hideSeconds" only hides seconds when the time is >= 1 hour, this is used in the Salmon Run box
 export function formatDuration(value, hideSeconds = false) {
-  const i18n = useI18n()
+  const { t } = useI18n();
+
  let { negative, days, hours, minutes, seconds } = getDurationParts(value);

  // Add leading zeros
@ -28,10 +29,10 @@ export function formatDuration(value, hideSeconds = false) {
  seconds = ('0' + seconds).substr(-2);

  // Format for translation
-  days = days && `${days}${i18n.t('time.d')}`;
-  hours = (days || hours) && `${hours}${i18n.t('time.h')}`;
-  minutes = `${minutes}${i18n.t('time.m')}`;
-  seconds = `${seconds}${i18n.t('time.s')}`;
+  days = days && t('time.d', days);
+  hours = (days || hours) && t('time.h', hours);
+  minutes = t('time.m', { n: minutes }, minutes);
+  seconds = t('time.s', { n: seconds }, seconds);

  if (days)
    return negative + (hideSeconds ? `${days} ${hours} ${minutes}` : `${days} ${hours} ${minutes} ${seconds}`);
@ -47,16 +48,16 @@ export function formatDurationFromNow(value, hideSeconds = false) {
 }

 export function formatShortDuration(value) {
-  const i18n = useI18n()
+  const { t } = useI18n()
  let { negative, days, hours, minutes, seconds } = getDurationParts(value);

  if (days)
-    return `${negative}${days} ${days === 1 ? i18n.t('time.day') : i18n.t('time.days')}`;
+    return t('time.days', { n: `${negative}${days}` }, days);
  if (hours)
-    return `${negative}${hours} ${hours === 1 ? i18n.t('time.hour') : i18n.t('time.hours')}`;
+    return t('time.hours', { n: `${negative}${hours}` }, hours);
  if (minutes)
-    return `${negative}${minutes} ${minutes === 1 ? i18n.t('time.minute') : i18n.t('time.minutes')}`;
-  return `${negative}${seconds} ${seconds === 1 ? i18n.t('time.second') : i18n.t('time.seconds')}`;
+    return t('time.minutes', { n: `${negative}${minutes}` }, minutes);
+  return t('time.seconds', { n: `${negative}${seconds}` }, seconds);
 }

 export function formatShortDurationFromNow(value) {
--- a/src/components/ScheduleRow.vue
+++ b/src/components/ScheduleRow.vue
@ -28,7 +28,7 @@
            </div>

            <div class="text-sm text-zinc-300 text-shadow">
-              {{ $t('time.in') }} {{ formatDurationFromNow(props.schedule.startTime) }}
+              {{ $t('time.in', { time: formatDurationFromNow(props.schedule.startTime) }) }}
            </div>

            <div class="text-sm text-zinc-300 text-shadow">
--- a/src/components/gear/DailyDropGear.vue
+++ b/src/components/gear/DailyDropGear.vue
@ -26,7 +26,7 @@

      <template v-if="brand">
        <div class="text-center font-splatoon2 text-splatoon-yellow">
-          {{ $t('time.until') }} {{ $d(brand?.saleEndTime, 'dateTimeShortWeekday') }}
+          {{ $t('time.until', { time: $d(brand?.saleEndTime, 'dateTimeShortWeekday') }) }}
        </div>
        <div class="space-y-4 px-4">
          <GearCardHorizontal
--- a/src/components/gear/GearCard.vue
+++ b/src/components/gear/GearCard.vue
@ -68,8 +68,7 @@
      </div>

      <div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
-        {{ formatShortDurationFromNow(props.gear.saleEndTime) }}
-        {{ $t('time.left') }}
+        {{ $t('time.left', { time: formatShortDurationFromNow(props.gear.saleEndTime) }) }}
      </div>
    </div>
  </div>
--- a/src/components/salmonrun/ExpandedSalmonRunRow.vue
+++ b/src/components/salmonrun/ExpandedSalmonRunRow.vue
@ -7,10 +7,10 @@
        {{ $d(props.schedule.endTime, 'dateTimeShort') }}
      </div>
      <div class="text-shadow text-zinc-300 ss:hidden">
-        {{ formatDurationFromNow(props.schedule.endTime) }} {{ $t('time.remaining') }}
+        {{ $t('time.remaining', { time: formatDurationFromNow(props.schedule.endTime) }) }}
      </div>
      <div class="hidden ss:block text-shadow text-white text-xl">
-        {{ formatDurationHoursFromNow(props.schedule.endTime) }} {{ $t('time.remaining') }}
+        {{ $t('time.remaining', { time: formatDurationHoursFromNow(props.schedule.endTime) }) }}
      </div>
    </div>

--- a/src/components/salmonrun/SalmonRunRow.vue
+++ b/src/components/salmonrun/SalmonRunRow.vue
@ -12,8 +12,7 @@
      </div>

      <div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
-        {{ $t('time.in') }}
-        {{ formatDurationFromNow(props.schedule.startTime, true) }}
+        {{ $t('time.in', { time: formatDurationFromNow(props.schedule.startTime, true) }) }}
      </div>
    </div>