From fe98d52c3148f7d72eea86ad81993b22e7fda063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 10 Jul 2024 20:51:36 -0500
Subject: [PATCH] feat: compact format tech tree

---
 src/app/tools/tank-performance/components/Info.tsx |  8 ++++----
 .../tools/tank-performance/components/TankRow.tsx  |  6 +++---
 .../tank-performance/components/TierBreakdown.tsx  |  6 +++---
 .../tools/tank-performance/components/Total.tsx    | 10 +++-------
 .../Characteristics/components/Modules.tsx         |  7 ++-----
 .../[id]/components/Model/TechTreeSection.tsx      | 14 ++++----------
 src/core/math/formatCompact.ts                     |  5 +++++
 7 files changed, 24 insertions(+), 32 deletions(-)
 create mode 100644 src/core/math/formatCompact.ts

diff --git a/src/app/tools/tank-performance/components/Info.tsx b/src/app/tools/tank-performance/components/Info.tsx
index 2e9859c25..781fbc2b0 100644
--- a/src/app/tools/tank-performance/components/Info.tsx
+++ b/src/app/tools/tank-performance/components/Info.tsx
@@ -4,11 +4,11 @@ import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
 import { use } from 'react';
 import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 
 export function Info() {
   const awaitedAverageDefinitions = use(averageDefinitions);
-  const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
   const ratio = useAveragesExclusionRatio();
   const samples = ratio * awaitedAverageDefinitions.samples.d_120;
 
@@ -19,9 +19,9 @@ export function Info() {
           <InfoCircledIcon />
         </Callout.Icon>
         <Callout.Text>
-          Career stats based on {numberFormat.format(Math.round(samples))}{' '}
-          players with at least 5K career battles and 1 battle in the past 120
-          days; updated daily.
+          Career stats based on {formatCompact(Math.round(samples))} players
+          with at least 5K career battles and 1 battle in the past 120 days;
+          updated daily.
         </Callout.Text>
       </Callout.Root>
     </Flex>
diff --git a/src/app/tools/tank-performance/components/TankRow.tsx b/src/app/tools/tank-performance/components/TankRow.tsx
index 0a6255854..06d7df79e 100644
--- a/src/app/tools/tank-performance/components/TankRow.tsx
+++ b/src/app/tools/tank-performance/components/TankRow.tsx
@@ -3,6 +3,7 @@ import { memo, use } from 'react';
 import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
 import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 
 interface TankRowProps {
@@ -13,7 +14,6 @@ export const TankRow = memo<TankRowProps>(
   ({ tank }) => {
     const awaitedAverageDefinitions = use(averageDefinitions);
     const averages = awaitedAverageDefinitions.averages[tank.id];
-    const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
     const ratio = useAveragesExclusionRatio();
 
     return (
@@ -24,10 +24,10 @@ export const TankRow = memo<TankRowProps>(
           {((averages.mu.wins / averages.mu.battles) * 100).toFixed(1)}%
         </Table.Cell>
         <Table.Cell align="center">
-          {numberFormat.format(Math.round(ratio * averages.samples.d_30))}
+          {formatCompact(Math.round(ratio * averages.samples.d_30))}
         </Table.Cell>
         <Table.Cell align="center">
-          {numberFormat.format(
+          {formatCompact(
             Math.round(ratio * averages.mu.battles * averages.samples.total),
           )}
         </Table.Cell>
diff --git a/src/app/tools/tank-performance/components/TierBreakdown.tsx b/src/app/tools/tank-performance/components/TierBreakdown.tsx
index f4b9fcd34..df41ac38d 100644
--- a/src/app/tools/tank-performance/components/TierBreakdown.tsx
+++ b/src/app/tools/tank-performance/components/TierBreakdown.tsx
@@ -12,13 +12,13 @@ import {
   Tier,
 } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { nivoTheme } from '../../../../core/nivo/theme';
 import strings from '../../../../lang/en-US.json';
 
 export function TierBreakdown() {
   const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
   const awaitedTankDefinitions = use(tankDefinitions);
-  const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
 
   return (
     <Flex justify="center" py="6">
@@ -57,14 +57,14 @@ export function TierBreakdown() {
             keys={[...TANK_CLASSES].reverse()}
             indexBy="tier"
             colors={{ scheme: 'dark2' }}
-            label={(d) => numberFormat.format(d.value as number)}
+            label={(d) => formatCompact(d.value as number)}
             margin={{ right: 96, bottom: 20, left: 40 }}
             legendLabel={(d) =>
               strings.common.tank_class_short[d.id as TankClass]
             }
             axisLeft={{
               tickSize: 0,
-              format: (value) => numberFormat.format(value as number),
+              format: (value) => formatCompact(value as number),
             }}
             axisBottom={{ tickSize: 0 }}
             legends={[
diff --git a/src/app/tools/tank-performance/components/Total.tsx b/src/app/tools/tank-performance/components/Total.tsx
index 3ede675b3..b83187e36 100644
--- a/src/app/tools/tank-performance/components/Total.tsx
+++ b/src/app/tools/tank-performance/components/Total.tsx
@@ -5,6 +5,7 @@ import {
   AverageDefinitionsAllStats,
   AverageDefinitionsEntryWithId,
 } from '../../../../core/blitzkit/averageDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
 import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
 
 interface TotalProps {
@@ -14,7 +15,6 @@ interface TotalProps {
 export const Total = memo<TotalProps>(
   ({ tanks }) => {
     const ratio = useAveragesExclusionRatio();
-    const numberFormat = Intl.NumberFormat(undefined, { notation: 'compact' });
     const sum = useCallback(
       (slice: (tank: AverageDefinitionsAllStats) => number) => {
         return tanks.reduce(
@@ -45,12 +45,8 @@ export const Total = memo<TotalProps>(
       <Table.Row>
         <StickyRowHeaderCell>Total</StickyRowHeaderCell>
         <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
-        <Table.Cell align="center">
-          {numberFormat.format(ratio * players)}
-        </Table.Cell>
-        <Table.Cell align="center">
-          {numberFormat.format(ratio * battles)}
-        </Table.Cell>
+        <Table.Cell align="center">{formatCompact(ratio * players)}</Table.Cell>
+        <Table.Cell align="center">{formatCompact(ratio * battles)}</Table.Cell>
         <Table.Cell align="center">
           {Math.round(damage).toLocaleString()}
         </Table.Cell>
diff --git a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
index 12029b36e..2e8b82ef3 100644
--- a/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx
@@ -19,6 +19,7 @@ import {
 } from '../../../../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkit/tankDefinitions/constants';
 import { tankIcon } from '../../../../../../../core/blitzkit/tankIcon';
+import { formatCompact } from '../../../../../../../core/math/formatCompact';
 import * as Duel from '../../../../../../../stores/duel';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
@@ -35,10 +36,6 @@ function ModuleButton({
   top: boolean;
   onClick: () => void;
 }) {
-  const numberFormat = Intl.NumberFormat(undefined, {
-    notation: 'compact',
-    maximumFractionDigits: 0,
-  });
   const isTank = unlock.type === 'vehicle';
   const button = (
     <IconButton
@@ -77,7 +74,7 @@ function ModuleButton({
           gap={isTank ? '1' : undefined}
         >
           <Text size="1" color="gray">
-            {numberFormat.format(unlock.cost.value)}
+            {formatCompact(unlock.cost.value)}
           </Text>
 
           <img
diff --git a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
index fee102b06..e92ff20c9 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
@@ -6,6 +6,7 @@ import PageWrapper from '../../../../../../components/PageWrapper';
 import { asset } from '../../../../../../core/blitzkit/asset';
 import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { formatCompact } from '../../../../../../core/math/formatCompact';
 import * as Duel from '../../../../../../stores/duel';
 
 export function TreeArrow({
@@ -99,7 +100,7 @@ export function TechTreeSection() {
                   }}
                 />
                 <Text color="gray" size="1">
-                  {ancestor.xp?.toLocaleString()}
+                  {formatCompact(ancestor.xp!)}
                 </Text>
               </Flex>
 
@@ -114,7 +115,7 @@ export function TechTreeSection() {
                   }}
                 />
                 <Text color="gray" size="1">
-                  {ancestor.price.value?.toLocaleString()}
+                  {formatCompact(ancestor.price.value)}
                 </Text>
               </Flex>
             </Flex>
@@ -141,14 +142,7 @@ export function TechTreeSection() {
         <Heading>Tech tree</Heading>
       </Flex>
 
-      {/* BIG TODO: use number format to shorten currencies */}
-
-      <Flex
-        align="center"
-        gap="6"
-        style={{}}
-        direction={{ initial: 'column', sm: 'row' }}
-      >
+      <Flex align="center" gap="6" direction={{ initial: 'column', sm: 'row' }}>
         {tank.ancestors && (
           <>
             <Flex
diff --git a/src/core/math/formatCompact.ts b/src/core/math/formatCompact.ts
new file mode 100644
index 000000000..9871953fc
--- /dev/null
+++ b/src/core/math/formatCompact.ts
@@ -0,0 +1,5 @@
+const numberFormat = Intl.NumberFormat('en', { notation: 'compact' });
+
+export function formatCompact(number: number) {
+  return numberFormat.format(number);
+}