Make sidebar resource customizable

public/stylesheets/new-ui-styles.css

@@ -87,97 +87,11 @@ body.t-s12 {
   transition-delay: 0s;
 }
 
-.c-sidebar-resource {
-  display: flex;
-  flex-direction: column;
-  width: var(--sidebar-width);
-  height: 7rem;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--color-base);
-  border-right: 0.1rem solid var(--color-accent);
-  border-bottom: 0.1rem solid var(--color-accent);
-  padding: 1rem;
-}
-
-.c-sidebar-resource:last-child {
-  border-bottom-right-radius: var(--var-border-radius, 0.5rem);
-}
-
-.c-sidebar-resource h2 {
-  z-index: 1;
-  font-size: 1.9rem;
-  margin: 0;
-}
-
-.t-dark .c-sidebar-resource h2,
-.t-dark-metro .c-sidebar-resource h2 {
-  text-shadow: 0 0 0.1rem rgba(0, 0, 0, 50%), -0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 80%);
-}
-
-.c-sidebar-resource__information {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  font-size: 1.5rem;
-  color: var(--color-text);
-}
-
 .resource-gain {
   font-size: 0.7rem;
   color: var(--color-text);
 }
 
-.c-sidebar-resource__name {
-  font-size: 1.2rem;
-}
-
-.o-sidebar-currency--antimatter {
-  color: black;
-}
-
-.t-normal .o-sidebar-currency--antimatter {
-  color: var(--color-accent);
-}
-
-.t-dark .o-sidebar-currency--antimatter,
-.t-amoled .o-sidebar-currency--antimatter,
-.t-s6 .o-sidebar-currency--antimatter,
-.t-s10 .o-sidebar-currency--antimatter {
-  animation: a-game-header__antimatter--glow 25s infinite;
-}
-
-.t-s11 .o-sidebar-currency--antimatter {
-  animation: a-game-header__antimatter--glow-blob 25s infinite;
-}
-
-.t-dark-metro .o-sidebar-currency--antimatter,
-.t-amoled-metro .o-sidebar-currency--antimatter {
-  color: #e0e0e0;
-}
-
-.o-sidebar-currency--infinity {
-  color: var(--color-infinity);
-}
-
-.o-sidebar-currency--eternity {
-  color: var(--color-eternity);
-}
-
-.o-sidebar-currency--reality {
-  color: var(--color-reality);
-}
-
-.t-dark .o-sidebar-currency--reality,
-.t-dark-metro .o-sidebar-currency--reality {
-  color: var(--color-reality);
-}
-
-.o-sidebar-currency--pelle {
-  color: var(--color-pelle--base);
-}
-
 .resource-infinity-canreset,
 .resource-eternity-canreset {
   background-color: black;

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

@@ -1,12 +1,11 @@
 <script>
-import * as ADNotations from "@antimatter-dimensions/notations";
-
 import ExpandingControlBox from "@/components/ExpandingControlBox";
 import OpenModalHotkeysButton from "@/components/OpenModalHotkeysButton";
 import OptionsButton from "@/components/OptionsButton";
 import PrimaryToggleButton from "@/components/PrimaryToggleButton";
 import SelectNotationDropdown from "@/components/tabs/options-visual/SelectNotationDropdown";
 import SelectThemeDropdown from "@/components/tabs/options-visual/SelectThemeDropdown";
+import SelectSidebarDropdown from "@/components/tabs/options-visual/SelectSidebarDropdown";
 import UpdateRateSlider from "./UpdateRateSlider";
 
 export default {
@@ -18,22 +17,28 @@ export default {
     OptionsButton,
     OpenModalHotkeysButton,
     SelectThemeDropdown,
-    SelectNotationDropdown
+    SelectNotationDropdown,
+    SelectSidebarDropdown
   },
   data() {
     return {
       theme: "",
       notation: "",
+      sidebarResource: "",
       headerTextColored: true,
     };
   },
   computed: {
+    sidebarDB: () => GameDatabase.sidebarResources,
     themeLabel() {
       return `Theme: ${Themes.find(this.theme).displayName()}`;
     },
     notationLabel() {
       return `Notation: ${this.notation}`;
     },
+    sidebarLabel() {
+      return `Sidebar (Modern UI): ${this.sidebarResource}`;
+    },
     UILabel() {
       return `UI: ${this.$viewModel.newUI ? "Modern" : "Classic"}`;
     }
@@ -48,6 +53,9 @@ export default {
       const options = player.options;
       this.theme = Theme.currentName();
       this.notation = options.notation;
+      this.sidebarResource = player.options.sidebarResourceID === 0
+        ? "Latest Resource"
+        : this.sidebarDB.find(e => e.id === player.options.sidebarResourceID).optionName;
       this.headerTextColored = options.headerTextColored;
     },
   }
@@ -130,6 +138,16 @@ export default {
           class="o-primary-btn--option l-options-grid__button"
           label="Relative prestige gain text coloring:"
         />
+        <ExpandingControlBox
+          v-if="$viewModel.newUI"
+          class="l-options-grid__button c-options-grid__notations"
+          button-class="o-primary-btn o-primary-btn--option l-options-grid__notations-header"
+          :label="sidebarLabel"
+        >
+          <template #dropdown>
+            <SelectSidebarDropdown />
+          </template>
+        </ExpandingControlBox>
       </div>
       <OpenModalHotkeysButton />
     </div>

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

@@ -0,0 +1,38 @@
+<script>
+export default {
+  name: "SelectSidebarDropdown",
+  computed: {
+    resourceDB: () => GameDatabase.sidebarResources,
+    resources() {
+      return this.resourceDB.filter(e => e.isAvailable());
+    }
+  },
+  methods: {
+    setResource(id) {
+      player.options.sidebarResourceID = id;
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="l-select-theme">
+    <div class="l-select-theme__inner">
+      <div
+        key="Default"
+        class="o-primary-btn l-select-theme__item c-select-theme__item"
+        @click="setResource(0)"
+      >
+        Latest Resource
+      </div>
+      <div
+        v-for="res in resources"
+        :key="res.name"
+        class="o-primary-btn l-select-theme__item c-select-theme__item"
+        @click="setResource(res.id)"
+      >
+        {{ res.optionName }}
+      </div>
+    </div>
+  </div>
+</template>

src/components/ui-modes/modern/ModernSidebarCurrency.vue

@@ -3,92 +3,178 @@ export default {
   name: "ModernSidebarCurrency",
   data() {
     return {
-      AM: new Decimal(0),
-      IP: new Decimal(0),
-      EP: new Decimal(0),
-      RM: new Decimal(0),
-      IM: 0,
-      RS: new Decimal(0),
-      machineStr: "",
-      showIP: false,
-      showEP: false,
-      showRM: false,
-      showRS: false,
+      sidebarID: 0,
+      resourceName: "",
+      resourceValue: new Decimal(0)
     };
   },
+  computed: {
+    resourceDB: () => GameDatabase.sidebarResources,
+    numDBEntries() {
+      return this.resourceDB.length;
+    },
+    resource() {
+      // With "default" sorting, return the latest unlocked resource - otherwise, return the specified one
+      return this.sidebarID === 0
+        ? this.resourceDB.filter(e => e.isAvailable()).sort((a, b) => b.id - a.id)[0]
+        : this.resourceDB.find(e => e.id === this.sidebarID);
+    },
+    displayValue() {
+      // RM + iM seems to cause strange, undesirable linebreaks
+      return this.resource.formatValue(this.resourceValue).replace(" + ", "+");
+    }
+  },
   methods: {
     update() {
-      this.AM.copyFrom(Currency.antimatter);
-      this.IP.copyFrom(Currency.infinityPoints.value.floor());
-      this.EP.copyFrom(Currency.eternityPoints.value.floor());
-      this.RM.copyFrom(Currency.realityMachines.value.floor());
-      this.IM = Currency.imaginaryMachines.value;
-      this.RS.copyFrom(Currency.realityShards);
-      this.machineStr = formatMachines(this.RM, this.IM);
-      this.showIP = PlayerProgress.infinityUnlocked();
-      this.showEP = PlayerProgress.eternityUnlocked();
-      this.showRM = PlayerProgress.realityUnlocked();
-      this.showRS = Pelle.isDoomed;
+      this.sidebarID = player.options.sidebarResourceID;
+      this.resourceName = this.resource.resourceName ?? this.resource.optionName;
+      this.resourceValue.copyFrom(this.resource.value());
+    },
+    cycleResource(dir) {
+      const oldID = this.sidebarID;
+      this.sidebarID = (this.sidebarID + this.numDBEntries + dir) % this.numDBEntries;
+      while (this.sidebarID !== oldID) {
+        if (this.resource.isAvailable()) break;
+        this.sidebarID = (this.sidebarID + this.numDBEntries + dir) % this.numDBEntries;
+      }
+      player.options.sidebarResourceID = this.sidebarID;
+    },
+    containerClass() {
+      return {
+        "c-sidebar-resource": true,
+        "c-sidebar-resource-default": this.sidebarID === 0,
+      };
+    },
+    styleObject() {
+      const strLen = this.displayValue.length;
+      return {
+        transform: `scale(${strLen < 10 ? 1 : 10 / strLen})`,
+      };
     }
   },
 };
 </script>
 
 <template>
-  <div class="c-sidebar-resource">
-    <template v-if="showRS">
-      <h2 class="o-sidebar-currency--pelle">
-        {{ format(RS, 2) }}
-      </h2>
-      <div class="c-sidebar-resource__information">
-        <span class="c-sidebar-resource__name">{{ pluralize("Reality Shard", RS) }}</span>
-      </div>
-    </template>
-    <template v-else-if="showRM">
-      <template v-if="IM === 0">
-        <h2 class="o-sidebar-currency--reality">
-          {{ format(RM, 2) }}
-        </h2>
-        <div class="c-sidebar-resource__information">
-          <span class="c-sidebar-resource__name">{{ pluralize("Reality Machine", RM) }}</span>
-        </div>
-      </template>
-      <template v-else>
-        <h3 class="o-sidebar-currency--reality">
-          {{ machineStr }}
-        </h3>
-        <div class="c-sidebar-resource__information">
-          <span class="c-sidebar-resource__name">Machines</span>
-        </div>
-      </template>
-    </template>
-    <template v-else-if="showEP">
-      <h2 class="o-sidebar-currency--eternity">
-        {{ format(EP, 2) }}
-      </h2>
-      <div class="c-sidebar-resource__information">
-        <span class="c-sidebar-resource__name">{{ pluralize("Eternity Point", EP) }}</span>
-      </div>
-    </template>
-    <template v-else-if="showIP">
-      <h2 class="o-sidebar-currency--infinity">
-        {{ format(IP, 2) }}
-      </h2>
-      <div class="c-sidebar-resource__information">
-        <span class="c-sidebar-resource__name">{{ pluralize("Infinity Point", IP) }}</span>
-      </div>
-    </template>
-    <template v-else>
-      <h2 class="o-sidebar-currency--antimatter">
-        {{ format(AM, 2, 1) }}
-      </h2>
-      <div class="c-sidebar-resource__information">
-        <span class="c-sidebar-resource__name">Antimatter</span>
-      </div>
-    </template>
+  <div
+    :class="containerClass()"
+    @click.exact="cycleResource(1)"
+    @click.shift.exact="cycleResource(-1)"
+  >
+    <h2
+      :class="resource.formatClass"
+      :style="styleObject()"
+    >
+      {{ displayValue }}
+    </h2>
+    <div class="c-sidebar-resource__information">
+      <span class="c-sidebar-resource__name">{{ resourceName }}</span>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.c-sidebar-resource {
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width);
+  height: 7rem;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-base);
+  border-right: 0.1rem solid var(--color-accent);
+  border-bottom: 0.1rem solid var(--color-accent);
+  padding: 1rem;
+  user-select: none;
+}
 
+.c-sidebar-resource-default {
+  border-width: 0.3rem;
+}
+
+.c-sidebar-resource:last-child {
+  border-bottom-right-radius: var(--var-border-radius, 0.5rem);
+}
+
+.c-sidebar-resource h2 {
+  z-index: 1;
+  font-size: 1.9rem;
+  margin: 0;
+}
+
+.t-dark .c-sidebar-resource h2,
+.t-dark-metro .c-sidebar-resource h2 {
+  text-shadow: 0 0 0.1rem rgba(0, 0, 0, 50%), -0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 80%);
+}
+
+.c-sidebar-resource__information {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 1.5rem;
+  color: var(--color-text);
+}
+
+.c-sidebar-resource__name {
+  font-size: 1.2rem;
+}
+
+.o-sidebar-currency--antimatter {
+  color: black;
+}
+
+.t-normal .o-sidebar-currency--antimatter {
+  color: var(--color-accent);
+}
+
+.t-dark .o-sidebar-currency--antimatter,
+.t-amoled .o-sidebar-currency--antimatter,
+.t-s6 .o-sidebar-currency--antimatter,
+.t-s10 .o-sidebar-currency--antimatter {
+  animation: a-game-header__antimatter--glow 25s infinite;
+}
+
+.t-s11 .o-sidebar-currency--antimatter {
+  animation: a-game-header__antimatter--glow-blob 25s infinite;
+}
+
+.t-dark-metro .o-sidebar-currency--antimatter,
+.t-amoled-metro .o-sidebar-currency--antimatter {
+  color: #e0e0e0;
+}
+
+.o-sidebar-currency--infinity {
+  color: var(--color-infinity);
+}
+
+.o-sidebar-currency--replicanti {
+  /* Taken from glyph-types.js */
+  color: #03a9f4;
+}
+
+.o-sidebar-currency--eternity {
+  color: var(--color-eternity);
+}
+
+.o-sidebar-currency--dilation {
+  color: var(--color-dilation);
+}
+
+.o-sidebar-currency--reality {
+  color: var(--color-reality);
+}
+
+.o-sidebar-currency--effarig {
+  color: var(--color-effarig--base);
+}
+
+.o-sidebar-currency--laitela {
+  color: var(--color-laitela--base);
+  text-shadow: 0.1rem 0.1rem 0.1rem var(--color-laitela--accent);
+}
+
+.o-sidebar-currency--pelle {
+  color: var(--color-pelle--base);
+}
 </style>

src/core/player.js

@@ -777,6 +777,7 @@ window.player = {
       comma: 5,
       notation: 9
     },
+    sidebarResourceID: 0,
     retryChallenge: false,
     retryCelestial: false,
     showAllChallenges: false,

src/core/secret-formula/game-database.js

@@ -16,6 +16,7 @@ import { news } from "./news";
 import { progressStages } from "./progress-checker";
 import { reality } from "./reality";
 import { shopPurchases } from "./shop-purchases";
+import { sidebarResources } from "./sidebar-resources";
 import { speedrunMilestones } from "./speedrun-milestones";
 import { tabNotifications } from "./tab-notifications";
 import { tabs } from "./tabs";
@@ -38,6 +39,7 @@ export const GameDatabase = {
   news,
   progressStages,
   reality,
+  sidebarResources,
   shopPurchases,
   speedrunMilestones,
   tabNotifications,

src/core/secret-formula/sidebar-resources.js

@@ -0,0 +1,134 @@
+export const sidebarResources = [
+  // Note: ID 0 is interpreted in the Vue component as "the largest unlocked ID" - do not use ID 0
+  {
+    id: 1,
+    optionName: "Blob",
+    isAvailable: () => Themes.available().map(t => t.name).includes("S11"),
+    // This is a dummy value to prevent vue errors
+    value: () => new Decimal(1),
+    formatValue: () => "\uE010",
+    formatClass: "o-sidebar-currency--antimatter",
+  },
+  {
+    id: 2,
+    optionName: "Antimatter",
+    isAvailable: () => true,
+    value: () => Currency.antimatter.value,
+    formatValue: x => format(x, 2, 1),
+    formatClass: "o-sidebar-currency--antimatter",
+  },
+  {
+    id: 3,
+    optionName: "Infinity Points",
+    isAvailable: () => PlayerProgress.infinityUnlocked(),
+    value: () => Currency.infinityPoints.value.floor(),
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--infinity",
+  },
+  {
+    id: 4,
+    optionName: "Replicanti",
+    isAvailable: () => Replicanti.areUnlocked || PlayerProgress.eternityUnlocked(),
+    value: () => Replicanti.amount,
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--replicanti",
+  },
+  {
+    id: 5,
+    optionName: "Eternity Points",
+    isAvailable: () => PlayerProgress.eternityUnlocked(),
+    value: () => Currency.eternityPoints.value.floor(),
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--eternity",
+  },
+  {
+    id: 6,
+    optionName: "Total TT",
+    isAvailable: () => PlayerProgress.eternityUnlocked(),
+    value: () => player.timestudy.theorem.plus(TimeTheorems.calculateTimeStudiesCost()),
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--eternity",
+  },
+  {
+    id: 7,
+    optionName: "Tachyon Particles",
+    isAvailable: () => PlayerProgress.dilationUnlocked() || PlayerProgress.realityUnlocked(),
+    value: () => Currency.tachyonParticles.value,
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--dilation",
+  },
+  {
+    id: 8,
+    optionName: "Dilated Time",
+    isAvailable: () => PlayerProgress.dilationUnlocked() || PlayerProgress.realityUnlocked(),
+    value: () => Currency.dilatedTime.value,
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--dilation",
+  },
+  {
+    id: 9,
+    optionName: "Reality Machines",
+    isAvailable: () => PlayerProgress.realityUnlocked(),
+    value: () => Currency.realityMachines.value,
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--reality",
+  },
+  {
+    id: 10,
+    optionName: "Relic Shards",
+    isAvailable: () => TeresaUnlocks.effarig.isUnlocked,
+    value: () => new Decimal(Currency.relicShards.value),
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--effarig",
+  },
+  {
+    id: 11,
+    optionName: "Imaginary Machines",
+    isAvailable: () => MachineHandler.isIMUnlocked,
+    value: () => new Decimal(Currency.imaginaryMachines.value),
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--reality",
+  },
+  {
+    id: 12,
+    optionName: "All Machines",
+    resourceName: "Machines",
+    isAvailable: () => MachineHandler.isIMUnlocked,
+    // This is a dummy value to prevent vue errors
+    value: () => Currency.realityMachines.value,
+    formatValue: () => formatMachines(Currency.realityMachines.value, Currency.imaginaryMachines.value),
+    formatClass: "o-sidebar-currency--reality",
+  },
+  {
+    id: 13,
+    optionName: "Dark Matter",
+    isAvailable: () => Laitela.isUnlocked,
+    value: () => Currency.darkMatter,
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--laitela",
+  },
+  {
+    id: 14,
+    optionName: "Dark Energy",
+    isAvailable: () => Laitela.isUnlocked,
+    value: () => new Decimal(Currency.darkEnergy.value),
+    formatValue: x => format(x, 2, 2),
+    formatClass: "o-sidebar-currency--laitela",
+  },
+  {
+    id: 15,
+    optionName: "Singularities",
+    isAvailable: () => Laitela.isUnlocked,
+    value: () => new Decimal(Currency.singularities.value),
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--laitela",
+  },
+  {
+    id: 16,
+    optionName: "Reality Shards",
+    isAvailable: () => Pelle.isDoomed,
+    value: () => Currency.realityShards,
+    formatValue: x => format(x, 2),
+    formatClass: "o-sidebar-currency--pelle",
+  },
+];