fix: history list short number

dsrkafuu · Mar 18, 2022 · 964abe0 · 964abe0
1 parent 28d709e
commit 964abe0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
@@ -4,15 +4,15 @@ import { version } from '../assets/meta';
 /**
  * format number
  */
-export function fmtNumber(shortNumber: boolean, number: number, decimal = 1) {
-  if (!shortNumber) {
-    return `${number}`;
-  }
-
+export function fmtNumber(number: number, shortNumber = false, decimal = 1) {
   if (typeof number !== 'number') {
     number = Number(number);
   }
 
+  if (!shortNumber) {
+    return number ? `${number}` : '0';
+  }
+
   let sign = '';
   if (number < 0) {
     sign = '-';

diff --git a/src/views/CombatantContent.tsx b/src/views/CombatantContent.tsx
@@ -58,7 +58,7 @@ function CombatantContent({
         <div className='combatant-content-data'>
           <span className='g-number'>
             {(typeof leftDisp === 'number' &&
-              fmtNumber(shortNumber, leftDisp)) ||
+              fmtNumber(leftDisp, shortNumber)) ||
               leftDisp}
           </span>
           <span className='g-counter'>{leftDispUnit}</span>
@@ -70,7 +70,7 @@ function CombatantContent({
       <div className='combatant-content-data'>
         <span className='g-number'>
           {(typeof rightDisp === 'number' &&
-            fmtNumber(shortNumber, rightDisp)) ||
+            fmtNumber(rightDisp, shortNumber)) ||
             rightDisp}
         </span>
         <span className='g-counter'>{rightDispUnit}</span>

diff --git a/src/views/CombatantDetail.tsx b/src/views/CombatantDetail.tsx
@@ -50,12 +50,12 @@ function CombatantDetail({ player, lockDetail }: CombatantDetailProps) {
     keyNotDisplayed('dps') &&
       items[items.length - 1].push({
         key: 'DPS',
-        value: fmtNumber(shortNumber, player.dps),
+        value: fmtNumber(player.dps, shortNumber),
       });
     keyNotDisplayed('hps') &&
       items[items.length - 1].push({
         key: 'HPS',
-        value: fmtNumber(shortNumber, player.hps),
+        value: fmtNumber(player.hps, shortNumber),
       });
     keyNotDisplayed('overHealPct') &&
       items[items.length - 1].push({
@@ -99,13 +99,13 @@ function CombatantDetail({ player, lockDetail }: CombatantDetailProps) {
       player.maxHit &&
       items[items.length - 1].push({
         key: player.maxHit,
-        value: fmtNumber(shortNumber, player.maxHitDamage),
+        value: fmtNumber(player.maxHitDamage, shortNumber),
       });
     bottomDisp !== 'maxhit' &&
       player.maxHeal &&
       items[items.length - 1].push({
         key: player.maxHeal,
-        value: fmtNumber(shortNumber, player.maxHealDamage),
+        value: fmtNumber(player.maxHealDamage, shortNumber),
       });
 
     // remove unused spliter

diff --git a/src/views/Encounter.tsx b/src/views/Encounter.tsx
@@ -85,7 +85,7 @@ function Encounter() {
           <span ref={zoneInnerRef}>{zoneName}</span>
         </div>
         <div className='encounter-content-numbers' onClick={handleSwitchDHPS}>
-          <span className='g-number'>{fmtNumber(shortNumber, totalDPS)}</span>
+          <span className='g-number'>{fmtNumber(totalDPS, shortNumber)}</span>
           <span className='g-counter'>{showDHPS.toUpperCase()}</span>
         </div>
       </div>

diff --git a/src/views/SettingsHistory.tsx b/src/views/SettingsHistory.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import { useStore } from '../hooks';
 import clsx from 'clsx';
-import { fmtDuration, fmtZoneName } from '../utils/formatters';
+import { fmtDuration, fmtNumber, fmtZoneName } from '../utils/formatters';
 import { useEffect, useState } from 'react';
 
 function parseTime(time: number) {
@@ -22,6 +22,7 @@ interface SettingsHistoryRowProps {
   zoneName: string;
   time?: number;
   onClick?: () => void;
+  shortNumber?: boolean;
 }
 
 function SettingsHistoryRow({
@@ -31,6 +32,7 @@ function SettingsHistoryRow({
   zoneName,
   time,
   onClick,
+  shortNumber,
 }: SettingsHistoryRowProps) {
   const [now, setNow] = useState(Date.now());
   useEffect(() => {
@@ -55,7 +57,7 @@ function SettingsHistoryRow({
         {fmtZoneName(zoneName)}
       </div>
       <div className='settings-history-item settings-history-dps'>
-        <span className='g-number'>{dps}</span>
+        <span className='g-number'>{fmtNumber(dps, shortNumber)}</span>
         <span className='g-counter'>DPS</span>
       </div>
     </div>
@@ -64,10 +66,12 @@ function SettingsHistoryRow({
 
 function SettingsHistory() {
   const { api } = useStore();
-  // do not use getters here,
-  // since getter may returns history data when selected
+  // do not use getters here, since getter may returns history data when selected
   const { duration, dps, zoneName } = api.data.encounter;
 
+  const { settings } = useStore();
+  const { shortNumber } = settings;
+
   return (
     <div className='settings-history'>
       <div className='settings-history-space'></div>
@@ -77,6 +81,7 @@ function SettingsHistory() {
         dps={dps}
         zoneName={zoneName}
         onClick={() => api.showHistory(-1)}
+        shortNumber={shortNumber}
       />
       {api.historys.map((item, idx) => {
         const { duration, dps, zoneName } = item.encounter;
@@ -89,6 +94,7 @@ function SettingsHistory() {
             dps={dps}
             zoneName={zoneName}
             onClick={() => api.showHistory(idx)}
+            shortNumber={shortNumber}
           />
         );
       })}