Make notation comma settings more flexible

src/components/modals/options/NotationModal.vue

@@ -0,0 +1,146 @@
+<script>
+import * as ADNotations from "@antimatter-dimensions/notations";
+
+import ModalWrapper from "@/components/modals/ModalWrapper";
+import SliderComponent from "@/components/SliderComponent";
+
+export default {
+  name: "NotationModal",
+  components: {
+    ModalWrapper,
+    SliderComponent
+  },
+  data() {
+    return {
+      commaDigits: 0,
+      notationDigits: 0,
+    };
+  },
+  computed: {
+    sampleNums() {
+      const largestExponent = "123456789012345";
+      const numbers = [];
+      for (let digits = 4; digits < 16; digits++) numbers.push(Decimal.pow10(largestExponent.substring(0, digits)));
+      return numbers;
+    },
+    sliderProps() {
+      return {
+        min: 3,
+        max: 15,
+        interval: 1,
+        width: "100%",
+        tooltip: false
+      };
+    },
+  },
+  watch: {
+    commaDigits(newValue) {
+      player.options.notationDigits.comma = newValue;
+      ADNotations.Settings.exponentCommas.min = 10 ** newValue;
+    },
+    notationDigits(newValue) {
+      player.options.notationDigits.notation = newValue;
+      ADNotations.Settings.exponentCommas.max = 10 ** newValue;
+    },
+  },
+  // This puts the sliders in the right spots on initialization
+  created() {
+    const options = player.options.notationDigits;
+    this.commaDigits = options.comma;
+    this.notationDigits = options.notation;
+  },
+  methods: {
+    update() {
+      const options = player.options.notationDigits;
+      this.commaDigits = options.comma;
+      this.notationDigits = options.notation;
+    },
+
+    // These need a bit of extra logic to ensure that the notation threshold is always >= the comma threshold
+    adjustSliderComma(value) {
+      this.commaDigits = value;
+      player.options.notationDigits.comma = value;
+      if (value > this.notationDigits) this.adjustSliderNotation(value);
+    },
+    adjustSliderNotation(value) {
+      this.notationDigits = value;
+      player.options.notationDigits.notation = value;
+      if (value < this.commaDigits) this.adjustSliderComma(value);
+    }
+  },
+};
+</script>
+
+<template>
+  <ModalWrapper>
+    <template #header>
+      Exponent Notation Settings
+    </template>
+    You can adjust what your numbers look like when very large. With small values, the exponent will
+    be directly displayed with no additional formatting. Larger values will have commas inserted into the exponent
+    for clarity, and the largest values will apply notation formatting to the exponent in order to shorten it. You can
+    adjust the two thresholds between these regions below:
+    <br>
+    <br>
+    <div class="c-single-slider">
+      <b class="o-digit-text">Minimum for commas in exponent: {{ formatInt(commaDigits) }} digits</b>
+      <SliderComponent
+        class="o-primary-btn--slider__slider o-slider"
+        v-bind="sliderProps"
+        :value="commaDigits"
+        @input="adjustSliderComma($event)"
+      />
+    </div>
+    <div class="c-single-slider">
+      <b class="o-digit-text">Minimum for notation in exponent: {{ formatInt(notationDigits) }} digits</b>
+      <SliderComponent
+        class="o-primary-btn--slider__slider o-slider"
+        v-bind="sliderProps"
+        :value="notationDigits"
+        @input="adjustSliderNotation($event)"
+      />
+    </div>
+    <br>
+    Sample numbers for exponent formatting:
+    <div class="c-sample-numbers">
+      <span
+        v-for="(num, id) in sampleNums"
+        :key="id"
+        class="o-single-number"
+      >
+        {{ format(num) }}
+      </span>
+    </div>
+    <br>
+    Note: The interface is generally optimized for Scientific notation with settings of {{ formatInt(5) }}
+    and {{ formatInt(9) }} digits. Some text may look odd or overflow out of boxes if you
+    differ significantly from these values.
+  </ModalWrapper>
+</template>
+
+<style scoped>
+.c-single-slider {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.o-digit-text {
+  width: 40rem;
+}
+
+.o-slider {
+  width: 25rem;
+}
+
+.c-sample-numbers {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 1.5rem;
+}
+
+.o-single-number {
+  width: 33%;
+}
+</style>

src/components/tabs/options-visual/OptionsVisualTab.vue

@@ -97,13 +97,12 @@ export default {
             <SelectNotationDropdown />
           </template>
         </ExpandingControlBox>
-        <PrimaryToggleButton
-          v-model="commas"
-          class="o-primary-btn--option l-options-grid__button"
-          label="Exponent formatting:"
-          on="Commas"
-          off="Notation"
-        />
+        <OptionsButton
+          class="o-primary-btn--option"
+          onclick="Modal.notation.show();"
+        >
+          Open Exponent Notation Options
+        </OptionsButton>
       </div>
       <div class="l-options-grid__row">
         <OptionsButton

src/core/modal.js

@@ -32,6 +32,7 @@ import HiddenTabsModal from "@/components/modals/options/hidden-tabs/HiddenTabsM
 import HotkeysModal from "@/components/modals/options/HotkeysModal";
 import InfoDisplayOptionsModal from "@/components/modals/options/InfoDisplayOptionsModal";
 import NewsOptionsModal from "@/components/modals/options/NewsOptionsModal";
+import NotationModal from "@/components/modals/options/NotationModal";
 import PreferredTreeModal from "@/components/modals/options/PreferredTreeModal";
 import SingleGlyphAppearanceModal from "@/components/modals/options/glyph-appearance/SingleGlyphAppearanceModal";
 
@@ -229,6 +230,7 @@ Modal.newsOptions = new Modal(NewsOptionsModal);
 Modal.animationOptions = new Modal(AnimationOptionsModal);
 Modal.hiddenTabs = new Modal(HiddenTabsModal);
 Modal.preferredTree = new Modal(PreferredTreeModal);
+Modal.notation = new Modal(NotationModal);
 
 Modal.upgradeLock = new Modal(UpgradeMechanicLockModal, 1);
 Modal.deleteCompanion = new Modal(DeleteCompanionGlyphModal, 1);

src/core/new-game.js

@@ -84,7 +84,8 @@ export const NG = {
     player.speedrun.isUnlocked = hasSpeedrun;
     Themes.find(Theme.currentName()).set();
     Notations.all.find(n => n.name === player.options.notation).setAsCurrent();
-    ADNotations.Settings.exponentCommas.show = player.options.commas;
+    ADNotations.Settings.exponentCommas.min = 10 ** player.options.notationDigits.comma;
+    ADNotations.Settings.exponentCommas.max = 10 ** player.options.notationDigits.notation;
     player.lastUpdate = Date.now();
   }
 };

src/core/player.js

@@ -773,6 +773,10 @@ window.player = {
       includeAnimated: true,
     },
     notation: "Mixed scientific",
+    notationDigits: {
+      comma: 5,
+      notation: 9
+    },
     retryChallenge: false,
     retryCelestial: false,
     showAllChallenges: false,
@@ -784,7 +788,6 @@ window.player = {
     hotkeys: true,
     themeClassic: "Normal",
     themeModern: "Normal",
-    commas: true,
     updateRate: 33,
     newUI: true,
     offlineProgress: true,

src/core/secret-formula/h2p.js

@@ -107,10 +107,9 @@ which can be unlocked through importing certain phrases. Both UI layouts support
 <br>
 The notation used to display numbers in the game defaults to Mixed Scientific, but can be changed to one of numerous
 options in the drop-down menu. Many of these notations are intended as jokes and in some cases will format numbers
-in a way that causes text to spill over into other parts of the screen - this is not a bug. "Exponent formatting" is
-a setting affecting some notations which lets you toggle between showing the number in an exponent itself (with commas
-every three digits) or also applying the notation formatting to the exponent. Note that notation formatting is forced
-when exponents are larger than ${format(DC.E9)}.
+in a way that causes text to spill over into other parts of the screen - this is not a bug. You can additionally
+configure what numbers look like when they are extremely large using the "Exponent Notation Options" menu,
+although this may result in some odd text appearances in some places.
 <br>
 <br>
 Many events in the game trigger full-screen animations or pop-up modals which require you to confirm that you want to

src/core/storage/storage.js

@@ -483,7 +483,8 @@ export const GameStorage = {
     Glyphs.unseen = [];
     Glyphs.unequipped = [];
     Notations.find(player.options.notation).setAsCurrent(true);
-    ADNotations.Settings.exponentCommas.show = player.options.commas;
+    ADNotations.Settings.exponentCommas.min = 10 ** player.options.notationDigits.comma;
+    ADNotations.Settings.exponentCommas.max = 10 ** player.options.notationDigits.notation;
 
     EventHub.dispatch(GAME_EVENT.GAME_LOAD);
     AutomatorBackend.initializeFromSave();