From 48babc57b2abe6027af0946a2fb33dabbf0ca8a8 Mon Sep 17 00:00:00 2001
From: mustache0110 <108036851+mustache0110@users.noreply.github.com>
Date: Sat, 12 Nov 2022 10:45:48 -0500
Subject: [PATCH] simplified fancy fractions

---
 Synergism.css        | 16 ++++++++++++++++
 src/Octeracts.ts     |  2 +-
 src/Synergism.ts     |  4 +++-
 src/UpdateVisuals.ts |  4 ++--
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/Synergism.css b/Synergism.css
index f7a2888c8..ec171c54a 100644
--- a/Synergism.css
+++ b/Synergism.css
@@ -1879,6 +1879,22 @@ p#reincarnatehotkeys {
     margin: 0 0 0 10px;
 }
 
+.num {
+    font-size: 0.8em;
+    vertical-align: text-top;
+}
+
+.den {
+    font-size: 0.8em;
+}
+
+.den::before {
+    content: "\2044";
+    font-size: 1.25em;
+    margin-left: 0.15em;
+    margin-right: 0.1em;
+}
+
 #goldenQuarkamount {
     font-size: 1.2em;
     color: gold;
diff --git a/src/Octeracts.ts b/src/Octeracts.ts
index 93c86b69e..b00228c89 100644
--- a/src/Octeracts.ts
+++ b/src/Octeracts.ts
@@ -129,7 +129,7 @@ export class OcteractUpgrade extends DynamicUpgrade {
 
     public updateUpgradeHTML(): void {
         DOMCacheGetOrSet('singularityOcteractsMultiline').innerHTML = this.toString()
-        DOMCacheGetOrSet('singOcts').textContent = format(player.wowOcteracts, 2, true, true, true)
+        DOMCacheGetOrSet('singOcts').innerHTML = format(player.wowOcteracts, 2, true, true, true);
     }
 
     public computeFreeLevelSoftcap(): number {
diff --git a/src/Synergism.ts b/src/Synergism.ts
index a4baa21de..ca241dbc3 100644
--- a/src/Synergism.ts
+++ b/src/Synergism.ts
@@ -1878,6 +1878,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,
@@ -1972,7 +1973,8 @@ export const format = (
     // If the power is negative, then we will want to address that separately.
     if (power < 0 && fractional) {
         const powerLodge = Math.floor(-power / 3);
-        return `${format(mantissa, accuracy, long)} / ${Math.pow(10, -(power % 3))}${FormatList[powerLodge]}`
+        return `<span class='num'>${format(mantissa, accuracy, long)}</span>` +
+               `<span class='den'>${Math.pow(10, -(power % 3))}${FormatList[powerLodge]}</span>`
     }
     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)
diff --git a/src/UpdateVisuals.ts b/src/UpdateVisuals.ts
index 40e75c4b1..01ed93753 100644
--- a/src/UpdateVisuals.ts
+++ b/src/UpdateVisuals.ts
@@ -558,7 +558,7 @@ export const visualUpdateOcteracts = () => {
     if (G['currentTab'] !== 'singularity') {
         return
     }
-    DOMCacheGetOrSet('singOcts').textContent = format(player.wowOcteracts, 2, true, true, true)
+    DOMCacheGetOrSet('singOcts').innerHTML = format(player.wowOcteracts, 2, true, true, true);
 
     const perSecond = octeractGainPerSecond();
 
@@ -569,7 +569,7 @@ export const visualUpdateOcteracts = () => {
 
     const cTOCB = (calculateTotalOcteractCubeBonus() - 1) * 100;
     const cTOQB = (calculateTotalOcteractQuarkBonus() - 1) * 100;
-    DOMCacheGetOrSet('totalOcts').textContent = `${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)}%`