feat: compact format tech tree

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

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