feat: respect integer format pref

apps/web/src/components/game/transcendencePanel.tsx

@@ -50,7 +50,7 @@ const categoryOrder: Array<TranscendenceUpgradeCategory> = [
  * @returns The JSX element.
  */
 const TranscendencePanel = (): JSX.Element => {
-  const { state, formatInteger, transcend, buyEchoUpgrade } = useGame();
+  const { state, formatInteger, transcend, buyEchoUpgrade, numberFormat } = useGame();
   const [ isPending, setIsPending ] = useState(false);
   const [ result, setResult ] = useState<{
     echoes: number;
@@ -152,7 +152,7 @@ const TranscendencePanel = (): JSX.Element => {
           type="button"
         >
           {"✨ Echo Shop ("}
-          {formatInteger(currentEchoes)}
+          {formatInteger(currentEchoes, numberFormat)}
           {" echoes)"}
         </button>
       </div>
@@ -184,7 +184,7 @@ const TranscendencePanel = (): JSX.Element => {
             }
             <p>
               {"Current Echoes: "}
-              <strong>{formatInteger(currentEchoes)}</strong>
+              <strong>{formatInteger(currentEchoes, numberFormat)}</strong>
             </p>
             <p>
               {"Current prestige count: "}
@@ -195,7 +195,7 @@ const TranscendencePanel = (): JSX.Element => {
                 {"Echoes on transcendence: "}
                 <strong>
                   {"+"}
-                  {formatInteger(echoPreview)}
+                  {formatInteger(echoPreview, numberFormat)}
                 </strong>
                 {echoMetaMultiplier > 1
                   && <span className="echo-meta-bonus">
@@ -238,7 +238,7 @@ const TranscendencePanel = (): JSX.Element => {
               >
                 {isPending
                   ? "Transcending..."
-                  : `🌌 Transcend (+${formatInteger(echoPreview)} Echoes)`}
+                  : `🌌 Transcend (+${formatInteger(echoPreview, numberFormat)} Echoes)`}
               </button>
               {error === null
                 ? null
@@ -248,7 +248,7 @@ const TranscendencePanel = (): JSX.Element => {
                 : <p className="success">
                   {"Transcended! Earned "}
                   <strong>
-                    {formatInteger(result.echoes)}
+                    {formatInteger(result.echoes, numberFormat)}
                     {" Echoes"}
                   </strong>
                   {". This is Transcendence "}
@@ -266,7 +266,7 @@ const TranscendencePanel = (): JSX.Element => {
           <p className="shop-balance">
             {"Balance: "}
             <strong>
-              {formatInteger(currentEchoes)}
+              {formatInteger(currentEchoes, numberFormat)}
               {" Echoes"}
             </strong>
           </p>
@@ -314,7 +314,7 @@ const TranscendencePanel = (): JSX.Element => {
                           <p className="upgrade-cost">
                             {purchased
                               ? "✅ Purchased"
-                              : `✨ ${formatInteger(upgrade.cost)} Echoes`}
+                              : `✨ ${formatInteger(upgrade.cost, numberFormat)} Echoes`}
                           </p>
                         </div>
                         {purchased