simplified fancy fractions

Author: mustache0110

src/Octeracts.ts

@@ -4,7 +4,6 @@ import type { IUpgradeData } from './DynamicUpgrade';
 import { DynamicUpgrade } from './DynamicUpgrade';
 import type { Player } from './types/Synergism';
 import { DOMCacheGetOrSet } from './Cache/DOM';
-import { fancyFrac } from './UpdateVisuals';
 
 export interface IOcteractData extends IUpgradeData {
     costFormula (level: number, baseCost: number): number
@@ -112,13 +111,13 @@ export class OcteractUpgrade extends DynamicUpgrade {
                 <span style="color: lightblue">${this.description}</span>
                 <span style="color: ${color}"> Level ${format(this.level, 0 , true)}${maxLevel}${freeLevelInfo}</span>
                 <span style="color: gold">${this.getEffect().desc}</span>
-                Cost for next level: ${fancyFrac('flat', format(costNextLevel,2,true, true, true))} Octeracts.
-                Spent Octeracts: ${fancyFrac('flat', format(this.octeractsInvested, 2, true, true, true))}`
+                Cost for next level: ${format(costNextLevel,2,true, true, true)} Octeracts.
+                Spent Octeracts: ${format(this.octeractsInvested, 2, true, true, true)}`
     }
 
     public updateUpgradeHTML(): void {
         DOMCacheGetOrSet('singularityOcteractsMultiline').innerHTML = this.toString()
-        fancyFrac('singOcts', format(player.wowOcteracts, 2, true, true, true));
+        DOMCacheGetOrSet('singOcts').innerHTML = format(player.wowOcteracts, 2, true, true, true);
     }
 
     public computeFreeLevelSoftcap(): number {

src/Synergism.ts

@@ -1843,6 +1843,7 @@ const padEvery = (str: string, places = 3) => {
  * how many decimal points that are to be displayed (Values <10 if !long, <1000 if long).
  * only works up to 305 (308 - 3), however it only worked up to ~14 due to rounding errors regardless
  * @param long dictates whether or not a given number displays as scientific at 1,000,000. This auto defaults to short if input >= 1e13
+ * @param fractional returns html markup when the number requires (will not display nicely with .textContent)
  */
 export const format = (
     input: Decimal | number | { [Symbol.toPrimitive]: unknown } | null | undefined,
@@ -1910,22 +1911,24 @@ export const format = (
 
     // If the power is negative, then we will want to address that separately.
     if (power < 0 && !isDecimal(input) && fractional) {
+        const num = '<span class=\'num\'>';
+        const den = '</span><span class=\'den\'>';
         if (power <= -15) {
-            return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -power - 15)}Qa`
+            return `${num + format(mantissa, accuracy, long)}${den + Math.pow(10, -power - 15)}Qa</span>`
         }
         if (power <= -12) {
-            return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -power - 12)}T`
+            return `${num + format(mantissa, accuracy, long)}${den + Math.pow(10, -power - 12)}T</span>`
         }
         if (power <= -9) {
-            return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -power - 9)}B`
+            return `${num + format(mantissa, accuracy, long)}${den + Math.pow(10, -power - 9)}B</span>`
         }
         if (power <= -6) {
-            return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -power - 6)}M`
+            return `${num + format(mantissa, accuracy, long)}${den + Math.pow(10, -power - 6)}M</span>`
         }
         if (power <= -3) {
-            return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -power - 3)}K`
+            return `${num + format(mantissa, accuracy, long)}${den + Math.pow(10, -power - 3)}K</span>`
         }
-        return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -power)}`
+        return `${num + format(mantissa, accuracy, long)}${den + Math.pow(10, -power)}</span>`
     } else if (power < 6 || (long && power < 13)) {
         // If the power is less than 6 or format long and less than 13 use standard formatting (123,456,789)
         // Gets the standard representation of the number, safe as power is guaranteed to be > -12 and < 13

src/UpdateVisuals.ts

@@ -554,22 +554,12 @@ export const visualUpdateSingularity = () => {
     }
 }
 
-export const fancyFrac = (element: string, formatString: string) => {
-    const fracArray = formatString.split(' / ');
-    if (fracArray.length === 1) {
-        return element === 'flat' ? formatString : DOMCacheGetOrSet(element).textContent = formatString;
-    } else {
-        const fancyString = `<span class='num'>${fracArray[0]}</span><span class='den'>${fracArray[1]}</span>`;
-        return element === 'flat' ? fancyString : DOMCacheGetOrSet(element).innerHTML = fancyString;
-    }
-}
-
 export const visualUpdateOcteracts = () => {
     if (G['currentTab'] !== 'singularity') {
         return
     }
 
-    fancyFrac('singOcts',format(player.wowOcteracts, 2, true, true, true))
+    DOMCacheGetOrSet('singOcts').innerHTML = format(player.wowOcteracts, 2, true, true, true);
 
     const perSecond = octeractGainPerSecond();
 
@@ -580,7 +570,7 @@ export const visualUpdateOcteracts = () => {
 
     const cTOCB = (calculateTotalOcteractCubeBonus() - 1) * 100;
     const cTOQB = (calculateTotalOcteractQuarkBonus() - 1) * 100;
-    fancyFrac('totalOcts', format(player.totalWowOcteracts, 2, true, true, true));
+    DOMCacheGetOrSet('totalOcts').innerHTML = format(player.totalWowOcteracts, 2, true, true, true);
     DOMCacheGetOrSet('totalOcteractCubeBonus').style.display = cTOCB >= 0.001 ? 'block' : 'none';
     DOMCacheGetOrSet('totalOcteractQuarkBonus').style.display = cTOQB >= 0.001 ? 'block' : 'none';
     DOMCacheGetOrSet('octCubeBonus').textContent = `+${format(cTOCB, 3, true)}%`