L10N boss num (#13178)

* Uses browser JS `toLocaleString` to convert numbers to appropriately "marked" numbers
* Add filter for localizeNumber (suggestion from benkelaar)

Co-authored-by: Bart Enkelaar <benkelaar@gmail.com>

Co-authored-by: Bart Enkelaar <benkelaar@gmail.com>

website/client/src/components/groups/questSidebarSection.vue

@@ -149,7 +149,13 @@
             <div class="row boss-details">
               <div class="col-6">
                 <span class="float-left">
-                  {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }} <!-- eslint-disable-line max-len -->
+                  {{
+                    (Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100)
+                      | localizeNumber(user.preferences.language, { toFixed:2 })
+                  }} / {{
+                    parseFloat(questData.boss.hp)
+                      | localizeNumber(user.preferences.language, { toFixed:2 })
+                  }}
                   <!-- current boss hp uses ceil so
                     you don't underestimate damage needed to end quest-->
                 </span>
@@ -160,9 +166,13 @@
               >
                 <!-- @TODO: Why do we not sync quest
                   progress on the group doc? Each user could have different progress.-->
-                <span
+                <span class="float-right">
-                  class="float-right"
+                  {{
-                >{{ (user.party.quest.progress.up || 0) | floor(10) }} {{ $t('pendingDamageLabel') }}</span> <!-- eslint-disable-line max-len -->
+                    (user.party.quest.progress.up || 0)
+                      | floor(10)
+                      | localizeNumber(user.preferences.language, { toFixed:1 })
+                  }} {{ $t('pendingDamageLabel') }}
+                </span>
                 <!-- player's pending damage uses floor so you
                   don't overestimate damage you've already done-->
               </div>

website/client/src/filters/localizeNumber.js

@@ -0,0 +1,14 @@
+export default function localizeNumber (valIn, lang, optIn) {
+  // Extra catch just incase non number
+  const val = (typeof valIn === 'number') ? valIn : parseFloat(valIn);
+
+  // Options Management
+  const { toFixed } = optIn;
+  const optOut = {};
+  if (typeof toFixed !== 'undefined') {
+    optOut.maximumFractionDigits = toFixed;
+    optOut.minimumFractionDigits = toFixed;
+  }
+
+  return val.toLocaleString(lang, optOut);
+}

website/client/src/filters/registerGlobals.js

@@ -3,8 +3,10 @@ import round from './round';
 import floor from './floor';
 import roundBigNumber from './roundBigNumber';
 import floorWholeNumber from './floorWholeNumber';
+import localizeNumber from './localizeNumber';
 
 Vue.filter('round', round);
 Vue.filter('floor', floor);
 Vue.filter('roundBigNumber', roundBigNumber);
 Vue.filter('floorWholeNumber', floorWholeNumber);
+Vue.filter('localizeNumber', localizeNumber);